fix: clarify usage time format — show 'resets in' instead of ambiguous elapsed/total (#244)

* fix: clarify usage time format — show 'resets in' instead of ambiguous elapsed/total

Fixes #240

The format `(2h 43m / 5h)` was confusing because it mimics the common
`(elapsed / total)` pattern, but actually showed time remaining until
reset. Changed to `(resets in 2h 43m)` which is unambiguous.

Before: `Usage █░░░░░░░░░ 7% (2h 43m / 5h)`
After:  `Usage █░░░░░░░░░ 7% (resets in 2h 43m)`

* test: cover usage reset wording

---------

Co-authored-by: d 🔹 <258577966+voidborne-d@users.noreply.github.com>
Co-authored-by: Jarrod Watts <jarrod@cubelabs.xyz>

Author: voidborne-d

src/render/lines/usage.ts

@@ -49,10 +49,10 @@ export function renderUsageLine(ctx: RenderContext): string | null {
   const usageBarEnabled = display?.usageBarEnabled ?? true;
   const fiveHourPart = usageBarEnabled
     ? (fiveHourReset
-        ? `${quotaBar(fiveHour ?? 0, getAdaptiveBarWidth(), colors)} ${fiveHourDisplay} (${fiveHourReset} / 5h)`
+        ? `${quotaBar(fiveHour ?? 0, getAdaptiveBarWidth(), colors)} ${fiveHourDisplay} (resets in ${fiveHourReset})`
         : `${quotaBar(fiveHour ?? 0, getAdaptiveBarWidth(), colors)} ${fiveHourDisplay}`)
     : (fiveHourReset
-        ? `5h: ${fiveHourDisplay} (${fiveHourReset})`
+        ? `5h: ${fiveHourDisplay} (resets in ${fiveHourReset})`
         : `5h: ${fiveHourDisplay}`);
 
   const sevenDayThreshold = display?.sevenDayThreshold ?? 80;
@@ -64,10 +64,10 @@ export function renderUsageLine(ctx: RenderContext): string | null {
     const sevenDayReset = formatResetTime(ctx.usageData.sevenDayResetAt);
     const sevenDayPart = usageBarEnabled
       ? (sevenDayReset
-          ? `${quotaBar(sevenDay, getAdaptiveBarWidth(), colors)} ${sevenDayDisplay} (${sevenDayReset} / 7d)`
+          ? `${quotaBar(sevenDay, getAdaptiveBarWidth(), colors)} ${sevenDayDisplay} (resets in ${sevenDayReset})`
           : `${quotaBar(sevenDay, getAdaptiveBarWidth(), colors)} ${sevenDayDisplay}`)
       : (sevenDayReset
-          ? `7d: ${sevenDayDisplay} (${sevenDayReset})`
+          ? `7d: ${sevenDayDisplay} (resets in ${sevenDayReset})`
           : `7d: ${sevenDayDisplay}`);
     return `${label} ${fiveHourPart} | ${sevenDayPart}${syncingSuffix}`;
   }

tests/render.test.js

@@ -686,6 +686,7 @@ test('renderSessionLine shows 5hr reset countdown', () => {
 test('renderUsageLine shows reset countdown in days when >= 24 hours', () => {
   const ctx = baseContext();
   const resetTime = new Date(Date.now() + (151 * 3600000) + (59 * 60000)); // 6d 7h 59m from now
+  ctx.config.display.usageBarEnabled = true;
   ctx.usageData = {
     planName: 'Pro',
     fiveHour: 45,
@@ -696,7 +697,7 @@ test('renderUsageLine shows reset countdown in days when >= 24 hours', () => {
   const line = renderUsageLine(ctx);
   assert.ok(line, 'should render usage line');
   const plain = stripAnsi(line);
-  assert.ok(/\(\d+d( \d+h)?\)/.test(plain), `expected day/hour reset format, got: ${plain}`);
+  assert.ok(plain.includes('(resets in 6d 7h)'), `expected bar-mode reset wording, got: ${plain}`);
   assert.ok(!plain.includes('151h'), `should avoid raw hour format for long durations: ${plain}`);
 });
 
@@ -716,7 +717,27 @@ test('renderUsageLine shows 7d reset countdown in text-only mode', () => {
   const line = stripAnsi(renderUsageLine(ctx));
   assert.ok(line.includes('5h: 45%'), `should include 5h text-only usage: ${line}`);
   assert.ok(line.includes('7d: 85%'), `should include 7d text-only usage: ${line}`);
-  assert.ok(line.includes('(1d 4h)'), `should include 7d reset countdown in text-only mode: ${line}`);
+  assert.ok(line.includes('(resets in 1d 4h)'), `should include 7d reset countdown in text-only mode: ${line}`);
+});
+
+test('renderUsageLine shows 7d reset countdown in bar mode when above threshold', () => {
+  const ctx = baseContext();
+  const resetTime = new Date(Date.now() + (28 * 60 * 60 * 1000)); // 1d 4h from now
+  ctx.config.display.usageBarEnabled = true;
+  ctx.config.display.sevenDayThreshold = 80;
+  ctx.usageData = {
+    planName: 'Pro',
+    fiveHour: 45,
+    sevenDay: 85,
+    fiveHourResetAt: null,
+    sevenDayResetAt: resetTime,
+  };
+
+  const line = stripAnsi(renderUsageLine(ctx));
+  assert.ok(line.includes('45%'), `should include 5h percentage in bar mode: ${line}`);
+  assert.ok(line.includes('85%'), `should include 7d percentage: ${line}`);
+  assert.ok(line.includes('(resets in 1d 4h)'), `should include 7d reset countdown in bar mode: ${line}`);
+  assert.ok(line.includes('|'), `should render both usage windows above the threshold: ${line}`);
 });
 
 test('renderSessionLine displays limit reached warning', () => {