relay-companion 0.1.396 → 0.1.398

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "relay-companion",
-  "version": "0.1.396",
+  "version": "0.1.398",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "relay-companion",
-      "version": "0.1.396",
+      "version": "0.1.398",
       "license": "MIT",
       "dependencies": {
         "@anthropic-ai/claude-agent-sdk": "0.3.195",

package/overlay/inbox.html

@@ -2245,9 +2245,34 @@
   .sv-provider-list { overflow:hidden; border-radius:var(--r-3); background:var(--raised); box-shadow:inset 0 0 0 1px var(--edge); }
   .sv-provider { padding:12px; }
   .sv-provider + .sv-provider { border-top:1px solid var(--edge); }
-  .sv-provider-list.sv-agent-provider-list { display:flex; flex-direction:column; gap:10px; overflow:visible; border-radius:0; background:transparent; box-shadow:none; }
-  .sv-agent-provider-list .sv-provider { border-radius:var(--r-3); background:var(--raised); box-shadow:inset 0 0 0 1px var(--edge); }
-  .sv-agent-provider-list .sv-provider + .sv-provider { border-top:0; }
+  .sv-provider-list.sv-agent-provider-list { background:var(--raised); }
+  .sv-agent-provider-list .sv-provider { padding:0; }
+  .sv-agent-provider-list .sv-provider + .sv-provider { border-top:1px solid var(--edge); }
+  .sv-agent-provider-toggle {
+    appearance:none; width:100%; min-height:64px; padding:12px; border:0; background:transparent; color:inherit;
+    display:grid; grid-template-columns:28px minmax(0,1fr) auto 14px; align-items:center; gap:10px;
+    font-family:var(--sans); text-align:left; cursor:pointer; transition:background-color var(--t-fast) var(--settle);
+  }
+  .sv-agent-provider-toggle:hover { background:var(--wash); }
+  .sv-agent-provider-logo { width:28px; height:28px; border-radius:7px; object-fit:contain; }
+  .sv-agent-provider-summary { min-width:0; display:flex; flex-direction:column; }
+  .sv-agent-provider-count { margin-top:3px; color:var(--muted-2); font-size:11px; line-height:1.2; }
+  .sv-agent-provider-ready { display:inline-flex; align-items:center; gap:5px; color:var(--ok); font:600 10px/1 var(--sans); white-space:nowrap; }
+  .sv-agent-provider-ready::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
+  .sv-agent-provider-state { color:var(--muted-2); font:600 10px/1 var(--sans); white-space:nowrap; }
+  .sv-agent-provider-chev { color:var(--muted-3); transition:transform var(--t-base) var(--settle); }
+  .sv-agent-provider-toggle[aria-expanded="true"] .sv-agent-provider-chev { transform:rotate(180deg); }
+  .sv-agent-provider-detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-base) var(--soft); }
+  .sv-agent-provider-detail.open { grid-template-rows:1fr; }
+  .sv-agent-provider-detail-inner { min-height:0; overflow:hidden; }
+  .sv-agent-provider-detail-body { margin:0 12px 13px 50px; padding-top:11px; border-top:1px solid var(--hair); }
+  .sv-agent-provider-note { margin-bottom:11px; color:var(--muted-2); font-size:10.5px; line-height:1.4; }
+  .sv-agent-provider-group + .sv-agent-provider-group { margin-top:12px; }
+  .sv-agent-provider-group-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; color:var(--muted-2); font:600 10px/1.25 var(--sans); }
+  .sv-agent-provider-integrations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:0; padding:0; list-style:none; }
+  .sv-agent-provider-integrations li { min-width:0; overflow:hidden; color:var(--muted); font:500 10px/1.25 var(--sans); text-overflow:ellipsis; white-space:nowrap; }
+  .sv-agent-provider-integrations li::before { content:"·"; margin-right:5px; color:var(--muted-3); }
+  .sv-agent-provider-actions { display:flex; gap:7px; justify-content:flex-end; margin-top:12px; }
   .sv-provider-top { display:flex; align-items:center; gap:9px; }
   .sv-provider-copy { min-width:0; flex:1 1 auto; display:flex; flex-direction:column; }
   .sv-provider-name { font-size:13px; font-weight:600; color:var(--ink); }
@@ -2266,7 +2291,7 @@
   .sv-provider-btn.primary { border-color:color-mix(in srgb, var(--accent) 35%, var(--edge)); background:var(--accent-soft); color:var(--accent); }
   .sv-provider-btn:hover { color:var(--ink); border-color:var(--edge-strong); }
   .sv-provider-btn:disabled { opacity:.4; cursor:default; }
-  @media (prefers-reduced-motion:reduce) { .sv-provider-dot.busy { animation:none; } }
+  @media (prefers-reduced-motion:reduce) { .sv-provider-dot.busy { animation:none; } .sv-agent-provider-detail, .sv-agent-provider-chev { transition:none; } }
 
   /* ---- Quiet mode: the two durable on/off preferences ----
      A real switch, not the Enable/Disable label-flip the provider rows use: these
@@ -11183,6 +11208,7 @@
   let chatAgentPreferencesError = "";
   let providerAuthInfo = null;  // safe status only; credentials stay in provider CLIs
   let providerAuthBusy = "";
+  let providerDetailsOpen = "";
   let providerAuthNote = "";
   let providerAuthError = "";
   let providerInventoryRefreshing = false;
@@ -11337,7 +11363,6 @@
       const item = providers[id] || { id, label: id === "claude" ? "Claude Code" : "Codex", enabled:true, installed:false, connected:false, detail:"Checking connection…", busy:false, authLoaded:false };
       const authLoaded = item.authLoaded === true;
       const busy = providerAuthBusy === id || item.busy;
-      const state = !item.enabled ? "disabled" : busy ? "busy" : item.connected ? "connected" : "";
       const requirement = item.requirement || (id === "claude" ? "Claude subscription required" : "ChatGPT subscription required");
       const status = !item.enabled
         ? `${item.connected ? `${item.detail} · ` : ""}Disabled for Tasks`
@@ -11349,15 +11374,16 @@
       const integrations = item.integrations && typeof item.integrations === "object" ? item.integrations : {};
       const mcpServers = Array.isArray(integrations.mcpServers) ? integrations.mcpServers : [];
       const apps = Array.isArray(integrations.apps) ? integrations.apps : [];
+      const totalConnections = mcpServers.length + apps.length;
       const integrationList = (label, values) => {
         if (!values.length) return "";
-        const preview = values.map((entry) => {
+        const list = values.map((entry) => {
           const name = typeof entry === "string" ? entry : entry && entry.name;
-          return `<span class="sv-integration-chip" title="${esc(name || "")}">${esc(name || "")}</span>`;
+          return `<li title="${esc(name || "")}">${esc(name || "")}</li>`;
         }).join("");
-        return `<div class="sv-integration-summary">
-          <div class="sv-integration-heading">${esc(values.length)} ${esc(label)}</div>
-          <div class="sv-integration-preview">${preview}</div>
+        return `<div class="sv-agent-provider-group">
+          <div class="sv-agent-provider-group-head"><span>${esc(label)}</span><span>${esc(values.length)}</span></div>
+          <ul class="sv-agent-provider-integrations">${list}</ul>
         </div>`;
       };
       const enableLabel = item.enabled ? "Disable" : "Enable";
@@ -11370,26 +11396,35 @@
             ? (id === "claude" ? "Use Claude subscription" : "Use ChatGPT subscription")
             : signInLabel;
       const connectDisabled = busy || !authLoaded || !item.installed || !item.enabled || item.connected;
+      const open = providerDetailsOpen === id;
+      const healthy = item.enabled && item.connected && !busy;
+      const logo = id === "claude" ? "claudeCodeMark.svg" : "codexMark.svg";
+      const countLabel = totalConnections === 1 ? "1 connection" : `${totalConnections} connections`;
+      const headerMeta = healthy ? countLabel : status;
+      const headerState = healthy
+        ? '<span class="sv-agent-provider-ready">Ready</span>'
+        : `<span class="sv-agent-provider-state">${esc(busy ? "Connecting" : item.enabled ? "Needs attention" : "Disabled")}</span>`;
+      const detailNote = healthy ? "" : `<div class="sv-agent-provider-note">${esc(requirement)}${status ? ` · ${esc(status)}` : ""}</div>`;
       return `<div class="sv-provider" data-provider-row="${id}">
-        <div class="sv-provider-top">
-          <span class="sv-provider-dot ${state}" aria-hidden="true"></span>
-          <span class="sv-provider-copy">
-            <span class="sv-provider-name">${esc(item.label)}</span>
-            <span class="sv-provider-status">${esc(requirement)}</span>
-            <span class="sv-provider-status">${esc(status)}</span>
-            ${integrationList(id === "claude" ? "MCPs and account connectors" : "local MCPs", mcpServers)}
-            ${integrationList("connected apps", apps)}
-          </span>
-        </div>
-        <div class="sv-provider-actions" data-stop="1">
-          <button class="sv-provider-btn primary" type="button" data-provider-connect="${id}" ${connectDisabled ? "disabled" : ""}>${esc(connectLabel)}</button>
-          <button class="sv-provider-btn" type="button" data-provider-enable="${id}" data-enabled="${item.enabled ? "1" : "0"}" ${busy || !authLoaded ? "disabled" : ""}>${enableLabel}</button>
-        </div>
+        <button class="sv-agent-provider-toggle" type="button" data-provider-details="${id}" aria-expanded="${open ? "true" : "false"}" aria-controls="svProviderDetail-${id}">
+          <img class="sv-agent-provider-logo" src="${logo}" alt="" />
+          <span class="sv-agent-provider-summary"><span class="sv-provider-name">${esc(item.label)}</span><span class="sv-agent-provider-count">${esc(headerMeta)}</span></span>
+          ${headerState}
+          <svg class="sv-agent-provider-chev" width="12" height="7" viewBox="0 0 12 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.5 1.5L6 5.5L10.5 1.5"/></svg>
+        </button>
+        <div class="sv-agent-provider-detail${open ? " open" : ""}" id="svProviderDetail-${id}"><div class="sv-agent-provider-detail-inner"><div class="sv-agent-provider-detail-body">
+          ${detailNote}
+          ${integrationList(id === "claude" ? "MCPs and account connectors" : "Local MCPs", mcpServers)}
+          ${integrationList("Connected apps", apps)}
+          <div class="sv-agent-provider-actions">
+            ${item.connected ? "" : `<button class="sv-provider-btn primary" type="button" data-provider-connect="${id}" ${connectDisabled ? "disabled" : ""}>${esc(connectLabel)}</button>`}
+            <button class="sv-provider-btn" type="button" data-provider-enable="${id}" data-enabled="${item.enabled ? "1" : "0"}" ${busy || !authLoaded ? "disabled" : ""}>${enableLabel}</button>
+          </div>
+        </div></div></div>
       </div>`;
     }).join("");
     return `<section class="sv-provider-section" data-stop="1">
       <div class="sv-open-title">Connections</div>
-      <div class="sv-open-intro">Relay uses each app's local profile. Your credentials stay with the app.</div>
       <div class="sv-provider-list sv-agent-provider-list">${rows}</div>
       <div class="sv-hint${providerInventoryRefreshing || providerInventoryStale || providerInventoryError ? "" : " hidden"}" id="svProviderInventoryState">${esc(providerInventoryStateText())}</div>
       ${providerAuthNote ? `<div class="sv-note">${esc(providerAuthNote)}</div>` : ""}
@@ -11810,6 +11845,19 @@
     for (const button of settingsViewEl.querySelectorAll("[data-provider-connect]")) {
       button.addEventListener("click", () => connectProviderFromSettings(button.getAttribute("data-provider-connect")));
     }
+    for (const button of settingsViewEl.querySelectorAll("[data-provider-details]")) {
+      button.addEventListener("click", () => {
+        const provider = button.getAttribute("data-provider-details");
+        const willOpen = button.getAttribute("aria-expanded") !== "true";
+        providerDetailsOpen = willOpen ? provider : "";
+        for (const other of settingsViewEl.querySelectorAll("[data-provider-details]")) {
+          const open = willOpen && other === button;
+          other.setAttribute("aria-expanded", open ? "true" : "false");
+          const detail = document.getElementById(other.getAttribute("aria-controls"));
+          if (detail) detail.classList.toggle("open", open);
+        }
+      });
+    }
     for (const button of settingsViewEl.querySelectorAll("[data-provider-enable]")) {
       button.addEventListener("click", () => setProviderEnabledFromSettings(
         button.getAttribute("data-provider-enable"),

package/overlay/main.cjs

@@ -5161,8 +5161,12 @@ async function sendPreviewReply(input, entry) {
   }
 }
 
+function isTaggedAgentWorkRow(row) {
+  return Boolean(row?.source?.host === "relay-agent-run" && row?.source?.agentSessionId);
+}
+
 function agentWorkEnabledForRow(row) {
-  if (row?.source?.host === "relay-agent-run" && row?.source?.agentSessionId) return PRODUCT_FEATURES.requests === true;
+  if (isTaggedAgentWorkRow(row)) return PRODUCT_FEATURES.requests === true;
   if (row?.relayNotificationKind === "task") return PRODUCT_FEATURES.requests === true;
   if (row?.relayNotificationKind === "plain_relay") return PRODUCT_FEATURES.relayWork === true;
   return false;
@@ -6149,7 +6153,8 @@ async function previewTaskSession(relayId) {
   const id = String(relayId || "");
   const row = rowById(id);
   const isRequest = row?.relayNotificationKind === "task";
-  const isLocalWork = row?.relayNotificationKind === "plain_relay" && Boolean(row?.workStartedAt);
+  const isLocalWork = (row?.relayNotificationKind === "plain_relay" && Boolean(row?.workStartedAt))
+    || isTaggedAgentWorkRow(row);
   if (!row || (!isRequest && !isLocalWork)) return { ok: false, error: "No local agent work exists for this Relay." };
   if (!agentWorkEnabledForRow(row)) return agentWorkUnavailable();
   const claudePath = row.claudeNativeSession && row.claudeNativeSession.sessionPath;
@@ -6497,7 +6502,13 @@ async function previewTaskSteer(input) {
   if (body.length > 20000) return { ok: false, error: "That is too long to send." };
   const row = rowById(id);
   const isRequest = row?.relayNotificationKind === "task";
-  const isLocalWork = row?.relayNotificationKind === "plain_relay" && Boolean(row?.workStartedAt);
+  // @Claude/@Codex Work rows are server-authored plain chat responses. Their
+  // durable session identity lives in source.agentSessionId, not in the
+  // legacy workStartedAt field used by recipient-started ordinary Relay Work.
+  // Treating only the legacy shape as Work lets the transcript render but
+  // rejects every same-session follow-up before it reaches the session API.
+  const isLocalWork = (row?.relayNotificationKind === "plain_relay" && Boolean(row?.workStartedAt))
+    || isTaggedAgentWorkRow(row);
   if (!row || (!isRequest && !isLocalWork)) return { ok: false, error: "No local agent work exists for this Relay." };
   if (!agentWorkEnabledForRow(row)) return agentWorkUnavailable();
   if (row.source?.host === "relay-agent-run") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-companion",
-  "version": "0.1.396",
+  "version": "0.1.398",
   "description": "Install Relay for Claude Code, Cowork, and Codex, then sign in from the Relay pill.",
   "homepage": "https://sendrelays.com/get-started",
   "repository": {

package/src/task-daemon.js

@@ -92,6 +92,9 @@ function freshPlainRelays(ledger, items) {
       !seen ||
       seen.updatedAt !== item.updatedAt ||
       seen.state !== item.state ||
+      (seen.taskStartedAt || "") !== (item.taskStartedAt || "") ||
+      (seen.taskCompletedAt || "") !== (item.taskCompletedAt || "") ||
+      (seen.taskRunOwner || "null") !== JSON.stringify(item.taskRunOwner || null) ||
       (seen.restoredAt || "") !== (item.restoredAt || "")
     );
   });
@@ -104,6 +107,14 @@ function markPlainRelaysProcessed(ledger, items) {
     ledger.plainRelays[item.relayId] = {
       state: item.state,
       updatedAt: item.updatedAt || item.createdAt || "",
+      // Task lifecycle receipts are projected independently of the Relay row.
+      // Starting or completing a Task deliberately does not edit the original
+      // Relay's updatedAt, so these fields must participate in the daemon's
+      // generation key or the pill keeps rendering its initially staged
+      // "Waiting on you" copy forever.
+      taskStartedAt: item.taskStartedAt || "",
+      taskCompletedAt: item.taskCompletedAt || "",
+      taskRunOwner: JSON.stringify(item.taskRunOwner || null),
       restoredAt: item.restoredAt || "",
       processedAt,
     };