import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-ui/core'
import { ComposerPrimitive, useAui, useAuiState } from '@assistant-ui/react'
import {
  type ClipboardEvent,
  type FC,
  type FocusEvent,
  type FormEvent,
  type KeyboardEvent,
  type DragEvent as ReactDragEvent,
  useCallback,
  useEffect,
  useRef,
  useState
} from 'react'

import { ComposerDirectiveActions } from '@/app/chat/composer/directive-actions'
import { COMPOSER_DROP_ACTIVE_CLASS, COMPOSER_DROP_FADE_CLASS } from '@/app/chat/composer/drop-affordance'
import {
  type ComposerInsertMode,
  focusComposerInput,
  markActiveComposer,
  onComposerFocusRequest,
  onComposerInsertRequest,
  releaseActiveComposer
} from '@/app/chat/composer/focus'
import { useAtCompletions } from '@/app/chat/composer/hooks/use-at-completions'
import { rebuildAroundCaret, triggerKeyUpHandler } from '@/app/chat/composer/hooks/use-composer-trigger'
import { useComposerUndo } from '@/app/chat/composer/hooks/use-composer-undo'
import { useEmojiCompletions } from '@/app/chat/composer/hooks/use-emoji-completions'
import { useSlashCompletions } from '@/app/chat/composer/hooks/use-slash-completions'
import {
  dragHasAttachments,
  droppedFileInlineRefs,
  type InlineRefInput,
  insertInlineRefsIntoEditor
} from '@/app/chat/composer/inline-refs'
import { chipTypedPathOnSpace, pathifyRefs } from '@/app/chat/composer/path-refs'
import {
  composerPlainText,
  insertComposerContentsAtCaret,
  placeCaretEnd,
  refChipElement,
  renderComposerContents,
  replaceBeforeCaret,
  RICH_INPUT_SLOT
} from '@/app/chat/composer/rich-editor'
import { detectTrigger, openDirectiveScope, textBeforeCaret, type TriggerState } from '@/app/chat/composer/text-utils'
import { ComposerTriggerPopover } from '@/app/chat/composer/trigger-popover'
import { isRedoShortcut, isUndoShortcut } from '@/app/chat/composer/undo-history'
import { chipTypedUrlOnSpace, linkifyUrls } from '@/app/chat/composer/url-refs'
import {
  extractDroppedFiles,
  HERMES_PATHS_MIME,
  isImagePath,
  partitionDroppedFiles
} from '@/app/chat/hooks/use-composer-actions'
import { uploadComposerAttachment } from '@/app/session/hooks/use-prompt-actions'
import { hermesDirectiveFormatter } from '@/components/assistant-ui/directive-text'
import {
  StickyHumanMessageContainer,
  StopGlyph,
  USER_ACTION_ICON_BUTTON_CLASS,
  USER_ACTION_ICON_SIZE,
  USER_BUBBLE_BASE_CLASS
} from '@/components/assistant-ui/thread/user-message'
import { Codicon } from '@/components/ui/codicon'
import type { HermesGateway } from '@/hermes'
import { useI18n } from '@/i18n'
import { attachmentDisplayText, attachmentId, pathLabel } from '@/lib/chat-runtime'
import { sanitizeComposerInput } from '@/lib/composer-input-sanitize'
import { DATA_IMAGE_URL_RE } from '@/lib/embedded-images'
import { triggerHaptic } from '@/lib/haptics'
import { Loader2Icon } from '@/lib/icons'
import { cn } from '@/lib/utils'
import type { ComposerAttachment } from '@/store/composer'
import { notifyError } from '@/store/notifications'
import { $terminalBackend } from '@/store/session'
import { isSessionRemote } from '@/store/session-states'
import { notifyThreadEditClose } from '@/store/thread-scroll'

interface UserEditComposerProps {
  cwd: string | null
  gateway: HermesGateway | null
  sessionId: string | null
}

export const UserEditComposer: FC<UserEditComposerProps> = ({ cwd, gateway, sessionId }) => {
  const { t } = useI18n()
  const copy = t.assistant.thread
  const aui = useAui()
  const draft = useAuiState(s => s.composer.text)
  const rootRef = useRef<HTMLDivElement | null>(null)
  const editorRef = useRef<HTMLDivElement | null>(null)
  // Capture the original draft immediately before the first edit. The runtime
  // may hydrate composer.text after this component's first render, so taking a
  // mount-time snapshot can incorrectly classify every later blur as dirty.
  const initialDraftRef = useRef<string | null>(null)
  const draftRef = useRef(draft)
  const composingRef = useRef(false)
  const dragDepthRef = useRef(0)
  const [dragActive, setDragActive] = useState(false)
  const [trigger, setTrigger] = useState<TriggerState | null>(null)
  const [triggerActive, setTriggerActive] = useState(0)
  const [triggerItems, setTriggerItems] = useState<readonly Unstable_TriggerItem[]>([])
  // See index.tsx: set in keydown when the open popover consumes a nav/control
  // key so the matching keyup skips refreshTrigger (timing-immune vs reading
  // `trigger`, which keyup sees as already-null after Escape).
  const triggerKeyConsumedRef = useRef(false)
  const [triggerPlacement, setTriggerPlacement] = useState<'bottom' | 'top'>('top')
  const [focusRequestId, setFocusRequestId] = useState(0)
  const [submitting, setSubmitting] = useState(false)
  // True while OS-drop files are being staged/uploaded into the session. Blocks
  // submit and shows a spinner so confirming the edit can't race the async
  // upload and drop the gateway-side ref before it lands in the draft.
  const [staging, setStaging] = useState(false)
  const expanded = draft.includes('\n')
  const canSubmit = draft.trim().length > 0
  const at = useAtCompletions({ cwd, gateway, sessionId })
  const slash = useSlashCompletions({ gateway })
  const emoji = useEmojiCompletions()

  // Timers this composer schedules must not outlive it. Every callback below
  // touches component state, a ref or the composer core, and this is the one
  // composer that routinely unmounts mid-flight: confirming an edit tears it
  // down while the 200ms submit latch is still pending, so the latch resumes
  // against an unmounted tree. Two of the callbacks already carry defensive
  // try/catch for the racing-teardown case; clearing the timers removes the
  // race instead of surviving it.
  const pendingTimeoutsRef = useRef<Set<number>>(new Set())

  const scheduleTimeout = useCallback((run: () => void, delayMs: number): void => {
    const id = window.setTimeout(() => {
      pendingTimeoutsRef.current.delete(id)
      run()
    }, delayMs)

    pendingTimeoutsRef.current.add(id)
  }, [])

  // This is the one composer that routinely unmounts, so it is where the focus
  // bus leaks: confirming or cancelling an edit tears the composer down while
  // `'edit'` is still the active target. Release it alongside the thread-scroll
  // cleanup so keyboard routing falls back to the visible chat composer.
  //
  // It also drains whatever `scheduleTimeout` still has pending, which is a
  // second concern under the same heading rather than a separate one: both
  // are "this composer is going away", they unmount together by definition,
  // and a sibling unmount-only effect would only be a second place to forget.
  useEffect(
    () => () => {
      notifyThreadEditClose()
      releaseActiveComposer('edit')

      for (const id of pendingTimeoutsRef.current) {
        window.clearTimeout(id)
      }

      pendingTimeoutsRef.current.clear()
    },
    []
  )

  const focusEditor = useCallback(() => {
    const editor = editorRef.current

    focusComposerInput(editor)

    if (editor) {
      placeCaretEnd(editor)
    }

    markActiveComposer('edit')
  }, [])

  const requestEditFocus = useCallback(() => {
    setFocusRequestId(id => id + 1)
  }, [])

  const rememberInitialDraft = useCallback(() => {
    if (initialDraftRef.current === null) {
      initialDraftRef.current = draftRef.current
    }
  }, [])

  const appendExternalText = useCallback(
    (text: string, mode: ComposerInsertMode) => {
      const value = text.trim()

      if (!value) {
        return
      }

      rememberInitialDraft()
      const base = mode === 'inline' ? draftRef.current.trimEnd() : draftRef.current
      const sep = mode === 'inline' ? (base ? ' ' : '') : base && !base.endsWith('\n') ? '\n\n' : ''
      const next = `${base}${sep}${value}`

      draftRef.current = next
      aui.composer().setText(next)

      const editor = editorRef.current

      if (editor) {
        renderComposerContents(editor, next, { trailingCommitted: true })
        placeCaretEnd(editor)
      }

      setFocusRequestId(id => id + 1)
    },
    [aui, rememberInitialDraft]
  )

  // eslint-disable-next-line no-restricted-syntax -- legitimate non-atom ref write (see eslint rule comment)
  useEffect(() => {
    draftRef.current = draft

    const editor = editorRef.current

    if (
      editor &&
      (editor.childNodes.length === 0 || (document.activeElement !== editor && composerPlainText(editor) !== draft))
    ) {
      // Inert by construction — this repaints on mount or when the editor
      // isn't the one being typed into. A message opened for edit is finished
      // text, so a `/command` ending it is committed and chips, matching how
      // the transcript rendered that same message a moment ago.
      renderComposerContents(editor, draft, { trailingCommitted: true })

      if (document.activeElement === editor) {
        placeCaretEnd(editor)
      }
    }
  }, [draft])

  useEffect(() => {
    focusEditor()
  }, [focusEditor, focusRequestId])

  useEffect(() => {
    const offFocus = onComposerFocusRequest(({ target }) => {
      if (target === 'edit') {
        setFocusRequestId(id => id + 1)
      }
    })

    const offInsert = onComposerInsertRequest(({ mode, target, text }) => {
      if (target === 'edit') {
        appendExternalText(text, mode)
      }
    })

    return () => {
      offFocus()
      offInsert()
    }
  }, [appendExternalText])

  const syncDraftFromEditor = useCallback(
    (editor: HTMLDivElement) => {
      const nextDraft = sanitizeComposerInput(composerPlainText(editor))

      if (nextDraft !== draftRef.current) {
        draftRef.current = nextDraft
        aui.composer().setText(nextDraft)
      }

      return nextDraft
    },
    [aui]
  )

  // Same stack the main composer owns, for the same reason: the editor mutates
  // through `Range` to dodge Chromium's O(n²) editing pipeline, which also
  // dodges its undo stack, so a paste was invisible to Cmd+Z. `rememberInitialDraft`
  // already marks every mutation site (it's the dirty-edit guard), so the undo
  // points ride along with it.
  const syncFromEditorRef = useCallback(() => {
    const editor = editorRef.current

    return editor ? syncDraftFromEditor(editor) : draftRef.current
  }, [syncDraftFromEditor])

  const { recordUndoPoint, redo, undo, withUndoPoint } = useComposerUndo({
    editorRef,
    syncDraftFromEditor: syncFromEditorRef
  })

  const refreshTrigger = useCallback(() => {
    const editor = editorRef.current

    if (!editor) {
      return
    }

    const before = textBeforeCaret(editor)
    const detected = detectTrigger(before ?? composerPlainText(editor))

    if (detected) {
      const rect = editor.getBoundingClientRect()
      const spaceAbove = rect.top
      const spaceBelow = window.innerHeight - rect.bottom

      setTriggerPlacement(spaceAbove < 220 && spaceBelow > spaceAbove ? 'bottom' : 'top')
    }

    setTrigger(detected)

    // Only reset the highlight when the trigger actually changed (opened, or
    // the query/kind differs). Re-detecting the *same* trigger — e.g. on a
    // caret move (mouseup) or a stray refresh — must preserve the user's
    // current selection instead of snapping back to the first item.
    if (detected?.kind !== trigger?.kind || detected?.query !== trigger?.query) {
      setTriggerActive(0)
    }
  }, [trigger])

  const closeTrigger = useCallback(() => {
    setTrigger(null)
    setTriggerItems([])
    setTriggerActive(0)
  }, [])

  const triggerAdapter: Unstable_TriggerAdapter | null =
    trigger?.kind === '@'
      ? at.adapter
      : trigger?.kind === '/'
        ? slash.adapter
        : trigger?.kind === ':'
          ? emoji.adapter
          : null

  useEffect(() => {
    if (!trigger || !triggerAdapter?.search) {
      setTriggerItems([])

      return
    }

    setTriggerItems(triggerAdapter.search(trigger.query))
  }, [trigger, triggerAdapter])

  useEffect(() => {
    setTriggerActive(idx => Math.min(idx, Math.max(0, triggerItems.length - 1)))
  }, [triggerItems.length])

  const triggerLoading =
    trigger?.kind === '@'
      ? at.loading
      : trigger?.kind === '/'
        ? slash.loading
        : trigger?.kind === ':'
          ? emoji.loading
          : false

  const replaceTriggerWithChip = useCallback(
    (item: Unstable_TriggerItem) => {
      const editor = editorRef.current

      if (!editor || !trigger) {
        return
      }

      rememberInitialDraft()
      recordUndoPoint()
      const serialized = hermesDirectiveFormatter.serialize(item)
      const starter = serialized.endsWith(':')
      const text = starter || serialized.endsWith(' ') ? serialized : `${serialized} `
      const directive = !starter && serialized.match(/^@([^:]+):(.+)$/)

      const finish = () => {
        draftRef.current = composerPlainText(editor)
        aui.composer().setText(draftRef.current)
        requestEditFocus()
        starter ? scheduleTimeout(refreshTrigger, 0) : closeTrigger()
      }

      // In place first, spanning Chromium's split text nodes (see
      // rangeBeforeCaret). The re-render fallback only runs when the caret
      // genuinely can't anchor the token — it rebuilds from serialized text,
      // which re-chips `@` refs but resets the caret to the end.
      const fragment = document.createDocumentFragment()

      directive
        ? fragment.append(refChipElement(directive[1], directive[2]), document.createTextNode(' '))
        : fragment.append(document.createTextNode(text))

      if (!replaceBeforeCaret(editor, trigger.tokenLength, fragment)) {
        rebuildAroundCaret(editor, trigger.tokenLength, text)
      }

      finish()
    },
    [
      aui,
      closeTrigger,
      recordUndoPoint,
      refreshTrigger,
      rememberInitialDraft,
      requestEditFocus,
      scheduleTimeout,
      trigger
    ]
  )

  const insertRefStrings = useCallback(
    (refs: InlineRefInput[]) => {
      const editor = editorRef.current

      if (!editor || refs.length === 0) {
        return false
      }

      // Bank BEFORE the insert — insertInlineRefsIntoEditor mutates in place, so
      // recording after it would snapshot the state we're trying to undo to.
      const undone = withUndoPoint(() => insertInlineRefsIntoEditor(editor, refs) !== null)

      if (!undone) {
        return false
      }

      rememberInitialDraft()
      const nextDraft = composerPlainText(editor)
      draftRef.current = nextDraft
      aui.composer().setText(nextDraft)
      requestEditFocus()

      return true
    },
    [aui, rememberInitialDraft, requestEditFocus, withUndoPoint]
  )

  const insertDroppedRefs = useCallback(
    (candidates: ReturnType<typeof extractDroppedFiles>) => insertRefStrings(droppedFileInlineRefs(candidates, cwd)),
    [cwd, insertRefStrings]
  )

  // OS/Finder drops carry an absolute path on THIS machine — the gateway can't
  // read it in remote mode, and an image needs its bytes uploaded for vision.
  // Stage each through the same file.attach/image.attach_bytes pipeline the main
  // composer uses, then insert the *gateway-side* ref the agent can resolve —
  // never the raw local path (the MahmoudR remote-attach bug, which the main
  // composer fixes but this edit composer used to reproduce).
  const uploadOsDropRefs = useCallback(
    async (osDrops: ReturnType<typeof extractDroppedFiles>): Promise<InlineRefInput[]> => {
      if (!gateway || !sessionId) {
        // No session to stage into — best-effort inline refs (matches old path).
        return droppedFileInlineRefs(osDrops, cwd)
      }

      const remote = isSessionRemote(sessionId)

      const requestGateway = <T,>(method: string, params?: Record<string, unknown>) =>
        gateway.request<T>(method, params)

      const refs: InlineRefInput[] = []

      for (const candidate of osDrops) {
        const path = candidate.path || ''

        if (!path) {
          continue
        }

        const kind: ComposerAttachment['kind'] =
          candidate.file?.type.startsWith('image/') || isImagePath(candidate.file?.name || path) ? 'image' : 'file'

        try {
          const uploaded = await uploadComposerAttachment(
            { detail: path, id: attachmentId(kind, path), kind, label: pathLabel(path), path },
            { backendCwd: cwd, remote, requestGateway, sessionId, terminalBackend: $terminalBackend.get() }
          )

          const ref = attachmentDisplayText(uploaded)

          if (ref) {
            refs.push(ref)
          }
        } catch (err) {
          notifyError(err, t.desktop.dropFiles)
        }
      }

      return refs
    },
    [cwd, gateway, sessionId, t.desktop.dropFiles]
  )

  const resetDragState = useCallback(() => {
    dragDepthRef.current = 0
    setDragActive(false)
  }, [])

  const handleDragEnter = (event: ReactDragEvent<HTMLElement>) => {
    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
      return
    }

    event.preventDefault()
    dragDepthRef.current += 1

    if (!dragActive) {
      setDragActive(true)
    }
  }

  const handleDragOver = (event: ReactDragEvent<HTMLElement>) => {
    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
      return
    }

    event.preventDefault()
    event.dataTransfer.dropEffect = 'copy'
  }

  const handleDragLeave = (event: ReactDragEvent<HTMLElement>) => {
    event.preventDefault()
    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)

    if (dragDepthRef.current === 0) {
      setDragActive(false)
    }
  }

  const handleDrop = (event: ReactDragEvent<HTMLElement>) => {
    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
      return
    }

    const candidates = extractDroppedFiles(event.dataTransfer)

    if (!candidates.length) {
      return
    }

    event.preventDefault()
    event.stopPropagation()
    resetDragState()

    // In-app drags (project tree / gutter) are workspace-relative paths that
    // resolve on the gateway as-is, so they stay inline refs. OS drops need to
    // be staged + uploaded first, then their gateway-side ref is inserted.
    const { inAppRefs, osDrops } = partitionDroppedFiles(candidates)

    if (insertDroppedRefs(inAppRefs)) {
      triggerHaptic('selection')
    }

    if (osDrops.length) {
      setStaging(true)
      void uploadOsDropRefs(osDrops)
        .then(refs => {
          if (insertRefStrings(refs)) {
            triggerHaptic('selection')
          }
        })
        .finally(() => setStaging(false))
    }
  }

  const flushEditorToDraft = useCallback(
    (editor: HTMLDivElement) => {
      if (editor.childNodes.length === 1 && editor.firstChild?.nodeName === 'BR') {
        editor.replaceChildren()
      }

      rememberInitialDraft()
      const nextDraft = syncDraftFromEditor(editor)
      scheduleTimeout(refreshTrigger, 0)

      return nextDraft
    },
    [refreshTrigger, rememberInitialDraft, scheduleTimeout, syncDraftFromEditor]
  )

  const handleInput = (event: FormEvent<HTMLDivElement>) => {
    if (composingRef.current) {
      return
    }

    flushEditorToDraft(event.currentTarget)
  }

  // Native typing/deleting still goes through Chromium's editing pipeline, whose
  // undo stack we've taken over — bank the pre-edit state here, while
  // `beforeinput` can still see the old text.
  const handleBeforeInput = (event: FormEvent<HTMLDivElement>) => {
    const inputType = (event.nativeEvent as InputEvent).inputType

    if (inputType === 'historyUndo' || inputType === 'historyRedo') {
      return
    }

    recordUndoPoint({ coalesce: inputType === 'insertText' || inputType === 'deleteContentBackward' })
  }

  const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
    const pastedText = sanitizeComposerInput(event.clipboardData.getData('text'))

    if (!pastedText || DATA_IMAGE_URL_RE.test(pastedText.trim())) {
      event.preventDefault()

      return
    }

    event.preventDefault()
    rememberInitialDraft()
    recordUndoPoint()

    // Links land as `@url:` chips, same as the main composer — including
    // consuming an open `@url:` scope rather than stacking a second directive
    // in front of the chip.
    insertComposerContentsAtCaret(
      event.currentTarget,
      pathifyRefs(linkifyUrls(pastedText)),
      openDirectiveScope(event.currentTarget)
    )
    syncDraftFromEditor(event.currentTarget)
  }

  const submitEdit = (editor: HTMLDivElement) => {
    if (composingRef.current) {
      return
    }

    const nextDraft = syncDraftFromEditor(editor)

    if (submitting || staging || !nextDraft.trim()) {
      return
    }

    setSubmitting(true)

    // `aui.composer().send()` throws "Composer is not available" when the edit
    // composer core has been torn down (e.g. a blur-driven cancel raced the
    // click). Reset `submitting` on failure so the arrow can't wedge on `true`
    // and leave revert as the only way out (#49903 is the same unguarded-core
    // hazard on the main composer).
    try {
      aui.composer().send()

      // Clear latch after cooldown to allow re-submission. This prevents rapid
      // double-Enter but doesn't require tracking when onEdit settles (which may
      // be synchronous or async, and whose promise we don't have access to).
      scheduleTimeout(() => {
        setSubmitting(false)
      }, 200)
    } catch {
      setSubmitting(false)
    }
  }

  const handleEditBlur = useCallback(
    (event: FocusEvent<HTMLDivElement>) => {
      const nextTarget = event.relatedTarget

      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
        return
      }

      scheduleTimeout(() => {
        const root = rootRef.current
        const active = document.activeElement

        if (submitting || (root && active && root.contains(active))) {
          return
        }

        const editor = editorRef.current

        // Dirty edit guard: when the user actually typed something, blur must
        // not cancel the composer — that would discard their in-flight
        // edits. Compare against the draft captured immediately before the
        // first edit; when no edit event occurred, the current hydrated draft
        // is the clean baseline.
        const initialDraft = initialDraftRef.current ?? draftRef.current

        if (editor && syncDraftFromEditor(editor) !== initialDraft) {
          closeTrigger()

          return
        }

        closeTrigger()

        // Swallow the unbound-core throw: if the composer core was already torn
        // down (a send/cancel raced this timer), cancel() throws "Composer is
        // not available" as an uncaught renderer error. Nothing to cancel then.
        try {
          aui.composer().cancel()
        } catch {
          // Composer core already gone — the edit is closing anyway.
        }
      }, 80)
    },
    [aui, closeTrigger, scheduleTimeout, submitting, syncDraftFromEditor]
  )

  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    // Self-heal a stale composition flag (same recovery as the main composer's
    // handleEditorKeyDown, #44135): compositionend can be missed, and a wedged
    // composingRef would swallow every Enter until the edit composer remounts.
    if (composingRef.current && !event.nativeEvent.isComposing) {
      composingRef.current = false
    }

    // IME composition: Enter confirms composed text, not a message submission.
    if (composingRef.current || event.nativeEvent.isComposing) {
      return
    }

    // IME commit Enter still carrying keyCode 229 (VK_PROCESSKEY) after
    // compositionend — same guard as the main composer.
    if (event.key === 'Enter' && event.keyCode === 229) {
      return
    }

    if (trigger && triggerItems.length > 0) {
      if (event.key === 'ArrowDown') {
        event.preventDefault()
        triggerKeyConsumedRef.current = true
        setTriggerActive(idx => (idx + 1) % triggerItems.length)

        return
      }

      if (event.key === 'ArrowUp') {
        event.preventDefault()
        triggerKeyConsumedRef.current = true
        setTriggerActive(idx => (idx - 1 + triggerItems.length) % triggerItems.length)

        return
      }

      if (event.key === 'Enter' || event.key === 'Tab') {
        event.preventDefault()
        triggerKeyConsumedRef.current = true
        const item = triggerItems[triggerActive]

        if (item) {
          replaceTriggerWithChip(item)
        }

        return
      }

      if (event.key === 'Escape') {
        event.preventDefault()
        triggerKeyConsumedRef.current = true
        closeTrigger()

        return
      }
    }

    // Undo/redo before Escape — we own the stack, and a stray Cmd+Z must never
    // fall through to something that cancels the edit outright.
    if (isUndoShortcut(event.nativeEvent)) {
      event.preventDefault()
      undo()

      return
    }

    if (isRedoShortcut(event.nativeEvent)) {
      event.preventDefault()
      redo()

      return
    }

    if (event.key === 'Escape') {
      event.preventDefault()
      aui.composer().cancel()

      return
    }

    // A typed link finished with a space chips like a pasted one.
    if (withUndoPoint(() => chipTypedUrlOnSpace(event))) {
      event.preventDefault()
      rememberInitialDraft()
      syncDraftFromEditor(event.currentTarget)

      return
    }

    // Same for a bare `@path`.
    if (withUndoPoint(() => chipTypedPathOnSpace(event))) {
      event.preventDefault()
      rememberInitialDraft()
      syncDraftFromEditor(event.currentTarget)

      return
    }

    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault()
      submitEdit(event.currentTarget)
    }
  }

  const handleKeyUp = triggerKeyUpHandler(triggerKeyConsumedRef, refreshTrigger)

  return (
    <ComposerPrimitive.Root className="contents" data-slot="aui_edit-composer-root">
      <StickyHumanMessageContainer>
        <div
          className="composer-human-message-container human-execution-message-top relative flex w-full items-start rounded-md bg-(--ui-chat-surface-background)"
          // A raised box over the transcript field: under window glass it keeps
          // a near-opaque fill instead of thinning with the field behind it.
          data-glass-raised=""
          onBlur={handleEditBlur}
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          ref={rootRef}
        >
          {trigger && (
            <ComposerTriggerPopover
              activeIndex={triggerActive}
              items={triggerItems}
              kind={trigger.kind}
              loading={triggerLoading}
              onHover={setTriggerActive}
              onPick={replaceTriggerWithChip}
              placement={triggerPlacement}
            />
          )}
          <div
            className={cn(
              USER_BUBBLE_BASE_CLASS,
              'ui-prompt-input__container relative border-(--ui-stroke-secondary) data-[expanded=true]:min-h-20',
              COMPOSER_DROP_FADE_CLASS,
              dragActive && COMPOSER_DROP_ACTIVE_CLASS
            )}
            data-expanded={expanded ? 'true' : undefined}
          >
            <div
              aria-label={copy.editMessage}
              autoCapitalize="off"
              autoCorrect="off"
              className={cn(
                'ui-prompt-input-editor__input max-h-48 w-full resize-none overflow-y-auto bg-transparent p-0 pr-7 text-[length:var(--conversation-text-font-size)] text-foreground/95 outline-none',
                '**:data-ref-text:cursor-default',
                expanded ? 'min-h-16' : 'min-h-[1.25rem]'
              )}
              contentEditable
              data-placeholder={copy.editMessage}
              data-slot={RICH_INPUT_SLOT}
              onBeforeInput={handleBeforeInput}
              onBlur={() => scheduleTimeout(closeTrigger, 80)}
              onCompositionEnd={event => {
                composingRef.current = false
                flushEditorToDraft(event.currentTarget)
              }}
              onCompositionStart={() => {
                composingRef.current = true
              }}
              onDragOver={handleDragOver}
              onDrop={handleDrop}
              onFocus={() => markActiveComposer('edit')}
              onInput={handleInput}
              onKeyDown={handleKeyDown}
              onKeyUp={handleKeyUp}
              onMouseUp={refreshTrigger}
              onPaste={handlePaste}
              ref={editorRef}
              role="textbox"
              spellCheck={false}
              suppressContentEditableWarning
            />
            <ComposerDirectiveActions editorRef={editorRef} />
            <ComposerPrimitive.Input
              asChild
              className="sr-only"
              submitMode="ctrlEnter"
              tabIndex={-1}
              unstable_focusOnScrollToBottom={false}
            >
              <textarea
                aria-hidden
                autoCapitalize="off"
                autoComplete="off"
                autoCorrect="off"
                className="sr-only"
                spellCheck={false}
                tabIndex={-1}
              />
            </ComposerPrimitive.Input>
            {staging && (
              <span
                className="pointer-events-none absolute bottom-2 left-2 inline-flex items-center gap-1 rounded-full bg-background/80 px-1.5 py-0.5 text-[0.62rem] text-muted-foreground backdrop-blur-[1px]"
                data-slot="aui_edit-staging"
              >
                <Loader2Icon className="size-3 animate-spin" />
                {copy.attachingFile}
              </span>
            )}
            <button
              aria-label={copy.sendEdited}
              className={cn('absolute right-2 bottom-2 size-5', USER_ACTION_ICON_BUTTON_CLASS)}
              disabled={!canSubmit || submitting || staging}
              onClick={() => {
                const editor = editorRef.current

                if (editor) {
                  submitEdit(editor)
                }
              }}
              // Keep focus in the editor on click: macOS doesn't focus a button
              // on mousedown, so without this the arrow-click blurs the editor,
              // the blur timer cancels the edit (tearing down the composer
              // core), and the click's send() then throws against a dead core —
              // the edit silently never sends. The restore button guards the
              // same way.
              onPointerDown={event => event.preventDefault()}
              title={copy.sendEdited}
              type="button"
            >
              {submitting ? StopGlyph : <Codicon name="arrow-up" size={USER_ACTION_ICON_SIZE} />}
            </button>
          </div>
        </div>
      </StickyHumanMessageContainer>
    </ComposerPrimitive.Root>
  )
}