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

@teneo-protocol/sdk 2.0.0 → 2.2.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 (329) hide show

package/examples/nestjs-dashboard/src/public/dashboard.html ADDED Viewed

@@ -0,0 +1,1144 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Teneo SDK - NestJS Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      .status-dot {
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+      .event-item {
+        animation: slideIn 0.3s ease-out;
+      }
+      @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;
+      }
+    </style>
+  </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 NestJS Dashboard
+        </h1>
+        <p class="text-gray-400">NestJS integration 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">Loading...</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">Loading...</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">Connected</span>
+              <span id="health-connected" class="text-gray-500">-</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-gray-400">Authenticated</span>
+              <span id="health-auth" 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 Management
+          </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>
+          <!-- 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 -->
+          <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>
+            <!-- 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>
+            <!-- Owned/Shared Rooms -->
+            <div>
+              <h3 class="font-semibold mb-2">Your Rooms</h3>
+              <div
+                id="managed-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 -->
+          <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>
+            <!-- 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>
+            <!-- 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>
+          <!-- 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>
+        </div>
+      </div>
+    </div>
+    <script>
+      // State
+      let connectionStatus = "disconnected";
+      let authStatus = "pending";
+      // Initialize
+      document.addEventListener("DOMContentLoaded", () => {
+        setupTabs();
+        setupEventSource();
+        loadInitialData();
+        setupMessageSending();
+        setupRoomManagement();
+        setupRoomManagementUI();
+        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 tabs
+            if (tab === "room-mgmt") {
+              loadRoomLimit();
+              loadManagedRooms();
+            }
+            if (tab === "agent-room") {
+              loadOwnedRooms().then((rooms) => {
+                populateAgentRoomSelector(rooms);
+              });
+            }
+          });
+        });
+      }
+      // Server-Sent Events
+      function setupEventSource() {
+        const 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);
+        });
+      }
+      function handleSSEEvent(data) {
+        switch (data.type) {
+          case "connection":
+            updateConnectionStatus(data.status);
+            break;
+          case "auth":
+            updateAuthStatus(data.status);
+            if (data.status === "success") {
+              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 "room:created":
+            addEventItem(`Room created: ${data.room.name}`, "green");
+            loadRoomLimit();
+            loadManagedRooms();
+            loadAvailableRooms();
+            break;
+          case "room:updated":
+            addEventItem(`Room updated: ${data.room.name}`, "blue");
+            loadManagedRooms();
+            break;
+          case "room:deleted":
+            addEventItem(`Room deleted`, "yellow");
+            loadRoomLimit();
+            loadManagedRooms();
+            break;
+          case "webhook:received":
+            addEventItem(`Webhook: ${data.payload.event}`, "purple");
+            loadWebhooks();
+            break;
+          case "error":
+            addEventItem(`Error: ${data.error.message}`, "red");
+            break;
+        }
+      }
+      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 = "";
+        }
+        list.insertBefore(item, list.firstChild);
+        if (list.children.length > 50) {
+          list.removeChild(list.lastChild);
+        }
+      }
+      // Load initial data
+      async function loadInitialData() {
+        await Promise.all([
+          loadAgents(),
+          loadRooms(),
+          loadAvailableRooms(),
+          loadRoomLimit(),
+          loadManagedRooms(),
+          loadEvents(),
+          loadWebhooks(),
+          loadMessages()
+        ]);
+        updateHealthFromMetrics();
+      }
+      // 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>
+                        </div>
+                        <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("")}
+                            </div>
+                        `
+                            : ""
+                        }
+                    </div>
+                `
+            )
+            .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) => `
+                    <div class="bg-gray-700 rounded-lg p-4 border border-gray-600">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <span class="font-semibold">${room.name || room.id}</span>
+                                <p class="text-sm text-gray-400">${room.id}</p>
+                            </div>
+                            <button onclick="unsubscribeRoom('${room.id}')" class="bg-red-600 hover:bg-red-700 text-white text-sm py-1 px-3 rounded transition">
+                                Unsubscribe
+                            </button>
+                        </div>
+                    </div>
+                `
+            )
+            .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;
+          }
+          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;
+          sendBtn.disabled = false;
+          sendWaitBtn.disabled = false;
+        } catch (error) {
+          console.error("Failed to load available rooms:", error);
+        }
+      }
+      // 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 || !room) return;
+        try {
+          const response = await fetch("/api/messages", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ content, room, waitForResponse })
+          });
+          const result = await response.json();
+          if (response.ok) {
+            input.value = "";
+            alert("Message sent successfully!");
+          } else {
+            alert(`Failed: ${result.error}`);
+          }
+        } catch (error) {
+          console.error("Send error:", error);
+        }
+      }
+      // 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/rooms/join", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ roomId })
+            });
+            if (response.ok) {
+              input.value = "";
+              setTimeout(() => {
+                loadRooms();
+                loadAvailableRooms();
+              }, 500);
+            }
+          } catch (error) {
+            console.error("Subscribe room error:", error);
+          }
+        });
+      }
+      async function unsubscribeRoom(roomId) {
+        try {
+          const response = await fetch("/api/rooms/leave", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ roomId })
+          });
+          if (response.ok) {
+            setTimeout(() => {
+              loadRooms();
+              loadAvailableRooms();
+            }, 500);
+          }
+        } catch (error) {
+          console.error("Unsubscribe room error:", error);
+        }
+      }
+      // Room Management UI
+      async function loadRoomLimit() {
+        try {
+          const response = await fetch("/api/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 loadManagedRooms() {
+        try {
+          const [ownedResponse, sharedResponse] = await Promise.all([
+            fetch("/api/rooms/owned"),
+            fetch("/api/rooms/shared")
+          ]);
+          const ownedRooms = await ownedResponse.json();
+          const sharedRooms = await sharedResponse.json();
+          const allRooms = [...ownedRooms, ...sharedRooms];
+          const list = document.getElementById("managed-rooms-list");
+          if (allRooms.length === 0) {
+            list.innerHTML = '<p class="text-gray-500">No rooms yet</p>';
+            return;
+          }
+          list.innerHTML = allRooms
+            .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">
+                                    ${room.is_public ? '<span class="px-2 py-1 rounded bg-blue-900">🌐 Public</span>' : '<span class="px-2 py-1 rounded bg-purple-900">🔒 Private</span>'}
+                                </div>
+                            </div>
+                            <button onclick="deleteRoom('${room.id}')" class="bg-red-600 hover:bg-red-700 text-white text-xs py-1 px-2 rounded transition">
+                                Delete
+                            </button>
+                        </div>
+                    </div>
+                `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load managed rooms:", error);
+        }
+      }
+      function setupRoomManagementUI() {
+        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) return;
+          try {
+            const response = await fetch("/api/rooms", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ name, description: description || undefined })
+            });
+            if (response.ok) {
+              document.getElementById("new-room-name").value = "";
+              document.getElementById("new-room-desc").value = "";
+              setTimeout(() => {
+                loadRoomLimit();
+                loadManagedRooms();
+                loadAvailableRooms();
+              }, 500);
+            }
+          } catch (error) {
+            console.error("Create room error:", error);
+          }
+        });
+      }
+      async function deleteRoom(roomId) {
+        if (!confirm("Are you sure you want to delete this room?")) return;
+        try {
+          const response = await fetch(`/api/rooms/${roomId}`, {
+            method: "DELETE"
+          });
+          if (response.ok) {
+            setTimeout(() => {
+              loadRoomLimit();
+              loadManagedRooms();
+              loadAvailableRooms();
+            }, 500);
+          }
+        } catch (error) {
+          console.error("Delete room error:", error);
+        }
+      }
+      // Agent-Room Management
+      async function loadOwnedRooms() {
+        const response = await fetch("/api/rooms/owned");
+        return await response.json();
+      }
+      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([loadRoomAgents(roomId), loadAvailableAgents(roomId)]);
+        });
+      }
+      async function loadRoomAgents(roomId) {
+        try {
+          const response = await fetch(`/api/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>
+                        </div>
+                        <button onclick="removeAgentFromRoom('${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);
+        }
+      }
+      async function loadAvailableAgents(roomId) {
+        try {
+          const response = await fetch(`/api/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>
+                        </div>
+                        <button onclick="addAgentToRoom('${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);
+        }
+      }
+      async function addAgentToRoom(roomId, agentId) {
+        try {
+          const response = await fetch(`/api/rooms/${roomId}/agents/${agentId}`, {
+            method: "POST"
+          });
+          if (response.ok) {
+            setTimeout(() => {
+              loadRoomAgents(roomId);
+              loadAvailableAgents(roomId);
+            }, 500);
+          }
+        } catch (error) {
+          console.error("Add agent error:", error);
+        }
+      }
+      async function removeAgentFromRoom(roomId, agentId) {
+        try {
+          const response = await fetch(`/api/rooms/${roomId}/agents/${agentId}`, {
+            method: "DELETE"
+          });
+          if (response.ok) {
+            setTimeout(() => {
+              loadRoomAgents(roomId);
+              loadAvailableAgents(roomId);
+            }, 500);
+          }
+        } catch (error) {
+          console.error("Remove agent error:", error);
+        }
+      }
+      // Health check
+      function startHealthCheck() {
+        updateHealthFromMetrics();
+        setInterval(updateHealthFromMetrics, 5000);
+      }
+      async function updateHealthFromMetrics() {
+        try {
+          const [healthResponse, metricsResponse] = await Promise.all([
+            fetch("/health"),
+            fetch("/metrics")
+          ]);
+          const health = await healthResponse.json();
+          const metrics = await metricsResponse.json();
+          // Update status
+          document.getElementById("health-overall").textContent = health.status;
+          document.getElementById("health-overall").className =
+            health.status === "healthy" ? "text-green-500" : "text-yellow-500";
+          // Update connection/auth status
+          const connected = metrics.connection?.connected || false;
+          const authenticated = metrics.connection?.authenticated || false;
+          updateConnectionStatus(connected ? "connected" : "disconnected");
+          updateAuthStatus(authenticated ? "success" : "pending");
+          document.getElementById("health-connected").textContent = connected ? "✅ Yes" : "❌ No";
+          document.getElementById("health-connected").className = connected
+            ? "text-green-500"
+            : "text-red-500";
+          document.getElementById("health-auth").textContent = authenticated ? "✅ Yes" : "❌ No";
+          document.getElementById("health-auth").className = authenticated
+            ? "text-green-500"
+            : "text-red-500";
+          // Update message count
+          document.getElementById("messages-count").textContent = metrics.messages?.sent || 0;
+        } catch (error) {
+          console.error("Health check failed:", error);
+        }
+      }
+      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";
+        } 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";
+        }
+      }
+      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";
+        }
+      }
+      // 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>
+                    <span class="text-xs text-gray-400">${new Date(evt.timestamp).toLocaleTimeString()}</span>
+                  </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);
+        }
+      }
+      // 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>
+                    <span class="text-xs text-gray-400">${new Date(wh.receivedAt).toLocaleTimeString()}</span>
+                  </div>
+                  <pre class="text-xs text-gray-400 overflow-x-auto">${JSON.stringify(wh.data || wh, null, 2)}</pre>
+                </div>
+              `
+            )
+            .join("");
+        } catch (error) {
+          console.error("Failed to load webhooks:", error);
+        }
+      }
+      // Load messages
+      async function loadMessages() {
+        try {
+          const response = await fetch("/api/messages");
+          const messages = await response.json();
+          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>
+                  </div>
+                  <p class="text-sm mb-2">${msg.content}</p>
+                  ${
+                    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);
+        }
+      }
+    </script>
+  </body>
+</html>