agent-relay-server 0.6.1 → 0.7.1

package/public/dashboard/api.js

@@ -0,0 +1,336 @@
+import { LIVE_REFRESH_MS } from "./constants.js";
+import { savePref, watchPersistedPrefs } from "./state.js";
+import { indexAgents, upsertById } from "./utils.js";
+
+function baseUrl() {
+  const href = window.location.href.split("?")[0].split("#")[0];
+  return href.endsWith("/") ? href : href + "/";
+}
+
+function buildEventsUrl(authToken) {
+  const eventUrl = new URL("api/events", baseUrl());
+  if (authToken) eventUrl.searchParams.set("token", authToken);
+  return eventUrl.toString();
+}
+
+function parseEventData(event) {
+  return JSON.parse(event.data);
+}
+
+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 syncAgentStats(vm) {
+  vm.stats.agents = vm.agents.length;
+  vm.stats.online = vm.agents.filter((agent) => agent.status !== "offline").length;
+}
+
+function syncMessageStats(vm, msg) {
+  vm.stats.messages = (vm.stats.messages ?? 0) + 1;
+  const createdAt = new Date(msg.createdAt || Date.now()).getTime();
+  if (Number.isFinite(createdAt) && Date.now() - createdAt <= 86_400_000) {
+    vm.stats.messagesLast24h = (vm.stats.messagesLast24h ?? 0) + 1;
+  }
+}
+
+function refreshChartsIfVisible(vm) {
+  if (vm.view !== "analytics") return;
+  vm.$nextTick(() => vm.renderCharts());
+}
+
+function registerKeyboardShortcuts(vm) {
+  if (typeof window === "undefined" || !window.addEventListener || vm._keyboardShortcutsRegistered) return;
+  window.addEventListener("keydown", (event) => {
+    const key = event.key?.toLowerCase();
+    if ((event.metaKey || event.ctrlKey) && key === "k") {
+      event.preventDefault();
+      vm.openCommandPalette();
+    } else if (key === "escape" && vm.commandPaletteOpen) {
+      event.preventDefault();
+      vm.closeCommandPalette();
+    }
+  });
+  vm._keyboardShortcutsRegistered = true;
+}
+
+function handleNewMessage(vm, msg) {
+  if (vm.messages.some((existing) => existing.id === msg.id)) return;
+  if (vm.view === "messages" && vm.selectedAgent && msg.from !== vm.selectedAgent && msg.to !== vm.selectedAgent) return;
+  if (vm.view === "messages" && vm.channelFilter && msg.channel !== vm.channelFilter) return;
+  vm.messages.push(msg);
+  if (vm.messages.length > 200) vm.messages.shift();
+  syncMessageStats(vm, msg);
+  refreshChartsIfVisible(vm);
+}
+
+function handleAgentStatus(vm, agent) {
+  upsertById(vm.agents, agent);
+  vm.agentsById[agent.id] = agent;
+  syncAgentStats(vm);
+  refreshChartsIfVisible(vm);
+}
+
+function handleAgentRemoved(vm, data) {
+  vm.agents = vm.agents.filter((agent) => agent.id !== data.id);
+  delete vm.agentsById[data.id];
+  syncAgentStats(vm);
+  refreshChartsIfVisible(vm);
+}
+
+function handleOrchestratorStatus(vm, orch) {
+  upsertById(vm.orchestrators, orch);
+}
+
+function handleOrchestratorRemoved(vm, data) {
+  vm.orchestrators = vm.orchestrators.filter((o) => o.id !== data.id);
+}
+
+function handleMessageClaimed(vm, data) {
+  const msg = vm.messages.find((item) => item.id === data.messageId);
+  if (!msg) return;
+  msg.claimedBy = data.claimedBy;
+  msg.claimExpiresAt = data.claimExpiresAt;
+}
+
+function handleMessageClaimReleased(vm, data) {
+  const msg = vm.messages.find((item) => item.id === data.messageId);
+  if (!msg) return;
+  delete msg.claimedBy;
+  delete msg.claimedAt;
+  delete msg.claimExpiresAt;
+}
+
+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 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.claim_released", (event) => handleMessageClaimReleased(this, parseEventData(event)));
+  es.addEventListener("message.deleted", (event) => handleMessageDeleted(this, parseEventData(event)));
+  es.addEventListener("orchestrator.status", (event) => handleOrchestratorStatus(this, parseEventData(event)));
+  es.addEventListener("orchestrator.removed", (event) => handleOrchestratorRemoved(this, parseEventData(event)));
+  registerTaskEvents(this, es);
+}
+
+function applyInboxState(vm, state) {
+  const readCursors = {};
+  const archivedThreads = {};
+  const drafts = {};
+
+  for (const thread of state?.threads || []) {
+    if (thread.readCursorMessageId) readCursors[thread.peerId] = thread.readCursorMessageId;
+    if (thread.archivedAtMessageId) archivedThreads[thread.peerId] = thread.archivedAtMessageId;
+  }
+  for (const draft of state?.drafts || []) {
+    if (draft.body) drafts[draft.peerId] = draft.body;
+  }
+
+  vm.inboxReadCursors = readCursors;
+  vm.inboxArchivedThreads = archivedThreads;
+  vm.inboxDrafts = drafts;
+  savePref("inboxReadCursors", readCursors);
+  savePref("inboxArchivedThreads", archivedThreads);
+  savePref("inboxDrafts", drafts);
+}
+
+function pruneSyncedOperatorActivity(vm) {
+  const serverClientIds = new Set((vm.activityEvents || []).map((event) => event.clientId).filter(Boolean));
+  if (!serverClientIds.size || !vm.operatorActivity?.length) return;
+  vm.operatorActivity = vm.operatorActivity.filter((item) => !serverClientIds.has(item.clientId || item.id));
+  savePref("operatorActivity", vm.operatorActivity);
+}
+
+function comparePairs(a, b) {
+  return new Date(b.updatedAt || b.createdAt || 0) - new Date(a.updatedAt || a.createdAt || 0);
+}
+
+export { baseUrl, pruneSyncedOperatorActivity };
+
+export function createLifecycleMethods() {
+  return {
+    async init() {
+      this.startClock();
+      watchPersistedPrefs(this);
+      registerKeyboardShortcuts(this);
+      try {
+        this.stats = await this.api("GET", "/stats");
+      } catch {
+        if (this.authNeeded) return;
+      }
+      await this.refresh();
+      this.connectSSE();
+      this.startAutoRefresh();
+    },
+
+    save(key, value) {
+      savePref(key, value);
+    },
+
+    async switchView(view) {
+      this.view = view;
+      if (view === "inbox" || view === "messages") await this.fetchMessages();
+      if (view === "inbox") this.markInboxThreadRead(this.selectedInboxThreadData);
+      if (view === "activity") await Promise.all([this.fetchMessages(), this.fetchPairs(), this.fetchTasks(), this.fetchActivityEvents()]);
+      if (view === "work") await Promise.all([this.fetchMessages(), this.fetchTasks()]);
+      if (view === "pairs") this.fetchPairs();
+      if (view === "channels") await this.fetchChannels();
+      if (view === "connectors") await this.fetchConnectors();
+      if (view === "integrations") await this.fetchIntegrations();
+      if (view === "tasks") this.fetchTasks();
+    },
+
+    startClock() {
+      if (this._clockTimer) return;
+      this._clockTimer = setInterval(() => { this.now = Date.now(); }, 1_000);
+    },
+
+    startAutoRefresh() {
+      this.stopAutoRefresh();
+      if (!this.autoRefresh) return;
+      this._refreshTimer = setInterval(() => this.refreshLiveData(), LIVE_REFRESH_MS);
+    },
+
+    stopAutoRefresh() {
+      if (!this._refreshTimer) return;
+      clearInterval(this._refreshTimer);
+      this._refreshTimer = null;
+    },
+  };
+}
+
+export function createSseMethods() {
+  return { connectSSE };
+}
+
+export 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(new URL("api" + path, baseUrl()), 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.fetchHealth(), this.fetchAgents(), this.fetchOrchestrators(),
+        this.fetchPairs(), this.fetchMessages(), this.fetchTasks(), this.fetchChannels(),
+        this.fetchConnectors(), this.fetchIntegrations(), this.fetchInboxState(), this.fetchActivityEvents(),
+      ]);
+    },
+
+    async refreshLiveData() {
+      if (this._refreshInFlight || this.authNeeded) return;
+      this._refreshInFlight = true;
+      try {
+        await this.refresh();
+        refreshChartsIfVisible(this);
+      } finally {
+        this._refreshInFlight = false;
+      }
+    },
+
+    async fetchStats() { try { this.stats = await this.api("GET", "/stats"); } catch {} },
+    async fetchHealth() { try { this.health = await this.api("GET", "/health"); } catch {} },
+    async fetchAgents() {
+      try {
+        this.agents = await this.api("GET", "/agents");
+        this.agentsById = indexAgents(this.agents);
+      } catch {}
+    },
+    async fetchOrchestrators() { try { this.orchestrators = await this.api("GET", "/orchestrators"); } catch {} },
+
+    async fetchPairs() {
+      try {
+        let pairs;
+        if (this.view === "activity") {
+          pairs = await this.api("GET", "/pairs");
+        } else if (this.pairStatusFilter === "open") {
+          const [active, pending] = await Promise.all([
+            this.api("GET", "/pairs?status=active"),
+            this.api("GET", "/pairs?status=pending"),
+          ]);
+          pairs = [...active, ...pending];
+        } else if (this.pairStatusFilter) {
+          pairs = await this.api("GET", "/pairs?status=" + encodeURIComponent(this.pairStatusFilter));
+        } else {
+          pairs = await this.api("GET", "/pairs");
+        }
+        this.pairs = pairs.sort(comparePairs);
+      } catch {}
+    },
+
+    async fetchMessages() {
+      try {
+        let path = "/messages?limit=100";
+        if (this.view === "messages" && this.selectedAgent) path += "&for=" + encodeURIComponent(this.selectedAgent);
+        if (this.view === "messages" && 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 {}
+    },
+
+    async fetchIntegrations() { try { this.integrations = await this.api("GET", "/integrations"); } catch {} },
+    async fetchConnectors() { try { this.connectors = await this.api("GET", "/connectors"); } catch {} },
+    async fetchChannels() { try { this.channels = await this.api("GET", "/channels"); } catch {} },
+
+    async fetchInboxState() {
+      try {
+        const state = await this.api("GET", "/inbox/state?operatorId=" + encodeURIComponent("user"));
+        applyInboxState(this, state);
+      } catch {}
+    },
+
+    async fetchActivityEvents() {
+      try {
+        this.activityEvents = await this.api("GET", "/activity?limit=200");
+        pruneSyncedOperatorActivity(this);
+      } catch {}
+    },
+  };
+}

package/public/dashboard/app.js

@@ -0,0 +1,34 @@
+import { initialState } from "./state.js";
+import { createLifecycleMethods, createSseMethods, createApiMethods } from "./api.js";
+import { createComputedDescriptors } from "./computed.js";
+import { createDisplayMethods } from "./display.js";
+import { createMessageActions, createPairActions, createAgentActions } from "./actions.js";
+import { createChartMethods } from "./charts.js";
+import { loadPref, savePref } from "./state.js";
+import { indexAgents, upsertById, agentType, isBuiltInAgent } from "./utils.js";
+
+function createRelayDashboard() {
+  const dashboard = {
+    ...initialState(),
+    ...createLifecycleMethods(),
+    ...createSseMethods(),
+    ...createApiMethods(),
+    ...createDisplayMethods(),
+    ...createMessageActions(),
+    ...createPairActions(),
+    ...createAgentActions(),
+    ...createChartMethods(),
+  };
+  Object.defineProperties(dashboard, createComputedDescriptors());
+  return dashboard;
+}
+
+window.AgentRelayDashboard = {
+  createRelayDashboard,
+  helpers: { loadPref, savePref, indexAgents, upsertById, agentType, isBuiltInAgent },
+};
+window.relay = createRelayDashboard;
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("relay", createRelayDashboard);
+});

package/public/dashboard/charts.js

@@ -0,0 +1,128 @@
+export function createChartMethods() {
+  return {
+    renderCharts,
+    renderVolumeChart,
+    renderStatusChart,
+    renderAgentChart,
+    destroyAllCharts,
+  };
+}
+
+function renderCharts() {
+  this.renderVolumeChart();
+  this.renderStatusChart();
+  this.renderAgentChart();
+}
+
+function renderVolumeChart() {
+  const data = buildVolumeSeries(this.messages);
+  if (this.chartInstances.volume) {
+    this.chartInstances.volume.updateSeries([{ name: "Messages", data }]);
+    return;
+  }
+  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 }, animations: { dynamicAnimation: { speed: 350 } } },
+    theme: { mode: "dark" },
+    series: [{ name: "Messages", data }],
+    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() {
+  const { labels, series } = countAgentStatuses(this.agents);
+  const colorMap = { idle: "#4299e1", busy: "#ecc94b" };
+  if (this.chartInstances.status) {
+    this.chartInstances.status.updateOptions({
+      series,
+      labels,
+      colors: labels.map((label) => colorMap[label] || "#718096"),
+    });
+    return;
+  }
+  const el = document.querySelector("#chart-status");
+  if (!el) return;
+  this.chartInstances.status = new ApexCharts(el, {
+    chart: { type: "donut", height: 280, background: "transparent", animations: { dynamicAnimation: { speed: 350 } } },
+    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 = { idle: 0, busy: 0 };
+  for (const agent of agents) {
+    if (agent.status in counts) counts[agent.status] += 1;
+  }
+  const labels = Object.keys(counts);
+  return { labels, series: labels.map((key) => counts[key]) };
+}
+
+function renderAgentChart() {
+  const sorted = countMessagesByAgent(this);
+  if (this.chartInstances.agents) {
+    this.chartInstances.agents.updateOptions({
+      series: [{ name: "Messages", data: sorted.map(([, count]) => count) }],
+      xaxis: { categories: sorted.map(([name]) => name) },
+    });
+    return;
+  }
+  const el = document.querySelector("#chart-agents");
+  if (!el) return;
+  this.chartInstances.agents = new ApexCharts(el, {
+    chart: { type: "bar", height: 280, background: "transparent", toolbar: { show: false }, animations: { dynamicAnimation: { speed: 350 } } },
+    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();
+    vm.chartInstances[name] = null;
+  }
+}
+
+function destroyAllCharts() {
+  destroyChart(this, "volume");
+  destroyChart(this, "status");
+  destroyChart(this, "agents");
+}