Fix ccstatusline line 1 styling and readability (#9)

* 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

* 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.

---------

Co-authored-by: AnExiledDev <AnExiledDev@users.noreply.github.com>

Author: AnExiledDev

.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

.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
 

.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
       }
     ],