@gavin-hu/my-pi-agent 0.19.0 → 0.20.0

package/extensions/board/view/render.ts

@@ -13,11 +13,37 @@
  * offset, and an open dialog all survive a peer's write.
  *
  * The client modules share one namespace, `window.bfBoard`: this one paints,
- * `team.ts` draws the round, `actions.ts` posts, `keys.ts` binds, and `live.ts` owns
- * the frame stream and the wiring.
+ * `team.ts` draws the round, `dialog.ts` opens a card, `keys.ts` binds, and `live.ts`
+ * owns the frame stream and the wiring.
+ *
+ * `plural`, `tabTitle`, `matchesQuery`, `el`, `typing`, and `paintStatus` are not written
+ * here. Their one bodies live in `lib/` beside the rules they express, and the assembler
+ * hands the source in — a second copy in the bundle is a second wording for `1 card`, a
+ * second shape for the tab, a filter that finds a different card than the tool does, or an
+ * element builder and a typing test that drift from the review page's.
  */
 
-export const BOARD_RENDER_JS = String.raw`(function () {
+/**
+ * The renderer, with what it needs spliced in: the counts' wording, the tab title's
+ * shape, what a query matches, and the browser runtime's element builder and typing test —
+ * each written once in `lib/` and handed in as source.
+ */
+export function renderJs(rules: {
+	plural: string;
+	tabTitle: string;
+	matches: string;
+	age: string;
+	runtime: string;
+}): string {
+	return renderTemplate
+		.replace("__PLURAL__", rules.plural)
+		.replace("__TAB_TITLE__", rules.tabTitle)
+		.replace("__MATCHES__", rules.matches)
+		.replace("__AGE__", rules.age)
+		.replace("__RUNTIME__", rules.runtime);
+}
+
+const renderTemplate = String.raw`(function () {
   "use strict";
   var board = window.bfBoard || (window.bfBoard = {});
 
@@ -26,14 +52,18 @@ export const BOARD_RENDER_JS = String.raw`(function () {
   var LANE_EMPTY = { todo: "nothing waiting", doing: "nothing in flight", blocked: "nothing blocked", done: "nothing finished yet" };
   /** Path chips a lane card shows before it counts the rest. */
   var PATH_CHIPS = 3;
+  /**
+   * Finished cards a lane may hold before it starts folded.
+   *
+   * A board of 26 cards is 19 of them finished, and an open Done lane is four times the
+   * height of the three that carry work. Three or four is work a reader still checks;
+   * past this it is history, and the count in the head says how much.
+   */
+  var DONE_FOLD_AT = 6;
+  /** The two tones a reason line can take, by the kind reasonOf reports. */
+  var REASON_TONE = { blocked: N.cardReasonBlocked, unplanned: N.cardReasonUnplanned };
 
-  /** One element with optional class and text. */
-  function el(tag, className, text) {
-    var node = document.createElement(tag);
-    if (className) node.className = className;
-    if (text !== undefined && text !== null) node.textContent = String(text);
-    return node;
-  }
+__RUNTIME__
 
   /**
    * One button that calls back, so nothing on the page is a click handler in markup.
@@ -55,16 +85,14 @@ export const BOARD_RENDER_JS = String.raw`(function () {
     return el("span", "bf-chip" + (tone ? " bf-chip--" + tone : ""), text);
   }
 
-  /** "12m", "3h", "2d" — the age of a card's last write, compact enough for a meta line. */
-  function ago(at) {
-    var seconds = Math.max(0, Math.round((Date.now() - at) / 1000));
-    if (seconds < 45) return "now";
-    var minutes = Math.round(seconds / 60);
-    if (minutes < 60) return minutes + "m";
-    var hours = Math.round(minutes / 60);
-    if (hours < 24) return hours + "h";
-    return Math.round(hours / 24) + "d";
-  }
+  /**
+   * "12m", "3h", "2d" — an age, compact enough for a meta line.
+   *
+   * The transcript prints the same rule for the same fact, so the body is spliced in from
+   * lib/format.ts rather than written twice. No backticks in here: this is a template.
+   */
+  var ageText = __AGE__;
+  function ago(at) { return ageText(Date.now(), at); }
 
   /** Bytes, the way the footer says them. */
   function size(bytes) {
@@ -87,106 +115,41 @@ export const BOARD_RENDER_JS = String.raw`(function () {
     return undefined;
   }
 
-  /** Whether this session holds the card. */
-  function mine(card, me) {
-    if (!card.owner) return false;
-    if (card.owner.id !== undefined && me.id !== undefined) return card.owner.id === me.id;
-    return String(card.owner.label).toLowerCase() === String(me.label).toLowerCase();
-  }
-
-  /** A card's priority; an older card that never recorded one is ordinary. */
-  function priorityOf(card) {
-    return card.priority || "normal";
-  }
-
-  /**
-   * The cards this one waits for that are not finished yet.
-   *
-   * The board is the index: a link is one id in the waiting card's file, so the other
-   * card's lane can only be read from the frame. A finished dependency has stopped
-   * explaining anything, so it drops out of the answer.
-   */
-  function blockersOf(card, view) {
-    var ids = card.dependsOn || [];
-    if (ids.length === 0 || !view) return [];
-    var all = cards(view);
-    var open = [];
-    for (var i = 0; i < ids.length; i++) {
-      for (var j = 0; j < all.length; j++) {
-        if (all[j].id === ids[i] && all[j].status !== "done") open.push(all[j]);
-      }
-    }
-    return open;
-  }
-
-  /** How the board says what a card waits for: the id and the lane that explains it. */
-  function waitingText(card, view) {
-    return blockersOf(card, view)
-      .map(function (blocker) { return "#" + blocker.id + " (" + blocker.status + ")"; })
-      .join(", ");
-  }
-
-  /**
-   * Whether this reader may do one verb to one card.
-   *
-   * The one table behind three surfaces: a card face, the dialog's footer, and a queue
-   * row each draw a different subset — a face offers two actions, the dialog five — but
-   * a verb is allowed for the same reader on all of them, and it is the same rule the
-   * server applies in lib/board/rules.ts. Open is always allowed: reading is not a write.
-   */
-  function may(card, view, verb) {
-    // Reading is not a write, so it survives a viewer's page; everything else is what
-    // the document's authority says it may be.
-    if (verb === "open") return true;
-    if (!canWrite()) return false;
-    var isMine = mine(card, view.me);
-    var waiting = blockersOf(card, view).length > 0;
-    var finished = card.status === "done";
-    if (verb === "claim") return card.status === "todo" && !waiting;
-    if (verb === "move") return isMine && !finished;
-    if (verb === "release") return isMine && !finished;
-    if (verb === "edit") return card.owner === undefined || isMine;
-    if (verb === "drop") return card.status === "todo" || finished || isMine;
-    if (verb === "reclaim") return card.owner !== undefined && !finished;
-    // Recording an owner is what a page can do where it cannot message: an unowned card
-    // that is not waiting for another, which is the same card a claim is offered.
-    if (verb === "assign") return card.owner === undefined && !finished && !waiting;
-    return false;
-  }
-
-  /**
-   * Whether this page may change a card at all.
-   *
-   * The document is rendered per request, so a viewer's shell says data-writes="0":
-   * one attribute decides every affordance, and the server refuses anyway — a page
-   * that offered what it would be turned down for teaches a reader the wrong thing.
-   */
-  function canWrite() {
-    return document.documentElement.getAttribute("data-writes") !== "0";
-  }
-
   /** The one line under a card's meta: why it sits where it does. */
   function reasonOf(card, view) {
     var last = card.notes.length > 0 ? card.notes[card.notes.length - 1] : undefined;
     // An order is the strongest reason a card is not being worked on, and the one a
     // reader cannot see from the lane: it comes before the note that says the same.
-    var waiting = waitingText(card, view);
-    if (waiting !== "") return { text: "waits on " + waiting, kind: "waiting" };
+    // The sentence is the snapshot's, so this line and the tool's refusal name one list.
+    if (card.waits !== undefined) return { text: "waits on " + card.waits, kind: "waiting" };
     if (card.status === "blocked") {
       // The lane already says blocked and the tone already says danger; the line says why.
+      // The recorded reason comes first: the note is what somebody happened to write last,
+      // and it is the reason a move to blocked asks for. The slot carries the reason alone —
+      // the lane head already says blocked, and a status prefix in it would be a second voice.
+      if (card.blockedBy) return { text: card.blockedBy, kind: "blocked" };
       return { text: last ? last.text : "blocked, with nothing recorded", kind: "blocked" };
     }
+    // An offer is a decision the lead already made once: the lane says nobody holds it, and
+    // this says how long the broadcast has gone unanswered, which is the difference between
+    // nobody having looked and nobody taking it.
+    if (card.status === "todo" && card.offeredAt !== undefined) {
+      return { text: "offered " + ago(card.offeredAt) + " ago · nobody took it", kind: "waiting" };
+    }
     if (card.status === "doing" && !card.plan) {
       return { text: "no plan recorded", kind: "unplanned" };
     }
     if (card.status === "doing") return { text: "planned", kind: "plan" };
-    if (card.status === "done") return { text: "✓ done" + (card.owner ? " by " + card.owner.label : ""), kind: "done" };
+    if (card.status === "done") {
+      var landed = card.landed ? " · landed " + card.landed.commit : "";
+      return { text: "✓ done" + (card.owner ? " by " + card.owner.label : "") + landed, kind: "done" };
+    }
     return last ? { text: last.text, kind: "note" } : undefined;
   }
 
   /** A path hint, or the +N chip that points at the rest. */
   function paths(card, limit) {
-    var list = el("ul", "board-card__paths");
+    var list = el("ul", N.cardPaths);
     var shown = card.paths.slice(0, limit);
     for (var i = 0; i < shown.length; i++) {
       var item = el("li", "");
@@ -203,25 +166,25 @@ export const BOARD_RENDER_JS = String.raw`(function () {
 
   /** One card in its lane. */
   function cardNode(card, view) {
-    var item = el("li", "board-card");
+    var item = el("li", N.card);
     item.setAttribute("data-card", card.id);
     item.setAttribute("data-status", card.status);
     item.setAttribute("data-rev", String(card.rev));
 
-    var head = el("p", "board-card__head");
-    head.appendChild(el("span", "board-card__id", "#" + card.id));
+    var head = el("p", N.cardHead);
+    head.appendChild(el("span", N.cardId, "#" + card.id));
     var title = actionButton(card.title, function () {
       board.openCard(card.id);
     });
-    title.className = "board-card__title";
+    title.className = N.cardTitle;
     head.appendChild(title);
     item.appendChild(head);
 
-    var meta = el("p", "board-card__meta");
+    var meta = el("p", N.cardMeta);
     meta.appendChild(card.owner ? chip(card.owner.label, "accent") : el("span", "", "unassigned"));
     // The order inside a lane is the priority, so an urgent card says so: an order
     // nobody can see reads as an accident. The lane's colour stays the card's own.
-    if (priorityOf(card) !== "normal") meta.appendChild(chip(priorityOf(card)));
+    if (card.priority !== "normal") meta.appendChild(chip(card.priority));
     // The stamp, so the clock can keep the age honest between frames: a board can be
     // quiet for ten minutes while the page still says "live".
     var age = el("span", "", ago(card.updatedAt));
@@ -233,37 +196,42 @@ export const BOARD_RENDER_JS = String.raw`(function () {
 
     var reason = reasonOf(card, view);
     if (reason) {
-      var kind = reason.kind === "blocked" || reason.kind === "unplanned" ? " board-card__reason--" + reason.kind : "";
-      var line = el("p", "board-card__reason" + kind, reason.text);
+      // The tone is a lookup, not a suffix: a name assembled from a prefix is a name no
+      // test can compare with the stylesheet.
+      var tone = REASON_TONE[reason.kind];
+      var line = el("p", tone === undefined ? N.cardReason : N.cardReason + " " + tone, reason.text);
       // It clamps to one line on the card, so the full sentence is the tooltip.
       line.title = reason.text;
       item.appendChild(line);
     }
 
-    var actions = el("div", "board-card__actions");
-    // A card that waits cannot be claimed, so the card face does not offer it: the reason
-    // line above is what it says instead. Move is not a permission but the way into the
-    // dialog, so it is drawn for any card still in flight, whoever holds it.
-    if (may(card, view, "claim")) {
-      actions.appendChild(actionButton("Claim", function () { board.act("claim", card); }, "plain"));
-    } else if (canWrite() && card.status !== "todo" && card.status !== "done") {
-      // Move is the way into the dialog, not a permission, but a dialog with no actions
-      // in it is not worth opening.
-      actions.appendChild(actionButton("Move", function () { board.openCard(card.id, "move"); }, "plain"));
-    }
-    // A note is a write, and a viewer's dialog has no field for one.
-    if (canWrite()) actions.appendChild(actionButton("Note", function () { board.openCard(card.id, "note"); }));
-    actions.appendChild(actionButton("Open", function () { board.openCard(card.id); }));
-    item.appendChild(actions);
     return item;
   }
 
-  /** The toolbar's identity, progress, and footer. */
+  /**
+   * The cards as the page draws them.
+   *
+   * A folded lane keeps its cards in the document, and so does a panel the other tab
+   * hides: the box is the only honest test of whether a reader can see one, and it is
+   * what j/k walks and what the dialog's position counts.
+   */
+  function drawnCards() {
+    var nodes = document.querySelectorAll(".board-card");
+    var seen = [];
+    for (var i = 0; i < nodes.length; i++) {
+      if (nodes[i].hidden) continue;
+      if (!nodes[i].getClientRects || nodes[i].getClientRects().length === 0) continue;
+      seen.push(nodes[i]);
+    }
+    return seen;
+  }
+
+  /** The toolbar's identity, progress, footer, and the tab's own name. */
   function renderChrome(view) {
     var me = document.getElementById("board-me");
     if (me) {
       me.textContent = view.me.label;
-      me.title = "Writes from this page are made as " + view.me.label;
+      me.title = "This page is served as " + view.me.label + ", and it cannot change a card";
     }
     var progress = document.getElementById("board-progress");
     if (progress) {
@@ -275,22 +243,25 @@ export const BOARD_RENDER_JS = String.raw`(function () {
       var text = document.getElementById("board-progress-text");
       if (text) text.textContent = view.counts.done + "/" + total + " done";
     }
-    // A viewer gets the board, not the chance to make one: the composer and the empty
-    // state's way into it belong to whoever serves the page.
-    var create = document.getElementById("board-new");
-    if (create) create.hidden = !canWrite();
-    var first = document.getElementById("board-first-card");
-    if (first) first.hidden = !canWrite();
     var where = document.getElementById("board-where");
     if (where) {
-      where.textContent = "store " + view.where + " · " + plural(view.counts.total, "card") + " · " + size(view.bytes);
+      // A footer that only counts read cards would say "2 cards" over a board holding
+      // three files, so the unreadable ones are named beside the size.
+      where.textContent =
+        "store " + view.where + " · " + plural(view.counts.total, "card") + " · " + size(view.bytes) +
+        (view.skipped > 0 ? " · " + plural(view.skipped, "unreadable") : "");
     }
+    // The tab has to tell two boards apart, and a board's own name is the last segment of
+    // its store: one board per repository, so that key is the subject. The count is what
+    // a browser full of tabs is read for, and an empty board says nothing rather than 0.
+    var open = view.counts.total - view.counts.done;
+    document.title = tabTitle("board", view.where.split("/").pop(), open > 0 ? open + " open" : undefined);
   }
 
-  /** 1 card, 2 cards. */
-  function plural(count, noun) {
-    return count + " " + noun + (count === 1 ? "" : "s");
-  }
+  /** 1 card, 2 cards — the one body, handed in by the bundle's assembler. */
+  var plural = __PLURAL__;
+  /** board · my-pi-agent · 3 open, the tab's one shape, handed in the same way. */
+  var tabTitle = __TAB_TITLE__;
 
   /**
    * Rewrite every age already on the page from its own timestamp.
@@ -308,38 +279,31 @@ export const BOARD_RENDER_JS = String.raw`(function () {
     }
   }
 
-  /** Whether the filter keeps a card: title, a path hint, or the holder. */
-  function matches(card, query) {
-    if (!query) return true;
-    var needle = query.toLowerCase();
-    if (card.title.toLowerCase().indexOf(needle) !== -1) return true;
-    if (card.owner && card.owner.label.toLowerCase().indexOf(needle) !== -1) return true;
-    for (var i = 0; i < card.paths.length; i++) if (card.paths[i].toLowerCase().indexOf(needle) !== -1) return true;
-    return false;
-  }
+  /** Whether the filter keeps a card: the module's one predicate, spliced in as source. */
+  var matches = __MATCHES__;
 
   /** The lane section for one status, created once and then reused. */
   function laneNode(lane) {
     var section = document.querySelector('.board-lane[data-status="' + lane.status + '"]');
     if (section) return section;
-    section = el("section", "board-lane");
+    section = el("section", N.lane);
     section.setAttribute("data-status", lane.status);
-    var head = el("h2", "board-lane__head");
+    var head = el("h2", N.laneHead);
     var toggle = actionButton(LANE_LABEL[lane.status] || lane.status, function () {
       board.toggleLane(lane.status);
     });
-    toggle.className = "board-lane__toggle";
+    toggle.className = N.laneToggle;
     toggle.setAttribute("aria-expanded", "true");
     toggle.setAttribute("aria-controls", "lane-" + lane.status);
     toggle.id = "lane-head-" + lane.status;
-    head.appendChild(el("span", "board-lane__dot"));
+    head.appendChild(el("span", N.laneDot));
     head.appendChild(toggle);
-    head.appendChild(el("span", "board-lane__count"));
+    head.appendChild(el("span", N.laneCount));
     section.appendChild(head);
-    var list = el("ol", "board-lane__list");
+    var list = el("ol", N.laneList);
     list.id = "lane-" + lane.status;
     section.appendChild(list);
-    section.appendChild(el("p", "board-lane__empty", LANE_EMPTY[lane.status] || "nothing"));
+    section.appendChild(el("p", N.laneEmpty, LANE_EMPTY[lane.status] || "nothing"));
     return section;
   }
 
@@ -360,6 +324,21 @@ export const BOARD_RENDER_JS = String.raw`(function () {
       var lane = view.lanes[i];
       var section = laneNode(lane);
       if (section.parentNode !== lanes) lanes.appendChild(section);
+      // Finished work starts folded, once: the default is what the page opens with, and
+      // toggleLane writes a boolean from then on, so a reader who unfolds Done keeps it
+      // unfolded through every frame a peer's write causes.
+      if (lane.status === "done" && lane.cards.length >= DONE_FOLD_AT) {
+        board.collapsed = board.collapsed || {};
+        if (board.collapsed[lane.status] === undefined) board.collapsed[lane.status] = true;
+      }
+      // A lane holding nothing is a rail: its dot, its word, and its count, in the width
+      // the fact deserves. The filter never does this — filtering is a view of the cards,
+      // not a statement that the lane has none.
+      section.setAttribute("data-empty", lane.cards.length === 0 ? "true" : "false");
+      // The lane's share of the row follows the work it holds: the sheet turns this number
+      // into a flex-grow, so two cards earn more width than one and a title is not wrapped
+      // for want of a column the lane is not using. A count, never text.
+      section.style.setProperty("--lane-count", String(lane.cards.length));
       var shown = lane.cards.filter(function (card) { return matches(card, query); });
       var sig = lane.cards.map(function (card) { return card.id + ":" + card.rev; }).join(",") + "|" + query;
       if (section.getAttribute("data-sig") !== sig) {
@@ -382,6 +361,10 @@ export const BOARD_RENDER_JS = String.raw`(function () {
       var collapsed = board.collapsed && board.collapsed[lane.status] === true;
       var list = section.querySelector(".board-lane__list");
       if (list) list.hidden = collapsed;
+      // A folded lane shows nothing, so it takes the rail's width the way an empty one
+      // does: the count in its head is the whole fact, and the lanes with cards keep the
+      // width that would otherwise be a tray of nothing.
+      section.setAttribute("data-folded", collapsed ? "true" : "false");
       var toggle = section.querySelector(".board-lane__toggle");
       if (toggle) toggle.setAttribute("aria-expanded", String(!collapsed));
     }
@@ -409,60 +392,104 @@ export const BOARD_RENDER_JS = String.raw`(function () {
   /** Fill the card dialog's contents from a card, without opening or closing it. */
   function fillDialog(card, view) {
     document.getElementById("card-dialog-title").textContent = card.title;
+    document.getElementById("card-dialog-id").textContent = "#" + card.id;
     // The lane is a status of its own, not a word inside a sentence: the same dot and
     // label a lane head wears, so the dialog and the board speak the same vocabulary.
     var state = document.getElementById("card-dialog-state");
     state.setAttribute("data-status", card.status);
     state.textContent = card.status;
-    document.getElementById("card-dialog-meta").textContent =
-      "#" + card.id + " · updated " + ago(card.updatedAt) + " · last edited by " + card.by;
+
+    // One fact per row of the ladder, so a reader can pick out a value instead of
+    // hunting for it in a sentence. A row with nothing to say takes its label with it:
+    // an empty cell under a heading reads as a missing value, not as an absence.
+    var pair = function (name, shown) {
+      var dt = document.getElementById("card-dialog-" + name + "-label");
+      var dd = document.getElementById("card-dialog-" + name);
+      if (dt) dt.hidden = !shown;
+      if (dd) dd.hidden = !shown;
+      return dd;
+    };
+    var setRow = function (name, shown, value, full) {
+      var dd = pair(name, shown);
+      dd.textContent = shown ? value : "";
+      if (full === undefined) dd.removeAttribute("title");
+      else dd.setAttribute("title", full);
+    };
+
     var owner = document.getElementById("card-dialog-owner");
     owner.textContent = "";
     owner.appendChild(card.owner ? chip(card.owner.label, "accent") : document.createTextNode("unassigned"));
-    if (priorityOf(card) !== "normal") owner.appendChild(chip(priorityOf(card)));
-
-    var pathList = document.getElementById("card-dialog-paths");
+    pair("owner", true);
+
+    var priority = pair("priority", card.priority !== "normal");
+    priority.textContent = "";
+    if (card.priority !== "normal") priority.appendChild(chip(card.priority));
+
+    setRow("updated", true, ago(card.updatedAt));
+    // How long the card has been in the lane it is in now, which updatedAt cannot say:
+    // a note filed against a blocked card moves that stamp without moving the card. Absent
+    // for a card written before the log existed, so the row takes its label with it.
+    setRow("lane", card.since !== undefined, card.status + " · " + ago(card.since));
+    setRow("by", true, card.by);
+    setRow("landed", card.landed !== undefined, card.landed ? card.landed.commit : "", card.landed ? card.landed.commit : undefined);
+
+    // The dialog and the card face say one thing, from one field: the ids it was linked
+    // to are the storage, and a reader is owed the lanes that make them a decision.
+    setRow("depends", card.waits !== undefined, card.waits || "", card.waits);
+    // The other side of the same link: what leaving this card undone is holding up, which
+    // is the one thing a card's own row cannot say.
+    setRow("dependents", card.dependents !== undefined, card.dependents || "", card.dependents);
+
+    // A long plan path elides on one line, and the whole of it is on the hover title and
+    // in the text, so it stays copyable: the reason to open a card is often its plan.
+    setRow("plan", Boolean(card.plan), card.plan || "", card.plan || undefined);
+
+    pair("paths", card.paths.length > 0);
+    var pathList = document.getElementById("card-dialog-path-list");
     pathList.textContent = "";
     for (var i = 0; i < card.paths.length; i++) {
       var item = el("li", "");
-      item.appendChild(chip(card.paths[i]));
+      var hint = chip(card.paths[i]);
+      hint.className += " " + N.dialogPath;
+      hint.title = card.paths[i];
+      item.appendChild(hint);
       pathList.appendChild(item);
     }
 
-    var waits = document.getElementById("card-dialog-depends");
-    if (waits) {
-      var linked = (card.dependsOn || []).map(function (id) { return "#" + id; }).join(", ");
-      waits.hidden = linked === "";
-      waits.textContent = linked === "" ? "" : "waits on " + linked;
-    }
-
-    var plan = document.getElementById("card-dialog-plan");
-    plan.hidden = !card.plan;
-    plan.textContent = card.plan ? "plan " + card.plan : "";
-
     var notes = document.getElementById("card-dialog-notes");
     notes.textContent = "";
     for (var j = 0; j < card.notes.length; j++) {
       var note = card.notes[j];
-      // Who and when on their own line, the sentence under it, a rule between notes:
-      // wrapped prose used to run one note into the next with nothing to separate them.
-      var row = el("li", "board-dialog__note");
-      var head = el("p", "board-dialog__note-head");
-      head.appendChild(el("span", "board-dialog__note-by", note.by));
-      head.appendChild(el("span", "board-dialog__note-at", ago(note.at)));
-      row.appendChild(head);
-      row.appendChild(el("p", "board-dialog__note-text", note.text));
+      // The prose is the record and reads at body size; who wrote it and when is its
+      // footnote, so it follows the sentence instead of standing over it.
+      var row = el("li", N.dialogNote);
+      row.appendChild(el("p", N.dialogNoteText, note.text));
+      var foot = el("p", N.dialogNoteFoot);
+      foot.appendChild(el("span", N.dialogNoteBy, note.by));
+      foot.appendChild(el("span", N.dialogNoteAt, ago(note.at)));
+      row.appendChild(foot);
       notes.appendChild(row);
     }
+    var count = document.getElementById("card-dialog-note-count");
+    if (count) count.textContent = card.notes.length === 0 ? " · none" : " · " + card.notes.length;
     var earlier = document.getElementById("card-dialog-earlier");
     earlier.hidden = card.notesDropped === 0;
     earlier.textContent = card.notesDropped === 0 ? "" : card.notesDropped + " earlier notes dropped";
 
-    // A note is a write, so a viewer's dialog carries none — and its actions are what
-    // board.may leaves, which for a viewer is Close alone.
-    var noteComposer = document.getElementById("card-dialog-note-composer");
-    if (noteComposer) noteComposer.hidden = !canWrite();
-    board.fillDialogActions(card, view);
+    // A modal whose title changes is not announced, so walking with j/k says where it
+    // landed: the position is counted over the cards as they are drawn, not as stored, so
+    // a filter or a folded lane cannot make the number disagree with the screen.
+    var where = document.getElementById("card-dialog-where");
+    if (where) {
+      var drawn = drawnCards();
+      var at = 0;
+      for (var k = 0; k < drawn.length; k++) {
+        if (drawn[k].getAttribute("data-card") === String(card.id)) at = k + 1;
+      }
+      // Opened from the Team tab there is no drawn board to count along, so the line
+      // names the card instead of claiming a position it cannot know.
+      where.textContent = drawn.length === 0 ? card.title : "card " + at + " of " + drawn.length + ": " + card.title;
+    }
   }
 
   /** Paint a whole snapshot. */
@@ -479,17 +506,13 @@ export const BOARD_RENDER_JS = String.raw`(function () {
   };
 
   board.el = el;
+  board.typing = typing;
   board.chip = chip;
   board.actionButton = actionButton;
   board.ago = ago;
   board.findCard = findCard;
-  board.mine = mine;
+  board.drawnCards = drawnCards;
   board.matches = matches;
-  board.canWrite = canWrite;
-  board.priorityOf = priorityOf;
-  board.blockersOf = blockersOf;
-  board.waitingText = waitingText;
-  board.may = may;
   board.fillDialog = fillDialog;
   board.refreshAges = refreshAges;
   board.plural = plural;