@buckits/claude-statusline 1.0.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @buckits/claude-statusline
 
-A gradient color statusline for Claude Code featuring a visual progress bar that transitions from green to red as your context fills up.
+A beautiful 2-line dashboard statusline for Claude Code with gradient progress bar, compact threshold marker, git status indicators, and cost tracking.
 
 ## Installation
 
@@ -10,30 +10,62 @@ npx @buckits/claude-statusline
 
 ## Features
 
-- **Gradient Progress Bar** - Visual bar that smoothly transitions green → yellow → orange → red as context fills
-- **Color-coded Token Count** - Used tokens match the progress gradient color
-- **Auto-compact Indicator** - Shows `⚡X% until compact` with color warnings (green when safe, red when critical)
-- **Git Integration** - Displays current branch name
-- **Project Name** - Shows current working directory name
+- **2-Line Dashboard Layout** - Clean separation of AI info and project info
+- **Gradient Progress Bar** - 50 segments (4k tokens each) that smoothly transition green → yellow → orange → red
+- **⚡ Compact Threshold Marker** - Red lightning bolt shows exactly where auto-compact triggers (78%)
+- **Session Cost Tracking** - See your running cost in real-time
+- **Git Status Indicators**:
+  - `✓` Green checkmark = clean (all committed)
+  - `●` Yellow dot = unstaged changes
+  - `✚` Green plus = staged changes ready to commit
+  - `●✚` Both = partial commit state
+- **Ahead/Behind Tracking** - `↑5 ↓2` shows commits ahead/behind remote
+- **Visual Icons** - 🤖 for AI line, 📁 for project line
 
 ## Screenshot
 
 ```
-Opus 4.5 [████████████░░░░░░░░] 98.2k/200.0k ⚡15% until compact  main my-project
+🤖 Opus 4.5 ($14.61) │ [████████████████████░░░░░░░░░░░░░░░░░░░⚡░░░░░░░░░░░] 80k/200k
+📁 trellis POC ✓ → origin/POC ↑15
 ```
 
-## What it looks like
-
-| Context Usage | Progress Bar Color | Compact Indicator |
-|---------------|-------------------|-------------------|
-| 0-33% | Green | Green (25%+) |
-| 34-66% | Yellow/Orange | Yellow (15-24%) |
-| 67-100% | Orange/Red | Red (< 4%) |
+## What Each Element Means
+
+### Line 1 - AI Session Info
+| Element | Description |
+|---------|-------------|
+| 🤖 | AI indicator |
+| `Opus 4.5` | Current model (cyan) |
+| `($14.61)` | Session cost (green) |
+| `│` | Separator |
+| `[███░░░⚡░░░]` | Context usage with compact threshold |
+| `80k/200k` | Tokens used / total |
+
+### Line 2 - Project Info
+| Element | Description |
+|---------|-------------|
+| 📁 | Project indicator |
+| `trellis` | Project name (cyan) |
+| `POC` | Current branch (magenta) |
+| `✓●✚` | Git status (clean/unstaged/staged) |
+| `→` | Points to tracking branch |
+| `origin/POC` | Remote tracking branch (blue) |
+| `↑15` | Commits ahead (green) |
+| `↓3` | Commits behind (red) |
+
+## Progress Bar Colors
+
+The bar gradient is calculated relative to the ⚡ threshold (not total capacity):
+
+| Distance to ⚡ | Color |
+|---------------|-------|
+| Far (safe) | Bright green |
+| Approaching | Yellow |
+| Close | Orange |
+| At threshold | Red |
 
 ## Manual Installation
 
-If you prefer to install manually:
-
 1. Copy `statusline.sh` to `~/.claude/statusline.sh`
 2. Make it executable: `chmod +x ~/.claude/statusline.sh`
 3. Add to `~/.claude/settings.json`:
@@ -51,6 +83,7 @@ If you prefer to install manually:
 - Claude Code CLI
 - `jq` (for JSON parsing)
 - Bash
+- Git (for git status features)
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buckits/claude-statusline",
-  "version": "1.0.0",
-  "description": "A gradient color statusline for Claude Code with progress bar, token counts, and auto-compact indicator",
+  "version": "2.0.0",
+  "description": "A beautiful 2-line dashboard statusline for Claude Code with gradient progress bar, compact threshold marker, git status indicators, and cost tracking",
   "bin": {
     "claude-statusline": "./bin/install.js"
   },

package/statusline.sh

@@ -38,8 +38,8 @@ fi
 [ "$percent" -lt 0 ] && percent=0
 [ "$percent" -gt 100 ] && percent=100
 
-# Progress bar settings
-bar_width=20
+# Progress bar settings - 50 squares (4k tokens each for 200k context)
+bar_width=50
 filled=$((percent * bar_width / 100))
 empty=$((bar_width - filled))
 
@@ -100,10 +100,64 @@ for ((i=0; i<empty; i++)); do
 done
 bar+="]"
 
-# Get git branch if in a git repo
+# Get git information if in a git repo
 git_branch=""
+git_remote=""
 if [ -n "$cwd" ] && git -C "$cwd" rev-parse --git-dir >/dev/null 2>&1; then
     git_branch=$(git -C "$cwd" branch --show-current 2>/dev/null)
+
+    # Get the upstream tracking branch
+    upstream=$(git -C "$cwd" rev-parse --abbrev-ref --symbolic-full-name @{upstream} 2>/dev/null)
+    if [ -n "$upstream" ]; then
+        # upstream will be in format like "origin/POC" or "origin/main"
+        git_remote="$upstream"
+    fi
+
+    # Get ahead/behind counts
+    git_ahead=""
+    git_behind=""
+    if [ -n "$upstream" ]; then
+        # Get number of commits ahead/behind
+        ahead_behind=$(git -C "$cwd" rev-list --left-right --count HEAD...$upstream 2>/dev/null)
+        if [ -n "$ahead_behind" ]; then
+            ahead=$(echo "$ahead_behind" | awk '{print $1}')
+            behind=$(echo "$ahead_behind" | awk '{print $2}')
+            [ "$ahead" -gt 0 ] && git_ahead="$ahead"
+            [ "$behind" -gt 0 ] && git_behind="$behind"
+        fi
+    fi
+
+    # Get git status (dirty/staged indicators)
+    git_status_indicator=""
+    if git -C "$cwd" rev-parse --git-dir >/dev/null 2>&1; then
+        porcelain=$(git -C "$cwd" status --porcelain 2>/dev/null)
+
+        has_unstaged=false
+        has_staged=false
+
+        if [ -n "$porcelain" ]; then
+            # Check for staged changes (first column not space)
+            if echo "$porcelain" | grep -q '^[MADRC]'; then
+                has_staged=true
+            fi
+
+            # Check for unstaged changes (second column not space, or untracked files)
+            if echo "$porcelain" | grep -q '^\?\?' || echo "$porcelain" | grep -q '^.[MD]'; then
+                has_unstaged=true
+            fi
+        fi
+
+        # Build status indicator
+        if [ "$has_unstaged" = true ] && [ "$has_staged" = true ]; then
+            git_status_indicator=$(printf "\033[1;33m●\033[1;32m✚\033[0m")  # Both
+        elif [ "$has_unstaged" = true ]; then
+            git_status_indicator=$(printf "\033[1;33m●\033[0m")  # Unstaged (yellow)
+        elif [ "$has_staged" = true ]; then
+            git_status_indicator=$(printf "\033[1;32m✚\033[0m")  # Staged (green)
+        else
+            git_status_indicator=$(printf "\033[1;32m✓\033[0m")  # Clean (green)
+        fi
+    fi
 fi
 
 # Get project name from directory
@@ -131,8 +185,49 @@ format_tokens() {
     fi
 }
 
+# Format tokens without decimals (e.g., 72k/200k)
+format_tokens_int() {
+    local tokens=$1
+    if [ "$tokens" -ge 1000000 ]; then
+        local millions=$((tokens / 1000000))
+        printf "%dM" "$millions"
+    elif [ "$tokens" -ge 1000 ]; then
+        local thousands=$((tokens / 1000))
+        printf "%dk" "$thousands"
+    else
+        echo "$tokens"
+    fi
+}
+
 used_fmt=$(format_tokens $used_tokens)
 max_fmt=$(format_tokens $max_tokens)
+used_fmt_int=$(format_tokens_int $used_tokens)
+max_fmt_int=$(format_tokens_int $max_tokens)
+
+# Extract cost information
+cost_usd=$(echo "$input" | jq -r '.cost.total_cost_usd // empty')
+cost_display=""
+if [ -n "$cost_usd" ] && [ "$cost_usd" != "null" ]; then
+    # Format cost to 2 decimal places
+    cost_display=$(printf "\$%.2f" "$cost_usd")
+fi
+
+# Extract tools/skills/agents counts
+skills_count=$(echo "$input" | jq -r '.context.skills // [] | length')
+agents_count=$(echo "$input" | jq -r '.context.agents // [] | length')
+mcp_tools_count=$(echo "$input" | jq -r '.context.mcp_tools // [] | length')
+total_tools=$((skills_count + agents_count + mcp_tools_count))
+tools_display=""
+if [ "$total_tools" -gt 0 ]; then
+    tools_display=$(printf "🔧 %d" "$total_tools")
+fi
+
+# Extract background tasks (check for various possible field names)
+bg_tasks=$(echo "$input" | jq -r '.background_tasks // .running_agents // .active_tasks // empty | length')
+bg_display=""
+if [ -n "$bg_tasks" ] && [ "$bg_tasks" != "null" ] && [ "$bg_tasks" -gt 0 ]; then
+    bg_display=$(printf "⏳ %d" "$bg_tasks")
+fi
 
 # Extract "until compact" percentage
 # Auto-compact triggers at a threshold (appears to be around 78% usage / 22% remaining)
@@ -175,80 +270,138 @@ if [ -n "$until_compact" ] && [ "$until_compact" != "null" ] && [ "$until_compac
     else
         compact_color="38;5;196"
     fi
-    compact_indicator=$(printf "⚡%d%% until compact" "$until_compact")
-fi
 
-# Build the status line in requested order:
-# Model Name | Progress bar with % | Tokens | Git branch | Project name
-status=""
+    # Calculate tokens until compact threshold
+    # Auto-compact threshold is 22% remaining (78% used)
+    # Tokens until compact = until_compact * context_window_size / 100
+    remaining_pct=$(echo "$input" | jq -r '.context_window.remaining_percentage // 0')
+    tokens_until_compact=$((until_compact * max_tokens / 100))
+    tokens_until_compact_fmt=$(format_tokens $tokens_until_compact)
 
-# 1. Model name (cyan)
-if [ -n "$model" ]; then
-    status+=$(printf "\033[1;36m%s\033[0m" "$model")
+    # Build indicator with tokens primary (gradient color) and percentage in parens (dim)
+    compact_indicator_text=$(printf "⚡%s until compact" "$tokens_until_compact_fmt")
+    compact_indicator_pct=$(printf "(%d%%)" "$until_compact")
 fi
 
-# 2. Progress bar
-status+=$(printf " %s" "$bar")
+# ==========================================
+# 2-LINE DASHBOARD LAYOUT
+# ==========================================
 
-# 3. Tokens with gradient color on used, cyan on total
-# Used tokens get gradient color matching progress bar (low=green, high=red)
-# The rightmost_color already has the gradient based on current usage
-# Slash and max tokens use cyan to match model name
-status+=$(printf " \033[${rightmost_color}m%s\033[1;36m/%s\033[0m" "$used_fmt" "$max_fmt")
+# LINE 1: Model + Context
+# Format: Opus 4.5 ($12.01) [███████░░░░░░░░⚡░░░░░] 74k/200k
+line1=""
 
-# 3.5. Remaining context percentage (gradient color)
-if [ -n "$compact_indicator" ]; then
-    # Don't use printf %s with the indicator as it contains % characters
-    status+=" $(printf "\033[${compact_color}m")${compact_indicator}$(printf "\033[0m")"
+# Robot icon and model name in cyan
+if [ -n "$model" ]; then
+    line1+=$(printf "🤖 \033[1;36m%s\033[0m" "$model")
 fi
 
-# 4. Git branch (magenta)
-if [ -n "$git_branch" ]; then
-    status+=$(printf " \033[1;35m %s\033[0m" "$git_branch")
+# Add cost after model name (bright green)
+if [ -n "$cost_display" ]; then
+    line1+=$(printf " \033[1;32m(%s)\033[0m" "$cost_display")
 fi
 
-# 5. Project name (blue)
-if [ -n "$project_name" ]; then
-    status+=$(printf " \033[1;34m%s\033[0m" "$project_name")
-fi
+# Add subtle separator between cost and progress bar
+line1+=$(printf " \033[2;37m│\033[0m")
 
-# Extract context information for second line
-skills_count=$(echo "$input" | jq -r '[.context.skills // [] | length] | .[0] // 0')
-agents_count=$(echo "$input" | jq -r '[.context.agents // [] | length] | .[0] // 0')
-mcp_tools_count=$(echo "$input" | jq -r '[.context.mcp_tools // [] | length] | .[0] // 0')
+# Build progress bar for line 1
+# Calculate compact threshold position (78% of bar = 22% remaining)
+AUTO_COMPACT_THRESHOLD=22
+compact_threshold_pct=$((100 - AUTO_COMPACT_THRESHOLD))  # 78%
+threshold_position=$((compact_threshold_pct * bar_width / 100))
 
-# Extract token counts for context items
-skills_tokens=$(echo "$input" | jq -r '.context.skills_tokens // 0')
-agents_tokens=$(echo "$input" | jq -r '.context.agents_tokens // 0')
-mcp_tokens=$(echo "$input" | jq -r '.context.mcp_tokens // 0')
+# Build unified progress bar with per-bar gradient toward threshold
+unified_bar="["
+unified_rightmost_color="38;5;46"  # Default green
 
-# Format tokens for context items
-skills_tokens_fmt=$(format_tokens $skills_tokens)
-agents_tokens_fmt=$(format_tokens $agents_tokens)
-mcp_tokens_fmt=$(format_tokens $mcp_tokens)
+for ((i=0; i<bar_width; i++)); do
+    if [ "$i" -eq "$threshold_position" ]; then
+        # Insert red lightning bolt threshold marker
+        unified_bar+=$(printf "\033[0;31m⚡\033[0m")
+    fi
 
-# Build second line with context information
-status2=""
+    if [ "$i" -lt "$filled" ]; then
+        # Calculate color for this specific bar position
+        # Gradient from green (position 0) to red (threshold position)
+        if [ "$threshold_position" -gt 0 ]; then
+            bar_position_pct=$((i * 100 / threshold_position))
+        else
+            bar_position_pct=0
+        fi
 
-# Skills (yellow)
-if [ "$skills_count" -gt 0 ]; then
-    status2+=$(printf "\033[1;33mSkills: %d (%s)\033[0m" "$skills_count" "$skills_tokens_fmt")
-fi
+        # Map position percentage to gradient colors
+        if [ "$bar_position_pct" -le 20 ]; then
+            bar_color="38;5;46"   # Bright green
+        elif [ "$bar_position_pct" -le 40 ]; then
+            bar_color="38;5;118"  # Green-yellow
+        elif [ "$bar_position_pct" -le 60 ]; then
+            bar_color="38;5;154"  # Yellow-green
+        elif [ "$bar_position_pct" -le 70 ]; then
+            bar_color="38;5;226"  # Yellow
+        elif [ "$bar_position_pct" -le 80 ]; then
+            bar_color="38;5;220"  # Light orange
+        elif [ "$bar_position_pct" -le 90 ]; then
+            bar_color="38;5;214"  # Orange
+        elif [ "$bar_position_pct" -le 95 ]; then
+            bar_color="38;5;208"  # Orange-red
+        else
+            bar_color="38;5;196"  # Red
+        fi
 
-# Agents (green)
-if [ "$agents_count" -gt 0 ]; then
-    [ -n "$status2" ] && status2+=" "
-    status2+=$(printf "\033[1;32mAgents: %d (%s)\033[0m" "$agents_count" "$agents_tokens_fmt")
-fi
+        unified_rightmost_color=$bar_color
+        unified_bar+=$(printf "\033[${bar_color}m█\033[0m")
+    else
+        unified_bar+="░"
+    fi
+done
+
+unified_bar+="]"
+
+# Add progress bar and tokens to line 1
+line1+=$(printf " %s \033[${unified_rightmost_color}m%s\033[0m\033[1;36m/%s\033[0m" "$unified_bar" "$used_fmt_int" "$max_fmt_int")
+
+# LINE 2: Project/Git Info
+# Format: 📁 trellis POC → origin/POC ↑11
+line2=""
 
-# MCP Tools (blue)
-if [ "$mcp_tools_count" -gt 0 ]; then
-    [ -n "$status2" ] && status2+=" "
-    status2+=$(printf "\033[1;34mMCP: %d (%s)\033[0m" "$mcp_tools_count" "$mcp_tokens_fmt")
+# Folder icon and project name in cyan
+if [ -n "$project_name" ]; then
+    line2+=$(printf "📁 \033[1;36m%s\033[0m" "$project_name")
 fi
 
-# Output the status lines
-echo "$status"
-if [ -n "$status2" ]; then
-    echo "$status2"
+# Git branch and tracking
+if [ -n "$git_branch" ]; then
+    [ -n "$line2" ] && line2+=" "
+
+    # Branch in magenta
+    line2+=$(printf "\033[1;35m%s\033[0m" "$git_branch")
+
+    # Git status indicator (after branch name)
+    if [ -n "$git_status_indicator" ]; then
+        line2+=$(printf " %s" "$git_status_indicator")
+    fi
+
+    # Arrow and tracking
+    line2+=$(printf " \033[2;37m→\033[0m")
+
+    if [ -n "$git_remote" ]; then
+        # Tracking branch in blue
+        line2+=$(printf " \033[1;34m%s\033[0m" "$git_remote")
+
+        # Ahead/behind indicators
+        if [ -n "$git_ahead" ] || [ -n "$git_behind" ]; then
+            line2+=" "
+            [ -n "$git_ahead" ] && line2+=$(printf "\033[0;32m↑%s\033[0m" "$git_ahead")
+            if [ -n "$git_behind" ]; then
+                [ -n "$git_ahead" ] && line2+=" "
+                line2+=$(printf "\033[0;31m↓%s\033[0m" "$git_behind")
+            fi
+        fi
+    else
+        line2+=$(printf " \033[2;37m(no upstream)\033[0m")
+    fi
 fi
+
+# Output the 2-line dashboard
+echo "$line1"
+echo "$line2"