From 3658207e44bcc32d96dcd429b7f8199e18925b4c Mon Sep 17 00:00:00 2001
From: redshift <213178690+1ftredsh@users.noreply.github.com>
Date: Sat, 12 Sep 2026 18:09:21 +0200
Subject: [PATCH] fix(tui): right-align the COST header over its values

The `n sats` cells were right-aligned but the header was padded on the
right, so `COST` floated at the left edge of the column while the values
sat against the right edge. Pad the header on the left instead so it
shares the column's right edge with every value.

Adds a positional assertion that the header and the value end at the same
column, so the alignment can't regress silently.
---
 src/tui/usage/render.test.ts | 6 ++++++
 src/tui/usage/render.ts      | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/tui/usage/render.test.ts b/src/tui/usage/render.test.ts
index 7493d22..1a1a864 100644
--- a/src/tui/usage/render.test.ts
+++ b/src/tui/usage/render.test.ts
@@ -239,6 +239,12 @@ describe("renderRecent token bars", () => {
     expect(out).toContain("3.00 sats");
     expect(out).not.toContain("1.00 sats");
     expect(out).not.toContain("2.00 sats");
+
+    // The header is right-aligned: it ends at the same column as the values.
+    const lines = out.split("\n");
+    const headerEnd = lines[1]!.indexOf("COST") + "COST".length;
+    const valueEnd = lines[3]!.indexOf("3.00 sats") + "3.00 sats".length;
+    expect(headerEnd).toBe(valueEnd);
   });
 
   test("keeps every row the same visible width as the box", () => {
diff --git a/src/tui/usage/render.ts b/src/tui/usage/render.ts
index 0e6f567..c6fcae5 100644
--- a/src/tui/usage/render.ts
+++ b/src/tui/usage/render.ts
@@ -739,7 +739,9 @@ export function renderRecent(stats: UsageStats, width: number, naming: ClientNam
     "TIME".padEnd(timeCol),
     "MODEL".padEnd(modelCol),
     "CACHE HIT".padEnd(tokensCol - inOutCol) + "IN".padEnd(inputCol) + " - " + "OUT".padStart(outputCol),
-    "COST".padEnd(costCol),
+    // Right-aligned like the values below it, so the column's right edge is
+    // shared by the header and every `n sats` cell.
+    "COST".padStart(costCol),
     ...(showProvider ? ["BASE:PROVIDER".padEnd(providerCol)] : []),
     "CLIENT".padEnd(clientCol),
   ];