feat(chat): focus the composer on keyboard input

src/renderer/src/components/chat/ChatInputBox.vue

@@ -911,6 +911,24 @@ function focusInput() {
   setCaretToEnd(editor)
 }
 
+/**
+ * Focuses the composer and types `text` at the end of the existing draft.
+ *
+ * Used by type-to-focus: the triggering keystroke already happened outside the
+ * editor, so the character has to be inserted rather than replayed. Unlike
+ * `insertRecognizedText` this keeps whitespace intact.
+ */
+function focusAndInsertText(text: string) {
+  if (!props.editable || !text) {
+    return
+  }
+
+  editor.chain().focus().scrollIntoView().run()
+  setCaretToEnd(editor)
+  // A text node (not a string) so a lone space is not collapsed by the parser.
+  editor.chain().insertContent({ type: 'text', text }).run()
+}
+
 defineExpose({
   triggerAttach,
   insertRecognizedText,
@@ -922,7 +940,8 @@ defineExpose({
   setPendingSkills,
   getDocumentSnapshot,
   restoreDocumentSnapshot,
-  focusInput
+  focusInput,
+  focusAndInsertText
 })
 </script>
 

src/renderer/src/features/chat-page/ChatPage.vue

@@ -419,6 +419,8 @@ import { useToolInteraction } from './composables/useToolInteraction'
 import { useMessageActions } from './composables/useMessageActions'
 import { usePendingInputActions } from './composables/usePendingInputActions'
 import { useChatPageEventBridge } from './composables/useChatPageEventBridge'
+import { useComposerTypeToFocus } from './composables/useComposerTypeToFocus'
+import { isEditableKeyboardTarget } from '@/lib/keyboardFocus'
 import type { UserMessageInlineItem } from '@shared/types/agent-interface'
 import { findLatestAssistantMessageId } from '@/features/chat-page/model/displayMessage'
 
@@ -536,15 +538,16 @@ const TOP_HISTORY_THRESHOLD = 80
 const MESSAGE_JUMP_RETRY_INTERVAL = 80
 const MESSAGE_HIGHLIGHT_DURATION = 2000
 const MAX_MESSAGE_JUMP_RETRIES = 8
+// Space is intentionally absent: it is composer input now (type-to-focus claims
+// it and prevents the native scroll), so it must not mark restore-time scroll
+// intent either.
 const SESSION_RESTORE_SCROLL_INTENT_KEYS = new Set([
   'ArrowUp',
   'ArrowDown',
   'PageUp',
   'PageDown',
   'Home',
-  'End',
-  ' ',
-  'Spacebar'
+  'End'
 ])
 const traceMessageId = ref<string | null>(null)
 const sidepanelStore = useSidepanelStore()
@@ -607,16 +610,6 @@ const resolveChatInputBoxElement = () =>
     '[data-testid="chat-input-box"]'
   ) as HTMLElement | null) ?? null
 
-function isEditableKeyboardTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) {
-    return false
-  }
-
-  return Boolean(
-    target.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]')
-  )
-}
-
 function isSessionRestoreKeyboardScrollIntent(event: KeyboardEvent): boolean {
   return (
     !event.defaultPrevented &&
@@ -1388,6 +1381,23 @@ watch(
   { immediate: true, flush: 'post' }
 )
 
+/**
+ * Type-to-focus only when the composer can actually take focus: a read-only
+ * (subagent) session does not render it at all, and a pending tool interaction
+ * leaves it inert.
+ */
+const isComposerTypeToFocusEnabled = computed(
+  () =>
+    !isReadOnlySession.value &&
+    !isSessionViewPreparing.value &&
+    !activePendingInteraction.value &&
+    !isHandlingInteraction.value
+)
+useComposerTypeToFocus({
+  isEnabled: () => isComposerTypeToFocusEnabled.value,
+  chatInputRef
+})
+
 // Announce state transitions, not token updates; users read response content in the transcript.
 const generationAnnouncement = computed(() => {
   if (isSessionViewPreparing.value) return ''

src/renderer/src/features/chat-page/composables/useComposerTypeToFocus.ts

@@ -0,0 +1,58 @@
+import { useEventListener } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { hasInteractiveKeyboardFocus, isEditableKeyboardTarget } from '@/lib/keyboardFocus'
+import { resolveComposerTypeToFocusIntent } from '../model/typeToFocus'
+
+export type ComposerTypeToFocusHandle = {
+  focusInput?: () => void
+  focusAndInsertText?: (text: string) => void
+}
+
+type UseComposerTypeToFocusOptions = {
+  /** False for read-only sessions, inert composers, and blocking interactions. */
+  isEnabled: () => boolean
+  chatInputRef: Ref<ComposerTypeToFocusHandle | null>
+}
+
+/**
+ * Routes the first keystroke of a window-level typing session into the composer.
+ *
+ * Owns its own window listener instead of joining `useChatPageEventBridge`
+ * because the new-thread page has no event bridge but needs the same behavior.
+ * Both pages share this composable; the listener detaches with the component
+ * scope.
+ */
+export function useComposerTypeToFocus(options: UseComposerTypeToFocusOptions): void {
+  useEventListener(window, 'keydown', (event: KeyboardEvent) => {
+    const intent = resolveComposerTypeToFocusIntent(event, {
+      isEnabled: options.isEnabled(),
+      isEditableTarget: isEditableKeyboardTarget(event.target),
+      hasInteractiveFocus: hasInteractiveKeyboardFocus(event.target)
+    })
+
+    if (intent.kind === 'ignore') {
+      return
+    }
+
+    const chatInput = options.chatInputRef.value
+    if (!chatInput?.focusInput) {
+      return
+    }
+
+    if (intent.kind === 'focus-only') {
+      // Input method composition: focusing is enough, the IME owns the text.
+      chatInput.focusInput()
+      return
+    }
+
+    // Suppress the native default (notably Space scrolling the transcript)
+    // before the character is inserted programmatically.
+    event.preventDefault()
+    if (chatInput.focusAndInsertText) {
+      chatInput.focusAndInsertText(intent.text)
+      return
+    }
+
+    chatInput.focusInput()
+  })
+}

src/renderer/src/features/chat-page/model/typeToFocus.ts

@@ -0,0 +1,75 @@
+/**
+ * Decides what a window-level keydown should do for the chat composer.
+ *
+ * Kept as a pure function so the routing rules — which are the whole contract of
+ * type-to-focus — can be tested without mounting a page or an editor.
+ */
+
+export type ComposerTypeToFocusIntent =
+  /** Leave the event alone: another handler or control owns it. */
+  | { kind: 'ignore' }
+  /** Start the input method in the composer without inserting anything. */
+  | { kind: 'focus-only' }
+  /** Focus the composer and insert the character that triggered the focus. */
+  | { kind: 'focus-and-insert'; text: string }
+
+export type ComposerTypeToFocusContext = {
+  /** False for read-only sessions, inert composers, and blocking interactions. */
+  isEnabled: boolean
+  isEditableTarget: boolean
+  hasInteractiveFocus: boolean
+}
+
+/** C0 controls plus DEL: the non-printable single-code-unit keys. */
+function isControlCharacter(key: string): boolean {
+  const code = key.charCodeAt(0)
+  return code <= 0x1f || code === 0x7f
+}
+
+export function resolveComposerTypeToFocusIntent(
+  event: KeyboardEvent,
+  context: ComposerTypeToFocusContext
+): ComposerTypeToFocusIntent {
+  if (event.defaultPrevented) {
+    return { kind: 'ignore' }
+  }
+
+  // Shortcuts and AltGr-style chords keep their native behavior. A bare Shift
+  // still reports a printable `key` (e.g. 'A'), so it is intentionally allowed.
+  if (event.metaKey || event.ctrlKey || event.altKey) {
+    return { kind: 'ignore' }
+  }
+
+  // Ownership comes before intent: a composition already running in another
+  // field (the chat search box, a dialog input) must keep its keystrokes.
+  if (context.isEditableTarget || context.hasInteractiveFocus) {
+    return { kind: 'ignore' }
+  }
+
+  if (!context.isEnabled) {
+    return { kind: 'ignore' }
+  }
+
+  // Keystrokes whose text is produced later rather than by this key: input
+  // method compositions (isComposing / keyCode 229 / 'Process') and dead keys
+  // waiting for a following letter. Focus without inserting and without
+  // preventDefault, so the platform keeps its pending state and the *next*
+  // keystroke reaches an already focused editor and composes natively — which is
+  // what turns a dead key + 'e' into 'é' instead of a bare 'e'.
+  if (
+    event.isComposing ||
+    event.keyCode === 229 ||
+    event.key === 'Process' ||
+    event.key === 'Dead'
+  ) {
+    return { kind: 'focus-only' }
+  }
+
+  // Navigation and function keys, plus 'Unidentified'. Space is a single
+  // printable character and is deliberately included here.
+  if (event.key.length !== 1 || isControlCharacter(event.key)) {
+    return { kind: 'ignore' }
+  }
+
+  return { kind: 'focus-and-insert', text: event.key }
+}

src/renderer/src/lib/keyboardFocus.ts

@@ -0,0 +1,72 @@
+/**
+ * Focus predicates for renderer-level keyboard routing.
+ *
+ * They exist so that features which intercept global keydown (type-to-focus,
+ * list scroll intent, session shortcuts) agree on what "the user is already
+ * typing somewhere" and "some control owns the keyboard" mean.
+ */
+
+/** Anything that natively consumes typed characters. */
+const EDITABLE_SELECTOR = [
+  'input',
+  'textarea',
+  'select',
+  // `contenteditable=""` and `plaintext-only` are editable too, so match every
+  // value except the explicit opt-out. ProseMirror's attribute literal is not
+  // part of our contract.
+  '[contenteditable]:not([contenteditable="false"])',
+  '[role="textbox"]'
+].join(', ')
+
+/**
+ * Controls that own keyboard interaction while focused: activation keys,
+ * roving tab stops, and modal focus traps. A bare `[tabindex]` is deliberately
+ * absent — the message scroll container is `tabindex="0"` and must stay a
+ * valid type-to-focus surface.
+ */
+const INTERACTIVE_SELECTOR = [
+  'button',
+  'a[href]',
+  'summary',
+  '[role="button"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="menuitemcheckbox"]',
+  '[role="menuitemradio"]',
+  '[role="option"]',
+  '[role="tab"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[role="switch"]',
+  '[role="slider"]',
+  '[role="combobox"]',
+  '[role="listbox"]',
+  '[role="menu"]',
+  '[role="menubar"]',
+  '[role="toolbar"]',
+  // reka-ui writes role but no aria-modal, so the modal test cannot require it.
+  '[role="dialog"]',
+  '[role="alertdialog"]',
+  '[data-slot="dialog-content"]',
+  '[data-slot="alert-dialog-content"]',
+  '[data-reka-popper-content-wrapper]',
+  '[data-radix-popper-content-wrapper]'
+].join(', ')
+
+function resolveElement(target: EventTarget | null): Element | null {
+  if (target instanceof Element) {
+    return target
+  }
+
+  return document.activeElement
+}
+
+/** True when the target (or its ancestors) natively consumes typed characters. */
+export function isEditableKeyboardTarget(target: EventTarget | null): boolean {
+  return Boolean(resolveElement(target)?.closest(EDITABLE_SELECTOR))
+}
+
+/** True when the target (or its ancestors) is a control that owns the keyboard. */
+export function hasInteractiveKeyboardFocus(target: EventTarget | null): boolean {
+  return Boolean(resolveElement(target)?.closest(INTERACTIVE_SELECTOR))
+}

src/renderer/src/pages/NewThreadPage.vue

@@ -214,6 +214,7 @@ import {
 import { DcDropdownActionItem } from '@dc-ui/components/dropdown-action-item'
 import { Icon } from '@iconify/vue'
 import ChatInputBox from '@/components/chat/ChatInputBox.vue'
+import { useComposerTypeToFocus } from '@/features/chat-page/composables/useComposerTypeToFocus'
 import ChatInputToolbar from '@/components/chat/ChatInputToolbar.vue'
 import ChatStatusBar from '@/components/chat/ChatStatusBar.vue'
 import AcpAuthDialog from '@/components/acp/AcpAuthDialog.vue'
@@ -316,9 +317,16 @@ const chatInputRef = ref<
       insertRecognizedText?: (text: string) => void
       getInlineItemsSnapshot?: () => UserMessageInlineItem[]
       focusInput?: () => void
+      focusAndInsertText?: (text: string) => void
     })
   | null
 >(null)
+// Same type-to-focus behavior as the chat page; the composer is the only
+// editable surface here, and it locks while a submission is in flight.
+useComposerTypeToFocus({
+  isEnabled: () => !isSubmittingInput.value,
+  chatInputRef
+})
 const {
   message,
   attachedFiles,

test/renderer/components/ChatInputBox.test.ts

@@ -136,6 +136,7 @@ vi.mock('@tiptap/vue-3', () => {
     chain() {
       const api = {
         focus: () => api,
+        scrollIntoView: () => api,
         insertContent: (content: string) => {
           insertContentMock(content)
           return api
@@ -517,6 +518,19 @@ describe('ChatInputBox attachments', () => {
     expect(insertContentMock).toHaveBeenCalledWith('hello world')
   })
 
+  it('exposes focusAndInsertText and inserts the raw character without trimming', async () => {
+    const wrapper = await mountComponent()
+    ;(wrapper.vm as any).focusAndInsertText(' ')
+    expect(insertContentMock).toHaveBeenCalledWith({ type: 'text', text: ' ' })
+  })
+
+  it('ignores focusAndInsertText when the composer is not editable', async () => {
+    const wrapper = await mountComponent()
+    await wrapper.setProps({ editable: false })
+    ;(wrapper.vm as any).focusAndInsertText('a')
+    expect(insertContentMock).not.toHaveBeenCalled()
+  })
+
   it('exposes insertWorkspaceReference and inserts a workspace reference into the editor', async () => {
     const wrapper = await mountComponent()
     await wrapper.setProps({ workspacePath: '/repo' })

test/renderer/composables/chat/chatScrollArchitecture.test.ts

@@ -22,7 +22,13 @@ const scrollWritePatterns: ReadonlyArray<[ScrollWriteKind, RegExp]> = [
 // the message map rail, or document anchors. Any new direct renderer scroll API must be reviewed
 // explicitly.
 const allowedDirectScrollWrites: Record<string, ScrollWriteKind[]> = {
-  'src/renderer/src/components/chat/ChatInputBox.vue': ['scrollIntoView', 'scrollIntoView'],
+  // ChatInputBox: focusInput(), focusAndInsertText(), and the Shift-Enter hard break all
+  // scroll the composer itself into view rather than the message list.
+  'src/renderer/src/components/chat/ChatInputBox.vue': [
+    'scrollIntoView',
+    'scrollIntoView',
+    'scrollIntoView'
+  ],
   'src/renderer/src/components/chat/ChatMinimap.vue': ['scrollTop'],
   'src/renderer/src/components/chat/mentions/SuggestionList.vue': ['scrollIntoView'],
   'src/renderer/src/components/markdown/useMarkdownLinkNavigation.ts': [