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

package/extensions/board/view/render.ts

@@ -1,6 +1,6 @@
 /**
- * The client's renderer: snapshot in, DOM out — the toolbar, the lanes, the cards,
- * and the card dialog's contents.
+ * The client's renderer: snapshot in, DOM out — the toolbar, the lanes, the cards, and the
+ * card dialog's contents.
  *
  * This file runs in the browser, where no type checker sees it, so it holds to one
  * rule: **every value from the snapshot is set as `textContent`** — never as
@@ -9,36 +9,55 @@
  * them.
  *
  * A frame replaces what changed and leaves the rest alone: a lane is rebuilt only
- * when its cards' revisions moved, so the filter input, a collapsed lane, the scroll
- * offset, and an open dialog all survive a peer's write.
+ * when what its cards draw has moved — a revision of their own, or a blocker or a
+ * dependent the rest of the board decides — so the filter input, a collapsed lane, the
+ * scroll 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, `dialog.ts` opens a card, `keys.ts` binds, and `live.ts`
- * owns the frame stream and the wiring.
+ * The client modules share one namespace, `window.bfBoard`: this one paints the whole
+ * frame, `card.ts` draws one card's face, `team.ts` draws the round, `dialog.ts` fills and
+ * opens a card, `keys.ts` binds, and `live.ts` owns the frame stream and the wiring. The
+ * browser runtime (`el`, `typing`, …) is spliced in here, because a page's one global body
+ * is the runtime every fragment reads through `board.`; the note renderer a dialog reads
+ * with is spliced into that fragment instead, so nothing reaches `window` that this page
+ * does not place on `board.`.
  *
- * `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.
+ * `plural`, `tabTitle`, `matchesQuery`, `reasonFor`, `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, a second reason for the same lane, or an element builder and a typing test that
+ * drift from the review page's.
  */
 
 /**
- * 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.
+ * The renderer, with what it needs spliced in: the counts' wording, the tab title's shape,
+ * what a query matches, why a card sits where it does, how many placeholders the skeleton
+ * paints, 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;
+	reason: string;
 	age: string;
+	lanes: string;
+	skipped: string;
+	decisions: string;
+	decisionTones: string;
+	reasonTones: string;
 	runtime: string;
 }): string {
 	return renderTemplate
 		.replace("__PLURAL__", rules.plural)
+		.replace("__SKIPPED__", rules.skipped)
 		.replace("__TAB_TITLE__", rules.tabTitle)
 		.replace("__MATCHES__", rules.matches)
+		.replace("__REASON__", rules.reason)
+		.replace("__LANE_COUNT__", rules.lanes)
+		.replace("__DECISION_RANK__", rules.decisions)
+		.replace("__DECISION_TONES__", rules.decisionTones)
+		.replace("__REASON_TONES__", rules.reasonTones)
 		.replace("__AGE__", rules.age)
 		.replace("__RUNTIME__", rules.runtime);
 }
@@ -47,34 +66,64 @@ const renderTemplate = String.raw`(function () {
   "use strict";
   var board = window.bfBoard || (window.bfBoard = {});
 
-  /** Lanes in the order the server sends them, with the words a reader expects. */
-  var LANE_LABEL = { todo: "To do", doing: "Doing", blocked: "Blocked", done: "Done" };
-  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.
+   * The page holds no lane table: a lane's words, colour, limit, and count arrive with it
+   * from the snapshot, so a head, a picker button, and the transcript cannot name one lane
+   * two ways — the words are decided once, in lib/board/lanes.ts.
+   */
+  /** How many placeholder trays the skeleton paints: the lane table's own length, spliced in. */
+  var LANE_COUNT = __LANE_COUNT__;
+  /**
+   * How many rows a list may show before it starts folded, by list — one table, because two
+   * lists are the same pile and a second threshold is a second answer to "how much is history".
    *
    * 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.
+   * height of the three that carry work: three or four is work a reader still checks, past
+   * six it is history, and the count says how much. The roster has the same problem for the
+   * same reason — a label that ever claimed a card stays an owner for good, so a long
+   * history is a wall of no-record rows — and three is where it stops being a team.
    */
-  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 };
+  var FOLD_AT = { done: 6, roster: 3 };
+
+  /** The same table, for the fragments painted after this one: team folds two lists. */
+  board.foldAt = FOLD_AT;
 
 __RUNTIME__
 
+  /**
+   * The queue's order, its colours, and the tone a reason line wears — spliced in from
+   * lib/board/tone.ts, which the terminal reads through extensions/board/tone.ts. One
+   * table, so a row cannot be the second-strongest reason and the quietest colour.
+   */
+  var DECISION_RANK = __DECISION_RANK__;
+  var DECISION_TONE = __DECISION_TONES__;
+  var REASON_TONE = __REASON_TONES__;
+
+  /** Where a kind sits in the queue: the order the table states, not a copy. */
+  function rankOf(kind) {
+    return DECISION_RANK.indexOf(kind);
+  }
+
+  /** The colour a decision row is drawn in — its edge and its reason line. */
+  function decisionTone(kind) {
+    return DECISION_TONE[kind] || "dim";
+  }
+
+  /** The colour a card's reason line is drawn in, by the kind the rule reported. */
+  function reasonTone(kind) {
+    return REASON_TONE[kind] || "muted";
+  }
+
+
   /**
    * One button that calls back, so nothing on the page is a click handler in markup.
    *
-   * 'plain' is the bordered kit button, 'ghost' the text one: a card's primary
-   * action (Claim, Move) is bordered and the rest are text, which is what makes one
-   * of three controls on a card the obvious one.
+   * The class comes from the caller: a card's title and a lane's head are buttons drawn
+   * by the page's own rule, not by the kit's chip-with-border look — and a card draws no
+   * action button at all, since claiming, moving, and editing are the tools' work.
    */
-  function actionButton(label, onClick, variant) {
-    var kind = variant === "plain" ? "" : variant ? " bf-btn--" + variant : " bf-btn--ghost";
-    var node = el("button", "bf-btn" + kind, label);
+  function actionButton(className, label, onClick) {
+    var node = el("button", className, label);
     node.type = "button";
     node.addEventListener("click", onClick);
     return node;
@@ -115,99 +164,6 @@ __RUNTIME__
     return undefined;
   }
 
-  /** 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.
-    // 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") {
-      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", N.cardPaths);
-    var shown = card.paths.slice(0, limit);
-    for (var i = 0; i < shown.length; i++) {
-      var item = el("li", "");
-      item.appendChild(chip(shown[i]));
-      list.appendChild(item);
-    }
-    if (card.paths.length > limit) {
-      var rest = el("li", "");
-      rest.appendChild(chip("+" + (card.paths.length - limit)));
-      list.appendChild(rest);
-    }
-    return list;
-  }
-
-  /** One card in its lane. */
-  function cardNode(card, view) {
-    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", N.cardHead);
-    head.appendChild(el("span", N.cardId, "#" + card.id));
-    var title = actionButton(card.title, function () {
-      board.openCard(card.id);
-    });
-    title.className = N.cardTitle;
-    head.appendChild(title);
-    item.appendChild(head);
-
-    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 (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));
-    age.setAttribute("data-at", String(card.updatedAt));
-    meta.appendChild(age);
-    item.appendChild(meta);
-
-    if (card.paths.length > 0) item.appendChild(paths(card, PATH_CHIPS));
-
-    var reason = reasonOf(card, view);
-    if (reason) {
-      // 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);
-    }
-
-    return item;
-  }
-
   /**
    * The cards as the page draws them.
    *
@@ -226,40 +182,55 @@ __RUNTIME__
     return seen;
   }
 
-  /** The toolbar's identity, progress, footer, and the tab's own name. */
+  /** The toolbar's subject, its progress, the 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 = "This page is served as " + view.me.label + ", and it cannot change a card";
+    // The board's subject, which the header carries: the repository's name, with the root's
+    // whole path on the hover, because a name alone cannot tell two clones of one repository
+    // apart. It arrives in the document too, so the toolbar is complete before the first
+    // frame; this keeps it true if a frame ever names a different store.
+    var repo = document.getElementById("board-repo");
+    if (repo) {
+      repo.textContent = view.repo;
+      repo.title = view.root;
     }
     var progress = document.getElementById("board-progress");
+    var done = laneOf(view, "done");
+    var finished = done === undefined ? 0 : done.cards.length;
     if (progress) {
-      var total = view.counts.total;
+      var total = view.total;
       // One or two cards is not a ratio: an empty bar beside "0/1 done" is noise.
       progress.hidden = total < 3;
       var fill = document.getElementById("board-progress-fill");
-      if (fill) fill.style.width = total === 0 ? "0%" : Math.round((view.counts.done / total) * 100) + "%";
+      if (fill) fill.style.width = total === 0 ? "0%" : Math.round((finished / total) * 100) + "%";
       var text = document.getElementById("board-progress-text");
-      if (text) text.textContent = view.counts.done + "/" + total + " done";
+      if (text) text.textContent = finished + "/" + total + " done";
     }
     var where = document.getElementById("board-where");
     if (where) {
-      // 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.
+      // The footer adds only what the header does not: which store these cards are filed
+      // under, how many, and what they weigh. A footer that only counted read cards would
+      // say "2 cards" over a directory holding three files, so the refused ones are counted
+      // beside the size and named with the store's own reason on the hover — the line has no
+      // room for a file and a reason each, and a count alone is a fact a reader cannot act on.
       where.textContent =
-        "store " + view.where + " · " + plural(view.counts.total, "card") + " · " + size(view.bytes) +
-        (view.skipped > 0 ? " · " + plural(view.skipped, "unreadable") : "");
+        "store " + view.where + " · " + plural(view.total, "card") + " · " + size(view.bytes) +
+        (view.skipped.length > 0 ? " · " + plural(view.skipped.length, "card") + " could not be read" : "");
+      if (view.skipped.length > 0) where.title = skippedText(view.skipped);
+      else where.removeAttribute("title");
     }
-    // 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);
+    // The tab has to tell two boards apart, and a board's subject is its repository: one
+    // board per repository, named the way the directory holding it is. The store key is a
+    // hash, which no reader can say out loud, so it is not what a tab leads with. The count
+    // is what a browser full of tabs is read for, and an empty board says nothing rather
+    // than 0.
+    var open = view.total - finished;
+    document.title = tabTitle("board", view.repo, open > 0 ? open + " open" : undefined);
   }
 
   /** 1 card, 2 cards — the one body, handed in by the bundle's assembler. */
   var plural = __PLURAL__;
+  /** The refused files, named with their reasons: the tool's own sentence, handed in. */
+  var skippedText = __SKIPPED__;
   /** board · my-pi-agent · 3 open, the tab's one shape, handed in the same way. */
   var tabTitle = __TAB_TITLE__;
 
@@ -270,44 +241,90 @@ __RUNTIME__
    * writing to the cards would slowly lie about how long they have sat there. The
    * ticker calls this; it touches nothing else, so a filter, a folded lane, or an
    * open dialog survives it.
+   *
+   * A stamp carries its own wording ("updated {age}", "last note {age} by …"), because a
+   * card now shows two ages and a ticker that assumed one of them would relabel the other.
    */
   function refreshAges() {
     var nodes = document.querySelectorAll("[data-at]");
     for (var i = 0; i < nodes.length; i++) {
       var next = ago(Number(nodes[i].getAttribute("data-at")));
       if (nodes[i].textContent !== next) nodes[i].textContent = next;
+      var wording = nodes[i].getAttribute("data-at-title");
+      if (wording !== null) nodes[i].title = board.sentence(wording, next);
     }
   }
 
   /** 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. */
+  /** Why a card sits where it does: one body, spliced in from lib/board/reason.ts. */
+  var reasonFor = __REASON__;
+
+  /** One lane from the snapshot, by its name; absent when the snapshot no longer has it. */
+  function laneOf(view, key) {
+    for (var i = 0; i < view.lanes.length; i++) if (view.lanes[i].key === key) return view.lanes[i];
+    return undefined;
+  }
+
+  /** A lane head's count: n/limit while the lane is pulled, and n otherwise. */
+  function headCount(lane) {
+    return lane.limit === undefined ? String(lane.count) : lane.count + "/" + lane.limit;
+  }
+
+  /**
+   * The same count, in words a screen reader can read.
+   *
+   * The pill prints "1/3" because an eye takes the slash in at a glance; spoken, it is
+   * punctuation between two numbers. The heading therefore names itself from the same
+   * facts -- "Plan, 1 of 3" -- and the pill keeps the shape.
+   */
+  function headLabel(lane, shown) {
+    if (shown !== undefined) return lane.label + ", " + shown + " of " + lane.cards.length;
+    if (lane.limit !== undefined) return lane.label + ", " + lane.count + " of " + lane.limit;
+    return lane.label + ", " + plural(lane.count, "card");
+  }
+
+  /** The lane section for one lane, created once and then reused. */
   function laneNode(lane) {
-    var section = document.querySelector('.board-lane[data-status="' + lane.status + '"]');
+    var section = document.querySelector('.board-lane[data-lane="' + lane.key + '"]');
     if (section) return section;
     section = el("section", N.lane);
-    section.setAttribute("data-status", lane.status);
+    section.setAttribute("data-lane", lane.key);
     var head = el("h2", N.laneHead);
-    var toggle = actionButton(LANE_LABEL[lane.status] || lane.status, function () {
-      board.toggleLane(lane.status);
+    var toggle = actionButton(N.laneToggle, lane.label, function () {
+      board.toggleFold(lane.key);
     });
-    toggle.className = N.laneToggle;
+    toggle.setAttribute("data-fold", lane.key);
     toggle.setAttribute("aria-expanded", "true");
-    toggle.setAttribute("aria-controls", "lane-" + lane.status);
-    toggle.id = "lane-head-" + lane.status;
+    toggle.setAttribute("aria-controls", "lane-" + lane.key);
+    toggle.id = "lane-head-" + lane.key;
     head.appendChild(el("span", N.laneDot));
     head.appendChild(toggle);
     head.appendChild(el("span", N.laneCount));
     section.appendChild(head);
     var list = el("ol", N.laneList);
-    list.id = "lane-" + lane.status;
+    list.id = "lane-" + lane.key;
     section.appendChild(list);
-    section.appendChild(el("p", N.laneEmpty, LANE_EMPTY[lane.status] || "nothing"));
+    section.appendChild(el("p", N.laneEmpty, lane.empty));
     return section;
   }
 
-  /** Draw the lanes, rebuilding only one whose cards actually moved. */
+  /**
+   * What one face is drawn from: the card's own revision, and the two facts about it that
+   * the rest of the board decides.
+   *
+   * A face prints what the card waits for and what it holds up, both derived from other
+   * cards, so a blocker finished in another lane moves nothing in this card's record — and
+   * a lane keyed on revisions alone kept a sentence the board had already left behind. The
+   * Team tab's queue carries its rows' reasons the same way: a signature lists the facts a
+   * row prints, not just the row's own file.
+   */
+  function faceSig(card) {
+    return card.id + ":" + card.rev + "|" + (card.waits || "") + "|" + (card.dependents || "");
+  }
+
+  /** Draw the lanes, rebuilding only one whose faces actually moved. */
   function renderLanes(view) {
     var lanes = document.getElementById("board-lanes");
     if (!lanes) return;
@@ -317,9 +334,7 @@ __RUNTIME__
       lanes.removeAttribute("data-skeleton");
     }
     var query = board.query || "";
-    var empty = document.getElementById("board-no-cards");
-    if (empty) empty.hidden = view.counts.total !== 0;
-    lanes.hidden = view.counts.total === 0;
+    var shownTotal = 0;
     for (var i = 0; i < view.lanes.length; i++) {
       var lane = view.lanes[i];
       var section = laneNode(lane);
@@ -327,9 +342,9 @@ __RUNTIME__
       // 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) {
+      if (lane.key === "done" && lane.cards.length >= FOLD_AT.done) {
         board.collapsed = board.collapsed || {};
-        if (board.collapsed[lane.status] === undefined) board.collapsed[lane.status] = true;
+        if (board.collapsed[lane.key] === undefined) board.collapsed[lane.key] = 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,
@@ -340,25 +355,29 @@ __RUNTIME__
       // 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;
+      shownTotal += shown.length;
+      var sig = lane.cards.map(faceSig).join(",") + "|" + query;
       if (section.getAttribute("data-sig") !== sig) {
         section.setAttribute("data-sig", sig);
         var list = section.querySelector(".board-lane__list");
         list.textContent = "";
-        for (var j = 0; j < shown.length; j++) list.appendChild(cardNode(shown[j], view));
+        for (var j = 0; j < shown.length; j++) list.appendChild(board.cardNode(shown[j]));
       }
       var count = section.querySelector(".board-lane__count");
+      var head = section.querySelector(".board-lane__head");
       if (count) {
-        count.textContent = query === "" || shown.length === lane.cards.length
-          ? String(lane.cards.length)
-          : shown.length + "/" + lane.cards.length;
+        var filtered = query !== "" && shown.length !== lane.cards.length;
+        count.textContent = filtered ? shown.length + "/" + lane.cards.length : headCount(lane);
+        // The visible pill and the spoken name come from the same numbers, so a filtered lane
+        // says "1 of 2" rather than reading as a board of one card.
+        if (head) head.setAttribute("aria-label", headLabel(lane, filtered ? shown.length : undefined));
       }
       var none = section.querySelector(".board-lane__empty");
       if (none) {
         none.hidden = shown.length !== 0;
-        none.textContent = query !== "" && lane.cards.length > 0 ? "no match" : LANE_EMPTY[lane.status] || "nothing";
+        none.textContent = query !== "" && lane.cards.length > 0 ? "no match" : lane.empty;
       }
-      var collapsed = board.collapsed && board.collapsed[lane.status] === true;
+      var collapsed = board.collapsed && board.collapsed[lane.key] === 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
@@ -368,6 +387,7 @@ __RUNTIME__
       var toggle = section.querySelector(".board-lane__toggle");
       if (toggle) toggle.setAttribute("aria-expanded", String(!collapsed));
     }
+    board.renderEmpty(view, query, shownTotal);
     renderPicker(view);
   }
 
@@ -378,118 +398,33 @@ __RUNTIME__
     picker.textContent = "";
     for (var i = 0; i < view.lanes.length; i++) {
       (function (lane) {
-        var item = el("button", "bf-segmented__item", (LANE_LABEL[lane.status] || lane.status) + " " + lane.cards.length);
+        // A lane switch, not a tablist: it shows one lane and there is no tabpanel behind
+        // each button, so the pressed state is the honest one rather than a tab without its
+        // panel. The counts stay on the face, where a reader chooses by them.
+        var item = el("button", "bf-segmented__item", lane.label + " " + headCount(lane));
         item.type = "button";
-        item.setAttribute("role", "tab");
-        item.setAttribute("data-lane", lane.status);
-        item.addEventListener("click", function () { board.showLane(lane.status); });
+        item.setAttribute("data-picker-lane", lane.key);
+        item.addEventListener("click", function () { board.showLane(lane.key); });
         picker.appendChild(item);
       })(view.lanes[i]);
     }
     board.applyLane();
   }
 
-  /** 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;
-
-    // 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));
-
-    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", "");
-      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);
-      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 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;
-    }
+  /**
+   * Put focus back on the control a reader just moved.
+   *
+   * A fold repaints the panel it lives in, so the element that was clicked is gone by the
+   * time the frame lands and focus would fall to the document — a reader who folds with the
+   * keyboard would then start again from the top of the page. toggleFold records the key
+   * and each control names itself with it, so this is the whole lookup.
+   */
+  function restoreFoldFocus() {
+    var key = board.foldFocus;
+    if (key === undefined) return;
+    board.foldFocus = undefined;
+    var control = document.querySelector('[data-fold="' + key + '"]');
+    if (control) control.focus();
   }
 
   /** Paint a whole snapshot. */
@@ -498,22 +433,29 @@ __RUNTIME__
     renderChrome(view);
     renderLanes(view);
     board.renderTeam(view);
-    if (board.openId !== undefined) {
-      var card = findCard(view, board.openId);
-      if (card) fillDialog(card, view);
-      else board.closeCard();
-    }
+    // The dialog module keeps an open record current — or closes it when its card left the
+    // frame — so the panel and the board cannot disagree about one card.
+    board.syncDialog(view);
+    // The marks are painted after the frame, not with each card: a lane is rebuilt whole
+    // when its cards move, and a reader's place must survive that.
+    board.markCards();
+    // Last, because the control it looks for is one this frame has just built.
+    restoreFoldFocus();
   };
 
   board.el = el;
   board.typing = typing;
   board.chip = chip;
-  board.actionButton = actionButton;
   board.ago = ago;
   board.findCard = findCard;
   board.drawnCards = drawnCards;
   board.matches = matches;
-  board.fillDialog = fillDialog;
+  board.reasonFor = reasonFor;
+  board.rankOf = rankOf;
+  board.decisionTone = decisionTone;
+  board.reasonTone = reasonTone;
+  board.laneCount = LANE_COUNT;
+  board.laneOf = laneOf;
   board.refreshAges = refreshAges;
   board.plural = plural;
 })();`;