Claude Code - API metered usage statusline with ccstatusline

README.md

Instructions

example of what it looks like. First do

npx -y ccstatusline@latest

You can save your widgets and exit, this would modify your ~/.claude/settings.json

Then download the settings.json in this gist and:

cp -iv settings.json ~/.config/ccstatusline/settings.json

Restart claude and you should be good to go.

PS:

I duplicated this from comment to be able to add images to Github gists.

settings.json

{
  "version": 3,
  "lines": [
    [
      {
        "id": "1",
        "type": "model",
        "color": "cyan"
      },
      {
        "id": "2",
        "type": "separator"
      },
      {
        "id": "2924df6f-7f13-43d0-9275-c1018d0a073d",
        "type": "thinking-effort"
      },
      {
        "id": "23bbb4df-3518-4a54-912e-123deb97d7bd",
        "type": "separator"
      },
      {
        "id": "3",
        "type": "context-length",
        "color": "brightBlue"
      },
      {
        "id": "160a3564-b641-45fa-8b3c-47fcb05a36d0",
        "type": "separator"
      },
      {
        "id": "cca79fb7-b97f-44bb-8fa9-8037f8479a38",
        "type": "context-percentage"
      },
      {
        "id": "4",
        "type": "separator"
      },
      {
        "id": "5",
        "type": "git-branch",
        "color": "magenta"
      },
      {
        "id": "6",
        "type": "separator"
      },
      {
        "id": "7",
        "type": "git-changes",
        "color": "yellow"
      },
      {
        "id": "1bb38195-4404-494c-80bc-e6165bc2e0c1",
        "type": "separator"
      }
    ],
    [
      {
        "id": "604362bb-f9e3-4f4c-a43c-89587ecb7090",
        "type": "tokens-input",
        "color": "yellow"
      },
      {
        "id": "3e84e421-cc3d-41a6-9e0f-8d3c5f2113a4",
        "type": "separator"
      },
      {
        "id": "b027df68-5f81-42d5-9139-fc3ca1104a88",
        "type": "tokens-output",
        "color": "blue"
      },
      {
        "id": "09d25fa6-333f-4565-9aa3-bd7354a8332c",
        "type": "separator"
      },
      {
        "id": "8ece38c6-21e6-4bae-9f10-8ea7cc972ca9",
        "type": "tokens-cached",
        "color": "brightGreen"
      },
      {
        "id": "cdf571ea-0834-414b-bd30-5544521fa76d",
        "type": "separator"
      },
      {
        "id": "46873aa9-350c-44dc-b3b2-bc38c37c5172",
        "type": "tokens-total",
        "color": "cyan"
      },
      {
        "id": "6180b6e8-5bf4-4780-bc4a-f912ea95ade6",
        "type": "separator"
      },
      {
        "id": "4e14306a-07d4-49c3-a980-ddbb86f2d6d9",
        "type": "session-cost",
        "color": "brightBlue"
      },
      {
        "id": "0c656b59-23b6-46ae-9fde-a01a16aca1b1",
        "type": "separator"
      }
    ],
    [
      {
        "id": "74549fd6-e86e-4e50-90df-d04d58639e81",
        "type": "skills"
      }
    ]
  ],
  "flexMode": "full-minus-40",
  "compactThreshold": 60,
  "colorLevel": 2,
  "inheritSeparatorColors": false,
  "globalBold": false,
  "minimalistMode": false,
  "powerline": {
    "enabled": false,
    "separators": [
      ""
    ],
    "separatorInvertBackground": [
      false
    ],
    "startCaps": [],
    "endCaps": [],
    "autoAlign": false,
    "continueThemeAcrossLines": false
  }
}

example of what it looks like. First do

npx -y ccstatusline@latest

You can save your widgets and exit, this would modify your ~/.claude/settings.json

Then download the settings.json in this gist and:

cp -iv settings.json ~/.config/ccstatusline/settings.json

Restart claude and you should be good to go.