feat(ui): focus messages after prompt submission (NeuralNomadsAI#577)

## Summary

Move keyboard focus from the prompt to the active message stream
immediately after a desktop prompt submission.

This makes conversation navigation keys such as Page Up and Page Down
available without requiring a click. Starting to type printable text
returns focus to the prompt for a follow-up message.

## Changes

- Focus the current session's message stream before waiting for the
message, command, or shell request.
- Carry an explicit focus intent through first-prompt session creation
so the newly mounted session focuses its message stream instead of the
detached draft view.
- Do not overwrite focus if the user changes controls or opens a modal
during first-session activation.
- Restore the active prompt when a submission fails.
- Make the message stream programmatically focusable without adding it
to the normal Tab order.
- Keep type-to-focus active on hybrid touch/mouse devices and preserve
`!` shell-mode activation from the message stream.

## Unchanged behavior

- Touch-only submissions keep their existing focus behavior.
- Existing global Escape handling is unchanged.

## Validation

- Focused prompt and scrolling tests pass: `24/24`.
- UI typecheck passes.
- UI production build passes.
- `git diff --check` passes.
- Independent gatekeeper re-review found no remaining blockers.

Author: pascalandr

packages/ui/src/components/focus-conversation.test.ts

@@ -0,0 +1,39 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import { focusConversationStream } from "./focus-conversation.ts"
+
+describe("focusConversationStream", () => {
+  it("focuses the message stream without scrolling", () => {
+    const calls: Array<FocusOptions | undefined> = []
+    const stream = {
+      focus(options?: FocusOptions) {
+        calls.push(options)
+      },
+    } as unknown as HTMLElement
+    const root = { querySelector: () => stream } as unknown as ParentNode
+
+    assert.equal(focusConversationStream(root), true)
+    assert.deepEqual(calls, [{ preventScroll: true }])
+  })
+
+  it("falls back when focus options are unsupported", () => {
+    const calls: Array<FocusOptions | undefined> = []
+    const stream = {
+      focus(options?: FocusOptions) {
+        calls.push(options)
+        if (options) throw new Error("unsupported")
+      },
+    } as unknown as HTMLElement
+    const root = { querySelector: () => stream } as unknown as ParentNode
+
+    assert.equal(focusConversationStream(root), true)
+    assert.deepEqual(calls, [{ preventScroll: true }, undefined])
+  })
+
+  it("returns false when focus is unavailable", () => {
+    assert.equal(focusConversationStream(null), false)
+    const root = { querySelector: () => null } as unknown as ParentNode
+    assert.equal(focusConversationStream(root), false)
+  })
+})

packages/ui/src/components/focus-conversation.ts

@@ -0,0 +1,15 @@
+export function focusConversationStream(root: ParentNode | null | undefined): boolean {
+  const stream = root?.querySelector<HTMLElement>(".message-stream")
+  if (!stream) return false
+
+  try {
+    stream.focus({ preventScroll: true })
+  } catch {
+    try {
+      stream.focus()
+    } catch {
+      return false
+    }
+  }
+  return true
+}

packages/ui/src/components/instance/instance-shell2.tsx

@@ -127,6 +127,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const [draftModel, setDraftModel] = createSignal({ providerId: "", modelId: "" })
   const [draftModelManuallySelected, setDraftModelManuallySelected] = createSignal(false)
   const [draftPromptInputApi, setDraftPromptInputApi] = createSignal<PromptInputApi | null>(null)
+  const [focusConversationSessionId, setFocusConversationSessionId] = createSignal<string | null>(null)
 
   // Worktree selector manages its own dialogs.
   const [showSessionSearch, setShowSessionSearch] = createSignal(false)
@@ -952,6 +953,22 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     }
   }
 
+  function getActiveCreatedSessionPane(sessionId: string) {
+    if (activeSessionIdForInstance() !== sessionId) return null
+    const pane = sessionCenterEl()?.querySelector<HTMLElement>('.session-cache-pane[data-session-active="true"]')
+    return pane?.dataset.sessionId === sessionId ? pane : null
+  }
+
+  function focusCreatedSessionPrompt(sessionId: string) {
+    const textarea = getActiveCreatedSessionPane(sessionId)?.querySelector<HTMLTextAreaElement>(".prompt-input")
+    if (!textarea || textarea.disabled) return
+    try {
+      textarea.focus({ preventScroll: true })
+    } catch {
+      textarea.focus()
+    }
+  }
+
   async function createAndActivateDraftSession() {
     const agent = draftAgent()
     const model = draftModel()
@@ -962,23 +979,33 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     if (model.providerId && model.modelId) {
       await updateSessionModel(props.instance.id, session.id, model)
     }
+    if (!window.matchMedia?.("(pointer: coarse)")?.matches || window.matchMedia?.("(any-pointer: fine)")?.matches) {
+      setFocusConversationSessionId(session.id)
+    }
     setActiveParentSession(props.instance.id, session.id)
     return session
   }
 
-  async function handleFirstPromptSend(prompt: string, attachments: Attachment[]) {
+  async function runFirstPromptSubmission(submit: (sessionId: string) => Promise<void>) {
     const session = await createAndActivateDraftSession()
-    await sendMessage(props.instance.id, session.id, prompt, attachments)
+    try {
+      await submit(session.id)
+    } catch (error) {
+      focusCreatedSessionPrompt(session.id)
+      throw error
+    }
+  }
+
+  async function handleFirstPromptSend(prompt: string, attachments: Attachment[]) {
+    await runFirstPromptSubmission((sessionId) => sendMessage(props.instance.id, sessionId, prompt, attachments))
   }
 
   async function handleFirstPromptCommand(commandName: string, args: string) {
-    const session = await createAndActivateDraftSession()
-    await executeCustomCommand(props.instance.id, session.id, commandName, args)
+    await runFirstPromptSubmission((sessionId) => executeCustomCommand(props.instance.id, sessionId, commandName, args))
   }
 
   async function handleFirstPromptShell(command: string) {
-    const session = await createAndActivateDraftSession()
-    await runShellCommand(props.instance.id, session.id, command)
+    await runFirstPromptSubmission((sessionId) => runShellCommand(props.instance.id, sessionId, command))
   }
 
   /** Return to the last conversation */
@@ -1287,6 +1314,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                           escapeInDebounce={props.escapeInDebounce}
                           isPhoneLayout={isPhoneLayout()}
                           compactPromptLayout={compactPromptLayout()}
+                          focusConversationOnActivate={focusConversationSessionId() === sessionId}
+                          onConversationFocusHandled={() => {
+                            if (focusConversationSessionId() === sessionId) setFocusConversationSessionId(null)
+                          }}
                           registerSessionPromptApi={registerSessionPromptApi}
                           showSidebarToggle={showEmbeddedSidebarToggle()}
                           onSidebarToggle={() => setLeftOpen(true)}

packages/ui/src/components/prompt-input.tsx

@@ -4,6 +4,7 @@ import ExpandButton from "./expand-button"
 import { clearAttachments, removeAttachment } from "../stores/attachments"
 import { createPastedPlaceholderRegex, pastedDisplayCounterRegex } from "./prompt-input/attachmentPlaceholders"
 import { preparePromptSubmission } from "./prompt-input/submitPrompt"
+import { focusConversationStream } from "./focus-conversation"
 import Kbd from "./kbd"
 import { getActiveInstance } from "../stores/instances"
 import { agents, executeCustomCommand } from "../stores/sessions"
@@ -325,11 +326,6 @@ export default function PromptInput(props: PromptInputProps) {
     ),
   )
 
-  const isCoarsePointer = () => {
-    if (typeof window === "undefined") return false
-    return Boolean(window.matchMedia?.("(pointer: coarse)")?.matches)
-  }
-
   const isTouchOnlyPointer = () => {
     if (typeof window === "undefined") return false
     return Boolean(window.matchMedia?.("(pointer: coarse)")?.matches && !window.matchMedia?.("(any-pointer: fine)")?.matches)
@@ -338,7 +334,7 @@ export default function PromptInput(props: PromptInputProps) {
   createEffect(() => {
     // Scope global "type-to-focus" behavior to the active, visible prompt only.
     if (typeof document === "undefined") return
-    if (isCoarsePointer()) return
+    if (isTouchOnlyPointer()) return
     if (props.isActive === false) return
     if (props.disabled) return
 
@@ -374,6 +370,8 @@ export default function PromptInput(props: PromptInputProps) {
       const isSpecialKey =
         e.key === "Tab" ||
         e.key === "Enter" ||
+        e.key === " " ||
+        e.key === "Spacebar" ||
         e.key.startsWith("Arrow") ||
         e.key === "Backspace" ||
         e.key === "Delete"
@@ -385,6 +383,13 @@ export default function PromptInput(props: PromptInputProps) {
       // In session cache mode inactive panes are display:none; avoid stealing focus.
       if (textarea.offsetParent === null) return
 
+      if (e.key === "!" && prompt().length === 0) {
+        e.preventDefault()
+        setMode("shell")
+        textarea.focus()
+        return
+      }
+
       if (e.key.length === 1) {
         textarea.focus()
       }
@@ -510,6 +515,10 @@ export default function PromptInput(props: PromptInputProps) {
       void refreshHistory()
     }
 
+    if (!isTouchOnlyPointer()) {
+      focusConversationStream(wrapperRef?.closest(".session-view"))
+    }
+
     try {
       if (isShellMode) {
         if (props.onRunShell) {
@@ -536,10 +545,10 @@ export default function PromptInput(props: PromptInputProps) {
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
-    } finally {
       if (!isTouchOnlyPointer()) {
         textareaRef?.focus()
       }
+      return
     }
   }
 

packages/ui/src/components/session/session-view.tsx

@@ -22,6 +22,7 @@ import { closeSessionPreview, getSessionPreview, showSessionChat } from "../../s
 import { SessionPreviewView } from "../session-preview-view"
 import { isSnapshotAutoFollowing } from "../virtual-follow-behavior"
 import { getSubmitBottomPinTargetCount, resolveSessionBottomPinIntent, shouldClearSessionBottomPinIntent, type SessionBottomPinIntent } from "./session-bottom-pin-intent"
+import { focusConversationStream } from "../focus-conversation"
 
 const log = getLogger("session")
 
@@ -37,6 +38,8 @@ interface SessionViewProps {
   escapeInDebounce: boolean
   isPhoneLayout?: boolean
   compactPromptLayout?: boolean
+  focusConversationOnActivate?: boolean
+  onConversationFocusHandled?: () => void
   showSidebarToggle?: boolean
   onSidebarToggle?: () => void
   forceCompactStatusLayout?: boolean
@@ -240,13 +243,13 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       () => props.isActive,
       (isActive) => {
         if (!isActive) {
+          if (props.focusConversationOnActivate) props.onConversationFocusHandled?.()
           clearConversationPlaybackForSession(props.instanceId, props.sessionId)
           return
         }
-        if (!isActive) return
 
         // On phones, focusing the prompt on session switch is disruptive (it raises the OSK).
-        if (props.isPhoneLayout) return
+        if (props.isPhoneLayout && !props.focusConversationOnActivate) return
 
         // Don't steal focus from other inputs (command palette, dialogs, selectors, etc.)
         if (typeof document === "undefined") return
@@ -264,6 +267,19 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         // Defer until the session pane is visible and the textarea is mounted.
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
+            if (!props.isActive) return
+            if (props.focusConversationOnActivate) {
+              const activeElement = document.activeElement
+              const focusIsUnclaimed =
+                !activeElement || activeElement === document.body || activeElement === document.documentElement
+              const modalIsOpen = Boolean(document.querySelector('[role="dialog"][aria-modal="true"]'))
+              if (focusIsUnclaimed && !modalIsOpen && focusConversationStream(rootRef)) {
+                props.onConversationFocusHandled?.()
+                return
+              }
+              props.onConversationFocusHandled?.()
+              if (!focusIsUnclaimed || modalIsOpen) return
+            }
             if (promptInputApi) {
               promptInputApi.focus()
               return

packages/ui/src/components/virtual-follow-list.tsx

@@ -692,6 +692,7 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
     }}>
       <div
         class="message-stream"
+        tabIndex={-1}
         ref={el => {
           setScrollElement(el)
           props.onScrollElementChange?.(el)