feat(tui): align footer quota columns and include reset countdown

Author: grandmaster451

apps/kimi-code/src/tui/components/chrome/footer.ts

@@ -4,7 +4,7 @@
  * Layout:
  *   Line 1: [yolo] [plan] <model> <cwd>  <git-badge>  <shortcut hints>
  *   Line 2: context: XX.X% (tokens/max)
- *   Line 3+: aligned quota rows: "label (used%/100%)" under context parens
+ *   Line 3+: right-aligned quota rows: "label:   XX%   (reset in ...)"
  */
 
 import type { Component } from '@earendil-works/pi-tui';
@@ -220,36 +220,52 @@ function hslToHex(h: number, s: number, l: number): string {
   return `#${f(0)}${f(8)}${f(4)}`;
 }
 
+function formatResetHint(hint: string | undefined): string {
+  if (hint === undefined) return '';
+  if (hint === 'reset') return '(reset)';
+  if (hint.startsWith('resets in ')) {
+    const duration = hint.slice('resets in '.length).replace(/ /g, ', ');
+    return `(${duration})`;
+  }
+  return `(${hint})`;
+}
+
 function formatQuotaLines(
   quotas: readonly QuotaInfo[] | undefined,
-  contextText: string,
-  contextWidth: number,
   width: number,
   colors: ColorPalette,
 ): string[] {
   if (quotas === undefined || quotas.length === 0) return [];
 
-  const parenIndex = contextText.indexOf('(');
-  const parenCol =
-    parenIndex >= 0 ? Math.max(0, width - contextWidth + parenIndex) : width;
+  const rows = quotas
+    .filter((quota) => quota.limit > 0)
+    .map((quota) => {
+      const usedRatio = Math.max(0, Math.min(quota.used / quota.limit, 1));
+      return {
+        label: `${quota.label.toLowerCase()}:`,
+        percent: `${Math.round(usedRatio * 100)}%`,
+        reset: formatResetHint(quota.resetHint),
+        ratio: usedRatio,
+      };
+    });
+  if (rows.length === 0) return [];
+
+  const labelColWidth = Math.max(...rows.map((r) => visibleWidth(r.label)));
+  const percentColWidth = Math.max(...rows.map((r) => visibleWidth(r.percent)));
+  const resetColWidth = Math.max(...rows.map((r) => visibleWidth(r.reset)));
+  const gap = 3;
+  const blockWidth = labelColWidth + gap + percentColWidth + gap + resetColWidth;
 
   const lines: string[] = [];
-  for (const quota of quotas) {
-    if (quota.limit <= 0) continue;
-    const usedRatio = Math.max(0, Math.min(quota.used / quota.limit, 1));
-    const usedPct = Math.round(usedRatio * 100);
-    // Gradient from dark green (0%) to red (100%).
-    const numberColor = chalk.hex(hslToHex(Math.round((1 - usedRatio) * 120), 80, 40));
-    const prefix = `${quota.label.toLowerCase()} `;
-    const prefixWidth = visibleWidth(prefix);
-    const pad = Math.max(0, parenCol - prefixWidth);
-    const line =
-      ' '.repeat(pad) +
-      chalk.hex(colors.text)(prefix) +
-      chalk.hex(colors.text)('(') +
-      numberColor(String(usedPct)) +
-      chalk.hex(colors.text)('/100%)');
-    lines.push(truncateToWidth(line, width));
+  for (const row of rows) {
+    const numberColor = chalk.hex(hslToHex(Math.round((1 - row.ratio) * 120), 80, 40));
+    const content =
+      row.label.padEnd(labelColWidth + gap) +
+      numberColor(row.percent.padStart(percentColWidth)) +
+      ' '.repeat(gap) +
+      chalk.hex(colors.text)(row.reset.padStart(resetColWidth));
+    const leftPad = Math.max(0, width - blockWidth);
+    lines.push(truncateToWidth(' '.repeat(leftPad) + content, width));
   }
   return lines;
 }
@@ -424,13 +440,7 @@ export class FooterComponent implements Component {
       line2 = ' '.repeat(leftPad) + chalk.hex(colors.text)(contextText);
     }
 
-    const quotaLines = formatQuotaLines(
-      state.quotas,
-      contextText,
-      contextWidth,
-      width,
-      colors,
-    );
+    const quotaLines = formatQuotaLines(state.quotas, width, colors);
     if (quotaLines.length > 0) {
       return [
         truncateToWidth(line1, width),

apps/kimi-code/test/tui/components/chrome/footer.test.ts

@@ -113,23 +113,34 @@ describe('FooterComponent', () => {
     expect(footer.render(80).length).toBe(2);
   });
 
-  it('renders managed quota rows aligned under the context parentheses', () => {
+  it('renders managed quota rows in aligned columns with reset hint', () => {
     const state: AppState = {
       ...appState,
       contextUsage: 0.5,
       contextTokens: 1_000,
       maxContextTokens: 2_000,
-      quotas: [{ label: 'Weekly limit', used: 25, limit: 100 }],
+      quotas: [
+        { label: 'Weekly limit', used: 41, limit: 100, resetHint: 'resets in 5d 3h' },
+        { label: '5H LIMIT', used: 65, limit: 100, resetHint: 'resets in 1h 3m' },
+      ],
     };
     const footer = new FooterComponent(state);
     const lines = footer.render(200);
 
-    expect(lines.length).toBe(3);
-    const contextLine = stripAnsi(lines[1]!);
-    const quotaLine = stripAnsi(lines[2]!);
-    expect(quotaLine).toContain('weekly limit');
-    expect(quotaLine).toContain('(25/100%)');
-    expect(quotaLine.indexOf('(')).toBe(contextLine.indexOf('('));
+    expect(lines.length).toBe(4);
+    const weekLine = stripAnsi(lines[2]!);
+    const hourLine = stripAnsi(lines[3]!);
+
+    expect(weekLine).toContain('weekly limit:');
+    expect(weekLine).toContain('41%');
+    expect(weekLine).toContain('(5d, 3h)');
+
+    expect(hourLine).toContain('5h limit:');
+    expect(hourLine).toContain('65%');
+    expect(hourLine).toContain('(1h, 3m)');
+
+    // Both rows should end at the same column (right-aligned block).
+    expect(weekLine.trimEnd().length).toBe(hourLine.trimEnd().length);
   });
 
   it('lowercases quota labels and colors the percentage', () => {
@@ -138,14 +149,15 @@ describe('FooterComponent', () => {
       contextUsage: 0,
       contextTokens: 1_000_000,
       maxContextTokens: 2_000_000,
-      quotas: [{ label: '5H LIMIT', used: 50, limit: 100 }],
+      quotas: [{ label: '5H LIMIT', used: 50, limit: 100, resetHint: 'reset' }],
     };
     const footer = new FooterComponent(state);
     const lines = footer.render(120);
     const quotaLine = lines[2]!;
 
-    expect(stripAnsi(quotaLine)).toContain('5h limit');
-    expect(stripAnsi(quotaLine)).toContain('(50/100%)');
+    expect(stripAnsi(quotaLine)).toContain('5h limit:');
+    expect(stripAnsi(quotaLine)).toContain('50%');
+    expect(stripAnsi(quotaLine)).toContain('(reset)');
     expect(truecolorCodes(quotaLine).size).toBeGreaterThan(0);
   });
 });