relay-companion 0.1.32 → 0.1.34

package/overlay/inbox.html

@@ -241,6 +241,14 @@
     font-size:11.5px; line-height:1.4; color:var(--muted); margin-top:3px;
     white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
   }
+  .row.sent .rk-dot { background:var(--accent); border-color:var(--accent); opacity:.58; }
+  .row.sent.failed .rk-dot { background:#b4332a; border-color:#b4332a; opacity:.82; }
+  .row.sent.pending .rk-dot { background:transparent; border-color:var(--muted-3); opacity:1; }
+  .sent-body {
+    font-size:11.5px; line-height:1.45; color:var(--muted); margin-top:7px;
+    white-space:pre-line; display:-webkit-box; -webkit-box-orient:vertical;
+    -webkit-line-clamp:5; overflow:hidden;
+  }
 
   /* quick reply (human_question): rounded reply field + prussian round send */
   .qr { display:flex; gap:8px; margin-top:11px; align-items:flex-end; }
@@ -539,9 +547,7 @@
       <button class="tab active" type="button" data-view="relays">
         Relays <span class="tab-badge gone" id="relaysBadge">0</span>
       </button>
-      <button class="tab" type="button" data-view="tasks">
-        Tasks <span class="tab-badge gone" id="tasksBadge">0</span>
-      </button>
+      <button class="tab" type="button" data-view="sent">Sent</button>
       <button class="tab" type="button" data-view="contacts">Contacts</button>
     </nav>
 
@@ -558,15 +564,15 @@
         </div>
       </section>
 
-      <!-- Tasks view -->
-      <section class="view hidden" id="tasksView">
-        <div id="tasksList"></div>
-        <div id="tasksEmpty" class="empty gone">
+      <!-- Sent view -->
+      <section class="view hidden" id="sentView">
+        <div id="sentList"></div>
+        <div id="sentEmpty" class="empty gone">
           <svg class="mark" width="22" height="22" viewBox="0 0 16 16" aria-hidden="true">
             <rect x="0" y="6" width="4" height="4"/><rect x="6" y="6" width="4" height="4"/><rect x="12" y="6" width="4" height="4"/>
           </svg>
-          <div class="t1">No tasks yet</div>
-          <div class="t2">Tasks you create or join will show their state here.</div>
+          <div class="t1">No sent relays yet</div>
+          <div class="t2">Relays you send will appear here with their delivery state.</div>
         </div>
       </section>
 
@@ -616,10 +622,12 @@
   const relaysListEl = document.getElementById("relaysList");
   const relaysEmptyEl = document.getElementById("relaysEmpty");
   const relaysBadgeEl = document.getElementById("relaysBadge");
-  const tasksViewEl = document.getElementById("tasksView");
-  const tasksListEl = document.getElementById("tasksList");
-  const tasksEmptyEl = document.getElementById("tasksEmpty");
-  const tasksBadgeEl = document.getElementById("tasksBadge");
+  const sentViewEl = document.getElementById("sentView");
+  const sentListEl = document.getElementById("sentList");
+  const sentEmptyEl = document.getElementById("sentEmpty");
+  const tasksViewEl = null;
+  const tasksListEl = document.createElement("div");
+  const tasksEmptyEl = document.createElement("div");
   const taskDetailViewEl = document.getElementById("taskDetailView");
   const contactsViewEl = document.getElementById("contactsView");
   const cvAddEl = document.getElementById("cvAdd");
@@ -763,8 +771,7 @@
     cardEl.classList.remove("collapsed", "offstage", "bye");
     ghost = true; peeking = true;
     cardEl.classList.add("peek", "ghost");
-    const kind = row && row.relayNotificationKind;
-    activeView = (kind === "task_request" || kind === "share_approval") ? "tasks" : "relays";
+    activeView = "relays";
     syncTabs();
     applyView();
     renderAll();
@@ -811,8 +818,7 @@
     return Math.min(44 + rowH + 6, 340);
   }
   // A new relay arrived. If folded, peek open like an iOS banner (~7s) then fold back.
-  // The peek routes to the tab the item lives in: task_request / share_approval -> Tasks
-  // (the clean split), everything else -> Relays.
+  // The peek routes to Relays. Task/share rows are hidden until that product surface is ready.
   function notifyArrival(row) {
     if (!collapsed && !peeking) return;
     if (peekTimer) clearTimeout(peekTimer);
@@ -820,8 +826,7 @@
     collapsed = false;
     cardEl.classList.remove("collapsed");
     cardEl.classList.add("peek");
-    const kind = row && row.relayNotificationKind;
-    activeView = (kind === "task_request" || kind === "share_approval") ? "tasks" : "relays";
+    activeView = "relays";
     syncTabs();
     applyView();
     renderAll();
@@ -1014,8 +1019,7 @@
         </div>`;
     }).join("");
   }
-  // The clean split: Relays shows ONLY the urgent quick-reply (human_question) and
-  // plain message/result/notice kinds. task_request + share_approval live in Tasks.
+  // Tasks/share approvals are hidden from the pill until that product surface is ready.
   const RELAY_HIDDEN_KINDS = new Set(["task_request", "share_approval"]);
   function isRelayListKind(row) { return !RELAY_HIDDEN_KINDS.has(row && row.relayNotificationKind); }
 
@@ -1102,8 +1106,9 @@
 
   // ---------- state ----------
   let activeView = "relays";
-  let payload = { account: { paired: false }, ui: { canDismiss: true, reopenSurface: "the Relay icon" }, relays: [], tasks: [], contacts: [] };
+  let payload = { account: { paired: false }, ui: { canDismiss: true, reopenSurface: "the Relay icon" }, relays: [], sent: [], tasks: [], contacts: [] };
   let prevRelayIds = new Set();
+  const expandedSentIds = new Set();
   let contactsList = [];
   let cvEditing = null;
 
@@ -1207,8 +1212,7 @@
   const SEND_ARROW_SVG = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>';
 
   // The inline action affordances for each relay kind. task_request / share_approval
-  // never reach the Relays list (filtered out by isRelayListKind) — their accept/decline
-  // lives in the Tasks tab now.
+  // never reach the Relays list while the Tasks product surface is hidden.
   function relayActionsHtml(r) {
     const k = r.relayNotificationKind;
     if (k === "human_question") {
@@ -1292,8 +1296,8 @@
       ta.addEventListener("input", () => { ta.style.height = "auto"; ta.style.height = Math.min(84, ta.scrollHeight) + "px"; });
       ta.addEventListener("mousedown", () => setInteractive(true));
     }
-    // accept/reject moved to the Tasks tab (the clean split). Only connector_reauth
-    // keeps a [data-review] "Reconnect" affordance here.
+    // accept/reject are hidden with the Tasks surface. Only connector_reauth keeps a
+    // [data-review] "Reconnect" affordance here.
     for (const btn of relaysListEl.querySelectorAll("[data-review]")) {
       const id = btn.getAttribute("data-review");
       btn.addEventListener("click", () => {
@@ -1334,6 +1338,92 @@
     }
   }
 
+  // ---------- Sent view ----------
+  function sentRecipient(r) {
+    const rec = r && r.recipient ? r.recipient : {};
+    return String(rec.name || rec.email || "Recipient").trim();
+  }
+  function sentSubject(r) {
+    const title = String((r && (r.title || r.displayTitle)) || "").trim();
+    return title || firstLine((r && r.bodyMarkdown) || "", 90) || "Relay";
+  }
+  function sentDeliveryLabel(r) {
+    const d = (r && r.delivery) || {};
+    const state = String(d.state || r.state || "").toLowerCase();
+    const channel = String(d.channel || "").toLowerCase();
+    if (state === "opened") return "Opened";
+    if (state === "failed") return "Failed";
+    if (state === "pending") return "Pending";
+    if (channel === "email") return "Emailed";
+    if (channel === "device") return "Sent to Relay";
+    return "Sent";
+  }
+  function sentDetail(r) {
+    const parts = [sentDeliveryLabel(r)];
+    const d = (r && r.delivery) || {};
+    const rec = (r && r.recipient) || {};
+    if (d.openedAt) parts.push("opened " + timeAgo(d.openedAt));
+    else if (d.sentAt) parts.push("sent " + timeAgo(d.sentAt));
+    if (rec.email) parts.push(rec.email);
+    const atts = Array.isArray(r && r.attachments) ? r.attachments : [];
+    if (atts.length === 1) {
+      const a = atts[0];
+      const size = fmtBytes(a.bytes);
+      parts.push(`${a.name || "attachment"}${size ? " · " + size : ""}`);
+    } else if (atts.length > 1) {
+      parts.push(`${atts.length} attachments`);
+    }
+    return parts.join(" · ");
+  }
+  function sentClass(r) {
+    const state = String(((r && r.delivery) || {}).state || "").toLowerCase();
+    if (state === "failed") return "failed";
+    if (state === "pending") return "pending";
+    return "";
+  }
+  function sentBodyText(r, max) {
+    const text = plainMd((r && r.bodyMarkdown) || "", max || 700);
+    return text || "";
+  }
+  function renderSent() {
+    const rows = payload.sent || [];
+    sentEmptyEl.classList.toggle("gone", rows.length > 0);
+    if (!rows.length) { sentListEl.innerHTML = ""; return; }
+    sentListEl.innerHTML = rows.map((r) => {
+      const id = r.relayId || r.id || "";
+      const subject = sentSubject(r);
+      const body = r.bodyMarkdown || "";
+      const preview = bodyPreview(body, subject, 118);
+      const expanded = expandedSentIds.has(id);
+      const detail = sentDetail(r);
+      const klass = sentClass(r);
+      return `
+      <div class="row sent ${klass}${expanded ? " expanded" : ""}" data-sent-id="${esc(id)}">
+        <div class="rk-top">
+          <span class="rk-dot"></span>
+          <span class="rk-from">To</span>
+          <span class="rk-sender">${esc(sentRecipient(r))}</span>
+          <span class="rk-time">${timeAgo(r.createdAt)}</span>
+        </div>
+        <div class="rk-subject">${esc(subject)}</div>
+        ${preview ? `<div class="rk-preview">${esc(preview)}</div>` : ""}
+        <div class="row-note">${esc(detail)}</div>
+        ${expanded ? `<div class="sent-body">${esc(sentBodyText(r))}</div>` : ""}
+      </div>`;
+    }).join("");
+    wireSentRows();
+  }
+  function wireSentRows() {
+    for (const el of sentListEl.querySelectorAll(".row.sent")) {
+      const id = el.getAttribute("data-sent-id");
+      el.addEventListener("click", () => {
+        if (expandedSentIds.has(id)) expandedSentIds.delete(id);
+        else expandedSentIds.add(id);
+        renderSent();
+      });
+    }
+  }
+
   // ---------- Tasks view ----------
   const TASK_GROUPS = [
     { key: "needs", label: "Needs you", match: (t) => t.requiresViewerAction },
@@ -1402,7 +1492,7 @@
     if (taskDetailTimer) { clearInterval(taskDetailTimer); taskDetailTimer = null; }
     taskDetailId = null;
     taskDetailData = null;
-    activeView = "tasks";
+    activeView = "sent";
     syncTabs();
     applyView();
     renderAll();
@@ -1524,7 +1614,7 @@
     const t = taskDetailData;
     if (!t) {
       taskDetailViewEl.innerHTML = `
-        <div class="td-head"><button class="td-back" type="button" data-td-back="1">‹ Tasks</button></div>
+        <div class="td-head"><button class="td-back" type="button" data-td-back="1">‹ Sent</button></div>
         <div class="td-quiet">${taskDetailError ? esc(taskDetailError) : "Loading task…"}</div>`;
       wireTaskDetail();
       return;
@@ -1542,7 +1632,7 @@
 
     let html = `
       <div class="td-head">
-        <button class="td-back" type="button" data-td-back="1">‹ Tasks</button>
+        <button class="td-back" type="button" data-td-back="1">‹ Sent</button>
         <span class="td-when">${esc(timeAgo(t.updatedAt))}</span>
       </div>
       <div class="td-title">${esc(t.title || "Untitled task")}</div>
@@ -1896,13 +1986,12 @@
 
   // ---------- views / tabs ----------
   function syncTabs() {
-    // The in-pill task detail lives under the Tasks tab.
-    const tabView = activeView === "taskDetail" ? "tasks" : activeView;
+    const tabView = activeView === "taskDetail" ? "sent" : activeView;
     for (const tab of tabEls) tab.classList.toggle("active", tab.getAttribute("data-view") === tabView);
   }
   function applyView() {
     relaysViewEl.classList.toggle("hidden", activeView !== "relays");
-    tasksViewEl.classList.toggle("hidden", activeView !== "tasks");
+    sentViewEl.classList.toggle("hidden", activeView !== "sent");
     taskDetailViewEl.classList.toggle("hidden", activeView !== "taskDetail");
     contactsViewEl.classList.toggle("hidden", activeView !== "contacts");
     if (activeView !== "taskDetail" && taskDetailTimer) {
@@ -1915,8 +2004,8 @@
       cvFormEl.classList.add("hidden");
       if (window.relay.setFocusable) window.relay.setFocusable(false);
     }
-    if (activeView === "tasks") {
-      window.relay.refreshTasks().catch(() => {});
+    if (activeView === "sent" && window.relay.refreshSent) {
+      window.relay.refreshSent().catch(() => {});
     }
   }
   for (const tab of tabEls) {
@@ -1937,10 +2026,8 @@
     const unread = (payload.relays || []).filter((r) => r.unread && isRelayListKind(r)).length;
     setCount(unread);
     setBadge(relaysBadgeEl, unread);
-    const needsTasks = (payload.tasks || []).filter((t) => t.requiresViewerAction).length;
-    setBadge(tasksBadgeEl, needsTasks);
     if (activeView === "relays") renderRelays();
-    else if (activeView === "tasks") renderTasks();
+    else if (activeView === "sent") renderSent();
     // contacts renders from its own load path
   }
 
@@ -1962,6 +2049,7 @@
       account: next.account || payload.account,
       ui: next.ui || payload.ui,
       relays: Array.isArray(next.relays) ? next.relays : [],
+      sent: Array.isArray(next.sent) ? next.sent : [],
       tasks: Array.isArray(next.tasks) ? next.tasks : [],
       contacts: Array.isArray(next.contacts) ? next.contacts : (payload.contacts || []),
     };
@@ -1980,7 +2068,7 @@
   if (window.relay.onOpenDone) window.relay.onOpenDone((id) => stopOpening(id));
   window.relay.refresh().then((p) => {
     onPayload(p);
-    console.log("[overlay] booted ok, relays=" + (p && p.relays ? p.relays.length : 0) + " tasks=" + (p && p.tasks ? p.tasks.length : 0));
+    console.log("[overlay] booted ok, relays=" + (p && p.relays ? p.relays.length : 0) + " sent=" + (p && p.sent ? p.sent.length : 0));
   }).catch((e) => console.log("[overlay] refresh failed", e && e.message ? e.message : e));
 </script>
 </body>

package/overlay/main.cjs

@@ -1,5 +1,5 @@
 // Relay companion pill — a small floating, always-on-top Relay window that lists
-// incoming Relay attention items + tasks, and lazy-opens them in Claude Code / Codex.
+// incoming Relay attention items + sent relays, and lazy-opens them in Claude Code / Codex.
 //
 // Motion principle: the OS window is a FIXED-SIZE, transparent, click-through canvas.
 // It is NEVER resized while animating. All expand/collapse motion is GPU-composited CSS
@@ -15,7 +15,7 @@
 // Data:
 //   - Relay attention rows come from ${RELAY_HOME:-~/.relay-companion}/state.json under
 //     `state.packets` (staged by the companion daemon). Read it directly + fs.watch it.
-//   - Tasks come live from RelayClient.listTasks(), refreshed on a timer and on demand.
+//   - Sent relays come live from RelayClient.sent(), refreshed on a timer and on demand.
 //   - Contacts come live from RelayClient.listContacts() / upsertContact().
 //   - Mutations (accept/reject/approve/decline/answer) call RelayClient with device-token
 //     auth. ack/mark-read writes state.json directly (atomic temp+rename).
@@ -252,6 +252,30 @@ function readRelays() {
     });
 }
 
+const RELAY_HIDDEN_KINDS = new Set(["task_request", "share_approval"]);
+function visibleRelayRows(rows) {
+  return rows.filter((row) => !RELAY_HIDDEN_KINDS.has(row && row.relayNotificationKind));
+}
+
+// ---- sent relays (live) --------------------------------------------------
+
+let sentCache = [];
+let sentLoadedOnce = null;
+async function refreshSent() {
+  try {
+    const client = await relayClient();
+    const res = await client.sent();
+    sentCache = Array.isArray(res && res.items) ? res.items : [];
+  } catch (error) {
+    console.error("[overlay] listSent failed:", error && error.message);
+  }
+  return sentCache;
+}
+function ensureSentLoaded() {
+  if (!sentLoadedOnce) sentLoadedOnce = refreshSent().catch(() => sentCache);
+  return sentLoadedOnce;
+}
+
 // ---- tasks (live) --------------------------------------------------------
 
 let tasksCache = [];
@@ -316,7 +340,7 @@ async function saveContact(input) {
 // ---- payload assembly + push to renderer ---------------------------------
 
 async function buildPayload() {
-  await ensureTasksLoaded();
+  await ensureSentLoaded();
   const [relays, contacts] = [readRelays(), await readContacts()];
   return {
     account: account(),
@@ -325,7 +349,8 @@ async function buildPayload() {
       reopenSurface: reopenSurfaceName(),
     },
     relays,
-    tasks: tasksCache,
+    sent: sentCache,
+    tasks: [],
     contacts,
   };
 }
@@ -335,11 +360,12 @@ async function pushInbox(force) {
   if (!win || win.isDestroyed()) return;
   const payload = await buildPayload();
   const rows = payload.relays;
+  const notifiableRows = visibleRelayRows(rows);
   if (knownIds === null) {
-    knownIds = new Set(rows.map((r) => r.id));
+    knownIds = new Set(notifiableRows.map((r) => r.id));
   } else {
-    const fresh = rows.filter((r) => r.unread && !knownIds.has(r.id));
-    knownIds = new Set(rows.map((r) => r.id));
+    const fresh = notifiableRows.filter((r) => r.unread && !knownIds.has(r.id));
+    knownIds = new Set(notifiableRows.map((r) => r.id));
     if (fresh.length && win && !win.isDestroyed()) {
       // newest arrival drives the peek. While dismissed, the same designed banner still
       // shows — as a "ghost": the window appears for the notification only, and the
@@ -357,13 +383,13 @@ async function pushInbox(force) {
   }
   const sig = JSON.stringify({
     relays: rows.map((r) => [r.id, r.relayNotificationKind, r.unread, r.title, r.senderName, r.urgency]),
-    tasks: payload.tasks.map((t) => [
-      t.id,
-      t.state,
-      t.updatedAt,
-      t.requiresViewerAction,
-      t.pendingApprovalCount,
-      Array.isArray(t.participants) ? t.participants.length : 0,
+    sent: payload.sent.map((r) => [
+      r.relayId,
+      r.state,
+      r.updatedAt,
+      r.delivery && r.delivery.state,
+      r.delivery && r.delivery.channel,
+      r.hasAttachments,
     ]),
     contacts: payload.contacts.map((c) => [c.id, c.name, c.email]),
     account: [payload.account.paired, payload.account.email],
@@ -1034,7 +1060,7 @@ function createWindow() {
     }
   });
   win.once("ready-to-show", () => {
-    // buildPayload() awaits the first task load, so a single push paints all tabs.
+    // buildPayload() awaits the first sent-relay load, so a single push paints all tabs.
     pushInbox(true).catch((error) => console.error("[overlay] initial push failed:", error && error.message));
     pollHosts();
   });
@@ -1049,10 +1075,10 @@ function createWindow() {
   } catch {}
   setInterval(() => pushInboxQuiet(), 2500); // safety net for state.json
   setInterval(() => {
-    refreshTasks()
+    refreshSent()
       .then(() => pushInbox(false))
       .catch(() => {});
-  }, 5000); // live task refresh
+  }, 5000); // live sent-relay refresh
   setInterval(pollHosts, 1500);
 }
 
@@ -1133,6 +1159,11 @@ ipcMain.on("relay:open", (_e, id) => openPacket(id));
 ipcMain.on("relay:openTask", (_e, taskId) => openTaskDetail(taskId));
 ipcMain.on("relay:openUrl", (_e, url) => openUrlTarget(url));
 ipcMain.on("relay:ack", (_e, id) => ackPacket(id));
+ipcMain.handle("relay:refreshSent", async () => {
+  await refreshSent();
+  await pushInbox(true);
+  return sentCache;
+});
 ipcMain.handle("relay:refreshTasks", async () => {
   await refreshTasks();
   await pushInbox(true);

package/overlay/preload.cjs

@@ -15,6 +15,7 @@ contextBridge.exposeInMainWorld("relay", {
   open: (id) => ipcRenderer.send("relay:open", id),
   ack: (id) => ipcRenderer.send("relay:ack", id),
   openUrl: (url) => ipcRenderer.send("relay:openUrl", url),
+  refreshSent: () => ipcRenderer.invoke("relay:refreshSent"),
 
   // task mutations (return { ok, error?, conflict? })
   accept: (taskId, participantId) => ipcRenderer.invoke("relay:accept", taskId, participantId),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-companion",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "Relay companion: connects local coding agents to Relay tasks, approvals, and connector tools.",
   "type": "module",
   "bin": {

package/src/client.js

@@ -54,6 +54,10 @@ export class RelayClient {
     return this.#req("GET", "/v1/inbox");
   }
 
+  sent() {
+    return this.#req("GET", "/v1/sent");
+  }
+
   fetchRelay(id) {
     return this.#req("GET", `/v1/relays/${encodeURIComponent(id)}`);
   }

package/src/materializer.js

@@ -216,8 +216,9 @@ async function materializeRowInHost({ id, row, rowState = {}, host = "claude", l
   const cwd = resolveCwd();
   const rowWithAttachments = await materializeAttachmentFiles(row, { log });
   const materializationSignature = rowMaterializationSignature(rowWithAttachments);
+  const materializationSignatureKey = attachmentSignatureKeyForHost(cleanHost);
   const materializationStale =
-    hasAttachments(rowWithAttachments) && rowState.attachmentMaterializationSignature !== materializationSignature;
+    hasAttachments(rowWithAttachments) && rowState[materializationSignatureKey] !== materializationSignature;
   // The human reads `visible`; the agent-only `operatorNote` (real ids + the tool
   // call to make) rides a hidden channel per host (Claude: a system-meta transcript
   // row; Codex: developerInstructions) so it never enters the visible transcript.
@@ -243,6 +244,7 @@ async function materializeRowInHost({ id, row, rowState = {}, host = "claude", l
         title: rowWithAttachments.displayTitle,
         attachments: rowWithAttachments.attachments || [],
         attachmentMaterializationSignature: materializationSignature,
+        [materializationSignatureKey]: materializationSignature,
         materializedSurfaces: {
           codex: true,
           claudeCode: Boolean(rowState.materializedSurfaces?.claudeCode || rowState.claudeNativeSession),
@@ -296,6 +298,7 @@ async function materializeRowInHost({ id, row, rowState = {}, host = "claude", l
         claudeNativeSession,
         attachments: rowWithAttachments.attachments || [],
         attachmentMaterializationSignature: materializationSignature,
+        [materializationSignatureKey]: materializationSignature,
         materializedSurfaces: {
           codex: Boolean(previousSurfaces.codex || rowState.threadId),
           claudeCode: Boolean(previousSurfaces.claudeCode || claude.nativeSession || claude.surfaces?.claudeCode),
@@ -399,6 +402,12 @@ function rowMaterializationSignature(row) {
   });
 }
 
+function attachmentSignatureKeyForHost(host) {
+  return String(host || "").toLowerCase() === "codex"
+    ? "codexAttachmentMaterializationSignature"
+    : "claudeAttachmentMaterializationSignature";
+}
+
 function hasAttachments(row) {
   return Array.isArray(row?.attachments) && row.attachments.length > 0;
 }