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

@@ -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", () => {

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),
   ];