collavre 0.22.0 → 0.23.0

data/app/javascript/modules/typo_corrector.js

@@ -0,0 +1,534 @@
+// Inline typo correction for the chat composer (Phase 1).
+//
+// Wires the chat textarea to the server endpoint and paints a *volatile*
+// highlight overlay: a mirror "backdrop" div sitting exactly behind the textarea
+// with <mark> spans over each edit span. The textarea value stays the single
+// source of truth — the backdrop is aria-hidden and never serialized, so
+// markdown-canonical storage never sees a highlight.
+//
+// Two highlight states (shape + colour, for colour-blind safety):
+//   - auto-applied (confidence >= threshold): faint straight underline
+//   - candidate    (below threshold):         wavy dotted underline (needs decision)
+//
+// Clicking a highlight opens a creatable combobox (reusing CommonPopup for
+// positioning + list + keyboard nav) pre-filled with the word currently in the
+// document, so Enter = keep. Typing adds the typed word as an always-present,
+// auto-selected custom option.
+
+import CommonPopup from '../lib/common_popup'
+import csrfFetch from '../lib/api/csrf_fetch'
+import {
+  detectDevice,
+  shouldRun,
+  buildCandidateList,
+  anchorEdits,
+  applyEditAt,
+  shiftEditsAfter,
+  partitionByThreshold,
+} from '../lib/typo_correction'
+
+const DEBOUNCE_MS = 600
+const PRINTABLE_KEYDOWN_TTL_MS = 50
+
+let initialized = false
+
+// Mirror the textarea's box metrics onto the backdrop so highlight spans land on
+// the exact glyphs. Only the properties that affect text layout are copied.
+const MIRRORED_STYLES = [
+  'boxSizing', 'width', 'height', 'paddingTop', 'paddingRight', 'paddingBottom',
+  'paddingLeft', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth',
+  'borderLeftWidth', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle',
+  'lineHeight', 'letterSpacing', 'textTransform', 'wordSpacing', 'textIndent',
+]
+
+// Escape by round-tripping through textContent: the browser never reinterprets
+// it as markup, and it's the canonical DOM-text sanitizer (recognized as a
+// barrier by static XSS analysis) for the values we splice into the backdrop and
+// popup HTML — both of which carry user-typed / model-suggested text.
+function escapeHtml(value) {
+  const el = document.createElement('div')
+  el.textContent = String(value)
+  return el.innerHTML
+}
+
+export class TypoCorrector {
+  constructor(textarea, { settings, location = 'chat', endpoint = '/typo_corrections', getVoiceActive = () => false, labels = {} } = {}) {
+    this.textarea = textarea
+    this.settings = settings
+    this.location = location
+    this.endpoint = endpoint
+    this.getVoiceActive = getVoiceActive
+    this.labels = {
+      keep: labels.keep || 'keep',
+      custom: labels.custom || 'custom',
+      inputLabel: labels.inputLabel || 'correction',
+    }
+
+    this.edits = [] // anchored edits currently painted: {start,end,original,suggestion,confidence,state}
+    this.lastPrintableKeydownAt = null
+    this.lastInputAt = null
+    this.debounceTimer = null
+    this.requestSeq = 0
+
+    this._buildBackdrop()
+    this._bind()
+  }
+
+  _buildBackdrop() {
+    const ta = this.textarea
+    const wrap = document.createElement('div')
+    wrap.className = 'typo-input-wrap'
+    ta.parentNode.insertBefore(wrap, ta)
+
+    this.backdrop = document.createElement('div')
+    this.backdrop.className = 'typo-backdrop'
+    this.backdrop.setAttribute('aria-hidden', 'true')
+    this.highlightLayer = document.createElement('div')
+    this.highlightLayer.className = 'typo-highlights'
+    this.backdrop.appendChild(this.highlightLayer)
+
+    wrap.appendChild(this.backdrop)
+    wrap.appendChild(ta)
+    this._syncBackdropStyle()
+  }
+
+  _syncBackdropStyle() {
+    const computed = getComputedStyle(this.textarea)
+    MIRRORED_STYLES.forEach((prop) => {
+      this.highlightLayer.style[prop] = computed[prop]
+    })
+    // The textarea's own border is transparent-mirrored via padding offsets.
+    this.highlightLayer.style.borderColor = 'transparent'
+    this.highlightLayer.style.borderStyle = 'solid'
+  }
+
+  _bind() {
+    this._onKeydown = (event) => {
+      // A printable keydown immediately preceding the input marks a physical key.
+      if (event.key && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+        this.lastPrintableKeydownAt = performance.now()
+      }
+    }
+    this._onInput = () => {
+      // Stamp the input time *now*, while the keydown→input relationship is still
+      // fresh. Classifying at detect time (after the debounce) would read a
+      // ~600ms gap and misread every physical keypress as a soft keyboard,
+      // defeating the default-off physical-keyboard gate.
+      this.lastInputAt = performance.now()
+      this._syncScroll()
+      this._repaint() // keep existing highlights aligned with edited text
+      // Our own auto-apply dispatches a synthetic `input` so other listeners
+      // (auto-resize, draft save, send-button state) update. We must NOT let it
+      // re-trigger detection: the corrected text has no typos, so the follow-up
+      // would return [] and wipe the just-applied underline/undo affordance
+      // before the user can click it. Real keystrokes still schedule detection.
+      if (this.suppressNextDetect) {
+        this.suppressNextDetect = false
+        return
+      }
+      this._scheduleDetect()
+    }
+    this._onScroll = () => this._syncScroll()
+    // form.reset() (after a comment sends, or on cancel) empties the textarea
+    // WITHOUT firing an `input` event, so our repaint never runs and stale marks
+    // would linger over the now-empty composer — still clickable, applying stale
+    // offsets to the empty value. The `reset` event fires before the control is
+    // cleared, so drop the edits now and repaint next frame once it's empty.
+    this._onReset = () => {
+      clearTimeout(this.debounceTimer)
+      this.requestSeq++ // invalidate any in-flight detection response
+      this.edits = []
+      requestAnimationFrame(() => this._repaint())
+    }
+
+    this.form = this.textarea.form
+    this.textarea.addEventListener('keydown', this._onKeydown)
+    this.textarea.addEventListener('input', this._onInput)
+    this.textarea.addEventListener('scroll', this._onScroll)
+    this.form?.addEventListener('reset', this._onReset)
+  }
+
+  destroy() {
+    clearTimeout(this.debounceTimer)
+    this.textarea.removeEventListener('keydown', this._onKeydown)
+    this.textarea.removeEventListener('input', this._onInput)
+    this.textarea.removeEventListener('scroll', this._onScroll)
+    this.form?.removeEventListener('reset', this._onReset)
+    // Drop the combobox popup: it lives on document.body, so without this a Turbo
+    // page-cache snapshot serializes an orphan popup (stale options, no live
+    // instance) and the next corrector appends a duplicate. hide() also detaches
+    // CommonPopup's document-level outside-click listeners.
+    this.popup?.hide()
+    this.popupEl?.remove()
+    this.popupEl = null
+    this.popupInput = null
+    this.popup = null
+    // Unwrap the textarea and drop the injected backdrop so a Turbo page-cache
+    // snapshot doesn't serialize stale overlay DOM (it would duplicate on the
+    // next build) or the bind marker (a restored snapshot keeps typoBound=true
+    // but loses the JS listeners, so re-init is skipped and correction stays
+    // dead until a full reload).
+    const wrap = this.backdrop?.parentNode
+    if (wrap && wrap.parentNode) {
+      wrap.parentNode.insertBefore(this.textarea, wrap)
+      wrap.remove()
+    }
+    delete this.textarea.dataset.typoBound
+  }
+
+  _syncScroll() {
+    this.backdrop.scrollTop = this.textarea.scrollTop
+    this.backdrop.scrollLeft = this.textarea.scrollLeft
+  }
+
+  _currentDevice() {
+    return detectDevice({
+      voiceActive: !!this.getVoiceActive(),
+      lastPrintableKeydownAt: this.lastPrintableKeydownAt,
+      inputAt: this.lastInputAt,
+    })
+  }
+
+  _scheduleDetect() {
+    clearTimeout(this.debounceTimer)
+    this.debounceTimer = setTimeout(() => this._detect(), DEBOUNCE_MS)
+  }
+
+  async _detect() {
+    const device = this._currentDevice();
+    // Reset the printable-keydown marker so a stale value can't mis-classify the
+    // next standalone input (e.g. soft-keyboard insert after a physical keypress).
+    if (this.lastPrintableKeydownAt != null && performance.now() - this.lastPrintableKeydownAt > PRINTABLE_KEYDOWN_TTL_MS) {
+      this.lastPrintableKeydownAt = null
+    }
+
+    if (!shouldRun(this.settings, { device, location: this.location })) return
+    const text = this.textarea.value
+    if (!text.trim()) { this._clear(); return }
+
+    const seq = ++this.requestSeq
+    let payload
+    try {
+      const res = await csrfFetch(this.endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+        body: JSON.stringify({ text, device, location: this.location }),
+      })
+      if (!res.ok) return
+      payload = await res.json()
+    } catch {
+      return
+    }
+    if (seq !== this.requestSeq) return // a newer keystroke superseded this one
+    // The text may have changed while the request was in flight; only act if the
+    // edits still anchor to the *current* textarea value.
+    if (this.textarea.value !== text) return
+
+    this._applyResult(payload)
+  }
+
+  _applyResult({ edits = [], threshold = 80 } = {}) {
+    const original = this.textarea.value
+    const anchored = anchorEdits(original, edits)
+    const { autoApplied, candidates } = partitionByThreshold(anchored, threshold)
+
+    // This round's edits. `apply` rewrites the word; `keep` leaves the text as-is
+    // (a low-confidence candidate awaiting a decision).
+    const incoming = [
+      ...autoApplied.map((e) => ({ ...e, kind: 'apply' })),
+      ...candidates.map((e) => ({ ...e, kind: 'keep', state: 'candidate', currentValue: e.original })),
+    ]
+
+    // Carry forward earlier corrections that are still anchored in the live text
+    // and don't collide with this round. The server is stateless and never
+    // re-reports an already-corrected word, so without this every detection round
+    // would wipe the prior correction's mark and leave only the most recent one
+    // clickable. Already-applied survivors sit in the text unchanged, so they're
+    // re-emitted in place (kind 'keep'), not re-applied.
+    const survivors = this.edits
+      .filter((p) => original.slice(p.start, p.end) === p.currentValue)
+      .filter((p) => !incoming.some((n) => n.start < p.end && p.start < n.end))
+      .map((p) => ({ ...p, kind: 'keep' }))
+
+    // Walk all edits left-to-right in one pass, rebuilding the text while
+    // tracking a running delta. This assigns each tracked edit an *exact* final
+    // span, rather than re-searching the corrected word by value afterwards —
+    // that search would bind to an earlier identical word (e.g. correcting the
+    // second "teh" in "the teh" lands the highlight on the first "the", so undo
+    // would rewrite the wrong word).
+    const events = [...incoming, ...survivors].sort((a, b) => a.start - b.start)
+
+    const originalCaret = this.textarea.selectionStart
+    let out = ''
+    let cursor = 0
+    let delta = 0
+    let caret = originalCaret
+    const tracked = []
+    for (const e of events) {
+      if (e.start < cursor) continue // overlapping span; skip defensively
+      out += original.slice(cursor, e.start)
+      const finalStart = e.start + delta
+      if (e.kind === 'apply') {
+        out += e.suggestion
+        const d = e.suggestion.length - (e.end - e.start)
+        if (e.start < originalCaret) caret += d
+        delta += d
+        tracked.push({
+          original: e.original, suggestion: e.suggestion, confidence: e.confidence,
+          state: 'applied', currentValue: e.suggestion,
+          start: finalStart, end: finalStart + e.suggestion.length,
+        })
+      } else {
+        // 'keep': a new candidate or a carried-forward survivor — text unchanged,
+        // so re-emit the current slice and preserve its existing state.
+        const slice = original.slice(e.start, e.end)
+        out += slice
+        tracked.push({
+          original: e.original, suggestion: e.suggestion, confidence: e.confidence,
+          state: e.state, currentValue: e.currentValue,
+          start: finalStart, end: finalStart + slice.length,
+        })
+      }
+      cursor = e.end
+    }
+    out += original.slice(cursor)
+
+    this.edits = tracked
+    if (out !== original) {
+      this.textarea.value = out
+      this.textarea.setSelectionRange(caret, caret)
+      // Our own mutation: notify other listeners but don't re-run detection (it
+      // would return [] on the now-clean text and wipe these fresh highlights).
+      this.suppressNextDetect = true
+      this.textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+    this._repaint()
+  }
+
+  _clear() {
+    this.edits = []
+    this._repaint()
+  }
+
+  // Paint the backdrop: plain text with <mark> spans over each edit. Marks carry
+  // the state class so CSS renders the two underline styles.
+  _repaint() {
+    // Drop edits that no longer match the live text (user kept typing).
+    const text = this.textarea.value
+    this.edits = this.edits.filter((e) => text.slice(e.start, e.end) === e.currentValue)
+
+    if (this.edits.length === 0) {
+      this.highlightLayer.textContent = text
+      return
+    }
+    const sorted = [...this.edits].sort((a, b) => a.start - b.start)
+    let html = ''
+    let cursor = 0
+    sorted.forEach((edit, i) => {
+      if (edit.start < cursor) return // overlapping; skip
+      html += escapeHtml(text.slice(cursor, edit.start))
+      const cls = edit.state === 'applied' ? 'typo-mark typo-mark-applied' : 'typo-mark typo-mark-candidate'
+      html += `<mark class="${cls}" data-typo-index="${i}">${escapeHtml(text.slice(edit.start, edit.end))}</mark>`
+      cursor = edit.end
+    })
+    html += escapeHtml(text.slice(cursor))
+    this.highlightLayer.innerHTML = html
+    this._wireMarks(sorted)
+    this._syncScroll()
+  }
+
+  // <mark> has pointer-events:auto (the rest of the backdrop is none), so clicks
+  // land on a highlighted word and open the combobox there.
+  _wireMarks(sorted) {
+    this.highlightLayer.querySelectorAll('.typo-mark').forEach((mark) => {
+      const idx = Number(mark.dataset.typoIndex)
+      const edit = sorted[idx]
+      if (!edit) return
+      mark.addEventListener('mousedown', (event) => {
+        event.preventDefault()
+        this._openPopup(edit, mark)
+      })
+    })
+  }
+
+  _ensurePopup() {
+    if (this.popupEl) return
+    const el = document.createElement('div')
+    el.className = 'typo-popup common-popup'
+    el.style.display = 'none'
+    el.innerHTML = `
+      <input type="text" class="typo-popup-input" />
+      <ul class="typo-popup-list" data-popup-list></ul>`
+    document.body.appendChild(el)
+    this.popupEl = el
+    this.popupInput = el.querySelector('.typo-popup-input')
+    // Localized assistive label (set via setAttribute, not innerHTML, so the
+    // value is never parsed as markup).
+    this.popupInput.setAttribute('aria-label', this.labels.inputLabel)
+
+    this.popup = new CommonPopup(el, {
+      listElement: el.querySelector('.typo-popup-list'),
+      // item.label is user-typed / model-suggested text; escapeHtml round-trips
+      // it through textContent so it can never be reinterpreted as markup.
+      renderItem: (item) => {
+        const tag = item.role === 'original' ? ` <span class="typo-popup-role">(${escapeHtml(this.labels.keep)})</span>`
+          : item.role === 'custom' ? ` <span class="typo-popup-role">(${escapeHtml(this.labels.custom)})</span>` : ''
+        return `<span class="typo-popup-value">${escapeHtml(item.label)}</span>${tag}`
+      },
+      onSelect: (item) => this._chooseValue(item.value),
+      onClose: () => { this._activeEdit = null },
+    })
+
+    // Typing builds a creatable option and keeps input ↔ list bound.
+    this.popupInput.addEventListener('input', () => this._refreshPopupItems(this.popupInput.value))
+    this.popupInput.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        this._chooseValue(this.popupInput.value)
+        return
+      }
+      if (this.popup.handleKey(event)) {
+        // Sync the input to the active list item (arrow navigation).
+        const active = this.popup.items[this.popup.activeIndex]
+        if (active) this.popupInput.value = active.value
+      }
+    })
+  }
+
+  _refreshPopupItems(typed) {
+    const edit = this._activeEdit
+    if (!edit) return
+    let items = buildCandidateList({
+      currentValue: edit.currentValue,
+      originalWord: edit.original,
+      suggestions: [{ suggestion: edit.suggestion, confidence: edit.confidence }],
+    })
+    const trimmed = (typed || '').trim()
+    if (trimmed && !items.some((i) => i.value === trimmed)) {
+      // Creatable: the typed word is always present and auto-selected.
+      items = [{ value: trimmed, label: trimmed, role: 'custom', isCurrent: false }, ...items]
+    }
+    this.popup.setItems(items)
+    // Auto-select the typed custom entry, else the current document value.
+    const selectIndex = trimmed
+      ? Math.max(0, items.findIndex((i) => i.value === trimmed))
+      : Math.max(0, items.findIndex((i) => i.isCurrent))
+    this.popup.setActiveIndex(selectIndex)
+  }
+
+  _openPopup(edit, anchorEl) {
+    this._ensurePopup()
+    this._activeEdit = edit
+    this.popupInput.value = edit.currentValue
+    this._refreshPopupItems('')
+    this.popup.showAt(anchorEl.getBoundingClientRect())
+    // Desktop: focus + select-all so a keystroke immediately replaces the word.
+    // Mobile keyboard is left to an explicit tap on the input (no auto-focus) —
+    // chip taps are the primary path.
+    // showAt() keeps the popup visibility:hidden until its own rAF (so it can
+    // position off-screen first); focus()/select() are no-ops while hidden, so
+    // defer them into a rAF that runs after showAt's (FIFO, registered later).
+    if (!this._isCoarsePointer()) {
+      requestAnimationFrame(() => {
+        this.popupInput.focus()
+        this.popupInput.select()
+      })
+    }
+  }
+
+  _isCoarsePointer() {
+    return typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches
+  }
+
+  _chooseValue(value) {
+    const edit = this._activeEdit
+    if (edit == null || value == null) { this.popup?.hide(); return }
+    const replacement = String(value)
+
+    if (replacement !== edit.currentValue) {
+      const { text, delta } = applyEditAt(this.textarea.value, {
+        start: edit.start, end: edit.end, replacement,
+      })
+      let caret = this.textarea.selectionStart
+      if (edit.start < caret) caret += delta
+      this.textarea.value = text
+      this.textarea.setSelectionRange(caret, caret)
+      // Shift later edits, then drop this one (it's now user-confirmed).
+      this.edits = shiftEditsAfter(
+        this.edits.filter((e) => e !== edit),
+        edit.start,
+        delta,
+      )
+      // Our own mutation: don't re-detect (it would overwrite the remaining
+      // candidate highlights we just shifted to keep them aligned).
+      this.suppressNextDetect = true
+      this.textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    } else {
+      // "Keep" — user resolved it; remove the highlight.
+      this.edits = this.edits.filter((e) => e !== edit)
+    }
+
+    this.popup?.hide()
+    this._repaint()
+    this.textarea.focus()
+  }
+}
+
+// Module-scope init, mirroring mention_menu.js. Reads settings exposed by the
+// server on #comments-popup and only attaches when the master switch is on.
+function readSettings(root) {
+  if (!root) return null
+  const d = root.dataset
+  if (d.typoEnabled == null) return null
+  return {
+    enabled: d.typoEnabled === 'true',
+    threshold: parseInt(d.typoThreshold, 10) || 80,
+    onVoice: d.typoOnVoice === 'true',
+    onSoftKeyboard: d.typoOnSoftKeyboard === 'true',
+    onPhysicalKeyboard: d.typoOnPhysicalKeyboard === 'true',
+    inChat: d.typoInChat === 'true',
+    inEditor: d.typoInEditor === 'true',
+  }
+}
+
+let activeInstance = null
+
+export function initTypoCorrector() {
+  const textarea = document.querySelector('#new-comment-form textarea')
+  const root = document.getElementById('comments-popup')
+  const settings = readSettings(root)
+  if (!textarea || !settings || !settings.enabled) return null
+  if (textarea.dataset.typoBound === 'true') return null
+  textarea.dataset.typoBound = 'true'
+
+  const voiceButton = document.getElementById('voice-comments-btn')
+  activeInstance = new TypoCorrector(textarea, {
+    settings,
+    location: 'chat',
+    // Use the mounted engine path (e.g. /collavre/typo_corrections) so requests
+    // don't 404 when Collavre is mounted at a subpath instead of root.
+    endpoint: root.dataset.typoEndpoint || '/typo_corrections',
+    getVoiceActive: () => voiceButton?.dataset.voiceState === 'listening',
+    labels: {
+      keep: root.dataset.typoKeepLabel,
+      custom: root.dataset.typoCustomLabel,
+      inputLabel: root.dataset.typoInputLabel,
+    },
+  })
+  return activeInstance
+}
+
+export function teardownTypoCorrector() {
+  if (!activeInstance) return
+  activeInstance.destroy()
+  activeInstance = null
+}
+
+if (!initialized) {
+  initialized = true
+  document.addEventListener('turbo:load', initTypoCorrector)
+  // Turbo caches a DOM snapshot on navigation but not the JS listeners. Tear the
+  // instance down (clearing the bind marker + injected DOM) before the snapshot
+  // is taken so a restored page re-initializes cleanly instead of skipping init.
+  document.addEventListener('turbo:before-cache', teardownTypoCorrector)
+}

data/app/jobs/collavre/ai_agent_job.rb

@@ -101,11 +101,14 @@ module Collavre
 
       # Reserve resources before starting work
       tracker = Orchestration::ResourceTracker.for(agent)
-      # Claude Channel tasks live past this job (MCP reply happens later), so
-      # reserve under the stable task.id — that's the key reply / cancel /
-      # stuck-recovery will use to release the slot.
+      # Reserve under the stable task.id, not the per-run job_id: a task can
+      # outlive the job that reserved its slot (Claude Channel tasks wait on an
+      # MCP reply, pending_approval tasks pause on ApprovalPendingError), and
+      # every external release path — TasksController#cancel, stuck recovery,
+      # agent teardown — releases! by task.id. A job_id key would leave those
+      # releases unmatched, leaking the slot until the cache expiry.
       is_claude_channel_agent = agent.claude_channel_agent?
-      resource_id = is_claude_channel_agent ? task.id : (job_id || task.id)
+      resource_id = task.id
       tracker.reserve!(resource_id)
       should_release = true
 

data/app/jobs/collavre/compress_job.rb

@@ -77,9 +77,13 @@ module Collavre
       # Store comment IDs to delete before creating the new one (all originals including /compress command)
       comment_ids_to_delete = all_comments.pluck(:id)
 
-      # Create the summary comment in the same topic
+      # Create the summary comment in the same topic.
+      # Author it as the AI agent (not the human who ran /compress) so the
+      # comment is recognized as AI-generated content: this makes ai_user? true,
+      # which is what gates the "Review" button in the comment view. The summary
+      # body is AI output, so the agent is the correct author.
       summary_comment = creative.comments.create!(
-        user: user,
+        user: agent,
         topic_id: topic_id,
         content: summary_content,
         skip_dispatch: true  # system-generated summary, not user input

data/app/models/collavre/comment/broadcastable.rb

@@ -3,6 +3,9 @@ module Collavre
     module Broadcastable
       extend ActiveSupport::Concern
 
+      # The desktop and mobile inbox badge DOM ids kept in sync in real time.
+      INBOX_BADGE_TARGETS = %w[desktop-inbox-badge mobile-inbox-badge].freeze
+
       included do
         after_create_commit :broadcast_create
         after_update_commit :broadcast_update
@@ -112,21 +115,57 @@ module Collavre
         def broadcast_inbox_badge(inbox_creative, owner, count: nil)
           return unless inbox_creative && owner
 
-          count ||= Collavre::Inbox::BadgeComponent.new(user: owner, creative: inbox_creative).count
+          count ||= inbox_badge_count(inbox_creative, owner)
 
-          %w[desktop-inbox-badge mobile-inbox-badge].each do |target_id|
+          INBOX_BADGE_TARGETS.each do |target_id|
             Turbo::StreamsChannel.broadcast_replace_to(
               [ "inbox", owner ],
               target: target_id,
               partial: "inbox/badge_component/count",
-              locals: {
-                count: count,
-                badge_id: target_id,
-                show_zero: false
-              }
+              locals: inbox_badge_locals(count, target_id)
             )
           end
         end
+
+        # Render the same inbox badge replacements as a Turbo Stream string so a
+        # channel can transmit them straight to its own confirmed subscriber
+        # (see InboxBadgeChannel), instead of re-broadcasting to the sibling
+        # ["inbox", user] stream and risking a reconnect race. Returns nil when
+        # there is nothing to render.
+        def inbox_badge_turbo_stream(inbox_creative, owner, count: nil)
+          return unless inbox_creative && owner
+
+          count ||= inbox_badge_count(inbox_creative, owner)
+
+          INBOX_BADGE_TARGETS.map do |target_id|
+            Turbo::StreamsChannel.turbo_stream_action_tag(
+              :replace,
+              target: target_id,
+              template: ApplicationController.render(
+                partial: "inbox/badge_component/count",
+                formats: [ :html ],
+                locals: inbox_badge_locals(count, target_id)
+              )
+            )
+          end.join.html_safe
+        end
+
+        private
+
+        # Inbox badge count when no caller-supplied count is available (e.g. the
+        # reconnect snapshot in InboxBadgeChannel). Mirrors broadcast_badge's
+        # suppression: a user actively viewing the inbox (present in
+        # CommentPresenceStore) sees 0, so a reconnect can't repaint unread items
+        # over the suppressed badge.
+        def inbox_badge_count(inbox_creative, owner)
+          return 0 if CommentPresenceStore.list(inbox_creative.id).include?(owner.id)
+
+          Collavre::Inbox::BadgeComponent.new(user: owner, creative: inbox_creative).count
+        end
+
+        def inbox_badge_locals(count, target_id)
+          { count: count, badge_id: target_id, show_zero: false }
+        end
       end
 
       private