From 13b99dd3681d6ae27dc946b385044cfbd6f3421d Mon Sep 17 00:00:00 2001
From: Cristian Magherusan-Stanciu <cristi.magherusan@gmail.com>
Date: Wed, 27 May 2026 14:04:34 +0200
Subject: [PATCH] fix(inventory): default sub-tab is Active Commitments, not RI
 Exchange

Users opening Inventory & Coverage expect the at-a-glance commitment
view, not the more specialised RI Exchange workflow.

Closes #751.
---
 frontend/src/__tests__/inventory.test.ts | 21 ++++++++++++---------
 frontend/src/index.html                  |  8 ++++----
 frontend/src/inventory.ts                |  6 +++---
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/src/__tests__/inventory.test.ts b/frontend/src/__tests__/inventory.test.ts
index fe3f71044..052e7a020 100644
--- a/frontend/src/__tests__/inventory.test.ts
+++ b/frontend/src/__tests__/inventory.test.ts
@@ -37,9 +37,9 @@ function buildInventoryDOM(): void {
   subnav.classList.add('inventory-subnav');
 
   for (const [name, label, isActive] of [
-    ['active-commitments', 'Active commitments', false],
+    ['active-commitments', 'Active commitments', true],
     ['coverage', 'Coverage', false],
-    ['ri-exchange', 'RI Exchange', true],
+    ['ri-exchange', 'RI Exchange', false],
   ] as const) {
     const btn = document.createElement('button');
     btn.classList.add('sub-tab-btn');
@@ -56,7 +56,6 @@ function buildInventoryDOM(): void {
   // container (matches index.html shape).
   const ac = document.createElement('section');
   ac.id = 'inventory-active-commitments';
-  ac.classList.add('hidden');
   const refresh = document.createElement('button');
   refresh.id = 'active-commitments-refresh-btn';
   refresh.textContent = 'Refresh';
@@ -82,6 +81,7 @@ function buildInventoryDOM(): void {
 
   const riSection = document.createElement('section');
   riSection.id = 'inventory-ri-exchange';
+  riSection.classList.add('hidden');
   riSection.textContent = 'ri-exchange';
   tab.appendChild(riSection);
 
@@ -165,25 +165,28 @@ describe('Inventory & Coverage sub-section switching', () => {
     expect(loadRIExchange).toHaveBeenCalledTimes(1);
   });
 
-  test('switchInventorySubSection falls back to ri-exchange for unknown sub-section', () => {
+  test('switchInventorySubSection falls back to active-commitments for unknown sub-section', () => {
     switchInventorySubSection('something-unknown');
 
-    expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(false);
-    expect(loadRIExchange).toHaveBeenCalledTimes(1);
+    expect(document.getElementById('inventory-active-commitments')?.classList.contains('hidden')).toBe(false);
+    expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(true);
+    expect(api.listActiveCommitments).toHaveBeenCalledTimes(1);
   });
 
   test('loadInventory wires sub-nav click handlers and lands on default', () => {
     loadInventory();
 
-    // Default landing is ri-exchange.
-    expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(false);
+    // Default landing is active-commitments (issue #751).
+    expect(document.getElementById('inventory-active-commitments')?.classList.contains('hidden')).toBe(false);
+    expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(true);
 
     // Clicking a sub-tab button switches the section.
     const coverageBtn = document.querySelector<HTMLButtonElement>('[data-inv-subtab="coverage"]')!;
     coverageBtn.click();
     expect(document.getElementById('inventory-coverage')?.classList.contains('hidden')).toBe(false);
-    expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(true);
+    expect(document.getElementById('inventory-active-commitments')?.classList.contains('hidden')).toBe(true);
   });
+
 });
 
 describe('loadActiveCommitments — fetch + render flow', () => {
diff --git a/frontend/src/index.html b/frontend/src/index.html
index b1f88a322..4027dbb29 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -214,16 +214,16 @@ <h2>Purchase History</h2>
             <!-- Inventory & Coverage Tab (umbrella section folding in RI Exchange, issue #340 T4) -->
             <div id="inventory-tab" class="tab-content" role="tabpanel" aria-labelledby="inventory-tab-btn">
                 <div class="inventory-subnav" role="tablist" aria-label="Inventory &amp; Coverage navigation">
-                    <button class="sub-tab-btn" id="inv-subtab-active-commitments" data-inv-subtab="active-commitments" role="tab" aria-selected="false" aria-controls="inventory-active-commitments">Active commitments</button>
+                    <button class="sub-tab-btn active" id="inv-subtab-active-commitments" data-inv-subtab="active-commitments" role="tab" aria-selected="true" aria-controls="inventory-active-commitments">Active commitments</button>
                     <button class="sub-tab-btn" id="inv-subtab-coverage" data-inv-subtab="coverage" role="tab" aria-selected="false" aria-controls="inventory-coverage">Coverage</button>
-                    <button class="sub-tab-btn active" id="inv-subtab-ri-exchange" data-inv-subtab="ri-exchange" role="tab" aria-selected="true" aria-controls="inventory-ri-exchange">RI Exchange</button>
+                    <button class="sub-tab-btn" id="inv-subtab-ri-exchange" data-inv-subtab="ri-exchange" role="tab" aria-selected="false" aria-controls="inventory-ri-exchange">RI Exchange</button>
                 </div>
 
                 <!-- Active commitments — per-commitment list backed by
                      /api/inventory/commitments (issue #340 deferred sub-task).
                      The table is rendered into #active-commitments-list by
                      loadActiveCommitments in inventory.ts. -->
-                <section id="inventory-active-commitments" class="hidden" role="tabpanel" aria-labelledby="inv-subtab-active-commitments">
+                <section id="inventory-active-commitments" role="tabpanel" aria-labelledby="inv-subtab-active-commitments">
                     <section class="card page-hero">
                         <div class="section-header">
                             <h2>Active commitments</h2>
@@ -254,7 +254,7 @@ <h2>Coverage</h2>
                 </section>
 
                 <!-- RI Exchange — relocated from the former top-level ri-exchange-tab. -->
-                <section id="inventory-ri-exchange" role="tabpanel" aria-labelledby="inv-subtab-ri-exchange">
+                <section id="inventory-ri-exchange" class="hidden" role="tabpanel" aria-labelledby="inv-subtab-ri-exchange">
                     <section class="card page-hero">
                         <div class="section-header">
                             <h2>Convertible RI Exchange</h2>
diff --git a/frontend/src/inventory.ts b/frontend/src/inventory.ts
index 487f78d85..8ca889a8d 100644
--- a/frontend/src/inventory.ts
+++ b/frontend/src/inventory.ts
@@ -24,7 +24,7 @@ const SUB_SECTION_IDS: Record<InventorySubSection, string> = {
   'ri-exchange': 'inventory-ri-exchange',
 };
 
-const DEFAULT_SUB_SECTION: InventorySubSection = 'ri-exchange';
+const DEFAULT_SUB_SECTION: InventorySubSection = 'active-commitments';
 
 let currentSubSection: InventorySubSection | undefined;
 let listenersWired = false;
@@ -382,8 +382,8 @@ function wireSubNavListeners(): void {
 
 /**
  * Initialize the Inventory & Coverage section. Called by navigation.ts'
- * switchTab when 'inventory' is selected. Defaults to the ri-exchange
- * sub-section if the user hasn't selected one this session.
+ * switchTab when 'inventory' is selected. Defaults to active-commitments
+ * if the user hasn't selected a sub-section this session.
  */
 export function loadInventory(): void {
   wireSubNavListeners();