Skip to content

CLAUDE.md

Latest commit

 

History

History
81 lines (62 loc) · 1.84 KB

CLAUDE.md

File metadata and controls

81 lines (62 loc) · 1.84 KB
Raw

Claude Code Configuration

Status Line Integration

This project includes a Claude Code statusLine integration. To enable it:

  1. Install dependencies:

    npm install

  2. Install globally (recommended):

    npm install -g .

  3. Configure Claude Code by editing ~/.claude/settings.json:

    {
  "statusLine": {
    "type": "command",
    "command": "claude-statusbar",
    "padding": 0
  }
}

  4. Restart Claude Code to see the usage status bar at the bottom.

Web Development Mode

To run the web interface:

npm run dev

This will start the Next.js development server on http://localhost:3000

Project Overview

This is a dual-purpose project that provides:

  1. Claude Code Status Bar: CLI tool for real-time usage monitoring in Claude Code
  2. Web Dashboard: Next.js app with detailed usage visualization

Features

  • Real-time token tracking and cost calculation
  • Server Actions with use server directive
  • React's useFormState hook for state management
  • Color-coded usage indicators
  • Burn rate and time remaining estimates

Key Files

CLI Integration

  • bin/statusline.js - Main CLI script for Claude Code
  • bin/statusline-advanced.js - Advanced version with format options

Web Application

  • app/actions/usage.ts - Server actions using use server
  • app/components/StatusBar.tsx - Client component using useFormState
  • app/page.tsx - Main page with server-side data fetching

CLI Options

The advanced statusline supports options:

  • --emoji - Add emoji indicators
  • --compact - Compact format
  • --format=ccusage - ccusage-style format
  • --no-color - Disable ANSI colors

Example in settings.json:

{
  "statusLine": {
    "type": "command",
    "command": "claude-statusbar --emoji --format=ccusage",
    "padding": 0
  }
}