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>

src/composables/useRelayHub.ts

@@ -14,6 +14,9 @@ export function useRelayHub() {
   const connectedRelayCount = ref(0)
   const totalRelayCount = ref(0)
   const totalSubscriptionCount = ref(0)
+  
+  // Reactive subscription details
+  const subscriptionDetails = ref<Array<{ id: string; filters: any[]; relays?: string[] }>>([])
 
   // Computed properties
   const connectionHealth = computed(() => {
@@ -231,6 +234,7 @@ export function useRelayHub() {
       connectedRelayCount.value = relayHub.connectedRelayCount
       totalRelayCount.value = relayHub.totalRelayCount
       totalSubscriptionCount.value = relayHub.totalSubscriptionCount
+      subscriptionDetails.value = relayHub.subscriptionDetails
     }
 
     // Update immediately and then every 10 seconds
@@ -280,6 +284,7 @@ export function useRelayHub() {
     connectedRelayCount,
     totalRelayCount,
     totalSubscriptionCount,
+    subscriptionDetails,
     connectionHealth,
     
     // Methods

src/lib/nostr/relayHub.ts

@@ -97,6 +97,17 @@ export class RelayHub extends EventEmitter {
     return this.subscriptions.size
   }
 
+  get subscriptionDetails(): Array<{ id: string; filters: any[]; relays?: string[] }> {
+    return Array.from(this.subscriptions.entries()).map(([id, subscription]) => {
+      // Try to extract subscription details if available
+      return {
+        id,
+        filters: subscription.filters || [],
+        relays: subscription.relays || []
+      }
+    })
+  }
+
   get relayStatuses(): RelayStatus[] {
     return Array.from(this.relayConfigs.values()).map(config => {
       const relay = this.connectedRelays.get(config.url)

src/pages/RelayHubDemo.vue

@@ -10,10 +10,36 @@
       </div>
 
       <!-- Relay Hub Status -->
-      <div class="mb-8">
+      <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-xl font-semibold mb-4">Relay Hub Status</h2>
         <RelayHubStatus />
       </div>
 
+      <!-- Subscription Details -->
+      <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-xl font-semibold mb-4">Subscription Details</h2>
+        <div v-if="subscriptionDetails.length > 0" class="space-y-4">
+          <div 
+            v-for="sub in subscriptionDetails" 
+            :key="sub.id" 
+            class="p-4 border border-gray-200 rounded-lg"
+          >
+            <div class="font-mono text-sm font-semibold text-blue-600 mb-2">
+              {{ sub.id }}
+            </div>
+            <div class="text-sm text-gray-600">
+              <div><strong>Filters:</strong> {{ sub.filters.length }} filter(s)</div>
+              <div v-if="sub.relays && sub.relays.length > 0">
+                <strong>Relays:</strong> {{ sub.relays.join(', ') }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="text-gray-500 text-center py-4">
+          No active subscriptions
+        </div>
+      </div>
+
       <!-- Connection Test -->
       <div class="bg-white rounded-lg shadow p-6 mb-8">
         <h2 class="text-xl font-semibold mb-4">Connection Test</h2>
@@ -140,6 +166,7 @@ const {
   connectionStatus,
   connectionHealth,
   connectedRelayCount,
+  subscriptionDetails,
   initialize,
   connect,
   subscribe