@clawpump/claw-agent 0.1.5 → 0.1.7

package/agent/apps/desktop/src/app/chat/composer/help-hint.tsx

@@ -1,44 +1,44 @@
 import type { ReactNode } from 'react'
 
+import { KbdCombo } from '@/components/ui/kbd'
+import { useI18n } from '@/i18n'
+
 import { COMPLETION_DRAWER_CLASS } from './completion-drawer'
 
-const COMMON_COMMANDS: [string, string][] = [
-  ['/help', 'full list of commands + hotkeys'],
-  ['/clear', 'start a new session'],
-  ['/resume', 'resume a prior session'],
-  ['/details', 'control transcript detail level'],
-  ['/copy', 'copy selection or last assistant message'],
-  ['/quit', 'exit hermes']
-]
+const COMMON_COMMAND_KEYS = ['/help', '/clear', '/resume', '/details', '/copy', '/quit']
 
-const HOTKEYS: [string, string][] = [
-  ['@', 'reference files, folders, urls, git'],
-  ['/', 'slash command palette'],
-  ['?', 'this quick help (delete to dismiss)'],
-  ['Enter', 'send · Shift+Enter for newline'],
-  ['Cmd/Ctrl+K', 'send next queued turn'],
-  ['Cmd/Ctrl+L', 'redraw'],
-  ['Esc', 'close popover · cancel run'],
-  ['↑ / ↓', 'cycle popover / history']
-]
+/** Stable ids → i18n `hotkeyDescs` keys. Combos resolve mod labels per OS. */
+const COMPOSER_HOTKEY_ROWS = [
+  { id: 'composer.mention', combos: ['@'] },
+  { id: 'composer.slash', combos: ['/'] },
+  { id: 'composer.help', combos: ['?'] },
+  { id: 'composer.sendNewline', combos: ['enter', 'shift+enter'] },
+  { id: 'composer.sendQueued', combos: ['mod+shift+k'] },
+  { id: 'keybinds.openPanel', combos: ['mod+/'] },
+  { id: 'composer.cancel', combos: ['escape'] },
+  { id: 'composer.history', combos: ['up', 'down'] }
+] as const
 
 export function HelpHint() {
+  const { t } = useI18n()
+  const c = t.composer
+
   return (
     <div className={COMPLETION_DRAWER_CLASS} data-slot="composer-completion-drawer" data-state="open" role="dialog">
-      <Section title="Common commands">
-        {COMMON_COMMANDS.map(([key, desc]) => (
-          <Row description={desc} key={key} keyLabel={key} mono />
+      <Section title={c.commonCommands}>
+        {COMMON_COMMAND_KEYS.map(key => (
+          <Row description={c.commandDescs[key] ?? ''} key={key} keyLabel={key} mono />
         ))}
       </Section>
 
-      <Section title="Hotkeys">
-        {HOTKEYS.map(([key, desc]) => (
-          <Row description={desc} key={key} keyLabel={key} />
+      <Section title={c.hotkeys}>
+        {COMPOSER_HOTKEY_ROWS.map(row => (
+          <HotkeyRow description={c.hotkeyDescs[row.id] ?? ''} combos={[...row.combos]} key={row.id} />
         ))}
       </Section>
 
       <p className="px-2.5 py-1 text-xs text-muted-foreground/80">
-        <span className="font-mono text-foreground/80">/help</span> opens the full panel · backspace dismisses
+        <span className="font-mono text-foreground/80">/help</span> {c.helpFooter}
       </p>
     </div>
   )
@@ -69,3 +69,16 @@ function Row({ description, keyLabel, mono = false }: { description: string; key
     </div>
   )
 }
+
+function HotkeyRow({ combos, description }: { combos: string[]; description: string }) {
+  return (
+    <div className="flex min-w-0 items-center gap-2 rounded-md px-2.5 py-1 text-xs">
+      <span className="flex shrink-0 items-center gap-1">
+        {combos.map(combo => (
+          <KbdCombo combo={combo} key={combo} size="sm" />
+        ))}
+      </span>
+      <span className="min-w-0 truncate text-muted-foreground/80">{description}</span>
+    </div>
+  )
+}

package/agent/apps/desktop/src/app/chat/composer/hooks/use-live-completion-adapter.ts

@@ -5,6 +5,13 @@ export interface CompletionEntry {
   text: string
   display?: unknown
   meta?: unknown
+  /** Optional section label (e.g. "Commands", "Skills"). The popover renders a
+   *  header whenever this changes between consecutive items, so the fetcher must
+   *  emit entries already grouped contiguously. */
+  group?: string
+  /** Optional completion-action id. When set, picking the item runs that action
+   *  (e.g. opening an overlay) instead of inserting a chip + waiting for submit. */
+  action?: string
 }
 
 export interface CompletionPayload {

package/agent/apps/desktop/src/app/chat/composer/hooks/use-mic-recorder.ts

@@ -17,39 +17,49 @@ export interface MicRecording {
   heardSpeech: boolean
 }
 
+export interface MicRecorderErrorCopy {
+  microphoneAccessDenied: string
+  microphoneConstraintsUnsupported: string
+  microphoneInUse: string
+  microphonePermissionDenied: string
+  microphoneStartFailed: string
+  microphoneUnsupported: string
+  noMicrophone: string
+}
+
 interface MicRecorderHandle {
   start: (options?: MicRecorderOptions) => Promise<void>
   stop: () => Promise<MicRecording | null>
   cancel: () => void
 }
 
-function micError(error: unknown): Error {
+function micError(error: unknown, copy: MicRecorderErrorCopy): Error {
   const name = error instanceof DOMException ? error.name : ''
 
   if (name === 'NotAllowedError' || name === 'SecurityError') {
-    return new Error('Microphone permission was denied.')
+    return new Error(copy.microphonePermissionDenied)
   }
 
   if (name === 'NotFoundError' || name === 'DevicesNotFoundError') {
-    return new Error('No microphone was found.')
+    return new Error(copy.noMicrophone)
   }
 
   if (name === 'NotReadableError' || name === 'TrackStartError') {
-    return new Error('Microphone is already in use by another app.')
+    return new Error(copy.microphoneInUse)
   }
 
   if (name === 'OverconstrainedError') {
-    return new Error('Microphone constraints are not supported by this device.')
+    return new Error(copy.microphoneConstraintsUnsupported)
   }
 
   if (error instanceof Error) {
     return error
   }
 
-  return new Error('Could not start microphone recording.')
+  return new Error(copy.microphoneStartFailed)
 }
 
-export function useMicRecorder(): { handle: MicRecorderHandle; level: number; recording: boolean } {
+export function useMicRecorder(copy: MicRecorderErrorCopy): { handle: MicRecorderHandle; level: number; recording: boolean } {
   const [level, setLevel] = useState(0)
   const [recording, setRecording] = useState(false)
 
@@ -158,13 +168,13 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
     }
 
     if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
-      throw new Error('This runtime does not support microphone recording.')
+      throw new Error(copy.microphoneUnsupported)
     }
 
     const permitted = await window.hermesDesktop?.requestMicrophoneAccess?.()
 
     if (permitted === false) {
-      throw new Error('Microphone access denied.')
+      throw new Error(copy.microphoneAccessDenied)
     }
 
     let stream: MediaStream
@@ -174,7 +184,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
         audio: { echoCancellation: true, noiseSuppression: true }
       })
     } catch (error) {
-      throw micError(error)
+      throw micError(error, copy)
     }
 
     const mimeType =
@@ -188,7 +198,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
       recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined)
     } catch (error) {
       stream.getTracks().forEach(track => track.stop())
-      throw micError(error)
+      throw micError(error, copy)
     }
 
     chunksRef.current = []
@@ -231,7 +241,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
     }
 
     recorder.onerror = event => {
-      const error = micError((event as Event & { error?: unknown }).error)
+      const error = micError((event as Event & { error?: unknown }).error, copy)
       const resolver = stopResolverRef.current
       stopResolverRef.current = null
       cleanup()

package/agent/apps/desktop/src/app/chat/composer/hooks/use-slash-completions.ts

@@ -2,12 +2,17 @@ import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-u
 import { useCallback } from 'react'
 
 import type { HermesGateway } from '@/hermes'
+import { sessionTitle } from '@/lib/chat-runtime'
 import {
   type CommandsCatalogLike,
+  desktopSkinSlashCompletions,
   desktopSlashDescription,
+  type DesktopThemeCommandOption,
   filterDesktopCommandsCatalog,
+  isDesktopSlashExtensionCommand,
   isDesktopSlashSuggestion
 } from '@/lib/desktop-slash-commands'
+import { $sessions } from '@/store/session'
 
 import type { CompletionEntry, CompletionPayload } from './use-live-completion-adapter'
 import { useLiveCompletionAdapter } from './use-live-completion-adapter'
@@ -16,6 +21,10 @@ interface SlashItemMetadata extends Record<string, string> {
   command: string
   display: string
   meta: string
+  group: string
+  rawText: string
+  /** Completion-action id; empty for ordinary insert-a-chip completions. */
+  action: string
 }
 
 function textValue(value: unknown, fallback = ''): string {
@@ -37,12 +46,21 @@ function commandText(value: string): string {
   return value.startsWith('/') ? value : `/${value}`
 }
 
+/** How many recent sessions to surface inline before the "Browse all…" entry. */
+const SESSION_INLINE_LIMIT = 7
+
 /** Live `/` completions backed by the gateway's `complete.slash` RPC. */
-export function useSlashCompletions(options: { gateway: HermesGateway | null }): {
+export function useSlashCompletions(options: {
+  gateway: HermesGateway | null
+  /** Desktop theme list — `/skin` is owned client-side, so its arg completions
+   *  come from here, not the backend (whose skin list is CLI/TUI-only). */
+  skinThemes?: DesktopThemeCommandOption[]
+  activeSkin?: string
+}): {
   adapter: Unstable_TriggerAdapter
   loading: boolean
 } {
-  const { gateway } = options
+  const { gateway, skinThemes, activeSkin } = options
   const enabled = Boolean(gateway)
 
   const fetcher = useCallback(
@@ -53,34 +71,136 @@ export function useSlashCompletions(options: { gateway: HermesGateway | null }):
 
       const text = `/${query}`
 
+      // The desktop owns /skin entirely (client-side theme context). Surface its
+      // theme list inside this single popover instead of a bespoke one, and skip
+      // the backend skin completions (which describe CLI/TUI skins that don't
+      // apply here). Matches once we're past `/skin ` into the arg stage.
+      const skinArg = /^\/skin\s+(.*)$/is.exec(text)
+
+      if (skinArg && skinThemes) {
+        const items = desktopSkinSlashCompletions(skinThemes, activeSkin ?? '', skinArg[1] ?? '').map(entry => ({
+          text: entry.text,
+          display: entry.display,
+          meta: entry.meta,
+          group: 'Themes'
+        }))
+
+        return { items, query }
+      }
+
+      // /resume (and its aliases) completes recent sessions inline — the same
+      // client-side list the picker overlay shows — instead of the backend
+      // (whose /resume opens an interactive TUI picker we can't render here).
+      const sessionArg = /^\/(?:resume|sessions|switch)\s+(.*)$/is.exec(text)
+
+      if (sessionArg) {
+        const needle = (sessionArg[1] ?? '').trim().toLowerCase()
+
+        const matches = (
+          needle
+            ? $sessions.get().filter(
+                session =>
+                  sessionTitle(session).toLowerCase().includes(needle) ||
+                  (session.preview ?? '').toLowerCase().includes(needle) ||
+                  session.id.toLowerCase().includes(needle)
+              )
+            : $sessions.get()
+        ).slice(0, SESSION_INLINE_LIMIT)
+
+        const items: CompletionEntry[] = matches.map(session => ({
+          text: `/resume ${session.id}`,
+          display: sessionTitle(session),
+          meta: (session.preview ?? '').trim(),
+          group: 'Sessions'
+        }))
+
+        // Trailing "more" affordance (Cursor-style): picking it opens the full
+        // session picker overlay directly. `text` stays a bare `/resume` so that
+        // submitting it (Enter) still opens the overlay if the action is skipped.
+        items.push({
+          text: '/resume',
+          display: 'Browse all sessions…',
+          meta: '',
+          group: 'Sessions',
+          action: 'session-picker'
+        })
+
+        return { items, query }
+      }
+
       try {
         if (!query) {
           const catalog = filterDesktopCommandsCatalog(await gateway.request<CommandsCatalogLike>('commands.catalog'))
 
-          const items = (catalog.pairs ?? []).map(([command, meta]) => ({
-            text: command,
-            display: command,
-            meta
-          }))
+          // Prefer the categorized layout so the popover renders section headers
+          // (Session, Tools & Skills, ...). Fall back to the flat list when the
+          // backend didn't categorize.
+          const sections = catalog.categories?.length
+            ? catalog.categories
+            : [{ name: '', pairs: catalog.pairs ?? [] }]
+
+          const items = sections.flatMap(section =>
+            section.pairs.map(([command, meta]) => ({
+              text: command,
+              display: command,
+              group: section.name || undefined,
+              meta
+            }))
+          )
 
           return { items, query }
         }
 
-        const result = await gateway.request<{ items?: CompletionEntry[] }>('complete.slash', { text })
-
-        const items = (result.items ?? [])
-          .filter(item => isDesktopSlashSuggestion(item.text))
+        const result = await gateway.request<{ items?: CompletionEntry[]; replace_from?: number }>(
+          'complete.slash',
+          { text }
+        )
+
+        // Arg-completion items (replace_from > 1) carry just the arg stub —
+        // e.g. complete.slash returns `{text: "alice"}` for `/personality alic`
+        // with replace_from = 14. Rewrite those entries so the popover inserts
+        // the full `/personality alice` token instead of stranding `/alice`.
+        const replaceFrom = typeof result.replace_from === 'number' ? result.replace_from : 1
+        const isArgCompletion = replaceFrom > 1
+        const prefix = isArgCompletion ? text.slice(0, replaceFrom) : ''
+
+        const decorated = (result.items ?? [])
+          .map(item => {
+            if (!isArgCompletion) {
+              return item
+            }
+
+            const argText = typeof item.text === 'string' ? item.text : ''
+
+            return { ...item, text: `${prefix}${argText}` }
+          })
+          .filter(item => isArgCompletion || isDesktopSlashSuggestion(item.text))
           .map(item => ({
             ...item,
-            meta: desktopSlashDescription(item.text, textValue(item.meta))
+            // Arg suggestions (e.g. `/handoff <platform>`) live under one
+            // header; otherwise split skills out from built-in commands.
+            group: isArgCompletion ? 'Options' : isDesktopSlashExtensionCommand(item.text) ? 'Skills' : 'Commands',
+            // Arg items carry their own meta (the personality/toolset/platform
+            // blurb). Only command rows get the registry description — looking
+            // one up for `/personality none` would clobber it with the parent
+            // command's text.
+            meta: isArgCompletion ? textValue(item.meta) : desktopSlashDescription(item.text, textValue(item.meta))
           }))
 
+        // Keep each group contiguous so headers render once: Commands before
+        // Skills (stable within a group, preserving backend relevance order).
+        const groupOrder = ['Commands', 'Skills', 'Options']
+
+        const items = isArgCompletion
+          ? decorated
+          : [...decorated].sort((a, b) => groupOrder.indexOf(a.group) - groupOrder.indexOf(b.group))
+
         return { items, query }
       } catch {
         return { items: [], query }
       }
     },
-    [gateway]
+    [gateway, skinThemes, activeSkin]
   )
 
   const toItem = useCallback((entry: CompletionEntry, index: number): Unstable_TriggerItem => {
@@ -91,7 +211,15 @@ export function useSlashCompletions(options: { gateway: HermesGateway | null }):
     const metadata: SlashItemMetadata = {
       command,
       display,
-      meta
+      meta,
+      group: textValue(entry.group),
+      action: textValue(entry.action),
+      // Provide rawText so hermesDirectiveFormatter.serialize uses the
+      // direct-insertion path instead of the legacy @type:id fallback.
+      // Without this, the item.id (which includes a "|index" suffix for
+      // trigger-adapter uniqueness) leaks into the serialized chip text
+      // and the submitted command.
+      rawText: command
     }
 
     return {

package/agent/apps/desktop/src/app/chat/composer/hooks/use-voice-conversation.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
+import { useI18n } from '@/i18n'
 import { playSpeechText, stopVoicePlayback } from '@/lib/voice-playback'
 import { notify, notifyError } from '@/store/notifications'
 
@@ -32,7 +33,9 @@ export function useVoiceConversation({
   pendingResponse,
   consumePendingResponse
 }: VoiceConversationOptions) {
-  const { handle, level } = useMicRecorder()
+  const { t } = useI18n()
+  const voiceCopy = t.notifications.voice
+  const { handle, level } = useMicRecorder(voiceCopy)
   const [status, setStatus] = useState<ConversationStatus>('idle')
   const [muted, setMuted] = useState(false)
   const turnTimeoutRef = useRef<number | null>(null)
@@ -168,7 +171,7 @@ export function useVoiceConversation({
           await onSubmit(transcript)
           setStatus('thinking')
         } catch (error) {
-          notifyError(error, 'Voice transcription failed')
+          notifyError(error, voiceCopy.transcriptionFailed)
 
           if (enabledRef.current && !mutedRef.current && !busyRef.current) {
             pendingStartRef.current = true
@@ -180,7 +183,7 @@ export function useVoiceConversation({
         turnClosingRef.current = false
       }
     },
-    [handle, onSubmit, onTranscribeAudio]
+    [handle, onSubmit, onTranscribeAudio, voiceCopy.transcriptionFailed]
   )
 
   const startListening = useCallback(async () => {
@@ -201,7 +204,7 @@ export function useVoiceConversation({
         silenceMs: 1_250,
         idleSilenceMs: 12_000,
         onError: error => {
-          notifyError(error, 'Microphone failed')
+          notifyError(error, voiceCopy.microphoneFailed)
           pendingStartRef.current = false
           onFatalError?.()
         },
@@ -210,12 +213,12 @@ export function useVoiceConversation({
       setStatus('listening')
       turnTimeoutRef.current = window.setTimeout(() => void handleTurn(), 60_000)
     } catch (error) {
-      notifyError(error, 'Could not start voice session')
+      notifyError(error, voiceCopy.couldNotStartSession)
       pendingStartRef.current = false
       setStatus('idle')
       onFatalError?.()
     }
-  }, [handle, handleTurn, onFatalError])
+  }, [handle, handleTurn, onFatalError, voiceCopy.couldNotStartSession, voiceCopy.microphoneFailed])
 
   const speak = useCallback(async (text: string) => {
     setStatus('speaking')
@@ -223,7 +226,7 @@ export function useVoiceConversation({
     try {
       await playSpeechText(text, { source: 'voice-conversation' })
     } catch (error) {
-      notifyError(error, 'Voice playback failed')
+      notifyError(error, voiceCopy.playbackFailed)
     } finally {
       if (enabledRef.current) {
         pendingStartRef.current = true
@@ -232,14 +235,14 @@ export function useVoiceConversation({
         setStatus('idle')
       }
     }
-  }, [])
+  }, [voiceCopy.playbackFailed])
 
   const start = useCallback(async () => {
     if (!onTranscribeAudio) {
       notify({
         kind: 'warning',
-        title: 'Voice unavailable',
-        message: 'Configure speech-to-text to use voice mode.'
+        title: voiceCopy.unavailable,
+        message: voiceCopy.configureSpeechToText
       })
       onFatalError?.()
 
@@ -252,7 +255,7 @@ export function useVoiceConversation({
     consumePendingResponse()
     pendingStartRef.current = true
     await startListening()
-  }, [consumePendingResponse, onFatalError, onTranscribeAudio, startListening])
+  }, [consumePendingResponse, onFatalError, onTranscribeAudio, startListening, voiceCopy.configureSpeechToText, voiceCopy.unavailable])
 
   const end = useCallback(async () => {
     pendingStartRef.current = false

package/agent/apps/desktop/src/app/chat/composer/hooks/use-voice-recorder.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 
+import { useI18n } from '@/i18n'
 import { notify, notifyError } from '@/store/notifications'
 
 import type { VoiceActivityState, VoiceStatus } from '../types'
@@ -19,7 +20,9 @@ export function useVoiceRecorder({
   focusInput,
   onTranscript
 }: VoiceRecorderOptions) {
-  const { handle, level, recording } = useMicRecorder()
+  const { t } = useI18n()
+  const voiceCopy = t.notifications.voice
+  const { handle, level, recording } = useMicRecorder(voiceCopy)
   const [voiceStatus, setVoiceStatus] = useState<VoiceStatus>('idle')
   const [elapsedSeconds, setElapsedSeconds] = useState(0)
   const startedAtRef = useRef(0)
@@ -62,12 +65,12 @@ export function useVoiceRecorder({
       const transcript = (await onTranscribeAudio(result.audio)).trim()
 
       if (!transcript) {
-        notify({ kind: 'warning', title: 'No speech detected', message: 'Try recording again.' })
+        notify({ kind: 'warning', title: voiceCopy.noSpeechDetected, message: voiceCopy.tryRecordingAgain })
       } else {
         onTranscript(transcript)
       }
     } catch (error) {
-      notifyError(error, 'Voice transcription failed')
+      notifyError(error, voiceCopy.transcriptionFailed)
     } finally {
       setVoiceStatus('idle')
       focusInput()
@@ -76,13 +79,13 @@ export function useVoiceRecorder({
 
   const start = async () => {
     if (!onTranscribeAudio) {
-      notify({ kind: 'warning', title: 'Voice unavailable', message: 'Voice transcription is not available yet.' })
+      notify({ kind: 'warning', title: voiceCopy.unavailable, message: voiceCopy.transcriptionUnavailable })
 
       return
     }
 
     try {
-      await handle.start({ onError: error => notifyError(error, 'Voice recording failed') })
+      await handle.start({ onError: error => notifyError(error, voiceCopy.recordingFailed) })
       startedAtRef.current = Date.now()
       setElapsedSeconds(0)
       setVoiceStatus('recording')
@@ -91,7 +94,7 @@ export function useVoiceRecorder({
       timeoutRef.current = window.setTimeout(() => void stop(), cap * 1000)
     } catch (error) {
       setVoiceStatus('idle')
-      notifyError(error, 'Voice recording failed')
+      notifyError(error, voiceCopy.recordingFailed)
     }
   }
 

package/agent/apps/desktop/src/app/chat/composer/ime-composition-dom-repro.test.tsx

@@ -0,0 +1,108 @@
+import { act, cleanup, fireEvent, render } from '@testing-library/react'
+import { useRef, useState } from 'react'
+import { afterEach, describe, expect, it } from 'vitest'
+
+// No global setupFiles registers auto-cleanup, so unmount between tests —
+// otherwise a second render() leaks the first editor and getByTestId('editor')
+// matches multiple nodes.
+afterEach(cleanup)
+
+// Faithful mirror of index.tsx's composer text wiring for IME input, driven
+// through REAL DOM composition + input events on a contentEditable.
+//
+// Regression repro for #39614: typing committed multi-character IME text (e.g.
+// Chinese "你好") used to leave the send button hidden. The input events fired
+// during composition carry uncommitted preedit text and are intentionally
+// skipped; Chromium then does NOT reliably emit a trailing input event after
+// compositionend on Windows IMEs, so the finalized text never reached composer
+// state and `hasPayload` stayed false until an unrelated edit forced a sync.
+// The fix flushes the live DOM text in onCompositionEnd.
+function Harness({ onPayload }: { onPayload: (hasPayload: boolean) => void }) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const composingRef = useRef(false)
+  const draftRef = useRef('')
+  const [draft, setDraft] = useState('')
+
+  const flushEditorToDraft = (editor: HTMLDivElement) => {
+    const next = editor.textContent ?? ''
+
+    if (next !== draftRef.current) {
+      draftRef.current = next
+      setDraft(next)
+    }
+  }
+
+  onPayload(draft.trim().length > 0)
+
+  return (
+    <div
+      contentEditable
+      data-testid="editor"
+      onCompositionEnd={event => {
+        composingRef.current = false
+        flushEditorToDraft(event.currentTarget)
+      }}
+      onCompositionStart={() => {
+        composingRef.current = true
+      }}
+      onInput={event => {
+        if (composingRef.current) {
+          return
+        }
+
+        flushEditorToDraft(event.currentTarget)
+      }}
+      ref={editorRef}
+      suppressContentEditableWarning
+    />
+  )
+}
+
+describe('composer IME composition — send button visibility (#39614)', () => {
+  it('shows the send button after committing CJK text without a trailing edit', async () => {
+    let hasPayload = false
+    const { getByTestId } = render(<Harness onPayload={p => (hasPayload = p)} />)
+    const editor = getByTestId('editor')
+
+    // Compose "你好" the way a Windows Chinese IME does: compositionstart, then
+    // input events carrying uncommitted preedit text, then compositionend with
+    // the committed text already in the DOM — and crucially NO input event
+    // afterwards.
+    await act(async () => {
+      fireEvent.compositionStart(editor)
+      editor.textContent = '你'
+      fireEvent.input(editor)
+      editor.textContent = '你好'
+      fireEvent.input(editor)
+      fireEvent.compositionEnd(editor)
+    })
+
+    // Before the fix this was false (button hidden) until a further edit.
+    expect(hasPayload).toBe(true)
+    expect(editor.textContent).toBe('你好')
+  })
+
+  it('also covers Japanese/Korean and any IME-composed script', async () => {
+    let hasPayload = false
+    const { getByTestId } = render(<Harness onPayload={p => (hasPayload = p)} />)
+    const editor = getByTestId('editor')
+
+    for (const committed of ['こんにちは', '안녕하세요']) {
+      await act(async () => {
+        fireEvent.compositionStart(editor)
+        editor.textContent = committed
+        fireEvent.input(editor)
+        fireEvent.compositionEnd(editor)
+      })
+
+      expect(hasPayload).toBe(true)
+
+      // Clear for the next script.
+      await act(async () => {
+        editor.textContent = ''
+        fireEvent.input(editor)
+      })
+      expect(hasPayload).toBe(false)
+    }
+  })
+})