feat(cli): Invert quota language to 'percent used' (#20100)

Co-authored-by: jacob314 <jacob314@gmail.com>

packages/cli/src/ui/utils/displayUtils.ts

@@ -19,6 +19,9 @@ export const CACHE_EFFICIENCY_MEDIUM = 15;
 export const QUOTA_THRESHOLD_HIGH = 20;
 export const QUOTA_THRESHOLD_MEDIUM = 5;
 
+export const QUOTA_USED_WARNING_THRESHOLD = 80;
+export const QUOTA_USED_CRITICAL_THRESHOLD = 95;
+
 // --- Color Logic ---
 export const getStatusColor = (
   value: number,
@@ -36,3 +39,19 @@ export const getStatusColor = (
   }
   return options.defaultColor ?? theme.status.error;
 };
+
+/**
+ * Gets the status color based on "used" percentage (where higher is worse).
+ */
+export const getUsedStatusColor = (
+  usedPercentage: number,
+  thresholds: { warning: number; critical: number },
+) => {
+  if (usedPercentage >= thresholds.critical) {
+    return theme.status.error;
+  }
+  if (usedPercentage >= thresholds.warning) {
+    return theme.status.warning;
+  }
+  return undefined;
+};

packages/cli/src/ui/utils/formatters.test.ts

@@ -10,9 +10,45 @@ import {
   formatBytes,
   formatTimeAgo,
   stripReferenceContent,
+  formatResetTime,
 } from './formatters.js';
 
 describe('formatters', () => {
+  describe('formatResetTime', () => {
+    const NOW = new Date('2025-01-01T12:00:00Z');
+
+    beforeEach(() => {
+      vi.useFakeTimers();
+      vi.setSystemTime(NOW);
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it('should format full time correctly', () => {
+      const resetTime = new Date(NOW.getTime() + 90 * 60 * 1000).toISOString(); // 1h 30m
+      const result = formatResetTime(resetTime);
+      expect(result).toMatch(/1 hour 30 minutes at \d{1,2}:\d{2} [AP]M/);
+    });
+
+    it('should format terse time correctly', () => {
+      const resetTime = new Date(NOW.getTime() + 90 * 60 * 1000).toISOString(); // 1h 30m
+      expect(formatResetTime(resetTime, 'terse')).toBe('1h 30m');
+    });
+
+    it('should format column time correctly', () => {
+      const resetTime = new Date(NOW.getTime() + 90 * 60 * 1000).toISOString(); // 1h 30m
+      const result = formatResetTime(resetTime, 'column');
+      expect(result).toMatch(/\d{1,2}:\d{2} [AP]M \(1h 30m\)/);
+    });
+
+    it('should handle zero or negative diff by returning empty string', () => {
+      const resetTime = new Date(NOW.getTime() - 1000).toISOString();
+      expect(formatResetTime(resetTime)).toBe('');
+    });
+  });
+
   describe('formatBytes', () => {
     it('should format bytes into KB', () => {
       expect(formatBytes(12345)).toBe('12.1 KB');

packages/cli/src/ui/utils/formatters.ts

@@ -98,26 +98,58 @@ export function stripReferenceContent(text: string): string {
   return text.replace(pattern, '').trim();
 }
 
-export const formatResetTime = (resetTime: string): string => {
-  const diff = new Date(resetTime).getTime() - Date.now();
+export const formatResetTime = (
+  resetTime: string | undefined,
+  format: 'terse' | 'column' | 'full' = 'full',
+): string => {
+  if (!resetTime) return '';
+  const resetDate = new Date(resetTime);
+  if (isNaN(resetDate.getTime())) return '';
+
+  const diff = resetDate.getTime() - Date.now();
   if (diff <= 0) return '';
 
   const totalMinutes = Math.ceil(diff / (1000 * 60));
   const hours = Math.floor(totalMinutes / 60);
   const minutes = totalMinutes % 60;
 
-  const fmt = (val: number, unit: 'hour' | 'minute') =>
-    new Intl.NumberFormat('en', {
-      style: 'unit',
-      unit,
-      unitDisplay: 'narrow',
-    }).format(val);
+  const isTerse = format === 'terse';
+  const isColumn = format === 'column';
 
-  if (hours > 0 && minutes > 0) {
-    return `resets in ${fmt(hours, 'hour')} ${fmt(minutes, 'minute')}`;
-  } else if (hours > 0) {
-    return `resets in ${fmt(hours, 'hour')}`;
+  if (isTerse || isColumn) {
+    const hoursStr = hours > 0 ? `${hours}h` : '';
+    const minutesStr = minutes > 0 ? `${minutes}m` : '';
+    const duration =
+      hoursStr && minutesStr
+        ? `${hoursStr} ${minutesStr}`
+        : hoursStr || minutesStr;
+
+    if (isColumn) {
+      const timeStr = new Intl.DateTimeFormat('en-US', {
+        hour: 'numeric',
+        minute: 'numeric',
+      }).format(resetDate);
+      return duration ? `${timeStr} (${duration})` : timeStr;
+    }
+
+    return duration;
   }
 
-  return `resets in ${fmt(minutes, 'minute')}`;
+  let duration = '';
+  if (hours > 0) {
+    duration = `${hours} hour${hours > 1 ? 's' : ''}`;
+    if (minutes > 0) {
+      duration += ` ${minutes} minute${minutes > 1 ? 's' : ''}`;
+    }
+  } else {
+    duration = `${minutes} minute${minutes > 1 ? 's' : ''}`;
+  }
+
+  const timeStr = new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    timeZoneName: 'short',
+  }).format(resetDate);
+
+  return `${duration} at ${timeStr}`;
 };