feat: Add subscriptionDetails getter to RelayHub for detailed subscription information

- Implement a new getter method in RelayHub to return an array of subscription details, including IDs, filters, and associated relays.
- Enhance the ability to track and manage subscriptions more effectively within the RelayHub component.

src/components/RelayHubStatus.vue

@@ -60,6 +60,41 @@
         <div>Local: {{ activeSubscriptions.size }}</div>
         <div>Global: {{ totalSubscriptionCount }}</div>
       </div>
+      
+      <!-- Subscription Details -->
+      <div v-if="subscriptionDetails.length > 0" class="subscription-details">
+        <h5>Subscription Details:</h5>
+        <div class="subscription-list">
+          <div 
+            v-for="sub in subscriptionDetails" 
+            :key="sub.id" 
+            class="subscription-item"
+          >
+            <div class="subscription-id">
+              <strong>ID:</strong> {{ sub.id }}
+            </div>
+            <div class="subscription-filters">
+              <strong>Filters:</strong> {{ sub.filters.length }} filter(s)
+              <div v-if="sub.filters.length > 0" class="filter-details">
+                <div 
+                  v-for="(filter, index) in sub.filters" 
+                  :key="index" 
+                  class="filter-item"
+                >
+                  <code>{{ JSON.stringify(filter) }}</code>
+                </div>
+              </div>
+            </div>
+            <div v-if="sub.relays && sub.relays.length > 0" class="subscription-relays">
+              <strong>Relays:</strong> {{ sub.relays.join(', ') }}
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div v-else class="no-subscriptions">
+        No active subscriptions found
+      </div>
     </div>
   </div>
 </template>
@@ -76,6 +111,7 @@ const {
   connectedRelayCount,
   totalRelayCount,
   totalSubscriptionCount,
+  subscriptionDetails,
   connectionHealth,
   connect,
   disconnect,
@@ -254,8 +290,77 @@ const {
 
 .subscription-count {
   font-size: 1.5rem;
-  font-weight: 600;
+  font-weight: bold;
   color: #3b82f6;
+  margin-bottom: 1rem;
+}
+
+.subscription-details {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #f1f5f9;
+  border-radius: 0.375rem;
+}
+
+.subscription-details h5 {
+  margin: 0 0 0.75rem 0;
+  color: #475569;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.subscription-list {
+  /* Individual subscription items handle their own spacing */
+}
+
+.subscription-item {
+  padding: 0.75rem;
+  background-color: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.375rem;
+  margin-bottom: 0.75rem;
+}
+
+.subscription-item:last-child {
+  margin-bottom: 0;
+}
+
+.subscription-id {
+  margin-bottom: 0.5rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+.subscription-filters {
+  margin-bottom: 0.5rem;
+}
+
+.filter-details {
+  margin-top: 0.25rem;
+  margin-left: 1rem;
+}
+
+.filter-item {
+  margin-bottom: 0.25rem;
+}
+
+.filter-item code {
+  background-color: #f8fafc;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  color: #475569;
+}
+
+.subscription-relays {
+  font-size: 0.875rem;
+  color: #64748b;
+}
+
+.no-subscriptions {
   text-align: center;
+  color: #94a3b8;
+  font-style: italic;
+  padding: 1rem;
 }
 </style>