diff --git a/README.md b/README.md index 21451ba..ef4c372 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,34 @@ +
+ # ccstatusline -> ๐ŸŽจ A highly customizable status line formatter for Claude Code CLI that displays model info, git branch, token usage, and other metrics in your terminal. +**๐ŸŽจ A highly customizable status line formatter for Claude Code CLI** +*Display model info, git branch, token usage, and other metrics in your terminal* + +[![npm version](https://img.shields.io/npm/v/ccstatusline.svg)](https://www.npmjs.com/package/ccstatusline) +[![npm downloads](https://img.shields.io/npm/dm/ccstatusline.svg)](https://www.npmjs.com/package/ccstatusline) +[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/sirmalloc/ccstatusline/blob/main/LICENSE) +[![Node.js Version](https://img.shields.io/node/v/ccstatusline.svg)](https://nodejs.org) +[![install size](https://packagephobia.com/badge?p=ccstatusline)](https://packagephobia.com/result?p=ccstatusline) +[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/sirmalloc/ccstatusline/graphs/commit-activity) ![Demo](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/demo.gif) +
+ +## ๐Ÿ“š Table of Contents + +- [Recent Updates](#-recent-updates) +- [Features](#-features) +- [Quick Start](#-quick-start) +- [Usage](#-usage) +- [Development](#๏ธ-development) +- [Contributing](#-contributing) +- [License](#-license) +- [Related Projects](#-related-projects) + +--- + ## ๐Ÿ†• Recent Updates ### v1.1.0 - Enhanced Customization @@ -11,6 +36,8 @@ - **๐Ÿ”ค Bold Text Styling** - Toggle bold formatting for individual items in Color Configuration menu - **โš™๏ธ Global Options Menu** - New menu for global formatting preferences including padding, separators, color inheritance, and overrides +--- + ## โœจ Features - **๐Ÿ“Š Real-time Metrics** - Display model name, git branch, token usage, session duration, and more @@ -22,6 +49,8 @@ - **๐Ÿ“ Smart Width Detection** - Automatically adapts to terminal width with flex separators - **โšก Zero Config** - Sensible defaults that work out of the box +--- + ## ๐Ÿš€ Quick Start ### No installation needed! Use directly with npx: @@ -44,6 +73,8 @@ The interactive configuration tool provides a terminal UI where you can: > ๐Ÿ’ก **Tip:** Your settings are automatically saved to `~/.config/ccstatusline/settings.json` +--- + ## ๐Ÿ“– Usage Once configured, ccstatusline automatically formats your Claude Code status line. The status line appears at the bottom of your terminal during Claude Code sessions. @@ -68,6 +99,8 @@ Once configured, ccstatusline automatically formats your Claude Code status line - **Separator** - Visual divider between items (customizable: |, -, comma, space) - **Flex Separator** - Expands to fill available space +--- + ### โŒจ๏ธ TUI Controls #### Main Menu @@ -103,6 +136,8 @@ Configure how flex separators calculate available width: - **Full width minus 40** - Leaves space for auto-compact message (default) - **Full width until compact** - Switches based on context percentage threshold +--- + ### โš™๏ธ Global Options Configure global formatting preferences that apply to all status items: @@ -115,7 +150,9 @@ Configure global formatting preferences that apply to all status items: - Press **(p)** to edit padding - Press **(s)** to edit separator -#### Global Formatting +
+Global Formatting Options + - **Inherit Colors** - Default separators inherit foreground and background colors from the preceding widget - Press **(i)** to toggle - **Global Bold** - Apply bold formatting to all text regardless of individual item settings @@ -127,6 +164,8 @@ Configure global formatting preferences that apply to all status items: - Press **(b)** to cycle through colors - Press **(c)** to clear override +
+ > ๐Ÿ’ก **Note:** These settings are applied during rendering and don't add items to your widget list. They provide a consistent look across your entire status line without modifying individual item configurations. > โš ๏ธ **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. @@ -138,6 +177,8 @@ Some items support "raw value" mode which displays just the value without a labe - Normal: `Session: 2hr 15m` โ†’ Raw: `2hr 15m` - Normal: `Ctx: 18.6k` โ†’ Raw: `18.6k` +--- + ### ๐Ÿ”ง Custom Widgets #### Custom Text Widget @@ -160,10 +201,12 @@ Execute shell commands and display their output dynamically: - `curl -s wttr.in?format="%t"` - Show current temperature - `npx -y ccusage statusline` - Display Claude usage metrics (set timeout: 5000ms) -> โš ๏ธ **Note:** 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). +> โš ๏ธ **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). > ๐Ÿ’ก **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. +--- + ### ๐Ÿ”— Integration Example: ccusage [ccusage](https://github.com/samuelint/ccusage) is a tool that tracks and displays Claude Code usage metrics. You can integrate it directly into your status line: @@ -175,12 +218,14 @@ Execute shell commands and display their output dynamically: ![ccusage integration](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/ccusage.png) -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. +> ๐Ÿ“„ **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. ### โœ‚๏ธ Smart Truncation When terminal width is detected, status lines automatically truncate with ellipsis (...) if they exceed the available width, preventing line wrapping. +--- + ## ๐Ÿ› ๏ธ Development ### Prerequisites @@ -234,19 +279,28 @@ Contributions are welcome! Please feel free to submit a Pull Request. 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request +--- + ## ๐Ÿ“„ License [MIT](LICENSE) ยฉ Matthew Breedlove +--- + ## ๐Ÿ‘ค Author **Matthew Breedlove** - GitHub: [@sirmalloc](https://github.com/sirmalloc) +--- + ## ๐Ÿ”— Related Projects - [tweakcc](https://github.com/Piebald-AI/tweakcc) - Customize Claude Code themes, thinking verbs, and more. +- [ccusage](https://github.com/samuelint/ccusage) - Track and display Claude Code usage metrics. + +--- ## ๐Ÿ™ Acknowledgments @@ -256,11 +310,27 @@ Contributions are welcome! Please feel free to submit a Pull Request. --- -

- - npm version - - - License - -

+
+ +### ๐ŸŒŸ Show Your Support + +Give a โญ if this project helped you! + +[![GitHub stars](https://img.shields.io/github/stars/sirmalloc/ccstatusline?style=social)](https://github.com/sirmalloc/ccstatusline/stargazers) +[![GitHub forks](https://img.shields.io/github/forks/sirmalloc/ccstatusline?style=social)](https://github.com/sirmalloc/ccstatusline/network/members) +[![GitHub watchers](https://img.shields.io/github/watchers/sirmalloc/ccstatusline?style=social)](https://github.com/sirmalloc/ccstatusline/watchers) + +[![npm version](https://img.shields.io/npm/v/ccstatusline.svg)](https://www.npmjs.com/package/ccstatusline) +[![npm downloads](https://img.shields.io/npm/dm/ccstatusline.svg)](https://www.npmjs.com/package/ccstatusline) +[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/sirmalloc/ccstatusline/blob/main/LICENSE) +[![Made with Bun](https://img.shields.io/badge/Made%20with-Bun-000000.svg?logo=bun)](https://bun.sh) + +[![Issues](https://img.shields.io/github/issues/sirmalloc/ccstatusline)](https://github.com/sirmalloc/ccstatusline/issues) +[![Pull Requests](https://img.shields.io/github/issues-pr/sirmalloc/ccstatusline)](https://github.com/sirmalloc/ccstatusline/pulls) +[![Contributors](https://img.shields.io/github/contributors/sirmalloc/ccstatusline)](https://github.com/sirmalloc/ccstatusline/graphs/contributors) + +### ๐Ÿ’ฌ Connect + +[Report Bug](https://github.com/sirmalloc/ccstatusline/issues) ยท [Request Feature](https://github.com/sirmalloc/ccstatusline/issues) ยท [Discussions](https://github.com/sirmalloc/ccstatusline/discussions) + +
diff --git a/package.json b/package.json index 07b66b4..912b561 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ccstatusline", - "version": "1.1.7", + "version": "1.2.0", "description": "A customizable status line formatter for Claude Code CLI", "module": "src/ccstatusline.ts", "type": "module", @@ -20,16 +20,12 @@ "devDependencies": { "@types/bun": "latest", "@types/react": "^19.1.9", - "patch-package": "^8.0.0" - }, - "peerDependencies": { - "typescript": "^5" - }, - "dependencies": { + "typescript": "^5", "chalk": "^5.5.0", "ink": "^6.1.0", "ink-gradient": "^3.0.0", "ink-select-input": "^6.2.0", + "patch-package": "^8.0.0", "react": "^19.1.1" }, "keywords": [