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

package/extensions/board/view/live.ts

@@ -3,8 +3,9 @@
  *
  * 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 () {
@@ -28,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");
@@ -37,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";
   };
@@ -54,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);
   };
 
@@ -121,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);
@@ -137,18 +177,18 @@ 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);
   }
@@ -181,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);
       });
     }
@@ -212,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>>;

package/extensions/board/view/page.ts

@@ -13,6 +13,7 @@
  * contract test holds every class to the kit or to this page's stylesheet.
  */
 
+import { escapeHtml } from "../../../lib/escape.ts";
 import {
 	baseAttribute,
 	brandLockup,
@@ -36,7 +37,14 @@ export type PageView = "board" | "team";
  * shared link opens the tab it names. The document has no form and no write affordance:
  * a page that cannot change a card cannot offer a button the server would refuse.
  */
-export function renderBoardPage(input: { view: PageView; base?: string }): string {
+export function renderBoardPage(input: {
+	view: PageView;
+	base?: string;
+	/** The repository this page is a board of, which its header names. */
+	repo: string;
+	/** The repository root, which is the header name's hover: a name alone cannot tell two clones apart. */
+	root: string;
+}): string {
 	const team = input.view === "team";
 	// The page answers under the session's mount, so its own script and theme are named
 	// from that prefix rather than from the origin's root.
@@ -51,13 +59,13 @@ ${docHead({ title: tabTitle("board"), css: BOARD_CSS, base })}
 <a class="skip" href="#main">Skip to the cards</a>
 <header class="bf-app__header"><div class="bf-toolbar ${N.toolbar}">
   ${brandLockup("board")}
-  <span class="bf-chip bf-chip--accent" id="board-me" title="This page is served as this session, and it cannot change a card">board</span>
+  <span class="bf-chip bf-chip--outline" id="board-repo" title="${escapeHtml(input.root)}">${escapeHtml(input.repo)}</span>
   <p class="bf-status ${N.status}" id="board-status" data-state="connecting" aria-live="polite">connecting…</p>
   <span class="bf-spacer"></span>
   <div class="${N.controls}">
     <div class="bf-segmented" role="tablist" aria-label="View">
-      <button type="button" class="bf-segmented__item" role="tab" id="tab-board" data-view="board" aria-controls="panel-board"${team ? "" : ' aria-current="page"'}>Board</button>
-      <button type="button" class="bf-segmented__item" role="tab" id="tab-team" data-view="team" aria-controls="panel-team"${team ? ' aria-current="page"' : ""}>Team</button>
+      <button type="button" class="bf-segmented__item" role="tab" id="tab-board" data-view="board" aria-controls="panel-board" aria-selected="${team ? "false" : "true"}" tabindex="${team ? "-1" : "0"}">Board</button>
+      <button type="button" class="bf-segmented__item" role="tab" id="tab-team" data-view="team" aria-controls="panel-team" aria-selected="${team ? "true" : "false"}" tabindex="${team ? "0" : "-1"}">Team</button>
     </div>
     <p class="bf-progress ${N.progress}" id="board-progress" hidden>
       <span class="bf-progress__track"><span class="bf-progress__fill" id="board-progress-fill"></span></span>
@@ -72,12 +80,13 @@ ${docHead({ title: tabTitle("board"), css: BOARD_CSS, base })}
 </div></header>
 <main class="bf-app__main ${N.main}" id="main" tabindex="-1">
   <section class="${N.panel}" id="panel-board" role="tabpanel" aria-labelledby="tab-board"${team ? " hidden" : ""}>
-    <div class="bf-segmented ${N.picker}" id="board-picker" role="tablist" aria-label="Lane"></div>
+    <div class="bf-segmented ${N.picker}" id="board-picker" role="group" aria-label="Lane"></div>
     <div class="${N.lanes}" id="board-lanes"></div>
     <div class="bf-empty ${N.noCards}" id="board-no-cards" hidden>
-      <p class="bf-empty__title">No cards yet</p>
-      <p class="bf-empty__sub">One card per feature: what it delivers, who holds it, and where to start.</p>
-      <p class="bf-empty__sub"><code>board add</code> makes one — this page reads, and the tools write.</p>
+      <p class="bf-empty__title" id="board-no-cards-title">No cards yet</p>
+      <p class="bf-empty__sub" id="board-no-cards-sub">One card per feature: what it delivers, who holds it, and where to start.</p>
+      <p class="bf-empty__sub" id="board-no-cards-hint"><code>board add</code> makes one — this page reads, and the tools write.</p>
+      <button type="button" class="bf-btn" id="board-no-match-clear" hidden>Clear filter</button>
     </div>
   </section>
   <section class="${N.panel}" id="panel-team" role="tabpanel" aria-labelledby="tab-team"${team ? "" : " hidden"}>
@@ -109,6 +118,11 @@ ${docHead({ title: tabTitle("board"), css: BOARD_CSS, base })}
           <dt id="card-dialog-depends-label" hidden>waits on</dt><dd class="${N.dialogValue}" id="card-dialog-depends" hidden></dd>
           <dt id="card-dialog-dependents-label" hidden>waited on by</dt><dd class="${N.dialogValue}" id="card-dialog-dependents" hidden></dd>
           <dt id="card-dialog-plan-label" hidden>plan</dt><dd class="${N.dialogValue} ${N.dialogPlan}" id="card-dialog-plan" hidden></dd>
+          <dt id="card-dialog-goal-label" hidden>goal</dt><dd class="${N.dialogValue}" id="card-dialog-goal" hidden></dd>
+          <dt id="card-dialog-acceptance-label" hidden>acceptance</dt><dd class="${N.dialogValue}" id="card-dialog-acceptance" hidden></dd>
+          <dt id="card-dialog-scope-out-label" hidden>scope out</dt><dd class="${N.dialogValue}" id="card-dialog-scope-out" hidden></dd>
+          <dt id="card-dialog-approved-label" hidden>approved</dt><dd class="${N.dialogValue}" id="card-dialog-approved" hidden></dd>
+          <dt id="card-dialog-reviewed-label" hidden>reviewed</dt><dd class="${N.dialogValue}" id="card-dialog-reviewed" hidden></dd>
           <dt id="card-dialog-paths-label" hidden>paths</dt><dd id="card-dialog-paths" hidden><ul class="${N.dialogPaths}" id="card-dialog-path-list"></ul></dd>
         </dl>
       </section>
@@ -121,7 +135,7 @@ ${docHead({ title: tabTitle("board"), css: BOARD_CSS, base })}
   </div>
 </div>
 
-${keysSheet(BOARD_KEYS)}
+${keysSheet(BOARD_KEYS, "A card dialog keeps /, t, and ? for itself; Esc closes it.")}
 <script src="${base}/app.js" defer></script>
 </body>
 </html>