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