collavre 0.24.0 → 0.25.0

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

@@ -4,6 +4,7 @@ import { wrapHtmlInCodeBlocks } from '../../lib/html_code_block_wrapper'
 import { refreshCsrfToken } from '../../lib/api/csrf_fetch'
 import ReviewQuotesStore from './review_quotes_store'
 import { alertDialog } from '../../lib/utils/dialog'
+import chatDrafts from '../../lib/chat_drafts'
 
 // In-flight comment sends, keyed by creative id. This lives at module scope —
 // not on the controller instance — so the duplicate-submit guard survives a
@@ -36,14 +37,14 @@ export default class extends Controller {
 
   connect() {
     this.creativeId = null
-    this.editingId = null
+    this.editingId ??= null
     this.sending = false
-    this._reviewStore = new ReviewQuotesStore()
+    this._reviewStore ||= new ReviewQuotesStore()
     this.cachedImageFiles = null
 
     this.handleSubmit = this.handleSubmit.bind(this)
     this.handleSend = this.handleSend.bind(this)
-    this.defaultSubmitHTML = this.submitTarget.innerHTML
+    this.defaultSubmitHTML ??= this.submitTarget.innerHTML
     this.handlePointerSend = this.handlePointerSend.bind(this)
     this.handleTouchSend = this.handleTouchSend.bind(this)
     this.handleCancel = this.handleCancel.bind(this)
@@ -89,11 +90,125 @@ export default class extends Controller {
     }
     this.textareaTarget.addEventListener('input', this._autoResize)
 
+    // Draft persistence: debounce-save unsent input per chat.
+    // _activeDraftKey always identifies the chat whose text is in the textarea.
+    this._activeDraftKey ??= null
+    this._activeDraftCreativeId ??= null
+    this._awaitingEffectiveDraftKeyFor ??= null
+    this._draftSaveTimer = null
+    this._draftSaveSuspendedForPermission ??= false
+    // A cross-tab logout permanently retires the old user's namespace for this
+    // controller lifetime, including Stimulus reconnects in the stale tab.
+    this._disabledDraftNamespaces ||= new Set()
+    this._draftBackupCleanupPendingNamespaces ||= new Set()
+    this._observedDraftClearNonces ||= new Map()
+    // A pending send survives a Stimulus reconnect on this controller instance,
+    // so its completion must keep comparing against the same draft history.
+    this._draftRevisions ||= new Map()
+    this._observedDrafts ||= new Map()
+    this._observedDisplayedDrafts ||= new Map()
+    this._observedDraftRevisions ||= new Map()
+    this._observedStoredDraftRevisions ||= new Map()
+    // A linked chat can replace its temporary raw key while its request is in
+    // flight. Keep mutable submission state across that migration/reconnect.
+    this._pendingDraftSubmissions ||= new Set()
+    const draftNamespace = chatDrafts.namespace()
+    const draftClearNonce = chatDrafts.clearNonce(draftNamespace)
+    const draftClearNoncePending = chatDrafts.clearNoncePending(draftNamespace)
+    const observedDraftClearNonce = this._observedDraftClearNonces.has(draftNamespace)
+    let canObserveDraftClearNonce = true
+    if (draftClearNonce && !observedDraftClearNonce) {
+      canObserveDraftClearNonce = chatDrafts.clearSubmissionBackupsForClear(
+	draftNamespace,
+	draftClearNonce,
+      )
+      if (canObserveDraftClearNonce && !draftClearNoncePending) {
+	this._draftBackupCleanupPendingNamespaces.delete(draftNamespace)
+      } else {
+	this._draftBackupCleanupPendingNamespaces.add(draftNamespace)
+      }
+    }
+    if (
+      draftClearNonce &&
+      observedDraftClearNonce &&
+      this._observedDraftClearNonces.get(draftNamespace) !== draftClearNonce
+    ) {
+      this._disableDraftNamespace(draftNamespace)
+    }
+    if (
+      draftClearNonce !== undefined &&
+      canObserveDraftClearNonce &&
+      !draftClearNoncePending
+    ) {
+      this._observedDraftClearNonces.set(draftNamespace, draftClearNonce)
+    }
+    this._handlePageHide = () => {
+      if (!this.element.isConnected) return
+
+      this._flushDraftSave()
+    }
+    this._handleDraftStorage = (event) => {
+      if (!this.element.isConnected || !chatDrafts.wasCleared(event)) return
+
+      const clearedNamespace = chatDrafts.namespace()
+      this._disableDraftNamespace(clearedNamespace)
+    }
+    this._handleCompositionEnd = () => {
+      this._imeCommitPending = true
+    }
+    // Chrome fires the commit `input` after `compositionend`, but Firefox has
+    // shipped the reverse order, where the commit input consumes the latch
+    // before it is even set. Nothing would clear the leftover latch, so the
+    // next ordinary edit would be misread as a commit. The commit input always
+    // arrives before the user can act again, so any fresh gesture expires it.
+    this._expireImeCommitLatch = (event) => {
+      if (event?.isComposing || event?.keyCode === 229) return
+
+      this._imeCommitPending = false
+    }
+    this._handleDraftInput = (event) => {
+      // Consume the composition flag before any early return, so it can never
+      // outlive the `input` event that the commit itself fired. Firefox has
+      // shipped both orderings, so accept isComposing on the input event too.
+      const isImeCommit = Boolean(event?.isComposing) || this._imeCommitPending === true
+      this._imeCommitPending = false
+      if (
+        this.editingId ||
+	this._draftPersistenceDisabled() ||
+        this._draftSaveSuspendedForPermission ||
+        this._shouldSuppressDraftSaveForStash() ||
+        !this._reviewStore.isEmpty ||
+        !this._activeDraftKey
+      ) return
+      // An IME commit fires `input` after the keydown that started a send, so
+      // the textarea still holds exactly what went to the server. Counting it
+      // as a revision would defeat _currentPendingSubmission and make the sent
+      // message look like a draft typed mid-flight, restoring it on success.
+      // Text equality alone is not enough to suppress: re-entering the same
+      // string mid-flight (select-all + paste to send it twice) is a real edit.
+      if (isImeCommit && this._currentTextIsPendingSubmission()) return
+      const revisionKey = `${chatDrafts.namespace()}:${this._activeDraftKey}`
+      this._draftRevisions.set(revisionKey, (this._draftRevisions.get(revisionKey) || 0) + 1)
+      clearTimeout(this._draftSaveTimer)
+      this._draftSaveTimer = setTimeout(() => this._saveDraftNow(), 500)
+    }
+    this.textareaTarget.addEventListener('compositionend', this._handleCompositionEnd)
+    this.textareaTarget.addEventListener('keydown', this._expireImeCommitLatch)
+    this.textareaTarget.addEventListener('paste', this._expireImeCommitLatch)
+    this.textareaTarget.addEventListener('drop', this._expireImeCommitLatch)
+    this.textareaTarget.addEventListener('input', this._handleDraftInput)
+    window.addEventListener('pagehide', this._handlePageHide)
+    window.addEventListener('storage', this._handleDraftStorage)
+
     this.textareaTarget.addEventListener('keydown', (event) => {
       if (event.key === 'Escape') {
         this.presenceController?.cancelAllAgentTasks()
         return
       }
+      // While an IME is composing (Korean, Japanese, Chinese), Enter confirms
+      // the pending syllable rather than submitting. keyCode 229 covers
+      // browsers that leave isComposing unset on the keydown itself.
+      if (event.isComposing || event.keyCode === 229) return
       if (event.key === 'Enter' && !event.shiftKey) {
         if (this.isMentionMenuVisible()) return
         this.handleSend(event)
@@ -107,9 +222,76 @@ export default class extends Controller {
 
     this.handleListLoaded = () => this._updateInboxReplyMode()
     this.element.addEventListener('comments--list:loaded', this.handleListLoaded)
+
+    // A slash command with an input schema takes over the textarea and submits
+    // itself (modules/command_menu.js), so a draft the user had already typed
+    // cannot go out with it. The menu hands the draft over here instead of
+    // discarding it, and we put it back once the send settles.
+    this.handleStashDraft = this.handleStashDraft.bind(this)
+    this.element.addEventListener('comments--form:stash-draft', this.handleStashDraft)
   }
 
   handleTopicChange(event) {
+    // This event fires before onPopupOpened during a chat switch, while the
+    // textarea still contains the outgoing chat's text. Flush before re-keying.
+    const draftPersistenceDisabled = this._draftPersistenceDisabled()
+    const nextDraftKey = draftPersistenceDisabled
+      ? null
+      : this.element.dataset.effectiveCreativeId || this.element.dataset.creativeId || null
+    const nextCreativeId = draftPersistenceDisabled
+      ? null
+      : this.element.dataset.creativeId || null
+    const draftKeyChanged = String(this._activeDraftKey || '') !== String(nextDraftKey || '')
+    const creativeChanged =
+      String(this._activeDraftCreativeId || '') !== String(nextCreativeId || '')
+    const resolvingIncomingDraftKey =
+      this._awaitingEffectiveDraftKeyFor &&
+      String(this._awaitingEffectiveDraftKeyFor) === String(nextCreativeId || '')
+    let keepAwaitingEffectiveDraftKey = false
+    if (draftKeyChanged || creativeChanged) {
+      const previousDraftKey = this._activeDraftKey
+      // onChatWillOpen already flushed the outgoing chat. While the effective
+      // key is loading, save only actual new input; rewriting a restored raw
+      // draft here would make stale text appear newer than the canonical draft.
+      if (!resolvingIncomingDraftKey || this._draftSaveTimer) this._flushDraftSave()
+      this._activeDraftKey = nextDraftKey ? String(nextDraftKey) : null
+      this._activeDraftCreativeId = nextCreativeId ? String(nextCreativeId) : null
+      if (
+        resolvingIncomingDraftKey &&
+        previousDraftKey &&
+        this._activeDraftKey
+      ) {
+        const sourceDraft = chatDrafts.snapshot(previousDraftKey)
+	const moveCompleted = chatDrafts.move(previousDraftKey, this._activeDraftKey)
+        const targetDraft = chatDrafts.snapshot(this._activeDraftKey)
+	const movedBackups = moveCompleted
+	  ? chatDrafts.moveSubmissionBackups(previousDraftKey, this._activeDraftKey)
+	  : new Map()
+	if (moveCompleted && (targetDraft.revision || !sourceDraft.revision)) {
+          this._rebindPendingDraftSubmissions(
+            previousDraftKey,
+            this._activeDraftKey,
+            sourceDraft,
+            targetDraft,
+            movedBackups,
+          )
+	} else if (!moveCompleted) {
+	  this._trackPartialDraftMigration(
+	    previousDraftKey,
+	    this._activeDraftKey,
+	    sourceDraft,
+	    targetDraft,
+	  )
+	  if (chatDrafts.isNewer(previousDraftKey, this._activeDraftKey)) {
+	    this._activeDraftKey = String(previousDraftKey)
+	    keepAwaitingEffectiveDraftKey = true
+	  }
+        }
+      }
+    }
+    if (resolvingIncomingDraftKey && !keepAwaitingEffectiveDraftKey) {
+      this._awaitingEffectiveDraftKeyFor = null
+    }
     this.currentTopicId = event.detail.topicId
     this._isInbox = event.detail.isInbox || false
     this._systemTopicId = event.detail.systemTopicId || null
@@ -125,6 +307,14 @@ export default class extends Controller {
   }
 
   disconnect() {
+    this._flushDraftSave()
+    this.textareaTarget.removeEventListener('compositionend', this._handleCompositionEnd)
+    this.textareaTarget.removeEventListener('keydown', this._expireImeCommitLatch)
+    this.textareaTarget.removeEventListener('paste', this._expireImeCommitLatch)
+    this.textareaTarget.removeEventListener('drop', this._expireImeCommitLatch)
+    this.textareaTarget.removeEventListener('input', this._handleDraftInput)
+    window.removeEventListener('pagehide', this._handlePageHide)
+    window.removeEventListener('storage', this._handleDraftStorage)
     this.formTarget.removeEventListener('submit', this.handleSubmit)
     this.submitTarget.removeEventListener('click', this.handleSend)
     this.submitTarget.removeEventListener('pointerup', this.handlePointerSend)
@@ -142,6 +332,7 @@ export default class extends Controller {
     this.textareaTarget.removeEventListener('paste', this.handlePaste)
     this.element.removeEventListener('comments--topics:change', this.handleTopicChange)
     this.element.removeEventListener('comments--list:loaded', this.handleListLoaded)
+    this.element.removeEventListener('comments--form:stash-draft', this.handleStashDraft)
   }
 
   get listController() {
@@ -155,31 +346,86 @@ export default class extends Controller {
   onPopupOpened({ creativeId, canComment }) {
     this.creativeId = creativeId
     this.element.dataset.creativeId = creativeId || ''
+    if (canComment) this._draftSaveSuspendedForPermission = false
     // Stale topic ids from the previous creative are cleared by the popup
     // controller BEFORE topics loadTopics() dispatches comments--topics:change,
     // so by the time we get here, currentTopicId already reflects the new
     // creative's restored topic. Do not re-clear it.
     this.formTarget.style.display = canComment ? '' : 'none'
+    // Capture input entered while topics were loading before reset clears it.
+    // Without a pending input timer, a blank textarea must not erase a draft
+    // that is waiting in storage to be restored below.
+    if (this._draftSaveTimer) this._flushDraftSave()
     this.resetForm()
+    this._draftSaveSuspendedForPermission = !canComment
     if (canComment && this.shouldAutoFocusOnOpen()) {
       requestAnimationFrame(() => this.textareaTarget.focus())
     }
+    this._restoreDraft()
+  }
+
+  onChatWillOpen({ creativeId }) {
+    const nextCreativeId = creativeId ? String(creativeId) : null
+    if (
+      String(this._activeDraftCreativeId || '') === String(nextCreativeId || '')
+    ) return
+
+    // The popup publishes its raw creative id before awaiting topics. Flush the
+    // outgoing chat now, then give any input typed during that await a key owned
+    // by the incoming chat. The topics event replaces it with the effective id.
+    this._flushDraftSave()
+    if (this._draftPersistenceDisabled()) {
+      this._activeDraftKey = null
+      this._activeDraftCreativeId = null
+      this._awaitingEffectiveDraftKeyFor = null
+      this.creativeId = creativeId
+      this.resetForm()
+      return
+    }
+    this._activeDraftKey = nextCreativeId
+    this._activeDraftCreativeId = nextCreativeId
+    this._awaitingEffectiveDraftKeyFor = nextCreativeId
+    this.creativeId = creativeId
+    this.resetForm()
+    this._restoreDraft()
   }
 
   onPopupClosed() {
+    this._flushDraftSave()
+    this._activeDraftKey = null
+    this._activeDraftCreativeId = null
+    this._awaitingEffectiveDraftKeyFor = null
     this.stopSpeechRecognition()
     this.resetForm()
   }
 
+  discardDraft() {
+    const namespace = chatDrafts.namespace()
+    this._pendingDraftSubmissions?.forEach((submission) => {
+      if (submission.namespace === namespace) submission.invalidated = true
+    })
+    clearTimeout(this._draftSaveTimer)
+    this._draftSaveTimer = null
+    this._activeDraftKey = null
+    this._activeDraftCreativeId = null
+    this._awaitingEffectiveDraftKeyFor = null
+    this._stashedDraft = null
+    this.resetForm()
+  }
+
   setCommentPermission(canComment) {
     this.formTarget.style.display = canComment ? '' : 'none'
 
     if (!canComment) {
+      this._flushDraftSave()
+      this._draftSaveSuspendedForPermission = true
       this.stopSpeechRecognition()
       this.resetForm()
       return
     }
 
+    this._draftSaveSuspendedForPermission = false
+    this._restoreDraft()
     if (this.shouldAutoFocusOnOpen()) {
       requestAnimationFrame(() => this.textareaTarget.focus())
     }
@@ -200,6 +446,7 @@ export default class extends Controller {
   }
 
   startEditing({ id, content, private: isPrivate }) {
+    this._flushDraftSave()
     this.editingId = id
     this.textareaTarget.value = content || ''
     if (this.privateCheckboxTarget) {
@@ -213,6 +460,58 @@ export default class extends Controller {
     this.focusTextarea()
   }
 
+  handleStashDraft(event) {
+    const draft = event.detail?.draft || null
+    if (draft) this._flushDraftSave()
+    // Tagged with the conversation it was typed in: the popup reuses this one
+    // controller for every creative, so a stash left over from another one must
+    // not be handed back here.
+    this._stashedDraft = draft ? { draft, creativeId: this.creativeId } : null
+  }
+
+  _stashedDraftBelongsToCurrentCreative() {
+    return Boolean(
+      this._stashedDraft &&
+      String(this._stashedDraft.creativeId) === String(this.creativeId),
+    )
+  }
+
+  _shouldSuppressDraftSaveForStash() {
+    if (!this._stashedDraftBelongsToCurrentCreative()) return false
+
+    // Before handleSend captures the command, the command-menu input event
+    // must not replace the stashed ordinary draft. Once the send starts, only
+    // the submitted command remains suppressed; later input is a new draft.
+    return !this._stashedDraft.submittedText ||
+      this.textareaTarget.value === this._stashedDraft.submittedText
+  }
+
+  _restoreStashedDraft(submittedText) {
+    const stashed = this._stashedDraft
+    this._stashedDraft = null
+    if (!stashed) return
+    // Switching creatives calls onPopupOpened on this same instance (there is
+    // no disconnect between conversations), so a send that settles after the
+    // switch would drop the previous conversation's draft into the new one.
+    // The draft belongs to a conversation that is no longer on screen; discard
+    // it rather than misfile it.
+    if (String(stashed.creativeId ?? '') !== String(this.creativeId ?? '')) return
+    const draft = stashed.draft
+    // Two boxes are safe to overwrite: an empty one (the success path runs
+    // resetForm) and one still holding exactly what we submitted (the failure
+    // path never clears it, so the command text is left sitting there). Any
+    // other content is text the user typed while the request was in flight, or
+    // a review quote the failure path restored, and must not be clobbered.
+    const current = this.textareaTarget.value
+    if (current.trim().length > 0 && current !== submittedText) return
+    this.textareaTarget.value = draft
+    // Resize and re-enable send directly rather than dispatching `input`, which
+    // would re-open the command menu for a draft that starts with "/".
+    this._autoResize()
+    this._updateSubmitButton()
+    this._saveDraftNow()
+  }
+
   resetForm() {
     this.formTarget.reset()
     this.editingId = null
@@ -224,11 +523,286 @@ export default class extends Controller {
     this.presenceController?.clearManualTypingMessage()
     this.clearImageAttachments()
     this.cancelQuote()
-    this.textareaTarget.placeholder = ''
+    this.textareaTarget.placeholder = this._defaultPlaceholder()
     // Reset textarea height after clearing content
     this.textareaTarget.style.height = 'auto'
   }
 
+  _saveDraftNow() {
+    if (
+      !this._activeDraftKey ||
+      this._draftPersistenceDisabled() ||
+      this._draftSaveSuspendedForPermission ||
+      this.editingId ||
+      this._shouldSuppressDraftSaveForStash() ||
+      !this._reviewStore.isEmpty
+    ) return
+    if (this._currentTextIsPendingSubmission()) return
+    const draftKey = this._activeDraftKey
+    const text = this.textareaTarget.value
+    const blank = !text.trim()
+    const storedDraft = chatDrafts.snapshot(draftKey)
+    const storedText = storedDraft.text
+    const hasStoredEntry = chatDrafts.updatedAt(draftKey) !== null
+    const observationKey = `${chatDrafts.namespace()}:${draftKey}`
+    const hasObservedDraft = this._observedDrafts?.has(observationKey)
+    const observedText = this._observedDrafts?.get(observationKey)
+    const hasObservedDisplayedDraft =
+      this._observedDisplayedDrafts?.has(observationKey)
+    const observedDisplayedText = hasObservedDisplayedDraft
+      ? this._observedDisplayedDrafts.get(observationKey)
+      : observedText
+    const observedRevision = this._observedDraftRevisions?.get(observationKey) || 0
+    const observedStoredRevision =
+      this._observedStoredDraftRevisions?.get(observationKey) || null
+    const currentRevision = this._draftRevisions?.get(observationKey) || 0
+    const inputChangedLocally = currentRevision !== observedRevision
+    const preserveBlank =
+      blank && Boolean(this._awaitingEffectiveDraftKeyFor) && inputChangedLocally
+    const displayedDraftChanged =
+      (hasObservedDisplayedDraft || hasObservedDraft) &&
+      (observedDisplayedText || '') !== text
+    const draftChangedLocally =
+      inputChangedLocally || displayedDraftChanged
+    const storedDraftChangedOutsideController = hasObservedDraft && (
+      observedText !== storedText || observedStoredRevision !== storedDraft.revision
+    )
+    // An idle tab can retain stale restored text after another tab updates the
+    // same draft. Closing or switching that idle tab must not write it back.
+    if (!draftChangedLocally && storedDraftChangedOutsideController) return
+    if (preserveBlank) {
+      if (storedText !== null || !hasStoredEntry) {
+        chatDrafts.set(draftKey, '', { preserveBlank: true })
+      }
+    } else if (blank) {
+      if (hasStoredEntry) {
+        chatDrafts.clear(draftKey)
+      }
+    } else if (storedText !== text) {
+      chatDrafts.set(draftKey, text)
+    }
+    if (blank && draftChangedLocally) chatDrafts.clearSubmissionBackups(draftKey)
+    this._observeDraft(draftKey)
+  }
+
+  _flushDraftSave() {
+    clearTimeout(this._draftSaveTimer)
+    this._draftSaveTimer = null
+    this._saveDraftNow()
+  }
+
+  _currentTextIsPendingSubmission() {
+    return Boolean(this._currentPendingSubmission())
+  }
+
+  _currentPendingSubmission() {
+    const namespace = chatDrafts.namespace()
+    const key = String(this._activeDraftKey || '')
+
+    return [...(this._pendingDraftSubmissions || [])].find((submission) => (
+      !submission.invalidated &&
+      submission.namespace === namespace &&
+      String(submission.key || '') === key &&
+      !submission.hadStash &&
+      !submission.hadReview &&
+      !submission.editing &&
+      submission.text === this.textareaTarget.value &&
+      (this._draftRevisions?.get(submission.revisionKey) || 0) === submission.keyRevision
+    ))
+  }
+
+  _restoreDraft() {
+    if (
+      !this._activeDraftKey ||
+      this._draftPersistenceDisabled() ||
+      this.editingId
+    ) return
+    if (this.textareaTarget.value.trim()) return
+
+    const draft = chatDrafts.snapshot(this._activeDraftKey)
+    const backup = chatDrafts.latestSubmissionBackup(this._activeDraftKey)
+    const restoreBackup = Boolean(
+      backup?.text &&
+      (draft.updatedAt === null || backup.updatedAt > draft.updatedAt),
+    )
+    if (backup && !restoreBackup) chatDrafts.removeSubmissionBackup(backup.key)
+    const restoredText = restoreBackup ? backup.text : draft.text
+    this._observeDraft(
+      this._activeDraftKey,
+      draft.text,
+      chatDrafts.namespace(),
+      draft.revision,
+      restoredText,
+    )
+    if (restoredText) {
+      this.textareaTarget.value = restoredText
+      requestAnimationFrame(() => this._autoResize())
+    } else if (draft.updatedAt === null) {
+      this._restorePendingSubmittedDraft()
+    }
+  }
+
+  _restorePendingSubmittedDraft() {
+    const namespace = chatDrafts.namespace()
+    const pending = [...(this._pendingDraftSubmissions || [])].find((submission) => (
+      !submission.invalidated &&
+      submission.namespace === namespace &&
+      String(submission.key || '') === String(this._activeDraftKey || '') &&
+      !submission.hadStash &&
+      !submission.hadReview &&
+      !submission.editing
+    ))
+    if (!pending) return
+
+    this.textareaTarget.value = pending.text
+    requestAnimationFrame(() => this._autoResize())
+    this._updateSubmitButton()
+  }
+
+  _draftPersistenceDisabled(namespace = chatDrafts.namespace()) {
+    return this._disabledDraftNamespaces?.has(namespace) ||
+      this._draftBackupCleanupPendingNamespaces?.has(namespace) ||
+      false
+  }
+
+  _disableDraftNamespace(namespace) {
+    this._disabledDraftNamespaces.add(namespace)
+    this.discardDraft()
+    // A timer in this tab may have raced with the logout tab's first clear.
+    chatDrafts.clearAll({ broadcast: false })
+  }
+
+  _observeDraft(
+    draftKey,
+    text,
+    namespace = chatDrafts.namespace(),
+    storedRevision,
+    displayedText,
+  ) {
+    if (!draftKey) return
+    const storedDraft = storedRevision === undefined
+      ? chatDrafts.snapshot(draftKey)
+      : { text, revision: storedRevision }
+    const observationKey = `${namespace}:${draftKey}`
+    this._observedDrafts?.set(observationKey, storedDraft.text)
+    this._observedDisplayedDrafts?.set(
+      observationKey,
+      displayedText === undefined ? storedDraft.text : displayedText,
+    )
+    this._observedDraftRevisions?.set(
+      observationKey,
+      this._draftRevisions?.get(observationKey) || 0,
+    )
+    this._observedStoredDraftRevisions?.set(observationKey, storedDraft.revision)
+  }
+
+  _rebindPendingDraftSubmissions(
+    sourceKey,
+    targetKey,
+    sourceDraft,
+    targetDraft,
+    movedBackups = new Map(),
+  ) {
+    const namespace = chatDrafts.namespace()
+    const targetRevisionKey = `${namespace}:${targetKey}`
+
+    this._pendingDraftSubmissions?.forEach((submission) => {
+      if (
+        submission.namespace !== namespace ||
+        String(submission.key) !== String(sourceKey)
+      ) return
+
+      const targetMatchesStoredBaseline = submission.storedRevision && targetDraft.revision === submission.storedRevision
+      const sourceMatchesSubmission =
+        sourceDraft.revision &&
+        targetDraft.revision === sourceDraft.revision &&
+        targetDraft.text === submission.text
+      const submittedDraftWasUnstored =
+        !submission.storedRevision &&
+        !sourceDraft.revision &&
+        !targetDraft.revision
+      const submittedDraftWasMoved = targetMatchesStoredBaseline || sourceMatchesSubmission || submittedDraftWasUnstored
+      if (
+        sourceDraft.revision &&
+        sourceDraft.text === submission.text
+      ) {
+        submission.migratedSources.push({
+          key: String(sourceKey),
+          revision: sourceDraft.revision,
+        })
+      }
+      submission.key = String(targetKey)
+      submission.revisionKey = targetRevisionKey
+      submission.keyRevision = this._draftRevisions?.get(targetRevisionKey) || 0
+      submission.storedRevision = targetDraft.revision
+      submission.storedUpdatedAt = targetDraft.updatedAt
+      submission.storedChangedOutsideController ||=
+        !submittedDraftWasMoved
+      if (submission.backupKey && movedBackups.has(submission.backupKey)) {
+        submission.backupKey = movedBackups.get(submission.backupKey)
+      }
+    })
+  }
+
+  _trackPartialDraftMigration(sourceKey, targetKey, sourceDraft, targetDraft) {
+    if (
+      !sourceDraft.revision ||
+      targetDraft.revision !== sourceDraft.revision
+    ) return
+
+    const namespace = chatDrafts.namespace()
+    this._pendingDraftSubmissions?.forEach((submission) => {
+      if (
+	submission.namespace !== namespace ||
+	String(submission.key) !== String(sourceKey) ||
+	submission.hadStash ||
+	submission.hadReview ||
+	submission.editing ||
+	submission.storedRevision !== sourceDraft.revision
+      ) return
+
+      submission.migratedSources.push({
+	key: String(targetKey),
+	revision: targetDraft.revision,
+      })
+    })
+  }
+
+  _clearMigratedSubmittedSources(submission) {
+    submission.migratedSources.forEach(({ key, revision }) => {
+      if (chatDrafts.revision(key) !== revision) return
+
+      chatDrafts.clear(key)
+      this._observeDraft(key, null, submission.namespace)
+    })
+  }
+
+  _persistFailedSubmissionDraft(submission) {
+    if (
+      submission.invalidated ||
+      submission.hadStash ||
+      submission.hadReview ||
+      submission.editing ||
+      submission.namespace !== chatDrafts.namespace()
+    ) return
+
+    const currentDraft = chatDrafts.snapshot(submission.key)
+    const currentKeyRevision =
+      this._draftRevisions?.get(submission.revisionKey) || 0
+    const submittedChatAdvanced =
+      submission.storedChangedOutsideController ||
+      currentKeyRevision !== submission.keyRevision ||
+      currentDraft.revision !== submission.storedRevision ||
+      currentDraft.updatedAt !== submission.storedUpdatedAt
+    if (submittedChatAdvanced) return
+
+    submission.backupKey ||= chatDrafts.saveSubmissionBackup(
+      submission.key,
+      submission.text,
+      { updatedAt: submission.backupUpdatedAt },
+    )
+  }
+
   setSendingState(isSending) {
     if (!this.submitTarget) return
 
@@ -248,6 +822,7 @@ export default class extends Controller {
 
   handleSend(event) {
     event.preventDefault()
+    const commandSubmissionId = event.commandSubmissionId || null
 
     // If active quote exists, handle based on type
     const store = this._reviewStore
@@ -271,6 +846,19 @@ export default class extends Controller {
     this.sending = true
     this.setSendingState(true)
     this.presenceController?.stoppedTyping()
+    if (commandSubmissionId) {
+      this.element.dispatchEvent(new CustomEvent('comments--form:submit-started', {
+        detail: { submissionId: commandSubmissionId },
+      }))
+    }
+
+    // Cancel any pending input debounce before capturing the submission. A
+    // write while the request is in flight looks like a newer draft and can
+    // restore the already-sent text on success. Failures persist below.
+    if (this._draftSaveTimer) {
+      clearTimeout(this._draftSaveTimer)
+      this._draftSaveTimer = null
+    }
 
     // Build final content from review quotes + user text
     if (hasQuotes) {
@@ -281,6 +869,56 @@ export default class extends Controller {
 
     const wasPrivate = this.privateCheckboxTarget?.checked ?? false
 
+    // Captured after the review-quote rewrite above, so it is the exact content
+    // going to the server. _restoreStashedDraft compares against it to tell a
+    // failure that left the command text behind from text typed mid-flight.
+    const submittedText = this.textareaTarget.value
+    const initialSubmittedDraftKey = this._activeDraftKey
+    const submittedDraftNamespace = chatDrafts.namespace()
+    const initialSubmittedDraftRevisionKey =
+      `${submittedDraftNamespace}:${initialSubmittedDraftKey}`
+    const initialSubmittedDraft = chatDrafts.snapshot(initialSubmittedDraftKey)
+    const submittedHadStash = this._stashedDraftBelongsToCurrentCreative()
+    const submittedBackup = chatDrafts.latestSubmissionBackup(initialSubmittedDraftKey)
+    const submittedBackupUpdatedAt = Math.max(
+      Date.now(),
+      (initialSubmittedDraft.updatedAt || 0) + 1,
+    )
+    const observedSubmittedText =
+      this._observedDrafts?.get(initialSubmittedDraftRevisionKey)
+    const observedSubmittedStoredRevision =
+      this._observedStoredDraftRevisions?.get(initialSubmittedDraftRevisionKey) || null
+    const submittedTextChangedOutsideController =
+      observedSubmittedText !== initialSubmittedDraft.text
+    const submittedRevisionChangedOutsideController =
+      observedSubmittedStoredRevision !== initialSubmittedDraft.revision
+    const submittedStoredDraftChangedOutsideController =
+      this._observedDrafts?.has(initialSubmittedDraftRevisionKey) &&
+      (submittedTextChangedOutsideController || submittedRevisionChangedOutsideController)
+    const submittedDraft = {
+      key: initialSubmittedDraftKey,
+      namespace: submittedDraftNamespace,
+      revisionKey: initialSubmittedDraftRevisionKey,
+      storedChangedOutsideController: submittedStoredDraftChangedOutsideController,
+      keyRevision: this._draftRevisions?.get(initialSubmittedDraftRevisionKey) || 0,
+      storedRevision: initialSubmittedDraft.revision,
+      storedUpdatedAt: initialSubmittedDraft.updatedAt,
+      backupUpdatedAt: submittedBackupUpdatedAt,
+      text: submittedText,
+      hadStash: submittedHadStash,
+      backupKey: submittedBackup?.text === submittedText ? submittedBackup.key : null,
+      migratedSources: [],
+    }
+    this._pendingDraftSubmissions ||= new Set()
+    this._pendingDraftSubmissions.add(submittedDraft)
+    const submittedEditingId = this.editingId
+    const submittedHadReview = hasQuotes
+    submittedDraft.editing = Boolean(submittedEditingId)
+    submittedDraft.hadReview = submittedHadReview
+    if (submittedHadStash) {
+      this._stashedDraft.submittedText = submittedText
+    }
+
     const formData = new FormData(this.formTarget)
     const effectiveTopicId = this.currentTopicId || this._mainTopicId
     if (effectiveTopicId) {
@@ -293,11 +931,12 @@ export default class extends Controller {
 
     let url = `/creatives/${this.creativeId}/comments`
     let method = 'POST'
-    if (this.editingId) {
-      url += `/${this.editingId}`
+    if (submittedEditingId) {
+      url += `/${submittedEditingId}`
       method = 'PATCH'
     }
 
+    let settlementUi = Promise.resolve()
     const doFetch = () => fetch(url, {
       method,
       headers: { 'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content },
@@ -323,12 +962,97 @@ export default class extends Controller {
         })
       })
       .then((html) => {
-        const wasEditing = this.editingId
+        if (submittedDraft.backupKey) {
+	  chatDrafts.clearSubmissionBackupsThrough(
+            submittedDraft.backupKey,
+            submittedDraft.namespace,
+          )
+          submittedDraft.backupKey = null
+        }
+        if (
+          submittedDraft.invalidated ||
+          submittedDraft.namespace !== chatDrafts.namespace()
+        ) return
+
+        const {
+          key: submittedDraftKey,
+          namespace: submittedDraftNamespace,
+          revisionKey: submittedDraftRevisionKey,
+          storedChangedOutsideController: submittedStoredDraftChangedOutsideController,
+          keyRevision: submittedDraftKeyRevision,
+          storedRevision: submittedDraftStoredRevision,
+          hadStash: submittedHadStash,
+        } = submittedDraft
+        const ownsSubmittedDraftNamespace =
+          !submittedDraft.invalidated &&
+          submittedDraftNamespace === chatDrafts.namespace()
+        const switchedChats =
+          ownsSubmittedDraftNamespace &&
+          submittedDraftKey &&
+          this._activeDraftKey &&
+          String(submittedDraftKey) !== String(this._activeDraftKey)
+        const submittedChatStillActive =
+          submittedDraftKey &&
+          this._activeDraftKey &&
+          String(submittedDraftKey) === String(this._activeDraftKey)
+        const hasNewerActiveDraft =
+          ownsSubmittedDraftNamespace &&
+          !submittedEditingId &&
+          !submittedHadReview &&
+          submittedChatStillActive &&
+          (this._draftRevisions?.get(submittedDraftRevisionKey) || 0) !==
+            submittedDraftKeyRevision
+        const hasNewerStoredDraft =
+          ownsSubmittedDraftNamespace &&
+          !submittedEditingId &&
+          !submittedHadReview &&
+          submittedDraftKey &&
+          (
+            (this._draftRevisions?.get(submittedDraftRevisionKey) || 0) !==
+              submittedDraftKeyRevision ||
+            submittedStoredDraftChangedOutsideController ||
+            chatDrafts.revision(submittedDraftKey) !== submittedDraftStoredRevision
+          )
+        const hasNewerDraft = hasNewerActiveDraft || hasNewerStoredDraft
+        const newerDraft = hasNewerActiveDraft
+          ? (
+            this._draftSaveSuspendedForPermission
+              ? chatDrafts.get(submittedDraftKey)
+              : this.textareaTarget.value
+          )
+          : null
+        if (switchedChats) this._flushDraftSave()
+        clearTimeout(this._draftSaveTimer)
+        this._draftSaveTimer = null
         this.resetForm()
-        if (wasEditing) {
+        if (submittedEditingId) {
+          if (ownsSubmittedDraftNamespace) this._restoreDraft()
           // If editing, just replace the item in place
           this.renderCommentHtml(html, { replaceExisting: true })
         } else {
+          if (submittedHadReview && ownsSubmittedDraftNamespace) {
+            this._restoreDraft()
+          } else if (hasNewerActiveDraft) {
+            this.textareaTarget.value = newerDraft
+            this._autoResize()
+            this._updateSubmitButton()
+            chatDrafts.set(submittedDraftKey, newerDraft)
+            this._observeDraft(submittedDraftKey, newerDraft, submittedDraftNamespace)
+          } else if (hasNewerStoredDraft && submittedChatStillActive) {
+            this._restoreDraft()
+          } else if (
+            !submittedHadStash &&
+            !hasNewerDraft &&
+            submittedDraftKey &&
+            ownsSubmittedDraftNamespace
+          ) {
+            chatDrafts.clear(submittedDraftKey)
+            this._observeDraft(submittedDraftKey, null, submittedDraftNamespace)
+          }
+          if (ownsSubmittedDraftNamespace && !submittedHadReview) {
+            this._clearMigratedSubmittedSources(submittedDraft)
+          }
+          if (switchedChats && !submittedHadReview) this._restoreDraft()
           // New Comment:
           // 1. If we are in "History Mode" (scrolled up), sending a message should jump us to the latest.
           // 2. Ideally, we just reload the "Latest" page to ensure sync and Live Mode.
@@ -363,6 +1087,8 @@ export default class extends Controller {
         }
       })
       .catch((error) => {
+        if (submittedDraft.invalidated) return
+
         // Restore review quotes state on failure so user doesn't lose work
         if (this._reviewStore.hasBackup()) {
           const restoredText = this._reviewStore.restore()
@@ -370,12 +1096,28 @@ export default class extends Controller {
           this._renderReviewQuoteChips()
           this._updateSubmitButton()
         }
-        alertDialog(error?.message || 'Failed to submit comment')
+        this._persistFailedSubmissionDraft(submittedDraft)
+        settlementUi = alertDialog(error?.message || 'Failed to submit comment')
       })
       .finally(() => {
+        this._pendingDraftSubmissions.delete(submittedDraft)
         inFlightSends.delete(sendKey)
         this._hasRetried = false
         this.setSendingState(false)
+        if (
+          !submittedDraft.invalidated &&
+          submittedDraft.namespace === chatDrafts.namespace()
+        ) {
+          this._restoreStashedDraft(submittedText)
+        } else {
+          this._stashedDraft = null
+        }
+        const announceSettlement = () => {
+          this.element.dispatchEvent(new CustomEvent('comments--form:submit-settled', {
+            detail: { submissionId: commandSubmissionId },
+          }))
+        }
+        settlementUi.then(announceSettlement, announceSettlement)
       })
   }
 
@@ -393,6 +1135,7 @@ export default class extends Controller {
   handleCancel(event) {
     event.preventDefault()
     this.resetForm()
+    this._restoreDraft()
   }
 
   handleSearch(event) {
@@ -729,6 +1472,7 @@ export default class extends Controller {
     if (!selectedText) return
 
     const store = this._reviewStore
+    if (store.isEmpty) this._flushDraftSave()
     store.saveActiveFeedback(this.textareaTarget.value)
 
     if (commentId) {
@@ -767,7 +1511,7 @@ export default class extends Controller {
     this.textareaTarget.value = ''
 
     if (store.isEmpty) {
-      this.textareaTarget.placeholder = ''
+      this._restoreOrdinaryDraft()
     } else if (!store.hasActive) {
       this.textareaTarget.placeholder = this._getI18nText('reviewSummaryPlaceholder', 'Overall comment (optional)...')
     }
@@ -884,6 +1628,9 @@ export default class extends Controller {
         if (quote.id === store.activeId) {
           const commentEl = document.querySelector(`[data-comment-id="${quote.commentId}"]`)
           if (commentEl) {
+            // Programmatic list scroll — drop the prev-message anchor so the next
+            // previous-message click resolves from the quoted comment now in view.
+            this.listController?.notifyProgrammaticScroll()
             commentEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
             commentEl.classList.add('comment-highlight')
             setTimeout(() => commentEl.classList.remove('comment-highlight'), 2000)
@@ -921,7 +1668,7 @@ export default class extends Controller {
         store.remove(quote.id)
         if (wasActive) this.textareaTarget.value = ''
         if (store.isEmpty) {
-          this.textareaTarget.placeholder = ''
+          this._restoreOrdinaryDraft()
         } else if (!store.hasActive) {
           this.textareaTarget.placeholder = this._getI18nText('reviewSummaryPlaceholder', 'Overall comment (optional)...')
         }
@@ -956,10 +1703,20 @@ export default class extends Controller {
     this.submitTarget.textContent = labels[state]
   }
 
+  _restoreOrdinaryDraft() {
+    this.textareaTarget.value = ''
+    this.textareaTarget.placeholder = this._defaultPlaceholder()
+    this._restoreDraft()
+  }
+
   _getI18nText(key, fallback) {
     return this.element.dataset[key] || fallback
   }
 
+  _defaultPlaceholder() {
+    return this._getI18nText('chatInputHint', 'Type a message, or use / for commands')
+  }
+
   // --- Inbox inline reply mode ---
 
   get _isInboxSystemTopic() {
@@ -1035,7 +1792,7 @@ export default class extends Controller {
     this._reviewStore.clear()
     this._renderReviewQuoteChips()
     this._updateSubmitButton()
-    this.textareaTarget.placeholder = ''
+    this.textareaTarget.placeholder = this._defaultPlaceholder()
     // Re-apply inbox reply mode indicator if we're in inbox System topic
     if (this._isInboxSystemTopic) {
       requestAnimationFrame(() => this._updateInboxReplyMode())
@@ -1051,6 +1808,20 @@ export default class extends Controller {
     const commentElement = doc.querySelector('.comment-item')
     if (!commentElement) return
 
+    // A search-filtered list is the result set of a server-side query, and a
+    // freshly posted comment carries no verdict on whether it matches. Splicing
+    // it in drops an unrelated message among the results and — when there were
+    // none — takes the "no results" notice with it, since removePlaceholder
+    // below clears whatever empty state is on screen. Leave search and reload
+    // the live list instead, the same exit the history-mode branch takes.
+    // Edits are exempt: that comment is already in the result set, matching the
+    // stream path, which blocks `append` but never `replace`/`remove`.
+    const listCtrl = this.listController
+    if (!replaceExisting && listCtrl?.manualSearchQuery) {
+      listCtrl.resetToLatest()
+      return
+    }
+
     this.removePlaceholder()
 
     const existing = listElement.querySelector(`#${commentElement.id}`)
@@ -1060,6 +1831,14 @@ export default class extends Controller {
       listElement.appendChild(commentElement)
     }
 
+    // The submit response can win the race against its Turbo Stream echo. Keep
+    // the All Messages read snapshot in step with this visible local append;
+    // the stream then deduplicates without getting a second chance to do it.
+    const addedTopic = listCtrl?.recordRenderedAllTopicWatermarks(
+      commentElement,
+      { includeNewTopics: !replaceExisting },
+    )
+    if (addedTopic) listCtrl?.reportRenderedAllTopics()
     renderMarkdownInContainer(commentElement)
     if (replaceExisting) {
       this.listController?.markCommentsRead()
@@ -1068,7 +1847,9 @@ export default class extends Controller {
 
   removePlaceholder() {
     const listElement = document.getElementById('comments-list')
-    const placeholder = listElement?.querySelector('#no-comments')
-    if (placeholder) placeholder.remove()
+    // Every empty-list state carries .comments-placeholder: the discovery
+    // cards (#no-comments) and the no-search-results notice. Either can be on
+    // screen when the user posts.
+    listElement?.querySelectorAll('.comments-placeholder').forEach((el) => el.remove())
   }
 }