fix(mode): stabilize plan-mode model experience

packages/ui/tui/src/index.ts

@@ -751,6 +751,10 @@ class QuestionDialog implements Component, Focusable {
       lines.push(`${this.palette.accent('│')} ${clipped}${' '.repeat(Math.max(0, innerWidth - visibleWidth(clipped)))} ${this.palette.accent('│')}`)
     }
     for (const line of wrapTextWithAnsi(this.palette.bold(displayText(this.question.question)), innerWidth)) push(line)
+    if (this.question.detail !== undefined) {
+      push('')
+      for (const line of wrapTextWithAnsi(displayText(this.question.detail), innerWidth)) push(line)
+    }
     push('')
     if (this.mode === 'custom') {
       for (const line of this.input.render(innerWidth)) push(line)

packages/ui/tui/tests/tui.spec.ts

@@ -731,12 +731,13 @@ describe('TUI user-interaction dialogs', () => {
 
     const single = result.ctx.userInteraction.ask({
       questions: [{
-        id: 'mode', header: 'Mode', question: 'Choose a mode',
+        id: 'mode', header: 'Mode', question: 'Choose a mode', detail: 'This choice controls the next turn.',
         options: [{ label: 'Safe', description: 'Use checks' }, { label: 'Fast' }],
       }],
     })
     await tick()
     expect(result.terminal.output).toContain('Choose a mode')
+    expect(result.terminal.output).toContain('This choice controls the next turn.')
     expect(result.terminal.output).toContain('1/2')
     result.terminal.send('\x1b[B')
     result.terminal.send('\r')