fix(tui): align quota columns and soften color gradient

Author: grandmaster451

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

@@ -242,28 +242,31 @@ function formatQuotaLines(
     .map((quota) => {
       const usedRatio = Math.max(0, Math.min(quota.used / quota.limit, 1));
       return {
-        label: `${quota.label.toLowerCase()}:`,
+        labelName: 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 labelNameWidth = Math.max(...rows.map((r) => visibleWidth(r.labelName)));
   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 blockWidth = labelNameWidth + 1 + gap + percentColWidth + gap + resetColWidth;
 
   const lines: string[] = [];
   for (const row of rows) {
-    const numberColor = chalk.hex(hslToHex(Math.round((1 - row.ratio) * 120), 80, 40));
+    // Subtle gradient: fully green at 0 %, fully red at 100 %, desaturated.
+    const numberColor = chalk.hex(hslToHex(Math.round((1 - row.ratio) * 120), 55, 50));
     const content =
-      row.label.padEnd(labelColWidth + gap) +
+      row.labelName.padEnd(labelNameWidth) +
+      ':' +
+      ' '.repeat(gap) +
       numberColor(row.percent.padStart(percentColWidth)) +
       ' '.repeat(gap) +
-      chalk.hex(colors.text)(row.reset.padStart(resetColWidth));
+      chalk.hex(colors.text)(row.reset.padEnd(resetColWidth));
     const leftPad = Math.max(0, width - blockWidth);
     lines.push(truncateToWidth(' '.repeat(leftPad) + content, width));
   }

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

@@ -131,13 +131,8 @@ describe('FooterComponent', () => {
     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)');
+    expect(weekLine).toMatch(/weekly limit\s*:\s+41%\s+\(5d, 3h\)/);
+    expect(hourLine).toMatch(/5h limit\s*:\s+65%\s+\(1h, 3m\)/);
 
     // Both rows should end at the same column (right-aligned block).
     expect(weekLine.trimEnd().length).toBe(hourLine.trimEnd().length);
@@ -155,9 +150,7 @@ describe('FooterComponent', () => {
     const lines = footer.render(120);
     const quotaLine = lines[2]!;
 
-    expect(stripAnsi(quotaLine)).toContain('5h limit:');
-    expect(stripAnsi(quotaLine)).toContain('50%');
-    expect(stripAnsi(quotaLine)).toContain('(reset)');
+    expect(stripAnsi(quotaLine)).toMatch(/5h limit\s*:\s+50%\s+\(reset\)/);
     expect(truecolorCodes(quotaLine).size).toBeGreaterThan(0);
   });
 });