bug(cli): 输入框换行时背景色渲染不连续

[yiliang114]

What happened? / 问题描述

在 Qwen Code 交互式 TUI 中，输入框内的文本发生换行时，输入框背景色显示不连续。

复现方式：

1. 启动 Qwen Code 交互式界面。
2. 在底部输入框输入一段较长文本，使其自动换行，或输入多行内容。
3. 观察输入框内容区域的背景色。

实际表现是：换行后输入框背景没有完整覆盖输入区域，部分区域仍显示为终端背景色，视觉上出现断裂。截图中红色箭头指向的问题区域。

What did you expect to happen? / 期望行为

输入框应该有连续、完整的背景色覆盖。无论输入内容是一行、多行，还是因为宽度不足发生软换行，整个输入框内容区域都应保持一致的背景色，不应只覆盖文字所在片段或在换行处出现空洞。

Client information / 客户端信息

Client Information

Warning: MCP server(s) failed to start: everything. Continuing with built-in tools and any servers that did connect. Re-run with QWEN_CODE_DEBUG=1 to see per-server reasons.
Qwen Code v0.18.4
Model: qwen3.7-max
Fast Model: not set
Auth: openai
Platform: darwin x64 (24.6.0)
Node.js: v22.20.0
Session: b0fb73ce-9135-44f5-9416-548f38f0931b
Git commit: c898e9f
LSP: disabled

Anything else we need to know? / 补充信息

本地简单看了一下，输入框由 InputPrompt 通过 BaseTextInput 渲染；当前内容区按 visual line 渲染，但没有给完整输入区域/每一行容器设置背景色。这可能导致换行后只有文本片段或部分行显示背景，而空白区域没有被背景覆盖。

[qwen-code-ci-bot]

Thanks for the detailed report and the preliminary code-level analysis.

The reproduction steps, screenshot, and pointer to InputPrompt / BaseTextInput make this straightforward to triage. Marking as a cosmetic (P3) UI rendering issue scoped to the interactive TUI input component; the scope/rendering and scope/components labels should help route it to the right area.

If anyone picks this up, the likely fix is to ensure each wrapped visual line's container (or the input-area box as a whole) is filled with the input background style, not just the text runs.

[qwen-code-ci-bot]

Triage

• Type: bug — visual rendering defect in the interactive TUI input box
• Labels: type/bug, category/ui, scope/rendering, scope/interactive, priority/P3
• Next: confirmed via code analysis — straightforward fix available

Root Cause

In packages/cli/src/ui/components/BaseTextInput.tsx, the input content area renders each visual line inside <Box key={idx} height={1}> with no backgroundColor. Neither defaultRenderLine nor InputPrompt's renderLineWithHighlighting applies background color to the rendered segments — only foreground color is set.

When text wraps (soft wrap from long input or explicit newlines), each line's <Box> only occupies the width of its text content. The remaining width in the bordered area shows the terminal's default background, not the input box's intended background. This creates the visual "断裂" (discontinuity) shown in the screenshot.

Other components in the codebase (e.g. ConversationMessages.tsx, DiffRenderer.tsx) correctly use backgroundColor on <Box> elements — the pattern exists but was not applied here.

Fix Direction

Add backgroundColor={theme.background.primary} to either:

1. The inner content container <Box flexGrow={1} flexDirection="column"> — covers the whole input area at once (simplest), or
2. Each per-line <Box key={idx} height={1}> — covers each line individually

Option 1 is the minimal change. The renderLine functions don't need modification since foreground-only text rendering is correct on top of a proper background.

Reproduction Note

Could not run the interactive TUI in CI (dependency install timeout), but the root cause is unambiguous from reading the rendering code. Manual verification on a dev build is recommended after the fix is applied.

中文说明

• 类型: bug — 交互式 TUI 输入框背景色渲染缺陷
• 标签: type/bug, category/ui, scope/rendering, scope/interactive, priority/P3
• 下一步: 通过代码分析已确认根因，修复方案明确

根因: BaseTextInput.tsx 中，每个可视行渲染在 <Box key={idx} height={1}> 中，未设置 backgroundColor。defaultRenderLine 和 renderLineWithHighlighting 也未给文本段设置背景色。文本换行后，每行 <Box> 仅覆盖文字宽度，剩余区域显示终端默认背景色，导致视觉断裂。

修复方向: 给内容容器 <Box flexGrow={1} flexDirection="column"> 添加 backgroundColor={theme.background.primary} 即可（最小改动）。

复现说明: CI 环境依赖安装超时，无法运行交互式 TUI 验证，但代码分析根因明确。建议修复后在本地 dev build 上手动验证。

— Qwen Code · qwen3.7-max

[lcheng321]

Opened #5568 to fix this.