agent-relay-server 0.3.11 → 0.4.0

package/public/dashboard.js

@@ -0,0 +1,701 @@
+(() => {
+  const PREF_PREFIX = "ar-";
+  const DEFAULT_COMPOSE = { from: "", to: "", body: "", channel: "", subject: "", claimable: false };
+  const CLOSED_TASK_STATUSES = new Set(["done", "failed", "canceled"]);
+  const STATUS_SORT_ORDER = { online: 0, idle: 1, busy: 2, offline: 3 };
+
+  function loadPref(key, fallback) {
+    try {
+      const value = localStorage.getItem(PREF_PREFIX + key);
+      return value !== null ? JSON.parse(value) : fallback;
+    } catch {
+      return fallback;
+    }
+  }
+
+  function savePref(key, value) {
+    localStorage.setItem(PREF_PREFIX + key, JSON.stringify(value));
+  }
+
+  function initialState() {
+    return {
+      view: loadPref("view", "overview"),
+
+      showOffline: loadPref("showOffline", false),
+      autoRefresh: loadPref("autoRefresh", true),
+      agentSort: loadPref("agentSort", "status"),
+      agentSortDir: loadPref("agentSortDir", "asc"),
+
+      agents: [],
+      agentsById: {},
+      messages: [],
+      tasks: [],
+      taskEvents: [],
+      stats: {},
+      authToken: loadPref("authToken", ""),
+
+      selectedAgent: "",
+      replyTo: null,
+      composeOpen: false,
+      threadOpen: false,
+      threadMessages: [],
+      taskEventsOpen: false,
+      connected: false,
+      authNeeded: false,
+
+      compose: { ...DEFAULT_COMPOSE },
+
+      confirmModal: { show: false, title: "", message: "", action: null },
+      renameModal: { show: false, agentId: "", label: "" },
+
+      channelFilter: "",
+      tagFilter: "",
+      agentStatusFilter: loadPref("agentStatusFilter", ""),
+      agentTagFilter: loadPref("agentTagFilter", ""),
+      taskStatusFilter: "",
+      taskSourceFilter: "",
+
+      chartInstances: {},
+      _es: null,
+      _statsTimer: null,
+    };
+  }
+
+  function watchPersistedPrefs(vm) {
+    vm.$watch("showOffline", (value) => vm.save("showOffline", value));
+    vm.$watch("agentSort", (value) => vm.save("agentSort", value));
+    vm.$watch("agentSortDir", (value) => vm.save("agentSortDir", value));
+    vm.$watch("agentStatusFilter", (value) => vm.save("agentStatusFilter", value));
+    vm.$watch("agentTagFilter", (value) => vm.save("agentTagFilter", value));
+    vm.$watch("view", (value) => {
+      vm.save("view", value);
+      if (value === "analytics") vm.$nextTick(() => vm.renderCharts());
+    });
+  }
+
+  function parseEventData(event) {
+    return JSON.parse(event.data);
+  }
+
+  function indexAgents(agents) {
+    const byId = {};
+    for (const agent of agents) byId[agent.id] = agent;
+    return byId;
+  }
+
+  function upsertById(list, item) {
+    const idx = list.findIndex((existing) => existing.id === item.id);
+    if (idx >= 0) list[idx] = item;
+    else list.push(item);
+  }
+
+  function upsertTask(vm, task) {
+    const idx = vm.tasks.findIndex((existing) => existing.id === task.id);
+    if (idx >= 0) vm.tasks[idx] = task;
+    else vm.tasks.unshift(task);
+  }
+
+  function createLifecycleMethods() {
+    return {
+      async init() {
+        await this.refresh();
+        this.connectSSE();
+        this._statsTimer = setInterval(() => this.fetchStats(), 30_000);
+        watchPersistedPrefs(this);
+      },
+
+      save(key, value) {
+        savePref(key, value);
+      },
+
+      switchView(view) {
+        this.view = view;
+        if (view === "messages") this.fetchMessages();
+        if (view === "tasks") this.fetchTasks();
+      },
+    };
+  }
+
+  function createSseMethods() {
+    return {
+      connectSSE,
+    };
+  }
+
+  function connectSSE() {
+    if (this._es) this._es.close();
+
+    const es = new EventSource(buildEventsUrl(this.authToken));
+    this._es = es;
+
+    es.addEventListener("connected", () => {
+      this.connected = true;
+    });
+    es.onerror = () => {
+      this.connected = false;
+    };
+
+    es.addEventListener("message.new", (event) => handleNewMessage(this, parseEventData(event)));
+    es.addEventListener("agent.status", (event) => handleAgentStatus(this, parseEventData(event)));
+    es.addEventListener("agent.removed", (event) => handleAgentRemoved(this, parseEventData(event)));
+    es.addEventListener("message.claimed", (event) => handleMessageClaimed(this, parseEventData(event)));
+    es.addEventListener("message.deleted", (event) => handleMessageDeleted(this, parseEventData(event)));
+    registerTaskEvents(this, es);
+  }
+
+  function buildEventsUrl(authToken) {
+    const eventUrl = new URL(window.location.origin + "/api/events");
+    if (authToken) eventUrl.searchParams.set("token", authToken);
+    return eventUrl.toString();
+  }
+
+  function handleNewMessage(vm, msg) {
+    if (vm.messages.some((existing) => existing.id === msg.id)) return;
+    if (vm.selectedAgent && msg.from !== vm.selectedAgent && msg.to !== vm.selectedAgent) return;
+    if (vm.channelFilter && msg.channel !== vm.channelFilter) return;
+
+    vm.messages.push(msg);
+    if (vm.messages.length > 200) vm.messages.shift();
+    vm.stats.messages = (vm.stats.messages ?? 0) + 1;
+  }
+
+  function handleAgentStatus(vm, agent) {
+    upsertById(vm.agents, agent);
+    vm.agentsById[agent.id] = agent;
+  }
+
+  function handleAgentRemoved(vm, data) {
+    vm.agents = vm.agents.filter((agent) => agent.id !== data.id);
+    delete vm.agentsById[data.id];
+  }
+
+  function handleMessageClaimed(vm, data) {
+    const msg = vm.messages.find((item) => item.id === data.messageId);
+    if (msg) msg.claimedBy = data.claimedBy;
+  }
+
+  function handleMessageDeleted(vm, data) {
+    vm.messages = vm.messages.filter((msg) => msg.id !== data.messageId);
+  }
+
+  function registerTaskEvents(vm, es) {
+    for (const eventName of ["task.created", "task.updated", "task.claimed", "task.status"]) {
+      es.addEventListener(eventName, (event) => upsertTask(vm, parseEventData(event)));
+    }
+  }
+
+  function createApiMethods() {
+    return {
+      async api(method, path, body) {
+        const opts = { method, headers: {} };
+        if (this.authToken) opts.headers["X-Agent-Relay-Token"] = this.authToken;
+        if (body) {
+          opts.headers["Content-Type"] = "application/json";
+          opts.body = JSON.stringify(body);
+        }
+
+        const response = await fetch(window.location.origin + "/api" + path, opts);
+        if (!response.ok) {
+          if (response.status === 401) this.authNeeded = true;
+          const text = await response.text();
+          throw new Error(text || response.statusText);
+        }
+
+        this.authNeeded = false;
+        return response.json();
+      },
+
+      saveTokenAndRefresh() {
+        this.save("authToken", this.authToken);
+        this.authNeeded = false;
+        this.connectSSE();
+        this.refresh();
+      },
+
+      async refresh() {
+        await Promise.all([this.fetchStats(), this.fetchAgents(), this.fetchMessages(), this.fetchTasks()]);
+      },
+
+      async fetchStats() {
+        try {
+          this.stats = await this.api("GET", "/stats");
+        } catch {}
+      },
+
+      async fetchAgents() {
+        try {
+          this.agents = await this.api("GET", "/agents");
+          this.agentsById = indexAgents(this.agents);
+        } catch {}
+      },
+
+      async fetchMessages() {
+        try {
+          let path = "/messages?limit=100";
+          if (this.selectedAgent) path += "&for=" + encodeURIComponent(this.selectedAgent);
+          if (this.channelFilter) path += "&channel=" + encodeURIComponent(this.channelFilter);
+          this.messages = await this.api("GET", path);
+        } catch {}
+      },
+
+      async fetchTasks() {
+        try {
+          const params = new URLSearchParams({ limit: "100" });
+          if (this.taskStatusFilter) params.set("status", this.taskStatusFilter);
+          if (this.taskSourceFilter) params.set("source", this.taskSourceFilter);
+          this.tasks = await this.api("GET", "/tasks?" + params.toString());
+        } catch {}
+      },
+    };
+  }
+
+  function createComputedDescriptors() {
+    return {
+      onlineCount: { get: getOnlineCount },
+      sortedAgents: { get: getSortedAgents },
+      filteredMessages: { get: getFilteredMessages },
+      groupedMessages: { get: getGroupedMessages },
+      filteredTasks: { get: getFilteredTasks },
+      composeAgents: { get: getComposeAgents },
+      uniqueLabels: { get: getUniqueLabels },
+      uniqueCaps: { get: getUniqueCaps },
+      uniqueTags: { get: getUniqueTags },
+    };
+  }
+
+  function getOnlineCount() {
+    return this.agents.filter((agent) => agent.status !== "offline").length;
+  }
+
+  function getSortedAgents() {
+    let list = this.showOffline ? [...this.agents] : this.agents.filter((agent) => agent.status !== "offline");
+    if (this.agentStatusFilter === "starting") {
+      list = list.filter((agent) => agent.status !== "offline" && !agent.ready);
+    } else if (this.agentStatusFilter) {
+      list = list.filter((agent) => agent.status === this.agentStatusFilter);
+    }
+    if (this.agentTagFilter) {
+      list = list.filter((agent) => (agent.tags || []).includes(this.agentTagFilter));
+    }
+
+    const dir = this.agentSortDir === "desc" ? -1 : 1;
+    return list.sort((a, b) => compareAgents(this, a, b) * dir);
+  }
+
+  function getFilteredMessages() {
+    if (!this.tagFilter) return this.messages;
+    return this.messages.filter((msg) => messageMatchesTag(this, msg, this.tagFilter));
+  }
+
+  function messageMatchesTag(vm, msg, tag) {
+    if (msg.to === "tag:" + tag) return true;
+    if (vm.agentsById[msg.from]?.tags?.includes(tag)) return true;
+    if (vm.agentsById[msg.to]?.tags?.includes(tag)) return true;
+    return false;
+  }
+
+  function getGroupedMessages() {
+    const threads = new Map();
+    for (const msg of this.filteredMessages) {
+      const threadId = msg.threadId || msg.id;
+      if (!threads.has(threadId)) threads.set(threadId, { threadId, messages: [] });
+      threads.get(threadId).messages.push(msg);
+    }
+
+    for (const group of threads.values()) {
+      group.messages.sort((a, b) => a.id - b.id);
+    }
+
+    return [...threads.values()].sort(compareThreadGroups);
+  }
+
+  function compareThreadGroups(a, b) {
+    const aLast = a.messages[a.messages.length - 1].id;
+    const bLast = b.messages[b.messages.length - 1].id;
+    return bLast - aLast;
+  }
+
+  function getFilteredTasks() {
+    if (this.taskStatusFilter) return this.tasks;
+    return this.tasks.filter((task) => !CLOSED_TASK_STATUSES.has(task.status));
+  }
+
+  function getComposeAgents() {
+    return this.showOffline ? this.agents : this.agents.filter((agent) => agent.status !== "offline");
+  }
+
+  function getUniqueLabels() {
+    return [...new Set(this.agents.filter((agent) => agent.label).map((agent) => agent.label))];
+  }
+
+  function getUniqueCaps() {
+    return [...new Set(this.agents.flatMap((agent) => agent.capabilities || []))];
+  }
+
+  function getUniqueTags() {
+    return [...new Set(this.agents.flatMap((agent) => agent.tags || []))];
+  }
+
+  function compareAgents(vm, a, b) {
+    switch (vm.agentSort) {
+      case "name":
+        return vm.displayName(a).localeCompare(vm.displayName(b));
+      case "status":
+        return (STATUS_SORT_ORDER[a.status] ?? 9) - (STATUS_SORT_ORDER[b.status] ?? 9);
+      case "lastSeen":
+        return new Date(b.lastSeen) - new Date(a.lastSeen);
+      case "created":
+        return new Date(b.createdAt) - new Date(a.createdAt);
+      default:
+        return 0;
+    }
+  }
+
+  function createDisplayMethods() {
+    return {
+      displayName,
+      displayTarget,
+      severityClass,
+      agentStatusTitle,
+      timeAgo,
+      fmtTime,
+    };
+  }
+
+  function displayName(agent) {
+    if (!agent) return "?";
+    return agent.label || agent.name || agent.id.slice(-12);
+  }
+
+  function displayTarget(target) {
+    if (!target) return "?";
+    if (target === "broadcast") return "broadcast";
+    if (target.startsWith("tag:")) return "#" + target.slice(4);
+    if (target.startsWith("cap:")) return target.slice(4);
+    if (target.startsWith("label:")) return target.slice(6);
+
+    const agent = this.agentsById[target];
+    return agent ? this.displayName(agent) : target.slice(-8);
+  }
+
+  function severityClass(severity) {
+    if (severity === "critical") return "bg-danger-lt";
+    if (severity === "warning") return "bg-warning-lt";
+    return "bg-info-lt";
+  }
+
+  function agentStatusTitle(agent) {
+    if (!agent) return "";
+    if (agent.status === "offline") return "offline";
+    if (agent.ready) return agent.status;
+
+    const lastSeenMs = new Date(agent.lastSeen).getTime();
+    if (!Number.isFinite(lastSeenMs)) return "Trying to reconnect...";
+
+    const ageSec = Math.max(0, (Date.now() - lastSeenMs) / 1000);
+    return ageSec <= 45 ? "Starting up..." : "Trying to reconnect...";
+  }
+
+  function timeAgo(iso) {
+    if (!iso) return "";
+    const ts = new Date(iso).getTime();
+    if (!Number.isFinite(ts)) return "";
+
+    const diff = Math.max(0, (Date.now() - ts) / 1000);
+    if (diff < 60) return Math.floor(diff) + "s ago";
+    if (diff < 3600) return Math.floor(diff / 60) + "m ago";
+    if (diff < 86400) return Math.floor(diff / 3600) + "h ago";
+    return Math.floor(diff / 86400) + "d ago";
+  }
+
+  function fmtTime(iso) {
+    if (!iso) return "";
+    return new Date(iso).toLocaleString();
+  }
+
+  function createMessageActions() {
+    return {
+      openCompose,
+      openComposeToAgent,
+      startReply,
+      cancelReply,
+      doSend,
+      doClaim,
+      doDeleteMessage,
+      openThread,
+      openTaskEvents,
+    };
+  }
+
+  function focusComposeBody(vm) {
+    vm.$nextTick(() => vm.$refs.composeBody?.focus());
+  }
+
+  function openCompose() {
+    if (!this.replyTo) this.compose = { ...DEFAULT_COMPOSE, from: "user" };
+    this.composeOpen = true;
+    focusComposeBody(this);
+  }
+
+  function openComposeToAgent(agent) {
+    this.replyTo = null;
+    this.compose = { ...DEFAULT_COMPOSE, from: "user", to: agent.id };
+    this.composeOpen = true;
+    focusComposeBody(this);
+  }
+
+  function startReply(msg) {
+    this.replyTo = { id: msg.id, from: msg.from };
+    this.compose = {
+      ...DEFAULT_COMPOSE,
+      from: "",
+      to: msg.from,
+      channel: msg.channel || "",
+    };
+    this.openCompose();
+  }
+
+  function cancelReply() {
+    this.replyTo = null;
+  }
+
+  function buildMessagePayload(vm) {
+    const payload = {
+      from: vm.compose.from,
+      to: vm.compose.to,
+      body: vm.compose.body,
+    };
+    if (vm.compose.channel) payload.channel = vm.compose.channel;
+    if (vm.compose.subject) payload.subject = vm.compose.subject;
+    if (vm.replyTo) payload.replyTo = vm.replyTo.id;
+    if (vm.compose.claimable) payload.claimable = true;
+    return payload;
+  }
+
+  async function doSend() {
+    if (!this.compose.from || !this.compose.to || !this.compose.body) {
+      alert("From, To, and Message are required.");
+      return;
+    }
+
+    try {
+      await this.api("POST", "/messages", buildMessagePayload(this));
+      this.composeOpen = false;
+      this.replyTo = null;
+      this.compose = { ...DEFAULT_COMPOSE };
+    } catch (e) {
+      alert("Send failed: " + e.message);
+    }
+  }
+
+  async function doClaim(msgId) {
+    if (!this.compose.from && !this.selectedAgent) {
+      alert('Select a "From" agent first (open Compose to pick one).');
+      return;
+    }
+
+    const agentId = this.compose.from || this.selectedAgent;
+    try {
+      const result = await this.api("POST", "/messages/" + msgId + "/claim", { agentId });
+      if (!result.ok) alert("Claim failed: " + (result.error || "unknown"));
+    } catch (e) {
+      alert("Claim failed: " + e.message);
+    }
+  }
+
+  async function doDeleteMessage(id) {
+    try {
+      await this.api("DELETE", "/messages/" + id);
+      this.messages = this.messages.filter((msg) => msg.id !== id);
+    } catch (e) {
+      alert("Delete failed: " + e.message);
+    }
+  }
+
+  async function openThread(threadId) {
+    this.threadMessages = [];
+    this.threadOpen = true;
+    try {
+      this.threadMessages = await this.api("GET", "/messages/" + threadId + "/thread");
+    } catch (e) {
+      alert("Failed to load thread: " + e.message);
+    }
+  }
+
+  async function openTaskEvents(task) {
+    this.taskEvents = [];
+    this.taskEventsOpen = true;
+    try {
+      this.taskEvents = await this.api("GET", "/tasks/" + task.id + "/events");
+    } catch (e) {
+      alert("Failed to load task events: " + e.message);
+    }
+  }
+
+  function createAgentActions() {
+    return {
+      openRename(agent) {
+        this.renameModal = { show: true, agentId: agent.id, label: agent.label || "" };
+        this.$nextTick(() => this.$refs.renameInput?.focus());
+      },
+
+      async doRename() {
+        const label = this.renameModal.label.trim() || null;
+        try {
+          await this.api("PATCH", "/agents/" + this.renameModal.agentId + "/label", { label });
+          this.renameModal.show = false;
+        } catch (e) {
+          alert("Rename failed: " + e.message);
+        }
+      },
+
+      openConfirm(title, message, action) {
+        this.confirmModal = { show: true, title, message, action };
+      },
+
+      async doDeleteAgent(id) {
+        try {
+          await this.api("DELETE", "/agents/" + id);
+          if (this.selectedAgent === id) this.selectedAgent = "";
+          this.agents = this.agents.filter((agent) => agent.id !== id);
+          delete this.agentsById[id];
+        } catch (e) {
+          alert("Delete failed: " + e.message);
+        }
+      },
+    };
+  }
+
+  function createChartMethods() {
+    return {
+      renderCharts,
+      renderVolumeChart,
+      renderStatusChart,
+      renderAgentChart,
+    };
+  }
+
+  function renderCharts() {
+    this.renderVolumeChart();
+    this.renderStatusChart();
+    this.renderAgentChart();
+  }
+
+  function renderVolumeChart() {
+    destroyChart(this, "volume");
+
+    const el = document.querySelector("#chart-volume");
+    if (!el) return;
+
+    this.chartInstances.volume = new ApexCharts(el, {
+      chart: { type: "area", height: 280, background: "transparent", toolbar: { show: false } },
+      theme: { mode: "dark" },
+      series: [{ name: "Messages", data: buildVolumeSeries(this.messages) }],
+      xaxis: { type: "datetime" },
+      stroke: { curve: "smooth", width: 2 },
+      fill: { type: "gradient", gradient: { opacityFrom: 0.4, opacityTo: 0 } },
+      dataLabels: { enabled: false },
+      colors: ["#4299e1"],
+      grid: { borderColor: "rgba(255,255,255,0.06)" },
+    });
+    this.chartInstances.volume.render();
+  }
+
+  function buildVolumeSeries(messages) {
+    const buckets = {};
+    for (const msg of messages) {
+      const day = msg.createdAt ? new Date(msg.createdAt).toISOString().split("T")[0] : null;
+      if (day) buckets[day] = (buckets[day] || 0) + 1;
+    }
+    return Object.entries(buckets)
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(([day, count]) => ({ x: day, y: count }));
+  }
+
+  function renderStatusChart() {
+    destroyChart(this, "status");
+
+    const el = document.querySelector("#chart-status");
+    if (!el) return;
+
+    const { labels, series } = countAgentStatuses(this.agents);
+    const colorMap = { online: "#48bb78", idle: "#48bb78", busy: "#ecc94b", offline: "#718096" };
+
+    this.chartInstances.status = new ApexCharts(el, {
+      chart: { type: "donut", height: 280, background: "transparent" },
+      theme: { mode: "dark" },
+      series,
+      labels,
+      colors: labels.map((label) => colorMap[label] || "#718096"),
+      legend: { position: "bottom" },
+      dataLabels: { enabled: true },
+    });
+    this.chartInstances.status.render();
+  }
+
+  function countAgentStatuses(agents) {
+    const counts = { online: 0, idle: 0, busy: 0, offline: 0 };
+    for (const agent of agents) counts[agent.status] = (counts[agent.status] || 0) + 1;
+
+    const labels = Object.keys(counts).filter((key) => counts[key] > 0);
+    return { labels, series: labels.map((key) => counts[key]) };
+  }
+
+  function renderAgentChart() {
+    destroyChart(this, "agents");
+
+    const el = document.querySelector("#chart-agents");
+    if (!el) return;
+
+    const sorted = countMessagesByAgent(this);
+    this.chartInstances.agents = new ApexCharts(el, {
+      chart: { type: "bar", height: 280, background: "transparent", toolbar: { show: false } },
+      theme: { mode: "dark" },
+      series: [{ name: "Messages", data: sorted.map(([, count]) => count) }],
+      xaxis: { categories: sorted.map(([name]) => name) },
+      colors: ["#4299e1"],
+      plotOptions: { bar: { borderRadius: 4, distributed: true } },
+      legend: { show: false },
+      grid: { borderColor: "rgba(255,255,255,0.06)" },
+    });
+    this.chartInstances.agents.render();
+  }
+
+  function countMessagesByAgent(vm) {
+    const counts = {};
+    for (const msg of vm.messages) {
+      const name = vm.displayTarget(msg.from);
+      counts[name] = (counts[name] || 0) + 1;
+    }
+    return Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 10);
+  }
+
+  function destroyChart(vm, name) {
+    if (vm.chartInstances[name]) vm.chartInstances[name].destroy();
+  }
+
+  function createRelayDashboard() {
+    const dashboard = {
+      ...initialState(),
+      ...createLifecycleMethods(),
+      ...createSseMethods(),
+      ...createApiMethods(),
+      ...createDisplayMethods(),
+      ...createMessageActions(),
+      ...createAgentActions(),
+      ...createChartMethods(),
+    };
+    Object.defineProperties(dashboard, createComputedDescriptors());
+    return dashboard;
+  }
+
+  window.AgentRelayDashboard = {
+    createRelayDashboard,
+    helpers: { loadPref, savePref, indexAgents, upsertById, upsertTask, compareAgents },
+  };
+  window.relay = createRelayDashboard;
+
+  document.addEventListener("alpine:init", () => {
+    Alpine.data("relay", createRelayDashboard);
+  });
+})();