agent-relay-server 0.4.21 → 0.4.22

package/package.json

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

package/public/dashboard.js

@@ -4,6 +4,16 @@
   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;
+  const AGENT_TYPE_ICONS = {
+    codex: "ti-terminal-2",
+    claude: "ti-sparkles",
+    agent: "ti-robot",
+  };
+  const AGENT_TYPE_TITLES = {
+    codex: "Codex agent",
+    claude: "Claude agent",
+    agent: "Agent",
+  };
 
   function loadPref(key, fallback) {
     try {
@@ -453,6 +463,9 @@
     return {
       displayName,
       displayTarget,
+      agentType,
+      agentTypeIcon,
+      agentTypeTitle,
       severityClass,
       agentStatusTitle,
       timeAgo,
@@ -477,6 +490,32 @@
     return agent ? this.displayName(agent) : target.slice(-8);
   }
 
+  function agentType(agent) {
+    const values = [
+      ...(agent?.tags || []),
+      agent?.meta?.provider,
+      agent?.meta?.client,
+      agent?.meta?.runtime,
+      agent?.meta?.agentType,
+      agent?.id,
+      agent?.name,
+    ]
+      .filter((value) => typeof value === "string")
+      .map((value) => value.toLowerCase());
+
+    if (values.some((value) => value.includes("codex"))) return "codex";
+    if (values.some((value) => value.includes("claude"))) return "claude";
+    return "agent";
+  }
+
+  function agentTypeIcon(agent) {
+    return AGENT_TYPE_ICONS[agentType(agent)] || AGENT_TYPE_ICONS.agent;
+  }
+
+  function agentTypeTitle(agent) {
+    return AGENT_TYPE_TITLES[agentType(agent)] || AGENT_TYPE_TITLES.agent;
+  }
+
   function severityClass(severity) {
     if (severity === "critical") return "bg-danger-lt";
     if (severity === "warning") return "bg-warning-lt";
@@ -796,7 +835,7 @@
 
   window.AgentRelayDashboard = {
     createRelayDashboard,
-    helpers: { loadPref, savePref, indexAgents, upsertById, upsertTask, compareAgents },
+    helpers: { loadPref, savePref, indexAgents, upsertById, upsertTask, compareAgents, agentType },
   };
   window.relay = createRelayDashboard;
 

package/public/index.html

@@ -48,6 +48,33 @@
   .agent-card:hover .agent-actions { opacity: 1; }
 
   .agent-label { color: var(--tblr-warning); font-weight: 600; }
+  .agent-type-icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 20px;
+    border: 1px solid transparent;
+    font-size: 14px;
+    line-height: 1;
+  }
+  .agent-type-icon.codex {
+    color: var(--tblr-info);
+    background: rgba(var(--tblr-info-rgb), 0.12);
+    border-color: rgba(var(--tblr-info-rgb), 0.25);
+  }
+  .agent-type-icon.claude {
+    color: var(--tblr-warning);
+    background: rgba(var(--tblr-warning-rgb), 0.12);
+    border-color: rgba(var(--tblr-warning-rgb), 0.25);
+  }
+  .agent-type-icon.agent {
+    color: var(--tblr-secondary);
+    background: var(--tblr-bg-surface-secondary);
+    border-color: var(--tblr-border-color);
+  }
 
   .msg-card { border-left: 3px solid transparent; }
   .msg-card.claimed { border-left-color: var(--tblr-success); }
@@ -238,6 +265,9 @@
                 <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="selectedAgent = a.id; switchView('messages')">
                     <span class="status-dot" :class="[a.status, a.status !== 'offline' && !a.ready ? 'not-ready' : '']"></span>
+                    <span class="agent-type-icon" :class="agentType(a)" :title="agentTypeTitle(a)" :aria-label="agentTypeTitle(a)">
+                      <i class="ti" :class="agentTypeIcon(a)"></i>
+                    </span>
                     <div class="flex-grow-1 min-width-0">
                       <div class="text-truncate">
                         <template x-if="a.label">
@@ -339,6 +369,9 @@
                 <div class="card-body">
                   <div class="d-flex align-items-start gap-2">
                     <span class="status-dot mt-1" :class="[a.status, a.status !== 'offline' && !a.ready ? 'not-ready' : '']" :title="agentStatusTitle(a)"></span>
+                    <span class="agent-type-icon mt-0" :class="agentType(a)" :title="agentTypeTitle(a)" :aria-label="agentTypeTitle(a)">
+                      <i class="ti" :class="agentTypeIcon(a)"></i>
+                    </span>
                     <div class="flex-grow-1 min-width-0">
                       <div class="d-flex align-items-center gap-2">
                         <template x-if="a.label">