@nanocollective/roster 0.1.0-alpha.33 → 0.1.0-alpha.35

package/package.json

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

package/templates/portal/css/inbox.css

@@ -57,9 +57,18 @@
 /* A bottom margin here would collapse against the row's own 16px and change nothing, so the
    extra room is put on the row. General sibling, not adjacent: labels can sit between them. */
 .tconflict ~ .tacts{margin-top:24px}
-.tlabels{margin-top:10px}
-.cmt{border-top:1px solid var(--line);padding:16px 0}
-.cmt.first{border-top:0}
+.tmetalabels{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle;font-family:var(--sans)}
+/* A comment is a card with a header strip, so each message has a clear start and end. */
+.cmt{border:1px solid var(--line);border-radius:var(--r-lg);margin:14px 0;background:var(--panel);overflow:hidden}
+.cmt.human{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
+.chead{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--panel-2);
+       border-bottom:1px solid var(--line);font:13px var(--sans);color:var(--ink-dim)}
+.cmt.human .chead{background:color-mix(in srgb,var(--accent) 8%,var(--panel-2))}
+.chead .ic{--ic:14px;color:var(--ink-faint)}
+.chead b{color:var(--ink);font-weight:600}
+.chead .clogin{font:11.5px var(--mono);color:var(--ink-faint)}
+.chead .cwhen{margin-left:auto;font-size:12px;color:var(--ink-faint);white-space:nowrap}
+.cbodywrap{padding:12px 16px 14px}
 /* The header already draws a line under itself. Whatever the reversed thread puts first must
    not draw a second one right under it. */
 .lead{border-top:0}
@@ -138,7 +147,8 @@ textarea.dropping{border-color:var(--accent);background:color-mix(in srgb,var(--
 /* ---------- timeline events ----------
    Not comments, so not comment-shaped: a marker, a line of prose, and whatever it points at.
    These carry the half of a thread that is agents referring to each other's work. */
-.tev{display:flex;gap:10px;align-items:flex-start;padding:9px 0 9px 2px;
+.tev{display:flex;gap:10px;align-items:flex-start;padding:6px 0 6px 12px;margin-left:18px;
+     border-left:2px solid var(--line);
      font:12.5px/1.5 var(--sans);color:var(--ink-dim)}
 .tev .tico{flex:none;display:inline-flex;align-items:center;justify-content:center;
      width:16px;height:19px;color:var(--ink-faint);--ic:14px}

package/templates/portal/js/views/inbox.js

@@ -3,7 +3,7 @@
 import { getLabels, getPr, getThread, post, upload } from "../api.js";
 import { askText, askYes } from "../dialog.js";
 import { ago, el, esc, markCurrent, skeleton } from "../dom.js";
-import { icon, iconHTML } from "../icons.js";
+import { icon, iconHTML, staffIcon } from "../icons.js";
 import { mdlite } from "../md.js";
 import { attachMentions } from "../mention.js";
 import { ensureInbox, refreshAll, stampCounts } from "../refresh.js";
@@ -365,17 +365,20 @@ function inboxScreen(m, opts) {
     head.innerHTML =
       '<div class="meta">' + esc(item.repo) + " · " + (item.kind === "pr" ? "PR " : "") + "#" + item.number +
         ' · <span class="' + (item.state === "OPEN" ? "ok" : "") + '">' + esc(item.state) + "</span>" +
-        " · " + esc(item.author) + " · " + ago(item.updatedAt) + "</div>" +
+        " · " + esc(item.author) + " · " + ago(item.updatedAt) +
+        // The labels sit on this line, after the time, rather than taking a line of their own.
+        (item.labels.length
+          ? '<span class="tmetalabels">' +
+            item.labels.map((l) => '<span class="chip ' + tone(l) + '">' + esc(l) + "</span>").join("") +
+            "</span>"
+          : "") +
+        "</div>" +
       "<h3>" + esc(item.title) + "</h3>" +
       (item.mergeable === "CONFLICTING"
         ? '<p class="tconflict">This branch conflicts with its base and cannot be merged ' +
           "until someone rebases or merges the base into it.</p>"
         : "") +
-      (item.labels.length
-        ? '<div class="row tlabels">' +
-          item.labels.map((l) => '<span class="chip ' + tone(l) + '">' + esc(l) + "</span>").join("") +
-          "</div>"
-        : "");
+      "";
     head.append(threadActions(item));
     delete viewer.dataset.wait;
     viewer.replaceChildren(head);
@@ -1047,15 +1050,36 @@ function xref(source, item, openThread) {
   return b;
 }
 
+/* Who wrote something, as a person would say it: a staff member by their role, with their
+   icon; one of the humans by name; anyone else by their login. */
+function whoWrote(login) {
+  const s = (S.data?.staff ?? []).find((x) => (x.soloBots ?? []).includes(login));
+  if (s) return { name: s.name, glyph: staffIcon(s), kind: "staff" };
+  if (isHuman(login)) {
+    const h = humansOf().find((x) => x.github === login);
+    return { name: h?.name ?? login, glyph: "person", kind: "human" };
+  }
+  return { name: login || "?", glyph: "person", kind: "other" };
+}
+
+/* A comment is a card: a header strip saying who and when, then what they said. As text
+   between thin rules, it was hard to see where one message ended and the next began. */
 function comment({ author, when, body, first, repo, badge, reactions }) {
-  const d = el("div", { className: "cmt" + (first ? " first" : "") });
-  const meta = el("div", { className: "meta" });
-  meta.append((author || "?") + " · " + new Date(when).toLocaleString());
-  if (badge) meta.append(el("span", { className: "pill", style: "margin-left:8px", textContent: badge }));
-  d.append(meta);
-  d.append(el("div", { className: "md cbody", innerHTML: mdlite(body || "_no description_", { repo }) }));
+  const who = whoWrote(author);
+  const d = el("div", { className: "cmt " + who.kind + (first ? " first" : "") });
+  const head = el("div", { className: "chead" });
+  head.append(icon(who.glyph, "ic"), el("b", { textContent: who.name }));
+  if (who.name !== author && author) head.append(el("span", { className: "clogin", textContent: author }));
+  if (badge) head.append(el("span", { className: "pill", textContent: badge }));
+  head.append(
+    el("span", { className: "cwhen", title: new Date(when).toLocaleString(), textContent: ago(when) }),
+  );
+  d.append(head);
+  const bodyEl = el("div", { className: "cbodywrap" });
+  bodyEl.append(el("div", { className: "md cbody", innerHTML: mdlite(body || "_no description_", { repo }) }));
   const marks = reactionRow(reactions);
-  if (marks) d.append(marks);
+  if (marks) bodyEl.append(marks);
+  d.append(bodyEl);
   return d;
 }