From 00204836258f00a93ffdc27370f52b2236905cbd Mon Sep 17 00:00:00 2001 From: AnExiledDev Date: Tue, 24 Feb 2026 23:50:17 +0000 Subject: [PATCH 1/2] Fix ccstatusline line 1: distinct token colors, identifiers, spacing - 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 --- .../defaults/ccstatusline-settings.json | 50 ++++++++++++++++--- 1 file changed, 44 insertions(+), 6 deletions(-) diff --git a/.devcontainer/config/defaults/ccstatusline-settings.json b/.devcontainer/config/defaults/ccstatusline-settings.json index 2a60051..bd80488 100644 --- a/.devcontainer/config/defaults/ccstatusline-settings.json +++ b/.devcontainer/config/defaults/ccstatusline-settings.json @@ -5,7 +5,8 @@ { "id": "d904cca6-ade8-41c1-a4f5-ddea30607a5e", "type": "model", - "backgroundColor": "bgMagenta" + "backgroundColor": "bgMagenta", + "rawValue": true }, { "id": "1", @@ -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 } ], From c8e68e08528148af95c927fe54eb78a8a9cc76c5 Mon Sep 17 00:00:00 2001 From: AnExiledDev Date: Wed, 25 Feb 2026 05:20:00 +0000 Subject: [PATCH 2/2] Document ccstatusline widget conventions in CLAUDE.md 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. --- .devcontainer/CHANGELOG.md | 10 +++++++++ .devcontainer/CLAUDE.md | 43 +++++++++++++++++++++++++++++++++++++- 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/.devcontainer/CHANGELOG.md b/.devcontainer/CHANGELOG.md index 5126979..a6161e3 100644 --- a/.devcontainer/CHANGELOG.md +++ b/.devcontainer/CHANGELOG.md @@ -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 diff --git a/.devcontainer/CLAUDE.md b/.devcontainer/CLAUDE.md index 9df168b..fd2a04a 100644 --- a/.devcontainer/CLAUDE.md +++ b/.devcontainer/CLAUDE.md @@ -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