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

@teneo-protocol/sdk 1.0.0 → 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 (211) hide show

package/.github/workflows/publish-npm.yml +8 -6
package/CHANGELOG.md +265 -0
package/README.md +406 -53
package/dist/core/websocket-client.d.ts +13 -0
package/dist/core/websocket-client.d.ts.map +1 -1
package/dist/core/websocket-client.js +34 -3
package/dist/core/websocket-client.js.map +1 -1
package/dist/handlers/message-handlers/agent-room-operation-response-handler.d.ts +76 -0
package/dist/handlers/message-handlers/agent-room-operation-response-handler.d.ts.map +1 -0
package/dist/handlers/message-handlers/agent-room-operation-response-handler.js +70 -0
package/dist/handlers/message-handlers/agent-room-operation-response-handler.js.map +1 -0
package/dist/handlers/message-handlers/agent-selected-handler.d.ts +92 -38
package/dist/handlers/message-handlers/agent-selected-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/agent-status-update-handler.d.ts +904 -0
package/dist/handlers/message-handlers/agent-status-update-handler.d.ts.map +1 -0
package/dist/handlers/message-handlers/agent-status-update-handler.js +51 -0
package/dist/handlers/message-handlers/agent-status-update-handler.js.map +1 -0
package/dist/handlers/message-handlers/auth-error-handler.d.ts +45 -31
package/dist/handlers/message-handlers/auth-error-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/auth-message-handler.d.ts +6 -0
package/dist/handlers/message-handlers/auth-message-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/auth-message-handler.js +65 -5
package/dist/handlers/message-handlers/auth-message-handler.js.map +1 -1
package/dist/handlers/message-handlers/auth-required-handler.d.ts +49 -31
package/dist/handlers/message-handlers/auth-required-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/auth-success-handler.d.ts +6 -0
package/dist/handlers/message-handlers/auth-success-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/auth-success-handler.js +46 -4
package/dist/handlers/message-handlers/auth-success-handler.js.map +1 -1
package/dist/handlers/message-handlers/challenge-handler.d.ts +45 -31
package/dist/handlers/message-handlers/challenge-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/error-message-handler.d.ts +49 -31
package/dist/handlers/message-handlers/error-message-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/index.d.ts +5 -0
package/dist/handlers/message-handlers/index.d.ts.map +1 -1
package/dist/handlers/message-handlers/index.js +23 -1
package/dist/handlers/message-handlers/index.js.map +1 -1
package/dist/handlers/message-handlers/list-available-agents-handler.d.ts +877 -0
package/dist/handlers/message-handlers/list-available-agents-handler.d.ts.map +1 -0
package/dist/handlers/message-handlers/list-available-agents-handler.js +38 -0
package/dist/handlers/message-handlers/list-available-agents-handler.js.map +1 -0
package/dist/handlers/message-handlers/list-room-agents-handler.d.ts +886 -0
package/dist/handlers/message-handlers/list-room-agents-handler.d.ts.map +1 -0
package/dist/handlers/message-handlers/list-room-agents-handler.js +51 -0
package/dist/handlers/message-handlers/list-room-agents-handler.js.map +1 -0
package/dist/handlers/message-handlers/list-rooms-response-handler.d.ts +178 -89
package/dist/handlers/message-handlers/list-rooms-response-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/ping-pong-handler.d.ts +62 -58
package/dist/handlers/message-handlers/ping-pong-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/regular-message-handler.d.ts +31 -29
package/dist/handlers/message-handlers/regular-message-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/regular-message-handler.js +1 -0
package/dist/handlers/message-handlers/regular-message-handler.js.map +1 -1
package/dist/handlers/message-handlers/room-operation-response-handler.d.ts +328 -0
package/dist/handlers/message-handlers/room-operation-response-handler.d.ts.map +1 -0
package/dist/handlers/message-handlers/room-operation-response-handler.js +92 -0
package/dist/handlers/message-handlers/room-operation-response-handler.js.map +1 -0
package/dist/handlers/message-handlers/subscribe-response-handler.d.ts +53 -31
package/dist/handlers/message-handlers/subscribe-response-handler.d.ts.map +1 -1
package/dist/handlers/message-handlers/types.d.ts +2 -0
package/dist/handlers/message-handlers/types.d.ts.map +1 -1
package/dist/handlers/message-handlers/unsubscribe-response-handler.d.ts +53 -31
package/dist/handlers/message-handlers/unsubscribe-response-handler.d.ts.map +1 -1
package/dist/managers/agent-room-manager.d.ts +222 -0
package/dist/managers/agent-room-manager.d.ts.map +1 -0
package/dist/managers/agent-room-manager.js +508 -0
package/dist/managers/agent-room-manager.js.map +1 -0
package/dist/managers/index.d.ts +2 -0
package/dist/managers/index.d.ts.map +1 -1
package/dist/managers/index.js +5 -1
package/dist/managers/index.js.map +1 -1
package/dist/managers/message-router.d.ts +1 -1
package/dist/managers/message-router.d.ts.map +1 -1
package/dist/managers/message-router.js +41 -4
package/dist/managers/message-router.js.map +1 -1
package/dist/managers/room-management-manager.d.ts +213 -0
package/dist/managers/room-management-manager.d.ts.map +1 -0
package/dist/managers/room-management-manager.js +440 -0
package/dist/managers/room-management-manager.js.map +1 -0
package/dist/managers/room-manager.d.ts +4 -4
package/dist/managers/room-manager.d.ts.map +1 -1
package/dist/managers/room-manager.js +1 -1
package/dist/managers/room-manager.js.map +1 -1
package/dist/teneo-sdk.d.ts +362 -14
package/dist/teneo-sdk.d.ts.map +1 -1
package/dist/teneo-sdk.js +497 -7
package/dist/teneo-sdk.js.map +1 -1
package/dist/types/config.d.ts +63 -54
package/dist/types/config.d.ts.map +1 -1
package/dist/types/config.js +9 -5
package/dist/types/config.js.map +1 -1
package/dist/types/error-codes.d.ts +2 -0
package/dist/types/error-codes.d.ts.map +1 -1
package/dist/types/error-codes.js +3 -0
package/dist/types/error-codes.js.map +1 -1
package/dist/types/events.d.ts +132 -68
package/dist/types/events.d.ts.map +1 -1
package/dist/types/events.js.map +1 -1
package/dist/types/index.d.ts +1 -1
package/dist/types/index.d.ts.map +1 -1
package/dist/types/index.js +27 -2
package/dist/types/index.js.map +1 -1
package/dist/types/messages.d.ts +11396 -2559
package/dist/types/messages.d.ts.map +1 -1
package/dist/types/messages.js +294 -27
package/dist/types/messages.js.map +1 -1
package/dist/types/validation.d.ts.map +1 -1
package/dist/types/validation.js +1 -1
package/dist/types/validation.js.map +1 -1
package/dist/utils/bounded-queue.d.ts +1 -1
package/dist/utils/bounded-queue.js +6 -6
package/dist/utils/circuit-breaker.d.ts.map +1 -1
package/dist/utils/circuit-breaker.js.map +1 -1
package/dist/utils/event-waiter.d.ts.map +1 -1
package/dist/utils/event-waiter.js +2 -1
package/dist/utils/event-waiter.js.map +1 -1
package/dist/utils/rate-limiter.d.ts.map +1 -1
package/dist/utils/rate-limiter.js +4 -6
package/dist/utils/rate-limiter.js.map +1 -1
package/dist/utils/secure-private-key.d.ts.map +1 -1
package/dist/utils/secure-private-key.js +9 -15
package/dist/utils/secure-private-key.js.map +1 -1
package/dist/utils/signature-verifier.d.ts +2 -2
package/dist/utils/signature-verifier.d.ts.map +1 -1
package/dist/utils/signature-verifier.js +5 -5
package/dist/utils/signature-verifier.js.map +1 -1
package/examples/.env.example +1 -1
package/examples/agent-room-management-example.ts +334 -0
package/examples/claude-agent-x-follower/.env.example +117 -0
package/examples/claude-agent-x-follower/QUICKSTART.md +243 -0
package/examples/claude-agent-x-follower/README.md +540 -0
package/examples/claude-agent-x-follower/index.ts +248 -0
package/examples/claude-agent-x-follower/package.json +37 -0
package/examples/claude-agent-x-follower/tsconfig.json +20 -0
package/examples/n8n-teneo/.env.example +127 -0
package/examples/n8n-teneo/Dockerfile +42 -0
package/examples/n8n-teneo/README.md +564 -0
package/examples/n8n-teneo/docker-compose.yml +71 -0
package/examples/n8n-teneo/index.ts +177 -0
package/examples/n8n-teneo/package.json +22 -0
package/examples/n8n-teneo/tsconfig.json +12 -0
package/examples/n8n-teneo/workflows/x-timeline.json +66 -0
package/examples/openai-teneo/.env.example +130 -0
package/examples/openai-teneo/README.md +635 -0
package/examples/openai-teneo/index.ts +280 -0
package/examples/openai-teneo/package.json +24 -0
package/examples/openai-teneo/tsconfig.json +16 -0
package/examples/production-dashboard/.env.example +5 -3
package/examples/production-dashboard/README.md +839 -0
package/examples/production-dashboard/pnpm-lock.yaml +92 -0
package/examples/production-dashboard/public/dashboard.html +1150 -504
package/examples/production-dashboard/server.ts +428 -12
package/examples/room-management-example.ts +285 -0
package/examples/usage/.env.example +17 -0
package/examples/usage/01-connect.ts +116 -0
package/examples/usage/02-list-agents.ts +153 -0
package/examples/usage/03-pick-agent.ts +201 -0
package/examples/usage/04-find-by-capability.ts +237 -0
package/examples/usage/05-webhook-example.ts +319 -0
package/examples/usage/06-simple-api-server.ts +396 -0
package/examples/usage/07-event-listener.ts +402 -0
package/examples/usage/README.md +383 -0
package/examples/usage/package.json +42 -0
package/package.json +13 -3
package/src/core/websocket-client.ts +43 -9
package/src/formatters/response-formatter.test.ts +8 -2
package/src/handlers/message-handlers/agent-room-operation-response-handler.ts +83 -0
package/src/handlers/message-handlers/agent-status-update-handler.ts +58 -0
package/src/handlers/message-handlers/auth-message-handler.ts +73 -5
package/src/handlers/message-handlers/auth-success-handler.ts +58 -6
package/src/handlers/message-handlers/index.ts +19 -0
package/src/handlers/message-handlers/list-available-agents-handler.ts +41 -0
package/src/handlers/message-handlers/list-room-agents-handler.ts +61 -0
package/src/handlers/message-handlers/regular-message-handler.ts +1 -0
package/src/handlers/message-handlers/room-operation-response-handler.ts +105 -0
package/src/handlers/message-handlers/types.ts +6 -0
package/src/handlers/webhook-handler.test.ts +13 -10
package/src/managers/agent-room-manager.ts +609 -0
package/src/managers/index.ts +2 -0
package/src/managers/message-router.ts +48 -6
package/src/managers/room-management-manager.ts +523 -0
package/src/managers/room-manager.ts +12 -6
package/src/teneo-sdk.ts +543 -10
package/src/types/config.ts +13 -6
package/src/types/error-codes.ts +4 -0
package/src/types/events.ts +24 -0
package/src/types/index.ts +55 -0
package/src/types/messages.ts +374 -41
package/src/types/validation.ts +4 -1
package/src/utils/bounded-queue.ts +9 -9
package/src/utils/circuit-breaker.ts +4 -1
package/src/utils/deduplication-cache.test.ts +2 -6
package/src/utils/event-waiter.test.ts +4 -1
package/src/utils/event-waiter.ts +5 -7
package/src/utils/rate-limiter.test.ts +5 -17
package/src/utils/rate-limiter.ts +6 -9
package/src/utils/secure-private-key.test.ts +66 -59
package/src/utils/secure-private-key.ts +10 -16
package/src/utils/signature-verifier.test.ts +75 -70
package/src/utils/signature-verifier.ts +7 -8
package/src/utils/ssrf-validator.test.ts +3 -3
package/tests/integration/room-management.test.ts +514 -0
package/tests/integration/websocket.test.ts +1 -1
package/tests/unit/handlers/agent-room-operation-response-handler.test.ts +394 -0
package/tests/unit/handlers/agent-status-update-handler.test.ts +407 -0
package/tests/unit/handlers/auth-success-handler-rooms.test.ts +699 -0
package/tests/unit/handlers/list-available-agents-handler.test.ts +256 -0
package/tests/unit/handlers/list-room-agents-handler.test.ts +294 -0
package/tests/unit/handlers/room-operation-response-handler.test.ts +527 -0
package/tests/unit/managers/agent-room-manager.test.ts +534 -0
package/tests/unit/managers/room-management-manager.test.ts +438 -0

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

@@ -1,357 +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>
+        <!-- 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>
+        <!-- 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>
+        <!-- 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>
-            <!-- 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>
+      <!-- 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>
+        <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 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>
+          <!-- 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>
-            <!-- 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>
+          <!-- 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>
-        </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>
-                <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">
-                        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">
-                        Send & Wait
-                    </button>
-                </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>
-            <!-- 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>
+            <!-- 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>
+          </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>
+          <!-- 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();
+      // 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();
+            }
+            // 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);
+                  });
+              });
+            }
+          });
         });
+      }
-        // 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");
-        // 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("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);
-            });
-        }
+        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);
-                    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();
-                    break;
-                case 'room:unsubscribed':
-                    addEventItem(`Unsubscribed from room: ${data.data.roomId}`, 'yellow');
-                    loadRooms();
-                    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;
+      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 initial data
-        async function loadInitialData() {
-            await Promise.all([
-                loadAgents(),
-                loadRooms(),
-                loadMessages(),
-                loadWebhooks(),
-                loadEvents(),
-                loadMetrics()
-            ]);
-        }
+      // 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;
+      // 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;
-                }
+          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 => `
+          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();
+      // 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;
-                }
+          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 => `
+          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>
@@ -363,60 +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 messages
-        async function loadMessages() {
-            try {
-                const response = await fetch('/api/messages');
-                const messages = await response.json();
-                document.getElementById('messages-count').textContent = messages.length;
+      // 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;
-                }
+          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 => `
+          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();
+      // 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;
-                }
+          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 => `
+          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>
@@ -424,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();
+      // 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;
-                }
+          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 => `
+          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>
@@ -450,193 +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 content = input.value.trim();
-            if (!content) return;
-            try {
-                const response = await fetch('/api/message', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ content, waitForResponse })
-                });
-                if (response.ok) {
-                    input.value = '';
-                    addEventItem(`Sent: ${content}`, 'green');
-                    setTimeout(loadMessages, 500);
-                } else {
-                    addEventItem('Failed to send message', 'red');
-                }
-            } catch (error) {
-                console.error('Send error:', error);
-                addEventItem('Error sending message', 'red');
-            }
-        }
+      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;
-        // 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);
-                }
-            });
+        if (!content) {
+          addEventItem("Please enter a message", "yellow");
+          return;
         }
-        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 (!room) {
+          addEventItem("Please select a room", "yellow");
+          return;
         }
-        // Update status displays
-        function updateConnectionStatus(status) {
-            connectionStatus = status;
-            const dot = document.getElementById('connection-dot');
-            const text = document.getElementById('connection-status');
-            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';
-                document.getElementById('send-message-btn').disabled = false;
-                document.getElementById('send-wait-btn').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';
-            } 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';
-                document.getElementById('send-message-btn').disabled = true;
-                document.getElementById('send-wait-btn').disabled = true;
-            }
+        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");
         }
+      }
-        function updateAuthStatus(status) {
-            authStatus = status;
-            const dot = document.getElementById('auth-dot');
-            const text = document.getElementById('auth-status');
+      // 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 (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 (!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);
+          }
+        });
+      }
+      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);
         }
+      }
-        // 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);
+      // 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");
-        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`;
+        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";
         }
+      }
-        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 = `
+      // 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>
             `;
-            if (list.firstChild && list.firstChild.textContent.includes('Waiting for events')) {
-                list.innerHTML = '';
-            }
+        if (list.firstChild && list.firstChild.textContent.includes("Waiting for events")) {
+          list.innerHTML = "";
+        }
+        list.insertBefore(item, list.firstChild);
+        if (list.children.length > 50) {
+          list.removeChild(list.lastChild);
+        }
+      }
+      // ===========================================
+      // V2.0 ROOM MANAGEMENT FUNCTIONS
+      // ===========================================
+      async function loadRoomLimitV2() {
+        try {
+          const response = await fetch("/api/v2/rooms/limit");
+          const data = await response.json();
+          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;
+          }
-            list.insertBefore(item, list.firstChild);
+          try {
+            const response = await fetch("/api/v2/rooms", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ name, description: description || undefined })
+            });
+            const result = await response.json();
+            if (response.ok) {
+              document.getElementById("new-room-name").value = "";
+              document.getElementById("new-room-desc").value = "";
-            if (list.children.length > 50) {
-                list.removeChild(list.lastChild);
+              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");
+        }
+      }
+      // ===========================================
+      // V2.0 AGENT-ROOM MANAGEMENT FUNCTIONS
+      // ===========================================
+      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>