claude-statusline-powerline

🥈Silver

Claude Statusline Powerline is a TypeScript-based tool that enhances the Claude Code interface with a customizable powerline-style statusline. It integrates with git for version control, tracks active sessions, and monitors usage costs. Developers benefit from real-time insights and a streamlined workflow.

3110Updated 1mo ago

Intermediate30min to implementautomation

Saves ~15 min per use

Quick InstallView Source

git clone https://github.com/spences10/claude-statusline-powerline.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":"Install the dependency in your project","action":"Run `npm install @claude/statusline-powerline` in your project root. Ensure you're using TypeScript 5.0+ and have a `.claude` directory in your project.","tip":"Check your project's `package.json` for existing dependencies to avoid version conflicts."},{"step":"Create the configuration file","action":"Generate `.claude/statusline.ts` using the template above. Customize the segments (git, session, cost) based on your workflow needs. Use the theme colors that match your terminal's color scheme.","tip":"Start with minimal segments (git + session) and add cost tracking later to avoid visual clutter."},{"step":"Configure Claude to load the statusline","action":"Edit your project's `claude.json` to include: `\"statusline\": \".claude/statusline.ts\"`. Restart Claude Code to apply changes.","tip":"Use `claude --version` to verify the statusline module is loaded. Check the debug console for any TypeScript compilation errors."},{"step":"Customize and extend segments","action":"Add custom segments by extending the Statusline class. For example, add a [LINT_ERRORS] segment that shows ESLint results or a [TEST_STATUS] segment that displays Jest coverage.","tip":"Use the `statusline.on('update', callback)` event to refresh segments asynchronously. Log segment updates to the console during development."},{"step":"Share configuration with your team","action":"Commit the `.claude/statusline.ts` and `claude.json` changes to your project repository. Document any custom segments in your project's README.","tip":"Include a screenshot of your statusline in the README to help team members visualize the setup."}]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/spences10/claude-statusline-powerline

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Set up and customize the Claude Statusline Powerline for [PROJECT_NAME] in [DIRECTORY_PATH]. Configure the powerline to display [GIT_BRANCH], [SESSION_DURATION], [USAGE_COST], and [ACTIVE_TASKS]. Ensure the statusline updates in real-time and matches the [THEME_COLORS] theme. Provide the TypeScript configuration file and installation steps.

Example Output

```typescript
// Claude Statusline Powerline Configuration for 'ecommerce-backend' project
// File: .claude/statusline.ts
import { Statusline } from '@claude/statusline-powerline';

const statusline = new Statusline({
  git: { enabled: true, branch: true, status: true },
  session: { enabled: true, duration: true, activeTasks: true },
  cost: { enabled: true, tracking: true, currency: 'USD' },
  theme: {
    background: '#1e1e2e',
    foreground: '#cdd6f4',
    git: { clean: '#a6e3a1', dirty: '#f38ba8' },
    session: { active: '#89b4fa', idle: '#9399b2' },
    cost: { low: '#f9e2af', high: '#f38ba8' }
  }
});

export default statusline;
```

**Current Statusline Output:**
```
 ecommerce-backend  main [+2 ~3 -1]  01:23:45  $12.47  3 tasks 
```

**Breakdown:**
- Git: On branch `main` with 2 staged changes, 3 unstaged, and 1 deleted file
- Session: Active for 1 hour, 23 minutes, and 45 seconds
- Cost: $12.47 spent in current billing cycle (using Claude Code's $0.15/1K tokens pricing)
- Active Tasks: 3 background processes running (linting, tests, and build watcher)

**Installation Steps Completed:**
1. Added `.claude/statusline.ts` to project root
2. Configured `claude.json` to load the statusline module
3. Verified real-time updates by making a git commit (statusline refreshed in <1s)
4. Tested theme colors by modifying background to #1e1e2e

**Next Steps:**
- Add custom segments for [LINT_ERRORS] and [TEST_COVERAGE] metrics
- Configure cost tracking for specific project budgets
- Share configuration with team via Git repository