ccstatusline-usage 2.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,682 @@
1
+ <div align="center">
2
+
3
+ <pre>
4
+ _ _ _ _
5
+ ___ ___ ___| |_ __ _| |_ _ _ ___| (_)_ __ ___
6
+ / __/ __/ __| __/ _` | __| | | / __| | | '_ \ / _ \
7
+ | (_| (__\__ \ || (_| | |_| |_| \__ \ | | | | | __/
8
+ \___\___|___/\__\__,_|\__|\__,_|___/_|_|_| |_|\___|
9
+
10
+ </pre>
11
+
12
+ # ccstatusline
13
+
14
+ **๐ŸŽจ A highly customizable status line formatter for Claude Code CLI**
15
+ *Display model info, git branch, token usage, and other metrics in your terminal*
16
+
17
+ [![npm version](https://img.shields.io/npm/v/ccstatusline-usage.svg)](https://www.npmjs.com/package/ccstatusline-usage)
18
+ [![npm downloads](https://img.shields.io/npm/dm/ccstatusline-usage.svg)](https://www.npmjs.com/package/ccstatusline-usage)
19
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/sirmalloc/ccstatusline/blob/main/LICENSE)
20
+ [![Node.js Version](https://img.shields.io/node/v/ccstatusline-usage.svg)](https://nodejs.org)
21
+ [![install size](https://packagephobia.com/badge?p=ccstatusline-usage)](https://packagephobia.com/result?p=ccstatusline-usage)
22
+ [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/sirmalloc/ccstatusline/graphs/commit-activity)
23
+
24
+ [![Mentioned in Awesome Claude Code](https://awesome.re/mentioned-badge.svg)](https://github.com/hesreallyhim/awesome-claude-code)
25
+ [![ClaudeLog - A comprehensive knowledge base for Claude](https://claudelog.com/img/claude_log_badge.svg)](https://claudelog.com/)
26
+
27
+ ## Fork Enhancements
28
+
29
+ This fork adds API-based usage widgets beyond the upstream:
30
+
31
+ - **Session/Weekly Usage** - Real utilization from Anthropic API with progress bars
32
+ - **Reset Timer** - Time until 5-hour session window resets
33
+ - **Context Window Display** - Visual bar showing context usage
34
+ - **Two-line Layout** - Session info on line 1, context on line 2
35
+
36
+ ### Enhanced Status Line Preview
37
+
38
+ ```
39
+ Session: [โ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘] 27.0% | Weekly: [โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘] 86.0% | 1:56 hr | Model: Opus 4.5 | Session ID: 714aa815-8a...
40
+ Context: [โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘] 103k/200k (51%)
41
+ ```
42
+
43
+ To use the enhanced configuration, copy `defaults/settings-enhanced.json` to your config directory.
44
+
45
+ ![Demo](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/demo.gif)
46
+
47
+ </div>
48
+
49
+ ## ๐Ÿ“š Table of Contents
50
+
51
+ - [Recent Updates](#-recent-updates)
52
+ - [Features](#-features)
53
+ - [Quick Start](#-quick-start)
54
+ - [Windows Support](#-windows-support)
55
+ - [Usage](#-usage)
56
+ - [API Documentation](#-api-documentation)
57
+ - [Development](#๏ธ-development)
58
+ - [Contributing](#-contributing)
59
+ - [License](#-license)
60
+ - [Related Projects](#-related-projects)
61
+
62
+ ---
63
+
64
+ ## ๐Ÿ†• Recent Updates
65
+
66
+ ### v2.0.16 - Add fish style path abbreviation toggle to Current Working Directory widget
67
+
68
+ ### v2.0.15 - Block Timer calculation fixes
69
+
70
+ - Fix miscalculation in the block timer
71
+
72
+ ### v2.0.14 - Add remaining mode toggle to Context Percentage widgets
73
+
74
+ - **Remaining Mode** - You can now toggle the Context Percentage widgets between usage percentage and remaining percentage when configuring them in the TUI by pressing the 'l' key.
75
+
76
+ ### v2.0.12 - Custom Text widget now supports emojis
77
+
78
+ - **๐Ÿ‘พ Emoji Support** - You can now paste emoji into the custom text widget. You can also turn on the merge option to get emoji labels for your widgets like this:
79
+
80
+ ![Emoji Support](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/emojiSupport.png)
81
+
82
+ ### v2.0.11 - Unlimited Status Lines
83
+
84
+ - **๐Ÿš€ No Line Limit** - Configure as many status lines as you need - the 3-line limitation has been removed
85
+
86
+ ### v2.0.10 - Git Updates
87
+
88
+ - **๐ŸŒณ Git Worktree widget** - Shows the active worktree name when working with git worktrees
89
+ - **๐Ÿ‘ป Hide 'no git' message toggle** - Git widgets now support hiding the 'no git' message when not in a repository (toggle with 'h' key while editing the widget)
90
+
91
+ ### v2.0.8 - Powerline Auto-Alignment
92
+
93
+ ![Powerline Auto-Alignment](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/autoAlign.png)
94
+
95
+ - **๐ŸŽฏ Widget Alignment** - Auto-align widgets across multiple status lines in Powerline mode for a clean, columnar layout (toggle with 'a' in Powerline Setup)
96
+
97
+ ### v2.0.7 - Current Working Directory & Session Cost
98
+
99
+ ![Current Working Directory and Session Cost](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/cwdAndSessionCost.png)
100
+
101
+ - **๐Ÿ“ Current Working Directory** - Display the current working directory with configurable segment display
102
+ - Set the number of path segments to show (e.g., show only last 2 segments: `.../Personal/ccstatusline`)
103
+ - Supports raw value mode for compact display
104
+ - Automatically truncates long paths with ellipsis
105
+ - **๐Ÿ’ฐ Session Cost Widget** - Track your Claude Code session costs (requires Claude Code 1.0.85+)
106
+ - Displays total session cost in USD
107
+ - Supports raw value mode (shows just `$X.YZ` vs `Cost: $X.YZ`)
108
+ - Real-time cost tracking from Claude Code session data
109
+ - Note: Cost may not update properly when using `/resume` (Claude Code limitation)
110
+ - **๐Ÿ› Bug Fixes**
111
+ - Fixed Block Timer calculations for accurate time tracking across block boundaries
112
+ - Improved widget editor stability with proper Ctrl+S handling
113
+ - Enhanced cursor display in numeric input fields
114
+
115
+ ### v2.0.2 - Block Timer Widget
116
+
117
+ ![Block Timer](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/blockTimerSmall.png)
118
+
119
+ - **โฑ๏ธ Block Timer** - Track your progress through 5-hour Claude Code blocks
120
+ - Displays time elapsed in current block as hours/minutes (e.g., "3hr 45m")
121
+ - Progress bar mode shows visual completion percentage
122
+ - Two progress bar styles: full width (32 chars) or compact (16 chars)
123
+ - Automatically detects block boundaries from transcript timestamps
124
+
125
+ ### v2.0.0 - Powerline Support & Enhanced Themes
126
+ - **โšก Powerline Mode** - Beautiful Powerline-style status lines with arrow separators and customizable caps
127
+ - **๐ŸŽจ Built-in Themes** - Multiple pre-configured themes that you can copy and customize
128
+ - **๐ŸŒˆ Advanced Color Support** - Basic (16), 256-color (with custom ANSI codes), and truecolor (with hex codes) modes
129
+ - **๐Ÿ”— Widget Merging** - Merge multiple widgets together with or without padding for seamless designs
130
+ - **๐Ÿ“ฆ Easy Installation** - Install directly with `npx` or `bunx` - no global package needed
131
+ - **๐Ÿ”ค Custom Separators** - Add multiple Powerline separators with custom hex codes for font support
132
+ - **๐Ÿš€ Auto Font Install** - Automatic Powerline font installation with user consent
133
+
134
+ ---
135
+
136
+ ## โœจ Features
137
+
138
+ - **๐Ÿ“Š Real-time Metrics** - Display model name, git branch, token usage, session duration, block timer, and more
139
+ - **๐ŸŽจ Fully Customizable** - Choose what to display and customize colors for each element
140
+ - **โšก Powerline Support** - Beautiful Powerline-style rendering with arrow separators, caps, and custom fonts
141
+ - **๐Ÿ“ Multi-line Support** - Configure multiple independent status lines
142
+ - **๐Ÿ–ฅ๏ธ Interactive TUI** - Built-in configuration interface using React/Ink
143
+ - **โš™๏ธ Global Options** - Apply consistent formatting across all widgets (padding, separators, bold, background)
144
+ - **๐Ÿš€ Cross-platform** - Works seamlessly with both Bun and Node.js
145
+ - **๐Ÿ”ง Flexible Configuration** - Supports custom Claude Code config directory via `CLAUDE_CONFIG_DIR` environment variable
146
+ - **๐Ÿ“ Smart Width Detection** - Automatically adapts to terminal width with flex separators
147
+ - **โšก Zero Config** - Sensible defaults that work out of the box
148
+
149
+ ---
150
+
151
+ ## ๐Ÿš€ Quick Start
152
+
153
+ ### No installation needed! Use directly with npx or bunx:
154
+
155
+ ```bash
156
+ # Run the configuration TUI with npm
157
+ npx ccstatusline-usage@latest
158
+
159
+ # Or with Bun (faster)
160
+ bunx ccstatusline-usage@latest
161
+ ```
162
+
163
+ ### Configure ccstatusline
164
+
165
+ The interactive configuration tool provides a terminal UI where you can:
166
+ - Configure multiple separate status lines
167
+ - Add/remove/reorder status line widgets
168
+ - Customize colors for each widget
169
+ - Configure flex separator behavior
170
+ - Edit custom text widgets
171
+ - Install/uninstall to Claude Code settings
172
+ - Preview your status line in real-time
173
+
174
+ > ๐Ÿ’ก **Tip:** Your settings are automatically saved to `~/.config/ccstatusline/settings.json`
175
+
176
+ > ๐Ÿ”ง **Custom Claude Config:** If your Claude Code configuration is in a non-standard location, set the `CLAUDE_CONFIG_DIR` environment variable:
177
+ > ```bash
178
+ > # Linux/macOS
179
+ > export CLAUDE_CONFIG_DIR=/custom/path/to/.claude
180
+ >
181
+ > # Windows PowerShell
182
+ > $env:CLAUDE_CONFIG_DIR="C:\custom\path\.claude"
183
+ > ```
184
+
185
+ ---
186
+
187
+ ## ๐ŸชŸ Windows Support
188
+
189
+ ccstatusline works seamlessly on Windows with full feature compatibility across PowerShell (5.1+ and 7+), Command Prompt, and Windows Subsystem for Linux (WSL).
190
+
191
+ ### Installation on Windows
192
+
193
+ #### Option 1: Using Bun (Recommended)
194
+ ```powershell
195
+ # Install Bun for Windows
196
+ irm bun.sh/install.ps1 | iex
197
+
198
+ # Run ccstatusline
199
+ bunx ccstatusline-usage@latest
200
+ ```
201
+
202
+ #### Option 2: Using Node.js
203
+ ```powershell
204
+ # Using npm
205
+ npx ccstatusline-usage@latest
206
+
207
+ # Or with Yarn
208
+ yarn dlx ccstatusline@latest
209
+
210
+ # Or with pnpm
211
+ pnpm dlx ccstatusline@latest
212
+ ```
213
+
214
+ ### Windows-Specific Features
215
+
216
+ #### Powerline Font Support
217
+ For optimal Powerline rendering on Windows:
218
+
219
+ **Windows Terminal** (Recommended):
220
+ - Supports Powerline fonts natively
221
+ - Download from [Microsoft Store](https://aka.ms/terminal)
222
+ - Auto-detects compatible fonts
223
+
224
+ **PowerShell/Command Prompt**:
225
+ ```powershell
226
+ # Install JetBrains Mono Nerd Font via winget
227
+ winget install DEVCOM.JetBrainsMonoNerdFont
228
+
229
+ # Alternative: Install base JetBrains Mono font
230
+ winget install "JetBrains.JetBrainsMono"
231
+
232
+ # Or download manually from: https://www.nerdfonts.com/font-downloads
233
+ ```
234
+
235
+ #### Path Handling
236
+ ccstatusline automatically handles Windows-specific paths:
237
+ - Git repositories work with both `/` and `\` path separators
238
+ - Current Working Directory widget displays Windows-style paths correctly
239
+ - Full support for mapped network drives and UNC paths
240
+ - Handles Windows drive letters (C:, D:, etc.)
241
+
242
+ ### Windows Troubleshooting
243
+
244
+ #### Common Issues & Solutions
245
+
246
+ **Issue**: Powerline symbols showing as question marks or boxes
247
+ ```powershell
248
+ # Solution: Install a compatible Nerd Font
249
+ winget install JetBrainsMono.NerdFont
250
+ # Then set the font in your terminal settings
251
+ ```
252
+
253
+ **Issue**: Git commands not recognized
254
+ ```powershell
255
+ # Check if Git is installed and in PATH
256
+ git --version
257
+
258
+ # If not found, install Git:
259
+ winget install Git.Git
260
+ # Or download from: https://git-scm.com/download/win
261
+ ```
262
+
263
+ **Issue**: Permission errors during installation
264
+ ```powershell
265
+ # Use non-global installation (recommended)
266
+ npx ccstatusline-usage@latest
267
+
268
+ # Or run PowerShell as Administrator for global install
269
+ ```
270
+
271
+ **Issue**: "Execution Policy" errors in PowerShell
272
+ ```powershell
273
+ # Temporarily allow script execution
274
+ Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
275
+ ```
276
+
277
+ **Issue**: Windows Defender blocking execution
278
+ ```powershell
279
+ # If Windows Defender flags the binary:
280
+ # 1. Open Windows Security
281
+ # 2. Go to "Virus & threat protection"
282
+ # 3. Add exclusion for the ccstatusline binary location
283
+ # Or use temporary bypass (not recommended for production):
284
+ Add-MpPreference -ExclusionPath "$env:USERPROFILE\.bun\bin"
285
+ ```
286
+
287
+ #### Windows Subsystem for Linux (WSL)
288
+ ccstatusline works perfectly in WSL environments:
289
+
290
+ ```bash
291
+ # Install in WSL Ubuntu/Debian
292
+ curl -fsSL https://bun.sh/install | bash
293
+ source ~/.bashrc
294
+ bunx ccstatusline-usage@latest
295
+ ```
296
+
297
+ **WSL Benefits**:
298
+ - Native Unix-style path handling
299
+ - Better font rendering in WSL terminals
300
+ - Seamless integration with Linux development workflows
301
+
302
+ ### Windows Terminal Configuration
303
+
304
+ For the best experience, configure Windows Terminal with these recommended settings:
305
+
306
+ #### Terminal Settings (settings.json)
307
+ ```json
308
+ {
309
+ "profiles": {
310
+ "defaults": {
311
+ "font": {
312
+ "face": "JetBrainsMono Nerd Font",
313
+ "size": 12
314
+ },
315
+ "colorScheme": "One Half Dark"
316
+ }
317
+ }
318
+ }
319
+ ```
320
+
321
+ #### Claude Code Integration
322
+ Configure ccstatusline in your Claude Code settings:
323
+
324
+ **Settings Location:**
325
+ - Default: `~/.claude/settings.json` (Windows: `%USERPROFILE%\.claude\settings.json`)
326
+ - Custom: Set `CLAUDE_CONFIG_DIR` environment variable to use a different directory
327
+
328
+ **For Bun users**:
329
+ ```json
330
+ {
331
+ "statusLine": "bunx ccstatusline-usage@latest"
332
+ }
333
+ ```
334
+
335
+ **For npm users**:
336
+ ```json
337
+ {
338
+ "statusLine": "npx ccstatusline-usage@latest"
339
+ }
340
+ ```
341
+
342
+ > ๐Ÿ’ก **Custom Config Directory:** If you use a non-standard Claude Code configuration directory, set the `CLAUDE_CONFIG_DIR` environment variable before running ccstatusline. The tool will automatically detect and use your custom location.
343
+
344
+ ### Performance on Windows
345
+
346
+ ccstatusline is optimized for Windows performance:
347
+ - **Bun runtime**: Significantly faster startup times on Windows
348
+ - **Caching**: Intelligent caching of git status and file operations
349
+ - **Async operations**: Non-blocking command execution
350
+ - **Memory efficient**: Minimal resource usage
351
+
352
+ ### Windows-Specific Widget Behavior
353
+
354
+ Some widgets have Windows-specific optimizations:
355
+
356
+ - **Current Working Directory**: Displays Windows drive letters and UNC paths
357
+ - **Git Widgets**: Handle Windows line endings (CRLF) automatically
358
+ - **Custom Commands**: Support both PowerShell and cmd.exe commands
359
+ - **Block Timer**: Accounts for Windows timezone handling
360
+
361
+ ---
362
+
363
+ ## ๐Ÿ“– Usage
364
+
365
+ Once configured, ccstatusline automatically formats your Claude Code status line. The status line appears at the bottom of your terminal during Claude Code sessions.
366
+
367
+ ### ๐Ÿ“Š Available Widgets
368
+
369
+ - **Model Name** - Shows the current Claude model (e.g., "Claude 3.5 Sonnet")
370
+ - **Git Branch** - Displays current git branch name
371
+ - **Git Changes** - Shows uncommitted insertions/deletions (e.g., "+42,-10")
372
+ - **Git Worktree** - Shows the name of the current git worktree
373
+ - **Session Clock** - Shows elapsed time since session start (e.g., "2hr 15m")
374
+ - **Session Cost** - Shows total session cost in USD (e.g., "$1.23")
375
+ - **Block Timer** - Shows time elapsed in current 5-hour block or progress bar
376
+ - **Current Working Directory** - Shows current working directory with configurable path segments
377
+ - **Version** - Shows Claude Code version
378
+ - **Output Style** - Shows the currently set output style in Claude Code
379
+ - **Tokens Input** - Shows input tokens used
380
+ - **Tokens Output** - Shows output tokens used
381
+ - **Tokens Cached** - Shows cached tokens used
382
+ - **Tokens Total** - Shows total tokens used
383
+ - **Context Length** - Shows current context length in tokens
384
+ - **Context Percentage** - Shows percentage of context limit used (dynamic: 1M for Sonnet 4.5 with `[1m]` suffix, 200k otherwise)
385
+ - **Context Percentage (usable)** - Shows percentage of usable context (dynamic: 800k for Sonnet 4.5 with `[1m]` suffix, 160k otherwise, accounting for auto-compact at 80%)
386
+ - **Terminal Width** - Shows detected terminal width (for debugging)
387
+ - **Custom Text** - Add your own custom text to the status line
388
+ - **Custom Command** - Execute shell commands and display their output (refreshes whenever the statusline is updated by Claude Code)
389
+ - **Separator** - Visual divider between widgets (customizable: |, -, comma, space)
390
+ - **Flex Separator** - Expands to fill available space
391
+
392
+ ---
393
+
394
+ ### Terminal Width Options
395
+ These settings affect where long lines are truncated, and where right-alignment occurs when using flex separators:
396
+ - **Full width always** - Uses full terminal width (may wrap if auto-compact message appears or IDE integration adds text)
397
+ - **Full width minus 40** - Reserves 40 characters for auto-compact message to prevent wrapping (default)
398
+ - **Full width until compact** - Dynamically switches between full width and minus 40 based on context percentage threshold (configurable, default 60%)
399
+
400
+ ---
401
+
402
+ ### โš™๏ธ Global Options
403
+
404
+ Configure global formatting preferences that apply to all widgets:
405
+
406
+ ![Global Options](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/global.png)
407
+
408
+ #### Default Padding & Separators
409
+ - **Default Padding** - Add consistent padding to the left and right of each widget
410
+ - **Default Separator** - Automatically insert a separator between all widgets
411
+ - Press **(p)** to edit padding
412
+ - Press **(s)** to edit separator
413
+
414
+ <details>
415
+ <summary><b>Global Formatting Options</b></summary>
416
+
417
+ - **Inherit Colors** - Default separators inherit foreground and background colors from the preceding widget
418
+ - Press **(i)** to toggle
419
+ - **Global Bold** - Apply bold formatting to all text regardless of individual widget settings
420
+ - Press **(o)** to toggle
421
+ - **Override Foreground Color** - Force all widgets to use the same text color
422
+ - Press **(f)** to cycle through colors
423
+ - Press **(g)** to clear override
424
+ - **Override Background Color** - Force all widgets to use the same background color
425
+ - Press **(b)** to cycle through colors
426
+ - Press **(c)** to clear override
427
+
428
+ </details>
429
+
430
+ > ๐Ÿ’ก **Note:** These settings are applied during rendering and don't add widgets to your widget list. They provide a consistent look across your entire status line without modifying individual widget configurations.
431
+
432
+ > โš ๏ธ **VSCode Users:** If colors appear incorrect in the VSCode integrated terminal, the "Terminal โ€บ Integrated: Minimum Contrast Ratio" (`terminal.integrated.minimumContrastRatio`) setting is forcing a minimum contrast between foreground and background colors. You can adjust this setting to 1 to disable the contrast enforcement, or use a standalone terminal for accurate colors.
433
+
434
+ ### โฑ๏ธ Block Timer Widget
435
+
436
+ The Block Timer widget helps you track your progress through Claude Code's 5-hour conversation blocks:
437
+
438
+ ![Block Timer](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/blockTimer.png)
439
+
440
+ **Display Modes:**
441
+ - **Time Display** - Shows elapsed time as "3hr 45m" (default)
442
+ - **Progress Bar** - Full width 32-character progress bar with percentage
443
+ - **Progress Bar (Short)** - Compact 16-character progress bar with percentage
444
+
445
+ **Features:**
446
+ - Automatically detects block boundaries from transcript timestamps
447
+ - Floors block start time to the hour for consistent tracking
448
+ - Shows "Block: 3hr 45m" in normal mode or just "3hr 45m" in raw value mode
449
+ - Progress bars show completion percentage (e.g., "[โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘] 73.9%")
450
+ - Toggle between modes with the **(p)** key in the widgets editor
451
+
452
+ ### ๐Ÿ”ค Raw Value Mode
453
+
454
+ Some widgets support "raw value" mode which displays just the value without a label:
455
+ - Normal: `Model: Claude 3.5 Sonnet` โ†’ Raw: `Claude 3.5 Sonnet`
456
+ - Normal: `Session: 2hr 15m` โ†’ Raw: `2hr 15m`
457
+ - Normal: `Block: 3hr 45m` โ†’ Raw: `3hr 45m`
458
+ - Normal: `Ctx: 18.6k` โ†’ Raw: `18.6k`
459
+
460
+ ---
461
+
462
+ ### ๐Ÿ”ง Custom Widgets
463
+
464
+ #### Custom Text Widget
465
+ Add static text to your status line. Perfect for:
466
+ - Project identifiers
467
+ - Environment indicators (dev/prod)
468
+ - Personal labels or reminders
469
+
470
+ #### Custom Command Widget
471
+ Execute shell commands and display their output dynamically:
472
+ - Refreshes whenever the statusline is updated by Claude Code
473
+ - Receives the full Claude Code JSON data via stdin (model info, session ID, transcript path, etc.)
474
+ - Displays command output inline in your status line
475
+ - Configurable timeout (default: 1000ms)
476
+ - Examples:
477
+ - `pwd | xargs basename` - Show current directory name
478
+ - `node -v` - Display Node.js version
479
+ - `git rev-parse --short HEAD` - Show current commit hash
480
+ - `date +%H:%M` - Display current time
481
+ - `curl -s wttr.in?format="%t"` - Show current temperature
482
+ - `npx -y ccusage@latest statusline` - Display Claude usage metrics (set timeout: 5000ms)
483
+
484
+ > โš ๏ธ **Important:** Commands should complete quickly to avoid delays. Long-running commands will be killed after the configured timeout. If you're not seeing output from your custom command, try increasing the timeout value (press 't' in the editor).
485
+
486
+ > ๐Ÿ’ก **Tip:** Custom commands can be other Claude Code compatible status line formatters! They receive the same JSON via stdin that ccstatusline receives from Claude Code, allowing you to chain or combine multiple status line tools.
487
+
488
+ ---
489
+
490
+ ### ๐Ÿ”— Integration Example: ccusage
491
+
492
+ [ccusage](https://github.com/ryoppippi/ccusage) is a tool that tracks and displays Claude Code usage metrics. You can integrate it directly into your status line:
493
+
494
+ 1. Add a Custom Command widget
495
+ 2. Set command: `npx -y ccusage@latest statusline`
496
+ 3. Set timeout: `5000` (5 seconds for initial download)
497
+ 4. Enable "preserve colors" to keep ccusage's color formatting
498
+
499
+ ![ccusage integration](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/ccusage.png)
500
+
501
+ > ๐Ÿ“„ **How it works:** The command receives Claude Code's JSON data via stdin, allowing ccusage to access session information, model details, and transcript data for accurate usage tracking.
502
+
503
+ ### โœ‚๏ธ Smart Truncation
504
+
505
+ When terminal width is detected, status lines automatically truncate with ellipsis (...) if they exceed the available width, preventing line wrapping.
506
+
507
+ ---
508
+
509
+ ## ๐Ÿ“– API Documentation
510
+
511
+ Complete API documentation is generated using TypeDoc and includes detailed information about:
512
+
513
+ - **Core Types**: Configuration interfaces, widget definitions, and render contexts
514
+ - **Widget System**: All available widgets and their customization options
515
+ - **Utility Functions**: Helper functions for rendering, configuration, and terminal handling
516
+ - **Status Line Rendering**: Core rendering engine and formatting options
517
+
518
+ ### Generating Documentation
519
+
520
+ To generate the API documentation locally:
521
+
522
+ ```bash
523
+ # Generate documentation
524
+ bun run docs
525
+
526
+ # Clean generated documentation
527
+ bun run docs:clean
528
+ ```
529
+
530
+ The documentation will be generated in the `docs/` directory and can be viewed by opening `docs/index.html` in your web browser.
531
+
532
+ ### Documentation Structure
533
+
534
+ - **Types**: Core TypeScript interfaces and type definitions
535
+ - **Widgets**: Individual widget implementations and their APIs
536
+ - **Utils**: Utility functions for configuration, rendering, and terminal operations
537
+ - **Main Module**: Primary entry point and orchestration functions
538
+
539
+ ---
540
+
541
+ ## ๐Ÿ› ๏ธ Development
542
+
543
+ ### Prerequisites
544
+
545
+ - [Bun](https://bun.sh) (v1.0+)
546
+ - Git
547
+ - Node.js 18+ (optional, for npm publishing)
548
+
549
+ ### Setup
550
+
551
+ ```bash
552
+ # Clone the repository
553
+ git clone https://github.com/sirmalloc/ccstatusline.git
554
+ cd ccstatusline
555
+
556
+ # Install dependencies
557
+ bun install
558
+ ```
559
+
560
+ ### Development Commands
561
+
562
+ ```bash
563
+ # Run in TUI mode (configuration)
564
+ bun run src/ccstatusline.ts
565
+
566
+ # Build for distribution
567
+ bun run build
568
+ ```
569
+
570
+ ### ๐Ÿ“ Project Structure
571
+
572
+ ```
573
+ ccstatusline/
574
+ โ”œโ”€โ”€ src/
575
+ โ”‚ โ”œโ”€โ”€ ccstatusline.ts # Main entry point
576
+ โ”‚ โ”œโ”€โ”€ tui/ # React/Ink configuration UI
577
+ โ”‚ โ”‚ โ”œโ”€โ”€ App.tsx # Root TUI component
578
+ โ”‚ โ”‚ โ”œโ”€โ”€ index.tsx # TUI entry point
579
+ โ”‚ โ”‚ โ””โ”€โ”€ components/ # UI components
580
+ โ”‚ โ”‚ โ”œโ”€โ”€ MainMenu.tsx
581
+ โ”‚ โ”‚ โ”œโ”€โ”€ LineSelector.tsx
582
+ โ”‚ โ”‚ โ”œโ”€โ”€ ItemsEditor.tsx
583
+ โ”‚ โ”‚ โ”œโ”€โ”€ ColorMenu.tsx
584
+ โ”‚ โ”‚ โ”œโ”€โ”€ PowerlineSetup.tsx
585
+ โ”‚ โ”‚ โ””โ”€โ”€ ...
586
+ โ”‚ โ”œโ”€โ”€ widgets/ # Status line widget implementations
587
+ โ”‚ โ”‚ โ”œโ”€โ”€ Model.ts
588
+ โ”‚ โ”‚ โ”œโ”€โ”€ GitBranch.ts
589
+ โ”‚ โ”‚ โ”œโ”€โ”€ TokensTotal.ts
590
+ โ”‚ โ”‚ โ”œโ”€โ”€ OutputStyle.ts
591
+ โ”‚ โ”‚ โ””โ”€โ”€ ...
592
+ โ”‚ โ”œโ”€โ”€ utils/ # Utility functions
593
+ โ”‚ โ”‚ โ”œโ”€โ”€ config.ts # Settings management
594
+ โ”‚ โ”‚ โ”œโ”€โ”€ renderer.ts # Core rendering logic
595
+ โ”‚ โ”‚ โ”œโ”€โ”€ powerline.ts # Powerline font utilities
596
+ โ”‚ โ”‚ โ”œโ”€โ”€ colors.ts # Color definitions
597
+ โ”‚ โ”‚ โ””โ”€โ”€ claude-settings.ts # Claude Code integration (supports CLAUDE_CONFIG_DIR)
598
+ โ”‚ โ””โ”€โ”€ types/ # TypeScript type definitions
599
+ โ”‚ โ”œโ”€โ”€ Settings.ts
600
+ โ”‚ โ”œโ”€โ”€ Widget.ts
601
+ โ”‚ โ”œโ”€โ”€ PowerlineConfig.ts
602
+ โ”‚ โ””โ”€โ”€ ...
603
+ โ”œโ”€โ”€ dist/ # Built files (generated)
604
+ โ”œโ”€โ”€ package.json
605
+ โ”œโ”€โ”€ tsconfig.json
606
+ โ””โ”€โ”€ README.md
607
+ ```
608
+ ## ๐Ÿค Contributing
609
+
610
+ Contributions are welcome! Please feel free to submit a Pull Request.
611
+
612
+ 1. Fork the repository
613
+ 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
614
+ 3. Commit your changes (`git commit -m 'Add some amazing feature'`)
615
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
616
+ 5. Open a Pull Request
617
+
618
+ ---
619
+
620
+ ## ๐Ÿ“„ License
621
+
622
+ [MIT](LICENSE) ยฉ Matthew Breedlove
623
+
624
+ ---
625
+
626
+ ## ๐Ÿ‘ค Author
627
+
628
+ **Matthew Breedlove**
629
+
630
+ - GitHub: [@sirmalloc](https://github.com/sirmalloc)
631
+
632
+ ---
633
+
634
+ ## ๐Ÿ”— Related Projects
635
+
636
+ - [tweakcc](https://github.com/Piebald-AI/tweakcc) - Customize Claude Code themes, thinking verbs, and more.
637
+ - [ccusage](https://github.com/ryoppippi/ccusage) - Track and display Claude Code usage metrics.
638
+
639
+ ---
640
+
641
+ ## ๐Ÿ™ Acknowledgments
642
+
643
+ - Built for use with [Claude Code CLI](https://claude.ai/code) by Anthropic
644
+ - Powered by [Ink](https://github.com/vadimdemedes/ink) for the terminal UI
645
+ - Made with โค๏ธ for the Claude Code community
646
+
647
+ ---
648
+
649
+ ## Star History
650
+
651
+ <a href="https://www.star-history.com/#sirmalloc/ccstatusline&Timeline">
652
+ <picture>
653
+ <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=sirmalloc/ccstatusline&type=Timeline&theme=dark" />
654
+ <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=sirmalloc/ccstatusline&type=Timeline" />
655
+ <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=sirmalloc/ccstatusline&type=Timeline" />
656
+ </picture>
657
+ </a>
658
+
659
+ <div align="center">
660
+
661
+ ### ๐ŸŒŸ Show Your Support
662
+
663
+ Give a โญ if this project helped you!
664
+
665
+ [![GitHub stars](https://img.shields.io/github/stars/sirmalloc/ccstatusline?style=social)](https://github.com/sirmalloc/ccstatusline/stargazers)
666
+ [![GitHub forks](https://img.shields.io/github/forks/sirmalloc/ccstatusline?style=social)](https://github.com/sirmalloc/ccstatusline/network/members)
667
+ [![GitHub watchers](https://img.shields.io/github/watchers/sirmalloc/ccstatusline?style=social)](https://github.com/sirmalloc/ccstatusline/watchers)
668
+
669
+ [![npm version](https://img.shields.io/npm/v/ccstatusline-usage.svg)](https://www.npmjs.com/package/ccstatusline-usage)
670
+ [![npm downloads](https://img.shields.io/npm/dm/ccstatusline-usage.svg)](https://www.npmjs.com/package/ccstatusline-usage)
671
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/sirmalloc/ccstatusline/blob/main/LICENSE)
672
+ [![Made with Bun](https://img.shields.io/badge/Made%20with-Bun-000000.svg?logo=bun)](https://bun.sh)
673
+
674
+ [![Issues](https://img.shields.io/github/issues/sirmalloc/ccstatusline)](https://github.com/sirmalloc/ccstatusline/issues)
675
+ [![Pull Requests](https://img.shields.io/github/issues-pr/sirmalloc/ccstatusline)](https://github.com/sirmalloc/ccstatusline/pulls)
676
+ [![Contributors](https://img.shields.io/github/contributors/sirmalloc/ccstatusline)](https://github.com/sirmalloc/ccstatusline/graphs/contributors)
677
+
678
+ ### ๐Ÿ’ฌ Connect
679
+
680
+ [Report Bug](https://github.com/sirmalloc/ccstatusline/issues) ยท [Request Feature](https://github.com/sirmalloc/ccstatusline/issues) ยท [Discussions](https://github.com/sirmalloc/ccstatusline/discussions)
681
+
682
+ </div>