collavre 0.20.2 → 0.21.0

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

@@ -0,0 +1,120 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+jest.unstable_mockModule('../../../creatives/tree_renderer', () => ({
+  renderCreativeTree: jest.fn(),
+  dispatchCreativeTreeUpdated: jest.fn(),
+  applyRowProperties: jest.fn(),
+}))
+
+jest.unstable_mockModule('../../../utils/emoji_parser', () => ({
+  parseEmojis: jest.fn(() => ['✨']),
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const TreeController = (await import('../tree_controller')).default
+
+const TRANSIENT_RETRY_DELAYS = [200, 600]
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+const collectRetryDelays = (spy) =>
+  spy.mock.calls
+    .map((args) => args[1])
+    .filter((delay) => TRANSIENT_RETRY_DELAYS.includes(delay))
+
+const installController = () => {
+  const container = document.createElement('div')
+  container.setAttribute('data-controller', 'creatives--tree')
+  container.setAttribute('data-creatives--tree-url-value', '/creatives?format=json&id=991')
+  document.body.appendChild(container)
+
+  const application = Application.start()
+  application.register('creatives--tree', TreeController)
+
+  return { container, application }
+}
+
+describe('CreativesTreeController retry on transient network errors', () => {
+  let originalFetch
+  let setTimeoutSpy
+
+  beforeEach(() => {
+    originalFetch = global.fetch
+    setTimeoutSpy = jest.spyOn(global, 'setTimeout')
+  })
+
+  afterEach(() => {
+    setTimeoutSpy.mockRestore()
+    global.fetch = originalFetch
+    document.body.innerHTML = ''
+    jest.restoreAllMocks()
+  })
+
+  test('schedules 200ms then 600ms backoff retry on TypeError "Failed to fetch"', async () => {
+    global.fetch = jest
+      .fn()
+      .mockRejectedValueOnce(new TypeError('Failed to fetch'))
+      .mockRejectedValueOnce(new TypeError('Failed to fetch'))
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ creatives: [] }),
+      })
+
+    const { application } = installController()
+    // Allow time for the 200ms + 600ms retries to fire
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    expect(collectRetryDelays(setTimeoutSpy)).toEqual(TRANSIENT_RETRY_DELAYS)
+
+    application.stop()
+  })
+
+  test('does NOT schedule retry on HTTP error responses', async () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      status: 500,
+      json: async () => ({}),
+    })
+
+    const { application } = installController()
+    await flush()
+    await flush()
+    await flush()
+
+    expect(collectRetryDelays(setTimeoutSpy)).toEqual([])
+
+    application.stop()
+  })
+
+  test('does NOT schedule retry on AbortError', async () => {
+    const abortErr = new Error('aborted')
+    abortErr.name = 'AbortError'
+    global.fetch = jest.fn().mockRejectedValue(abortErr)
+
+    const { application } = installController()
+    await flush()
+    await flush()
+
+    expect(collectRetryDelays(setTimeoutSpy)).toEqual([])
+
+    application.stop()
+  })
+
+  test('gives up after exactly 2 retries on persistent transient errors', async () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+    global.fetch = jest.fn().mockRejectedValue(new TypeError('Failed to fetch'))
+
+    const { application } = installController()
+    // Allow time for both retries to complete (200 + 600 = 800ms)
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+
+    expect(collectRetryDelays(setTimeoutSpy)).toEqual(TRANSIENT_RETRY_DELAYS)
+
+    application.stop()
+  })
+})

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

@@ -24,20 +24,41 @@ export default class extends Controller {
       }
     }
 
-    document.addEventListener('creative-editing:start', this.handleEditStart)
-    document.addEventListener('creative-editing:stop', this.handleEditStop)
+    // Defer ActionCable subscribe until tree finishes loading. Opening the
+    // WebSocket while the tree fetch is in flight triggers ERR_NETWORK_CHANGED
+    // in Chromium because the browser tears down the in-flight HTTP connection.
+    // Exception: Turbo cache restores leave data-loaded="true" so tree_controller
+    // skips load() and never dispatches creative-tree:updated — subscribe now.
+    const subscribeForRoot = () => {
+      if (this.rootIdValue > 0) {
+        this.subscribe()
+      } else {
+        this.inferAndSubscribe()
+      }
+    }
 
-    if (this.rootIdValue > 0) {
-      this.subscribe()
+    if (this.element.dataset.loaded === 'true') {
+      subscribeForRoot()
     } else {
-      // Top-level /creatives page — try to infer root from tree rows
-      this.inferAndSubscribe()
+      this._handleTreeUpdated = () => {
+        this.element.removeEventListener('creative-tree:updated', this._handleTreeUpdated)
+        this._handleTreeUpdated = null
+        subscribeForRoot()
+      }
+      this.element.addEventListener('creative-tree:updated', this._handleTreeUpdated)
     }
+
+    document.addEventListener('creative-editing:start', this.handleEditStart)
+    document.addEventListener('creative-editing:stop', this.handleEditStop)
   }
 
   disconnect() {
     document.removeEventListener('creative-editing:start', this.handleEditStart)
     document.removeEventListener('creative-editing:stop', this.handleEditStop)
+    if (this._handleTreeUpdated) {
+      this.element.removeEventListener('creative-tree:updated', this._handleTreeUpdated)
+      this._handleTreeUpdated = null
+    }
 
     if (this.subscription) {
       this.subscription.cleanup()
@@ -50,9 +71,9 @@ export default class extends Controller {
       this.subscription.cleanup()
       this.subscription = null
     }
-    if (this.rootIdValue > 0) {
-      this.subscribe()
-    }
+    // Skip re-subscribing here — connect() defers the first subscribe until
+    // creative-tree:updated fires so the WebSocket handshake doesn't race
+    // the tree's HTTP fetch.
   }
 
   inferAndSubscribe() {

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

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
 import { parseEmojis } from '../../utils/emoji_parser'
 
+const TREE_RETRY_DELAYS_MS = [200, 600]
+
 export default class extends Controller {
   static values = {
     url: String,
@@ -49,6 +51,10 @@ export default class extends Controller {
       this.abortController.abort()
       this.abortController = null
     }
+    if (this._retryTimer) {
+      clearTimeout(this._retryTimer)
+      this._retryTimer = null
+    }
     window.removeEventListener('resize', this.handleResize)
     this.element.removeEventListener('creative-tree:updated', this.handleTreeUpdated)
     document.removeEventListener('creative-editing:start', this._handleEditStart)
@@ -138,8 +144,12 @@ export default class extends Controller {
       this.abortController.abort()
     }
     this.abortController = new AbortController()
+    this._retryCount = 0
     this.showLoadingIndicator()
+    this._fetchTree()
+  }
 
+  _fetchTree() {
     fetch(this.urlValue, {
       headers: { Accept: 'application/json' },
       signal: this.abortController.signal,
@@ -154,12 +164,25 @@ export default class extends Controller {
       })
       .catch((error) => {
         if (error.name === 'AbortError') return
+        // Transient network failures (ERR_NETWORK_CHANGED, offline blips, VPN
+        // toggles) surface as TypeError "Failed to fetch". Retry briefly so a
+        // momentary network event doesn't leave the user with an empty tree.
+        if (this._isTransientNetworkError(error) && this._retryCount < TREE_RETRY_DELAYS_MS.length) {
+          const delay = TREE_RETRY_DELAYS_MS[this._retryCount]
+          this._retryCount += 1
+          this._retryTimer = setTimeout(() => this._fetchTree(), delay)
+          return
+        }
         console.error(error)
         this.hideLoadingIndicator()
         this.showEmptyState()
       })
   }
 
+  _isTransientNetworkError(error) {
+    return error instanceof TypeError && /fetch|network/i.test(error.message || '')
+  }
+
   renderData(data) {
     const nodes = Array.isArray(data?.creatives) ? data.creatives : []
 

data/app/javascript/controllers/index.js

@@ -33,6 +33,7 @@ import CommentBadgeController from "./comment_badge_controller"
 import ShareModalController from "./share_modal_controller"
 import ImageLightboxController from "./image_lightbox_controller"
 import SearchPopupController from "./search_popup_controller"
+import LandingVideoController from "./landing_video_controller"
 
 // Export all controllers
 export {
@@ -67,7 +68,8 @@ export {
   ShareModalController,
   ImageLightboxController,
   SearchPopupController,
-  CommentBadgeController
+  CommentBadgeController,
+  LandingVideoController
 }
 
 // Registration function for use with a Stimulus application
@@ -105,4 +107,5 @@ export function registerControllers(application) {
   application.register("image-lightbox", ImageLightboxController)
   application.register("search-popup", SearchPopupController)
   application.register("comment-badge", CommentBadgeController)
+  application.register("landing-video", LandingVideoController)
 }

data/app/javascript/controllers/landing_video_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["video", "progressBar", "progressFill", "toggle", "icon"]
+
+  connect() {
+    this._raf = null
+    this._updateProgress = this._updateProgress.bind(this)
+    this.videoTarget.addEventListener("play", () => this._startProgress())
+    this.videoTarget.addEventListener("pause", () => this._stopProgress())
+    this.videoTarget.addEventListener("ended", () => this._stopProgress())
+    if (!this.videoTarget.paused) this._startProgress()
+  }
+
+  disconnect() {
+    this._stopProgress()
+  }
+
+  togglePlay() {
+    if (this.videoTarget.paused) {
+      this.videoTarget.play()
+      this.iconTarget.textContent = "❚❚"
+    } else {
+      this.videoTarget.pause()
+      this.iconTarget.textContent = "▶"
+    }
+  }
+
+  _startProgress() {
+    this._stopProgress()
+    this._tick()
+  }
+
+  _stopProgress() {
+    if (this._raf) {
+      cancelAnimationFrame(this._raf)
+      this._raf = null
+    }
+  }
+
+  _tick() {
+    this._updateProgress()
+    this._raf = requestAnimationFrame(() => this._tick())
+  }
+
+  _updateProgress() {
+    const v = this.videoTarget
+    if (v.duration) {
+      const pct = (v.currentTime / v.duration) * 100
+      this.progressFillTarget.style.width = `${pct}%`
+    }
+  }
+}

data/app/javascript/creatives/tree_renderer.js

@@ -163,6 +163,12 @@ function applyRowProperties(row, node) {
   if (Object.prototype.hasOwnProperty.call(inlinePayload, 'origin_id')) {
     setDatasetValue(row, 'originId', inlinePayload.origin_id ?? '')
   }
+  if (Object.prototype.hasOwnProperty.call(inlinePayload, 'content_type')) {
+    setDatasetValue(row, 'contentType', inlinePayload.content_type ?? '')
+  }
+  if (Object.prototype.hasOwnProperty.call(inlinePayload, 'markdown_source')) {
+    setDatasetValue(row, 'markdownSource', inlinePayload.markdown_source ?? '')
+  }
 
   if (dirty && typeof row.requestUpdate === 'function') {
     // Before Lit re-renders, sync progressHtml from current DOM.

data/app/javascript/lib/api/__tests__/queue_manager.test.js

@@ -122,6 +122,33 @@ describe('ApiQueueManager', () => {
         expect(options.body.has('file')).toBe(true);
     });
 
+    test('should pass parsed JSON response data to onSuccess callback', async () => {
+        // Restore processQueue for this test
+        apiQueue.processQueue.mockRestore();
+
+        const callback = jest.fn();
+
+        // Mock successful response with JSON body containing markdown_source rewrite
+        const rewrittenSource = '![img](/rails/active_storage/blobs/abc/image.png)';
+        mockCsrfFetch.mockResolvedValue({
+            ok: true,
+            text: async () => JSON.stringify({ id: 42, markdown_source: rewrittenSource })
+        });
+
+        const item = {
+            path: '/creatives/42',
+            method: 'PATCH',
+            onSuccess: callback,
+            retries: 0
+        };
+
+        apiQueue.queue = [item];
+        await apiQueue.processQueue();
+
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback).toHaveBeenCalledWith({ id: 42, markdown_source: rewrittenSource });
+    });
+
     test('should dispatch event on permanent failure', async () => {
         // Restore processQueue for this test
         apiQueue.processQueue.mockRestore();

data/app/javascript/lib/api/queue_manager.js

@@ -174,11 +174,11 @@ class ApiQueueManager {
         // Merge new callback with existing callbacks
         let mergedCallback = null
         if (existingCallbacks.length > 0 || request.onSuccess) {
-            mergedCallback = () => {
+            mergedCallback = (responseData) => {
                 // Run all existing callbacks first
                 existingCallbacks.forEach(cb => {
                     try {
-                        cb()
+                        cb(responseData)
                     } catch (error) {
                         console.error('Merged callback failed:', error)
                     }
@@ -186,7 +186,7 @@ class ApiQueueManager {
                 // Then run the new callback
                 if (typeof request.onSuccess === 'function') {
                     try {
-                        request.onSuccess()
+                        request.onSuccess(responseData)
                     } catch (error) {
                         console.error('New callback failed:', error)
                     }
@@ -229,8 +229,20 @@ class ApiQueueManager {
         while (this.queue.length > 0) {
             const item = this.queue[0]
 
+            let responseData = null
             try {
-                await this.executeRequest(item)
+                const response = await this.executeRequest(item)
+                // Parse JSON body so callbacks can react to server-side rewrites
+                // (e.g. markdown_source data: URIs → blob paths). Best-effort: empty
+                // or non-JSON bodies leave responseData null.
+                if (response && typeof response.text === 'function') {
+                    try {
+                        const text = await response.text()
+                        responseData = text ? JSON.parse(text) : null
+                    } catch (_parseError) {
+                        responseData = null
+                    }
+                }
                 // Success - handle cleanup actions
 
                 // Dispatch event for attachment cleanup if needed
@@ -243,7 +255,7 @@ class ApiQueueManager {
                 // Call onSuccess callback if provided (for non-serializable actions)
                 if (typeof item.onSuccess === 'function') {
                     try {
-                        item.onSuccess()
+                        item.onSuccess(responseData)
                     } catch (callbackError) {
                         console.error('onSuccess callback failed:', callbackError)
                     }

data/app/javascript/modules/__tests__/command_args_form.test.js

@@ -0,0 +1,103 @@
+/**
+ * @jest-environment jsdom
+ */
+import CommandArgsForm from '../command_args_form'
+
+const baseCommand = (overrides = {}) => ({
+  name: 'foo_tool',
+  label: '/foo_tool',
+  input_schema: [
+    { name: 'creative_id', type: 'string', required: false },
+    { name: 'topic_id', type: 'string', required: false },
+    { name: 'note', type: 'string', required: false }
+  ],
+  ...overrides
+})
+
+const fieldFor = (paramName) =>
+  document.querySelector(`[data-param-name="${paramName}"]`)
+
+describe('CommandArgsForm context auto-fill', () => {
+  let container
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('fills creative_id and topic_id from contextValuesFn', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => ({ creative_id: '12508', topic_id: '8455' })
+    })
+
+    form.show(baseCommand())
+
+    expect(fieldFor('creative_id').value).toBe('12508')
+    expect(fieldFor('topic_id').value).toBe('8455')
+    expect(fieldFor('note').value).toBe('')
+  })
+
+  test('explicit default_value beats context auto-fill', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => ({ creative_id: '12508', topic_id: '8455' })
+    })
+
+    form.show(baseCommand({
+      input_schema: [
+        { name: 'creative_id', type: 'string', required: false, default_value: '999' },
+        { name: 'topic_id', type: 'string', required: false }
+      ]
+    }))
+
+    expect(fieldFor('creative_id').value).toBe('999')
+    expect(fieldFor('topic_id').value).toBe('8455')
+  })
+
+  test('does not fill unrelated params even if names overlap', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => ({ creative_id: '12508', topic_id: '8455', note: 'ctx' })
+    })
+
+    form.show(baseCommand())
+
+    expect(fieldFor('note').value).toBe('')
+  })
+
+  test('missing context values leave fields empty', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => ({ creative_id: null, topic_id: '' })
+    })
+
+    form.show(baseCommand())
+
+    expect(fieldFor('creative_id').value).toBe('')
+    expect(fieldFor('topic_id').value).toBe('')
+  })
+
+  test('contextValuesFn throwing does not break form', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => { throw new Error('boom') }
+    })
+
+    expect(() => form.show(baseCommand())).not.toThrow()
+    expect(fieldFor('creative_id').value).toBe('')
+  })
+
+  test('no contextValuesFn provided behaves like before', () => {
+    const form = new CommandArgsForm({ container })
+
+    form.show(baseCommand())
+
+    expect(fieldFor('creative_id').value).toBe('')
+    expect(fieldFor('topic_id').value).toBe('')
+  })
+})

data/app/javascript/modules/__tests__/html_content_empty.test.js

@@ -0,0 +1,41 @@
+/**
+ * @jest-environment jsdom
+ */
+import { isHtmlEmpty } from '../html_content_empty';
+
+describe('isHtmlEmpty', () => {
+  test('returns true for null/empty string', () => {
+    expect(isHtmlEmpty('')).toBe(true);
+    expect(isHtmlEmpty(null)).toBe(true);
+    expect(isHtmlEmpty(undefined)).toBe(true);
+  });
+
+  test('returns true for whitespace-only HTML', () => {
+    expect(isHtmlEmpty('<p>   </p>')).toBe(true);
+    expect(isHtmlEmpty('<div><br></div>')).toBe(true);
+  });
+
+  test('returns false when there is text content', () => {
+    expect(isHtmlEmpty('<p>hello</p>')).toBe(false);
+  });
+
+  test('returns false for image-only HTML', () => {
+    expect(isHtmlEmpty('<p><img src="/blob/abc.png"></p>')).toBe(false);
+  });
+
+  test('returns false for action-text-attachment-only HTML', () => {
+    expect(isHtmlEmpty(
+      '<action-text-attachment sgid="abc" url="/blob" filename="file.png"></action-text-attachment>'
+    )).toBe(false);
+  });
+
+  test('returns false for figure.attachment-only HTML (trix-style)', () => {
+    expect(isHtmlEmpty(
+      '<figure class="attachment attachment--file" data-trix-attachment=\'{"sgid":"abc"}\'></figure>'
+    )).toBe(false);
+  });
+
+  test('returns false for [data-trix-attachment]-only HTML', () => {
+    expect(isHtmlEmpty('<div data-trix-attachment=\'{"sgid":"x"}\'></div>')).toBe(false);
+  });
+});

data/app/javascript/modules/__tests__/markdown_source_reconcile.test.js

@@ -0,0 +1,70 @@
+/**
+ * @jest-environment jsdom
+ */
+import { reconcileMarkdownSource } from '../markdown_source_reconcile';
+
+const DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+const BLOB_PATH = '/rails/active_storage/blobs/redirect/abc123def/image.png';
+const DATA_URI_2 = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+const BLOB_PATH_2 = '/rails/active_storage/blobs/redirect/xyz789/two.gif';
+
+describe('reconcileMarkdownSource', () => {
+  test('returns rewritten value when current still equals saved', () => {
+    const saved = `Hello ![pic](${DATA_URI}) world`;
+    const rewritten = `Hello ![pic](${BLOB_PATH}) world`;
+    expect(reconcileMarkdownSource(saved, rewritten, saved)).toBe(rewritten);
+  });
+
+  test('returns null when no rewrites happened', () => {
+    expect(reconcileMarkdownSource('a', 'a', 'a')).toBe(null);
+  });
+
+  test('returns null when saved has no data URI and current diverged from saved', () => {
+    expect(reconcileMarkdownSource('saved', 'rewritten', 'user typed something else')).toBe(null);
+  });
+
+  test('merges substitutions when user typed AFTER the data URI mid-save', () => {
+    const saved = `![pic](${DATA_URI})`;
+    const rewritten = `![pic](${BLOB_PATH})`;
+    const current = `![pic](${DATA_URI})\n\nNew paragraph user typed during save.`;
+    const expected = `![pic](${BLOB_PATH})\n\nNew paragraph user typed during save.`;
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(expected);
+  });
+
+  test('merges substitutions when user typed BEFORE the data URI mid-save', () => {
+    const saved = `start ![pic](${DATA_URI}) end`;
+    const rewritten = `start ![pic](${BLOB_PATH}) end`;
+    const current = `inserted at top\n\nstart ![pic](${DATA_URI}) end`;
+    const expected = `inserted at top\n\nstart ![pic](${BLOB_PATH}) end`;
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(expected);
+  });
+
+  test('handles multiple data URIs in a single save', () => {
+    const saved = `A ![1](${DATA_URI}) B ![2](${DATA_URI_2}) C`;
+    const rewritten = `A ![1](${BLOB_PATH}) B ![2](${BLOB_PATH_2}) C`;
+    const current = `A ![1](${DATA_URI}) B ![2](${DATA_URI_2}) C\n\nextra text`;
+    const expected = `A ![1](${BLOB_PATH}) B ![2](${BLOB_PATH_2}) C\n\nextra text`;
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(expected);
+  });
+
+  test('handles reference-style data URI definitions', () => {
+    const saved = `![pic][p]\n\n[p]: ${DATA_URI}`;
+    const rewritten = `![pic][p]\n\n[p]: ${BLOB_PATH}`;
+    const current = `![pic][p]\n\nuser typed more\n\n[p]: ${DATA_URI}`;
+    const expected = `![pic][p]\n\nuser typed more\n\n[p]: ${BLOB_PATH}`;
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(expected);
+  });
+
+  test('returns null when user removed the data URI before response', () => {
+    const saved = `![pic](${DATA_URI})`;
+    const rewritten = `![pic](${BLOB_PATH})`;
+    const current = 'user wiped everything';
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(null);
+  });
+
+  test('returns null on non-string inputs', () => {
+    expect(reconcileMarkdownSource(null, 'a', 'a')).toBe(null);
+    expect(reconcileMarkdownSource('a', null, 'a')).toBe(null);
+    expect(reconcileMarkdownSource('a', 'a', null)).toBe(null);
+  });
+});