agent-relay-server 0.4.30 → 0.4.31

package/package.json

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

package/public/dashboard.js

@@ -123,8 +123,9 @@
     vm.$watch("pairStatusFilter", (value) => vm.save("pairStatusFilter", value));
     vm.$watch("inboxShowArchived", (value) => vm.save("inboxShowArchived", value));
     vm.$watch("activityFilter", (value) => vm.save("activityFilter", value));
-    vm.$watch("view", (value) => {
+    vm.$watch("view", (value, oldValue) => {
       vm.save("view", value);
+      if (oldValue === "analytics") vm.destroyAllCharts();
       if (value === "analytics") vm.$nextTick(() => vm.renderCharts());
     });
   }
@@ -2424,6 +2425,7 @@
       renderVolumeChart,
       renderStatusChart,
       renderAgentChart,
+      destroyAllCharts,
     };
   }
 
@@ -2434,15 +2436,20 @@
   }
 
   function renderVolumeChart() {
-    destroyChart(this, "volume");
+    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 } },
+      chart: { type: "area", height: 280, background: "transparent", toolbar: { show: false }, animations: { dynamicAnimation: { speed: 350 } } },
       theme: { mode: "dark" },
-      series: [{ name: "Messages", data: buildVolumeSeries(this.messages) }],
+      series: [{ name: "Messages", data }],
       xaxis: { type: "datetime" },
       stroke: { curve: "smooth", width: 2 },
       fill: { type: "gradient", gradient: { opacityFrom: 0.4, opacityTo: 0 } },
@@ -2465,16 +2472,23 @@
   }
 
   function renderStatusChart() {
-    destroyChart(this, "status");
+    const { labels, series } = countAgentStatuses(this.agents);
+    const colorMap = { online: "#48bb78", idle: "#48bb78", busy: "#ecc94b", offline: "#718096" };
+
+    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;
 
-    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" },
+      chart: { type: "donut", height: 280, background: "transparent", animations: { dynamicAnimation: { speed: 350 } } },
       theme: { mode: "dark" },
       series,
       labels,
@@ -2494,14 +2508,21 @@
   }
 
   function renderAgentChart() {
-    destroyChart(this, "agents");
+    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;
 
-    const sorted = countMessagesByAgent(this);
     this.chartInstances.agents = new ApexCharts(el, {
-      chart: { type: "bar", height: 280, background: "transparent", toolbar: { show: false } },
+      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) },
@@ -2523,7 +2544,16 @@
   }
 
   function destroyChart(vm, name) {
-    if (vm.chartInstances[name]) vm.chartInstances[name].destroy();
+    if (vm.chartInstances[name]) {
+      vm.chartInstances[name].destroy();
+      vm.chartInstances[name] = null;
+    }
+  }
+
+  function destroyAllCharts() {
+    destroyChart(this, "volume");
+    destroyChart(this, "status");
+    destroyChart(this, "agents");
   }
 
   function createRelayDashboard() {

package/public/index.html

@@ -433,7 +433,7 @@
               </div>
               <div class="list-group list-group-flush" style="max-height: 60vh; overflow-y: auto">
                 <template x-for="a in sortedAgents.slice(0, 20)" :key="a.id">
-                  <div class="list-group-item d-flex align-items-center gap-2" style="cursor:pointer" @click="openAgentDetail(a)">
+                  <div class="list-group-item d-flex align-items-center gap-2" style="cursor:pointer" @click="if (!window.getSelection().toString()) openAgentDetail(a)">
                     <span class="status-dot" :class="agentStatusClass(a)"></span>
                     <span class="agent-type-icon" :class="agentType(a)" :title="agentTypeTitle(a)" :aria-label="agentTypeTitle(a)">
                       <i class="ti" :class="agentTypeIcon(a)"></i>
@@ -483,7 +483,7 @@
               </div>
               <div class="card-body p-0" style="max-height: 60vh; overflow-y: auto">
                 <template x-for="item in activityItems.slice(0, 15)" :key="item.id">
-                  <button type="button" class="list-group-item list-group-item-action activity-item text-start w-100 border-0 border-bottom rounded-0" @click="openActivityItem(item)">
+                  <div role="button" class="list-group-item list-group-item-action activity-item text-start w-100 border-0 border-bottom rounded-0" style="cursor:pointer" @click="if (!window.getSelection().toString()) openActivityItem(item)">
                     <div class="d-flex align-items-start gap-3">
                       <span class="activity-icon" :class="activityKindClass(item.kind)">
                         <i class="ti" :class="item.icon"></i>
@@ -498,7 +498,7 @@
                         <div class="text-secondary small text-truncate" x-show="item.meta" x-text="item.meta"></div>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </template>
                 <template x-if="activityItems.length === 0">
                   <div class="p-3 text-secondary text-center">No activity</div>
@@ -568,7 +568,7 @@
         <div class="row g-3">
           <template x-for="a in sortedAgents" :key="a.id">
             <div class="col-md-6 col-xl-4">
-              <div class="card agent-card" :class="{ selected: selectedAgent === a.id }" @click="openAgentDetail(a)">
+              <div class="card agent-card" :class="{ selected: selectedAgent === a.id }" @click="if (!window.getSelection().toString()) openAgentDetail(a)">
                 <div class="card-body">
                   <div class="d-flex align-items-start gap-2">
                     <span class="status-dot mt-1" :class="agentStatusClass(a)" :title="agentStatusTitle(a)"></span>
@@ -1028,7 +1028,7 @@
         <div class="card">
           <div class="list-group list-group-flush">
             <template x-for="item in activityItems" :key="item.id">
-              <button type="button" class="list-group-item list-group-item-action activity-item text-start" @click="openActivityItem(item)">
+              <div role="button" class="list-group-item list-group-item-action activity-item text-start" style="cursor:pointer" @click="if (!window.getSelection().toString()) openActivityItem(item)">
                 <div class="d-flex align-items-start gap-3">
                   <span class="activity-icon" :class="activityKindClass(item.kind)">
                     <i class="ti" :class="item.icon"></i>
@@ -1043,7 +1043,7 @@
                     <div class="text-secondary small mt-1 text-truncate" x-show="item.meta" x-text="item.meta"></div>
                   </div>
                 </div>
-              </button>
+              </div>
             </template>
             <template x-if="activityItems.length === 0">
               <div class="list-group-item text-secondary text-center py-5">