agent-relay-server 0.4.20 → 0.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-relay-server",
-  "version": "0.4.20",
+  "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 {
@@ -95,7 +105,7 @@
 
   function upsertById(list, item) {
     const idx = list.findIndex((existing) => existing.id === item.id);
-    if (idx >= 0) list[idx] = item;
+    if (idx >= 0) list.splice(idx, 1, item);
     else list.push(item);
   }
 
@@ -126,11 +136,18 @@
   function createLifecycleMethods() {
     return {
       async init() {
+        this.startClock();
+        watchPersistedPrefs(this);
+
+        try {
+          this.stats = await this.api("GET", "/stats");
+        } catch {
+          if (this.authNeeded) return;
+        }
+
         await this.refresh();
         this.connectSSE();
-        this.startClock();
         this.startAutoRefresh();
-        watchPersistedPrefs(this);
       },
 
       save(key, value) {
@@ -446,6 +463,9 @@
     return {
       displayName,
       displayTarget,
+      agentType,
+      agentTypeIcon,
+      agentTypeTitle,
       severityClass,
       agentStatusTitle,
       timeAgo,
@@ -470,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";
@@ -789,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); }
@@ -102,7 +129,7 @@
     <div class="ar-sidebar-footer">
       <div class="d-flex align-items-center gap-2 mb-2">
         <span class="status-dot" :class="connected ? 'online' : 'offline'"></span>
-        <span class="small" x-text="connected ? 'Live' : 'Reconnecting…'"></span>
+        <span class="small" x-text="authNeeded ? 'Auth required' : connected ? 'Live' : 'Reconnecting…'"></span>
       </div>
       <div class="d-flex align-items-center gap-2 mb-2">
         <label class="form-check form-switch mb-0">
@@ -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">

package/src/security.ts

@@ -19,10 +19,21 @@ export function isOriginAllowed(req: Request): boolean {
   if (!origin) return true;
   const origins = corsOrigins();
   if (origins.includes("*")) return true;
+  if (origins.includes(origin)) return true;
 
   const url = new URL(req.url);
   const sameOrigin = `${url.protocol}//${url.host}`;
-  return origin === sameOrigin || origins.includes(origin);
+  if (origin === sameOrigin) return true;
+
+  // Behind a reverse proxy, req.url is the backend address (e.g. http://127.0.0.1:4850)
+  // while the browser sends the public origin. Check forwarded headers.
+  try {
+    const originHost = new URL(origin).host;
+    const fwdHost = req.headers.get("x-forwarded-host");
+    if (fwdHost && originHost === fwdHost) return true;
+  } catch {}
+
+  return false;
 }
 
 export function applyCors(req: Request, response: Response): Response {
@@ -117,7 +128,7 @@ export function unauthorized(req: Request): Response {
 }
 
 function authToken(): string {
-  return process.env.AGENT_RELAY_TOKEN || AUTH_TOKEN;
+  return process.env.AGENT_RELAY_TOKEN ?? AUTH_TOKEN;
 }
 
 function extractToken(req: Request): string | null {