Skip to content

Fix ccstatusline line 1 styling and readability#9

Merged
AnExiledDev merged 2 commits intomainfrom
fix/ccstatusline-line1-styling
Feb 26, 2026
Merged

Fix ccstatusline line 1 styling and readability#9
AnExiledDev merged 2 commits intomainfrom
fix/ccstatusline-line1-styling

Conversation

@AnExiledDev
Copy link
Owner

@AnExiledDev AnExiledDev commented Feb 24, 2026

Summary

  • Remove "Model:" prefix from the model widget via rawValue: true
  • Distinct background colors for all 4 token widgets: blue (input), magenta (output), yellow (cached), green (total) — previously they appeared visually identical
  • Restore spacing between token segments by removing merge: "no-padding" from the data widgets
  • Add 2-char bold identifiers (In, Ou, Ca, Tt) as custom-text labels fused to each token widget via merge: "no-padding", so each token metric is immediately identifiable at a glance

Test plan

  • Rebuild devcontainer or manually deploy ccstatusline-settings.json to ~/.config/ccstatusline/settings.json
  • Start a Claude Code session and verify line 1 renders with distinct colored segments
  • Confirm token identifiers (In, Ou, Ca, Tt) appear bold and fused to their values
  • Confirm no "Model:" prefix on the model widget
  • Verify powerline arrows render correctly between segments

Summary by CodeRabbit

  • New Features

    • Added token indicators for input, output, cached, and total in the status display, each with compact fused labels.
  • Style

    • Improved color contrast, bold 2-character labels, and restored spacing for clearer token metric presentation.
  • Documentation

    • Expanded status-bar docs with widget properties, token color/label conventions, and configuration examples.

@coderabbitai
Copy link

coderabbitai bot commented Feb 24, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8d9022c and c8e68e0.

📒 Files selected for processing (3)
  • .devcontainer/CHANGELOG.md
  • .devcontainer/CLAUDE.md
  • .devcontainer/config/defaults/ccstatusline-settings.json

📝 Walkthrough

Walkthrough

Configuration and documentation updates: status-line JSON gains labeled token widgets and rawValue/color/bgColor tweaks; CHANGELOG and CLAUDE.md updated with new status bar widget docs and visual/behavior notes.

Changes

Cohort / File(s) Summary
Status Line Configuration
.devcontainer/config/defaults/ccstatusline-settings.json
Added custom-text label blocks for token stages (lbl-tokens-input, lbl-tokens-output, lbl-tokens-cached, lbl-tokens-total); set rawValue: true on model and token widgets; updated colors/backgrounds (input=blue, output=magenta, cached=yellow, total=green) and bold/label fusion for 2-char labels.
Changelog
.devcontainer/CHANGELOG.md
Documented the status bar widget changes: token color mapping, 2-char fused labels, rawValue usage for model, and spacing/visual updates under Unreleased.
Docs (CLAUDE)
.devcontainer/CLAUDE.md
Expanded status bar documentation with widget property descriptions (id, type, colors, rawValue, bold, merge, customText), token widget examples, and guidance for editing the status line config.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Poem

🐰 Hopping through JSON, labels bright and small,

In, Ou, Ca, Tt—two chars proud and tall,
Colors bloom where counts align,
Raw values show the model fine,
A rabbit cheers the status line's ball! 🎉

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly addresses the main objective of the PR: fixing styling and readability of ccstatusline line 1 by adding distinct colors, labels, and formatting to token widgets.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/ccstatusline-line1-styling

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.devcontainer/config/defaults/ccstatusline-settings.json:
- Around line 23-85: The PR changed statusline config behavior and conventions
but no docs were updated; add/update CLAUDE.md to document the new keys and
conventions: describe the new widget types ("tokens-input", "tokens-output",
"tokens-cached", "tokens-total", and "custom-text" label entries like
"lbl-tokens-input"/"lbl-tokens-output"/"lbl-tokens-cached"/"lbl-tokens-total"),
the new properties used ("rawValue", "merge": "no-padding", "backgroundColor"
and color conventions like bgBlue/bgMagenta/bgYellow/bgGreen and
brightWhite/black), and provide a minimal example snippet mirroring the diff
plus a short migration note explaining expected behavior changes and how to
add/update statusline entries.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d2ba55e and 8d9022c.

📒 Files selected for processing (1)
  • .devcontainer/config/defaults/ccstatusline-settings.json

Comment on lines +23 to 85
{
"id": "lbl-tokens-input",
"type": "custom-text",
"customText": "In",
"backgroundColor": "bgBlue",
"color": "brightWhite",
"bold": true,
"merge": "no-padding"
},
{
"id": "5",
"type": "tokens-input",
"color": "magenta",
"rawValue": true,
"backgroundColor": "bgBlue",
"color": "brightWhite",
"rawValue": true
},
{
"id": "lbl-tokens-output",
"type": "custom-text",
"customText": "Ou",
"backgroundColor": "bgMagenta",
"color": "brightWhite",
"bold": true,
"merge": "no-padding"
},
{
"id": "ac094d46-3673-4d41-84e3-dc8c5bcf639f",
"type": "tokens-output",
"backgroundColor": "bgMagenta",
"rawValue": true,
"color": "brightWhite",
"rawValue": true
},
{
"id": "lbl-tokens-cached",
"type": "custom-text",
"customText": "Ca",
"backgroundColor": "bgYellow",
"color": "black",
"bold": true,
"merge": "no-padding"
},
{
"id": "2ad12147-05fd-45fb-8336-53ba2e7df56c",
"type": "tokens-cached",
"backgroundColor": "bgBrightRed",
"rawValue": true,
"backgroundColor": "bgYellow",
"color": "black",
"rawValue": true
},
{
"id": "lbl-tokens-total",
"type": "custom-text",
"customText": "Tt",
"backgroundColor": "bgGreen",
"color": "black",
"bold": true,
"merge": "no-padding"
},
{
"id": "9bacbdb4-2e01-45de-a0c0-ee6ec30fa3c2",
"type": "tokens-total",
"backgroundColor": "bgGreen",
"color": "black",
"rawValue": true
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Please document this config-system change in .devcontainer/CLAUDE.md.

This PR changes statusline config behavior and conventions, but there’s no corresponding docs update in the provided changes. Please add/update guidance so future edits stay consistent.
Based on learnings: Config system changes MUST be reflected in .devcontainer/CLAUDE.md.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.devcontainer/config/defaults/ccstatusline-settings.json around lines 23 -
85, The PR changed statusline config behavior and conventions but no docs were
updated; add/update CLAUDE.md to document the new keys and conventions: describe
the new widget types ("tokens-input", "tokens-output", "tokens-cached",
"tokens-total", and "custom-text" label entries like
"lbl-tokens-input"/"lbl-tokens-output"/"lbl-tokens-cached"/"lbl-tokens-total"),
the new properties used ("rawValue", "merge": "no-padding", "backgroundColor"
and color conventions like bgBlue/bgMagenta/bgYellow/bgGreen and
brightWhite/black), and provide a minimal example snippet mirroring the diff
plus a short migration note explaining expected behavior changes and how to
add/update statusline entries.

- Add rawValue to model widget to strip "Model:" prefix
- Replace merge: no-padding with normal spacing between token widgets
- Give each token widget a distinct background (blue, magenta, yellow, green)
- Add bold 2-char custom-text labels (In, Ou, Ca, Tt) fused to each token widget
Resolves CodeRabbit review: config-system changes require matching
documentation. Adds Status Bar Widgets section covering widget
properties, token color conventions, label fusion pattern, and
available widget types. Adds changelog entry for the styling changes
and documentation update.
@AnExiledDev AnExiledDev force-pushed the fix/ccstatusline-line1-styling branch from c7c73ff to c8e68e0 Compare February 26, 2026 02:47
@AnExiledDev AnExiledDev merged commit 873bb71 into main Feb 26, 2026
1 of 2 checks passed
@AnExiledDev AnExiledDev deleted the fix/ccstatusline-line1-styling branch February 26, 2026 02:47
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