Skip to content

feat(shell): visual context progress bar with color coding#1972

Open
xiaoye5200 wants to merge 8 commits intoMoonshotAI:mainfrom
xiaoye5200:feat/progress-bar-context-status
Open

feat(shell): visual context progress bar with color coding#1972
xiaoye5200 wants to merge 8 commits intoMoonshotAI:mainfrom
xiaoye5200:feat/progress-bar-context-status

Conversation

@xiaoye5200
Copy link
Copy Markdown

@xiaoye5200 xiaoye5200 commented Apr 21, 2026

Related Issue

N/A (new feature, no prior issue)

Description

Replace the plain-text context: 0.0% status bar indicator with a color-coded Unicode block progress bar, matching the visual style of the claude-hud plugin.

Changes

src/kimi_cli/soul/__init__.py

  • format_context_status now renders Context █░░░░░░░░░ 4% instead of context: 4.0%
  • Uses math.ceil so any non-zero usage always shows at least 1 filled block

src/kimi_cli/ui/theme.py

  • Added context_ok / context_warn / context_critical color fields to ToolbarColors (bright green / amber / red, with dark/light theme variants)
  • Added context_dim_ok / context_dim_warn / context_dim_critical for the empty block color (same hue, darker shade)

src/kimi_cli/ui/shell/prompt.py

  • _render_right_span now returns list[tuple[str, str]] (FormattedText fragments) so each span can carry its own color
  • Filled blocks , empty blocks , and percentage text each get independent color spans

src/kimi_cli/ui/shell/visualize/_blocks.py

  • Replaced self.text.plain = format_context_status(...) with styled Text.append() calls for Rich live-view rendering

Color thresholds (same as claude-hud)

Usage Filled Empty
< 70% Green Dim green
70–85% Yellow Dim yellow
≥ 85% Red Dim red

Empty blocks use a dimmed variant of the same hue, matching claude-hud's behavior of applying DIM after setting the color.

Example output

image
Context █░░░░░░░░░  4% (11k/262k)   ← green
Context ███████░░░ 72% (189k/262k)  ← yellow
Context █████████░ 92% (241k/262k)  ← red

Checklist

  • I have read the CONTRIBUTING document.
  • I have linked the related issue, if any.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have run make gen-changelog to update the changelog.
  • I have run make gen-docs to update the user documentation.

Open in Devin Review

unknown added 7 commits April 21, 2026 16:06
Replace the plain text `context: 0.0%` status bar indicator with a
block-style progress bar: `Context █░░░░░░░░░ 10%`.

The bar uses 10 Unicode block characters (█ filled, ░ empty) to give
an at-a-glance sense of context usage, followed by an integer
percentage. Token counts are preserved when available:
`Context █████░░░░░ 50% (5.0k/10.0k)`.
Apply green/yellow/red coloring to the context progress bar and
percentage text based on usage thresholds:

  - < 70%  → green  (Context ██░░░░░░░░ 20%)
  - 70–85% → yellow (Context ███████░░░ 70%)
  - ≥ 85%  → red    (Context █████████░ 90%)

Both the bar characters and the percentage digits share the same color.
The "Context" label and optional token counts (e.g. 5.0k/10.0k) remain
in the default toolbar color.

Changes:
- theme.py: add context_ok/warn/critical color fields to ToolbarColors
- prompt.py: _render_right_span now returns FormattedText fragments so
  individual spans can carry independent styles; width calculation
  updated accordingly
- _blocks.py: rebuild Rich Text with styled append instead of setting
  .plain, so Rich renders the color in the streaming agent view
Split the progress bar into two separately styled spans so the filled
blocks (█) use the context color while the empty blocks (░) are dimmed,
matching claude-hud's coloredBar behavior exactly.

Also moves the percentage digit into its own colored span so the full
visual is: Context [colored █…][dim ░…][colored N%] [(tokens)].
Replace fixed grey dim color with per-state dim variants so the empty
░ blocks appear as dark green / dark amber / dark red instead of grey,
matching claude-hud's behavior of dimming within the same color family.

- theme.py: replace context_dim with context_dim_ok/warn/critical
- prompt.py: select matching dim_color alongside color
- _blocks.py: use Rich 'dim {color}' style for empty blocks
Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 1 potential issue.

View 3 additional findings in Devin Review.

Open in Devin Review

Comment thread src/kimi_cli/soul/__init__.py
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c63985e193

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/kimi_cli/ui/shell/visualize/_blocks.py
Comment thread src/kimi_cli/ui/shell/prompt.py
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant