agent-relay-server 0.5.0 → 0.6.0

package/README.md

@@ -40,20 +40,20 @@ Agent Relay has two parts:
 
 Pick your provider: install the Claude Code plugin, the Codex connector, or both. The shared config is the same four env vars either way. See the [full mental model](docs/mental-model.md) for routing, identity, and task lifecycle details, or the [provider spec](docs/provider-spec.md) if you want to build your own integration.
 
-## Extension Model
+## Connector Model
 
-Agent Relay is built around four extension points:
+Agent Relay extensions run as external **Connectors**. The relay discovers them from `~/.agent-relay/connectors/<id>/manifest.json`, then can show status and run lifecycle actions without loading connector code in-process.
 
 > **Agents do work. Providers host agents. Integrations create work. Channels carry conversations.**
 
-That split keeps the system small without making everything a one-off plugin:
+Connector kinds:
 
-- **Agents** are running AI sessions or workers that can receive messages, claim tasks, and produce results.
-- **Providers** connect an AI runtime to the relay. The Claude plugin and Codex connector are providers.
-- **Integrations** connect external systems that create or update work. CI, monitoring, support desks, and deployment tools fit here.
-- **Channels** connect communication surfaces where humans and systems already talk. Telegram is the first channel; Slack, email, SMS, Matrix, Discord, and web chat are natural next ones.
+- **Provider connectors** host AI runtimes. The Claude plugin and Codex connector register coding-agent sessions as Relay agents.
+- **Event connectors** connect external systems that create or update work. CI, monitoring, support desks, and deployment tools fit here.
+- **Channel connectors** connect communication surfaces where humans and systems already talk. Telegram is the first channel; Slack, email, SMS, Matrix, Discord, and web chat are natural next ones.
+- **Orchestrator connectors** supervise hosts and can spawn or control provider sessions.
 
-If you want to contribute, pick the shape that matches your system. Building a new AI runtime adapter? Build a provider. Sending alerts or tickets into Agent Relay? Build an integration. Opening Agent Relay to another messaging app? Build a channel.
+If you want to contribute, pick the shape that matches your system. Building a new AI runtime adapter? Build a provider connector. Sending alerts or tickets into Agent Relay? Build an event connector. Opening Agent Relay to another messaging app? Build a channel connector.
 
 ## Quick Start
 

package/package.json

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

package/public/dashboard.js

@@ -60,6 +60,7 @@
       tasks: [],
       integrations: [],
       channels: [],
+      connectors: [],
       taskEvents: [],
       taskEventCache: {},
       stats: {},
@@ -240,6 +241,7 @@
         if (view === "work") await Promise.all([this.fetchMessages(), this.fetchTasks()]);
         if (view === "pairs") this.fetchPairs();
         if (view === "channels") await this.fetchChannels();
+        if (view === "connectors") await this.fetchConnectors();
         if (view === "integrations") await this.fetchIntegrations();
         if (view === "tasks") this.fetchTasks();
       },
@@ -393,7 +395,7 @@
       },
 
       async refresh() {
-        await Promise.all([this.fetchStats(), this.fetchHealth(), this.fetchAgents(), this.fetchOrchestrators(), this.fetchPairs(), this.fetchMessages(), this.fetchTasks(), this.fetchChannels(), this.fetchIntegrations(), this.fetchInboxState(), this.fetchActivityEvents()]);
+        await Promise.all([this.fetchStats(), this.fetchHealth(), this.fetchAgents(), this.fetchOrchestrators(), this.fetchPairs(), this.fetchMessages(), this.fetchTasks(), this.fetchChannels(), this.fetchConnectors(), this.fetchIntegrations(), this.fetchInboxState(), this.fetchActivityEvents()]);
       },
 
       async refreshLiveData() {
@@ -476,6 +478,12 @@
         } catch {}
       },
 
+      async fetchConnectors() {
+        try {
+          this.connectors = await this.api("GET", "/connectors");
+        } catch {}
+      },
+
       async fetchChannels() {
         try {
           this.channels = await this.api("GET", "/channels");
@@ -548,6 +556,7 @@
       activityItems: { get: getActivityItems },
       workQueueItems: { get: getWorkQueueItems },
       channelCards: { get: getChannelCards },
+      connectorCards: { get: getConnectorCards },
       integrationCards: { get: getIntegrationCards },
       openPairCount: { get: getOpenPairCount },
       filteredMessages: { get: getFilteredMessages },
@@ -644,6 +653,11 @@
     if (!message || !channel) return false;
     const channelKeys = [channel.id, channel.type, ...(channel.topicChannels || [])].filter(Boolean);
     if (message.channel && channelKeys.includes(message.channel)) return true;
+    const payloadChannel = message.payload?.channel;
+    if (payloadChannel && typeof payloadChannel === "object") {
+      const payloadKeys = [payloadChannel.agentId, payloadChannel.provider, payloadChannel.accountId].filter(Boolean);
+      if (payloadKeys.includes(channel.id) || payloadKeys.includes(channel.type) || payloadKeys.includes(channel.accountId)) return true;
+    }
     if (channel.agentId && (message.from === channel.agentId || message.to === channel.agentId)) return true;
     return false;
   }
@@ -710,7 +724,7 @@
     const haystack = [
       vm.displayTarget(thread.peer),
       thread.peer,
-      ...thread.messages.flatMap((msg) => [msg.subject || "", msg.body || "", msg.channel || "", vm.displayTarget(msg.from), vm.displayTarget(msg.to)]),
+      ...thread.messages.flatMap((msg) => [msg.subject || "", messageBody.call(vm, msg) || "", msg.channel || "", vm.displayTarget(msg.from), vm.displayTarget(msg.to)]),
     ].join("\n").toLowerCase();
     return haystack.includes(search);
   }
@@ -799,12 +813,12 @@
       }));
 
     const messageItems = (this.messages || [])
-      .filter((msg) => msg.claimable)
+      .filter(isClaimableMessageWaiting)
       .map((msg) => ({
         id: "message-" + msg.id,
         sourceType: "message",
         title: msg.subject || "Claimable message #" + msg.id,
-        body: msg.body,
+        body: messageBody(msg),
         severity: "warning",
         status: msg.claimedBy ? "claimed" : "open",
         owner: msg.claimedBy || "",
@@ -852,7 +866,7 @@
     return (vm.messages || []).flatMap((msg) => {
       const ts = toTimestamp(msg.createdAt);
       const items = [];
-      const pairEvent = msg.meta?.pairEvent;
+      const pairEvent = msg.payload?.pairEvent;
       if (pairEvent) {
         items.push(activityItem({
           id: "pair-message-" + msg.id,
@@ -868,10 +882,10 @@
       } else if (msg.from === HUMAN_AGENT_ID) {
         items.push(activityItem({
           id: "human-send-" + msg.id,
-          kind: msg.claimable ? "task" : "message",
+          kind: msg.kind === "task" ? "task" : "message",
           ts,
-          icon: msg.claimable ? "ti-hand-grab" : "ti-send",
-          title: msg.claimable ? "Claimable task sent" : "Message sent",
+          icon: msg.kind === "task" ? "ti-hand-grab" : "ti-send",
+          title: msg.kind === "task" ? "Claimable task sent" : "Message sent",
           body: vm.messagePreview(msg),
           meta: "to " + vm.displayTarget(msg.to),
           view: inboxPeer(msg) ? "inbox" : "messages",
@@ -1049,7 +1063,7 @@
   }
 
   function messageLooksLikeQuestion(msg) {
-    return /\?/.test(`${msg.subject || ""}\n${msg.body || ""}`);
+    return /\?/.test(`${msg.subject || ""}\n${messageBody(msg)}`);
   }
 
   function countClaimableWaiting(vm) {
@@ -1069,7 +1083,7 @@
   }
 
   function isClaimableMessageWaiting(msg) {
-    return Boolean(msg.claimable && !msg.claimedBy);
+    return Boolean(msg.claimable && !msg.claimedBy && !(msg.kind === "task" && Number.isSafeInteger(msg.payload?.taskId)));
   }
 
   function targetMatchesAgent(target, agent) {
@@ -1141,6 +1155,17 @@
     });
   }
 
+  function getConnectorCards() {
+    return [...(this.connectors || [])].sort((a, b) => {
+      const statusRank = { error: 0, warn: 1, unknown: 2, ok: 3 };
+      const aStatus = a.runtime?.status || "unknown";
+      const bStatus = b.runtime?.status || "unknown";
+      const statusDiff = (statusRank[aStatus] ?? 2) - (statusRank[bStatus] ?? 2);
+      if (statusDiff !== 0) return statusDiff;
+      return String(a.displayName || a.id || "").localeCompare(String(b.displayName || b.id || ""));
+    });
+  }
+
   function getOpenPairCount() {
     return (this.pairs || []).filter(isOpenPair).length;
   }
@@ -1204,7 +1229,7 @@
   }
 
   function isChannelAgent(agent) {
-    return agent?.meta?.kind === "channel" || agent?.tags?.includes("channel");
+    return agent?.kind === "channel" || agent?.meta?.kind === "channel" || agent?.tags?.includes("channel");
   }
 
   function agentSupportsControlActions(agent) {
@@ -1343,6 +1368,7 @@
       displayName,
       displayTarget,
       conversationTitle,
+      messageBody,
       messagePreview,
       agentPair,
       pairPeerId,
@@ -1363,6 +1389,7 @@
       isBuiltInAgent,
       agentChannels,
       channelPresence,
+      connectorPresence,
       integrationPresence,
       composeTargetAllowsClaimable,
       inboxComposeTargetAllowsClaimable,
@@ -1396,10 +1423,43 @@
   }
 
   function messagePreview(msg) {
-    const text = msg?.subject || msg?.body || "";
+    const text = msg?.subject || messageBody(msg) || "";
     return text.length > 90 ? text.slice(0, 90) + "..." : text;
   }
 
+  function messageBody(msg) {
+    if (!msg) return "";
+    const payload = msg.payload || {};
+    const channelMessage = payload.message;
+    if (channelMessage && typeof channelMessage === "object" && typeof channelMessage.text === "string" && channelMessage.text.trim()) {
+      return channelMessage.text;
+    }
+    const interaction = payload.interaction;
+    if (interaction && typeof interaction === "object") {
+      const title = typeof interaction.title === "string" ? interaction.title.trim() : "";
+      const description = typeof interaction.description === "string" ? interaction.description.trim() : "";
+      if (title && description) return title + "\n" + description;
+      if (title) return title;
+      if (description) return description;
+    }
+    const reaction = payload.reaction;
+    if (reaction && typeof reaction === "object") {
+      const name = typeof reaction.name === "string" ? reaction.name : "";
+      const emoji = typeof reaction.emoji === "string" ? reaction.emoji : "";
+      const value = typeof reaction.value === "string" ? reaction.value : "";
+      return ["Reaction", emoji || name || value].filter(Boolean).join(": ");
+    }
+    const activity = payload.activity;
+    if (activity && typeof activity === "object") {
+      const kind = typeof activity.kind === "string" ? activity.kind : "activity";
+      const state = typeof activity.state === "string" ? activity.state : "";
+      return [kind, state].filter(Boolean).join(" ");
+    }
+    if (typeof payload.text === "string" && payload.text.trim()) return payload.text;
+    if (typeof payload.message === "string" && payload.message.trim()) return payload.message;
+    return msg.body || "";
+  }
+
   function agentPair(agent) {
     return agent ? this.pairsByAgentId[agent.id] : null;
   }
@@ -1583,6 +1643,16 @@
     return { label: "configured", tone: "primary", icon: "ti-plug-connected" };
   }
 
+  function connectorPresence(connector) {
+    const runtime = connector?.runtime || {};
+    if (runtime.status === "error") return { label: "error", tone: "danger", icon: "ti-alert-triangle" };
+    if (runtime.status === "warn") return { label: "warning", tone: "warning", icon: "ti-alert-circle" };
+    if (runtime.running) return { label: "running", tone: "success", icon: "ti-circle-check" };
+    if (runtime.enabled === false) return { label: "disabled", tone: "secondary", icon: "ti-player-pause" };
+    if (runtime.status === "ok") return { label: "ok", tone: "success", icon: "ti-circle-check" };
+    return { label: "unknown", tone: "secondary", icon: "ti-help-circle" };
+  }
+
   function agentChannels(agent) {
     if (!agent) return [];
     return (this.channels || []).filter((ch) => ch.agentId === agent.id);
@@ -1675,6 +1745,7 @@
       recordOperatorActivity,
       openActivityItem,
       runHealthAction,
+      runConnectorAction,
       openCommandPalette,
       closeCommandPalette,
       runCommand,
@@ -1940,7 +2011,11 @@
       };
       if (this.inboxCompose.channel) payload.channel = this.inboxCompose.channel;
       if (this.inboxCompose.subject) payload.subject = this.inboxCompose.subject;
-      if (this.inboxCompose.claimable && inboxComposeTargetAllowsClaimable.call(this)) payload.claimable = true;
+      if (this.inboxCompose.claimable && inboxComposeTargetAllowsClaimable.call(this)) {
+        payload.claimable = true;
+        payload.kind = "task";
+        payload.payload = { title: this.inboxCompose.subject || "Claimable task" };
+      }
       await this.api("POST", "/messages", payload);
       this.recordOperatorActivity({
         title: payload.claimable ? "Claimable task sent" : "Message sent",
@@ -1983,7 +2058,11 @@
     if (vm.compose.channel) payload.channel = vm.compose.channel;
     if (vm.compose.subject) payload.subject = vm.compose.subject;
     if (vm.replyTo) payload.replyTo = vm.replyTo.id;
-    if (vm.compose.claimable && composeTargetAllowsClaimable.call(vm)) payload.claimable = true;
+    if (vm.compose.claimable && composeTargetAllowsClaimable.call(vm)) {
+      payload.claimable = true;
+      payload.kind = "task";
+      payload.payload = { title: vm.compose.subject || "Claimable task" };
+    }
     return payload;
   }
 
@@ -2200,6 +2279,16 @@
     if (action.copy) await copyText(action.copy);
   }
 
+  async function runConnectorAction(connector, action) {
+    if (!connector || !action) return;
+    try {
+      await this.api("POST", "/connectors/" + encodeURIComponent(connector.id) + "/actions", { action });
+      await this.fetchConnectors();
+    } catch (e) {
+      alert("Connector action failed: " + e.message);
+    }
+  }
+
   async function copyText(value) {
     if (typeof navigator === "undefined") return;
     try {
@@ -2289,8 +2378,8 @@
 
   function pairMessages(vm, pair) {
     return (vm.messages || []).filter((msg) =>
-      msg.meta?.pairId === pair.id ||
-      (msg.meta?.pairEvent && [pair.requesterId, pair.targetId].includes(msg.from) && [pair.requesterId, pair.targetId].includes(msg.to))
+      msg.payload?.pairId === pair.id ||
+      (msg.payload?.pairEvent && [pair.requesterId, pair.targetId].includes(msg.from) && [pair.requesterId, pair.targetId].includes(msg.to))
     );
   }
 
@@ -2343,7 +2432,7 @@
       if (msg.channel) lines.push("- Channel: " + msg.channel);
       if (msg.subject) lines.push("- Subject: " + msg.subject);
       if (msg.claimedBy) lines.push("- Claimed by: " + vm.displayTarget(msg.claimedBy));
-      lines.push("", msg.body || "", "");
+      lines.push("", messageBody.call(vm, msg) || "", "");
     }
   }
 

package/public/icons/agent-relay.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="96" fill="#0d1117"/>
+  <g stroke="#30363d" stroke-width="22" stroke-linecap="round">
+    <line x1="137" y1="151" x2="221" y2="229"/>
+    <line x1="375" y1="151" x2="291" y2="229"/>
+    <line x1="137" y1="361" x2="221" y2="283"/>
+    <line x1="375" y1="361" x2="291" y2="283"/>
+  </g>
+  <circle cx="256" cy="256" r="72" fill="#58a6ff"/>
+  <circle cx="96" cy="116" r="42" fill="#3fb950"/>
+  <circle cx="416" cy="116" r="42" fill="#3fb950"/>
+  <circle cx="96" cy="396" r="42" fill="#3fb950"/>
+  <circle cx="416" cy="396" r="42" fill="#3fb950"/>
+</svg>

package/public/index.html

@@ -3,8 +3,15 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#0d1117">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="Agent Relay">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <title>Agent Relay</title>
 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230d1117'/%3E%3Ccircle cx='16' cy='16' r='4.5' fill='%2358a6ff'/%3E%3Ccircle cx='6' cy='8' r='2.5' fill='%233fb950'/%3E%3Ccircle cx='26' cy='8' r='2.5' fill='%233fb950'/%3E%3Ccircle cx='6' cy='24' r='2.5' fill='%233fb950'/%3E%3Ccircle cx='26' cy='24' r='2.5' fill='%233fb950'/%3E%3Cline x1='8' y1='9.5' x2='13' y2='14' stroke='%2330363d' stroke-width='1.5'/%3E%3Cline x1='24' y1='9.5' x2='19' y2='14' stroke='%2330363d' stroke-width='1.5'/%3E%3Cline x1='8' y1='22.5' x2='13' y2='18' stroke='%2330363d' stroke-width='1.5'/%3E%3Cline x1='24' y1='22.5' x2='19' y2='18' stroke='%2330363d' stroke-width='1.5'/%3E%3C/svg%3E">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="apple-touch-icon" href="/icons/agent-relay-192.png">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
 <style>
@@ -220,6 +227,10 @@
         <i class="ti ti-messages"></i>Channels
         <span class="badge bg-success text-white ms-auto" x-show="channelCards.filter((item) => item.ready).length > 0" x-text="channelCards.filter((item) => item.ready).length"></span>
       </a>
+      <a href="#" class="nav-link" :class="{ active: view === 'connectors' }" @click.prevent="switchView('connectors')">
+        <i class="ti ti-plug"></i>Connectors
+        <span class="badge bg-secondary text-white ms-auto" x-show="connectorCards.length > 0" x-text="connectorCards.length"></span>
+      </a>
       <a href="#" class="nav-link" :class="{ active: view === 'integrations' }" @click.prevent="switchView('integrations')">
         <i class="ti ti-plug-connected"></i>Integrations
         <span class="ms-auto d-inline-flex gap-1 align-items-center">
@@ -292,7 +303,7 @@
 
   <!-- Mobile nav -->
   <div class="mobile-nav d-none border-bottom p-2 gap-1 position-fixed top-0 w-100 bg-dark" style="z-index:50">
-    <template x-for="v in ['overview','agents','channels','integrations','inbox','activity','pairs','messages','work','tasks','analytics']">
+    <template x-for="v in ['overview','agents','channels','connectors','integrations','inbox','activity','pairs','messages','work','tasks','analytics']">
       <button class="btn btn-sm" :class="view === v ? 'btn-primary' : 'btn-ghost-secondary'" @click="switchView(v)" x-text="v.charAt(0).toUpperCase() + v.slice(1)"></button>
     </template>
   </div>
@@ -911,6 +922,75 @@ agent-relay-orchestrator</pre>
         </template>
       </div>
 
+      <!-- ==================== CONNECTORS ==================== -->
+      <div x-show="view === 'connectors'" x-cloak class="fade-in">
+        <div class="d-flex align-items-center mb-3 gap-2 flex-wrap">
+          <h2 class="page-title mb-0">Connectors</h2>
+          <span class="badge bg-secondary-lt" x-show="connectorCards.length > 0" x-text="connectorCards.length + ' registered'"></span>
+          <div class="ms-auto">
+            <button class="btn btn-sm btn-ghost-secondary" @click="fetchConnectors()" title="Refresh">
+              <i class="ti ti-refresh"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="row g-3">
+          <template x-for="connector in connectorCards" :key="connector.id">
+            <div class="col-md-6 col-xl-4">
+              <div class="card">
+                <div class="card-body">
+                  <div class="d-flex align-items-start gap-2">
+                    <span class="agent-type-icon agent mt-0">
+                      <i class="ti" :class="connectorPresence(connector).icon"></i>
+                    </span>
+                    <div class="flex-grow-1 min-width-0">
+                      <div class="d-flex align-items-center gap-2 flex-wrap">
+                        <span class="fw-bold text-truncate" x-text="connector.displayName || connector.id"></span>
+                        <span class="badge" :class="'bg-' + connectorPresence(connector).tone + '-lt'">
+                          <i class="ti me-1" :class="connectorPresence(connector).icon"></i><span x-text="connectorPresence(connector).label"></span>
+                        </span>
+                        <span class="badge bg-secondary-lt" x-text="connector.kind"></span>
+                      </div>
+                      <div class="text-secondary small mt-1" x-text="connector.description || connector.packageName || connector.binary"></div>
+                      <div class="d-flex gap-1 mt-2 flex-wrap">
+                        <template x-for="capability in (connector.capabilities || [])" :key="capability">
+                          <span class="badge bg-cyan-lt" x-text="capability"></span>
+                        </template>
+                      </div>
+                      <div class="text-secondary small mt-2 d-flex gap-2 flex-wrap">
+                        <span x-text="'v' + connector.version"></span>
+                        <span x-show="connector.runtime?.detail" x-text="connector.runtime.detail"></span>
+                        <span x-show="connector.runtime?.updatedAt" x-text="'Updated ' + timeAgo(connector.runtime.updatedAt)"></span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="d-flex gap-1 mt-3 flex-wrap">
+                    <template x-for="action in ['status','doctor','start','stop','restart','enable','disable']" :key="connector.id + action">
+                      <button
+                        class="btn btn-sm btn-ghost-secondary"
+                        x-show="connector.manifest?.commands?.[action]"
+                        @click="runConnectorAction(connector, action)"
+                        :title="action.charAt(0).toUpperCase() + action.slice(1)">
+                        <i class="ti" :class="action === 'doctor' ? 'ti-stethoscope' : action === 'status' ? 'ti-activity' : action === 'start' ? 'ti-player-play' : action === 'stop' ? 'ti-player-stop' : action === 'restart' ? 'ti-refresh' : action === 'enable' ? 'ti-toggle-right' : 'ti-toggle-left'"></i>
+                      </button>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <template x-if="connectorCards.length === 0">
+          <div class="card">
+            <div class="card-body text-center text-secondary py-5">
+              <i class="ti ti-plug-off" style="font-size:48px; opacity:0.3"></i>
+              <p class="mt-2">No connectors registered</p>
+            </div>
+          </div>
+        </template>
+      </div>
+
       <!-- ==================== INTEGRATIONS ==================== -->
       <div x-show="view === 'integrations'" x-cloak class="fade-in">
         <div class="d-flex align-items-center mb-3 gap-2 flex-wrap">
@@ -1164,7 +1244,7 @@ agent-relay-orchestrator</pre>
                     <template x-if="m.subject">
                       <div class="fw-bold small mb-1" x-text="m.subject"></div>
                     </template>
-                    <div class="msg-body" x-text="m.body"></div>
+                    <div class="msg-body" x-text="messageBody(m)"></div>
                     <div class="d-flex align-items-center gap-2 mt-2 flex-wrap">
                       <button class="btn btn-sm btn-ghost-primary py-0 px-1" @click="startReply(m)">
                         <i class="ti ti-corner-up-left" style="font-size:14px"></i> Reply
@@ -1419,7 +1499,7 @@ agent-relay-orchestrator</pre>
                     <template x-if="m.subject">
                       <div class="fw-bold small mb-1" x-text="m.subject"></div>
                     </template>
-                    <div class="msg-body" x-text="m.body"></div>
+                    <div class="msg-body" x-text="messageBody(m)"></div>
                     <div class="d-flex align-items-center gap-2 mt-2 flex-wrap">
                       <button class="btn btn-sm btn-ghost-primary py-0 px-1" @click="startReply(m)">
                         <i class="ti ti-corner-up-left" style="font-size:14px"></i> Reply
@@ -2388,7 +2468,7 @@ agent-relay-orchestrator</pre>
               <template x-if="m.subject">
                 <div class="fw-bold small mb-1" x-text="m.subject"></div>
               </template>
-              <div class="msg-body" x-text="m.body"></div>
+              <div class="msg-body" x-text="messageBody(m)"></div>
             </div>
           </template>
           <template x-if="threadMessages.length === 0">
@@ -2481,6 +2561,13 @@ agent-relay-orchestrator</pre>
 <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.min.js"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
 <script src="dashboard.js"></script>
+<script>
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+      navigator.serviceWorker.register("/sw.js").catch(() => {});
+    });
+  }
+</script>
 
 </body>
 </html>

package/public/manifest.webmanifest

@@ -0,0 +1,33 @@
+{
+  "name": "Agent Relay",
+  "short_name": "Relay",
+  "description": "Local control panel for Agent Relay agents, channels, tasks, and messages.",
+  "id": "/",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#0d1117",
+  "theme_color": "#0d1117",
+  "orientation": "any",
+  "categories": ["developer", "productivity", "utilities"],
+  "icons": [
+    {
+      "src": "/icons/agent-relay.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/agent-relay-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/agent-relay-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/public/sw.js

@@ -0,0 +1,58 @@
+const CACHE_NAME = "agent-relay-dashboard-v1";
+const APP_SHELL = [
+  "/",
+  "/index.html",
+  "/dashboard.js",
+  "/manifest.webmanifest",
+  "/icons/agent-relay.svg",
+  "/icons/agent-relay-192.png",
+  "/icons/agent-relay-512.png",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => cache.addAll(APP_SHELL))
+      .then(() => self.skipWaiting()),
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((names) => Promise.all(names
+        .filter((name) => name !== CACHE_NAME)
+        .map((name) => caches.delete(name))))
+      .then(() => self.clients.claim()),
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  const url = new URL(request.url);
+
+  if (request.method !== "GET" || url.origin !== self.location.origin || url.pathname.startsWith("/api/")) {
+    return;
+  }
+
+  if (request.headers.get("accept")?.includes("text/event-stream")) {
+    return;
+  }
+
+  event.respondWith(
+    fetch(request)
+      .then((response) => {
+        if (response.ok && APP_SHELL.includes(url.pathname === "/" ? "/" : url.pathname)) {
+          const copy = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, copy));
+        }
+        return response;
+      })
+      .catch(async () => {
+        const cached = await caches.match(request);
+        if (cached) return cached;
+        if (request.mode === "navigate") return caches.match("/index.html");
+        throw new Error("offline");
+      }),
+  );
+});