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/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