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

package/docs/portal.md

@@ -87,15 +87,19 @@ Where the portal opens. An Ask box at the top, then these, in order.
 - **Latest reports.** Each staff member's run report from the last day: the three lines they
   post on their status issue at the end of a daily run. Nothing shows until there is one.
 - **Needs you.** Every ask a staff member has put on you, and every pull request ready to
-  merge, oldest first. Each card has its action on it:
-  - a `decision` has an answer box, and **Go with the default** when it carries one. The
-    default and its date are shown, and turn amber once the date has passed.
+  merge, oldest first. Each card has one action on its right:
+  - a `decision` has **Reply**, and **Go with the default** when it carries one. The default
+    and its date are shown, and turn amber once the date has passed.
   - a `review` has **Approve**.
   - a `chore` has **Done**, which closes it.
   - 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.
+- **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
@@ -106,10 +110,14 @@ Where the portal opens. An Ask box at the top, then these, in order.
 - **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.
 
+**Every item opens in a side sheet.** Click anywhere on a card or a row and its thread opens
+on the right: the conversation, Reply, Close or Reopen, Merge for a pull request, and Open in
+GitHub. Escape or the × closes it, and Home repaints where you were.
+
 **Nothing is missed.** Every open issue and pull request has exactly one place: on Home, or on
 the staff member's own tracker (their status issue, a peer's ask, their own work), or elsewhere
 (draft pull requests, contributor issues). The line at the bottom counts the last two, with a
-link to Trackers. Clicking any title opens its thread there.
+link to Trackers.
 
 ## Trackers
 

package/package.json

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

@@ -155,6 +155,7 @@ svg.ic{width:var(--ic,15px);height:var(--ic,15px);display:block;flex:none}
 .chip.hot{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
 .chip.warm{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
 .chip.cool{color:var(--ruled);background:color-mix(in srgb,var(--ruled) 12%,transparent)}
+.chip.ok{color:var(--accent);background:var(--accent-soft)}
 .pill{font:11px var(--mono);color:var(--ink-dim);border:1px solid transparent;
       background:color-mix(in srgb,var(--ink) 4%,transparent);
       border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
@@ -282,8 +283,28 @@ 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)}
+
+/* The side sheet: a thread opened from Home, full height on the right. */
+dialog.sheet.side{margin:0 0 0 auto;height:100vh;max-height:100vh;width:min(780px,100vw);
+      border-radius:0;border-width:0 0 0 1px}
+dialog.sheet.side[open]{animation:sidein .22s var(--ease)}
+dialog.sheet.side .sheetbody{max-height:100vh;height:100%;box-sizing:border-box;padding:18px 22px 40px}
+@keyframes sidein{from{transform:translateX(24px);opacity:0}}
+@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

@@ -15,35 +15,66 @@
 .homewho{font:500 12.5px var(--sans);color:var(--ink);background:var(--surface-2);border:0;
          border-radius:8px;padding:5px 8px}
 
-.homecard{padding:14px 16px}
+.homecard{padding:14px 16px;cursor:pointer;display:grid;grid-template-columns:1fr auto;
+         align-items:center;gap:10px 18px}
+.homeabout{min-width:0}
+.homecard:hover{border-color:var(--border-strong)}
+.homecard:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 .homehead{display:flex;align-items:baseline;gap:8px}
 .homehead .chip{flex:none}
 .homeopen{all:unset;cursor:pointer;font:600 14px/1.35 var(--sans);color:var(--ink);letter-spacing:-.01em}
 .homeopen:hover{text-decoration:underline}
 .homeopen:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
-.homecard > .meta{margin-top:4px}
+.homeabout > .meta{margin-top:4px}
 .homedue{margin:8px 0 0;font-size:12.5px;color:var(--ink-dim)}
 .homedue.late{color:var(--warn)}
-.homeacts{margin-top:10px}
-
-.homeworking{display:flex;flex-direction:column;gap:10px;padding:12px 16px}
-.homerun{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
-.homewho2{display:inline-flex;align-items:center;gap:6px;min-width:190px}
-.homewho2 .ic{--ic:14px;color:var(--ink-dim)}
-.homelive{color:var(--accent);text-decoration:none;font-size:12.5px}
-.homelive::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
-         background:var(--accent);margin-right:6px;animation:homepulse 1.6s var(--ease) infinite}
-.homelive:hover{text-decoration:underline}
-@keyframes homepulse{50%{opacity:.35}}
-@media (prefers-reduced-motion:reduce){.homelive::before{animation:none}}
+.homeacts{justify-content:flex-end;flex-wrap:nowrap}
+.homeacts .meta{white-space:normal;text-align:right;max-width:220px}
+@media (max-width:640px){
+  .homecard{grid-template-columns:1fr}
+  .homeacts{justify-content:flex-start;flex-wrap:wrap}
+  .homeacts .meta{text-align:left}
+}
+
+.homeworking{display:flex;flex-direction:column;padding:4px 16px}
+.homerun{display:grid;grid-template-columns:minmax(150px,220px) auto 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}
+.homewho2 b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.homewho2 .ic{--ic:15px;color:var(--ink-dim);flex:none}
+.homestate{justify-self:start}
+.homestate.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
+         margin-right:6px;animation:homepulse 1.6s var(--ease) infinite}
+@keyframes homepulse{50%{opacity:.3}}
+@media (prefers-reduced-motion:reduce){.homestate.ok::before{animation:none}}
+.homerunwhat{color:var(--ink);line-height:1.45;min-width:0}
+.homerunsub{color:var(--ink-dim);font-size:12.5px;margin-top:2px}
+.homerunlog .ghbtn{min-height:28px;padding:3px 12px}
+@media (max-width:640px){
+  .homerun{grid-template-columns:1fr auto;grid-template-areas:"who state" "what what" "log log"}
+  .homewho2{grid-area:who}.homestate{grid-area:state;justify-self:end}
+  .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}
 
+/* 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)}
@@ -52,6 +83,5 @@
 @media (max-width:640px){.homereport{grid-template-columns:1fr;gap:4px}}
 
 @media (max-width:640px){
-  .homewho2{min-width:0}
   .homehead{flex-wrap:wrap}
 }

package/templates/portal/js/dialog.js

@@ -167,10 +167,11 @@ export function askYes({ title, hint, confirm = "Continue" }) {
  * @returns {{set: (node: Node) => void, close: () => void, isOpen: () => boolean} | null}
  *   null where there is no dialog element (the test shim), and the caller draws inline instead.
  */
-export function sheet({ node, onClose }) {
+export function sheet({ node, onClose, side = false }) {
   const box = document.createElement("dialog");
   if (typeof box.showModal !== "function") return null;
-  box.className = "sheet";
+  // `side` slides in from the right at full height, for reading a thread beside the page.
+  box.className = side ? "sheet side" : "sheet";
   const body = el("div", { className: "sheetbody" });
   body.append(node);
   box.append(body);

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

@@ -1,15 +1,17 @@
 /* Home: what needs you, who is working, what you asked for, and what was closed today.
  *
  * Built from the inbox list and /api/live, sorted by homesort.js, which is where the rule that
- * every open item has exactly one place lives. Clicking an item opens its thread on the
- * Trackers screen, which is the same thread view the inbox always had. */
+ * every open item has exactly one place lives. Clicking an item opens its thread in a side
+ * sheet, the same thread view Trackers has, with the reply box in it. */
 
 import { getLive, post } from "../api.js";
+import { sheet } from "../dialog.js";
 import { ago, el, skeleton } from "../dom.js";
 import { daysUntil, sortHome } from "../homesort.js";
-import { icon, staffIcon } from "../icons.js";
+import { icon, iconHTML, staffIcon } from "../icons.js";
 import { ensureInbox, stampCounts } from "../refresh.js";
 import { go, render } from "../router.js";
+import { threadInto } from "./inbox.js";
 import { humansOf, S } from "../state.js";
 
 const KIND_LABEL = {
@@ -71,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));
 
@@ -143,26 +150,41 @@ function titleOf(said) {
 
 function needCard(e) {
   const { item, kind } = e;
-  const card = el("div", { className: "card homecard" });
-  card.append(
+  /* 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" + (item.unread ? " unread" : ""),
+    tabIndex: 0,
+    role: "button",
+  });
+  card.onclick = (ev) => {
+    if (!ev.target.closest("button, a, textarea")) openThread(item);
+  };
+  card.onkeydown = (ev) => {
+    if (ev.target === card && (ev.key === "Enter" || ev.key === " ")) {
+      ev.preventDefault();
+      openThread(item);
+    }
+  };
+  // What it is on the left, what you can do about it on the right.
+  const about = el("div", { className: "homeabout" }, [
     el("div", { className: "homehead" }, [
       el("span", { className: "chip " + (KIND_TONE[kind] ?? ""), textContent: KIND_LABEL[kind] }),
       openLink(item),
     ]),
     el("div", { className: "meta", textContent: whereOf(e) + " · " + ago(item.createdAt) }),
-  );
+  ]);
+  card.append(about);
 
-  if (kind === "decision" && item.due) card.append(dueLine(item.due));
-  if (kind === "merge") card.append(checksLine(item));
+  if (kind === "decision" && item.due) about.append(dueLine(item.due));
+  if (kind === "merge") about.append(checksLine(item));
 
+  // The note comes first so that what happened sits just left of the button that did it.
   const note = el("span", { className: "meta" });
-  const actions = el("div", { className: "row homeacts" });
+  const actions = el("div", { className: "row homeacts" }, [note]);
 
   if (kind === "decision" || kind === "ask") {
-    const box = el("textarea", { className: "homeanswer", rows: 2, placeholder: "Your answer" });
-    const send = button("Send", true, () => say(e, box.value, note, actions));
-    card.append(box);
-    actions.append(send);
+    actions.append(button("Reply", true, () => openThread(item)));
     if (item.due) actions.append(button("Go with the default", false, () => say(e, "Go with your default.", note, actions)));
   } else if (kind === "review") {
     actions.append(button("Approve", true, () => say(e, "Approved.", note, actions)));
@@ -174,7 +196,6 @@ function needCard(e) {
     merge.disabled = blocked || item.checks === "pending";
     actions.append(merge);
   }
-  actions.append(button("Open", false, () => openThread(item)), note);
   card.append(actions);
   return card;
 }
@@ -248,45 +269,69 @@ function whatRun(r) {
 function working(staff) {
   const box = el("div", { className: "card homeworking" });
   if (!S.live) {
-    box.append(el("p", { className: "meta", textContent: "Asking GitHub…" }));
+    box.append(el("p", { className: "homerunwhat", textContent: "Asking GitHub…" }));
     return box;
   }
   for (const s of staff) {
     const l = (S.live.staff ?? []).find((x) => x.handle === s.handle);
-    const row = el("div", { className: "homerun" });
-    row.append(el("span", { className: "homewho2" }, [icon(staffIcon(s), "ic"), el("b", { textContent: s.name })]));
+    const runs = l && !l.error ? (l.running ?? []) : [];
+    const busy = runs.length > 0;
+    const last = l?.finished?.[0];
+
+    const what = el("div", { className: "homerunwhat" });
+    let log = null;
     if (!l || l.error) {
-      row.append(el("span", { className: "meta err", textContent: l?.error ?? "not read" }));
-    } else if (l.running?.length) {
-      for (const r of l.running) row.append(runLink(s, r, true));
+      what.append(el("span", { className: "err", textContent: l?.error ?? "Could not read their runs." }));
+    } else if (busy) {
+      for (const r of runs) {
+        what.append(el("div", { textContent: `${cap(whatRun(r))} · ${minutes(r.createdAt)} so far` }));
+      }
+      log = runs[0].url;
+    } else if (last) {
+      what.append(
+        el("div", { textContent: `${cap(whatRun(last))}, ${outcome(last)} ${ago(last.updatedAt)}` }),
+      );
+      log = last.url;
     } else {
-      const last = l.finished?.[0];
-      row.append(
-        el("span", {
-          className: "meta",
-          textContent: last ? `Idle. Last run: ${whatRun(last)}, ${outcome(last)} ${ago(last.updatedAt)}.` : "Idle.",
+      what.append(el("div", { textContent: "No runs in the last few hours." }));
+    }
+    if (l && !l.error && l.automatic) {
+      what.append(
+        el("div", {
+          className: "homerunsub",
+          textContent: `${l.automatic} of ${l.limit} runs today that nobody asked for`,
         }),
       );
-      if (last) row.append(el("a", { className: "meta", href: last.url, target: "_blank", rel: "noopener", textContent: "log" }));
     }
-    if (l && !l.error && l.automatic) {
-      row.append(el("span", { className: "pill", title: "Runs today that nobody asked for", textContent: `${l.automatic}/${l.limit} automatic` }));
+
+    const state = el("span", {
+      className: "chip homestate " + (busy ? "ok" : ""),
+      textContent: busy ? (runs[0].status === "queued" ? "Queued" : "Working") : "Idle",
+    });
+    const actions = el("div", { className: "homerunlog" });
+    if (log) {
+      actions.append(
+        el("a", { className: "ghbtn", href: log, target: "_blank", rel: "noopener", textContent: "Log" }),
+      );
     }
-    box.append(row);
+
+    box.append(
+      el("div", { className: "homerun" + (busy ? " busy" : "") }, [
+        el("span", { className: "homewho2" }, [icon(staffIcon(s), "ic"), el("b", { textContent: s.name })]),
+        state,
+        what,
+        actions,
+      ]),
+    );
   }
   return box;
 }
 
-function runLink(s, r, live) {
-  const what = whatRun(r);
-  const mins = Math.max(1, Math.round((Date.now() - new Date(r.createdAt).getTime()) / 60000));
-  return el("a", {
-    className: "homelive",
-    href: r.url,
-    target: "_blank",
-    rel: "noopener",
-    textContent: (live && r.status === "queued" ? "Queued: " : "Working: ") + what + ` · ${mins} min · log`,
-  });
+const cap = (t) => t.charAt(0).toUpperCase() + t.slice(1);
+
+function minutes(since) {
+  const m = Math.max(1, Math.round((Date.now() - new Date(since).getTime()) / 60000));
+  return m < 60 ? `${m} min` : `${Math.floor(m / 60)} h ${m % 60} min`;
 }
 
 function outcome(r) {
@@ -297,8 +342,10 @@ function poll() {
   clearTimeout(timer);
   getLive()
     .then((data) => {
+      // Only a change repaints: a poll every few seconds must not move the page under you.
+      const changed = JSON.stringify(data.staff) !== JSON.stringify(S.live?.staff);
       S.live = data;
-      if (S.view === "home") render();
+      if (changed && S.view === "home" && !document.querySelector("dialog[open]")) repaintInPlace();
     })
     .catch(() => {})
     .finally(() => {
@@ -312,18 +359,55 @@ 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 el("div", { className: "homerow" }, [
+  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) }),
   ]);
 }
 
+/** 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 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 = el("div", { className: "homerow homeclosed" }, [
+  const row = clickable(e.item, "homerow homeclosed", [
     el("div", {}, [
       openLink(e.item),
       el("div", { className: "meta", textContent: whereOf(e) + " · " + (e.reason || "No reason given.") }),
@@ -362,13 +446,33 @@ function openLink(item) {
   return b;
 }
 
+/** Repaint Home where you were: the sheet may have changed what is on it, not where you are. */
+function repaintInPlace() {
+  const main = document.querySelector("#main");
+  const at = { win: window.scrollY, main: main?.scrollTop ?? 0 };
+  render();
+  window.scrollTo(0, at.win);
+  if (main) main.scrollTop = at.main;
+}
+
+/**
+ * The thread in a side sheet: its header, actions, reply box and conversation. Closing it
+ * repaints Home, since a reply or a close there changes what belongs where. Where there is no
+ * <dialog> (the test shim), it falls back to the thread on Trackers.
+ */
 function openThread(item) {
-  go({
-    view: item.kind === "pr" ? "prs" : "inbox",
-    inboxStaff: "",
-    inboxFilter: "",
-    inboxOpen: { repo: item.repo, number: item.number, kind: item.kind },
-  });
+  const ref = { repo: item.repo, number: item.number, kind: item.kind };
+  const body = el("div");
+  const x = el("button", { className: "iconbtn", title: "Close (Esc)", ariaLabel: "Close" });
+  x.innerHTML = iconHTML("close");
+  body.append(el("div", { className: "sidebar-x" }, [x]));
+  threadInto(body, ref);
+  const box = sheet({ node: body, side: true, onClose: () => S.view === "home" && repaintInPlace() });
+  if (!box) {
+    go({ view: item.kind === "pr" ? "prs" : "inbox", inboxStaff: "", inboxFilter: "", inboxOpen: ref });
+    return;
+  }
+  x.onclick = () => box.close();
 }
 
 function whereOf(e) {
@@ -385,7 +489,7 @@ function button(label, primary, onclick) {
 /** After a write: re-read the inbox, and look for the run it starts. */
 function refreshSoon() {
   ensureInbox(true)
-    .then(() => S.view === "home" && render())
+    .then(() => S.view === "home" && !document.querySelector("dialog[open]") && repaintInPlace())
     .catch(() => {});
   setTimeout(poll, 3_000);
 }

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

@@ -108,6 +108,18 @@ export const viewInbox = (m) => inboxScreen(m, {});
  */
 export const viewPrs = (m) => inboxScreen(m, { prs: true });
 
+/**
+ * One thread, drawn into `host` on its own: the header, its actions, the reply box and the
+ * conversation, with no list beside it. Home opens a card this way, in a side sheet.
+ *
+ * It is the same screen as Trackers, built off-page, with only its viewer kept. Replying,
+ * closing and merging repaint a list nobody can see and then reopen this thread, which is
+ * what they do on Trackers too.
+ */
+export function threadInto(host, ref) {
+  host.append(inboxScreen(el("div"), { prs: ref.kind === "pr", only: ref }));
+}
+
 function inboxScreen(m, opts) {
   /* "Pending work", not "Pull requests". Every one of these is a piece of work a staff member
      has finished and cannot land on their own, which is the thing you are being asked about.
@@ -166,10 +178,15 @@ function inboxScreen(m, opts) {
   refresh.onclick = () => { refresh.classList.add("spin"); load(true); };
 
   if (S.inbox) { stampCounts(); paint(); restore(); } else load(false);
+  if (opts.only) return viewer;
 
   /** A `?t=` in the URL names a thread. It used to be read into the state and then never
       acted on, because only the already-loaded branch opened one. */
   function restore() {
+    if (opts.only) {
+      openThread(opts.only);
+      return;
+    }
     if (!S.inboxOpen) return;
     // 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.