Custom ccstatusline config with Unicode icons for tracking m... - Field Notes

What it is#

ccstatusline is a status line for Claude Code that shows you what’s happening in your session. Model, context window usage, token counts, session cost. It’s all there in your terminal, updating in real-time as you work.

I’ve been using it for a few weeks now and the dollar figures changed how I think about agent spawning and plan depth. When you can see that a deep exploration task just cost $0.80 in context reads, you start making different decisions about when to parallelize vs. when to be more surgical.

The config#

Here’s my setup. It uses Unicode icons to keep things dense without sacrificing readability:

json
{
  "version": 3,
  "lines": [
    [
      {
        "id": "1",
        "type": "model",
        "color": "cyan",
        "bold": true,
        "rawValue": true
      },
      {
        "id": "2",
        "type": "separator",
        "color": "gray"
      },
      {
        "id": "3a",
        "type": "custom-text",
        "color": "yellow",
        "customText": "◐ "
      },
      {
        "id": "3",
        "type": "context-percentage",
        "color": "yellow",
        "bold": true,
        "rawValue": true,
        "merge": true
      },
      {
        "id": "4",
        "type": "separator",
        "color": "gray",
        "separatorChar": "-"
      },
      {
        "id": "5",
        "type": "context-length",
        "color": "yellow",
        "rawValue": true
      },
      {
        "id": "6",
        "type": "separator",
        "color": "gray"
      },
      {
        "id": "7a",
        "type": "custom-text",
        "color": "green",
        "customText": "▲ "
      },
      {
        "id": "7",
        "type": "tokens-input",
        "color": "green",
        "rawValue": true,
        "merge": true
      },
      {
        "id": "8",
        "type": "separator",
        "color": "gray"
      },
      {
        "id": "9a",
        "type": "custom-text",
        "color": "magenta",
        "customText": "▼ "
      },
      {
        "id": "9",
        "type": "tokens-output",
        "color": "magenta",
        "rawValue": true,
        "merge": true
      },
      {
        "id": "10",
        "type": "separator",
        "color": "gray"
      },
      {
        "id": "11a",
        "type": "custom-text",
        "color": "brightBlue",
        "customText": "※ "
      },
      {
        "id": "11",
        "type": "tokens-cached",
        "color": "brightBlue",
        "rawValue": true,
        "merge": true
      },
      {
        "id": "12",
        "type": "separator",
        "color": "gray"
      },
      {
        "id": "13a",
        "type": "custom-text",
        "color": "white",
        "customText": "Σ "
      },
      {
        "id": "13",
        "type": "tokens-total",
        "color": "white",
        "bold": true,
        "rawValue": true,
        "merge": true
      },
      {
        "id": "14",
        "type": "separator",
        "color": "gray"
      },
      {
        "id": "15",
        "type": "session-cost",
        "color": "brightGreen",
        "rawValue": true
      },
      {
        "id": "16",
        "type": "flex-separator",
        "color": "gray"
      },
      {
        "id": "17",
        "type": "cwd",
        "color": "brightCyan"
      }
    ],
    [],
    []
  ],
  "flexMode": "full",
  "compactThreshold": 60,
  "colorLevel": 2,
  "inheritSeparatorColors": false,
  "globalBold": false
}
146 lines

What each section means#

The status line reads left to right:

Model (cyan): Which model is handling the session (sonnet, opus, haiku)
◐ Context % (yellow): How much of the context window is filled
Context length (yellow): Total tokens in the context window
▲ Input tokens (green): Tokens sent to the model this turn
▼ Output tokens (magenta): Tokens the model generated this turn
※ Cached tokens (blue): Tokens served from prompt caching (these are cheaper)
Σ Total tokens (white, bold): Running total for the session
Session cost (bright green): Dollar amount spent so far
Working directory (bright cyan): Where you’re running Claude Code from

The icons keep it compact. The colors help you parse it quickly without having to read labels every time.

Setup#

Install ccstatusline and point it at your config:

bash
# Install
npm install -g @spences10/ccstatusline

# Create config directory
mkdir -p ~/.config/ccstatusline

# Add your settings.json to ~/.config/ccstatusline/settings.json

The tool auto-detects the config file at ~/.config/ccstatusline/settings.json. If you want to customize the location, check the ccstatusline repo for options.

Why it matters#

The session cost display is what makes this useful beyond basic token tracking. When you’re deciding whether to spawn three parallel agents or use a single thorough exploration, seeing that your last deep dive cost $1.20 gives you actual data to work with. It’s not about being cheap—it’s about being intentional.

The cached tokens indicator (※) is also worth watching. If you’re seeing high cache hit rates, your repeated reads are essentially free. If you’re not, you might be context-switching between projects too much or your working directory is jumping around.

In action#

Here’s what it looks like when you push Opus to 100% context during an iterative session:

TODO: Add screenshot of ccstatusline showing Opus at 100% context

When you’re iterating toward full confidence and the context percentage climbs to 100%, you know exactly where you stand. The cost tracker shows you what that depth cost, and you can decide whether to continue in the same session or start fresh.