fix(tui): preserve burst form input

packages/tui/src/mini/footer.form.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @opentui/solid */
-import { decodePasteBytes, stripAnsiSequences, type TextareaRenderable } from "@opentui/core"
-import { useKeyboard, usePaste } from "@opentui/solid"
+import type { TextareaRenderable } from "@opentui/core"
+import { useKeyboard } from "@opentui/solid"
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import {
   createFormBodyState,
@@ -71,6 +71,7 @@ export function RunFormBody(props: {
     return typeof value === "string" ? value : undefined
   })
   let area: TextareaRenderable | undefined
+  let editingReady = false
 
   createEffect(() => {
     setState((previous) => formSync(previous, props.request))
@@ -93,6 +94,7 @@ export function RunFormBody(props: {
       if (!area || area.isDestroyed || !state().editing) return
       area.focus()
       area.cursorOffset = area.plainText.length
+      editingReady = true
     })
   })
 
@@ -149,14 +151,6 @@ export function RunFormBody(props: {
     if (formSingle(props.request)) submit(next)
   }
 
-  usePaste((event) => {
-    const field = current()
-    if (!field || textual() || !custom() || confirm()) return
-    event.preventDefault()
-    const next = formPick(formSetSelected(state(), rows().length), props.request)
-    setState(formSetDraft(next, field, formInput(next, field) + stripAnsiSequences(decodePasteBytes(event.bytes))))
-  })
-
   const moveField = (direction: -1 | 1) => {
     const next = (state().field + direction + props.request.fields.length + 1) % (props.request.fields.length + 1)
     if (direction < 0 || confirm()) {
@@ -217,6 +211,22 @@ export function RunFormBody(props: {
       return
     }
     if (unsupported()) return
+    const character =
+      !event.ctrl &&
+      !event.meta &&
+      !event.option &&
+      !event.super &&
+      !event.hyper &&
+      /^[^\p{C}\p{Zl}\p{Zp}]$/u.test(event.sequence)
+        ? event.sequence
+        : undefined
+    if (custom() && state().selected === rows().length && character && !editingReady) {
+      const next = state().editing ? state() : formPick(state(), props.request)
+      if (!state().editing) editingReady = false
+      setState(formSetDraft(next, current(), formInput(next, current()) + character))
+      event.preventDefault()
+      return
+    }
     if (state().editing) return
     if (
       event.name === "tab" ||

packages/tui/src/routes/session/form.tsx

@@ -1,7 +1,7 @@
 import { createStore } from "solid-js/store"
 import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js"
-import { usePaste, useRenderer, useTerminalDimensions } from "@opentui/solid"
-import { decodePasteBytes, stripAnsiSequences, type ScrollBoxRenderable, type TextareaRenderable } from "@opentui/core"
+import { useRenderer, useTerminalDimensions } from "@opentui/solid"
+import type { ScrollBoxRenderable, TextareaRenderable } from "@opentui/core"
 import open from "open"
 import { useTheme, useThemes } from "../../context/theme"
 import type { FormField, FormValue } from "@opencode-ai/client"
@@ -67,6 +67,7 @@ export function FormPrompt(props: { form: FormWithLocation }) {
   })
 
   let textarea: TextareaRenderable | undefined
+  let editingReady = false
   let review: ScrollBoxRenderable | undefined
 
   const message = createMemo(() => {
@@ -175,6 +176,23 @@ export function FormPrompt(props: { form: FormWithLocation }) {
     return answer === value
   })
 
+  onCleanup(
+    keymap.intercept("key", ({ event, consume }) => {
+      if (keymap.mode.current() !== FORM_MODE) return
+      if (textual() || !other() || (store.editing && editingReady)) return
+      if (event.ctrl || event.meta || event.option || event.super || event.hyper) return
+      if (!/^[^\p{C}\p{Zl}\p{Zp}]$/u.test(event.sequence)) return
+      const current = answerField()
+      if (!current) return
+      setStore("custom", { ...store.custom, [current.key]: input() + event.sequence })
+      if (!store.editing) {
+        editingReady = false
+        setStore("editing", true)
+      }
+      consume()
+    }),
+  )
+
   function answer(key: string, value: FormValue | undefined) {
     setStore("answers", { ...store.answers, [key]: value })
     setStore("error", "")
@@ -265,19 +283,6 @@ export function FormPrompt(props: { form: FormWithLocation }) {
     pick(row.value)
   }
 
-  usePaste((event) => {
-    if (keymap.mode.current() !== FORM_MODE) return
-    const current = answerField()
-    if (!current || textual() || !custom() || confirm()) return
-    event.preventDefault()
-    setStore("selected", rows().length)
-    setStore("custom", {
-      ...store.custom,
-      [current.key]: input() + stripAnsiSequences(decodePasteBytes(event.bytes)),
-    })
-    setStore("editing", true)
-  })
-
   function commitInput(text: string) {
     const current = answerField()
     if (!current) return false
@@ -883,8 +888,10 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                             textarea = val
                             val.traits = { status: "ANSWER" }
                             queueMicrotask(() => {
+                              val.setText(input())
                               val.focus()
                               val.gotoLineEnd()
+                              editingReady = true
                             })
                           }}
                           initialValue={input()}

packages/tui/test/cli/tui/form.test.tsx

@@ -15,7 +15,7 @@ import { TestTuiContexts } from "../../fixture/tui-environment"
 import { createTuiResolvedConfig } from "../../fixture/tui-runtime"
 import { createApi, createEventStream, createFetch } from "../../fixture/tui-client"
 
-async function mountForm(root: string, width = 80, fields?: FormWithLocation["fields"]) {
+async function mountForm(root: string, width = 80, input?: FormWithLocation) {
   const state = path.join(root, "state")
   await mkdir(state, { recursive: true })
 
@@ -33,11 +33,11 @@ async function mountForm(root: string, width = 80, fields?: FormWithLocation["fi
     events,
   )
   const config = createTuiResolvedConfig()
-  const form = {
+  const form = input ?? ({
     id: "frm_test",
     sessionID: "ses_test",
     title: "Authorization required",
-    fields: fields ?? [
+    fields: [
       {
         key: "authorization",
         type: "external",
@@ -45,7 +45,7 @@ async function mountForm(root: string, width = 80, fields?: FormWithLocation["fi
         title: "Authorize access",
       },
     ],
-  } satisfies FormWithLocation
+  } satisfies FormWithLocation)
   const { FormPrompt } = await import("../../../src/routes/session/form")
 
   function Harness() {
@@ -84,7 +84,7 @@ async function mountForm(root: string, width = 80, fields?: FormWithLocation["fi
 
   const app = await testRender(() => <Harness />, { width, height: 20, kittyKeyboard: true })
   app.renderer.start()
-  await app.waitForFrame((frame) => frame.includes("Authorization required"))
+  await app.waitForFrame((frame) => frame.includes(form.title))
   return { app, copied, replies }
 }
 
@@ -127,55 +127,30 @@ test("includes external acknowledgements in progress", async () => {
   }
 })
 
-test("pasting on a custom choice opens its editor without submitting", async () => {
+test("typing starts a highlighted custom answer without losing the first character", async () => {
   await using tmp = await tmpdir()
-  const prompt = await mountForm(tmp.path, 80, [
-    {
-      key: "target",
-      type: "string",
-      options: [{ value: "staging", label: "Staging" }],
-      custom: true,
-    },
-  ])
+  const prompt = await mountForm(tmp.path, 80, {
+    id: "frm_test",
+    sessionID: "ses_test",
+    title: "Choose a target",
+    fields: [
+      {
+        key: "target",
+        type: "string",
+        options: [{ value: "production", label: "Production" }],
+        custom: true,
+      },
+    ],
+  })
   try {
-    await prompt.app.mockInput.pasteBracketedText("production\nwest")
-    await prompt.app.waitFor(() => prompt.app.renderer.currentFocusedEditor?.plainText === "production\nwest")
-
-    expect(prompt.app.captureCharFrame()).toContain("Type your own answer")
-    expect(prompt.replies).toEqual([])
-  } finally {
-    prompt.app.renderer.destroy()
-  }
-})
-
-test("text fields retain default paste behavior", async () => {
-  await using tmp = await tmpdir()
-  const prompt = await mountForm(tmp.path, 80, [{ key: "notes", type: "string" }])
-  try {
-    await prompt.app.mockInput.pasteBracketedText("normal paste")
-
-    expect(prompt.app.renderer.currentFocusedEditor?.plainText).toBe("normal paste")
-    expect(prompt.replies).toEqual([])
-  } finally {
-    prompt.app.renderer.destroy()
-  }
-})
-
-test("pasting on a choice without custom answers does not open an editor", async () => {
-  await using tmp = await tmpdir()
-  const prompt = await mountForm(tmp.path, 80, [
-    {
-      key: "target",
-      type: "string",
-      options: [{ value: "staging", label: "Staging" }],
-    },
-  ])
-  try {
-    await prompt.app.mockInput.pasteBracketedText("production")
-
+    prompt.app.mockInput.pressKey("x")
+    await prompt.app.renderOnce()
     expect(prompt.app.renderer.currentFocusedEditor).toBeNull()
-    expect(prompt.app.captureCharFrame()).not.toContain("production")
-    expect(prompt.replies).toEqual([])
+
+    prompt.app.mockInput.pressKey("j")
+    await prompt.app.mockInput.typeText("123")
+    await prompt.app.waitFor(() => prompt.app.renderer.currentFocusedEditor?.plainText === "123")
+    expect(prompt.app.renderer.currentFocusedEditor?.plainText).toBe("123")
   } finally {
     prompt.app.renderer.destroy()
   }

packages/tui/test/mini/footer.view.test.tsx

@@ -277,36 +277,32 @@ test("direct footer preserves a partial multi-field form draft across permission
   }
 })
 
-test("direct footer paste opens a custom choice editor without submitting", async () => {
-  const replies: unknown[] = []
-  const app = await renderFooter({
-    height: 12,
-    view: {
-      type: "form",
-      request: {
-        id: "frm_custom_paste",
-        sessionID: "ses_child",
-        title: "Deployment target",
-        fields: [
-          {
-            key: "target",
-            type: "string",
-            options: [{ value: "staging", label: "Staging" }],
-            custom: true,
-          },
-        ],
+test("direct footer typing starts a highlighted custom answer without losing the first character", async () => {
+  const request: FormInfo = {
+    id: "frm_custom",
+    sessionID: "ses_child",
+    title: "Choose a target",
+    fields: [
+      {
+        key: "target",
+        type: "string",
+        options: [{ value: "production", label: "Production" }],
+        custom: true,
       },
-    },
-    onFormReply: (reply) => replies.push(reply),
-  })
+    ],
+  }
+  const app = await renderFooter({ height: 12, view: { type: "form", request } })
 
   try {
     await app.renderOnce()
-    await app.mockInput.pasteBracketedText("production\nwest")
+    app.mockInput.pressKey("x")
     await app.renderOnce()
+    expect(app.renderer.currentFocusedEditor).toBeNull()
 
-    expect(app.renderer.currentFocusedEditor?.plainText).toBe("production\nwest")
-    expect(replies).toEqual([])
+    app.mockInput.pressKey("j")
+    await app.mockInput.typeText("hello")
+    await app.waitFor(() => app.renderer.currentFocusedEditor?.plainText === "hello")
+    expect(app.renderer.currentFocusedEditor?.plainText).toBe("hello")
   } finally {
     app.cleanup()
   }