relay-companion 0.1.87 → 0.1.89

package/overlay/inbox.html

@@ -504,7 +504,30 @@
   .cv-chev { flex:0 0 auto; display:flex; align-items:center; }
   .cv-empty { padding:34px 16px; text-align:center; color:var(--muted-2); font-size:12.5px; line-height:1.5; }
   /* ---- contact groups (rosters) ---- */
-  .cvg { border-top:1px solid var(--hair-2); padding-bottom:10px; }
+  /* Groups sits ABOVE the people list: a long contact list used to bury it
+     entirely (you had to scroll past every contact to discover groups exist).
+     Small set first, long list second. */
+  .cvg { padding-bottom:6px; }
+  /* Segmented island: an inset track with the selected segment lifted out of it —
+     depth from light, not borders, matching the open-actions menu. */
+  .cv-seg {
+    display:inline-flex; gap:2px; padding:2px; border-radius:9px;
+    background:rgba(31,26,23,.045);
+  }
+  .cv-seg-btn {
+    appearance:none; border:0; background:transparent; cursor:pointer;
+    font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:-0.01em;
+    color:var(--muted-2); height:22px; padding:0 9px; border-radius:7px;
+    display:inline-flex; align-items:center; gap:5px;
+    transition:background-color .15s var(--settle), color .15s var(--settle), box-shadow .15s var(--settle);
+  }
+  .cv-seg-btn:hover { color:var(--ink-2); }
+  .cv-seg-btn.active {
+    background:#fff; color:var(--ink); font-weight:600;
+    box-shadow:0 1px 2px rgba(31,26,23,.09), 0 0 0 0.5px rgba(31,26,23,.05);
+  }
+  .cv-seg-n { font-size:9.5px; font-variant-numeric:tabular-nums; opacity:.55; }
+  .cv-seg-btn.active .cv-seg-n { opacity:.65; }
   .cvg-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 6px; }
   .cvg-newform { display:flex; gap:7px; padding:6px 16px 10px; align-items:center; }
   .cvg-newform.hidden { display:none; }
@@ -824,8 +847,16 @@
       <!-- Contacts view -->
       <section class="view hidden" id="contactsView">
         <div class="cv-head">
-          <span class="cv-title">People you relay with.</span>
+          <!-- One island, two lists. Groups used to sit below every contact, so a
+               long book hid them completely; stacking them the other way would just
+               bury people instead. A segment switches the pane and keeps both a
+               single tap away, with counts so neither looks empty when it isn't. -->
+          <div class="cv-seg" role="tablist" aria-label="Contacts and groups">
+            <button class="cv-seg-btn active" type="button" role="tab" data-pane="people" id="cvSegPeople">People <span class="cv-seg-n" id="cvSegPeopleN"></span></button>
+            <button class="cv-seg-btn" type="button" role="tab" data-pane="groups" id="cvSegGroups">Groups <span class="cv-seg-n" id="cvSegGroupsN"></span></button>
+          </div>
           <button class="cv-add" type="button" id="cvAdd">+ Add</button>
+          <button class="cv-add gone" type="button" id="cvgNew">+ New</button>
         </div>
         <form class="cv-form hidden" id="cvForm">
           <div class="cv-row2">
@@ -848,16 +879,9 @@
             <button class="cv-save" type="submit" id="cvSave">Save</button>
           </div>
         </form>
-        <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>
-
         <!-- Contact groups: saved rosters. A relay to a group fans out to every
              member under ONE shared thread; replies reach everyone. -->
         <div class="cvg" id="cvGroups">
-          <div class="cvg-head">
-            <span class="cv-title">Groups</span>
-            <button class="cv-add" type="button" id="cvgNew">+ New group</button>
-          </div>
           <form class="cvg-newform hidden" id="cvgNewForm">
             <input class="cv-input" id="cvgNewName" placeholder="Group name" autocomplete="off" spellcheck="false" />
             <button class="cv-save" type="submit">Create</button>
@@ -867,6 +891,9 @@
           <div id="cvgList"></div>
           <div class="cv-empty" id="cvgEmpty">No groups yet. A group relays to everyone in it as one conversation.</div>
         </div>
+        <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>
 
       <!-- Settings view (account card + sign-out / switch-account; rendered by JS) -->
@@ -2440,7 +2467,8 @@
   }
   function contactKey(c) { return c.id || (contactEmails(c)[0] || "") || c.name; }
   function renderContacts() {
-    contactsEmptyEl.classList.toggle("gone", contactsList.length > 0);
+    contactsEmptyEl.classList.toggle("gone", contactsPane !== "people" || contactsList.length > 0);
+    refreshPaneCounts();
     cvListEl.innerHTML = contactsList.map((c) => {
       const emails = contactEmails(c);
       const primary = emails[0] || "";
@@ -2475,6 +2503,35 @@
   const cvgNewFormEl = document.getElementById("cvgNewForm");
   const cvgNewNameEl = document.getElementById("cvgNewName");
   const cvgNewCancelEl = document.getElementById("cvgNewCancel");
+  // ---- contacts / groups pane (the segmented island in the head) ----
+  const cvSegPeopleEl = document.getElementById("cvSegPeople");
+  const cvSegGroupsEl = document.getElementById("cvSegGroups");
+  const cvSegPeopleNEl = document.getElementById("cvSegPeopleN");
+  const cvSegGroupsNEl = document.getElementById("cvSegGroupsN");
+  const cvGroupsEl = document.getElementById("cvGroups");
+  let contactsPane = "people";
+  function applyContactsPane() {
+    const people = contactsPane === "people";
+    cvSegPeopleEl.classList.toggle("active", people);
+    cvSegGroupsEl.classList.toggle("active", !people);
+    cvSegPeopleEl.setAttribute("aria-selected", String(people));
+    cvSegGroupsEl.setAttribute("aria-selected", String(!people));
+    cvListEl.classList.toggle("gone", !people);
+    contactsEmptyEl.classList.toggle("gone", !people || contactsList.length > 0);
+    cvGroupsEl.classList.toggle("gone", people);
+    // The add button follows the pane it belongs to.
+    cvAddEl.classList.toggle("gone", !people);
+    cvgNewEl.classList.toggle("gone", people);
+    if (people) cvgNewFormEl.classList.add("hidden");
+    else cvFormEl.classList.add("hidden");
+  }
+  function refreshPaneCounts() {
+    cvSegPeopleNEl.textContent = contactsList.length ? String(contactsList.length) : "";
+    cvSegGroupsNEl.textContent = groupsList.length ? String(groupsList.length) : "";
+  }
+  cvSegPeopleEl.addEventListener("click", () => { contactsPane = "people"; applyContactsPane(); });
+  cvSegGroupsEl.addEventListener("click", () => { contactsPane = "groups"; applyContactsPane(); loadGroups(); });
+
   const cvgListEl = document.getElementById("cvgList");
   const cvgEmptyEl = document.getElementById("cvgEmpty");
   const cvgErrorEl = document.getElementById("cvgError");
@@ -2515,6 +2572,7 @@
   }
   function renderGroups() {
     cvgEmptyEl.classList.toggle("gone", groupsList.length > 0);
+    refreshPaneCounts();
     cvgListEl.innerHTML = groupsList.map((g) => {
       const open = g.id === cvgExpandedId;
       const count = Number(g.memberCount ?? (g.members || []).length) || 0;
@@ -3195,7 +3253,9 @@
       taskDetailTimer = null;
     }
     if (activeView === "contacts") {
+      applyContactsPane();
       loadContacts();
+      loadGroups(); // counts on the segment must be right before it is tapped
     } else {
       cvFormEl.classList.add("hidden");
       if (window.relay.setFocusable) window.relay.setFocusable(false);

package/package.json

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

package/src/install.js

@@ -943,6 +943,14 @@ ${pillArgs.map((argument) => `    <string>${plistEscape(argument)}</string>`).jo
   </array>
   <key>RunAtLoad</key><true/>
   <key>KeepAlive</key><true/>
+  <!-- The pill draws a window the user clicks, so it must be scheduled like an
+       app, not like batch work. Without ProcessType, launchd treats an agent as
+       ordinary background work: under load macOS starves it, and the field
+       symptom is a visible pill whose clicks and animation freeze for seconds
+       while it burns no CPU and runs no JavaScript. Interactive opts out of that
+       throttling; LowPriorityIO off keeps its disk reads from being deferred. -->
+  <key>ProcessType</key><string>Interactive</string>
+  <key>LowPriorityIO</key><false/>
   <key>StandardOutPath</key><string>${plistEscape(logPath)}</string>
   <key>StandardErrorPath</key><string>${plistEscape(logPath)}</string>
   <key>EnvironmentVariables</key>