@nanocollective/roster 0.1.0-alpha.46 → 0.1.0-alpha.48

package/docs/portal.md

@@ -95,7 +95,8 @@ 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
@@ -105,7 +106,7 @@ Where the portal opens. An Ask box at the top, then these, in order.
   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.46",
+  "version": "0.1.0-alpha.48",
   "description": "An agent-run org, powered by GitHub. Scaffold AI staff members whose brain is a repo.",
   "type": "module",
   "bin": {

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}
@@ -37,7 +40,7 @@
 }
 
 .homeworking{display:flex;flex-direction:column;padding:4px 16px}
-.homerun{display:grid;grid-template-columns:minmax(150px,220px) auto 1fr auto;align-items:center;
+.homerun{display:grid;grid-template-columns:minmax(150px,220px) 84px 1fr auto;align-items:center;
          gap:12px;padding:12px 0;font-size:13.5px}
 .homerun + .homerun{border-top:1px solid var(--line)}
 .homewho2{display:inline-flex;align-items:center;gap:8px;min-width:0}
@@ -57,22 +60,16 @@
   .homerunwhat{grid-area:what}.homerunlog{grid-area:log}
 }
 
-.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}
-.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}
 .homerest{margin-top:26px}
+.homecard.gone,.homerun.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%;
+.homerun.unread{box-shadow:inset 3px 0 0 var(--blue);margin:0 -16px;padding-left:13px;padding-right:16px}
+.unread .homeopen,.unread .homerowtitle{font-weight:700}
+.unread .homeopen::before,.unread .homerowtitle::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}
@@ -85,3 +82,9 @@
 @media (max-width:640px){
   .homehead{flex-wrap:wrap}
 }
+
+/* Rows in the Working now card that open a thread. */
+.homerun.homeclick{cursor:pointer}
+.homerun.homeclick:hover .homerowtitle{color:var(--accent)}
+.homerun.homeclick:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
+.homerowtitle{font-weight:600;color:var(--ink)}

package/templates/portal/js/homesort.js

@@ -121,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

@@ -75,7 +75,7 @@ export function viewHome(m) {
 
   if (h.unread.length) {
     page.append(section("Unread", h.unread.length));
-    for (const e of h.unread) page.append(unreadRow(e));
+    page.append(listBox(h.unread.map(unreadRow)));
   }
 
   page.append(section("Working now"));
@@ -83,12 +83,12 @@ export function viewHome(m) {
 
   if (h.requests.length) {
     page.append(section("Your requests", h.requests.length));
-    for (const e of h.requests) page.append(requestRow(e));
+    page.append(listBox(h.requests.map(requestRow)));
   }
 
   if (h.closedToday.length) {
     page.append(section("Closed today", h.closedToday.length));
-    for (const e of h.closedToday) page.append(closedRow(e));
+    page.append(listBox(h.closedToday.map(closedRow)));
   }
 
   page.append(rest(h));
@@ -246,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, .homerun");
+    if (card) {
+      card.classList.add("gone");
+      setTimeout(() => card.remove(), 220);
+    }
     refreshSoon();
   } catch (err) {
     note.textContent = String(err.message || err);
@@ -338,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()
@@ -351,13 +367,50 @@ 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);
     });
 }
 
 /* ------------------------------ your requests ---------------------------- */
 
-const STATUS = { waiting: "Waiting", working: "Being worked on", answered: "Answered" };
+/** A card of rows, laid out like Working now. */
+function listBox(rows) {
+  return el("div", { className: "card homeworking" }, rows);
+}
+
+/**
+ * One row in the shape Working now uses: who, a status chip, the title with one line under it,
+ * and a button on the right. The whole row opens the thread, except the button.
+ */
+function listRow(e, { chip, tone = "", sub, action = null }) {
+  const s = e.staff;
+  const row = el(
+    "div",
+    { className: "homerun homeclick" + (e.item.unread ? " unread" : ""), tabIndex: 0, role: "button" },
+    [
+      el("span", { className: "homewho2" }, [
+        icon(s ? staffIcon(s) : "issue-open", "ic"),
+        el("b", { textContent: s?.name ?? (e.item.repo.split("/")[1] ?? e.item.repo) }),
+      ]),
+      el("span", { className: "chip homestate " + tone, textContent: chip }),
+      el("div", { className: "homerunwhat" }, [
+        el("div", { className: "homerowtitle", textContent: e.item.title }),
+        el("div", { className: "homerunsub", textContent: sub }),
+      ]),
+      el("div", { className: "homerunlog" }, action ? [action] : []),
+    ],
+  );
+  row.onclick = (ev) => {
+    if (!ev.target.closest("button, a")) openThread(e.item);
+  };
+  row.onkeydown = (ev) => {
+    if (ev.target === row && (ev.key === "Enter" || ev.key === " ")) {
+      ev.preventDefault();
+      openThread(e.item);
+    }
+  };
+  return row;
+}
 
 const WHY = {
   status: "Status",
@@ -370,51 +423,34 @@ const WHY = {
 
 /** Something on a staff member's tracker, or elsewhere, with activity you have not seen. */
 function unreadRow(e) {
-  return clickable(e.item, "homerow", [
-    el("span", { className: "chip", textContent: WHY[e.why] ?? "Issue" }),
-    openLink(e.item),
-    el("span", { className: "meta", textContent: whereOf(e) + " · " + ago(e.item.updatedAt) }),
-  ]);
+  return listRow(e, {
+    chip: WHY[e.why] ?? "Issue",
+    tone: "cool",
+    sub: `#${e.item.number} · ${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) }),
-  ]);
-}
+const STATUS = { waiting: "Waiting", working: "Working", answered: "Answered" };
 
-/** 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" + (item.unread ? " unread" : ""), tabIndex: 0, role: "button" },
-    kids,
-  );
-  row.onclick = (ev) => {
-    if (!ev.target.closest("button, a")) openThread(item);
-  };
-  row.onkeydown = (ev) => {
-    if (ev.target === row && (ev.key === "Enter" || ev.key === " ")) {
-      ev.preventDefault();
-      openThread(item);
-    }
-  };
-  return row;
+function requestRow(e) {
+  return listRow(e, {
+    chip: STATUS[e.status],
+    tone: e.status === "answered" ? "cool" : e.status === "working" ? "ok" : "",
+    sub: `#${e.item.number} · ${ago(e.item.updatedAt)}`,
+  });
 }
 
 function closedRow(e) {
   const note = el("span", { className: "meta" });
-  const reopen = button("Reopen", false, () => act(note, row, { action: "reopen", repo: e.item.repo, number: e.item.number }, "Reopened."));
-  const row = clickable(e.item, "homerow homeclosed", [
-    el("div", {}, [
-      openLink(e.item),
-      el("div", { className: "meta", textContent: whereOf(e) + " · " + (e.reason || "No reason given.") }),
-    ]),
-    el("div", { className: "row" }, [note, reopen]),
-  ]);
-  return row;
+  const reopen = button("Reopen", false, () =>
+    act(note, holder, { action: "reopen", repo: e.item.repo, number: e.item.number }, "Reopened."),
+  );
+  const holder = el("div", { className: "row" }, [note, reopen]);
+  return listRow(e, {
+    chip: "Closed",
+    sub: `#${e.item.number} · ${e.reason || "No reason given."}`,
+    action: holder,
+  });
 }
 
 /* --------------------------------- rest --------------------------------- */
@@ -491,5 +527,5 @@ function refreshSoon() {
   ensureInbox(true)
     .then(() => S.view === "home" && !document.querySelector("dialog[open]") && repaintInPlace())
     .catch(() => {});
-  setTimeout(poll, 3_000);
+  later(poll, 3_000);
 }