feat(pbs): Implement sub-tabs for multiple PBS instances

Author: rcourtman

src/public/index.html

@@ -354,7 +354,13 @@
       </div>
     </div>
     <div id="pbs" class="tab-content hidden bg-white dark:bg-gray-800 p-4 border border-t-0 border-gray-300 dark:border-gray-700 rounded-b-lg shadow-sm">
-      <div id="pbs-instances-container" class="space-y-6">
+      <!-- Sub-tab navigation -->
+      <div id="pbs-sub-tabs-nav" class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
+        <!-- Sub-tab buttons will be dynamically inserted here by JavaScript -->
+      </div>
+      <!-- Sub-tab content panels -->
+      <div id="pbs-sub-tabs-content" class="space-y-6">
+        <!-- Content for each PBS instance will be dynamically inserted here -->
         <p id="pbs-loading-message" class="text-gray-500 dark:text-gray-400">Loading PBS data...</p>
       </div>
     </div>

src/public/js/state.js

@@ -2,6 +2,7 @@ PulseApp.state = (() => {
     const savedSortState = JSON.parse(localStorage.getItem('pulseSortState')) || {};
     const savedFilterState = JSON.parse(localStorage.getItem('pulseFilterState')) || {};
     const savedThresholdState = JSON.parse(localStorage.getItem('pulseThresholdState')) || {};
+    const savedPbsShowDetails = JSON.parse(localStorage.getItem('pulsePbsShowDetails')) || {};
 
     let internalState = {
         nodesData: [],
@@ -35,7 +36,8 @@ PulseApp.state = (() => {
         },
         activeLogSessions: {},
         thresholdLogEntries: [],
-        activeLoggingThresholds: null
+        activeLoggingThresholds: null,
+        pbsShowDetails: savedPbsShowDetails
     };
 
     // Initialize thresholdState by merging saved state with defaults
@@ -81,6 +83,10 @@ PulseApp.state = (() => {
         localStorage.setItem('pulseSortState', JSON.stringify(stateToSave));
     }
 
+    function savePbsShowDetailsState() {
+        localStorage.setItem('pulsePbsShowDetails', JSON.stringify(internalState.pbsShowDetails));
+    }
+
     return {
         get: (key) => internalState[key],
         set: (key, value) => {
@@ -134,6 +140,16 @@ PulseApp.state = (() => {
         },
         clearDashboardHistoryEntry: (guestId) => {
             delete internalState.dashboardHistory[guestId];
+        },
+        getPbShowDetailsState: (instanceId, defaultValue) => {
+            if (typeof internalState.pbsShowDetails[instanceId] === 'boolean') {
+                return internalState.pbsShowDetails[instanceId];
+            }
+            return defaultValue;
+        },
+        setPbShowDetailsState: (instanceId, value) => {
+            internalState.pbsShowDetails[instanceId] = !!value;
+            savePbsShowDetailsState();
         }
     };
 })();