Skip to content

auto-mode and auto-accept edits share the same indicator color with no visual distinction #4575

@pomelo-nwu

Description

@pomelo-nwu

auto-mode and auto-accept edits share the same indicator color with no visual distinction

What happened?

The footer indicator for auto-edit mode (auto-accept edits) and auto mode (auto mode (classifier-evaluated)) both use the exact same color — theme.status.warning (yellow). There is no visual way to distinguish which of the two modes is currently active based on color alone.

Additionally, the input prompt border styling is inconsistent between the two:

  • auto-edit: gets a warningDim border color and matching prefix
  • auto: falls through to the default styling (no special border or prefix color)

This means when quickly glancing at the CLI, users cannot tell whether they are in auto-edit (all edits auto-approved) vs auto (classifier-evaluated) mode — which have significantly different safety implications.

What did you expect to happen?

Each approval mode should have a visually distinct indicator so users can quickly identify the current mode:

  1. Footer indicator: auto-edit and auto should use different colors (e.g., one could use warning and the other a distinct color like info/blue, or a new semantic token).
  2. Input prompt border: auto mode should also have a distinct border style, consistent with its footer indicator color, rather than falling through to the default.

The four non-default modes should each be visually unique:

Mode Current Color Expected
plan green (success) ✅ distinct
auto-edit yellow (warning) should differ from auto
auto yellow (warning) should differ from auto-edit
yolo red (error) ✅ distinct

Client information

Client Information

Run qwen to enter the interactive CLI, then run the /about command.

$ qwen /about
# paste output here

Anything else we need to know?

The root cause is in AutoAcceptIndicator.tsx where both ApprovalMode.AUTO_EDIT and ApprovalMode.AUTO cases set textColor = theme.status.warning. The InputPrompt.tsx also only applies special border styling for AUTO_EDIT and YOLO, skipping AUTO entirely.


中文

auto-mode 和 auto-accept edits 的指示器颜色完全相同,无法区分

发生了什么?

auto-edit 模式(auto-accept edits)和 auto 模式(auto mode (classifier-evaluated))的底部状态栏指示器使用了完全相同的颜色 —— theme.status.warning(黄色)。仅凭颜色无法区分当前处于哪种模式。

此外,输入框边框样式也不一致:

  • auto-edit:有 warningDim 边框颜色和匹配的前缀颜色
  • auto:使用默认样式,没有特殊的边框或前缀颜色

这意味着用户快速瞥一眼 CLI 时,无法判断自己处于 auto-edit(所有编辑自动批准)还是 auto(分类器评估)模式——而这两者的安全含义差别很大。

期望的行为是什么?

每种审批模式都应有视觉上可区分的指示器,让用户能快速识别当前模式:

  1. 底部指示器auto-editauto 应使用不同颜色(例如一个用 warning,另一个用 info/蓝色,或新增一个语义 token)
  2. 输入框边框auto 模式也应有独特的边框样式,与其底部指示器颜色一致,而不是回退到默认样式

四个非默认模式应该各自视觉唯一:

模式 当前颜色 期望
plan 绿色 (success) ✅ 可区分
auto-edit 黄色 (warning) 应与 auto 不同
auto 黄色 (warning) 应与 auto-edit 不同
yolo 红色 (error) ✅ 可区分

其他需要说明的

根本原因在 AutoAcceptIndicator.tsx 中,ApprovalMode.AUTO_EDITApprovalMode.AUTO 两个 case 都设置了 textColor = theme.status.warningInputPrompt.tsx 中也只对 AUTO_EDITYOLO 应用了特殊边框样式,完全跳过了 AUTO

Metadata

Metadata

Assignees

No one assigned

    Labels

    category/uiUser interface and displayscope/componentsUI components and widgetsscope/themesTheme system and customizationstatus/needs-triageIssue needs to be triaged and labeledtype/bugSomething isn't working as expected

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions