qwen-code TUI 间距与密度优化 PR1减少终端空白行的设计实现与行数测量【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code本指南讲解 qwen-code 终端 UITUI第一轮间距与密度spacing and density优化PR1的设计决策、落地方式与验证方法。它解决的是真实使用中的痛点简单问答、文件列表、工具输出、报错信息、diff 与长流式输出之间夹杂的多余空行迫使你在终端里反复滚动空白而非浏览内容。读完本文你将掌握该轮优化改了什么、为什么只改间距不动结构、四条间距标准如何在源码中落地以及如何在 100/80 列固定宽度下用快照与 tmux 证据复核行数收益。为什么需要一次只改间距的专项优化在常见的会话里当前 TUI 会在三类位置额外消耗行数助手输出之前的空白间隔状态/工具块之间的空白间隔展开后的工具组内部的空白间隔。这些位置本身不是问题——问题在于累积效果。以简单问答、文件列表、工具输出、错误状态、diff 和长流式输出为代表的场景中用户需要翻越空白空间而不是直接阅读内容可扫描性scannability被明显削弱。PR1 是 qwen-code 议题 #4588issue 4588的第一轮聚焦推进。它刻意只处理间距与密度从而让评审可以在改动前后直接比较行数占用而不用同时评审思考轨迹可见性、工具边框、SubAgent 布局、品牌展示或主题色变化等其他维度。换句话说这是一次变量隔离的优化把间距单独拎出来改、单独拿出来量。实现思路保持结构只动空白实现保持既有信息结构和渲染表面不变改动集中在三个点1. 历史条目间距在 HistoryItemDisplay 统一收敛历史条目的间距逻辑集中在HistoryItemDisplay组件上。源码中的getHistoryItemMarginTop函数HistoryItemDisplay.tsx按HistoryItem.type决定每个条目渲染时的marginTopgemini助手回复与gemini_thought思考块保留1行的上边距gemini_content、gemini_thought_content连续性内容、info、success、warning、error、retry_countdown、memory_saved、tool_group、tool_use_summary、compression、summary、user、user_prompt_submit_blocked、stop_hook_loop、goal_status、vision_notice等回合内in-turn后续块全部返回0即不再额外插入前置空行。对应到用户可见行为用户提问user与独立命令视图仍然以回合分隔符开头。UserMessage自身带marginTop{1}见 ConversationMessages.tsx保证新的一轮有清晰的视觉起点助手连续性输出、工具组、状态消息、工具摘要以及与回合相关的后续输出不再附加额外的前置空行。测试侧有对应的断言佐证在 HistoryItemDisplay.test.tsx 中助手回复gemini条目仍断言以换行开头output.startsWith(\n)为 true而在 HistoryItemDisplay.test.tsx 中tool_use_summary工具摘要断言不以换行开头output.startsWith(\n)为 false。这正是独立用户回合保留一个分隔符、回合内后续块不再叠加第二个分隔符的代码级验证。2. 展开工具组保留边框去掉工具条目之间的空行展开的工具组保持现有的边框与状态/标题结构不变但不再在相邻工具条目之间插入空白行。实现位置在ToolGroupMessage的展开渲染分支外层容器使用gap{0}每个工具条目以Box key{tool.callId} flexDirectioncolumn minHeight{1}紧挨排列见 ToolGroupMessage.tsx工具条目之间的行距完全由工具内容自身的高度决定而不是靠空白行撑开。同样的gap{0}也用于折叠工具的摘要展示CompactToolGroupDisplay见 CompactToolGroupDisplay.tsx保证折叠与展开两条路径的密度口径一致。3. 工具结果紧贴工具标题/状态行工具结果直接渲染在工具标题/状态行的正下方。在 ToolMessage.tsx 中结果渲染分支与头部行之间不再有空行ToolMessage的最外层容器是paddingY{0}结果块Markdown 字符串、diff、ANSI 输出、todo/findings/plan、subagent 摘要、图片等直接以paddingLeft{STATUS_INDICATOR_WIDTH}的缩进块跟在头部之后。这一改动不改变输出内容本身文本、diff、ANSI 内容逐字保留截断行为availableTerminalHeight、MaxSizedBox、shell 输出行数上限ui.shellOutputMaxLines等照常生效shell 焦点行为(ctrlf to focus)提示与ShellInputPrompt不受影响确认提示ToolConfirmationMessage仍在确认分支内正常渲染紧凑模式compact mode行为。也就是说这次优化对密度的追求是有边界的它只移除为间隔而存在的空白行绝不挤压内容本身。间距标准Spacing StandardPR1 确立的四条间距规则可以浓缩为一张对照表场景规则独立的用户回合保留一个视觉分隔符助手输出与回合内后续块不叠加第二个分隔符工具标题与工具结果内容紧邻adjacent展开的多工具组相邻工具条目之间不插入空行另有一条刻意保持不变的规则复杂的 Markdown 块表格、代码块、数学块保留其既有的内部布局。Markdown 空行行为有意不改——渲染器本就把连续空行折叠为一个间隔同时保留表格、代码块、数学块等复杂块。预期效果与量化测量在同一终端宽度、同一渲染内容的条件下目标场景应当消耗更少的可见行数简单问答至少减少 1 个可见行展开的工具输出每个此前带有标题/结果空行间隔的渲染工具结果至少减少 1 行多工具组每对相邻工具条目之间减少 1 行项目检查、diff、文件列表、报错、长流式输出等场景除非终端换行导致不可避免的变化否则不得增加行数回归红线。100 列基准测量的四组数据自动化间距断言与终端证据统一采用100 列夹具场景宽度基准行数PR1 行数增量证据简单助手回复10021-1移除历史前置间隔单行结果的工具标题10032-1标题与结果紧邻三个工具展开组含渲染结果1001611-5每个工具结果移除 1 个标题/结果间隔相邻工具之间移除 1 个条目间隔完整代表性夹具1002619-7相同渲染内容由 tmux 捕获其中三工具展开组的 -5 行分解为3 个工具结果各移除 1 行标题/结果间隔-33 个工具之间有 2 处相邻条目间隔-2合计 -5。快照差异还覆盖了既有的80 列夹具以确认当前组件测试框架中行数增量一致。相关快照文件见 HistoryItemDisplay.test.tsx.snap。如何复核与复现仓库中与本轮改动直接相关的验证入口组件测试packages/cli/src/ui/components/HistoryItemDisplay.test.tsx中的renders assistant replies with a leading spacer row与renders tool summaries without a leading spacer row两个用例分别锁定了保留用户回合分隔符与工具摘要无前置空行两条规则快照基线packages/cli/src/ui/components/__snapshots__/HistoryItemDisplay.test.tsx.snap覆盖 80 列与 100 列的渲染结果用于对比行数增量tmux 终端证据完整代表性夹具26 → 19 行通过 tmux 捕获同一渲染内容的实际终端帧避免组件测试与实际终端渲染之间的偏差。明确不做的事Out of ScopePR1 是间距专项以下改动被明确排除在范围之外留待后续 PR 单独评审隐藏思考轨迹thinking traces移除工具边框tool borders重新设计 SubAgent 输出布局改变启动品牌展示或横幅banner改变主题颜色新增每回合助手耗时显示改变表格内联代码高亮。这份范围清单与为什么只改间距一节相互印证任何可能干扰行数对比的变量都被推迟从而保证 PR1 的测量结果只反映间距与密度的收益。小结PR1 是 qwen-code 在 TUI 密度上迈出的第一步通过HistoryItemDisplay的getHistoryItemMarginTop收敛历史条目间距、在ToolGroupMessage展开路径以gap{0}消除工具条目间空行、在ToolMessage以paddingY{0}让工具结果紧贴标题行三处改动共同落实四条间距标准。100 列基准下简单问答 -1 行、工具标题 单行结果 -1 行、三工具展开组 -5 行、完整代表性夹具 -7 行且项目检查、diff、文件列表、报错与长流式输出不增行。后续维度思考可见性、工具边框、SubAgent 布局、品牌、主题色、回合耗时、表格内联代码高亮将作为独立主题另行处理。【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
qwen-code TUI 间距与密度优化 PR1减少终端空白行的设计实现与行数测量【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code本指南讲解 qwen-code 终端 UITUI第一轮间距与密度spacing and density优化PR1的设计决策、落地方式与验证方法。它解决的是真实使用中的痛点简单问答、文件列表、工具输出、报错信息、diff 与长流式输出之间夹杂的多余空行迫使你在终端里反复滚动空白而非浏览内容。读完本文你将掌握该轮优化改了什么、为什么只改间距不动结构、四条间距标准如何在源码中落地以及如何在 100/80 列固定宽度下用快照与 tmux 证据复核行数收益。为什么需要一次只改间距的专项优化在常见的会话里当前 TUI 会在三类位置额外消耗行数助手输出之前的空白间隔状态/工具块之间的空白间隔展开后的工具组内部的空白间隔。这些位置本身不是问题——问题在于累积效果。以简单问答、文件列表、工具输出、错误状态、diff 和长流式输出为代表的场景中用户需要翻越空白空间而不是直接阅读内容可扫描性scannability被明显削弱。PR1 是 qwen-code 议题 #4588issue 4588的第一轮聚焦推进。它刻意只处理间距与密度从而让评审可以在改动前后直接比较行数占用而不用同时评审思考轨迹可见性、工具边框、SubAgent 布局、品牌展示或主题色变化等其他维度。换句话说这是一次变量隔离的优化把间距单独拎出来改、单独拿出来量。实现思路保持结构只动空白实现保持既有信息结构和渲染表面不变改动集中在三个点1. 历史条目间距在 HistoryItemDisplay 统一收敛历史条目的间距逻辑集中在HistoryItemDisplay组件上。源码中的getHistoryItemMarginTop函数HistoryItemDisplay.tsx按HistoryItem.type决定每个条目渲染时的marginTopgemini助手回复与gemini_thought思考块保留1行的上边距gemini_content、gemini_thought_content连续性内容、info、success、warning、error、retry_countdown、memory_saved、tool_group、tool_use_summary、compression、summary、user、user_prompt_submit_blocked、stop_hook_loop、goal_status、vision_notice等回合内in-turn后续块全部返回0即不再额外插入前置空行。对应到用户可见行为用户提问user与独立命令视图仍然以回合分隔符开头。UserMessage自身带marginTop{1}见 ConversationMessages.tsx保证新的一轮有清晰的视觉起点助手连续性输出、工具组、状态消息、工具摘要以及与回合相关的后续输出不再附加额外的前置空行。测试侧有对应的断言佐证在 HistoryItemDisplay.test.tsx 中助手回复gemini条目仍断言以换行开头output.startsWith(\n)为 true而在 HistoryItemDisplay.test.tsx 中tool_use_summary工具摘要断言不以换行开头output.startsWith(\n)为 false。这正是独立用户回合保留一个分隔符、回合内后续块不再叠加第二个分隔符的代码级验证。2. 展开工具组保留边框去掉工具条目之间的空行展开的工具组保持现有的边框与状态/标题结构不变但不再在相邻工具条目之间插入空白行。实现位置在ToolGroupMessage的展开渲染分支外层容器使用gap{0}每个工具条目以Box key{tool.callId} flexDirectioncolumn minHeight{1}紧挨排列见 ToolGroupMessage.tsx工具条目之间的行距完全由工具内容自身的高度决定而不是靠空白行撑开。同样的gap{0}也用于折叠工具的摘要展示CompactToolGroupDisplay见 CompactToolGroupDisplay.tsx保证折叠与展开两条路径的密度口径一致。3. 工具结果紧贴工具标题/状态行工具结果直接渲染在工具标题/状态行的正下方。在 ToolMessage.tsx 中结果渲染分支与头部行之间不再有空行ToolMessage的最外层容器是paddingY{0}结果块Markdown 字符串、diff、ANSI 输出、todo/findings/plan、subagent 摘要、图片等直接以paddingLeft{STATUS_INDICATOR_WIDTH}的缩进块跟在头部之后。这一改动不改变输出内容本身文本、diff、ANSI 内容逐字保留截断行为availableTerminalHeight、MaxSizedBox、shell 输出行数上限ui.shellOutputMaxLines等照常生效shell 焦点行为(ctrlf to focus)提示与ShellInputPrompt不受影响确认提示ToolConfirmationMessage仍在确认分支内正常渲染紧凑模式compact mode行为。也就是说这次优化对密度的追求是有边界的它只移除为间隔而存在的空白行绝不挤压内容本身。间距标准Spacing StandardPR1 确立的四条间距规则可以浓缩为一张对照表场景规则独立的用户回合保留一个视觉分隔符助手输出与回合内后续块不叠加第二个分隔符工具标题与工具结果内容紧邻adjacent展开的多工具组相邻工具条目之间不插入空行另有一条刻意保持不变的规则复杂的 Markdown 块表格、代码块、数学块保留其既有的内部布局。Markdown 空行行为有意不改——渲染器本就把连续空行折叠为一个间隔同时保留表格、代码块、数学块等复杂块。预期效果与量化测量在同一终端宽度、同一渲染内容的条件下目标场景应当消耗更少的可见行数简单问答至少减少 1 个可见行展开的工具输出每个此前带有标题/结果空行间隔的渲染工具结果至少减少 1 行多工具组每对相邻工具条目之间减少 1 行项目检查、diff、文件列表、报错、长流式输出等场景除非终端换行导致不可避免的变化否则不得增加行数回归红线。100 列基准测量的四组数据自动化间距断言与终端证据统一采用100 列夹具场景宽度基准行数PR1 行数增量证据简单助手回复10021-1移除历史前置间隔单行结果的工具标题10032-1标题与结果紧邻三个工具展开组含渲染结果1001611-5每个工具结果移除 1 个标题/结果间隔相邻工具之间移除 1 个条目间隔完整代表性夹具1002619-7相同渲染内容由 tmux 捕获其中三工具展开组的 -5 行分解为3 个工具结果各移除 1 行标题/结果间隔-33 个工具之间有 2 处相邻条目间隔-2合计 -5。快照差异还覆盖了既有的80 列夹具以确认当前组件测试框架中行数增量一致。相关快照文件见 HistoryItemDisplay.test.tsx.snap。如何复核与复现仓库中与本轮改动直接相关的验证入口组件测试packages/cli/src/ui/components/HistoryItemDisplay.test.tsx中的renders assistant replies with a leading spacer row与renders tool summaries without a leading spacer row两个用例分别锁定了保留用户回合分隔符与工具摘要无前置空行两条规则快照基线packages/cli/src/ui/components/__snapshots__/HistoryItemDisplay.test.tsx.snap覆盖 80 列与 100 列的渲染结果用于对比行数增量tmux 终端证据完整代表性夹具26 → 19 行通过 tmux 捕获同一渲染内容的实际终端帧避免组件测试与实际终端渲染之间的偏差。明确不做的事Out of ScopePR1 是间距专项以下改动被明确排除在范围之外留待后续 PR 单独评审隐藏思考轨迹thinking traces移除工具边框tool borders重新设计 SubAgent 输出布局改变启动品牌展示或横幅banner改变主题颜色新增每回合助手耗时显示改变表格内联代码高亮。这份范围清单与为什么只改间距一节相互印证任何可能干扰行数对比的变量都被推迟从而保证 PR1 的测量结果只反映间距与密度的收益。小结PR1 是 qwen-code 在 TUI 密度上迈出的第一步通过HistoryItemDisplay的getHistoryItemMarginTop收敛历史条目间距、在ToolGroupMessage展开路径以gap{0}消除工具条目间空行、在ToolMessage以paddingY{0}让工具结果紧贴标题行三处改动共同落实四条间距标准。100 列基准下简单问答 -1 行、工具标题 单行结果 -1 行、三工具展开组 -5 行、完整代表性夹具 -7 行且项目检查、diff、文件列表、报错与长流式输出不增行。后续维度思考可见性、工具边框、SubAgent 布局、品牌、主题色、回合耗时、表格内联代码高亮将作为独立主题另行处理。【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
