agent-relay-server 0.4.29 → 0.4.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-relay-server",
-  "version": "0.4.29",
+  "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());
     });
   }
@@ -1217,6 +1218,7 @@
       agentStatusClass,
       severityClass,
       agentStatusTitle,
+      agentChannels,
       channelPresence,
       integrationPresence,
       timeAgo,
@@ -1440,6 +1442,11 @@
     return { label: "configured", tone: "primary", icon: "ti-plug-connected" };
   }
 
+  function agentChannels(agent) {
+    if (!agent) return [];
+    return (this.channels || []).filter((ch) => ch.agentId === agent.id);
+  }
+
   function channelPresence(channel) {
     if (!channel) return { label: "unknown", tone: "secondary", icon: "ti-plug-off" };
     if (channel.status === "offline") return { label: "offline", tone: "secondary", icon: "ti-plug-off" };
@@ -2418,6 +2425,7 @@
       renderVolumeChart,
       renderStatusChart,
       renderAgentChart,
+      destroyAllCharts,
     };
   }
 
@@ -2428,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 } },
@@ -2459,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,
@@ -2488,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) },
@@ -2517,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>
@@ -447,23 +447,20 @@
                           <span x-text="a.name || a.id.slice(-12)"></span>
                         </template>
                       </div>
-                      <div class="text-secondary small text-truncate" x-text="a.id"></div>
-                      <div class="presence-badges d-flex gap-1 mt-1 flex-wrap">
-                        <template x-for="badge in agentPresenceBadges(a)" :key="badge.label">
-                          <span class="badge" :class="badge.className" x-text="badge.label"></span>
-                        </template>
-                      </div>
-                      <template x-if="agentPair(a)">
-                        <span class="badge pair-badge mt-1" :class="pairBadgeClass(agentPair(a))" :title="pairTitle(agentPair(a), a.id)">
-                          <i class="ti ti-link me-1"></i><span x-text="pairBadgeLabel(agentPair(a), a.id)"></span>
+                      <div class="d-flex gap-1 mt-1 flex-wrap align-items-center">
+                        <span class="badge" :class="'bg-' + agentPresence(a).tone + '-lt'" style="font-size: 0.7rem">
+                          <i class="ti me-1" :class="agentPresence(a).icon"></i><span x-text="agentPresence(a).label"></span>
                         </span>
-                      </template>
-                      <div class="attention-badges d-flex gap-1 mt-1 flex-wrap" x-show="agentAttention(a).total > 0" :title="agentAttentionTitle(a)">
-                        <span class="badge bg-danger-lt" x-show="agentAttention(a).unread" x-text="agentAttention(a).unread + ' unread'"></span>
-                        <span class="badge bg-warning-lt" x-show="agentAttention(a).needsHumanResponse">needs response</span>
-                        <span class="badge bg-info-lt" x-show="agentAttention(a).agentQuestion">question</span>
-                        <span class="badge bg-warning-lt" x-show="agentAttention(a).pendingPairInvite">pair invite</span>
-                        <span class="badge bg-orange-lt" x-show="agentAttention(a).claimableTasks" x-text="agentAttention(a).claimableTasks + ' claimable'"></span>
+                        <template x-if="agentAttention(a).total > 0">
+                          <span class="badge bg-warning text-white" style="font-size: 0.7rem" :title="agentAttentionTitle(a)">
+                            <i class="ti ti-bell me-1"></i><span x-text="agentAttention(a).total"></span>
+                          </span>
+                        </template>
+                        <template x-if="agentPair(a)">
+                          <span class="badge pair-badge" :class="pairBadgeClass(agentPair(a))" style="font-size: 0.7rem" :title="pairTitle(agentPair(a), a.id)">
+                            <i class="ti ti-link me-1"></i><span x-text="pairBadgeLabel(agentPair(a), a.id)"></span>
+                          </span>
+                        </template>
                       </div>
                     </div>
                     <span class="text-secondary small" x-text="timeAgo(a.lastSeen)"></span>
@@ -486,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>
@@ -501,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>
@@ -571,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>
@@ -585,16 +582,10 @@
                         </template>
                         <span class="text-truncate" :class="a.label ? 'text-secondary small' : 'fw-bold'" x-text="a.name || a.id.slice(-12)"></span>
                       </div>
-                      <div class="text-secondary small text-truncate mt-1" x-text="a.id"></div>
-                      <div class="presence-badges d-flex gap-1 mt-1 flex-wrap">
+                      <div class="d-flex gap-1 mt-1 flex-wrap align-items-center">
                         <span class="badge" :class="'bg-' + agentPresence(a).tone + '-lt'">
                           <i class="ti me-1" :class="agentPresence(a).icon"></i><span x-text="agentPresence(a).label"></span>
                         </span>
-                        <template x-for="badge in agentPresenceBadges(a)" :key="badge.label">
-                          <span class="badge" :class="badge.className" x-text="badge.label"></span>
-                        </template>
-                      </div>
-                      <div class="d-flex gap-1 mt-1 flex-wrap">
                         <template x-if="agentAttention(a).total > 0">
                           <span class="badge bg-warning text-white" :title="agentAttentionTitle(a)">
                             <i class="ti ti-bell me-1"></i><span x-text="agentAttention(a).total"></span>
@@ -605,31 +596,8 @@
                             <i class="ti ti-link me-1"></i><span x-text="pairBadgeLabel(agentPair(a), a.id)"></span>
                           </span>
                         </template>
-                        <span class="badge bg-danger-lt" x-show="agentAttention(a).unread" x-text="agentAttention(a).unread + ' unread'"></span>
-                        <span class="badge bg-warning-lt" x-show="agentAttention(a).needsHumanResponse">needs response</span>
-                        <span class="badge bg-info-lt" x-show="agentAttention(a).agentQuestion">question</span>
-                        <span class="badge bg-orange-lt" x-show="agentAttention(a).claimableTasks" x-text="agentAttention(a).claimableTasks + ' claimable'"></span>
-                        <template x-if="a.machine">
-                          <span class="badge bg-secondary-lt" x-text="a.machine"></span>
-                        </template>
-                        <template x-if="a.rig">
-                          <span class="badge bg-primary-lt" x-text="a.rig"></span>
-                        </template>
-                        <template x-for="tag in (a.tags || [])" :key="tag">
-                          <span class="badge bg-cyan-lt" x-text="tag"></span>
-                        </template>
-                      </div>
-                      <template x-if="a.capabilities && a.capabilities.length">
-                        <div class="d-flex gap-1 mt-1 flex-wrap">
-                          <template x-for="cap in a.capabilities" :key="cap">
-                            <span class="badge bg-purple-lt" x-text="'⚡' + cap"></span>
-                          </template>
-                        </div>
-                      </template>
-                      <div class="text-secondary small mt-2">
-                        <span x-text="'Last seen: ' + timeAgo(a.lastSeen)"></span>
-                        <span class="ms-2" x-text="'Created: ' + fmtTime(a.createdAt)"></span>
                       </div>
+                      <div class="text-secondary small mt-1" x-text="'Last seen: ' + timeAgo(a.lastSeen)"></div>
                     </div>
                     <div class="agent-actions d-flex gap-1">
                       <button class="btn btn-sm btn-ghost-secondary p-1" title="Send message" @click.stop="openComposeToAgent(a)">
@@ -1060,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>
@@ -1075,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">
@@ -1604,7 +1572,6 @@
               </template>
               <span class="fw-bold text-truncate" x-text="selectedAgentDetail.name || selectedAgentDetail.id.slice(-12)"></span>
             </div>
-            <div class="text-secondary small text-truncate" x-text="selectedAgentDetail.id"></div>
           </div>
           <button class="btn btn-sm btn-ghost-secondary p-1" @click="closeAgentDetail()" title="Close">
             <i class="ti ti-x"></i>
@@ -1718,21 +1685,45 @@
         </template>
 
         <div class="p-3 border-bottom">
-          <h3 class="card-title mb-3">Tags</h3>
-          <div class="d-flex gap-1 flex-wrap">
-            <template x-for="tag in (selectedAgentDetail.tags || [])" :key="tag">
-              <span class="badge bg-cyan-lt" x-text="tag"></span>
-            </template>
-            <template x-if="!(selectedAgentDetail.tags || []).length">
-              <span class="text-secondary small">No tags</span>
-            </template>
+          <div class="detail-row mb-2">
+            <div class="text-secondary small">ID</div>
+            <div class="small text-break user-select-all" style="font-family: var(--tblr-font-monospace); font-size: 0.75rem; opacity: 0.7" x-text="selectedAgentDetail.id"></div>
           </div>
-          <template x-if="selectedAgentDetail.capabilities && selectedAgentDetail.capabilities.length">
-            <div class="d-flex gap-1 flex-wrap mt-2">
-              <template x-for="cap in selectedAgentDetail.capabilities" :key="cap">
-                <span class="badge bg-purple-lt" x-text="cap"></span>
+          <div class="detail-row mb-2">
+            <div class="text-secondary small">Tags</div>
+            <div class="d-flex gap-1 flex-wrap">
+              <template x-for="tag in (selectedAgentDetail.tags || [])" :key="tag">
+                <span class="badge bg-cyan-lt" x-text="tag"></span>
+              </template>
+              <template x-if="!(selectedAgentDetail.tags || []).length">
+                <span class="text-secondary small">—</span>
               </template>
             </div>
+          </div>
+          <div class="detail-row mb-2">
+            <div class="text-secondary small">Capabilities</div>
+            <div class="d-flex gap-1 flex-wrap">
+              <template x-if="selectedAgentDetail.capabilities && selectedAgentDetail.capabilities.length">
+                <template x-for="cap in selectedAgentDetail.capabilities" :key="cap">
+                  <span class="badge bg-purple-lt" x-text="cap"></span>
+                </template>
+              </template>
+              <template x-if="!(selectedAgentDetail.capabilities || []).length">
+                <span class="text-secondary small">—</span>
+              </template>
+            </div>
+          </div>
+          <template x-if="agentChannels(selectedAgentDetail).length">
+            <div class="detail-row mb-2">
+              <div class="text-secondary small">Channels</div>
+              <div class="d-flex gap-1 flex-wrap">
+                <template x-for="ch in agentChannels(selectedAgentDetail)" :key="ch.id">
+                  <span class="badge" :class="'bg-' + channelPresence(ch).tone + '-lt'" :title="ch.type + ' · ' + ch.direction">
+                    <i class="ti me-1" :class="channelPresence(ch).icon"></i><span x-text="ch.name"></span>
+                  </span>
+                </template>
+              </div>
+            </div>
           </template>
         </div>