prism-hud

prism-hud

A Claude Code statusline HUD with a per-position gradient progress bar — each dot is its own color, from cool sky-blue on the left to warm red on the right. As your Context / Usage fills up, the warmer colors naturally appear from the right side, so how "tense" things are is obvious at a glance.

Fork notice. prism-hud is forked from jarrodwatts/claude-hud (MIT-licensed). Engine, transcript parsing, rate-limit handling, and configuration system are the original author's work. See NOTICE.md for full attribution.

What's different from upstream

• Gradient bar rendering. All bars (Context, 5h Usage, 7d Usage) use a fixed 10-step palette — each dot has its own color. The user's fill level decides how many dots are lit; the colors don't change based on percentage, they change based on position.
• Plugin namespace renamed to prism-hud. Config now lives at ~/.claude/plugins/prism-hud/config.json. Slash commands become /prism-hud:setup, /prism-hud:configure.

Gradient palette (10 steps)

Follows the progress-bar convention (green = safe, yellow = caution, red = danger) while keeping the high-saturation / high-brightness "electric" feel of Material Design's Accent (A-series) palette — same family as the reference color #09A5F7 that shaped this plugin's visual identity.

Install

Requires Node.js 18+ on the machine running Claude Code. Bun works too and is faster, but optional.

Inside a Claude Code instance, run the following commands:

Step 1: Add the marketplace

/plugin marketplace add puddinging/prism-hud

Step 2: Install the plugin

EXDEV: cross-device link not permitted

mkdir -p ~/.cache/tmp && TMPDIR=~/.cache/tmp claude

/plugin install prism-hud

After that, reload plugins so the /prism-hud:setup slash command becomes available:

/reload-plugins

Step 3: Configure the statusline

/prism-hud:setup

winget install OpenJS.NodeJS.LTS

Done! Fully quit Claude Code and start it again — statusLine only takes effect on a fresh process, /reload-plugins is not enough here. Once restarted, the HUD will appear below your input.

Manual (local clone)

git clone https://github.com/puddinging/prism-hud.git
cd prism-hud
npm install
npm run build

Then wire it up by editing ~/.claude/settings.json. Pick whichever runtime you have:

// Node (uses the built dist/)
"statusLine": {
  "type": "command",
  "command": "node \"$HOME/path/to/prism-hud/dist/index.js\""
}

// Bun (runs src/ directly, slightly faster cold start)
"statusLine": {
  "type": "command",
  "command": "exec bun --env-file /dev/null \"$HOME/path/to/prism-hud/src/index.ts\""
}

Configuration

Edit ~/.claude/plugins/prism-hud/config.json. All upstream options (display.*, gitStatus.*, elementOrder, lineLayout, colors.*) are preserved — see below for the prism-hud-specific section.

Customizing the gradient bar

Add a gradient block to override any or all of: palette, dot character, empty dot character, empty dot color. Only the fields you set override the defaults.

{
  "gradient": {
    "colors": [
      "#00E676", "#3DEE4A", "#76FF03", "#C6FF00", "#FFEA00",
      "#FFC400", "#FF9100", "#FF6D00", "#FF3D00", "#FF1744"
    ],
    "filledChar": "●",
    "emptyChar": "○",
    "emptyColor": "#7D7A72"
  }
}

colors — hex palette, any length ≥ 1. Sampled evenly across the bar width: 10 colors ↔ 10 dots 1:1; 2 colors ↔ first half gets color 1, second half color 2; 20 colors ↔ every 2nd sampled.