added comodities

trade-hub/frontend/src/app.js

@@ -107,7 +107,7 @@ async function initHeader() {
     const c = health.counts || {};
     els["stats-line"].textContent =
       `${c.ships ?? 0} ships · ${c["ship-items"] ?? 0} ship items · ` +
-      `${c["fps-items"] ?? 0} FPS items`;
+      `${c["fps-items"] ?? 0} FPS items · ${c.commodities ?? 0} commodities`;
   } catch {
     els["api-status"].textContent = "API OFFLINE";
     els["api-status"].className = "status-pill offline";
@@ -239,7 +239,12 @@ function buildQuery() {
 }
 
 function categoryBadge(category) {
-  const labels = { ships: "Ship", "ship-items": "Ship Item", "fps-items": "FPS Item" };
+  const labels = {
+    ships: "Ship",
+    "ship-items": "Ship Item",
+    "fps-items": "FPS Item",
+    commodities: "Commodity",
+  };
   return `<span class="badge cat-${category}">${labels[category] || category}</span>`;
 }
 
@@ -457,7 +462,12 @@ async function refreshSummary() {
 }
 
 function renderInventorySummary(summary) {
-  const labels = { ships: "ships", "ship-items": "ship items", "fps-items": "FPS items" };
+  const labels = {
+    ships: "ships",
+    "ship-items": "ship items",
+    "fps-items": "FPS items",
+    commodities: "commodities",
+  };
   const parts = Object.entries(summary.categories || {})
     .map(([key, qty]) => `${qty} ${labels[key] || key}`)
     .join(" · ");

trade-hub/frontend/src/index.html

@@ -28,6 +28,7 @@
     <button class="tab" data-view="catalog" data-category="ships">Ships</button>
     <button class="tab" data-view="catalog" data-category="ship-items">Ship Equipment</button>
     <button class="tab" data-view="catalog" data-category="fps-items">FPS Items</button>
+    <button class="tab" data-view="catalog" data-category="commodities">Commodities</button>
     <button class="tab tab-mine" id="tab-mine" data-view="mine">My Inventory</button>
     <button class="tab" id="tab-available" data-view="available">Available</button>
   </nav>
@@ -68,6 +69,7 @@
         <option value="ships">Ships</option>
         <option value="ship-items">Ship Equipment</option>
         <option value="fps-items">FPS Items</option>
+        <option value="commodities">Commodities</option>
       </select>
       <select id="inv-sort" aria-label="Sort inventory">
         <option value="name">Sort: Name</option>
@@ -106,6 +108,7 @@
         <option value="ships">Ships</option>
         <option value="ship-items">Ship Equipment</option>
         <option value="fps-items">FPS Items</option>
+        <option value="commodities">Commodities</option>
       </select>
       <select id="avail-sort" aria-label="Sort available items">
         <option value="updated">Sort: Recently updated</option>

trade-hub/frontend/src/style.css

@@ -14,6 +14,7 @@
   --cat-ships: #38bdf8;
   --cat-ship-items: #a78bfa;
   --cat-fps-items: #f59e0b;
+  --cat-commodities: #4ade80;
 }
 
 * { box-sizing: border-box; }
@@ -215,6 +216,7 @@ main {
 .badge.cat-ships { color: var(--cat-ships); border-color: var(--cat-ships); }
 .badge.cat-ship-items { color: var(--cat-ship-items); border-color: var(--cat-ship-items); }
 .badge.cat-fps-items { color: var(--cat-fps-items); border-color: var(--cat-fps-items); }
+.badge.cat-commodities { color: var(--cat-commodities); border-color: var(--cat-commodities); }
 .badge.size { color: var(--text-dim); border-color: var(--border); }
 .item-classification { color: var(--text-dim); font-size: 0.78rem; font-family: ui-monospace, monospace; }