fix(frontend/inventory+history): align skeleton column counts with #792 tables (closes #896)

PR #792 added the "Monthly Cost" column to two history tables and to the
active-commitments table, but the skeleton-loader call sites + their
explanatory comments still referenced the pre-#792 column counts. The
shimmer placeholders therefore render with one fewer cell than the real
table on first paint, and the comments are out of sync with the
rendered <th> lists.

- history.ts:217 — purchase-history skeleton: showSkeletonRows
  3rd arg 11 -> 12; comment lists the 12 rendered columns
  (adds "Monthly Cost").
- history.ts:224 — pending-approval queue skeleton: showSkeletonRows
  3rd arg 8 -> 12; comment lists the 12 rendered columns
  (Date / Account / Provider / Service / Count / Term / Payment /
  Monthly Cost / Upfront Cost / Monthly Savings / Created by / Actions).
- inventory.ts:86 — active-commitments skeleton comment: "10 cols" ->
  "11 cols" to match ACTIVE_COMMITMENTS_COLS (the call site already
  uses the constant, so this is comment-only).

Verified against the rendered <th> lists in renderHistoryList
(history.ts:650-663), the pending-approval queue (history.ts:946-959),
and renderActiveCommitmentsTable's headers array
(inventory.ts:156). Test suite (10 suites / 202 tests) and
tsc --noEmit both pass.

Author: cristim

frontend/src/history.ts

@@ -210,18 +210,19 @@ export async function loadHistory(): Promise<void> {
   // Issue #344 T3: skeleton rows for the purchase-history table. 8
   // rows matches the typical first-page row count so the skeleton
   // doesn't shrink dramatically when real data arrives. Column count
-  // (11) mirrors the rendered table headers in renderHistoryList:
+  // (12) mirrors the rendered table headers in renderHistoryList:
   // Status / Date / Provider / Service / Type / Region / Count /
-  // Term / Upfront Cost / Monthly Savings / Plan.
+  // Term / Upfront Cost / Monthly Cost / Monthly Savings / Plan.
   const listEl = document.getElementById('history-list');
-  if (listEl) showSkeletonRows(listEl, 8, 11);
-  // Pending-approval queue card (issue #340 sub-task): 3 rows x 8
-  // cols matches the queue table shape (Date / Provider / Service /
-  // Count / Upfront / Monthly Savings / Created by / Actions). The
-  // queue is typically much shorter than the full history list, so
-  // 3 rows is a sensible skeleton size.
+  if (listEl) showSkeletonRows(listEl, 8, 12);
+  // Pending-approval queue card (issue #340 sub-task): 3 rows x 12
+  // cols matches the queue table shape (Date / Account / Provider /
+  // Service / Count / Term / Payment / Monthly Cost / Upfront Cost /
+  // Monthly Savings / Created by / Actions). The queue is typically
+  // much shorter than the full history list, so 3 rows is a sensible
+  // skeleton size.
   const queueEl = document.getElementById('purchases-approval-queue');
-  if (queueEl) showSkeletonRows(queueEl, 3, 8);
+  if (queueEl) showSkeletonRows(queueEl, 3, 12);
 
   try {
     // Provider/account filters live in state.ts now (mutated by topbar chips).

frontend/src/inventory.ts

@@ -110,7 +110,7 @@ export async function loadActiveCommitments(): Promise<void> {
   // account chip is single-select; forward only when exactly one is active.
   const accountID = accountIDs.length === 1 ? accountIDs[0] : undefined;
 
-  // 5 rows × 10 cols matches the rendered table shape (see
+  // 5 rows × 11 cols matches the rendered table shape (see
   // renderActiveCommitmentsTable). The renderer wipes the container's
   // children for a clean handoff from the skeleton.
   showSkeletonRows(container, 5, ACTIVE_COMMITMENTS_COLS);