@nanocollective/roster 0.1.0-alpha.45 → 0.1.0-alpha.47

package/docs/portal.md

@@ -95,13 +95,18 @@ Where the portal opens. An Ask box at the top, then these, in order.
   - a pull request has **Merge**, unless its checks fail, are still running, or it conflicts.
 
   Answers go out as you, with the staff member's `@handle`, so they act on them straight away.
-  When nothing is waiting, it says so.
+  Once you have had the last word, the card leaves Needs you for Your requests, since it is
+  waiting on them now. If they reply, it comes back. When nothing is waiting, it says so.
+- **Unread.** Anything on a staff member's own tracker, or elsewhere, with activity you have not
+  seen: a peer's ask, a status issue, their own work. Unread comes from your GitHub
+  notifications, as on Trackers. Cards and rows anywhere on Home carry the same blue mark, and
+  opening one marks it read here and on GitHub.
 - **Working now.** Each staff member: what they are running and what started it (the daily run,
   a follow-on, answering an issue, a peer's ask), for how long, with a link to the log. When
   they are idle, how their last run ended. Peer and follow-on runs today are counted against
   `max_runs_per_day`. This asks GitHub every few seconds while a run is going and every half
   minute otherwise, and only while Home is on screen.
-- **Your requests.** What you asked for: waiting, being worked on (a run for it is going), or
+- **Your requests.** What you asked for, and asks of theirs you have answered: waiting, being worked on (a run for it is going), or
   answered (a staff member had the last word).
 - **Closed today.** What the staff closed today, with the line they closed it with, and
   **Reopen** beside each. Staff close finished issues themselves, so this is where you check.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanocollective/roster",
-  "version": "0.1.0-alpha.45",
+  "version": "0.1.0-alpha.47",
   "description": "An agent-run org, powered by GitHub. Scaffold AI staff members whose brain is a repo.",
   "type": "module",
   "bin": {

package/templates/portal/css/base.css

@@ -283,6 +283,10 @@ dialog.sheet{border:1px solid var(--border-strong);border-radius:var(--r-lg);bac
       color:var(--ink);padding:0;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);
       box-shadow:var(--shadow-lg)}
 dialog.sheet[open]{animation:dlgin .18s var(--ease)}
+/* Pinned to the window. The graph's own `.sheet` panel is position:absolute, and that rule
+   reached this dialog too, so one opened on a scrolled page sat at the top of the document,
+   half off the screen. */
+dialog.sheet{position:fixed}
 dialog.sheet::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
 .sheetbody{padding:22px 24px 26px;overflow:auto;max-height:calc(100vh - 50px)}
 
@@ -295,6 +299,12 @@ dialog.sheet.side .sheetbody{max-height:100vh;height:100%;box-sizing:border-box;
 @media (prefers-reduced-motion:reduce){dialog.sheet.side[open]{animation:none}}
 .sidebar-x{position:sticky;top:0;display:flex;justify-content:flex-end;margin:-6px -6px 4px;z-index:1}
 dialog.sheet.side .viewer{border:0;box-shadow:none;padding:0;min-height:0;background:none}
+/* The title and its actions stay in view while a long thread scrolls under them. The close
+   button floats over the header's right edge, so the header leaves room for it. */
+dialog.sheet.side .thead{position:sticky;top:-18px;z-index:1;background:var(--bg);
+      padding-top:18px;margin-top:-18px;padding-right:44px}
+dialog.sheet.side .sidebar-x{position:sticky;top:0;height:0;margin:0;z-index:2;overflow:visible}
+dialog.sheet.side .sidebar-x .iconbtn{margin-top:-4px}
 .sheettitle{margin:0 0 14px;font:600 18px var(--sans);letter-spacing:-.02em}
 .sheetloading{display:grid;place-items:center;min-height:260px}
 .spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);

package/templates/portal/css/home.css

@@ -1,6 +1,9 @@
 /* Home: what needs you, who is working, your requests, closed today. */
 
 .home{max-width:820px}
+/* Secondary text on Home is read, not scanned for numbers: the readable face and colour, not
+   the faint monospace the rest of the portal uses for metadata. */
+.home .meta{font:12.5px/1.5 var(--sans);color:var(--ink-dim)}
 .home h2{font:600 13px var(--sans);color:var(--ink-dim);text-transform:none;letter-spacing:0;
          margin:26px 0 10px;display:flex;align-items:center;gap:8px}
 .home h2 .pill{font-size:10.5px}
@@ -59,13 +62,26 @@
 
 .homerow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 2px;
          border-bottom:1px solid var(--line);font-size:13px}
-.homerow .homeopen{font-weight:500;font-size:13px}
+.homerow .homeopen{font-weight:500;font-size:13.5px}
+.homelist{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:4px 12px}
+.homelist > .chip{margin-top:2px}
+.homelist .meta{margin-top:3px}
 .homeclick{cursor:pointer;border-radius:8px;padding-left:8px;padding-right:8px;margin:0 -8px}
 .homeclick:hover{background:var(--hover)}
 .homeclick:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
 .homeclosed{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px}
-.homeclosed .meta{margin-top:3px;line-height:1.5;font-family:var(--sans);font-size:12px}
+.homeclosed .meta{margin-top:3px}
 .homerest{margin-top:26px}
+.homecard.gone,.homerow.gone{opacity:0;transform:translateX(12px);
+         transition:opacity .2s var(--ease),transform .2s var(--ease)}
+
+/* Activity you have not seen, as Trackers marks it: a blue edge and a bold title. Opening the
+   thread marks it read, here and on GitHub. */
+.homecard.unread{box-shadow:inset 3px 0 0 var(--blue)}
+.homerow.unread{box-shadow:inset 3px 0 0 var(--blue);background:color-mix(in srgb,var(--blue) 6%,transparent)}
+.unread .homeopen{font-weight:700}
+.unread .homeopen::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
+         background:var(--blue);margin:0 7px 1px 0;vertical-align:middle}
 
 .homereports{display:flex;flex-direction:column;gap:14px;padding:14px 16px}
 .homereport{display:grid;grid-template-columns:190px 1fr;gap:12px;font-size:13px;line-height:1.5}

package/templates/portal/js/homesort.js

@@ -7,6 +7,10 @@
  *   staff      a staff member's own work: their status issue, a peer's ask, their own issues
  *   elsewhere  draft pull requests, and product or ops issues nobody has put on a person
  *
+ * `unread` is not a place: it lists what in `staff` and `elsewhere` has activity you have not
+ * seen (from your GitHub notifications), since those two are otherwise off Home. Items in the
+ * other places carry their own unread mark.
+ *
  * Closed items only matter when a staff member closed them today: that is "Closed today", with
  * Reopen beside each, because staff now close things without asking. */
 
@@ -45,7 +49,15 @@ export function sortHome(items, staff, humans, live = [], now = new Date()) {
     for (const r of l.running ?? []) if (s && r.issue) working.add(`${s.brain}#${r.issue}`);
   }
 
-  const out = { reports: [], needs: [], requests: [], staff: [], elsewhere: [], closedToday: [] };
+  const out = {
+    reports: [],
+    needs: [],
+    requests: [],
+    staff: [],
+    elsewhere: [],
+    unread: [],
+    closedToday: [],
+  };
   const today = dayOf(now);
 
   for (const item of items) {
@@ -92,6 +104,9 @@ export function sortHome(items, staff, humans, live = [], now = new Date()) {
   out.needs.sort(oldest);
   out.requests.sort((a, b) => b.item.updatedAt.localeCompare(a.item.updatedAt));
   out.closedToday.sort((a, b) => b.item.closedAt.localeCompare(a.item.closedAt));
+  out.unread = [...out.staff, ...out.elsewhere]
+    .filter((e) => e.item.unread)
+    .sort((a, b) => b.item.updatedAt.localeCompare(a.item.updatedAt));
   return out;
 }
 
@@ -106,17 +121,22 @@ export function placeOf(item, owner, people, markers) {
     (item.assignees ?? []).some((a) => people.has(lower(a))) ||
     labels.some((l) => markers.has(l));
   const byPerson = people.has(lower(item.author));
+  /* You had the last word on an ask: approved it, answered it, said go with the default. It is
+     waiting on them now, so it is one of your requests until they reply or close it. If they
+     reply, the last word is theirs and it is back on you. */
+  const youAnswered = Boolean(item.lastComment) && people.has(lower(item.lastComment.author));
 
   if (!owner) {
-    return onPerson && !byPerson
-      ? { place: "needs", kind: kindOf(labels) }
-      : { place: "elsewhere", why: item.role === "product" ? "contributor" : "other" };
+    if (!onPerson || byPerson) {
+      return { place: "elsewhere", why: item.role === "product" ? "contributor" : "other" };
+    }
+    return youAnswered ? { place: "requests" } : { place: "needs", kind: kindOf(labels) };
   }
   if (item.number === owner.statusIssue || labels.includes("keep-open")) {
     return { place: "staff", why: "status" };
   }
   if (byPerson) return { place: "requests" };
-  if (onPerson) return { place: "needs", kind: kindOf(labels) };
+  if (onPerson) return youAnswered ? { place: "requests" } : { place: "needs", kind: kindOf(labels) };
   return {
     place: "staff",
     why: labels.some((l) => l.startsWith("from-")) ? "peer" : "own",

package/templates/portal/js/views/home.js

@@ -73,6 +73,11 @@ export function viewHome(m) {
   if (h.needs.length) for (const e of h.needs) page.append(needCard(e));
   else page.append(el("p", { className: "homeempty", textContent: "Nothing needs you." }));
 
+  if (h.unread.length) {
+    page.append(section("Unread", h.unread.length));
+    for (const e of h.unread) page.append(unreadRow(e));
+  }
+
   page.append(section("Working now"));
   page.append(working(staff));
 
@@ -147,7 +152,11 @@ function needCard(e) {
   const { item, kind } = e;
   /* The whole card opens the thread; the one quick action on it does not. Answering in words
      happens in the thread, where what was asked is in front of you. */
-  const card = el("div", { className: "card homecard", tabIndex: 0, role: "button" });
+  const card = el("div", {
+    className: "card homecard" + (item.unread ? " unread" : ""),
+    tabIndex: 0,
+    role: "button",
+  });
   card.onclick = (ev) => {
     if (!ev.target.closest("button, a, textarea")) openThread(item);
   };
@@ -237,6 +246,12 @@ async function act(note, actions, payload, ok) {
   try {
     await post(payload);
     note.textContent = ok;
+    // Done is done: the card goes now, rather than when GitHub next answers.
+    const card = actions.closest?.(".homecard, .homerow");
+    if (card) {
+      card.classList.add("gone");
+      setTimeout(() => card.remove(), 220);
+    }
     refreshSoon();
   } catch (err) {
     note.textContent = String(err.message || err);
@@ -329,6 +344,16 @@ function outcome(r) {
   return r.conclusion === "success" ? "finished" : r.conclusion === "failure" ? "failed" : (r.conclusion ?? "ended");
 }
 
+/**
+ * A timer that never keeps a process alive. In the browser this is setTimeout; under the
+ * tests' Node shim the polling loop would otherwise hold a test file open forever.
+ */
+function later(fn, ms) {
+  const t = setTimeout(fn, ms);
+  t?.unref?.();
+  return t;
+}
+
 function poll() {
   clearTimeout(timer);
   getLive()
@@ -342,7 +367,7 @@ function poll() {
     .finally(() => {
       if (S.view !== "home") return;
       const busy = (S.live?.staff ?? []).some((l) => l.running?.length);
-      timer = setTimeout(poll, busy ? FAST : SLOW);
+      timer = later(poll, busy ? FAST : SLOW);
     });
 }
 
@@ -350,17 +375,46 @@ function poll() {
 
 const STATUS = { waiting: "Waiting", working: "Being worked on", answered: "Answered" };
 
+const WHY = {
+  status: "Status",
+  peer: "Peer ask",
+  own: "Their work",
+  draft: "Draft",
+  contributor: "Issue",
+  other: "Issue",
+};
+
+/** Something on a staff member's tracker, or elsewhere, with activity you have not seen. */
+function unreadRow(e) {
+  return clickable(e.item, "homerow homelist", [
+    el("span", { className: "chip", textContent: WHY[e.why] ?? "Issue" }),
+    el("div", {}, [
+      openLink(e.item),
+      el("div", { className: "meta", textContent: whereOf(e) + " · " + ago(e.item.updatedAt) }),
+    ]),
+  ]);
+}
+
 function requestRow(e) {
-  return clickable(e.item, "homerow", [
-    el("span", { className: "chip " + (e.status === "answered" ? "cool" : e.status === "working" ? "warm" : ""), textContent: STATUS[e.status] }),
-    openLink(e.item),
-    el("span", { className: "meta", textContent: whereOf(e) + " · " + ago(e.item.updatedAt) }),
+  return clickable(e.item, "homerow homelist", [
+    el("span", {
+      className: "chip " + (e.status === "answered" ? "cool" : e.status === "working" ? "warm" : ""),
+      textContent: STATUS[e.status],
+    }),
+    el("div", {}, [
+      openLink(e.item),
+      el("div", { className: "meta", textContent: whereOf(e) + " · " + ago(e.item.updatedAt) }),
+    ]),
   ]);
 }
 
 /** A row that opens its thread from anywhere on it, except a button inside it. */
 function clickable(item, className, kids) {
-  const row = el("div", { className: className + " homeclick", tabIndex: 0, role: "button" }, kids);
+  const row = el(
+    "div",
+    { className: className + " homeclick" + (item.unread ? " unread" : ""), tabIndex: 0, role: "button" },
+    kids,
+  );
   row.onclick = (ev) => {
     if (!ev.target.closest("button, a")) openThread(item);
   };
@@ -460,5 +514,5 @@ function refreshSoon() {
   ensureInbox(true)
     .then(() => S.view === "home" && !document.querySelector("dialog[open]") && repaintInPlace())
     .catch(() => {});
-  setTimeout(poll, 3_000);
+  later(poll, 3_000);
 }