collavre 0.15.0 → 0.20.0

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

@@ -33,6 +33,8 @@ export default class extends Controller {
     this.openFromUrlTimeout = null
     this.handleCreativeClick = this.handleCreativeClick.bind(this)
     this.handleCreativeDestroyed = this.handleCreativeDestroyed.bind(this)
+    this.handleEditingStart = this.handleEditingStart.bind(this)
+    this.handleEditingStop = this.handleEditingStop.bind(this)
     this.handleTouchStart = this.handleTouchStart.bind(this)
     this.handleTouchEnd = this.handleTouchEnd.bind(this)
     this.handleResizeMove = this.handleResizeMove.bind(this)
@@ -54,6 +56,8 @@ export default class extends Controller {
 
     document.addEventListener(CREATIVE_CLICK_EVENT, this.handleCreativeClick)
     document.addEventListener(CREATIVE_DESTROYED_EVENT, this.handleCreativeDestroyed)
+    document.addEventListener('creative-editing:start', this.handleEditingStart)
+    document.addEventListener('creative-editing:stop', this.handleEditingStop)
     this.element.addEventListener('wheel', this.handlePopupWheel, { passive: false })
     window.addEventListener('online', this.handleOnline)
     window.addEventListener('focus', this.handleWindowFocus)
@@ -121,6 +125,8 @@ export default class extends Controller {
     this.clearPendingOpenFromUrl()
     document.removeEventListener(CREATIVE_CLICK_EVENT, this.handleCreativeClick)
     document.removeEventListener(CREATIVE_DESTROYED_EVENT, this.handleCreativeDestroyed)
+    document.removeEventListener('creative-editing:start', this.handleEditingStart)
+    document.removeEventListener('creative-editing:stop', this.handleEditingStop)
     this.element.removeEventListener('wheel', this.handlePopupWheel)
     window.removeEventListener('online', this.handleOnline)
     window.removeEventListener('focus', this.handleWindowFocus)
@@ -202,6 +208,16 @@ export default class extends Controller {
     }
   }
 
+  handleEditingStart() {
+    if (this.element.style.display === 'flex' && !this.isFullscreen()) {
+      this.element.classList.add('editor-behind')
+    }
+  }
+
+  handleEditingStop() {
+    this.element.classList.remove('editor-behind')
+  }
+
   async open(button, { creativeId, highlightId } = {}) {
     this.currentButton = button
     const resolvedCreativeId = creativeId || button?.dataset.creativeId
@@ -378,7 +394,7 @@ export default class extends Controller {
     this._releaseWakeLock()
 
     this.element.style.display = 'none'
-    this.element.classList.remove('open')
+    this.element.classList.remove('open', 'editor-behind')
     this.element.style.width = ''
     this.element.style.height = ''
     this.element.style.left = ''
@@ -623,6 +639,16 @@ export default class extends Controller {
   // Enter fullscreen immediately without animation (for auto-fullscreen on page load)
   _enterFullscreenImmediate() {
     const el = this.element
+
+    // Save current inline styles so exit-fullscreen can restore them
+    this._savedStyles = {
+      top: el.style.top,
+      right: el.style.right,
+      left: el.style.left,
+      width: el.style.width,
+      height: el.style.height,
+    }
+
     el.style.transition = 'none'
     el.dataset.fullscreen = 'true'
     document.body.classList.add('chat-fullscreen')
@@ -695,8 +721,10 @@ export default class extends Controller {
       }
 
       // Clean up inline styles after transition ends
-      const cleanup = () => {
-        el.removeEventListener('transitionend', cleanup)
+      this._enterCleanupFn = () => {
+        el.removeEventListener('transitionend', this._enterCleanupFn)
+        this._enterCleanupTimer = null
+        this._enterCleanupFn = null
         el.style.top = ''
         el.style.left = ''
         el.style.right = ''
@@ -705,11 +733,22 @@ export default class extends Controller {
         el.style.height = ''
         el.style.position = ''
       }
-      el.addEventListener('transitionend', cleanup, { once: true })
+      el.addEventListener('transitionend', this._enterCleanupFn, { once: true })
       // Fallback if transitionend doesn't fire
-      setTimeout(cleanup, 300)
+      this._enterCleanupTimer = setTimeout(this._enterCleanupFn, 300)
 
     } else {
+      // Cancel any pending enter-fullscreen cleanup to prevent it from
+      // wiping inline styles mid-exit animation (race condition fix)
+      if (this._enterCleanupTimer) {
+        clearTimeout(this._enterCleanupTimer)
+        this._enterCleanupTimer = null
+      }
+      if (this._enterCleanupFn) {
+        el.removeEventListener('transitionend', this._enterCleanupFn)
+        this._enterCleanupFn = null
+      }
+
       const savedStyles = this._savedStyles
       this._savedStyles = null
       const creativeId = el.dataset.creativeId
@@ -1062,21 +1101,15 @@ export default class extends Controller {
       if (hasOverflowY || hasOverflowX) {
         const style = getComputedStyle(el)
 
-        // Check dominant axis first for better matching
         if (dominantAxis === 'x' && hasOverflowX) {
           const scrollableX = style.overflowX === 'auto' || style.overflowX === 'scroll'
           if (scrollableX) return { element: el, axis: 'x' }
         }
 
-        if (hasOverflowY) {
+        if (dominantAxis === 'y' && hasOverflowY) {
           const scrollableY = style.overflowY === 'auto' || style.overflowY === 'scroll'
           if (scrollableY) return { element: el, axis: 'y' }
         }
-
-        if (dominantAxis !== 'x' && hasOverflowX) {
-          const scrollableX = style.overflowX === 'auto' || style.overflowX === 'scroll'
-          if (scrollableX) return { element: el, axis: 'x' }
-        }
       }
 
       el = el.parentElement

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

@@ -64,6 +64,7 @@ export default class extends Controller {
     this.currentPresentIds = []
     this.typingUsers = {}
     this.activeAgentTasks = {}
+    this.syncGlobalAgentTasks()
     this.clearTypingTimers()
     this.clearManualTypingMessage()
     this.renderParticipants([])
@@ -217,6 +218,7 @@ export default class extends Controller {
           delete this.typingUsers[id]
           delete this.agentStatusTimers[id]
           delete this.activeAgentTasks?.[id]
+          this.syncGlobalAgentTasks()
           this.renderTypingIndicator()
         }, AGENT_STATUS_TIMEOUT)
       } else {
@@ -227,6 +229,7 @@ export default class extends Controller {
           delete this.agentStatusTimers[id]
         }
       }
+      this.syncGlobalAgentTasks()
       this.renderTypingIndicator()
     }
   }
@@ -380,6 +383,10 @@ export default class extends Controller {
     this.typingIndicatorTarget.appendChild(text)
   }
 
+  syncGlobalAgentTasks() {
+    // no-op: stop button is now server-rendered per comment via task_id
+  }
+
   cancelAllAgentTasks() {
     const ids = Object.keys(this.activeAgentTasks || {})
     if (ids.length === 0) return false
@@ -403,6 +410,7 @@ export default class extends Controller {
             clearTimeout(this.agentStatusTimers[agentId])
             delete this.agentStatusTimers[agentId]
           }
+          this.syncGlobalAgentTasks()
           this.renderTypingIndicator()
         }
       })

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

@@ -14,6 +14,7 @@ export default class extends Controller {
         this.canCreateTopic = false
         this.subscribedCreativeId = null
         this.topicsSubscription = null
+        this._loadTopicsVersion = 0
         // Initial load if creativeId is available (e.g. from dataset if set server-side)
         if (this.creativeId) {
             this.loadTopics()
@@ -61,8 +62,16 @@ export default class extends Controller {
     async loadTopics() {
         if (!this.creativeId) return
 
+        const version = ++this._loadTopicsVersion
+        // Clear stale topics from previous creative to prevent name-based
+        // dedupe in handleTopicMessage from blocking valid broadcasts
+        this.topics = []
+
         try {
             const response = await fetch(`/creatives/${this.creativeId}/topics`)
+            // Discard stale response if a newer loadTopics() call was made
+            if (version !== this._loadTopicsVersion) return
+
             if (response.status === 404) {
                 throw new Error(`Creative ${this.creativeId} not found`)
             }
@@ -78,6 +87,7 @@ export default class extends Controller {
                 this.serverLastTopicId = data.last_topic_id ? String(data.last_topic_id) : ""
                 this.isInbox = !!data.is_inbox
                 this.systemTopicId = data.system_topic_id ? String(data.system_topic_id) : null
+                this.mainTopicId = data.main_topic_id ? String(data.main_topic_id) : null
 
                 // Migrate localStorage to server if server has no value
                 this.migrateLocalStorage()
@@ -102,10 +112,7 @@ export default class extends Controller {
             }
         }
 
-        // Always dispatch change event to ensure form controller gets the correct topic.
-        // Without this, switching to a creative with no stored topic leaves the form
-        // controller with a stale topic_id from the previous creative.
-        this.selectTopic("")
+        this.selectTopic(this.mainTopicId || "")
     }
 
     renderTopics(topics, canManage = false, canCreateTopic = canManage) {
@@ -117,30 +124,39 @@ export default class extends Controller {
             ? 'dragover->comments--topics#handleTopicReorderDragOver dragleave->comments--topics#handleTopicReorderDragLeave drop->comments--topics#handleTopicReorderDrop'
             : ''
 
-        let html = `<span class="topic-tag topic-drop-target ${this.currentTopicId ? '' : 'active'}" 
-                          data-action="click->comments--topics#select ${dropActions}" 
-                          data-id="">#Main</span>`
+        const allMessagesLabel = this.element.dataset.topicMainText || 'All Messages'
+
+        const mainTopic = this.mainTopicId ? topics.find(t => String(t.id) === String(this.mainTopicId)) : null
+        const otherTopics = topics.filter(t => !mainTopic || String(t.id) !== String(this.mainTopicId))
+
+        let html = ''
 
-        topics.forEach(topic => {
-            // Ensure comparison handles string/number difference
+        const renderTopic = (topic) => {
             const isActive = String(this.currentTopicId) === String(topic.id) ? 'active' : ''
             const draggable = canManage ? 'draggable="true"' : ''
             const agentAvatar = topic.primary_agent
                 ? this.renderAgentAvatar(topic.primary_agent)
                 : ''
             const branchIcon = topic.source_topic_id ? '<span class="topic-branch-icon" title="Branched">↗</span>' : ''
-            html += `<span class="topic-tag topic-drop-target ${isActive}" ${draggable}
+            const isMainTopic = this.mainTopicId && String(topic.id) === String(this.mainTopicId)
+            let s = `<span class="topic-tag topic-drop-target ${isActive}" ${draggable}
                           data-action="click->comments--topics#select ${dropActions} ${dragActions} ${topicDropActions}"
                           data-id="${topic.id}"${topic.source_topic_id ? ` data-source-topic-id="${topic.source_topic_id}"` : ''}>
                         ${agentAvatar}${branchIcon}#${topic.name}`
-
-            if (canManage) {
-                html += `<button class="archive-topic-btn" data-action="click->comments--topics#archiveTopic" data-id="${topic.id}" title="Archive">${ICON_ARCHIVE}</button>`
-                html += `<button class="delete-topic-btn" data-action="click->comments--topics#deleteTopic" data-id="${topic.id}">&times;</button>`
+            if (canManage && !isMainTopic) {
+                s += `<button class="archive-topic-btn" data-action="click->comments--topics#archiveTopic" data-id="${topic.id}" title="Archive">${ICON_ARCHIVE}</button>`
+                s += `<button class="delete-topic-btn" data-action="click->comments--topics#deleteTopic" data-id="${topic.id}">&times;</button>`
             }
+            s += `</span>`
+            return s
+        }
 
-            html += `</span>`
-        })
+        if (mainTopic) html += renderTopic(mainTopic)
+        otherTopics.forEach(topic => { html += renderTopic(topic) })
+
+        html += `<span class="topic-tag topic-drop-target topic-all-messages ${this.currentTopicId ? '' : 'active'}"
+                      data-action="click->comments--topics#select ${dropActions}"
+                      data-id="">📋 ${allMessagesLabel}</span>`
 
         // Archived topics section
         if (this.archivedTopics && this.archivedTopics.length > 0) {
@@ -191,7 +207,7 @@ export default class extends Controller {
         const agentJson = event.dataTransfer.getData('application/x-agent-drop')
         if (agentJson) {
             const agent = JSON.parse(agentJson)
-            const targetTopicId = event.currentTarget.dataset.id
+            const targetTopicId = event.currentTarget.dataset.id || this.mainTopicId
             if (targetTopicId) {
                 await this.setTopicPrimaryAgent(targetTopicId, agent)
             }
@@ -205,7 +221,7 @@ export default class extends Controller {
         const commentIds = JSON.parse(commentIdsJson)
         if (!commentIds || commentIds.length === 0) return
 
-        const targetTopicId = event.currentTarget.dataset.id // Empty string for Main
+        const targetTopicId = event.currentTarget.dataset.id || this.mainTopicId
 
         // Dispatch event for list_controller to handle the move
         this.dispatch('move-to-topic', {
@@ -363,7 +379,7 @@ export default class extends Controller {
             if (response.ok) {
                 if (String(this.currentTopicId) === String(topicId)) {
                     this.currentTopicId = "" // Switch to Main
-                    this.dispatch("change", { detail: { topicId: "" } })
+                    this.dispatch("change", { detail: { topicId: "", mainTopicId: this.mainTopicId } })
                 }
                 this.loadTopics()
             } else {
@@ -390,7 +406,7 @@ export default class extends Controller {
             if (response.ok) {
                 if (String(this.currentTopicId) === String(topicId)) {
                     this.currentTopicId = ""
-                    this.dispatch("change", { detail: { topicId: "" } })
+                    this.dispatch("change", { detail: { topicId: "", mainTopicId: this.mainTopicId } })
                 }
                 this.loadTopics()
             } else {
@@ -501,7 +517,7 @@ export default class extends Controller {
             this.clearNewMessageBadge(id)
         }
         // Dispatch event
-        this.dispatch("change", { detail: { topicId: id, isInbox: this.isInbox, systemTopicId: this.systemTopicId } })
+        this.dispatch("change", { detail: { topicId: id, isInbox: this.isInbox, systemTopicId: this.systemTopicId, mainTopicId: this.mainTopicId } })
     }
 
     showEditInput(topicEl, topicId) {
@@ -570,10 +586,9 @@ export default class extends Controller {
 
             if (response.ok) {
                 const updatedTopic = await response.json()
-                // Update local topics array
                 const index = this.topics.findIndex(t => String(t.id) === String(topicId))
                 if (index !== -1) {
-                    this.topics[index] = updatedTopic
+                    this.topics[index] = { ...this.topics[index], ...updatedTopic }
                 }
                 this.renderTopics(this.topics, this.canManageTopics, this.canCreateTopic)
                 this.restoreSelection()
@@ -619,7 +634,7 @@ export default class extends Controller {
             // If we were viewing the moved topic, switch to Main
             if (String(this.currentTopicId) === String(topicId)) {
                 this.currentTopicId = ""
-                this.dispatch("change", { detail: { topicId: "" } })
+                this.dispatch("change", { detail: { topicId: "", mainTopicId: this.mainTopicId } })
             }
             this.loadTopics()
         }
@@ -667,7 +682,7 @@ export default class extends Controller {
                 await this.flushSaveLastTopic(topic.id)
                 await this.loadTopics()
                 // Dispatch change event manually since we skipped the click handler
-                this.dispatch("change", { detail: { topicId: topic.id } })
+                this.dispatch("change", { detail: { topicId: topic.id, mainTopicId: this.mainTopicId } })
             } else {
                 alert("Failed to create topic")
             }
@@ -796,8 +811,12 @@ export default class extends Controller {
         if (!data.topic) return
 
         const topics = this.topics || []
-        const exists = topics.some((topic) => String(topic.id) === String(data.topic.id))
-        if (exists) return
+        const existsById = topics.some((topic) => String(topic.id) === String(data.topic.id))
+        if (existsById) return
+        // Prevent duplicate topic names (e.g. two "Main" topics from race between
+        // HTTP loadTopics and WebSocket broadcast)
+        const existsByName = data.topic.name && topics.some((topic) => topic.name === data.topic.name)
+        if (existsByName) return
 
         this.topics = [...topics, data.topic]
         this.renderTopics(this.topics, this.canManageTopics, this.canCreateTopic)
@@ -837,7 +856,7 @@ export default class extends Controller {
         const index = topics.findIndex(t => String(t.id) === String(updatedTopic.id))
         if (index === -1) return
 
-        this.topics[index] = updatedTopic
+        this.topics[index] = { ...this.topics[index], ...updatedTopic }
         this.renderTopics(this.topics, this.canManageTopics, this.canCreateTopic)
         this.restoreSelection()
     }
@@ -852,7 +871,7 @@ export default class extends Controller {
         this.topics = nextTopics
         if (String(this.currentTopicId) === String(topicId)) {
             this.currentTopicId = ""
-            this.dispatch("change", { detail: { topicId: "" } })
+            this.dispatch("change", { detail: { topicId: "", mainTopicId: this.mainTopicId } })
         }
 
         this.renderTopics(this.topics, this.canManageTopics, this.canCreateTopic)
@@ -901,7 +920,7 @@ export default class extends Controller {
             this.currentTopicId = result.topic.id
             await this.flushSaveLastTopic(result.topic.id)
             await this.loadTopics()
-            this.dispatch("change", { detail: { topicId: result.topic.id } })
+            this.dispatch("change", { detail: { topicId: result.topic.id, mainTopicId: this.mainTopicId } })
 
             // Clear selection in list controller
             const listController = this.application.getControllerForElementAndIdentifier(
@@ -956,7 +975,7 @@ export default class extends Controller {
                 this.currentTopicId = topic.id
                 await this.flushSaveLastTopic(topic.id)
                 await this.loadTopics()
-                this.dispatch("change", { detail: { topicId: topic.id } })
+                this.dispatch("change", { detail: { topicId: topic.id, mainTopicId: this.mainTopicId } })
             } else {
                 console.error('Failed to create topic with agent')
             }

data/app/javascript/creatives/tree_renderer.js

@@ -85,6 +85,7 @@ function applyRowProperties(row, node) {
   updateBooleanAttr('expanded', 'expanded', node.expanded)
   updateBooleanAttr('isRoot', 'is-root', node.is_root)
   updateBooleanAttr('archived', 'archived', node.archived)
+  updateBooleanAttr('githubSource', 'github-source', node.github_source)
 
   if (node.link_url) {
     if (row.linkUrl !== node.link_url) {

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

@@ -36,6 +36,37 @@ describe('ChatNavigationHistory', () => {
     expect(history.current().snippet).toBe('A updated')
   })
 
+  test('revisit reorders entry to reflect visit order', () => {
+    history.push({ creativeId: '1', snippet: 'A' })
+    history.push({ creativeId: '2', snippet: 'B' })
+    history.push({ creativeId: '3', snippet: 'C' })
+    history.push({ creativeId: '4', snippet: 'D' })
+    // entries: [A, B, C, D], cursor at D (index 3)
+
+    history.push({ creativeId: '2', snippet: 'B' })
+    // B should move after D: [A, C, D, B], cursor at B (index 3)
+    expect(history.entries.map(e => e.creativeId)).toEqual(['1', '3', '4', '2'])
+    expect(history.current().creativeId).toBe('2')
+
+    // prev should go back to D (where we came from)
+    expect(history.prev().creativeId).toBe('4')
+    expect(history.prev().creativeId).toBe('3')
+    expect(history.prev().creativeId).toBe('1')
+    // wraps around
+    expect(history.prev().creativeId).toBe('2')
+  })
+
+  test('revisit current entry does not reorder', () => {
+    history.push({ creativeId: '1', snippet: 'A' })
+    history.push({ creativeId: '2', snippet: 'B' })
+    history.push({ creativeId: '3', snippet: 'C' })
+
+    history.push({ creativeId: '3', snippet: 'C updated' })
+    expect(history.entries.map(e => e.creativeId)).toEqual(['1', '2', '3'])
+    expect(history.current().creativeId).toBe('3')
+    expect(history.current().snippet).toBe('C updated')
+  })
+
   test('prev cycles backward', () => {
     history.push({ creativeId: '1', snippet: 'A' })
     history.push({ creativeId: '2', snippet: 'B' })

data/app/javascript/lib/chat_history.js

@@ -33,10 +33,20 @@ class ChatNavigationHistory {
     )
 
     if (existingIdx !== -1) {
-      // Already in list — update metadata and move cursor there
       this.entries[existingIdx].snippet = entry.snippet || this.entries[existingIdx].snippet
       this.entries[existingIdx].canComment = !!entry.canComment
-      this.currentIndex = existingIdx
+
+      if (existingIdx === this.currentIndex) {
+        this._save()
+        return
+      }
+
+      // Move to after current position to reflect visit order (LRU)
+      const [moved] = this.entries.splice(existingIdx, 1)
+      if (existingIdx < this.currentIndex) this.currentIndex--
+      const insertAt = this.currentIndex + 1
+      this.entries.splice(insertAt, 0, moved)
+      this.currentIndex = insertAt
       this._save()
       return
     }

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

@@ -68,11 +68,15 @@ function sanitizeLang(lang) {
   return lang.replace(/[^a-zA-Z0-9_-]/g, '')
 }
 
-// Custom renderer for code blocks with syntax highlighting
+// Custom renderer for code blocks with syntax highlighting + mermaid
 marked.use({
   renderer: {
     code({ text, lang }) {
       const safeLang = sanitizeLang(lang)
+      if (safeLang === 'mermaid') {
+        const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        return `<div class="mermaid-chart">${escaped}</div>`
+      }
       const highlighted = highlightCode(text, safeLang)
       const langClass = safeLang ? ` language-${safeLang}` : ''
       return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
@@ -99,6 +103,14 @@ DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
       data.forceKeepAttr = true
     }
   }
+  // Allow mermaid-chart class on div elements
+  if (node.tagName === 'DIV' && data.attrName === 'class') {
+    const classes = data.attrValue.split(/\s+/)
+    if (classes.includes('mermaid-chart')) {
+      data.attrValue = 'mermaid-chart'
+      data.forceKeepAttr = true
+    }
+  }
 })
 
 const PURIFY_CONFIG = {
@@ -125,6 +137,24 @@ export function renderCommentMarkdown(text) {
   return sanitize(html.trim())
 }
 
+// Lazy-load mermaid and render diagrams in a container
+let mermaidReady = false
+
+export async function renderMermaidDiagrams(container) {
+  const charts = container.querySelectorAll('.mermaid-chart:not([data-processed])')
+  if (charts.length === 0) return
+  const { default: mermaid } = await import('mermaid')
+  if (!mermaidReady) {
+    mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' })
+    mermaidReady = true
+  }
+  try {
+    await mermaid.run({ nodes: Array.from(charts) })
+  } catch (e) {
+    console.warn('Mermaid rendering failed:', e)
+  }
+}
+
 export function renderMarkdownInContainer(container) {
   container.querySelectorAll('.comment-content').forEach((element) => {
     if (element.dataset.rendered === 'true') return
@@ -132,4 +162,5 @@ export function renderMarkdownInContainer(container) {
     element.dataset.rendered = 'true'
     addTableDownloadButtons(element)
   })
+  renderMermaidDiagrams(container)
 }

data/app/javascript/modules/command_args_form.js

@@ -241,6 +241,14 @@ export default class CommandArgsForm {
     input.dataset.paramRequired = param.required ? 'true' : 'false'
     if (param.description) input.placeholder = param.description
 
+    // Pre-fill with default value from creative tool defaults
+    if (param.default_value != null) {
+      input.value = String(param.default_value)
+      if (input.tagName === 'TEXTAREA') {
+        requestAnimationFrame(() => this._autoResize(input))
+      }
+    }
+
     // Enter submits; Shift+Enter inserts newline (textarea only)
     input.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' && !e.shiftKey) {

data/app/javascript/modules/creative_row_editor.js

@@ -1095,11 +1095,9 @@ export function initializeCreativeRowEditor() {
       // Notify sync controller that editing stopped
       stopEditingPing();
       const editCreativeId = form.dataset.creativeId;
-      if (editCreativeId) {
-        document.dispatchEvent(new CustomEvent('creative-editing:stop', {
-          detail: { creativeId: parseInt(editCreativeId, 10) }
-        }));
-      }
+      document.dispatchEvent(new CustomEvent('creative-editing:stop', {
+        detail: { creativeId: editCreativeId ? parseInt(editCreativeId, 10) : null }
+      }));
 
       currentTree = null;
       currentRowElement = null;
@@ -1749,6 +1747,9 @@ export function initializeCreativeRowEditor() {
           pendingSave = false;
           lexicalEditor.focus();
           updateActionButtonStates();
+          document.dispatchEvent(new CustomEvent('creative-editing:start', {
+            detail: { creativeId: null }
+          }));
           if (parentSuggestions) {
             parentSuggestions.style.display = 'none';
             parentSuggestions.innerHTML = '';
@@ -1786,17 +1787,13 @@ export function initializeCreativeRowEditor() {
       scheduleSave();
     }
 
-    // Intercepts bare Enter via capture-phase keydown on Lexical's root element.
-    // Returning true triggers preventDefault + stopImmediatePropagation,
-    // preventing Lexical from inserting a paragraph node.
-    // PC: Enter → addNew (complete & move to next)
-    // Mobile: Enter → newline (let Lexical handle it)
+    // Intercepts Shift+Enter via capture-phase keydown on Lexical's root element.
+    // Returning true triggers preventDefault + stopImmediatePropagation.
+    // Shift+Enter → addNew (save & add next)
+    // Bare Enter → newline (handled by Lexical)
     function handleEditorEnterKey(event, editorInstance) {
-      if (window.innerWidth > 600) {
-        addNew();
-        return true; // handled — suppress Lexical's newline
-      }
-      return false; // mobile: let Lexical insert newline
+      addNew();
+      return true; // handled — suppress default behavior
     }
 
     function handleEditorKeyDown(event, editorInstance) {
@@ -1811,8 +1808,6 @@ export function initializeCreativeRowEditor() {
         addChild();
         return;
       }
-      // Note: bare Enter is handled by handleEditorEnterKey via capture-phase keydown
-      // on Lexical's root element to prevent newline insertion before addNew().
       if ((event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === '.' || event.key === '>')) {
         event.preventDefault();
         levelDown();