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

package/docs/portal.md

@@ -96,6 +96,10 @@ Where the portal opens. An Ask box at the top, then these, in order.
 
   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.
+- **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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanocollective/roster",
-  "version": "0.1.0-alpha.45",
+  "version": "0.1.0-alpha.46",
   "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

@@ -67,6 +67,14 @@
 .homeclosed .meta{margin-top:3px;line-height:1.5;font-family:var(--sans);font-size:12px}
 .homerest{margin-top:26px}
 
+/* 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}
 .homereport p{margin:0 0 3px;color:var(--ink-dim)}

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;
 }
 

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);
   };
@@ -350,6 +359,24 @@ 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", [
+    el("span", { className: "chip", textContent: WHY[e.why] ?? "Issue" }),
+    openLink(e.item),
+    el("span", { 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] }),
@@ -360,7 +387,11 @@ function requestRow(e) {
 
 /** 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);
   };