relay-companion 0.1.49 → 0.1.50

package/overlay/inbox.html

@@ -122,7 +122,7 @@
   .tabs {
     flex:0 0 auto;
     display:flex; gap:4px;
-    padding:0 14px 6px;
+    padding:0 12px 6px;
     opacity:1;
     transition:opacity .24s var(--settle);
   }
@@ -533,6 +533,72 @@
   .cv-sugg:hover, .cv-sugg.active { background:rgba(31,26,23,.04); color:var(--ink); }
   .cv-hint { font-size:11px; line-height:1.45; color:var(--muted-2); margin-top:2px; }
   .cv-hint:empty { display:none; }
+
+  /* ---- My agents tab ---- */
+  /* Agent roster rows mirror the Contacts list; the history list mirrors relay rows. */
+  .ag-item {
+    display:flex; align-items:center; gap:11px; padding:10px 16px; cursor:pointer;
+    text-align:left; appearance:none; border:0; border-bottom:1px solid var(--hair-2);
+    background:transparent; width:100%; font-family:var(--sans);
+    transition:background-color .14s var(--settle);
+  }
+  .ag-item:hover { background:rgba(31,26,23,.035); }
+  .ag-avatar {
+    flex:0 0 auto; width:32px; height:32px; border-radius:9px; background:var(--accent-soft); color:var(--accent);
+    font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; letter-spacing:.02em;
+  }
+  .ag-body { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
+  .ag-name-line { display:flex; align-items:center; gap:7px; min-width:0; }
+  .ag-name { font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .ag-sub { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
+  .ag-time { flex:0 0 auto; margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums; padding-left:6px; }
+  /* Role badges: Owner = filled prussian pill, Viewer = quiet outline pill. */
+  .ag-badge {
+    flex:0 0 auto; display:inline-flex; align-items:center;
+    font-size:10px; font-weight:600; letter-spacing:.03em; line-height:1;
+    padding:3px 7px; border-radius:999px;
+    background:var(--accent); color:#fff; border:1px solid var(--accent);
+  }
+  .ag-badge.viewer { background:transparent; color:var(--muted-2); border-color:rgba(31,26,23,.22); }
+  /* history header: back chevron, agent name, role badge */
+  .ag-detail-head { display:flex; align-items:center; gap:9px; padding:10px 16px 8px; border-bottom:1px solid var(--hair-2); }
+  .ag-back {
+    appearance:none; border:0; background:transparent; cursor:pointer; padding:0;
+    display:inline-flex; align-items:center; gap:5px;
+    font-family:var(--sans); font-size:12px; font-weight:600; color:var(--accent);
+    transition:opacity .13s var(--settle);
+  }
+  .ag-back:hover { opacity:.72; }
+  .ag-detail-name {
+    font-family:var(--serif); font-size:14.5px; font-weight:500; color:var(--ink);
+    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto;
+  }
+  /* history rows: flat, hairline-divided like relay rows */
+  .ag-relay { position:relative; display:block; padding:11px 16px; border-bottom:1px solid var(--hair); }
+  .ag-relay-top { display:flex; align-items:baseline; gap:7px; min-width:0; }
+  .ag-dir { flex:0 0 auto; font-family:var(--mono); font-size:11px; line-height:1; align-self:center; color:var(--muted-2); }
+  .ag-dir.out { color:var(--accent); }
+  .ag-parties { font-size:11px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
+  .ag-parties .p { color:var(--ink-2); font-weight:500; }
+  /* type chips: question = filled accent-soft, completion = quiet outline */
+  .ag-chip {
+    flex:0 0 auto; display:inline-flex; align-items:center; align-self:center;
+    font-size:10px; font-weight:600; letter-spacing:.03em; line-height:1;
+    padding:3px 7px; border-radius:999px;
+  }
+  .ag-chip.question { background:var(--accent-soft); color:var(--accent); }
+  .ag-chip.completion { background:transparent; color:var(--muted-2); border:1px solid rgba(31,26,23,.18); }
+  .ag-relay-title {
+    font-family:var(--serif); font-size:14px; line-height:1.3; color:var(--muted); font-weight:400; margin-top:4px;
+    white-space:nowrap; overflow:hidden;
+    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent);
+            mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent);
+  }
+  .ag-relay.unread .ag-relay-title { color:var(--ink); font-weight:500; }
+  .ag-unread-dot {
+    flex:0 0 auto; width:7px; height:7px; border-radius:50%; align-self:center;
+    background:var(--accent); border:1.5px solid var(--accent); box-sizing:border-box;
+  }
 </style>
 </head>
 <body>
@@ -570,6 +636,7 @@
       </button>
       <button class="tab" type="button" data-view="sent">Sent</button>
       <button class="tab" type="button" data-view="contacts">Contacts</button>
+      <button class="tab" type="button" data-view="agents">My agents</button>
       <button class="mark-all-read gone" id="markAllRead" type="button">Mark all as read</button>
     </nav>
 
@@ -631,6 +698,24 @@
         <div class="cv-list" id="cvList"></div>
         <div id="contactsEmpty" class="cv-empty gone">No contacts yet.<br>Add someone, or your agent saves them as you relay.</div>
       </section>
+
+      <!-- My agents view: agent roster, swapping to one agent's relay history -->
+      <section class="view hidden" id="agentsView">
+        <div id="agList"></div>
+        <div id="agentsEmpty" class="cv-empty gone">No agents yet.<br>Agents your firm deploys with Granular will appear here.</div>
+        <div id="agDetail" class="gone">
+          <div class="ag-detail-head">
+            <button class="ag-back" type="button" id="agBack" aria-label="Back to agents">
+              <svg width="7" height="12" viewBox="0 0 8 14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M7 1L1 7l6 6"/></svg>
+              Agents
+            </button>
+            <span class="ag-detail-name" id="agDetailName"></span>
+            <span class="ag-badge" id="agDetailRole"></span>
+          </div>
+          <div id="agHistory"></div>
+          <div id="agHistoryEmpty" class="cv-empty gone">No relays with this agent yet.</div>
+        </div>
+      </section>
     </div>
   </div>
 
@@ -668,6 +753,15 @@
   const cvSaveEl = document.getElementById("cvSave");
   const cvCancelEl = document.getElementById("cvCancel");
   const cvDeleteEl = document.getElementById("cvDelete");
+  const agentsViewEl = document.getElementById("agentsView");
+  const agListEl = document.getElementById("agList");
+  const agentsEmptyEl = document.getElementById("agentsEmpty");
+  const agDetailEl = document.getElementById("agDetail");
+  const agBackEl = document.getElementById("agBack");
+  const agDetailNameEl = document.getElementById("agDetailName");
+  const agDetailRoleEl = document.getElementById("agDetailRole");
+  const agHistoryEl = document.getElementById("agHistory");
+  const agHistoryEmptyEl = document.getElementById("agHistoryEmpty");
 
   const REDUCED = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   const EXPANDED = { w: 344, h: 524 };
@@ -2123,6 +2217,95 @@
     }
   });
 
+  // ---------- My agents view ----------
+  // Roster of Granular foundry agents this human is linked to. Clicking one
+  // swaps the section to its relay history; Back returns to the roster.
+  let agentsList = [];
+  let agentDetail = null; // { agentUserId, name, role } while the history is open
+  function agInitials(name) {
+    const base = String(name || "?").trim();
+    const parts = base.split(/\s+/).filter(Boolean);
+    if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+    return base.slice(0, 2).toUpperCase();
+  }
+  function agRoleBadge(role) {
+    const viewer = role === "viewer";
+    return `<span class="ag-badge${viewer ? " viewer" : ""}">${viewer ? "Viewer" : "Owner"}</span>`;
+  }
+  function renderAgents() {
+    const showingDetail = Boolean(agentDetail);
+    agDetailEl.classList.toggle("gone", !showingDetail);
+    agListEl.classList.toggle("gone", showingDetail);
+    agentsEmptyEl.classList.toggle("gone", showingDetail || agentsList.length > 0);
+    if (showingDetail) return;
+    agListEl.innerHTML = agentsList.map((a) => `
+      <button class="ag-item" type="button" data-agent="${esc(a.agentUserId)}">
+        <span class="ag-avatar">${esc(agInitials(a.name))}</span>
+        <span class="ag-body">
+          <span class="ag-name-line">
+            <span class="ag-name">${esc(a.name)}</span>
+            ${agRoleBadge(a.role)}
+          </span>
+          <span class="ag-sub">${a.role === "viewer" ? "Follows this agent's relays" : "Exchanges relays with you"}</span>
+        </span>
+        <span class="ag-time">${a.lastRelayAt ? esc(timeAgo(a.lastRelayAt)) : ""}</span>
+      </button>`).join("");
+    for (const el of agListEl.querySelectorAll(".ag-item")) {
+      el.addEventListener("click", () => openAgentHistory(el.getAttribute("data-agent")));
+    }
+  }
+  async function loadAgents() {
+    try { agentsList = (await window.relay.agents()) || []; }
+    catch { agentsList = []; }
+    renderAgents();
+  }
+  function agHistoryRow(item) {
+    const outbound = item.direction === "outbound";
+    const parties = `<span class="p">${esc(item.fromDisplayName)}</span> → <span class="p">${esc((item.toDisplayNames || []).join(", "))}</span>`;
+    const chip = item.type === "question" || item.type === "completion"
+      ? `<span class="ag-chip ${item.type}">${item.type === "question" ? "Question" : "Completion"}</span>`
+      : "";
+    return `
+      <div class="ag-relay${item.unread ? " unread" : ""}">
+        <div class="ag-relay-top">
+          <span class="ag-dir${outbound ? " out" : ""}">${outbound ? "←" : "→"}</span>
+          ${item.unread ? '<span class="ag-unread-dot"></span>' : ""}
+          <span class="ag-parties">${parties}</span>
+          ${chip}
+          <span class="ag-time">${esc(timeAgo(item.createdAt))}</span>
+        </div>
+        <div class="ag-relay-title">${esc(item.title)}</div>
+      </div>`;
+  }
+  async function openAgentHistory(agentUserId) {
+    const agent = agentsList.find((a) => a.agentUserId === agentUserId);
+    if (!agent) return;
+    agentDetail = agent;
+    agDetailNameEl.textContent = agent.name;
+    agDetailRoleEl.textContent = agent.role === "viewer" ? "Viewer" : "Owner";
+    agDetailRoleEl.classList.toggle("viewer", agent.role === "viewer");
+    agHistoryEl.innerHTML = "";
+    agHistoryEmptyEl.classList.add("gone");
+    renderAgents();
+    try {
+      const res = await window.relay.agentRelays(agentUserId);
+      if (!agentDetail || agentDetail.agentUserId !== agentUserId) return; // navigated away
+      const items = (res && Array.isArray(res.items)) ? res.items : [];
+      // Newest first for the pill (the API returns oldest-first chronology).
+      agHistoryEl.innerHTML = items.slice().reverse().map(agHistoryRow).join("");
+      agHistoryEmptyEl.classList.toggle("gone", items.length > 0);
+    } catch {
+      if (!agentDetail || agentDetail.agentUserId !== agentUserId) return;
+      agHistoryEmptyEl.classList.remove("gone");
+    }
+  }
+  function closeAgentHistory() {
+    agentDetail = null;
+    agHistoryEl.innerHTML = "";
+    renderAgents();
+  }
+  agBackEl.addEventListener("click", closeAgentHistory);
+
   // ---------- views / tabs ----------
   function syncTabs() {
     const tabView = activeView === "taskDetail" ? "sent" : activeView;
@@ -2133,6 +2316,7 @@
     sentViewEl.classList.toggle("hidden", activeView !== "sent");
     taskDetailViewEl.classList.toggle("hidden", activeView !== "taskDetail");
     contactsViewEl.classList.toggle("hidden", activeView !== "contacts");
+    agentsViewEl.classList.toggle("hidden", activeView !== "agents");
     if (activeView !== "taskDetail" && taskDetailTimer) {
       clearInterval(taskDetailTimer);
       taskDetailTimer = null;
@@ -2143,6 +2327,11 @@
       cvFormEl.classList.add("hidden");
       if (window.relay.setFocusable) window.relay.setFocusable(false);
     }
+    if (activeView === "agents") {
+      agentDetail = null; // always land on the roster
+      renderAgents();
+      loadAgents();
+    }
     if (activeView === "sent" && window.relay.refreshSent) {
       window.relay.refreshSent().catch(() => {});
     }

package/overlay/main.cjs

@@ -544,6 +544,41 @@ async function deleteContactFromBook(input) {
   return readContacts();
 }
 
+// ---- foundry agents (cached like contacts; refreshed on demand) ------------
+// Same rule as contacts: a slow or failing network must never blank the list.
+// Keep the last good roster/history; refresh lazily when the tab is opened.
+
+let agentsCache = [];
+const agentRelaysCache = new Map(); // agentUserId -> last good history payload
+async function refreshAgents() {
+  try {
+    const client = await relayClient();
+    const res = await client.agents();
+    agentsCache = Array.isArray(res && res.agents) ? res.agents : [];
+  } catch (error) {
+    // Keep the last good cache; a transient network failure must not blank the UI.
+    console.error("[overlay] listAgents failed:", error && error.message);
+  }
+  return agentsCache;
+}
+async function readAgents() {
+  await refreshAgents();
+  return agentsCache;
+}
+async function readAgentRelays(agentUserId) {
+  const id = String(agentUserId || "").trim();
+  if (!id) throw new Error("Missing agent id.");
+  try {
+    const client = await relayClient();
+    const res = await client.agentRelays(id);
+    agentRelaysCache.set(id, res);
+  } catch (error) {
+    console.error("[overlay] agentRelays failed:", error && error.message);
+    if (!agentRelaysCache.has(id)) throw error;
+  }
+  return agentRelaysCache.get(id);
+}
+
 // ---- payload assembly + push to renderer ---------------------------------
 
 // buildPayload is synchronous over CACHES so the first paint never waits on the
@@ -1750,6 +1785,8 @@ ipcMain.handle("relay:answer", (_e, taskId, messageId, text, packetId) => answer
 ipcMain.handle("relay:contacts", () => readContacts());
 ipcMain.handle("relay:contactSave", (_e, input) => saveContact(input));
 ipcMain.handle("relay:contactDelete", (_e, input) => deleteContactFromBook(input));
+ipcMain.handle("relay:agents", () => readAgents());
+ipcMain.handle("relay:agentRelays", (_e, agentUserId) => readAgentRelays(agentUserId));
 
 // The overlay is normally focusable:false so it never steals keyboard focus from
 // Claude/Codex. Text fields (the contact form, quick reply) need focus, so the renderer

package/overlay/preload.cjs

@@ -37,6 +37,10 @@ contextBridge.exposeInMainWorld("relay", {
   contactSave: (input) => ipcRenderer.invoke("relay:contactSave", input),
   contactDelete: (input) => ipcRenderer.invoke("relay:contactDelete", input),
 
+  // foundry agents ("My agents" tab)
+  agents: () => ipcRenderer.invoke("relay:agents"),
+  agentRelays: (agentUserId) => ipcRenderer.invoke("relay:agentRelays", agentUserId),
+
   // window plumbing
   setFocusable: (v) => ipcRenderer.send("relay:setFocusable", v),
   interactive: (v) => ipcRenderer.send("relay:interactive", v),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-companion",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "description": "Relay companion for ordinary messages, with dormant coordination features available only by explicit opt-in.",
   "type": "module",
   "bin": {

package/src/client.js

@@ -201,6 +201,14 @@ export class RelayClient {
     return this.#req("POST", "/v1/tools/call", payload);
   }
 
+  agents() {
+    return this.#req("GET", "/v1/agents");
+  }
+
+  agentRelays(agentUserId) {
+    return this.#req("GET", `/v1/agents/${encodeURIComponent(agentUserId)}/relays`);
+  }
+
   searchContacts(q) {
     return this.#req("GET", `/v1/contacts/search?q=${encodeURIComponent(q)}`);
   }

package/src/mcp.js

@@ -60,6 +60,17 @@ export const TOOLS = [
           description: "Absolute local file paths to attach. Relay reads, hashes, and includes the bytes safely.",
           items: { type: "string" },
         },
+        inReplyToRelayId: {
+          type: "string",
+          description:
+            "When answering a question relay, pass that relay's id here — this is what resumes the asking agent's run.",
+        },
+        type: {
+          type: "string",
+          enum: ["question", "completion"],
+          description:
+            "Agent-only semantics for agent-outbound relays: 'question' pauses the sending agent's run until an owner answers; 'completion' reports a finished run. Ordinary humans omit this field.",
+        },
         idempotencyKey: { type: "string" },
       },
       required: ["recipient", "title", "bodyMarkdown", "idempotencyKey"],
@@ -501,6 +512,8 @@ export async function handleCall(client, name, args, { mode = DEFAULT_COMPANION_
           source: { host: "relay-mcp" },
           targetSurfaces: args.targetSurfaces || [],
           attachments: await prepareOrdinaryRelayAttachments(args),
+          ...(args.inReplyToRelayId ? { inReplyToRelayId: args.inReplyToRelayId } : {}),
+          ...(args.type ? { type: args.type } : {}),
           idempotencyKey: args.idempotencyKey,
         })),
       );