cc-usage-bar 0.4.0 → 0.4.1

package/AGENTS.md

@@ -1,6 +1,6 @@
 # AGENTS.md — cc-usage-bar 全功能说明
 
-> 这份文件是面向 AI 助手（Claude Code、Cursor、Codex 等）的安装/配置说明。如果用户对你说「装 cc-usage-bar」「帮我配 statusline 用量条」「装下 cc-usage-bar 帮我配好」之类的话，请按本文档完成全部步骤。**默认无需向用户追加确认**，除以下情况：用户的现有 `statusLine.command` 看上去包含定制脚本而你不确定如何保留时；或者用户没登录过 Claude Code（凭证查不到）。
+> 这份文件是面向 AI 助手（Claude Code、Cursor、Codex 等）的安装/配置说明。如果用户对你说「装 cc-usage-bar」「帮我配 statusline 用量条」「装下 cc-usage-bar 帮我配好」之类的话，请按本文档完成全部步骤。**默认无需向用户追加确认**；只有用户没登录过 Claude Code（凭证查不到）时才停下来让用户先登录。
 
 ## 1. 这个包是什么
 
@@ -18,6 +18,8 @@
 
 > **用户只描述偏好，你把 `statusLine.command` 配成 `cc-usage-bar-wrap`，并保留用户原有前缀。**
 
+如果已有 `statusLine.command`、`statusline-command.sh`、自定义 shell 脚本、git/path/model 展示等前缀内容，**一律视为要保留的前缀**：按 3.4 抽出它，并用 `cc-usage-bar-wrap --prefix=...` 串起来。不要询问是否覆盖、追加或暂不修改；追加保留是本项目默认行为。
+
 ## 3. 安装流程（必走）
 
 按顺序执行，每一步执行前简要告知用户：
@@ -39,7 +41,7 @@ which cc-usage-bar-wrap && which cc-usage-fetch
 where.exe cc-usage-bar-wrap
 ```
 
-要求：`cc-usage-bar` ≥ **0.4.0**（自适应换行 + 周限额上色 + countdown 预设 + 颜色 ramp 自定义）。已装旧版的话用 `npm i -g cc-usage-bar@latest` 升级。
+要求：`cc-usage-bar` ≥ **0.4.1**（自适应换行 + 周限额上色 + countdown 预设 + 颜色 ramp 自定义 + tint reverse 样式）。已装旧版的话用 `npm i -g cc-usage-bar@latest` 升级。
 
 ### 3.3 读取现有 statusLine.command
 
@@ -172,6 +174,9 @@ CC_USAGE_COLORS_BALANCE='0:cyan,60:yellow,90:red'
 # 单色渐变（tint）—— 完成部分上色，剩余部分变暗
 --bar-spec='{"mode":"tint","text":"████████","emptyStyle":"dim"}'
 
+# 反色填充（reverse）—— 完成部分用反色底块增强对比
+--bar-spec='{"mode":"tint","text":"Ciallo~(∠・ω< )⌒★","style":"reverse"}'
+
 # 动画帧（frames）—— 按百分比从帧序列里挑一帧
 --bar-spec='{"mode":"frames","frames":["⠋","⠙","⠹","⠸","⠼","⠴","⠦","⠧","⠇","⠏"]}'
 ```

package/README.md

@@ -117,6 +117,12 @@ cc-usage-bar install --format=bar-time \
 {"mode":"tint","text":"Ciallo～(∠・ω< )⌒★"}
 ```
 
+For stronger contrast, add `style:"reverse"` so the completed prefix is rendered as a reversed-color block:
+
+```json
+{"mode":"tint","text":"Ciallo～(∠・ω< )⌒★","style":"reverse"}
+```
+
 `cells` replaces the default block characters:
 
 ```json

package/README.zh-CN.md

@@ -122,6 +122,12 @@ cc-usage-bar install --format=bar-time \
 {"mode":"tint","text":"Ciallo～(∠・ω< )⌒★"}
 ```
 
+如果想让完成部分更像“填充底块”，可以加 `style:"reverse"`，完成部分会用反色块增强对比：
+
+```json
+{"mode":"tint","text":"Ciallo～(∠・ω< )⌒★","style":"reverse"}
+```
+
 #### cells：替换默认块字符
 
 ```json

package/dist/src/format.js

@@ -23,6 +23,7 @@ exports.FORMAT_PRESETS = [
     'bar-countdown',
 ];
 const ANSI_RESET = '\x1b[0m';
+const ANSI_REVERSE = '\x1b[7m';
 exports.COLOR_MAP = {
     none: '',
     dim: '\x1b[2m',
@@ -146,6 +147,8 @@ function parseBarSpec(raw) {
         const out = { mode: 'tint', text: obj.text };
         if (obj.emptyStyle === 'plain' || obj.emptyStyle === 'dim')
             out.emptyStyle = obj.emptyStyle;
+        if (obj.style === 'fg' || obj.style === 'reverse')
+            out.style = obj.style;
         return out;
     }
     if (obj.mode === 'frames') {
@@ -240,7 +243,8 @@ function formatBar(pct, width = 10, spec, activeColor = null, useColor = false)
         const inactive = chars.slice(filled).join('');
         if (!useColor)
             return active + inactive;
-        const activePart = activeColor && active ? paint(active, activeColor, true) : active;
+        const activeStyle = activeColor && spec.style === 'reverse' ? `${activeColor}${ANSI_REVERSE}` : activeColor;
+        const activePart = activeStyle && active ? paint(active, activeStyle, true) : active;
         const inactivePart = inactive && spec.emptyStyle !== 'plain' ? paint(inactive, exports.COLOR_MAP.dim, true) : inactive;
         return activePart + inactivePart;
     }
@@ -257,10 +261,22 @@ function paint(text, color, useColor) {
     return `${color}${text}${ANSI_RESET}`;
 }
 function applyTierPaint(text, color, opts, tpl) {
-    if (opts.barSpec?.mode === 'tint' && opts.color && tpl.includes('{bar}'))
-        return text;
     return paint(text, color, opts.color);
 }
+function applyTintTemplate(tpl, vars, color, opts) {
+    if (!opts.color || !color)
+        return applyTemplate(tpl, vars);
+    return tpl
+        .split(/(\{bar\})/g)
+        .map((part) => (part === '{bar}' ? vars.bar ?? '{bar}' : paint(applyTemplate(part, vars), color, true)))
+        .join('');
+}
+function renderTemplate(tpl, vars, color, opts) {
+    if (opts.barSpec?.mode === 'tint' && tpl.includes('{bar}')) {
+        return applyTintTemplate(tpl, vars, color, opts);
+    }
+    return applyTierPaint(applyTemplate(tpl, vars), color, opts, tpl);
+}
 function prependProvider(text, planName, opts) {
     return opts.showProviderName && planName ? `${planName} ${text}` : text;
 }
@@ -272,15 +288,15 @@ function renderTier(ctx, opts) {
     const tpl = opts.template ?? SUB_PRESET_TPL[opts.format];
     const ramp = ctx.label === '5h' ? opts.colorRamp5h ?? exports.DEFAULT_RAMP : opts.colorRampWk ?? exports.DEFAULT_RAMP;
     const color = colorFromRamp(pct, ramp);
-    const text = applyTemplate(tpl, {
+    const vars = {
         label: ctx.label,
         percent: String(pct),
         bar: formatBar(pct, opts.barWidth, opts.barSpec, color, opts.color),
         expiry: formatExpiry(ctx.tier.resets_at, opts.now),
         countdown: formatCountdown(ctx.tier.resets_at, opts.now),
         provider: ctx.provider,
-    });
-    return applyTierPaint(text, color, opts, tpl);
+    };
+    return renderTemplate(tpl, vars, color, opts);
 }
 function currencySymbol(unit) {
     switch (unit.toUpperCase()) {
@@ -315,18 +331,18 @@ function renderBalance(d, opts) {
     }
     if (typeof d.total !== 'number') {
         const tpl = opts.template ?? BAL_PRESET_TPL.compact;
-        const text = applyTemplate(tpl, {
+        const vars = {
             label: '', percent: '0', bar: '', expiry: '', countdown: '',
             provider: d.planName ?? '',
             amount: fmtMoney(d.remaining, d.unit),
-        });
-        return prependProvider(applyTierPaint(text, null, opts, tpl), d.planName, opts);
+        };
+        return prependProvider(renderTemplate(tpl, vars, null, opts), d.planName, opts);
     }
     const total = d.total;
     const usedPct = total > 0 ? ((total - d.remaining) / total) * 100 : 0;
     const tpl = opts.template ?? BAL_PRESET_TPL[opts.format];
     const color = colorFromRamp(usedPct, opts.colorRampBalance ?? exports.DEFAULT_RAMP);
-    const text = applyTemplate(tpl, {
+    const vars = {
         label: '',
         percent: String(Math.round(usedPct)),
         bar: formatBar(usedPct, opts.barWidth, opts.barSpec, color, opts.color),
@@ -334,8 +350,8 @@ function renderBalance(d, opts) {
         countdown: '',
         provider: d.planName ?? '',
         amount: `${fmtMoney(d.remaining, d.unit)}/${fmtMoney(total, d.unit)}`,
-    });
-    return prependProvider(applyTierPaint(text, color, opts, tpl), d.planName, opts);
+    };
+    return prependProvider(renderTemplate(tpl, vars, color, opts), d.planName, opts);
 }
 function renderUsage(data, opts) {
     if (!data)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc-usage-bar",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Show your Claude Code subscription usage (5h / 7d, or balance) in the statusline. Supports Anthropic, Kimi, GLM, MiniMax, DeepSeek, StepFun, SiliconFlow, OpenRouter, Novita.",
   "keywords": [
     "claude",