fix(cli): render slash suggestion descriptions on a single truncated line - #5236
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR updates the CLI completion menu rendering so suggestion descriptions always occupy a single logical line (whitespace-collapsed) and are truncated with an ellipsis to prevent the menu from expanding vertically due to multi-line frontmatter descriptions.
Changes:
- Added
normalizeDescription()to collapse multi-line/whitespace-heavy descriptions into a single line. - Switched description rendering from
wrap="wrap"towrap="truncate-end"and applied normalization. - Updated and expanded tests to validate truncation and newline-collapsing behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/cli/src/ui/components/SuggestionsDisplay.tsx | Normalizes suggestion descriptions and truncates them at the column width to keep each suggestion to one row. |
| packages/cli/src/ui/components/SuggestionsDisplay.test.tsx | Updates expectations for truncation and adds coverage for newline/whitespace normalization. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // The description is cut off with an ellipsis and the full text is gone. | ||
| expect(output).toContain('…'); | ||
| expect(output).not.toContain('entire terminal window'); | ||
| // A single suggestion with a long description must not blow up vertically. | ||
| expect(output.split('\n').length).toBeLessThanOrEqual(2); |
|
Thanks for the PR, @yiliang114! Template looks good ✓ On direction: this is a clear UX bug — multi-line skill descriptions blowing up the completion menu is a real usability problem. The fix aligns with how Claude Code handles its slash-command menu (CHANGELOG references "Clearer descriptions for built-in commands and skills in the / menu" and "Improved color contrast for skill tags in the slash-command menu"). Solidly within scope. On approach: minimal and focused — one helper function ( Moving on to code review. 🔍 中文说明感谢贡献,@yiliang114! 模板完整 ✓ 方向:这是一个明确的 UX bug —— 多行 skill 描述撑爆补全菜单,确实影响可用性。修复方式与 Claude Code 的斜杠命令菜单行为一致(Claude Code CHANGELOG 中有 "Clearer descriptions for built-in commands and skills in the / menu" 和 "Improved color contrast for skill tags in the slash-command menu" 的记录)。完全在范围内。 方案:极简且聚焦——一个辅助函数 ( 进入代码审查 🔍 — Qwen Code · qwen3.7-max |
Code ReviewThe diff is clean and minimal. Two changes in
Tests updated appropriately: the old "wraps long descriptions" test was flipped to assert truncation, a new multi-line collapse test was added, and a unit test covers No correctness bugs, no security issues, no convention violations. The Real-Scenario TestingCreated a test skill ( Before (installed qwen v0.18.1)
After (this PR — built from
|
|
This is a textbook minimal fix. Three lines of production code ( The before/after is unambiguous: Nothing to flag. Shipping. ✅ 中文说明这是一个教科书级的最小修复。三行生产代码( 修复前后对比明确: 没有需要标记的问题。可以合入。✅ — Qwen Code · qwen3.7-max |
qwen-code-ci-bot
left a comment
There was a problem hiding this comment.
LGTM, looks ready to ship. ✅
qwen-code-ci-bot
left a comment
There was a problem hiding this comment.
No review findings — the change is clean, minimal, and well-tested. Downgraded from Approve to Comment: CI failing (Test, Lint, E2E checks). — qwen3.7-max via Qwen Code /review
Code Coverage Summary
CLI Package - Full Text ReportCore Package - Full Text ReportFor detailed HTML reports, please see the 'coverage-reports-22.x-ubuntu-latest' artifact from the main CI run. |
qwen-code-ci-bot
left a comment
There was a problem hiding this comment.
No review findings. LGTM! ✅ Downgraded from Approve to Comment: CI still running. — qwen3.7-max via Qwen Code /review
ytahdn
left a comment
There was a problem hiding this comment.
Clean, focused fix. The normalizeDescription + wrap="truncate-end" combination correctly bounds the completion menu height. Tests cover both truncation and multi-line collapse paths. Build and typecheck pass.
— qwen3.7-max via Qwen Code /review
What this PR does
Command and skill suggestion descriptions in the completion menu are now collapsed to a single logical line (all whitespace runs, including frontmatter newlines, become single spaces) and truncated to the description column width with an ellipsis, instead of being wrapped verbatim across many rows.
Why it's needed
Skill descriptions sourced from
SKILL.mdfrontmatter are often long and multi-line. Rendering them withwrap="wrap"preserved every newline and imposed no height limit, so a single suggestion could fill the entire terminal and the menu looked broken. Capping the suggestion count alone did not bound the menu height. This matches the bounded, single-line behavior of Claude Code's completion menu.Reviewer Test Plan
How to verify
SKILL.mddescription installed./da(or any prefix matching such skills).…; the menu shows the normal 8 rows plus the scroll indicator instead of flooding the screen.Evidence (Before & After)
Both shots use the same terminal size (120 cols) and trigger the menu with
/da.Before (
wrap="wrap"): a single multi-lineSKILL.mddescription (dataworks) wraps across ~10 rows and consumes the entire screen — only 3–4 suggestions are even partially visible and the menu looks broken.After (this PR): every suggestion occupies exactly one row, long descriptions are cut with
…, and the menu stays bounded at the normal 8 rows plus the scroll indicator.Tested on
Risk & Scope
SuggestionsDisplay.tsx).←/→) behavior is unchanged.Linked Issues
Closes #5235
中文说明
这个 PR 做了什么
补全菜单里命令和 skill 的描述,现在会折叠成单行(所有连续空白——包括 frontmatter 的换行——都变成单个空格)并按描述列宽截断加省略号,而不再把多行原文整段换行铺开。
为什么需要
来自
SKILL.mdfrontmatter 的 skill 描述往往很长且多行。用wrap="wrap"渲染会保留每个换行且不限制高度,导致单条建议就能占满整个终端,菜单看起来像坏了。仅限制建议条数并不能限制菜单高度。本改动与 Claude Code 补全菜单"单行有界"的行为一致。如何验证
SKILL.md描述很长且多行的 skill。/da(或任意能匹配到这类 skill 的前缀)。…截断;菜单显示正常的 8 行加滚动指示符,不再铺满屏幕。风险与范围
SuggestionsDisplay.tsx)。←/→)行为未变。