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

package/extensions/board/view/dialog.ts

@@ -1,19 +1,177 @@
 /**
  * The card dialog: one card, whole, as a read view.
  *
- * Opening, closing, and forgetting which card is open is the whole of it. The page
- * cannot change a card, so this module has no request, no confirmation, no banner and
- * no footer actions — the dialogs it used to fill are gone from the document, and the
- * only way a card changes is a tool.
+ * Filling it, opening it, and forgetting which card is open is the whole of it. `render.ts`
+ * paints the board and hands each frame to {@link syncDialog}, which keeps an open record
+ * current and closes it when its card has left the board. The page cannot change a card, so
+ * this module has no request, no confirmation, no banner and no footer actions — the dialogs
+ * it used to fill are gone from the document, and the only way a card changes is a tool.
+ *
+ * A note is the one field that is not a `textContent` write: its prose is Markdown, read by
+ * the kit's one inline renderer (`lib/web/markdown.ts`), which appends text nodes and the
+ * four inline atoms and never parses markup. That renderer is spliced into this fragment
+ * rather than the bundle's top level — it is only ever read here, and inside this closure it
+ * resolves `el` to `board.el` instead of making the page's builder a `window` global.
+ * Everything else here is set as text, like the rest of the page.
  *
  * The one thing it must not do is leave a stale panel behind: a dialog the kit closed —
  * `Esc`, a backdrop click, its own close button — forgets `openId`, so the next frame
  * stops filling something nobody can see.
  */
 
-export const BOARD_DIALOG_JS = String.raw`(function () {
+/**
+ * The dialog fragment, with the inline Markdown renderer a note is read through spliced in.
+ *
+ * The source crosses the boundary as text, because `lib/web/markdown.ts` is JavaScript and a
+ * page's bundle has no import graph; `__INLINE_MARKDOWN__` is a rule a served script must
+ * never carry, and `pages.test` fails an unfilled one.
+ */
+export function dialogJs(rules: { inlineMarkdown: string }): string {
+	return dialogTemplate.replace("__INLINE_MARKDOWN__", rules.inlineMarkdown);
+}
+
+const dialogTemplate = String.raw`(function () {
   "use strict";
   var board = window.bfBoard || (window.bfBoard = {});
+  var el = board.el;
+  var chip = board.chip;
+  var ago = board.ago;
+
+__INLINE_MARKDOWN__
+
+  /** Fill the 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");
+    var lane = board.laneOf(view, card.lane);
+    state.setAttribute("data-lane", card.lane);
+    state.textContent = lane === undefined ? card.lane : lane.label;
+
+    // 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"));
+    pair("owner", true);
+
+    var priority = pair("priority", card.priority !== "normal");
+    priority.textContent = "";
+    if (card.priority !== "normal") priority.appendChild(chip(card.priority, "outline"));
+
+    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.lane + " \u00b7 " + 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.planPath), card.planPath || "", card.planPath || undefined);
+
+    // The contract is three lines and a signature, and each is its own rung: a reader
+    // comparing what was promised with what was done reads them one at a time, and the
+    // approval's age is the fact that says whether anybody has looked.
+    var contract = card.contract;
+    setRow("goal", Boolean(contract), contract ? contract.goal : "", contract ? contract.goal : undefined);
+    setRow("acceptance", Boolean(contract), contract ? contract.acceptance : "", contract ? contract.acceptance : undefined);
+    setRow("scope-out", Boolean(contract), contract ? contract.scopeOut : "", contract ? contract.scopeOut : undefined);
+    var approved = contract && contract.approved;
+    setRow("approved", Boolean(approved), approved ? approved.by + " \u00b7 " + ago(approved.at) : "");
+    setRow("reviewed", card.review !== undefined, card.review ? card.review.by + " \u00b7 " + ago(card.review.at) : "");
+
+    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", "");
+      var hint = chip(card.paths[i]);
+      hint.className += " " + N.dialogPath;
+      hint.title = card.paths[i];
+      item.appendChild(hint);
+      pathList.appendChild(item);
+    }
+
+    var notes = document.getElementById("card-dialog-notes");
+    notes.textContent = "";
+    for (var j = 0; j < card.notes.length; j++) {
+      var note = card.notes[j];
+      // 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);
+      // A note is Markdown, read by the kit's one inline renderer: a backtick, a bold word,
+      // or an ordinary URL reads as what it says, a target the policy refuses stays text,
+      // and nothing a person typed can become markup.
+      var text = el("p", N.dialogNoteText);
+      renderInline(text, note.text);
+      row.appendChild(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 ? " \u00b7 none" : " \u00b7 " + 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 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 = board.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;
+    }
+  }
+
+  /**
+   * Keep an open record current: fill it from the frame, or close it when its card left.
+   *
+   * The frame owns this rather than the open handler: a peer's note moves the card's
+   * revision, and a panel left showing the record it was opened with is a page that lies
+   * for as long as the tab stays open.
+   */
+  board.syncDialog = function (view) {
+    if (board.openId === undefined) return;
+    var card = board.findCard(view, board.openId);
+    if (card) fillDialog(card, view);
+    else board.closeCard();
+  };
 
   /** Fill and open the card dialog. */
   board.openCard = function (id) {
@@ -22,7 +180,12 @@ export const BOARD_DIALOG_JS = String.raw`(function () {
     var card = board.findCard(view, id);
     if (!card || !window.bfCard) return;
     board.openId = id;
-    board.fillDialog(card, view);
+    // A card a reader opened is one they have read, and it is where they are: the board
+    // paints both marks from these two fields, so closing the record leaves the place.
+    board.visited[id] = true;
+    board.current = id;
+    fillDialog(card, view);
+    board.markCards();
     window.bfCard.open();
   };
 

package/extensions/board/view/empty.ts

@@ -0,0 +1,47 @@
+/**
+ * The board's two empty states: no cards at all, and a filter that matches none.
+ *
+ * Both reuse the one block the document already carries (`#board-no-cards`), because the
+ * difference between them is a sentence and one button, not a second layout. They live in
+ * their own fragment so the renderer stays the painter of cards and lanes: an empty board is
+ * a statement about the whole board, and it is the one part of the page that says a thing
+ * instead of drawing one.
+ *
+ * Same rule as the rest of the client: every value arrives as `textContent`, and the query
+ * the reader typed is one of them.
+ */
+
+export const BOARD_EMPTY_JS = String.raw`(function () {
+  "use strict";
+  var board = window.bfBoard || (window.bfBoard = {});
+
+  /**
+   * What the board says when there is nothing to read.
+   *
+   * Two different emptinesses. No cards at all is the board's own state, and it teaches the
+   * verb that fills it. A filter that matches none of them is the reader's own query: the
+   * lanes go, because five trays saying "no match" read as a board with no work, and the way
+   * back is one button rather than a key a reader has to remember.
+   */
+  board.renderEmpty = function (view, query, shownTotal) {
+    var block = document.getElementById("board-no-cards");
+    if (!block) return;
+    var lanes = document.getElementById("board-lanes");
+    var noCards = view.total === 0;
+    var noMatch = !noCards && query !== "" && shownTotal === 0;
+    block.hidden = !noCards && !noMatch;
+    if (lanes) lanes.hidden = noCards || noMatch;
+    var title = document.getElementById("board-no-cards-title");
+    var sub = document.getElementById("board-no-cards-sub");
+    var hint = document.getElementById("board-no-cards-hint");
+    var clear = document.getElementById("board-no-match-clear");
+    if (title) title.textContent = noMatch ? "No card matches \u201c" + query + "\u201d" : "No cards yet";
+    if (sub) {
+      sub.textContent = noMatch
+        ? "The filter reads a title, its owner, a path, a plan, and the notes."
+        : "One card per feature: what it delivers, who holds it, and where to start.";
+    }
+    if (hint) hint.hidden = noMatch;
+    if (clear) clear.hidden = !noMatch;
+  };
+})();`;

package/extensions/board/view/keys.ts

@@ -65,7 +65,12 @@ export const BOARD_KEYS_JS = String.raw`(function () {
     if (walk(delta)) return;
     var drawn = cards();
     if (drawn.length === 0) return;
-    var at = drawn.indexOf(document.activeElement);
+    // Focus sits on a card's title button, not on the card, so the step reads the card that
+    // holds it: an index of -1 for every card made j from one land on the first card in the
+    // lane instead of the next — which is the place a reader lost when they came back.
+    var here = document.activeElement;
+    var card = here && here.closest ? here.closest(".board-card") : null;
+    var at = card === null ? -1 : drawn.indexOf(card);
     var next = at < 0 ? (delta > 0 ? 0 : drawn.length - 1) : (at + delta + drawn.length) % drawn.length;
     var button = drawn[next].querySelector(".board-card__title");
     if (button) button.focus();
@@ -75,7 +80,11 @@ export const BOARD_KEYS_JS = String.raw`(function () {
     doc.addEventListener("keydown", function (event) {
       if (event.metaKey || event.ctrlKey || event.altKey) return;
       var target = event.target;
-      if (event.key === "?" && !typing(target)) {
+      // A dialog is modal for the pointer and for the keyboard alike: "/", "t", and "?"
+      // reach the page behind the scrim from nowhere else, so a modal keeps them and the
+      // keys that move inside it -- j, k, Enter, Esc -- are the ones still read.
+      var modal = (board.dialogOpen && board.dialogOpen()) || (board.keysOpen && board.keysOpen());
+      if (event.key === "?" && !typing(target) && !modal) {
         event.preventDefault();
         board.openKeys();
         return;
@@ -108,6 +117,7 @@ export const BOARD_KEYS_JS = String.raw`(function () {
         return;
       }
       if (event.key === "/") {
+        if (modal) return;
         event.preventDefault();
         board.focusFilter();
       } else if (event.key === "j") {
@@ -117,6 +127,7 @@ export const BOARD_KEYS_JS = String.raw`(function () {
         event.preventDefault();
         step(-1);
       } else if (event.key === "t") {
+        if (modal) return;
         event.preventDefault();
         board.showView(board.viewName() === "team" ? "board" : "team");
       }

package/extensions/board/view/live.ts

@@ -3,20 +3,15 @@
  *
  * A frame is a whole snapshot, so every message repaints from it rather than patching
  * it — the renderer decides what actually changed. The only client state is which tab
- * is showing, the filter text, which lanes are collapsed, and which card's dialog is
- * open; none of it is authoritative, and none of it is sent anywhere.
+ * is showing, the filter text, which lanes are collapsed, which card's dialog is open,
+ * and where the reader is on the board — the card they are on and the ones they have
+ * read; none of it is authoritative, and none of it is sent anywhere.
  */
 
 export const BOARD_LIVE_JS = String.raw`(function () {
   "use strict";
   var board = window.bfBoard || (window.bfBoard = {});
   var token = new URLSearchParams(window.location.search).get("token") || "";
-  var LANE_LABEL = { todo: "To do", doing: "Doing", blocked: "Blocked", done: "Done" };
-
-  /** The lane's word, for the dialog's move buttons. */
-  board.laneLabel = function (lane) {
-    return LANE_LABEL[lane] || lane;
-  };
 
   /** The badge's text and its kit status role: connecting, live, reconnecting. */
   function badge(state, at) {
@@ -34,7 +29,7 @@ export const BOARD_LIVE_JS = String.raw`(function () {
     else node.textContent = "connecting…";
   }
 
-  /** Show one tab: the panel, aria-current, and the address so a link is shareable. */
+  /** Show one tab: the panel, the selected tab, and the address so a link is shareable. */
   function showView(view) {
     var team = view === "team";
     document.documentElement.setAttribute("data-view", team ? "team" : "board");
@@ -43,14 +38,40 @@ export const BOARD_LIVE_JS = String.raw`(function () {
     var tabs = document.querySelectorAll("[data-view][role='tab']");
     for (var i = 0; i < tabs.length; i++) {
       var current = tabs[i].getAttribute("data-view") === (team ? "team" : "board");
-      if (current) tabs[i].setAttribute("aria-current", "page");
-      else tabs[i].removeAttribute("aria-current");
+      // A tablist is read through aria-selected, and a roving tabindex is what makes one
+      // Tab land on the strip rather than on each tab in turn. Both are the markup's own
+      // attributes: a state painted only in a class is a state a screen reader cannot read.
+      tabs[i].setAttribute("aria-selected", current ? "true" : "false");
+      tabs[i].setAttribute("tabindex", current ? "0" : "-1");
     }
     var url = new URL(window.location.href);
     url.searchParams.set("view", team ? "team" : "board");
     window.history.replaceState(null, "", url.toString());
   }
 
+  /**
+   * Arrow keys move along the tab strip, the way a tablist is expected to behave.
+   *
+   * Automatic activation: the panels are both in the document already, so showing one is a
+   * hidden attribute rather than a request, and a reader who arrows across the strip sees
+   * each tab he lands on. Home and End are the ends of it.
+   */
+  function bindTabKeys(tabs) {
+    for (var i = 0; i < tabs.length; i++) {
+      tabs[i].addEventListener("keydown", function (event) {
+        var names = ["ArrowLeft", "ArrowRight", "Home", "End"];
+        if (names.indexOf(event.key) === -1) return;
+        event.preventDefault();
+        var at = 0;
+        for (var j = 0; j < tabs.length; j++) if (tabs[j] === event.currentTarget) at = j;
+        var step = event.key === "ArrowLeft" ? -1 : 1;
+        var next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (at + step + tabs.length) % tabs.length;
+        showView(tabs[next].getAttribute("data-view"));
+        tabs[next].focus();
+      });
+    }
+  }
+
   board.viewName = function () {
     return document.documentElement.getAttribute("data-view") === "team" ? "team" : "board";
   };
@@ -60,27 +81,40 @@ export const BOARD_LIVE_JS = String.raw`(function () {
     var narrow = window.matchMedia && window.matchMedia("(max-width: 860px)").matches;
     var lanes = document.querySelectorAll(".board-lane");
     for (var i = 0; i < lanes.length; i++) {
-      var selected = lanes[i].getAttribute("data-status") === board.lane;
+      var selected = lanes[i].getAttribute("data-lane") === board.shown;
       lanes[i].hidden = narrow && !selected;
     }
-    var items = document.querySelectorAll("#board-picker [data-lane]");
+    var items = document.querySelectorAll("#board-picker [data-picker-lane]");
     for (var j = 0; j < items.length; j++) {
-      if (items[j].getAttribute("data-lane") === board.lane) items[j].setAttribute("aria-current", "page");
-      else items[j].removeAttribute("aria-current");
+      // A pressed button, because the picker shows one lane rather than joining a tablist:
+      // "true" is the lane a reader is looking at, and the kit paints it from this state.
+      items[j].setAttribute("aria-pressed", items[j].getAttribute("data-picker-lane") === board.shown ? "true" : "false");
     }
   }
 
   board.applyLane = applyLane;
 
   board.showLane = function (lane) {
-    board.lane = lane;
+    board.shown = lane;
     applyLane();
   };
 
-  /** Fold a lane's cards away and leave its head, count and all. */
-  board.toggleLane = function (status) {
+  /**
+   * Fold one list away and leave its control standing.
+   *
+   * Three things on the page fold: a lane, the roster's tail of owners nothing answers to, and
+   * the Done strip. They share one map, and a key says which kind it is: a lane keeps its own
+   * name, and the two the Team tab owns are team-roster and team-done, because done is
+   * already a lane.
+   *
+   * The key is also recorded, because the panel a fold lives in is repainted: the element the
+   * reader clicked no longer exists when the frame lands, and the renderer focuses
+   * data-fold="<key>" to put the keyboard back where it was.
+   */
+  board.toggleFold = function (key) {
     board.collapsed = board.collapsed || {};
-    board.collapsed[status] = board.collapsed[status] !== true;
+    board.collapsed[key] = board.collapsed[key] !== true;
+    board.foldFocus = key;
     if (board.view) board.render(board.view);
   };
 
@@ -127,14 +161,14 @@ export const BOARD_LIVE_JS = String.raw`(function () {
    * The grey cards a page shows while it waits for its first frame.
    *
    * They are marked as placeholders rather than given a lane status: the renderer
-   * looks lanes up by data-status, so a skeleton that carried one would be adopted
+   * looks lanes up by data-lane, so a skeleton that carried one would be adopted
    * as the real lane and the cards would never be drawn into it.
    */
   function skeletons() {
     var lanes = document.getElementById("board-lanes");
     if (!lanes || lanes.childElementCount > 0) return;
     lanes.setAttribute("data-skeleton", "1");
-    for (var i = 0; i < 4; i++) {
+    for (var i = 0; i < board.laneCount; i++) {
       var lane = board.el("section", N.lane);
       for (var j = 0; j < 2; j++) lane.appendChild(board.el("div", N.skeleton));
       lanes.appendChild(lane);
@@ -143,25 +177,25 @@ export const BOARD_LIVE_JS = String.raw`(function () {
 
   /**
    * The lane a narrow reader lands on: the first with a card in it, else the first
-   * lane. Opening on an empty To do while the only card sits in Blocked is a blank
+   * lane. Opening on an empty Backlog while the only card sits in Blocked is a blank
    * page with a picker nobody has a reason to press.
    */
   function laneWithWork(view) {
-    for (var i = 0; i < view.lanes.length; i++) if (view.lanes[i].cards.length > 0) return view.lanes[i].status;
-    return view.lanes[0] ? view.lanes[0].status : "todo";
+    for (var i = 0; i < view.lanes.length; i++) if (view.lanes[i].cards.length > 0) return view.lanes[i].key;
+    return view.lanes[0] ? view.lanes[0].key : "backlog";
   }
 
   /** One frame: paint and record when it arrived. */
   function paint(view) {
     board.lastFrame = Date.now();
-    board.lane = board.lane || laneWithWork(view);
+    board.shown = board.shown || laneWithWork(view);
     badge("live", board.lastFrame);
     board.render(view);
   }
 
   /** The live channel: a reconnect is the browser's own retry, not a second request. */
   function stream() {
-    var source = new EventSource("/events?token=" + encodeURIComponent(token));
+    var source = new EventSource(pageBase() + "/events?token=" + encodeURIComponent(token));
     source.onopen = function () {
       badge("live", board.lastFrame);
     };
@@ -187,16 +221,36 @@ export const BOARD_LIVE_JS = String.raw`(function () {
         board.applyFilter();
       });
     }
+    // The no-match state's one control: a view action, like the tab switch, and it puts the
+    // reader back in the field they were typing in.
+    var clear = document.getElementById("board-no-match-clear");
+    if (clear) {
+      clear.addEventListener("click", function () {
+        board.clearFilter();
+        board.focusFilter();
+      });
+    }
     var tabs = document.querySelectorAll("[data-view][role='tab']");
     for (var i = 0; i < tabs.length; i++) {
       tabs[i].addEventListener("click", function (event) {
         showView(event.currentTarget.getAttribute("data-view"));
       });
     }
+    bindTabKeys(tabs);
+    // A card's title button takes the keyboard from j/k, a Tab, or a click, and the mark
+    // follows focus rather than the key that moved it. A focus outside the cards leaves the
+    // last card marked, which is what a reader coming back from the filter expects.
+    document.addEventListener("focusin", function (event) {
+      var node = event.target;
+      var card = node && node.closest ? node.closest(".board-card") : null;
+      if (!card) return;
+      board.current = card.getAttribute("data-card");
+      board.markCards();
+    });
     var picker = document.getElementById("board-picker");
     if (picker) {
       picker.addEventListener("click", function (event) {
-        var lane = event.target && event.target.getAttribute ? event.target.getAttribute("data-lane") : null;
+        var lane = event.target && event.target.getAttribute ? event.target.getAttribute("data-picker-lane") : null;
         if (lane) board.showLane(lane);
       });
     }
@@ -218,10 +272,18 @@ export const BOARD_LIVE_JS = String.raw`(function () {
   }
 
   board.start = function () {
-    board.lane = undefined;
+    board.shown = undefined;
     board.openId = undefined;
     board.query = "";
     board.collapsed = {};
+    // The fold a reader just moved, and the panels' remembered signatures: both belong to the
+    // tab, and a fresh tab is a fresh read of what the store holds.
+    board.foldFocus = undefined;
+    board.teamPanels = undefined;
+    // Where the reader is and has been: the two marks a card face can wear, which live as
+    // long as the tab does and never reach the store.
+    board.current = undefined;
+    board.visited = {};
     showView(new URLSearchParams(window.location.search).get("view") === "team" ? "team" : "board");
     wireChrome();
     skeletons();

package/extensions/board/view/names.ts

@@ -35,16 +35,23 @@ export const BOARD_CLASS = {
 	laneList: "board-lane__list",
 	laneEmpty: "board-lane__empty",
 
-	// One card, and the two tones its reason line can take.
+	// One card, the facts its meta line carries, and the two tones its reason line can take.
 	card: "board-card",
 	cardHead: "board-card__head",
 	cardId: "board-card__id",
 	cardTitle: "board-card__title",
 	cardMeta: "board-card__meta",
+	cardNotes: "board-card__notes",
 	cardPaths: "board-card__paths",
 	cardReason: "board-card__reason",
-	cardReasonBlocked: "board-card__reason--blocked",
-	cardReasonUnplanned: "board-card__reason--unplanned",
+	// One class per tone, never per reason kind: the same tone is what the terminal paints.
+	cardReasonMuted: "board-card__reason--muted",
+	cardReasonDim: "board-card__reason--dim",
+	cardReasonWarn: "board-card__reason--warn",
+	cardReasonAccent: "board-card__reason--accent",
+	cardReasonDanger: "board-card__reason--danger",
+	cardReasonSuccess: "board-card__reason--success",
+	cardHolds: "board-card__holds",
 
 	// The card dialog: the record of one card, as a ladder of facts and its notes.
 	dialogPanel: "board-dialog__panel",
@@ -79,7 +86,6 @@ export const BOARD_CLASS = {
 	teamTitle: "board-team__title",
 	teamFoot: "board-team__foot",
 	teamWhy: "board-team__why",
-	teamWhyBlocked: "board-team__why--blocked",
 	teamRoster: "board-team__roster",
 	teamMate: "board-team__mate",
 	teamDot: "board-team__dot",
@@ -88,4 +94,7 @@ export const BOARD_CLASS = {
 	teamEmpty: "board-team__empty",
 	teamDone: "board-team__done",
 	teamId: "board-team__id",
+	teamDoneIds: "board-team__ids",
+	teamTail: "board-team__tail",
+	teamFold: "board-team__fold",
 } as const satisfies Readonly<Record<string, string>>;