@nanocollective/roster 0.1.0-alpha.4 → 0.1.0-alpha.41

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

@@ -1,9 +1,9 @@
 /* The inbox: everything open across the org, and the thread beside it. */
 
 import { getLabels, getPr, getThread, post, upload } from "../api.js";
-import { askText } from "../dialog.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";
@@ -92,6 +92,10 @@ export function belongsTo(item, s) {
   return false;
 }
 
+/* Threads read so far, by repo#number, kept for the session. Each is reused while its
+   updatedAt matches the list's, so a thread is fetched again only when it has changed. */
+const THREADS = new Map();
+
 export const viewInbox = (m) => inboxScreen(m, {});
 
 /**
@@ -113,7 +117,7 @@ function inboxScreen(m, opts) {
     className: "sub",
     textContent: opts.prs
       ? "Work the staff have finished and cannot land themselves."
-      : "Everything open across the org.",
+      : "Everything open across the org. Pull requests are in Pending work.",
   });
   m.append(sub);
 
@@ -122,42 +126,25 @@ function inboxScreen(m, opts) {
     placeholder: "Filter by title, label, repo…",
     value: S.query,
   });
-  const scope = el("select");
-  scope.append(
-    el("option", { value: "", textContent: "Everything" }),
-    el("option", { value: "mine", textContent: "On " + humanLabel() }),
-    // Scoping pull requests to pull requests is not a filter, and a decision is not a PR.
-    ...(opts.prs
-      ? []
-      : [
-          el("option", { value: "decision", textContent: "Decisions" }),
-          el("option", { value: "pr", textContent: "Open work (PRs)" }),
-        ]),
-  );
-  scope.value = opts.prs && S.inboxFilter !== "mine" ? "" : S.inboxFilter;
-
-  /* Open only by default. An inbox is what is waiting on somebody, and burying that under
-     five months of finished work would be answering a different question. */
-  const state = el("select", { title: "Which items to list" });
-  state.append(
-    el("option", { value: "", textContent: "Open" }),
-    el("option", { value: "closed", textContent: "Recently closed" }),
-    el("option", { value: "all", textContent: "Open and closed" }),
-  );
-  state.value = S.inboxState;
-
-  const whose = el("select", {
-    title: "Whose work: their brain repo, anything their bot wrote, and anything addressed to them",
-  });
-  whose.append(
-    el("option", { value: "", textContent: "Everyone" }),
-    ...S.data.staff.map((s) => el("option", { value: s.handle, textContent: s.name })),
-  );
-  whose.value = S.inboxStaff;
+  /* Open or closed, as a toggle. Who and what (a staff member, what is on you, decisions)
+     moved to the sidebar under Inbox, where a row of dropdowns used to be. */
+  if (S.inboxState === "all") S.inboxState = "";
+  const toggle = el("div", { className: "modes inboxstate" });
+  for (const [value, label] of [["", "Open"], ["closed", "Closed"]]) {
+    const b = el("button", { className: "mode", textContent: label });
+    b.classList.toggle("on", (S.inboxState || "") === value);
+    b.onclick = () => {
+      S.inboxState = value;
+      for (const x of toggle.children) x.classList.toggle("on", x === b);
+      writeHash(false);
+      paint();
+    };
+    toggle.append(b);
+  }
 
   const refresh = el("button", { className: "iconbtn", title: "Refresh from GitHub" });
   refresh.innerHTML = '<span class="sync">' + iconHTML("refresh") + "</span>";
-  const controls = [search, whose, state, scope, refresh];
+  const controls = [search, toggle, refresh];
   // A pull request comes from a branch, so there is nothing here that could open one.
   if (!opts.prs) {
     const newBtn = el("button", { className: "ghbtn", textContent: "New issue" });
@@ -167,7 +154,7 @@ function inboxScreen(m, opts) {
     };
     controls.push(newBtn);
   }
-  m.append(el("div", { className: "row", style: "margin-bottom:16px" }, controls));
+  m.append(el("div", { className: "row inboxbar", style: "margin-bottom:16px" }, controls));
 
   const split = el("div", { className: "split" });
   const list = el("div", { className: "tree" });
@@ -176,9 +163,6 @@ function inboxScreen(m, opts) {
   m.append(split);
 
   search.oninput = () => { S.query = search.value; writeHash(false); paint(); };
-  scope.onchange = () => { S.inboxFilter = scope.value; writeHash(false); paint(); };
-  whose.onchange = () => { S.inboxStaff = whose.value; writeHash(false); paint(); };
-  state.onchange = () => { S.inboxState = state.value; writeHash(false); paint(); };
   refresh.onclick = () => { refresh.classList.add("spin"); load(true); };
 
   if (S.inbox) { stampCounts(); paint(); restore(); } else load(false);
@@ -187,9 +171,9 @@ function inboxScreen(m, opts) {
       acted on, because only the already-loaded branch opened one. */
   function restore() {
     if (!S.inboxOpen) return;
-    // The two screens share one open thread. An issue carried over from the inbox is not on
-    // this one, so it is dropped rather than opened beside a list it is not in.
-    if (opts.prs && S.inboxOpen.kind !== "pr") {
+    // The two screens share one open thread, and each holds half the org. Whatever was open on
+    // the other one is not in this list, so it is dropped rather than opened beside it.
+    if (!!opts.prs !== (S.inboxOpen.kind === "pr")) {
       S.inboxOpen = null;
       writeHash(false);
       return;
@@ -250,10 +234,23 @@ function inboxScreen(m, opts) {
     // "On you" is on any of the humans this org answers to, not only the first one.
     const onAHuman = (i) => (i.assignees ?? []).some(isHuman);
 
-    const whoseStaff = S.inboxStaff ? S.data.staff.find((s) => s.handle === S.inboxStaff) : null;
+    // The sidebar's filters are the inbox's. Pending work has no control for them, so it ignores them.
+    const staffPick = opts.prs ? "" : S.inboxStaff;
+    // "Issues" is the product repos: every repo a staff member works in.
+    const products = new Set(S.data.staff.flatMap((s) => s.worksIn ?? []));
+    const issuesOnly = staffPick === "@issues";
+    const unreadOnly = staffPick === "@unread";
+    const whoseStaff = staffPick && !issuesOnly ? S.data.staff.find((s) => s.handle === staffPick) : null;
+    /* The two screens partition the org rather than overlap on it. Pending work is every pull
+       request; the inbox is everything else. An inbox that also listed the PRs said the same
+       thing twice and made the badge beside it a number you could not act on. */
     const mine = S.inbox.items
-      .filter((i) => belongsTo(i, whoseStaff))
-      .filter((i) => !opts.prs || i.kind === "pr");
+      /* A staff member's link is their tracker: what is in their repo, whoever filed it. Matching
+         on who filed or was named put an issue the CMO filed for the CTO under both of them. */
+      .filter((i) =>
+        unreadOnly ? Boolean(i.unread) : issuesOnly ? products.has(i.repo) : !whoseStaff || i.repo === whoseStaff.brain,
+      )
+      .filter((i) => (i.kind === "pr") === !!opts.prs);
     const isOpen = (i) => i.state === "OPEN";
     const scoped = mine.filter(
       S.inboxState === "closed" ? (i) => !isOpen(i) : S.inboxState === "all" ? () => true : isOpen,
@@ -263,14 +260,20 @@ function inboxScreen(m, opts) {
       (i) => !q || (i.title + " " + i.repo + " " + i.labels.join(" ") + " #" + i.number)
         .toLowerCase().includes(q),
     );
-    if (S.inboxFilter === "mine") items = items.filter(onAHuman);
-    else if (S.inboxFilter === "decision") items = items.filter((i) => i.labels.includes("decision"));
-    else if (S.inboxFilter === "pr") items = items.filter((i) => i.kind === "pr");
+    const filter = opts.prs ? "" : S.inboxFilter;
+    if (filter === "mine") items = items.filter(onAHuman);
+    else if (filter === "decision") items = items.filter((i) => i.labels.includes("decision"));
+    /* `s=pr` was the inbox's "Open work (PRs)" scope, and Pending work is now that screen. An
+       old bookmark carrying it is ignored rather than honoured into an empty list. */
 
     const open = mine.filter(isOpen);
     const onYou = open.filter(onAHuman).length;
-    const prs = open.filter((i) => i.kind === "pr").length;
     const shut = mine.length - open.length;
+    /* Pending work owns the pull requests now, so this is a pointer to that screen rather than
+       a count of anything on this list. Scoped the same way, or the two would not add up. */
+    const prs = S.inbox.items.filter(
+      (i) => i.kind === "pr" && isOpen(i) && belongsTo(i, whoseStaff),
+    ).length;
     const where = whoseStaff
       ? " for <b>" + esc(whoseStaff.name) + "</b>"
       : " across " + (S.inbox.repos ?? []).length + " repos";
@@ -286,7 +289,7 @@ function inboxScreen(m, opts) {
             (failing ? " · " + failing + " failing" : "") +
             (S.inboxState === "all" ? " · " + shut + " closed or merged" : "")
           : open.length + " open" + where + " · <b>" + onYou + " on " +
-            esc(humanLabel()) + "</b> · " + prs + " waiting on a merge" +
+            esc(humanLabel()) + "</b> · " + prs + " in Pending work" +
             (S.inboxState === "all" ? " · " + shut + " closed" : "")) +
       (S.inbox.fetchedAt ? ' <span class="meta">· checked ' + ago(S.inbox.fetchedAt) + "</span>" : "");
 
@@ -295,9 +298,15 @@ function inboxScreen(m, opts) {
       list.append(el("div", { className: "tdir err", textContent: e }));
     }
 
-    // Newest first, flat. Grouping by repo buried a fresh comment under whichever project
-    // happened to sort first; the project moves onto the row instead.
-    items = items.slice().sort((a, b) => String(b.updatedAt).localeCompare(String(a.updatedAt)));
+    // Unread first, then newest first, flat. Grouping by repo buried a fresh comment under
+    // whichever project happened to sort first; the project moves onto the row instead.
+    items = items
+      .slice()
+      .sort(
+        (a, b) =>
+          Number(Boolean(b.unread)) - Number(Boolean(a.unread)) ||
+          String(b.updatedAt).localeCompare(String(a.updatedAt)),
+      );
     if (!items.length) {
       list.append(el("p", { className: "empty", textContent: "Nothing matches." }));
       return;
@@ -305,7 +314,7 @@ function inboxScreen(m, opts) {
 
     for (const i of items) {
       const shutState = i.state === "MERGED" ? "merged" : i.state === "OPEN" ? "" : "closed";
-      const b = el("button", { className: "irow" + (shutState ? " shut" : "") });
+      const b = el("button", { className: "irow" + (shutState ? " shut" : "") + (i.unread ? " unread" : "") });
       const yours = onAHuman(i);
       const chips = i.labels
         .slice(0, 3)
@@ -324,11 +333,17 @@ function inboxScreen(m, opts) {
           '<span class="num">' + (i.kind === "pr" ? "PR " : "") + "#" + i.number + "</span>" +
           (i.checks && i.checks !== "none"
             ? '<span class="ck ' + i.checks + '">' + checkGlyph(i.checks) + "</span>" : "") +
+          /* Green checks on a branch that no longer applies is the one case where the row
+             reads as ready and is not. It has to say so here, not three clicks in. */
+          (i.mergeable === "CONFLICTING"
+            ? '<span class="chip conflict" title="This branch conflicts with its base">' +
+              "conflicts</span>"
+            : "") +
           // How much conversation is on a thread, which is most of what tells a live one from
           // something that was filed and never answered.
-          (i.comments.length
-            ? '<span class="cc" title="' + i.comments.length + ' comments">' +
-              iconHTML("review") + i.comments.length + "</span>"
+          ((i.commentCount ?? i.comments.length)
+            ? '<span class="cc" title="' + (i.commentCount ?? i.comments.length) + ' comments">' +
+              iconHTML("review") + (i.commentCount ?? i.comments.length) + "</span>"
             : "") +
           chips +
           '<span class="when">' + ago(i.updatedAt) + "</span>" +
@@ -358,18 +373,63 @@ function inboxScreen(m, opts) {
     }
     const row = list.querySelector('[data-ref="' + item.repo + "#" + item.number + '"]');
     if (row) markCurrent(list, row);
+    // Opening it is reading it: cleared here at once, and on GitHub in the background.
+    if (item.unread) {
+      const thread = item.unread.thread;
+      item.unread = null;
+      row?.classList.remove("unread");
+      stampCounts();
+      post({ thread, ref: item.repo + "#" + item.number }, "/api/notifications/read").catch(() => {});
+    }
+
+    /* The list carries no bodies or timelines (carrying them cost most of an hour's GitHub
+       allowance per load), so a thread is read when it is opened, and kept until GitHub says
+       it has changed. Reopening one costs nothing. */
+    if (item.partial) {
+      const key = item.repo + "#" + item.number;
+      const kept = THREADS.get(key);
+      const keep = { role: item.role, unread: item.unread };
+      if (kept && kept.updatedAt === item.updatedAt) {
+        Object.assign(item, kept, keep, { partial: false });
+      } else {
+        viewer.dataset.want = key;
+        viewer.replaceChildren(...skeleton("head", 1), ...skeleton("line", 8));
+        getThread(item.repo, item.number, item.kind)
+          .then((fresh) => {
+            if (!fresh || fresh.error) throw new Error(fresh?.error ?? "could not read it");
+            THREADS.set(key, fresh);
+            Object.assign(item, fresh, keep, { partial: false });
+          })
+          .catch((e) => {
+            item.partial = false;
+            item.loadError = String(e.message || e);
+          })
+          .finally(() => {
+            // Somebody may have opened another thread while this one was loading.
+            if (viewer.dataset.want === key) openThread(ref);
+          });
+        return;
+      }
+    }
 
     const head = el("div", { className: "thead" });
     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.labels.length
-        ? '<div class="row tlabels">' +
-          item.labels.map((l) => '<span class="chip ' + tone(l) + '">' + esc(l) + "</span>").join("") +
-          "</div>"
-        : "");
+      (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>"
+        : "") +
+      "";
     head.append(threadActions(item));
     delete viewer.dataset.wait;
     viewer.replaceChildren(head);
@@ -380,6 +440,11 @@ function inboxScreen(m, opts) {
        for a wrapper that would only ever hold one thing. */
     const pane = item.kind === "pr" ? el("div") : viewer;
     if (item.kind === "pr") viewer.append(prTabs(item, pane), pane);
+    if (item.loadError) {
+      pane.append(el("p", { className: "err", textContent: "Couldn't load the conversation: " + item.loadError }));
+      delete item.loadError;
+      item.partial = true; // so opening it again tries again
+    }
     conversation(pane, item);
     viewer.scrollTop = 0;
   }
@@ -527,8 +592,11 @@ function inboxScreen(m, opts) {
     b.onclick = async () => {
       b.disabled = true;
       try {
-        const r = await openReply(item, f);
-        if (r) b.textContent = r.warning ? "sent, with a warning" : "sent";
+        // Same reason as the header's Reply: the wait is after the box closes, not during it.
+        const r = await openReply(item, f, () => {
+          b.textContent = "Replying…";
+        });
+        b.textContent = r ? (r.warning ? "sent, with a warning" : "sent") : "Reply";
       } catch (e) {
         b.textContent = e.message;
       }
@@ -590,24 +658,43 @@ function inboxScreen(m, opts) {
     /* One button, because there was no way to tell the two apart. Reply reaches whoever you
        named in it; see `openReply`. */
     const reply = el("button", { className: "ghbtn primary", textContent: "Reply" });
+
+    /* Posting a comment is a round trip to GitHub through `gh`, and on a cold connection that
+       is seconds of a button that still says "Reply" and still takes clicks. Saying nothing
+       reads as a page that ignored you, which is how the same comment gets sent twice. */
+    const sending = (on) => {
+      busy(on, on ? "sending…" : "");
+      reply.textContent = on ? "Replying…" : "Reply";
+    };
+
     reply.onclick = async () => {
       let r;
       try {
-        r = await openReply(item, null);
+        r = await openReply(item, null, () => sending(true));
       } catch (e) {
+        sending(false);
         failed(e);
         return;
       }
-      if (!r) return;
+      // Closed the box without sending: nothing ever started, so there is nothing to put back.
+      if (!r) {
+        sending(false);
+        return;
+      }
       /* Repaint only when something was said on this thread, which is always true here: `ask`
          posts the comment too. A warning means the tracker issue went up and the comment did
          not, and then the status line is the only thing that says so. */
       if (r.warning) {
+        sending(false);
         status.className = "meta err";
         status.textContent = r.warning;
         return;
       }
+      /* Held across the reload as well as the post. The reply is not on screen until the
+         thread repaints, and a button that said "Reply" again before then would be claiming
+         it was done over a thread that still did not show it. */
       await reloadThread(item);
+      sending(false);
     };
     buttons.push(reply);
 
@@ -638,7 +725,20 @@ function inboxScreen(m, opts) {
           body: body || undefined,
         });
         DRAFTS.delete(key);
-        await refreshAll(false);
+        /* What changed is known, so it is changed here rather than re-reading every repo,
+           which redrew the whole inbox for one issue. The next refresh confirms it. */
+        const me = humansOf()[0]?.github ?? "you";
+        const now = new Date().toISOString();
+        item.events = [
+          ...(item.events ?? []),
+          ...(body ? [{ type: "comment", actor: me, createdAt: now, body }] : []),
+          { type: closing ? "closed" : "reopened", actor: me, createdAt: now },
+        ];
+        item.state = closing ? "CLOSED" : "OPEN";
+        item.updatedAt = now;
+        stampCounts();
+        paint();
+        openThread({ repo: item.repo, number: item.number, kind: item.kind });
       } catch (e) { failed(e); }
     };
     buttons.push(closeBtn);
@@ -651,12 +751,27 @@ function inboxScreen(m, opts) {
        own settings. The server reads it from there. */
     if (item.kind === "pr" && item.state === "OPEN") {
       const merge = el("button", { className: "ghbtn", textContent: "Merge" });
+      /* A conflicted branch cannot be merged by anyone, so the button says why instead of
+         spending a round trip to come back with GitHub's version of the same sentence. */
+      if (item.mergeable === "CONFLICTING") {
+        merge.disabled = true;
+        merge.title = "This branch conflicts with its base";
+      }
       merge.onclick = async () => {
-        if (!confirm("Merge " + item.repo + " #" + item.number + " into its base branch?")) return;
+        const yes = await askYes({
+          title: "Merge " + item.repo + " #" + item.number + " into its base branch?",
+          confirm: "Merge",
+        });
+        if (!yes) return;
         busy(true, "merging…");
         try {
           await post({ action: "merge", repo: item.repo, number: item.number });
-          await refreshAll(false);
+          // As with closing: the change is known, so it is made here rather than re-reading every repo.
+          item.state = "MERGED";
+          item.updatedAt = new Date().toISOString();
+          stampCounts();
+          paint();
+          openThread({ repo: item.repo, number: item.number, kind: item.kind });
         } catch (e) { failed(e); }
       };
       buttons.push(merge);
@@ -686,7 +801,12 @@ function inboxScreen(m, opts) {
         const at = S.inbox.items.findIndex(
           (i) => i.repo === item.repo && i.number === item.number,
         );
-        if (at >= 0) S.inbox.items[at] = { ...S.inbox.items[at], ...fresh };
+        if (at >= 0) {
+          const old = S.inbox.items[at];
+          THREADS.set(item.repo + "#" + item.number, fresh);
+          // A single thread does not know which part of the org it is in, or whether it is unread.
+          S.inbox.items[at] = { ...old, ...fresh, role: old.role, unread: old.unread, partial: false };
+        }
       }
     } catch {
       /* the comment posted; a stale pane is not worth an error */
@@ -714,7 +834,28 @@ function inboxScreen(m, opts) {
  * @param anchor  the file this is about, when it was opened from a diff. Its hunk rides along.
  * @returns the result of the write, or null if nothing was written.
  */
-async function openReply(item, anchor) {
+/**
+ * @param onSend Called once, the moment the box is submitted and the writing starts.
+ *
+ * The dialog and the send are one `await` to whoever called this, so a caller cannot tell the
+ * two apart by itself — and the two want opposite things from a button. While the box is open
+ * you are still typing and the button has to stay as it was; once it closes there is a request
+ * in flight against GitHub that can take seconds, and that is what needs saying.
+ */
+/**
+ * Who a reply is for, by default: the staff member whose tracker the issue is on, or whose App
+ * opened it. They are only woken by an @mention, so a reply without one reached nobody.
+ */
+export function addressee(item) {
+  const staff = S.data?.staff ?? [];
+  const s =
+    staff.find((x) => x.brain === item.repo) ??
+    staff.find((x) => (x.soloBots ?? []).includes(item.author));
+  if (!s) return "";
+  return (s.mention || "@" + s.handle) + " ";
+}
+
+async function openReply(item, anchor, onSend) {
   const key = item.repo + "#" + item.number + (anchor ? " · " + anchor.path : "");
   let deaf = null;
 
@@ -722,7 +863,7 @@ async function openReply(item, anchor) {
     title: "Reply to " + item.repo + " #" + item.number,
     hint: anchor ? anchor.path : item.title,
     confirm: "Comment",
-    value: DRAFTS.get(key) ?? "",
+    value: DRAFTS.get(key) ?? addressee(item),
     /* It goes out through whoever's `gh` is signed in here, which is only knowably one person
        when the org has one. With two it would be a guess, and a wrong name on a reply box is
        worse than no name. */
@@ -733,10 +874,15 @@ async function openReply(item, anchor) {
         else DRAFTS.delete(key);
       };
       deaf = deafNote(ta, item, anchor);
+      // Typing starts after the @mention, not in front of it.
+      setTimeout(() => {
+        ta.selectionStart = ta.selectionEnd = ta.value.length;
+      }, 0);
       return el("div", {}, [attachBox(ta, () => item.repo).node, deaf.node]);
     },
   });
   if (!body) return null;
+  onSend?.();
 
   /* One press, both writes. `ask` posts the comment itself when told to, so these are not two
      requests racing: the tracker issue goes up first because it is the half that actually
@@ -1000,15 +1146,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;
 }
 
@@ -1156,9 +1323,22 @@ function newIssueForm(viewer) {
         body: body.value,
         labels: picked.chosen(),
       });
-      status.innerHTML =
-        'created · <a href="' + esc(r.url ?? "") + '" target="_blank" rel="noopener">open it</a>';
-      await refreshAll(true);
+      /* The form is done once GitHub has the issue. What you sent is shown as what it now is,
+         a thread in the inbox, open and selected, rather than a link out to github.com beside
+         a form still holding what you typed. The filters are set so its row is on the list. */
+      const number = Number(String(r.url ?? "").match(/\/issues\/(\d+)/)?.[1]);
+      S.inboxOpen = number ? { repo: s.brain, number, kind: "issue" } : null;
+      S.inboxState = "";
+      S.inboxFilter = "";
+      S.query = "";
+      if (S.inboxStaff && S.inboxStaff !== s.handle) S.inboxStaff = s.handle;
+      writeHash(false);
+      status.textContent = "sent · opening it…";
+      // It is sent either way. A refresh that fails must not read as a send that failed.
+      await refreshAll(false).catch(() => {
+        status.textContent = "sent · refresh to see it";
+      });
+      return;
     } catch (e) {
       status.textContent = e.message;
       status.className = "meta err";