@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/apps/desktop/src/app/chat/composer/controls.tsx

@@ -1,10 +1,15 @@
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
+import { KbdCombo } from '@/components/ui/kbd'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
-import { AudioLines, Layers3, Loader2, Square } from '@/lib/icons'
+import { AudioLines, Layers3, Loader2, Square, SteeringWheel } from '@/lib/icons'
+import { formatCombo } from '@/lib/keybinds/combo'
 import { cn } from '@/lib/utils'
 
 import type { ConversationStatus } from './hooks/use-voice-conversation'
+import { ModelPill } from './model-pill'
 import type { ChatBarState, VoiceStatus } from './types'
 
 export const ICON_BTN = 'size-(--composer-control-size) shrink-0 rounded-md'
@@ -36,16 +41,19 @@ interface ConversationProps {
 export function ComposerControls({
   busy,
   busyAction,
+  canSteer,
   canSubmit,
   conversation,
   disabled,
   hasComposerPayload,
   state,
   voiceStatus,
-  onDictate
+  onDictate,
+  onSteer
 }: {
   busy: boolean
   busyAction: 'queue' | 'stop'
+  canSteer: boolean
   canSubmit: boolean
   conversation: ConversationProps
   disabled: boolean
@@ -53,7 +61,20 @@ export function ComposerControls({
   state: ChatBarState
   voiceStatus: VoiceStatus
   onDictate: () => void
+  onSteer: () => void
 }) {
+  const { t } = useI18n()
+  const c = t.composer
+  const steerCombo = formatCombo('mod+enter')
+  const steerLabel = `${c.steer} (${steerCombo})`
+
+  const steerTip = (
+    <span className="inline-flex items-center gap-1.5">
+      {c.steer}
+      <KbdCombo combo="mod+enter" size="sm" variant="inverted" />
+    </span>
+  )
+
   if (conversation.active) {
     return <ConversationPill {...conversation} disabled={disabled} />
   }
@@ -62,40 +83,61 @@ export function ComposerControls({
 
   return (
     <div className="ml-auto flex shrink-0 items-center gap-(--composer-control-gap)">
-      <DictationButton disabled={disabled} onToggle={onDictate} state={state.voice} status={voiceStatus} />
+      <ModelPill disabled={disabled} model={state.model} />
+      {/* While the agent runs and the user is typing, steer takes over the mic's
+          slot rather than crowding the row with an extra button. */}
+      {canSteer ? (
+        <Tip label={steerTip}>
+          <Button
+            aria-label={steerLabel}
+            className={GHOST_ICON_BTN}
+            disabled={disabled}
+            onClick={onSteer}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <SteeringWheel size={16} />
+          </Button>
+        </Tip>
+      ) : (
+        <DictationButton disabled={disabled} onToggle={onDictate} state={state.voice} status={voiceStatus} />
+      )}
       {showVoicePrimary ? (
-        <Button
-          aria-label="Start voice conversation"
-          className={PRIMARY_ICON_BTN}
-          disabled={disabled}
-          onClick={() => {
-            triggerHaptic('open')
-            conversation.onStart()
-          }}
-          size="icon"
-          title="Start voice conversation"
-          type="button"
-        >
-          <AudioLines size={17} />
-        </Button>
+        <Tip label={c.startVoice}>
+          <Button
+            aria-label={c.startVoice}
+            className={PRIMARY_ICON_BTN}
+            disabled={disabled}
+            onClick={() => {
+              triggerHaptic('open')
+              conversation.onStart()
+            }}
+            size="icon"
+            type="button"
+          >
+            <AudioLines size={17} />
+          </Button>
+        </Tip>
       ) : (
-        <Button
-          aria-label={busy ? (busyAction === 'queue' ? 'Queue message' : 'Stop') : 'Send'}
-          className={PRIMARY_ICON_BTN}
-          disabled={disabled || !canSubmit}
-          title={busy ? (busyAction === 'queue' ? 'Queue message' : 'Stop') : 'Send'}
-          type="submit"
-        >
-          {busy ? (
-            busyAction === 'queue' ? (
-              <Layers3 size={16} />
+        <Tip label={busy ? (busyAction === 'queue' ? c.queueMessage : c.stop) : c.send}>
+          <Button
+            aria-label={busy ? (busyAction === 'queue' ? c.queueMessage : c.stop) : c.send}
+            className={PRIMARY_ICON_BTN}
+            disabled={disabled || !canSubmit}
+            type="submit"
+          >
+            {busy ? (
+              busyAction === 'queue' ? (
+                <Layers3 size={16} />
+              ) : (
+                <span className="block size-3 rounded-[0.1875rem] bg-current" />
+              )
             ) : (
-              <span className="block size-3 rounded-[0.1875rem] bg-current" />
-            )
-          ) : (
-            <Codicon name="arrow-up" size="1rem" />
-          )}
-        </Button>
+              <Codicon name="arrow-up" size="1rem" />
+            )}
+          </Button>
+        </Tip>
       )}
     </div>
   )
@@ -110,68 +152,71 @@ function ConversationPill({
   onToggleMute,
   status
 }: ConversationProps & { disabled: boolean }) {
+  const { t } = useI18n()
+  const c = t.composer
   const speaking = status === 'speaking'
   const listening = status === 'listening' && !muted
 
   const label =
     status === 'speaking'
-      ? 'Speaking'
+      ? c.speaking
       : status === 'transcribing'
-        ? 'Transcribing'
+        ? c.transcribing
         : status === 'thinking'
-          ? 'Thinking'
+          ? c.thinking
           : muted
-            ? 'Muted'
-            : 'Listening'
+            ? c.muted
+            : c.listening
 
   return (
     <div className="ml-auto flex shrink-0 items-center gap-(--composer-control-gap)">
-      <Button
-        aria-label={muted ? 'Unmute microphone' : 'Mute microphone'}
-        aria-pressed={muted}
-        className={cn(GHOST_ICON_BTN, 'p-0', muted && 'bg-muted text-muted-foreground')}
-        disabled={disabled}
-        onClick={() => {
-          triggerHaptic('selection')
-          onToggleMute()
-        }}
-        size="icon"
-        title={muted ? 'Unmute microphone' : 'Mute microphone'}
-        type="button"
-        variant="ghost"
-      >
-        <Codicon name={muted ? 'mic-off' : 'mic'} size="1rem" />
-      </Button>
+      <Tip label={muted ? c.unmuteMic : c.muteMic}>
+        <Button
+          aria-label={muted ? c.unmuteMic : c.muteMic}
+          aria-pressed={muted}
+          className={cn(GHOST_ICON_BTN, 'p-0', muted && 'bg-muted text-muted-foreground')}
+          disabled={disabled}
+          onClick={() => {
+            triggerHaptic('selection')
+            onToggleMute()
+          }}
+          size="icon"
+          type="button"
+          variant="ghost"
+        >
+          <Codicon name={muted ? 'mic-off' : 'mic'} size="1rem" />
+        </Button>
+      </Tip>
       {listening && (
         <Button
-          aria-label="Stop listening and send"
+          aria-label={c.stopListening}
           className="h-(--composer-control-size) shrink-0 gap-1.5 rounded-full px-2.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
           disabled={disabled}
           onClick={() => {
             triggerHaptic('submit')
             onStopTurn()
           }}
-          title="Stop listening and send"
+          title={c.stopListening}
           type="button"
           variant="ghost"
         >
           <Square className="fill-current" size={11} />
-          <span>Stop</span>
+          <span>{c.stopShort}</span>
         </Button>
       )}
       <Button
-        aria-label="End voice conversation"
+        aria-label={c.endConversation}
         className="h-(--composer-control-size) gap-1.5 rounded-full bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90"
         disabled={disabled}
         onClick={() => {
           triggerHaptic('close')
           onEnd()
         }}
-        title="End voice conversation"
+        title={c.endConversation}
         type="button"
       >
         <ConversationIndicator level={level} listening={listening} speaking={speaking} />
-        <span>End</span>
+        <span>{c.endShort}</span>
       </Button>
       <span className="sr-only" role="status">
         {label}
@@ -218,40 +263,43 @@ function DictationButton({
   status: VoiceStatus
   onToggle: () => void
 }) {
+  const { t } = useI18n()
+  const c = t.composer
   const active = state.active || status !== 'idle'
 
   const aria =
-    status === 'recording' ? 'Stop dictation' : status === 'transcribing' ? 'Transcribing dictation' : 'Voice dictation'
+    status === 'recording' ? c.stopDictation : status === 'transcribing' ? c.transcribingDictation : c.voiceDictation
 
   return (
-    <Button
-      aria-label={aria}
-      aria-pressed={active}
-      className={cn(
-        GHOST_ICON_BTN,
-        'p-0',
-        'data-[active=true]:bg-accent data-[active=true]:text-foreground',
-        status === 'recording' && 'bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary',
-        status === 'transcribing' && 'bg-primary/10 text-primary'
-      )}
-      data-active={active}
-      disabled={disabled || !state.enabled || status === 'transcribing'}
-      onClick={() => {
-        triggerHaptic(active ? 'close' : 'open')
-        onToggle()
-      }}
-      size="icon"
-      title={aria}
-      type="button"
-      variant="ghost"
-    >
-      {status === 'recording' ? (
-        <Square className="fill-current" size={12} />
-      ) : status === 'transcribing' ? (
-        <Loader2 className="animate-spin" size={16} />
-      ) : (
-        <Codicon name="mic" size="1rem" />
-      )}
-    </Button>
+    <Tip label={aria}>
+      <Button
+        aria-label={aria}
+        aria-pressed={active}
+        className={cn(
+          GHOST_ICON_BTN,
+          'p-0',
+          'data-[active=true]:bg-accent data-[active=true]:text-foreground',
+          status === 'recording' && 'bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary',
+          status === 'transcribing' && 'bg-primary/10 text-primary'
+        )}
+        data-active={active}
+        disabled={disabled || !state.enabled || status === 'transcribing'}
+        onClick={() => {
+          triggerHaptic(active ? 'close' : 'open')
+          onToggle()
+        }}
+        size="icon"
+        type="button"
+        variant="ghost"
+      >
+        {status === 'recording' ? (
+          <Square className="fill-current" size={12} />
+        ) : status === 'transcribing' ? (
+          <Loader2 className="animate-spin" size={16} />
+        ) : (
+          <Codicon name="mic" size="1rem" />
+        )}
+      </Button>
+    </Tip>
   )
 }

package/agent/apps/desktop/src/app/chat/composer/enter-submit-dom-race.test.tsx

@@ -0,0 +1,218 @@
+import { act, cleanup, fireEvent, render } from '@testing-library/react'
+import { useRef, useState } from 'react'
+import { afterEach, describe, expect, it, vi } 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 Enter wiring (handleEditorKeyDown's Enter
+// branch + submitDraft), driven through REAL DOM keydown events on a
+// contentEditable.
+//
+// Regression repro for #39630: pressing Enter right after typing (fast typing /
+// IME) did nothing. The composer state (`draft` from useAuiState) and its
+// derived `hasComposerPayload` lag the DOM by a render, so the keydown handler
+// read empty state and either dropped the message, drained a queued prompt
+// instead of sending, or (while busy) refused to queue. The fix reads the live
+// editor text — `hasLivePayload` in the handler and a DOM re-sync at the top of
+// submitDraft — so the just-typed text always wins.
+//
+// We model the race deterministically the way the IME repro does: mutate the
+// editor's textContent WITHOUT firing an input event, so the React `draft`
+// state stays stale while the DOM already holds the text.
+function Harness({
+  busy = false,
+  disabled = false,
+  queued = [],
+  onSubmit,
+  onQueue,
+  onCancel,
+  onDrain
+}: {
+  busy?: boolean
+  disabled?: boolean
+  queued?: readonly string[]
+  onSubmit: (text: string) => void
+  onQueue: (text: string) => void
+  onCancel: () => void
+  onDrain: () => void
+}) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const draftRef = useRef('')
+  // Mirrors `useAuiState(s => s.composer.text)` — updated only via setText, so
+  // it lags the DOM until React re-renders (the source of the bug).
+  const [draft, setDraft] = useState('')
+  const attachments: unknown[] = []
+
+  const composerPlainText = (el: HTMLElement) => el.textContent ?? ''
+
+  const setText = (next: string) => {
+    draftRef.current = next
+    setDraft(next)
+  }
+
+  const submitDraft = () => {
+    if (disabled) {
+      return
+    }
+
+    const editor = editorRef.current
+    if (editor) {
+      const domText = composerPlainText(editor)
+      if (domText !== draftRef.current) {
+        draftRef.current = domText
+        setDraft(domText)
+      }
+    }
+
+    const text = draftRef.current
+    const payloadPresent = text.trim().length > 0 || attachments.length > 0
+
+    if (busy) {
+      if (payloadPresent) {
+        onQueue(text)
+      } else {
+        onCancel()
+      }
+    } else if (!payloadPresent && queued.length > 0) {
+      onDrain()
+    } else if (payloadPresent) {
+      onSubmit(text)
+    }
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+
+      const editorText = editorRef.current ? composerPlainText(editorRef.current) : draftRef.current
+      const hasLivePayload = editorText.trim().length > 0 || attachments.length > 0
+
+      if (disabled) {
+        return
+      }
+
+      if (!busy && !hasLivePayload && queued.length > 0) {
+        onDrain()
+
+        return
+      }
+
+      if (busy && !hasLivePayload) {
+        return
+      }
+
+      submitDraft()
+    }
+  }
+
+  // `draft` is read so the lint/compiler treats the stale-state mirror as live;
+  // the assertions prove the handler never relies on it.
+  void draft
+
+  return (
+    <div
+      contentEditable
+      data-testid="editor"
+      onInput={event => setText(composerPlainText(event.currentTarget))}
+      onKeyDown={handleKeyDown}
+      ref={editorRef}
+      suppressContentEditableWarning
+    />
+  )
+}
+
+describe('composer Enter submit — live DOM vs stale composer state (#39630)', () => {
+  it('sends the just-typed text on Enter even when composer state has not synced', async () => {
+    const onSubmit = vi.fn()
+    const { getByTestId } = render(
+      <Harness onCancel={vi.fn()} onDrain={vi.fn()} onQueue={vi.fn()} onSubmit={onSubmit} />
+    )
+    const editor = getByTestId('editor')
+
+    // Fast typing: the DOM has the text but NO input event fired, so `draft`
+    // state is still empty (the exact stale-state race).
+    await act(async () => {
+      editor.textContent = 'hello world'
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(onSubmit).toHaveBeenCalledWith('hello world')
+  })
+
+  it('queues a fast-typed message while busy instead of draining the queue or cancelling', async () => {
+    const onQueue = vi.fn()
+    const onDrain = vi.fn()
+    const onCancel = vi.fn()
+    const { getByTestId } = render(
+      <Harness busy onCancel={onCancel} onDrain={onDrain} onQueue={onQueue} onSubmit={vi.fn()} queued={['queued-1']} />
+    )
+    const editor = getByTestId('editor')
+
+    await act(async () => {
+      editor.textContent = 'urgent follow-up'
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(onQueue).toHaveBeenCalledWith('urgent follow-up')
+    expect(onDrain).not.toHaveBeenCalled()
+    expect(onCancel).not.toHaveBeenCalled()
+  })
+
+  it('treats an empty Enter while busy as a no-op (never an accidental Stop)', async () => {
+    const onCancel = vi.fn()
+    const onSubmit = vi.fn()
+    const onQueue = vi.fn()
+    const { getByTestId } = render(
+      <Harness busy onCancel={onCancel} onDrain={vi.fn()} onQueue={onQueue} onSubmit={onSubmit} />
+    )
+    const editor = getByTestId('editor')
+
+    await act(async () => {
+      editor.textContent = ''
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(onCancel).not.toHaveBeenCalled()
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(onQueue).not.toHaveBeenCalled()
+  })
+
+  it('drains the next queued prompt on Enter when idle with a truly empty editor', async () => {
+    const onDrain = vi.fn()
+    const onSubmit = vi.fn()
+    const { getByTestId } = render(
+      <Harness onCancel={vi.fn()} onDrain={onDrain} onQueue={vi.fn()} onSubmit={onSubmit} queued={['queued-1']} />
+    )
+    const editor = getByTestId('editor')
+
+    await act(async () => {
+      editor.textContent = ''
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(onDrain).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('keeps reconnect drafts editable but blocks Enter submit until the gateway returns', async () => {
+    const onSubmit = vi.fn()
+    const onDrain = vi.fn()
+    const { getByTestId } = render(
+      <Harness disabled onCancel={vi.fn()} onDrain={onDrain} onQueue={vi.fn()} onSubmit={onSubmit} queued={['queued-1']} />
+    )
+    const editor = getByTestId('editor')
+
+    await act(async () => {
+      editor.textContent = 'draft while reconnecting'
+      fireEvent.input(editor)
+      fireEvent.keyDown(editor, { key: 'Enter' })
+    })
+
+    expect(editor.textContent).toBe('draft while reconnecting')
+    expect(onDrain).not.toHaveBeenCalled()
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+})

package/agent/apps/desktop/src/app/chat/composer/focus.ts

@@ -10,6 +10,9 @@
  * steal focus from the composer effect.
  */
 
+import { RICH_INPUT_SLOT } from './rich-editor'
+import type { InlineRefInput } from './inline-refs'
+
 export type ComposerTarget = 'edit' | 'main'
 export type ComposerInsertMode = 'block' | 'inline'
 
@@ -23,8 +26,14 @@ interface InsertDetail {
   text: string
 }
 
+interface InsertRefsDetail {
+  refs: InlineRefInput[]
+  target: ComposerTarget
+}
+
 const FOCUS_EVENT = 'hermes:composer-focus'
 const INSERT_EVENT = 'hermes:composer-insert'
+const INSERT_REFS_EVENT = 'hermes:composer-insert-refs'
 
 let activeTarget: ComposerTarget = 'main'
 
@@ -82,6 +91,20 @@ export const onComposerFocusRequest = (handler: (target: ComposerTarget) => void
 export const onComposerInsertRequest = (handler: (detail: InsertDetail) => void) =>
   subscribe<InsertDetail>(INSERT_EVENT, handler)
 
+/** Insert typed ref chips (carrying a display label) into a composer — the
+ * structured cousin of {@link requestComposerInsert}, used for session links. */
+export const requestComposerInsertRefs = (
+  refs: InlineRefInput[],
+  { target = 'active' }: { target?: ComposerTarget | 'active' } = {}
+) => {
+  if (refs.length) {
+    dispatch<InsertRefsDetail>(INSERT_REFS_EVENT, { refs, target: resolve(target) })
+  }
+}
+
+export const onComposerInsertRefsRequest = (handler: (detail: InsertRefsDetail) => void) =>
+  subscribe<InsertRefsDetail>(INSERT_REFS_EVENT, handler)
+
 /**
  * Focus a composer input across React commit + browser focus restore.
  *
@@ -101,3 +124,12 @@ export const focusComposerInput = (el: HTMLElement | null) => {
   window.requestAnimationFrame(focus)
   window.setTimeout(focus, 0)
 }
+
+/** Drop focus from the main composer input (status-stack chrome, sidebar, etc.). */
+export const blurComposerInput = () => {
+  const el = document.querySelector(`[data-slot="${RICH_INPUT_SLOT}"]`) as HTMLElement | null
+
+  if (el && document.activeElement === el) {
+    el.blur()
+  }
+}