npm - @teneo-protocol/sdk - Versions diffs - 1.0.1 → 2.0.0 - Mend

@teneo-protocol/sdk 1.0.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/examples/production-dashboard/public/dashboard.html CHANGED Viewed

@@ -1,373 +1,607 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Teneo SDK - Production Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        .status-dot {
-            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      .status-dot {
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
         }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: .5; }
+        50% {
+          opacity: 0.5;
         }
-        .event-item {
-            animation: slideIn 0.3s ease-out;
+      }
+      .event-item {
+        animation: slideIn 0.3s ease-out;
+      }
+      @keyframes slideIn {
+        from {
+          opacity: 0;
+          transform: translateY(-10px);
         }
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .scrollbar-thin::-webkit-scrollbar {
-            width: 6px;
-        }
-        .scrollbar-thin::-webkit-scrollbar-track {
-            background: #1f2937;
-        }
-        .scrollbar-thin::-webkit-scrollbar-thumb {
-            background: #4b5563;
-            border-radius: 3px;
+        to {
+          opacity: 1;
+          transform: translateY(0);
         }
+      }
+      .scrollbar-thin::-webkit-scrollbar {
+        width: 6px;
+      }
+      .scrollbar-thin::-webkit-scrollbar-track {
+        background: #1f2937;
+      }
+      .scrollbar-thin::-webkit-scrollbar-thumb {
+        background: #4b5563;
+        border-radius: 3px;
+      }
     </style>
-</head>
-<body class="bg-gray-900 text-gray-100">
+  </head>
+  <body class="bg-gray-900 text-gray-100">
     <div class="container mx-auto px-4 py-6 max-w-7xl">
-        <!-- Header -->
-        <div class="mb-8">
-            <h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
-                Teneo SDK Production Dashboard
-            </h1>
-            <p class="text-gray-400">Comprehensive example showcasing all SDK features</p>
+      <!-- Header -->
+      <div class="mb-8">
+        <h1
+          class="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"
+        >
+          Teneo SDK Production Dashboard
+        </h1>
+        <p class="text-gray-400">Comprehensive example showcasing all SDK features</p>
+      </div>
+      <!-- Status Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <!-- Connection Status -->
+        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-gray-400 text-sm">Connection</span>
+            <div id="connection-dot" class="status-dot w-3 h-3 rounded-full bg-gray-500"></div>
+          </div>
+          <div id="connection-status" class="text-2xl font-bold text-gray-500">Connecting...</div>
         </div>
-        <!-- Status Grid -->
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-            <!-- Connection Status -->
-            <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-gray-400 text-sm">Connection</span>
-                    <div id="connection-dot" class="status-dot w-3 h-3 rounded-full bg-gray-500"></div>
-                </div>
-                <div id="connection-status" class="text-2xl font-bold text-gray-500">Connecting...</div>
-            </div>
+        <!-- Auth Status -->
+        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-gray-400 text-sm">Authentication</span>
+            <div id="auth-dot" class="status-dot w-3 h-3 rounded-full bg-gray-500"></div>
+          </div>
+          <div id="auth-status" class="text-2xl font-bold text-gray-500">Pending</div>
+        </div>
-            <!-- Auth Status -->
-            <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-gray-400 text-sm">Authentication</span>
-                    <div id="auth-dot" class="status-dot w-3 h-3 rounded-full bg-gray-500"></div>
-                </div>
-                <div id="auth-status" class="text-2xl font-bold text-gray-500">Pending</div>
-            </div>
+        <!-- Agents Count -->
+        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-gray-400 text-sm">Agents</span>
+            <svg
+              class="w-5 h-5 text-blue-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+              ></path>
+            </svg>
+          </div>
+          <div id="agents-count" class="text-2xl font-bold">0</div>
+        </div>
-            <!-- Agents Count -->
-            <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-gray-400 text-sm">Agents</span>
-                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                    </svg>
-                </div>
-                <div id="agents-count" class="text-2xl font-bold">0</div>
-            </div>
+        <!-- Messages Count -->
+        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-gray-400 text-sm">Messages</span>
+            <svg
+              class="w-5 h-5 text-green-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+              ></path>
+            </svg>
+          </div>
+          <div id="messages-count" class="text-2xl font-bold">0</div>
+        </div>
+      </div>
+      <!-- Main Content Grid -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <!-- Send Message Panel -->
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <h2 class="text-xl font-bold mb-4 flex items-center">
+            <svg
+              class="w-6 h-6 mr-2 text-blue-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+              ></path>
+            </svg>
+            Send Message
+          </h2>
+          <div class="mb-3">
+            <label for="room-select" class="block text-sm text-gray-400 mb-2">Select Room:</label>
+            <select
+              id="room-select"
+              class="w-full bg-gray-700 rounded-lg p-2 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none"
+            >
+              <option value="">Loading rooms...</option>
+            </select>
+          </div>
+          <textarea
+            id="message-input"
+            class="w-full bg-gray-700 rounded-lg p-3 mb-3 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none resize-none"
+            rows="3"
+            placeholder="Enter your message to agents..."
+          ></textarea>
+          <div class="flex gap-3">
+            <button
+              id="send-message-btn"
+              class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled
+            >
+              Send Message
+            </button>
+            <button
+              id="send-wait-btn"
+              class="flex-1 bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled
+            >
+              Send & Wait
+            </button>
+          </div>
+        </div>
-            <!-- Messages Count -->
-            <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-gray-400 text-sm">Messages</span>
-                    <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                    </svg>
-                </div>
-                <div id="messages-count" class="text-2xl font-bold">0</div>
+        <!-- Health Status -->
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <h2 class="text-xl font-bold mb-4 flex items-center">
+            <svg
+              class="w-6 h-6 mr-2 text-green-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+              ></path>
+            </svg>
+            System Health
+          </h2>
+          <div id="health-status" class="space-y-2">
+            <div class="flex justify-between items-center">
+              <span class="text-gray-400">Overall Status</span>
+              <span id="health-overall" class="text-gray-500">Loading...</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-gray-400">Webhook Circuit</span>
+              <span id="health-circuit" class="text-gray-500">-</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-gray-400">Rate Limiter</span>
+              <span id="health-ratelimit" class="text-gray-500">-</span>
             </div>
+            <div class="flex justify-between items-center">
+              <span class="text-gray-400">Uptime</span>
+              <span id="health-uptime" class="text-gray-500">-</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Tabs -->
+      <div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
+        <div class="flex border-b border-gray-700 overflow-x-auto">
+          <button
+            class="tab-btn active px-6 py-3 font-semibold whitespace-nowrap"
+            data-tab="agents"
+          >
+            Agents
+          </button>
+          <button class="tab-btn px-6 py-3 font-semibold whitespace-nowrap" data-tab="rooms">
+            Rooms
+          </button>
+          <button class="tab-btn px-6 py-3 font-semibold whitespace-nowrap" data-tab="room-mgmt">
+            🆕 Room Mgmt
+          </button>
+          <button class="tab-btn px-6 py-3 font-semibold whitespace-nowrap" data-tab="agent-room">
+            🆕 Agent-Room
+          </button>
+          <button class="tab-btn px-6 py-3 font-semibold whitespace-nowrap" data-tab="messages">
+            Messages
+          </button>
+          <button class="tab-btn px-6 py-3 font-semibold whitespace-nowrap" data-tab="webhooks">
+            Webhooks
+          </button>
+          <button class="tab-btn px-6 py-3 font-semibold whitespace-nowrap" data-tab="events">
+            Events
+          </button>
         </div>
-        <!-- Main Content Grid -->
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-            <!-- Send Message Panel -->
-            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
-                <h2 class="text-xl font-bold mb-4 flex items-center">
-                    <svg class="w-6 h-6 mr-2 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
-                    </svg>
-                    Send Message
-                </h2>
-                <div class="mb-3">
-                    <label for="room-select" class="block text-sm text-gray-400 mb-2">Select Room:</label>
-                    <select id="room-select"
-                            class="w-full bg-gray-700 rounded-lg p-2 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none">
-                        <option value="">Loading rooms...</option>
-                    </select>
-                </div>
-                <textarea id="message-input"
-                          class="w-full bg-gray-700 rounded-lg p-3 mb-3 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none resize-none"
-                          rows="3"
-                          placeholder="Enter your message to agents..."></textarea>
-                <div class="flex gap-3">
-                    <button id="send-message-btn"
-                            class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
-                            disabled>
-                        Send Message
-                    </button>
-                    <button id="send-wait-btn"
-                            class="flex-1 bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
-                            disabled>
-                        Send & Wait
-                    </button>
-                </div>
+        <div class="p-6">
+          <!-- Agents Tab -->
+          <div id="agents-tab" class="tab-content">
+            <div id="agents-list" class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin">
+              <p class="text-gray-500">Loading agents...</p>
+            </div>
+          </div>
+          <!-- Rooms Tab -->
+          <div id="rooms-tab" class="tab-content hidden">
+            <div class="mb-4">
+              <input
+                id="room-id-input"
+                type="text"
+                class="bg-gray-700 rounded-lg p-2 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none"
+                placeholder="Room ID"
+              />
+              <button
+                id="subscribe-room-btn"
+                class="ml-2 bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition"
+              >
+                Subscribe
+              </button>
+            </div>
+            <div id="rooms-list" class="space-y-3 max-h-80 overflow-y-auto scrollbar-thin">
+              <p class="text-gray-500">Loading rooms...</p>
+            </div>
+          </div>
+          <!-- Room Management Tab (v2.0) -->
+          <div id="room-mgmt-tab" class="tab-content hidden">
+            <!-- Room Limit Info -->
+            <div class="bg-gray-700 rounded-lg p-4 mb-4 border border-gray-600">
+              <div class="flex justify-between items-center">
+                <span class="text-gray-400">Room Capacity:</span>
+                <span id="room-limit-text" class="font-semibold">Loading...</span>
+              </div>
             </div>
-            <!-- Health Status -->
-            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
-                <h2 class="text-xl font-bold mb-4 flex items-center">
-                    <svg class="w-6 h-6 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                    </svg>
-                    System Health
-                </h2>
-                <div id="health-status" class="space-y-2">
-                    <div class="flex justify-between items-center">
-                        <span class="text-gray-400">Overall Status</span>
-                        <span id="health-overall" class="text-gray-500">Loading...</span>
-                    </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-gray-400">Webhook Circuit</span>
-                        <span id="health-circuit" class="text-gray-500">-</span>
-                    </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-gray-400">Rate Limiter</span>
-                        <span id="health-ratelimit" class="text-gray-500">-</span>
-                    </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-gray-400">Uptime</span>
-                        <span id="health-uptime" class="text-gray-500">-</span>
-                    </div>
-                </div>
+            <!-- Create Room Form -->
+            <div class="bg-gray-700 rounded-lg p-4 mb-4 border border-gray-600">
+              <h3 class="font-semibold mb-3">Create New Room</h3>
+              <div class="space-y-2">
+                <input
+                  id="new-room-name"
+                  type="text"
+                  placeholder="Room Name"
+                  class="w-full bg-gray-800 rounded p-2 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none"
+                />
+                <input
+                  id="new-room-desc"
+                  type="text"
+                  placeholder="Description (optional)"
+                  class="w-full bg-gray-800 rounded p-2 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none"
+                />
+                <button
+                  id="create-room-btn"
+                  class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition"
+                >
+                  Create Room
+                </button>
+              </div>
             </div>
-        </div>
-        <!-- Tabs -->
-        <div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
-            <div class="flex border-b border-gray-700">
-                <button class="tab-btn active px-6 py-3 font-semibold" data-tab="agents">Agents</button>
-                <button class="tab-btn px-6 py-3 font-semibold" data-tab="rooms">Rooms</button>
-                <button class="tab-btn px-6 py-3 font-semibold" data-tab="messages">Messages</button>
-                <button class="tab-btn px-6 py-3 font-semibold" data-tab="webhooks">Webhooks</button>
-                <button class="tab-btn px-6 py-3 font-semibold" data-tab="events">Events</button>
+            <!-- Private Rooms -->
+            <div>
+              <h3 class="font-semibold mb-2">📁 Private Rooms</h3>
+              <div
+                id="private-rooms-list"
+                class="space-y-2 max-h-96 overflow-y-auto scrollbar-thin"
+              >
+                <p class="text-gray-500">Loading...</p>
+              </div>
+            </div>
+          </div>
+          <!-- Agent-Room Management Tab (v2.0) -->
+          <div id="agent-room-tab" class="tab-content hidden">
+            <!-- Room Selector -->
+            <div class="bg-gray-700 rounded-lg p-4 mb-4 border border-gray-600">
+              <label class="block text-sm text-gray-400 mb-2">Select Room:</label>
+              <select
+                id="agent-room-select"
+                class="w-full bg-gray-800 rounded-lg p-2 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none"
+              >
+                <option value="">Select a room...</option>
+              </select>
             </div>
-            <div class="p-6">
-                <!-- Agents Tab -->
-                <div id="agents-tab" class="tab-content">
-                    <div id="agents-list" class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin">
-                        <p class="text-gray-500">Loading agents...</p>
-                    </div>
-                </div>
+            <!-- Agents in Room -->
+            <div class="mb-4">
+              <div class="flex justify-between items-center mb-2">
+                <h3 class="font-semibold">🤖 Agents in Room</h3>
+                <span id="room-agents-count" class="text-sm text-gray-400">-</span>
+              </div>
+              <div id="room-agents-list" class="space-y-2 max-h-60 overflow-y-auto scrollbar-thin">
+                <p class="text-gray-500">Select a room first</p>
+              </div>
+            </div>
-                <!-- Rooms Tab -->
-                <div id="rooms-tab" class="tab-content hidden">
-                    <div class="mb-4">
-                        <input id="room-id-input"
-                               type="text"
-                               class="bg-gray-700 rounded-lg p-2 text-gray-100 border border-gray-600 focus:border-blue-500 focus:outline-none"
-                               placeholder="Room ID">
-                        <button id="subscribe-room-btn" class="ml-2 bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition">
-                            Subscribe
-                        </button>
-                    </div>
-                    <div id="rooms-list" class="space-y-3 max-h-80 overflow-y-auto scrollbar-thin">
-                        <p class="text-gray-500">Loading rooms...</p>
-                    </div>
-                </div>
+            <!-- Available Agents -->
+            <div>
+              <div class="flex justify-between items-center mb-2">
+                <h3 class="font-semibold">➕ Available to Add</h3>
+                <span id="available-agents-count" class="text-sm text-gray-400">-</span>
+              </div>
+              <div
+                id="available-agents-list"
+                class="space-y-2 max-h-60 overflow-y-auto scrollbar-thin"
+              >
+                <p class="text-gray-500">Select a room first</p>
+              </div>
+            </div>
+          </div>
-                <!-- Messages Tab -->
-                <div id="messages-tab" class="tab-content hidden">
-                    <div id="messages-list" class="space-y-4 max-h-96 overflow-y-auto scrollbar-thin">
-                        <p class="text-gray-500">No messages yet. Send a message to see it here!</p>
-                    </div>
-                </div>
+          <!-- Messages Tab -->
+          <div id="messages-tab" class="tab-content hidden">
+            <div id="messages-list" class="space-y-4 max-h-96 overflow-y-auto scrollbar-thin">
+              <p class="text-gray-500">No messages yet. Send a message to see it here!</p>
+            </div>
+          </div>
-                <!-- Webhooks Tab -->
-                <div id="webhooks-tab" class="tab-content hidden">
-                    <div id="webhooks-list" class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin">
-                        <p class="text-gray-500">No webhooks received yet.</p>
-                    </div>
-                </div>
+          <!-- Webhooks Tab -->
+          <div id="webhooks-tab" class="tab-content hidden">
+            <div id="webhooks-list" class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin">
+              <p class="text-gray-500">No webhooks received yet.</p>
+            </div>
+          </div>
-                <!-- Events Tab -->
-                <div id="events-tab" class="tab-content hidden">
-                    <div id="events-list" class="space-y-2 max-h-96 overflow-y-auto scrollbar-thin">
-                        <p class="text-gray-500">Waiting for events...</p>
-                    </div>
-                </div>
+          <!-- Events Tab -->
+          <div id="events-tab" class="tab-content hidden">
+            <div id="events-list" class="space-y-2 max-h-96 overflow-y-auto scrollbar-thin">
+              <p class="text-gray-500">Waiting for events...</p>
             </div>
+          </div>
         </div>
+      </div>
     </div>
     <script>
-        // State
-        let eventSource = null;
-        let connectionStatus = 'disconnected';
-        let authStatus = 'pending';
-        // Initialize
-        document.addEventListener('DOMContentLoaded', () => {
-            setupTabs();
-            setupEventSource();
-            loadInitialData();
-            setupMessageSending();
-            setupRoomManagement();
-            startHealthCheck();
-        });
-        // Tab management
-        function setupTabs() {
-            document.querySelectorAll('.tab-btn').forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const tab = btn.dataset.tab;
-                    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active', 'bg-gray-700', 'text-blue-400'));
-                    document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
-                    btn.classList.add('active', 'bg-gray-700', 'text-blue-400');
-                    document.getElementById(`${tab}-tab`).classList.remove('hidden');
-                });
-            });
-        }
-        // Server-Sent Events
-        function setupEventSource() {
-            eventSource = new EventSource('/api/sse');
-            eventSource.addEventListener('message', (e) => {
-                try {
-                    const data = JSON.parse(e.data);
-                    handleSSEEvent(data);
-                } catch (error) {
-                    console.error('SSE parse error:', error);
-                }
-            });
-            eventSource.addEventListener('error', () => {
-                console.error('SSE connection error');
-                setTimeout(setupEventSource, 5000);
-            });
-        }
+      // State
+      let eventSource = null;
+      let connectionStatus = "disconnected";
+      let authStatus = "pending";
+      // Initialize
+      document.addEventListener("DOMContentLoaded", () => {
+        setupTabs();
+        setupEventSource();
+        loadInitialData();
+        setupMessageSending();
+        setupRoomManagement();
+        setupRoomManagementV2();
+        setupAgentRoomManagement();
+        startHealthCheck();
+      });
+      // Tab management
+      function setupTabs() {
+        document.querySelectorAll(".tab-btn").forEach((btn) => {
+          btn.addEventListener("click", () => {
+            const tab = btn.dataset.tab;
+            document
+              .querySelectorAll(".tab-btn")
+              .forEach((b) => b.classList.remove("active", "bg-gray-700", "text-blue-400"));
+            document.querySelectorAll(".tab-content").forEach((c) => c.classList.add("hidden"));
+            btn.classList.add("active", "bg-gray-700", "text-blue-400");
+            document.getElementById(`${tab}-tab`).classList.remove("hidden");
+            // Load data when switching to room management tab
+            if (tab === "room-mgmt") {
+              loadRoomLimitV2();
+              loadPrivateRoomsV2();
+            }
-        function handleSSEEvent(data) {
-            switch (data.type) {
-                case 'connection':
-                    updateConnectionStatus(data.status);
-                    break;
-                case 'auth':
-                    updateAuthStatus(data.status);
-                    if (data.status === 'success') {
-                        // Reload available rooms after authentication
-                        setTimeout(loadAvailableRooms, 500);
-                    }
-                    break;
-                case 'agent:selected':
-                    addEventItem(`Agent Selected: ${data.data.agentName}`, 'blue');
-                    break;
-                case 'agent:response':
-                    addEventItem(`Agent Response from ${data.response.agentName}`, 'green');
-                    loadMessages();
-                    break;
-                case 'message:updated':
-                    addEventItem(`Message Updated: Full response received`, 'green');
-                    loadMessages();
-                    break;
-                case 'agent:list':
-                    loadAgents();
-                    break;
-                case 'room:subscribed':
-                    addEventItem(`Subscribed to room: ${data.data.roomId}`, 'green');
-                    loadRooms();
-                    loadAvailableRooms();
-                    break;
-                case 'room:unsubscribed':
-                    addEventItem(`Unsubscribed from room: ${data.data.roomId}`, 'yellow');
-                    loadRooms();
-                    loadAvailableRooms();
-                    break;
-                case 'room:list':
-                    addEventItem(`Room list updated (${data.rooms.length} rooms)`, 'blue');
-                    break;
-                case 'webhook:received':
-                    addEventItem(`Webhook: ${data.payload.event}`, 'purple');
-                    loadWebhooks();
-                    break;
-                case 'error':
-                    addEventItem(`Error: ${data.error.message}`, 'red');
-                    break;
+            // Load data when switching to agent-room tab
+            if (tab === "agent-room") {
+              loadPrivateRoomsV2().then(() => {
+                // Populate room selector after rooms are loaded
+                fetch("/api/v2/rooms/owned")
+                  .then((r) => r.json())
+                  .then((rooms) => {
+                    populateAgentRoomSelector(rooms);
+                  });
+              });
             }
-        }
+          });
+        });
+      }
+      // Server-Sent Events
+      function setupEventSource() {
+        eventSource = new EventSource("/api/sse");
+        eventSource.addEventListener("message", (e) => {
+          try {
+            const data = JSON.parse(e.data);
+            handleSSEEvent(data);
+          } catch (error) {
+            console.error("SSE parse error:", error);
+          }
+        });
-        // Load initial data
-        async function loadInitialData() {
-            await Promise.all([
-                loadAgents(),
-                loadRooms(),
-                loadAvailableRooms(),
-                loadMessages(),
-                loadWebhooks(),
-                loadEvents(),
-                loadMetrics()
-            ]);
+        eventSource.addEventListener("error", () => {
+          console.error("SSE connection error");
+          setTimeout(setupEventSource, 5000);
+        });
+      }
+      function handleSSEEvent(data) {
+        switch (data.type) {
+          case "connection":
+            updateConnectionStatus(data.status);
+            break;
+          case "auth":
+            updateAuthStatus(data.status);
+            if (data.status === "success") {
+              // Reload available rooms after authentication
+              setTimeout(loadAvailableRooms, 500);
+            }
+            break;
+          case "agent:selected":
+            addEventItem(`Agent Selected: ${data.data.agentName}`, "blue");
+            break;
+          case "agent:response":
+            addEventItem(`Agent Response from ${data.response.agentName}`, "green");
+            loadMessages();
+            break;
+          case "message:updated":
+            addEventItem(`Message Updated: Full response received`, "green");
+            loadMessages();
+            break;
+          case "agent:list":
+            loadAgents();
+            break;
+          case "room:subscribed":
+            addEventItem(`Subscribed to room: ${data.data.roomId}`, "green");
+            loadRooms();
+            loadAvailableRooms();
+            break;
+          case "room:unsubscribed":
+            addEventItem(`Unsubscribed from room: ${data.data.roomId}`, "yellow");
+            loadRooms();
+            loadAvailableRooms();
+            break;
+          case "room:list":
+            addEventItem(`Room list updated (${data.rooms.length} rooms)`, "blue");
+            break;
+          case "room:created":
+            addEventItem(`Room created: ${data.room.name}`, "green");
+            loadRoomLimitV2();
+            loadPrivateRoomsV2();
+            loadAvailableRooms();
+            break;
+          case "room:updated":
+            addEventItem(`Room updated: ${data.room.name}`, "blue");
+            loadPrivateRoomsV2();
+            loadAvailableRooms();
+            break;
+          case "room:deleted":
+            addEventItem(`Room deleted: ${data.roomId}`, "yellow");
+            loadRoomLimitV2();
+            loadPrivateRoomsV2();
+            loadAvailableRooms();
+            break;
+          case "agent_room:agent_added":
+            addEventItem(`Agent added to room: ${data.agentId}`, "green");
+            // Reload agent lists if we're viewing that room
+            const currentRoom = document.getElementById("agent-room-select").value;
+            if (currentRoom === data.roomId) {
+              loadRoomAgentsV2(data.roomId);
+              loadAvailableAgentsV2(data.roomId);
+            }
+            break;
+          case "agent_room:agent_removed":
+            addEventItem(`Agent removed from room: ${data.agentId}`, "yellow");
+            // Reload agent lists if we're viewing that room
+            const currentRoom2 = document.getElementById("agent-room-select").value;
+            if (currentRoom2 === data.roomId) {
+              loadRoomAgentsV2(data.roomId);
+              loadAvailableAgentsV2(data.roomId);
+            }
+            break;
+          case "webhook:received":
+            addEventItem(`Webhook: ${data.payload.event}`, "purple");
+            loadWebhooks();
+            break;
+          case "error":
+            addEventItem(`Error: ${data.error.message}`, "red");
+            break;
         }
-        // Load agents
-        async function loadAgents() {
-            try {
-                const response = await fetch('/api/agents');
-                const agents = await response.json();
-                document.getElementById('agents-count').textContent = agents.length;
-                const list = document.getElementById('agents-list');
-                if (agents.length === 0) {
-                    list.innerHTML = '<p class="text-gray-500">No agents available</p>';
-                    return;
-                }
-                list.innerHTML = agents.map(agent => `
+      }
+      // Load initial data
+      async function loadInitialData() {
+        await Promise.all([
+          loadAgents(),
+          loadRooms(),
+          loadAvailableRooms(),
+          loadMessages(),
+          loadWebhooks(),
+          loadEvents(),
+          loadMetrics(),
+          loadRoomLimitV2(),
+          loadPrivateRoomsV2()
+        ]);
+      }
+      // Load agents
+      async function loadAgents() {
+        try {
+          const response = await fetch("/api/agents");
+          const agents = await response.json();
+          document.getElementById("agents-count").textContent = agents.length;
+          const list = document.getElementById("agents-list");
+          if (agents.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No agents available</p>';
+            return;
+          }
+          list.innerHTML = agents
+            .map(
+              (agent) => `
                     <div class="bg-gray-700 rounded-lg p-4 border border-gray-600">
                         <div class="flex items-center justify-between mb-2">
                             <span class="font-semibold">${agent.name}</span>
-                            <span class="text-xs px-2 py-1 rounded ${agent.status === 'online' ? 'bg-green-600' : 'bg-gray-600'}">${agent.status || 'unknown'}</span>
+                            <span class="text-xs px-2 py-1 rounded ${agent.status === "online" ? "bg-green-600" : "bg-gray-600"}">${agent.status || "unknown"}</span>
                         </div>
-                        <p class="text-sm text-gray-400">${agent.description || 'No description'}</p>
-                        ${agent.capabilities ? `
+                        <p class="text-sm text-gray-400">${agent.description || "No description"}</p>
+                        ${
+                          agent.capabilities
+                            ? `
                             <div class="mt-2 flex flex-wrap gap-1">
-                                ${agent.capabilities.map(cap => `<span class="text-xs px-2 py-1 bg-blue-900 rounded">${cap.name}</span>`).join('')}
+                                ${agent.capabilities.map((cap) => `<span class="text-xs px-2 py-1 bg-blue-900 rounded">${cap.name}</span>`).join("")}
                             </div>
-                        ` : ''}
+                        `
+                            : ""
+                        }
                     </div>
-                `).join('');
-            } catch (error) {
-                console.error('Failed to load agents:', error);
-            }
+                `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load agents:", error);
         }
-        // Load rooms
-        async function loadRooms() {
-            try {
-                const response = await fetch('/api/rooms');
-                const rooms = await response.json();
-                const list = document.getElementById('rooms-list');
-                if (rooms.length === 0) {
-                    list.innerHTML = '<p class="text-gray-500">No rooms available</p>';
-                    return;
-                }
-                list.innerHTML = rooms.map(room => `
+      }
+      // Load rooms
+      async function loadRooms() {
+        try {
+          const response = await fetch("/api/rooms");
+          const rooms = await response.json();
+          const list = document.getElementById("rooms-list");
+          if (rooms.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No rooms available</p>';
+            return;
+          }
+          list.innerHTML = rooms
+            .map(
+              (room) => `
                     <div class="bg-gray-700 rounded-lg p-4 border border-gray-600">
                         <div class="flex items-center justify-between">
                             <div>
@@ -379,98 +613,114 @@
                             </button>
                         </div>
                     </div>
-                `).join('');
-            } catch (error) {
-                console.error('Failed to load rooms:', error);
-            }
+                `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load rooms:", error);
         }
-        // Load available rooms for sending messages
-        async function loadAvailableRooms() {
-            try {
-                const response = await fetch('/api/rooms/available');
-                const rooms = await response.json();
-                const select = document.getElementById('room-select');
-                const sendBtn = document.getElementById('send-message-btn');
-                const sendWaitBtn = document.getElementById('send-wait-btn');
-                if (rooms.length === 0) {
-                    select.innerHTML = '<option value="">No rooms available - Subscribe to a room first</option>';
-                    sendBtn.disabled = true;
-                    sendWaitBtn.disabled = true;
-                    return;
-                }
-                // Build options with room type indicators
-                const options = rooms.map(room => {
-                    const typeLabel = room.type === 'private' ? '🔒' : room.type === 'subscribed' ? '📌' : '🌐';
-                    const displayName = room.name || room.id;
-                    return `<option value="${room.id}">${typeLabel} ${displayName}</option>`;
-                }).join('');
-                select.innerHTML = options;
-                // Enable buttons only if connected
-                if (connectionStatus === 'connected') {
-                    sendBtn.disabled = false;
-                    sendWaitBtn.disabled = false;
-                }
-            } catch (error) {
-                console.error('Failed to load available rooms:', error);
-                const select = document.getElementById('room-select');
-                select.innerHTML = '<option value="">Error loading rooms</option>';
-            }
+      }
+      // Load available rooms for sending messages
+      async function loadAvailableRooms() {
+        try {
+          const response = await fetch("/api/rooms/available");
+          const rooms = await response.json();
+          const select = document.getElementById("room-select");
+          const sendBtn = document.getElementById("send-message-btn");
+          const sendWaitBtn = document.getElementById("send-wait-btn");
+          if (rooms.length === 0) {
+            select.innerHTML =
+              '<option value="">No rooms available - Subscribe to a room first</option>';
+            sendBtn.disabled = true;
+            sendWaitBtn.disabled = true;
+            return;
+          }
+          // Build options with room type indicators
+          const options = rooms
+            .map((room) => {
+              const typeLabel =
+                room.type === "private" ? "🔒" : room.type === "subscribed" ? "📌" : "🌐";
+              const displayName = room.name || room.id;
+              return `<option value="${room.id}">${typeLabel} ${displayName}</option>`;
+            })
+            .join("");
+          select.innerHTML = options;
+          // Enable buttons only if connected
+          if (connectionStatus === "connected") {
+            sendBtn.disabled = false;
+            sendWaitBtn.disabled = false;
+          }
+        } catch (error) {
+          console.error("Failed to load available rooms:", error);
+          const select = document.getElementById("room-select");
+          select.innerHTML = '<option value="">Error loading rooms</option>';
         }
-        // Load messages
-        async function loadMessages() {
-            try {
-                const response = await fetch('/api/messages');
-                const messages = await response.json();
-                document.getElementById('messages-count').textContent = messages.length;
-                const list = document.getElementById('messages-list');
-                if (messages.length === 0) {
-                    list.innerHTML = '<p class="text-gray-500">No messages yet</p>';
-                    return;
-                }
-                list.innerHTML = messages.map(msg => `
+      }
+      // Load messages
+      async function loadMessages() {
+        try {
+          const response = await fetch("/api/messages");
+          const messages = await response.json();
+          document.getElementById("messages-count").textContent = messages.length;
+          const list = document.getElementById("messages-list");
+          if (messages.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No messages yet</p>';
+            return;
+          }
+          list.innerHTML = messages
+            .map(
+              (msg) => `
                     <div class="bg-gray-700 rounded-lg p-4 border border-gray-600">
                         <div class="flex items-center justify-between mb-2">
                             <span class="text-sm text-gray-400">${new Date(msg.timestamp).toLocaleTimeString()}</span>
-                            <span class="text-xs px-2 py-1 rounded ${msg.response ? 'bg-green-600' : 'bg-yellow-600'}">
-                                ${msg.response ? 'Responded' : 'Pending'}
+                            <span class="text-xs px-2 py-1 rounded ${msg.response ? "bg-green-600" : "bg-yellow-600"}">
+                                ${msg.response ? "Responded" : "Pending"}
                             </span>
                         </div>
                         <p class="text-sm mb-2">${msg.content}</p>
-                        ${msg.response ? `
+                        ${
+                          msg.response
+                            ? `
                             <div class="mt-3 p-3 bg-gray-800 rounded border-l-4 border-green-500">
                                 <p class="text-xs text-gray-400 mb-1">Response from ${msg.response.agentName}:</p>
                                 <p class="text-sm">${msg.response.humanized || msg.response.content}</p>
                             </div>
-                        ` : ''}
+                        `
+                            : ""
+                        }
                     </div>
-                `).join('');
-            } catch (error) {
-                console.error('Failed to load messages:', error);
-            }
+                `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load messages:", error);
         }
-        // Load webhooks
-        async function loadWebhooks() {
-            try {
-                const response = await fetch('/api/webhooks');
-                const webhooks = await response.json();
-                const list = document.getElementById('webhooks-list');
-                if (webhooks.length === 0) {
-                    list.innerHTML = '<p class="text-gray-500">No webhooks received yet</p>';
-                    return;
-                }
-                list.innerHTML = webhooks.map(wh => `
+      }
+      // Load webhooks
+      async function loadWebhooks() {
+        try {
+          const response = await fetch("/api/webhooks");
+          const webhooks = await response.json();
+          const list = document.getElementById("webhooks-list");
+          if (webhooks.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No webhooks received yet</p>';
+            return;
+          }
+          list.innerHTML = webhooks
+            .map(
+              (wh) => `
                     <div class="bg-gray-700 rounded-lg p-3 border border-gray-600">
                         <div class="flex items-center justify-between mb-1">
                             <span class="font-mono text-sm text-purple-400">${wh.event}</span>
@@ -478,25 +728,29 @@
                         </div>
                         <pre class="text-xs text-gray-400 overflow-x-auto">${JSON.stringify(wh.data, null, 2)}</pre>
                     </div>
-                `).join('');
-            } catch (error) {
-                console.error('Failed to load webhooks:', error);
-            }
+                `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load webhooks:", error);
         }
-        // Load events
-        async function loadEvents() {
-            try {
-                const response = await fetch('/api/events');
-                const events = await response.json();
-                const list = document.getElementById('events-list');
-                if (events.length === 0) {
-                    list.innerHTML = '<p class="text-gray-500">No events yet</p>';
-                    return;
-                }
-                list.innerHTML = events.map(evt => `
+      }
+      // Load events
+      async function loadEvents() {
+        try {
+          const response = await fetch("/api/events");
+          const events = await response.json();
+          const list = document.getElementById("events-list");
+          if (events.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No events yet</p>';
+            return;
+          }
+          list.innerHTML = events
+            .map(
+              (evt) => `
                     <div class="event-item bg-gray-700 rounded p-2 border border-gray-600">
                         <div class="flex items-center justify-between">
                             <span class="font-mono text-xs text-blue-400">${evt.type}</span>
@@ -504,213 +758,531 @@
                         </div>
                         <p class="text-xs text-gray-400 mt-1">${JSON.stringify(evt.data)}</p>
                     </div>
-                `).join('');
-            } catch (error) {
-                console.error('Failed to load events:', error);
-            }
+                `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load events:", error);
         }
+      }
-        // Load metrics
-        async function loadMetrics() {
-            try {
-                const response = await fetch('/metrics');
-                const metrics = await response.json();
+      // Load metrics
+      async function loadMetrics() {
+        try {
+          const response = await fetch("/metrics");
+          const metrics = await response.json();
-                document.getElementById('health-ratelimit').textContent = metrics.messages?.sent || 0;
-            } catch (error) {
-                console.error('Failed to load metrics:', error);
-            }
+          document.getElementById("health-ratelimit").textContent = metrics.messages?.sent || 0;
+        } catch (error) {
+          console.error("Failed to load metrics:", error);
         }
-        // Message sending
-        function setupMessageSending() {
-            document.getElementById('send-message-btn').addEventListener('click', () => sendMessage(false));
-            document.getElementById('send-wait-btn').addEventListener('click', () => sendMessage(true));
+      }
+      // Message sending
+      function setupMessageSending() {
+        document
+          .getElementById("send-message-btn")
+          .addEventListener("click", () => sendMessage(false));
+        document.getElementById("send-wait-btn").addEventListener("click", () => sendMessage(true));
+      }
+      async function sendMessage(waitForResponse) {
+        const input = document.getElementById("message-input");
+        const roomSelect = document.getElementById("room-select");
+        const content = input.value.trim();
+        const room = roomSelect.value;
+        if (!content) {
+          addEventItem("Please enter a message", "yellow");
+          return;
         }
-        async function sendMessage(waitForResponse) {
-            const input = document.getElementById('message-input');
-            const roomSelect = document.getElementById('room-select');
-            const content = input.value.trim();
-            const room = roomSelect.value;
+        if (!room) {
+          addEventItem("Please select a room", "yellow");
+          return;
+        }
-            if (!content) {
-                addEventItem('Please enter a message', 'yellow');
-                return;
-            }
+        try {
+          const response = await fetch("/api/message", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ content, room, waitForResponse })
+          });
+          const result = await response.json();
+          if (response.ok) {
+            input.value = "";
+            addEventItem(
+              `Sent to ${room}: ${content.substring(0, 50)}${content.length > 50 ? "..." : ""}`,
+              "green"
+            );
+            setTimeout(loadMessages, 500);
+          } else {
+            addEventItem(`Failed to send: ${result.error}`, "red");
+          }
+        } catch (error) {
+          console.error("Send error:", error);
+          addEventItem("Error sending message", "red");
+        }
+      }
-            if (!room) {
-                addEventItem('Please select a room', 'yellow');
-                return;
-            }
+      // Room management
+      function setupRoomManagement() {
+        document.getElementById("subscribe-room-btn").addEventListener("click", async () => {
+          const input = document.getElementById("room-id-input");
+          const roomId = input.value.trim();
-            try {
-                const response = await fetch('/api/message', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ content, room, waitForResponse })
-                });
-                const result = await response.json();
-                if (response.ok) {
-                    input.value = '';
-                    addEventItem(`Sent to ${room}: ${content.substring(0, 50)}${content.length > 50 ? '...' : ''}`, 'green');
-                    setTimeout(loadMessages, 500);
-                } else {
-                    addEventItem(`Failed to send: ${result.error}`, 'red');
-                }
-            } catch (error) {
-                console.error('Send error:', error);
-                addEventItem('Error sending message', 'red');
-            }
-        }
+          if (!roomId) return;
-        // Room management
-        function setupRoomManagement() {
-            document.getElementById('subscribe-room-btn').addEventListener('click', async () => {
-                const input = document.getElementById('room-id-input');
-                const roomId = input.value.trim();
-                if (!roomId) return;
-                try {
-                    const response = await fetch('/api/room/join', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ roomId })
-                    });
-                    if (response.ok) {
-                        input.value = '';
-                        addEventItem(`Subscribing to room: ${roomId}`, 'green');
-                        setTimeout(loadRooms, 500);
-                    }
-                } catch (error) {
-                    console.error('Subscribe room error:', error);
-                }
+          try {
+            const response = await fetch("/api/room/join", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ roomId })
             });
-        }
-        async function unsubscribeRoom(roomId) {
-            try {
-                const response = await fetch('/api/room/leave', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ roomId })
-                });
-                if (response.ok) {
-                    addEventItem(`Unsubscribing from room: ${roomId}`, 'yellow');
-                    setTimeout(loadRooms, 500);
-                }
-            } catch (error) {
-                console.error('Unsubscribe room error:', error);
+            if (response.ok) {
+              input.value = "";
+              addEventItem(`Subscribing to room: ${roomId}`, "green");
+              setTimeout(loadRooms, 500);
             }
+          } catch (error) {
+            console.error("Subscribe room error:", error);
+          }
+        });
+      }
+      async function unsubscribeRoom(roomId) {
+        try {
+          const response = await fetch("/api/room/leave", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ roomId })
+          });
+          if (response.ok) {
+            addEventItem(`Unsubscribing from room: ${roomId}`, "yellow");
+            setTimeout(loadRooms, 500);
+          }
+        } catch (error) {
+          console.error("Unsubscribe room error:", error);
+        }
+      }
+      // Update status displays
+      function updateConnectionStatus(status) {
+        connectionStatus = status;
+        const dot = document.getElementById("connection-dot");
+        const text = document.getElementById("connection-status");
+        const sendBtn = document.getElementById("send-message-btn");
+        const sendWaitBtn = document.getElementById("send-wait-btn");
+        const roomSelect = document.getElementById("room-select");
+        if (status === "connected") {
+          dot.className = "status-dot w-3 h-3 rounded-full bg-green-500";
+          text.textContent = "Connected";
+          text.className = "text-2xl font-bold text-green-500";
+          // Only enable if there are rooms available
+          if (roomSelect.value) {
+            sendBtn.disabled = false;
+            sendWaitBtn.disabled = false;
+          }
+        } else if (status === "reconnecting") {
+          dot.className = "status-dot w-3 h-3 rounded-full bg-yellow-500";
+          text.textContent = "Reconnecting";
+          text.className = "text-2xl font-bold text-yellow-500";
+          sendBtn.disabled = true;
+          sendWaitBtn.disabled = true;
+        } else {
+          dot.className = "status-dot w-3 h-3 rounded-full bg-red-500";
+          text.textContent = "Disconnected";
+          text.className = "text-2xl font-bold text-red-500";
+          sendBtn.disabled = true;
+          sendWaitBtn.disabled = true;
+        }
+      }
+      function updateAuthStatus(status) {
+        authStatus = status;
+        const dot = document.getElementById("auth-dot");
+        const text = document.getElementById("auth-status");
+        if (status === "success") {
+          dot.className = "status-dot w-3 h-3 rounded-full bg-green-500";
+          text.textContent = "Authenticated";
+          text.className = "text-2xl font-bold text-green-500";
+        } else {
+          dot.className = "status-dot w-3 h-3 rounded-full bg-yellow-500";
+          text.textContent = "Pending";
+          text.className = "text-2xl font-bold text-yellow-500";
         }
+      }
+      // Health check
+      function startHealthCheck() {
+        setInterval(async () => {
+          try {
+            const response = await fetch("/health");
+            const health = await response.json();
+            document.getElementById("health-overall").textContent = health.status;
+            document.getElementById("health-overall").className =
+              health.status === "healthy" ? "text-green-500" : "text-yellow-500";
+            document.getElementById("health-circuit").textContent =
+              health.webhook?.circuitState || "N/A";
+            document.getElementById("health-uptime").textContent = formatUptime(health.timestamp);
+          } catch (error) {
+            console.error("Health check failed:", error);
+          }
+        }, 5000);
+      }
+      function formatUptime(timestamp) {
+        const seconds = Math.floor((Date.now() - new Date(timestamp).getTime()) / 1000);
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        return `${hours}h ${minutes}m`;
+      }
+      function addEventItem(message, color) {
+        const list = document.getElementById("events-list");
+        const colorClass =
+          {
+            blue: "border-blue-500",
+            green: "border-green-500",
+            red: "border-red-500",
+            yellow: "border-yellow-500",
+            purple: "border-purple-500"
+          }[color] || "border-gray-500";
+        const item = document.createElement("div");
+        item.className = `event-item bg-gray-700 rounded p-2 border-l-4 ${colorClass}`;
+        item.innerHTML = `
+                <div class="flex items-center justify-between">
+                    <span class="text-sm">${message}</span>
+                    <span class="text-xs text-gray-400">${new Date().toLocaleTimeString()}</span>
+                </div>
+            `;
-        // Update status displays
-        function updateConnectionStatus(status) {
-            connectionStatus = status;
-            const dot = document.getElementById('connection-dot');
-            const text = document.getElementById('connection-status');
-            const sendBtn = document.getElementById('send-message-btn');
-            const sendWaitBtn = document.getElementById('send-wait-btn');
-            const roomSelect = document.getElementById('room-select');
-            if (status === 'connected') {
-                dot.className = 'status-dot w-3 h-3 rounded-full bg-green-500';
-                text.textContent = 'Connected';
-                text.className = 'text-2xl font-bold text-green-500';
-                // Only enable if there are rooms available
-                if (roomSelect.value) {
-                    sendBtn.disabled = false;
-                    sendWaitBtn.disabled = false;
-                }
-            } else if (status === 'reconnecting') {
-                dot.className = 'status-dot w-3 h-3 rounded-full bg-yellow-500';
-                text.textContent = 'Reconnecting';
-                text.className = 'text-2xl font-bold text-yellow-500';
-                sendBtn.disabled = true;
-                sendWaitBtn.disabled = true;
-            } else {
-                dot.className = 'status-dot w-3 h-3 rounded-full bg-red-500';
-                text.textContent = 'Disconnected';
-                text.className = 'text-2xl font-bold text-red-500';
-                sendBtn.disabled = true;
-                sendWaitBtn.disabled = true;
-            }
+        if (list.firstChild && list.firstChild.textContent.includes("Waiting for events")) {
+          list.innerHTML = "";
         }
-        function updateAuthStatus(status) {
-            authStatus = status;
-            const dot = document.getElementById('auth-dot');
-            const text = document.getElementById('auth-status');
+        list.insertBefore(item, list.firstChild);
-            if (status === 'success') {
-                dot.className = 'status-dot w-3 h-3 rounded-full bg-green-500';
-                text.textContent = 'Authenticated';
-                text.className = 'text-2xl font-bold text-green-500';
-            } else {
-                dot.className = 'status-dot w-3 h-3 rounded-full bg-yellow-500';
-                text.textContent = 'Pending';
-                text.className = 'text-2xl font-bold text-yellow-500';
-            }
+        if (list.children.length > 50) {
+          list.removeChild(list.lastChild);
         }
+      }
-        // Health check
-        function startHealthCheck() {
-            setInterval(async () => {
-                try {
-                    const response = await fetch('/health');
-                    const health = await response.json();
-                    document.getElementById('health-overall').textContent = health.status;
-                    document.getElementById('health-overall').className = health.status === 'healthy' ? 'text-green-500' : 'text-yellow-500';
-                    document.getElementById('health-circuit').textContent = health.webhook?.circuitState || 'N/A';
-                    document.getElementById('health-uptime').textContent = formatUptime(health.timestamp);
-                } catch (error) {
-                    console.error('Health check failed:', error);
-                }
-            }, 5000);
-        }
+      // ===========================================
+      // V2.0 ROOM MANAGEMENT FUNCTIONS
+      // ===========================================
+      async function loadRoomLimitV2() {
+        try {
+          const response = await fetch("/api/v2/rooms/limit");
+          const data = await response.json();
-        function formatUptime(timestamp) {
-            const seconds = Math.floor((Date.now() - new Date(timestamp).getTime()) / 1000);
-            const hours = Math.floor(seconds / 3600);
-            const minutes = Math.floor((seconds % 3600) / 60);
-            return `${hours}h ${minutes}m`;
+          const limitText = `${data.count}/${data.limit} ${data.canCreate ? "✅" : "⚠️"}`;
+          document.getElementById("room-limit-text").textContent = limitText;
+        } catch (error) {
+          console.error("Failed to load room limit:", error);
         }
+      }
+      async function loadPrivateRoomsV2() {
+        try {
+          // Fetch both owned and shared rooms
+          const [ownedResponse, sharedResponse] = await Promise.all([
+            fetch("/api/v2/rooms/owned"),
+            fetch("/api/v2/rooms/shared")
+          ]);
+          const ownedRooms = await ownedResponse.json();
+          const sharedRooms = await sharedResponse.json();
+          // Filter to only show private rooms (exclude public rooms)
+          // Owned rooms should already be private, but filter shared rooms too
+          const allPrivateRooms = [
+            ...ownedRooms.filter((r) => !r.is_public),
+            ...sharedRooms.filter((r) => !r.is_public)
+          ];
+          const list = document.getElementById("private-rooms-list");
+          if (allPrivateRooms.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No private rooms</p>';
+            return;
+          }
+          list.innerHTML = allPrivateRooms
+            .map(
+              (room) => `
+                    <div class="bg-gray-800 rounded p-3 border border-gray-600">
+                        <div class="flex justify-between items-start">
+                            <div class="flex-1">
+                                <div class="font-semibold">${room.name}</div>
+                                <div class="text-xs text-gray-400">${room.id}</div>
+                                ${room.description ? `<div class="text-sm text-gray-400 mt-1">${room.description}</div>` : ""}
+                                <div class="text-xs mt-1">
+                                    <span class="px-2 py-1 rounded bg-purple-900">🔒 Private</span>
+                                    ${room.is_owner ? '<span class="ml-2 px-2 py-1 rounded bg-yellow-900">👑 Owner</span>' : '<span class="ml-2 px-2 py-1 rounded bg-gray-700">🤝 Shared</span>'}
+                                </div>
+                            </div>
+                            ${
+                              room.is_owner
+                                ? `
+                                <div class="flex gap-2">
+                                    <button onclick="deleteRoomV2('${room.id}')" class="bg-red-600 hover:bg-red-700 text-white text-xs py-1 px-2 rounded transition">
+                                        Delete
+                                    </button>
+                                </div>
+                            `
+                                : ""
+                            }
+                        </div>
+                    </div>
+                `
+            )
+            .join("");
+          // Also populate agent-room selector with owned rooms only
+          populateAgentRoomSelector(ownedRooms);
+        } catch (error) {
+          console.error("Failed to load private rooms:", error);
+        }
+      }
+      function setupRoomManagementV2() {
+        document.getElementById("create-room-btn").addEventListener("click", async () => {
+          const name = document.getElementById("new-room-name").value.trim();
+          const description = document.getElementById("new-room-desc").value.trim();
+          if (!name) {
+            addEventItem("Room name is required", "yellow");
+            return;
+          }
+          try {
+            const response = await fetch("/api/v2/rooms", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ name, description: description || undefined })
+            });
-        function addEventItem(message, color) {
-            const list = document.getElementById('events-list');
-            const colorClass = {
-                'blue': 'border-blue-500',
-                'green': 'border-green-500',
-                'red': 'border-red-500',
-                'yellow': 'border-yellow-500',
-                'purple': 'border-purple-500'
-            }[color] || 'border-gray-500';
-            const item = document.createElement('div');
-            item.className = `event-item bg-gray-700 rounded p-2 border-l-4 ${colorClass}`;
-            item.innerHTML = `
-                <div class="flex items-center justify-between">
-                    <span class="text-sm">${message}</span>
-                    <span class="text-xs text-gray-400">${new Date().toLocaleTimeString()}</span>
-                </div>
-            `;
+            const result = await response.json();
-            if (list.firstChild && list.firstChild.textContent.includes('Waiting for events')) {
-                list.innerHTML = '';
+            if (response.ok) {
+              document.getElementById("new-room-name").value = "";
+              document.getElementById("new-room-desc").value = "";
+              addEventItem(`Created room: ${result.name}`, "green");
+              setTimeout(() => {
+                loadRoomLimitV2();
+                loadPrivateRoomsV2();
+              }, 500);
+            } else {
+              addEventItem(`Failed to create room: ${result.error}`, "red");
             }
+          } catch (error) {
+            console.error("Create room error:", error);
+            addEventItem("Error creating room", "red");
+          }
+        });
+      }
+      async function deleteRoomV2(roomId) {
+        if (!confirm("Are you sure you want to delete this room?")) return;
+        try {
+          const response = await fetch(`/api/v2/rooms/${roomId}`, {
+            method: "DELETE"
+          });
+          const result = await response.json();
+          if (response.ok) {
+            addEventItem(`Deleted room: ${roomId}`, "green");
+            setTimeout(() => {
+              loadRoomLimitV2();
+              loadPrivateRoomsV2();
+            }, 500);
+          } else {
+            addEventItem(`Failed to delete room: ${result.error}`, "red");
+          }
+        } catch (error) {
+          console.error("Delete room error:", error);
+          addEventItem("Error deleting room", "red");
+        }
+      }
-            list.insertBefore(item, list.firstChild);
+      // ===========================================
+      // V2.0 AGENT-ROOM MANAGEMENT FUNCTIONS
+      // ===========================================
-            if (list.children.length > 50) {
-                list.removeChild(list.lastChild);
-            }
+      function populateAgentRoomSelector(ownedRooms) {
+        const select = document.getElementById("agent-room-select");
+        if (ownedRooms.length === 0) {
+          select.innerHTML = '<option value="">No owned rooms - create one first</option>';
+          return;
+        }
+        select.innerHTML =
+          '<option value="">Select a room...</option>' +
+          ownedRooms.map((room) => `<option value="${room.id}">${room.name}</option>`).join("");
+      }
+      function setupAgentRoomManagement() {
+        document.getElementById("agent-room-select").addEventListener("change", async (e) => {
+          const roomId = e.target.value;
+          if (!roomId) {
+            document.getElementById("room-agents-list").innerHTML =
+              '<p class="text-gray-500">Select a room first</p>';
+            document.getElementById("available-agents-list").innerHTML =
+              '<p class="text-gray-500">Select a room first</p>';
+            document.getElementById("room-agents-count").textContent = "-";
+            document.getElementById("available-agents-count").textContent = "-";
+            return;
+          }
+          await Promise.all([loadRoomAgentsV2(roomId), loadAvailableAgentsV2(roomId)]);
+        });
+      }
+      async function loadRoomAgentsV2(roomId) {
+        try {
+          const response = await fetch(`/api/v2/rooms/${roomId}/agents`);
+          const data = await response.json();
+          document.getElementById("room-agents-count").textContent = `${data.count} agents`;
+          const list = document.getElementById("room-agents-list");
+          if (data.agents.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No agents in this room</p>';
+            return;
+          }
+          list.innerHTML = data.agents
+            .map(
+              (agent) => `
+                    <div class="bg-gray-800 rounded p-3 border border-gray-600 flex justify-between items-center">
+                        <div>
+                            <div class="font-semibold">${agent.agent_name || "Unnamed"}</div>
+                            <div class="text-xs text-gray-400">${agent.agent_id}</div>
+                            ${
+                              agent.capabilities
+                                ? `
+                                <div class="flex flex-wrap gap-1 mt-1">
+                                    ${agent.capabilities
+                                      .slice(0, 3)
+                                      .map(
+                                        (cap) =>
+                                          `<span class="text-xs px-2 py-1 bg-blue-900 rounded">${cap.name}</span>`
+                                      )
+                                      .join("")}
+                                </div>
+                            `
+                                : ""
+                            }
+                        </div>
+                        <button onclick="removeAgentFromRoomV2('${roomId}', '${agent.agent_id}')"
+                                class="bg-red-600 hover:bg-red-700 text-white text-xs py-1 px-3 rounded transition">
+                            Remove
+                        </button>
+                    </div>
+                `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load room agents:", error);
+          document.getElementById("room-agents-list").innerHTML =
+            '<p class="text-red-500">Error loading agents</p>';
+        }
+      }
+      async function loadAvailableAgentsV2(roomId) {
+        try {
+          const response = await fetch(`/api/v2/rooms/${roomId}/available-agents`);
+          const data = await response.json();
+          document.getElementById("available-agents-count").textContent = `${data.count} available`;
+          const list = document.getElementById("available-agents-list");
+          if (data.agents.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No more agents available</p>';
+            return;
+          }
+          list.innerHTML = data.agents
+            .map(
+              (agent) => `
+                    <div class="bg-gray-800 rounded p-3 border border-gray-600 flex justify-between items-center">
+                        <div>
+                            <div class="font-semibold">${agent.agent_name || "Unnamed"}</div>
+                            <div class="text-xs text-gray-400">${agent.agent_id}</div>
+                            ${agent.description ? `<div class="text-xs text-gray-400 mt-1">${agent.description.substring(0, 60)}...</div>` : ""}
+                        </div>
+                        <button onclick="addAgentToRoomV2('${roomId}', '${agent.agent_id}')"
+                                class="bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-3 rounded transition">
+                            Add
+                        </button>
+                    </div>
+                `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load available agents:", error);
+          document.getElementById("available-agents-list").innerHTML =
+            '<p class="text-red-500">Error loading agents</p>';
+        }
+      }
+      async function addAgentToRoomV2(roomId, agentId) {
+        try {
+          const response = await fetch(`/api/v2/rooms/${roomId}/agents/${agentId}`, {
+            method: "POST"
+          });
+          const result = await response.json();
+          if (response.ok) {
+            addEventItem(`Added agent to room`, "green");
+            setTimeout(() => {
+              loadRoomAgentsV2(roomId);
+              loadAvailableAgentsV2(roomId);
+            }, 500);
+          } else {
+            addEventItem(`Failed to add agent: ${result.error}`, "red");
+          }
+        } catch (error) {
+          console.error("Add agent error:", error);
+          addEventItem("Error adding agent", "red");
+        }
+      }
+      async function removeAgentFromRoomV2(roomId, agentId) {
+        try {
+          const response = await fetch(`/api/v2/rooms/${roomId}/agents/${agentId}`, {
+            method: "DELETE"
+          });
+          const result = await response.json();
+          if (response.ok) {
+            addEventItem(`Removed agent from room`, "green");
+            setTimeout(() => {
+              loadRoomAgentsV2(roomId);
+              loadAvailableAgentsV2(roomId);
+            }, 500);
+          } else {
+            addEventItem(`Failed to remove agent: ${result.error}`, "red");
+          }
+        } catch (error) {
+          console.error("Remove agent error:", error);
+          addEventItem("Error removing agent", "red");
         }
+      }
     </script>
-</body>
+  </body>
 </html>