agent-relay-server 0.4.14 → 0.4.16

package/README.md

@@ -111,7 +111,7 @@ The plugin or sidecar registers the agent and injects messaging context:
 
 ```
 Agent Relay active. Your agent ID: macmini2-cli-myproject-a1b2c3
-Relay URL: http://localhost:4850 | Server: 0.4.13 | Plugin: 0.4.13
+Relay URL: http://localhost:4850 | Server: 0.4.16 | Plugin: 0.4.16
 Approval mode: open
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-relay-server",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "description": "Lightweight HTTP message relay for inter-agent communication across machines",
   "module": "src/index.ts",
   "type": "module",

package/public/dashboard.js

@@ -3,6 +3,7 @@
   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 };
+  const LIVE_REFRESH_MS = 5_000;
 
   function loadPref(key, fallback) {
     try {
@@ -32,6 +33,7 @@
       tasks: [],
       taskEvents: [],
       stats: {},
+      now: Date.now(),
       authToken: loadPref("authToken", ""),
 
       selectedAgent: "",
@@ -57,12 +59,19 @@
 
       chartInstances: {},
       _es: null,
-      _statsTimer: null,
+      _clockTimer: null,
+      _refreshTimer: null,
+      _refreshInFlight: false,
     };
   }
 
   function watchPersistedPrefs(vm) {
     vm.$watch("showOffline", (value) => vm.save("showOffline", value));
+    vm.$watch("autoRefresh", (value) => {
+      vm.save("autoRefresh", value);
+      if (value) vm.startAutoRefresh();
+      else vm.stopAutoRefresh();
+    });
     vm.$watch("agentSort", (value) => vm.save("agentSort", value));
     vm.$watch("agentSortDir", (value) => vm.save("agentSortDir", value));
     vm.$watch("agentStatusFilter", (value) => vm.save("agentStatusFilter", value));
@@ -95,12 +104,31 @@
     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 createLifecycleMethods() {
     return {
       async init() {
         await this.refresh();
         this.connectSSE();
-        this._statsTimer = setInterval(() => this.fetchStats(), 30_000);
+        this.startClock();
+        this.startAutoRefresh();
         watchPersistedPrefs(this);
       },
 
@@ -113,6 +141,25 @@
         if (view === "messages") this.fetchMessages();
         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;
+      },
     };
   }
 
@@ -156,17 +203,22 @@
 
     vm.messages.push(msg);
     if (vm.messages.length > 200) vm.messages.shift();
-    vm.stats.messages = (vm.stats.messages ?? 0) + 1;
+    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 handleMessageClaimed(vm, data) {
@@ -216,6 +268,17 @@
         await Promise.all([this.fetchStats(), this.fetchAgents(), this.fetchMessages(), this.fetchTasks()]);
       },
 
+      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");
@@ -392,7 +455,7 @@
     const lastSeenMs = new Date(agent.lastSeen).getTime();
     if (!Number.isFinite(lastSeenMs)) return "Trying to reconnect...";
 
-    const ageSec = Math.max(0, (Date.now() - lastSeenMs) / 1000);
+    const ageSec = Math.max(0, ((this.now || Date.now()) - lastSeenMs) / 1000);
     return ageSec <= 45 ? "Starting up..." : "Trying to reconnect...";
   }
 
@@ -401,7 +464,7 @@
     const ts = new Date(iso).getTime();
     if (!Number.isFinite(ts)) return "";
 
-    const diff = Math.max(0, (Date.now() - ts) / 1000);
+    const diff = Math.max(0, ((this.now || 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";

package/public/index.html

@@ -109,6 +109,12 @@
           <input type="checkbox" class="form-check-input" x-model="showOffline">
           <span class="form-check-label small">Show offline</span>
         </label>
+      </div>
+      <div class="d-flex align-items-center gap-2 mb-2">
+        <label class="form-check form-switch mb-0">
+          <input type="checkbox" class="form-check-input" x-model="autoRefresh">
+          <span class="form-check-label small">Auto refresh</span>
+        </label>
       </div>
 	    <div class="text-muted small" x-show="stats.version" x-text="'v' + stats.version"></div>
 	  </div>
@@ -389,7 +395,7 @@
           <div class="ms-auto d-flex gap-2 align-items-center flex-wrap">
             <select class="form-select form-select-sm" style="width: auto; min-width: 160px" x-model="selectedAgent" @change="fetchMessages()">
               <option value="">All agents</option>
-              <template x-for="a in agents" :key="a.id">
+              <template x-for="a in composeAgents" :key="a.id">
                 <option :value="a.id" x-text="displayName(a) + ' [' + a.id.slice(-6) + ']'"></option>
               </template>
             </select>