Skip to content

Fix ccstatusline line 1 styling and readability #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AnExiledDev merged 2 commits into from
Feb 26, 2026
Merged

Fix ccstatusline line 1 styling and readability #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0020483
Fix ccstatusline line 1: distinct token colors, identifiers, spacing
AnExiledDev Feb 24, 2026
c8e68e0
Document ccstatusline widget conventions in CLAUDE.md
AnExiledDev Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .devcontainer/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@

## [Unreleased]

### Added

#### Docs
- **CLAUDE.md** — new "Status Bar Widgets" section documenting widget properties, token color conventions, label fusion pattern, and available widget types

### Changed

#### Status Bar
- **ccstatusline line 1** — distinct background colors for each token widget (blue=input, magenta=output, yellow=cached, green=total), bold 2-char labels (In, Ou, Ca, Tt) fused to data widgets, `rawValue: true` on model widget to strip "Model:" prefix, restored spacing between token segments

### Fixed

#### Plugin Marketplace
Expand Down
43 changes: 42 additions & 1 deletion .devcontainer/CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,48 @@ All experimental feature flags are in `settings.json` under `env`. Setup steps c
4. **Add features**: Add to `"features"` in `devcontainer.json`
5. **Disable features**: Set `"version": "none"` in the feature's config
6. **Disable setup steps**: Set flags to `false` in `.env`
7. **Customize status bar**: Edit `config/defaults/ccstatusline-settings.json`
7. **Customize status bar**: Edit `config/defaults/ccstatusline-settings.json` (see below)

## Status Bar Widgets

The status bar is configured in `config/defaults/ccstatusline-settings.json` (deploys to `~/.config/ccstatusline/settings.json`). Each widget is a JSON object in a line array.

### Widget Properties

| Property | Purpose |
|----------|---------|
| `id` | Unique identifier (UUID or descriptive string) |
| `type` | Widget type (see below) |
| `backgroundColor` | Background color: `bgBlue`, `bgMagenta`, `bgYellow`, `bgGreen`, `bgRed`, etc. |
| `color` | Text color: `brightWhite`, `black`, `cyan`, `yellow`, etc. |
| `rawValue` | `true` to strip type-specific prefixes (e.g., removes "Model:" from model widget) |
| `bold` | `true` for bold text |
| `merge` | `"no-padding"` fuses this widget to the next (no separator/space between them) |
| `customText` | Static text content (only for `custom-text` type) |

### Token Widgets

Each token metric uses a distinct background color for at-a-glance identification:

| Type | Color | Label |
|------|-------|-------|
| `tokens-input` | Blue (`bgBlue`) | **In** |
| `tokens-output` | Magenta (`bgMagenta`) | **Ou** |
| `tokens-cached` | Yellow (`bgYellow`) | **Ca** |
| `tokens-total` | Green (`bgGreen`) | **Tt** |

Labels are `custom-text` widgets with `merge: "no-padding"` so they fuse visually to their data widget:

```json
{ "id": "lbl-tokens-input", "type": "custom-text", "customText": "In",
"backgroundColor": "bgBlue", "color": "brightWhite", "bold": true, "merge": "no-padding" },
{ "id": "5", "type": "tokens-input",
"backgroundColor": "bgBlue", "color": "brightWhite", "rawValue": true }
```

### Other Widget Types

`model`, `context-length`, `context-percentage-usable`, `git-branch`, `git-changes`, `git-worktree`, `session-clock`, `session-cost`, `block-timer`, `version`, `custom-command`

## Features

Expand Down
50 changes: 44 additions & 6 deletions .devcontainer/config/defaults/ccstatusline-settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
{
"id": "d904cca6-ade8-41c1-a4f5-ddea30607a5e",
"type": "model",
"backgroundColor": "bgMagenta"
"backgroundColor": "bgMagenta",
"rawValue": true
},
{
"id": "1",
Expand All @@ -19,31 +20,68 @@
"backgroundColor": "bgRed",
"rawValue": true
},
{
"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
Comment on lines +23 to 85
Copy link

@coderabbitai coderabbitai bot Feb 24, 2026

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.

}
],
Expand Down