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

package/extensions/board/view/styles.ts

@@ -30,35 +30,32 @@ ${WEB_COMPONENTS_CSS}
 .board-progress{margin:0}
 .board-picker{display:none;margin-bottom:var(--space-3)}
 
-/* The new card is a kit dialog, so the board is what the page opens on. The form is
-   the panel's own column: its body scrolls and its actions stay pinned. */
-.board-composer{display:flex;flex-direction:column;min-height:0}
-/* One column, label above the box: the dialog is 640px wide, and the 2fr/1fr pair it
-   inherited from the drawer left the path hints 197px and their label inside the box. */
-.board-composer__fields{display:flex;flex-direction:column;gap:var(--space-3)}
-.board-composer__field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
-.board-composer__label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);font:var(--fw-medium) var(--fs-xs) var(--font-ui);color:var(--muted)}
-.board-composer__count{font:var(--fs-xs) var(--font-mono);color:var(--dim)}
-/* A select inside a field: the native caret is the affordance, so it keeps it, and the
-   field's own surface is what it sits on rather than the platform's white box. */
-.board-composer__select{background:transparent;color:var(--text);cursor:pointer}
-.board-composer__fields .bf-field{min-width:0}
-/* The title is the one thing this dialog exists to ask for, so it leads. */
-.board-composer__field--title .bf-field{padding:var(--space-2) var(--space-3)}
-.board-composer__field--title .bf-input{font-size:var(--fs-md)}
-
 /* The main pane is this page's only child of the shell, so it grows to fill the
    column and the footer stays at the bottom however short the board is. */
 .board-main{flex:1 1 auto}
 /* One panel per tab; the shell's main pane is the only scroll box. */
 .board-panel{display:flex;flex-direction:column;min-width:0}
 .board-panel[hidden]{display:none}
-.board-banner{margin:0 0 var(--space-4)}
 .board-no-cards{max-width:32rem;margin:auto;padding:var(--space-8) var(--space-6)}
 
-/* Lanes: four trays of cards, each with a head that sticks while the pane scrolls. */
-.board-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);align-items:start}
-.board-lane{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:0 var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
+/* Lanes: trays of cards, each with a head that sticks while the pane scrolls. A lane is
+   sized by the work it holds rather than by its share of the row, so one holding nothing
+   narrows to a rail and hands the width to the lanes carrying cards. */
+.board-lanes{display:flex;flex-wrap:nowrap;gap:var(--space-4);align-items:start}
+.board-lane{--lane-count:0;display:flex;flex:1 1 0;flex-grow:calc(1 + var(--lane-count));flex-direction:column;gap:var(--space-2);min-width:0;padding:0 var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
+/* The lane count is a count, not a design token: the client sets it from the snapshot and
+   declares its default here, so a lane whose count never arrived is an ordinary lane
+   rather than a variable nobody defines. */
+/* A lane's share of the row follows the work it holds — two cards earn more width than
+   one — and the floor is the narrowest a tray is still a tray at. It is set on the two
+   states that draw one, so a rail keeps its own width, and both breakpoints below
+   replace the basis, so the floor only ever applies to the row it was chosen for:
+   four lanes at 1180px are 60rem, which is inside the row before the wrap. */
+.board-lane[data-empty="false"][data-folded="false"]{min-width:15rem}
+/* The rail: a dot, a word, and a count — the fact that the lane is showing nothing, not a
+   tray. A lane is a rail when it holds no cards and when it is folded, because both say
+   the same thing: there is nothing here to read. */
+.board-lane[data-empty="true"],.board-lane[data-folded="true"]{flex:0 0 8.5rem}
 .board-lane__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--space-2);margin:0 calc(-1 * var(--space-2)) var(--space-1);padding:var(--space-2) var(--space-2);background:var(--surface);border-bottom:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;font:var(--fw-semibold) var(--fs-xs) var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
 .board-lane__toggle{appearance:none;display:flex;align-items:center;gap:var(--space-2);border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
 .board-lane__toggle:hover{color:var(--accent)}
@@ -69,7 +66,6 @@ ${WEB_COMPONENTS_CSS}
 .board-lane__dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--muted)}
 .board-lane[data-status="doing"] .board-lane__dot{background:var(--accent)}
 .board-lane[data-status="blocked"] .board-lane__dot{background:var(--danger)}
-.board-lane[data-status="done"]{background:var(--canvas)}
 .board-lane[data-status="done"] .board-lane__dot{background:var(--success)}
 .board-lane__list{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none}
 .board-lane__empty{margin:0;font:var(--fs-sm) var(--font-ui);color:var(--dim)}
@@ -89,10 +85,9 @@ ${WEB_COMPONENTS_CSS}
 .board-card[data-status="done"] .bf-chip--accent{color:var(--muted);border-color:var(--border)}
 .board-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;font:var(--fs-xs) var(--font-ui);color:var(--muted)}
 .board-card__paths{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}
-.board-card__reason{margin:0;font:var(--fs-xs) var(--font-ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.board-card__reason{margin:0;font:var(--fs-sm)/var(--lh-snug) var(--font-ui);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .board-card__reason--blocked{color:var(--danger)}
 .board-card__reason--unplanned{color:var(--warn)}
-.board-card__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
 
 /* The Team tab: a queue and a roster side by side, then one quiet strip. */
 .board-team{display:grid;gap:var(--space-5);min-width:0}
@@ -137,56 +132,78 @@ ${WEB_COMPONENTS_CSS}
 .board-team__dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--muted);flex:0 0 auto;align-self:center}
 .board-team__mate[data-state="live"] .board-team__dot{background:var(--success)}
 .board-team__mate[data-state="quiet"] .board-team__dot{background:var(--warn)}
+/* A dead session is the one state the page states outright: solid, and in the refusal colour. */
+.board-team__mate[data-state="gone"] .board-team__dot{background:var(--danger)}
 /* A record that is not there is a hollow ring, never a colour that claims it is. */
 .board-team__mate[data-state="absent"] .board-team__dot,.board-team__mate[data-state="unknown"] .board-team__dot{background:transparent;box-shadow:inset 0 0 0 1px var(--border-strong)}
 .board-team__name{font:var(--fw-medium) var(--fs-md) var(--font-ui);color:var(--text)}
 .board-team__mets{flex:1 0 100%;margin:0;color:var(--muted);font:var(--fs-xs) var(--font-ui)}
 .board-team__empty{margin:0;color:var(--muted);font:var(--fs-sm) var(--font-ui)}
 /* Done stays quiet; its ids are buttons only because they open their card. */
-.board-team__done,.board-done{margin:0;font:var(--fs-sm) var(--font-ui);color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2)}
+.board-team__done{margin:0;font:var(--fs-sm) var(--font-ui);color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2)}
 /* An id in the Done strip is a button, so it wears the only affordance it has: a
    dotted line, visible before the pointer arrives. */
 .board-team__id{appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;font:var(--fs-sm) var(--font-mono);color:var(--muted);text-decoration:underline dotted;text-underline-offset:3px}
 .board-team__id:hover{color:var(--accent);text-decoration:underline}
 
-/* The card dialog: a meta line, the notes as a timeline, and the actions at its foot. */
-.board-dialog__meta,.board-dialog__owner{margin:0 0 var(--space-2);font:var(--fs-sm) var(--font-ui);color:var(--muted)}
-.board-dialog__plan{margin:0 0 var(--space-2);font:var(--fs-xs) var(--font-mono);color:var(--dim);word-break:break-all}
-/* What the card waits for is a fact about its place in the work, not a record of it. */
-.board-dialog__depends{margin:0 0 var(--space-2);font:var(--fs-xs) var(--font-mono);color:var(--muted);word-break:break-all}
-.board-dialog__notes{display:flex;flex-direction:column;gap:var(--space-3);margin:0 0 var(--space-3);padding:0;list-style:none;max-height:16rem;overflow:auto}
+/* The card dialog: the record of one card, in two named sections. Nothing here scrolls on
+   its own — the kit's body is the one scrollbar, so a reader is never inside a scroll
+   inside a scroll. */
+/* A little taller than the kit's default: this dialog is the only place a whole card —
+   its facts, its plan, and every note it kept — can be read. */
+.board-dialog__panel{width:min(720px,100%);max-height:84vh}
+/* A long title wraps beside its id instead of pushing the close button off the head. */
+.board-dialog__head{flex-wrap:wrap;align-items:baseline;row-gap:var(--space-1)}
+.board-dialog__head h2{flex:1 1 12ch;min-width:0;font-size:var(--fs-lg);line-height:var(--lh-tight);overflow-wrap:anywhere}
+.board-dialog__id{font:var(--fs-sm) var(--font-mono);color:var(--muted)}
+.board-dialog__body{display:flex;flex-direction:column;gap:var(--space-4);padding-bottom:var(--space-4)}
+.board-dialog__section{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
+/* The heading is a label, not a headline: the title above it is the only headline here. */
+.board-dialog__heading{display:flex;align-items:baseline;gap:var(--space-1);margin:0;padding-bottom:var(--space-1);border-bottom:1px solid var(--border);font:var(--fw-medium) var(--fs-xs) var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
+.board-dialog__count{font:var(--fs-xs) var(--font-mono);letter-spacing:0;text-transform:none;color:var(--dim)}
+/* The ladder: labels size to the longest one, values take the width that is left, and
+   every row starts at the same column so the eye can run down the facts. */
+.board-dialog__facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-1) var(--space-3);margin:0;align-items:baseline}
+.board-dialog__facts dt{font:var(--fs-xs) var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
+.board-dialog__facts dd{margin:0;min-width:0;font:var(--fs-sm) var(--font-ui);color:var(--text)}
+/* A path is a value like any other, but a long one elides on its single line and keeps the
+   whole of itself on the hover title, so a 90-character plan cannot shred the ladder. */
+.board-dialog__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* A plan path and the ids a card waits for are code, and a reader copies them. */
+.board-dialog__plan{font-family:var(--font-mono)}
+.board-dialog__paths{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin:0;padding:0;list-style:none;min-width:0}
+.board-dialog__paths li{min-width:0;max-width:100%}
+/* A path is code, not a label: the owner is a chip of prose, a path is something you type. */
+.board-dialog__path{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:var(--font-mono)}
+.board-dialog__notes{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none}
 /* A rule between notes: wrapped prose used to run one note into the next. */
 .board-dialog__note{padding-top:var(--space-3);border-top:1px solid var(--border)}
 .board-dialog__note:first-child{padding-top:0;border-top:0}
-.board-dialog__note-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin:0 0 2px}
-.board-dialog__note-by{font:var(--fw-medium) var(--fs-xs) var(--font-ui);color:var(--text)}
-.board-dialog__note-at{font:var(--fs-xs) var(--font-mono);color:var(--muted)}
-.board-dialog__note-text{margin:0;font:var(--fs-sm)/var(--lh-normal) var(--font-ui);color:var(--text);overflow-wrap:anywhere}
-.board-dialog__move{display:flex;align-items:center;gap:var(--space-2);margin-right:auto}
-/* Assigning records an owner the page cannot tell anybody about, so it sits with the
-   other card actions and takes a name from the roster. */
-.board-dialog__assign{display:flex;align-items:center;gap:var(--space-2);margin-right:auto}
-.board-dialog__assign-select{width:auto;min-width:8rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--canvas);padding:2px var(--space-2);cursor:pointer}
-.board-dialog__label{font:var(--fs-xs) var(--font-ui);color:var(--muted)}
+/* The sentence is the record, so it reads at body size on a measure, not the full 720px. */
+.board-dialog__note-text{margin:0 0 var(--space-1);max-width:68ch;font:var(--fs-base)/var(--lh-relaxed) var(--font-ui);color:var(--text);overflow-wrap:anywhere;white-space:pre-wrap}
+/* Who and when is the footnote of the note above it. */
+.board-dialog__note-foot{display:flex;align-items:baseline;gap:var(--space-2);margin:0;max-width:68ch}
+.board-dialog__note-by{font:var(--fw-medium) var(--fs-xs) var(--font-ui);color:var(--muted)}
+.board-dialog__note-at{font:var(--fs-xs) var(--font-mono);color:var(--dim)}
 .board-dialog__state{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--fs-xs) var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
 .board-dialog__state::before{content:"";width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--muted)}
 .board-dialog__state[data-status="doing"]::before{background:var(--accent)}
 .board-dialog__state[data-status="blocked"]::before{background:var(--danger)}
 .board-dialog__state[data-status="done"]::before{background:var(--success)}
-.board-dialog__note-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2);padding:0;border:0;background:none}
-.board-dialog__note-composer .bf-field{margin:0}
-.board-dialog__note-composer .bf-composer__row{margin:0}
-.board-confirm__body{margin:0}
 .board-skeleton{height:4.5rem;border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--surface)}
 
 @media (max-width:1180px){
-  .board-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
+  .board-lanes{flex-wrap:wrap}
+  .board-lane{flex:1 1 calc(50% - var(--space-4))}
   .board-progress{display:none}
   /* Two panels need a wide window; below this the queue comes first, the roster after. */
   .board-team__grid{grid-template-columns:minmax(0,1fr)}
 }
 @media (max-width:860px){
-  .board-lanes{grid-template-columns:minmax(0,1fr)}
+  .board-lanes{flex-direction:column;align-items:stretch}
+  .board-lane{flex:1 1 auto}
+  /* One lane at a time, so a rail buys nothing: the shown lane takes the column. */
+  .board-lane[data-empty="true"],.board-lane[data-folded="true"]{flex:1 1 auto}
   .board-lane[hidden]{display:none}
   .board-picker{display:flex}
   .board-toolbar{gap:var(--space-2)}
@@ -205,7 +222,7 @@ ${WEB_COMPONENTS_CSS}
   .board-lanes,.board-team__grid{grid-template-columns:minmax(0,1fr)}
   .board-card{break-inside:avoid}
   /* The disclosure affordance goes; the lane's name stays with its count. */
-  .board-card__actions,.board-composer,.board-filter,.board-picker,.board-done{display:none!important}
+  .board-filter,.board-picker{display:none!important}
   .board-lane__toggle::after{content:""}
 }
 `;

package/extensions/board/view/team.ts

@@ -21,12 +21,11 @@ export const BOARD_TEAM_JS = String.raw`(function () {
   var board = window.bfBoard || (window.bfBoard = {});
   var el = board.el;
   var chip = board.chip;
-  var actionButton = board.actionButton;
   var ago = board.ago;
   var plural = board.plural;
 
   /** The word a teammate's state is read as; never a colour alone. */
-  var STATE_WORD = { live: "live", quiet: "quiet", absent: "no record", unknown: "\u2014" };
+  var STATE_WORD = { live: "live", quiet: "quiet", gone: "gone", absent: "no record", unknown: "\u2014" };
 
   /**
    * A panel: its heading row, then its body.
@@ -35,9 +34,9 @@ export const BOARD_TEAM_JS = String.raw`(function () {
    * reader can tell "nothing here" from "nothing matches".
    */
   function panel(text, count, total) {
-    var node = el("section", "board-team__group");
+    var node = el("section", N.teamGroup);
     node.setAttribute("aria-label", text);
-    var caption = el("h2", "board-team__caption", text);
+    var caption = el("h2", N.teamCaption, text);
     caption.appendChild(chip(total !== undefined && total !== count ? count + "/" + total : String(count)));
     node.appendChild(caption);
     return node;
@@ -54,7 +53,18 @@ export const BOARD_TEAM_JS = String.raw`(function () {
    * one row, and the strongest reason is the one it keeps: a blocker outranks silence,
    * which outranks a missing plan, which outranks nobody holding it.
    */
-  var KIND_RANK = { blocked: 0, waiting: 1, idle: 2, unplanned: 3, unassigned: 4 };
+  var KIND_RANK = { blocked: 0, gone: 1, waiting: 2, idle: 3, unplanned: 4, unassigned: 5 };
+
+  /** The labels of the sessions whose process is gone, in the roster's own spelling. */
+  function goneLabels(view) {
+    var roster = view.teammates;
+    var gone = {};
+    if (roster === undefined) return gone;
+    for (var i = 0; i < roster.length; i++) {
+      if (roster[i].state === "gone") gone[roster[i].label.toLowerCase()] = roster[i].label;
+    }
+    return gone;
+  }
 
   function needs(view) {
     var round = view.round;
@@ -74,10 +84,22 @@ export const BOARD_TEAM_JS = String.raw`(function () {
         }
       }
     }
+    // A blocked card in this queue is a person's decision: the reason the move recorded
+    // comes first, and the last note is only the fallback for a block nobody explained.
     add(round.blocked, function (card) {
+      if (card.blockedBy) return card.blockedBy;
       var last = card.notes.length > 0 ? card.notes[card.notes.length - 1] : undefined;
       return last ? last.text : "blocked";
     }, "blocked");
+    // A dead owner is a fact, not an inference from silence: the card is anyone's now.
+    var gone = goneLabels(view);
+    add(
+      round.owners.reduce(function (cards, group) {
+        return gone[group.label.toLowerCase()] === undefined ? cards : cards.concat(group.cards);
+      }, []),
+      function (card) { return (card.owner ? card.owner.label : "its owner") + " is not running — the card is free"; },
+      "gone",
+    );
     add(round.idle, function (card) { return "no touch for " + ago(card.updatedAt); }, "idle");
     // The board card says the same words for the same fact: one voice for one state.
     add(round.unplanned, function () { return "no plan recorded"; }, "unplanned");
@@ -85,8 +107,16 @@ export const BOARD_TEAM_JS = String.raw`(function () {
     // An order outranks nobody holding it: the claim would be refused, so the queue says
     // what it waits for instead of offering a button the rules would turn down.
     add(
-      round.unassigned.filter(function (card) { return board.blockersOf(card, view).length > 0; }),
-      function (card) { return "waits on " + board.waitingText(card, view); },
+      round.unassigned.filter(function (card) { return card.waits !== undefined; }),
+      function (card) { return "waits on " + card.waits; },
+      "waiting",
+    );
+    // An offer outranks plain silence: the lead has already tried to hand this card out,
+    // and the age is the difference between nobody having looked and nobody taking it. A
+    // card that waits keeps that reason, because the claim would be refused either way.
+    add(
+      round.unassigned.filter(function (card) { return card.offeredAt !== undefined; }),
+      function (card) { return "offered " + ago(card.offeredAt) + " ago — nobody took it"; },
       "waiting",
     );
     return entries;
@@ -95,42 +125,32 @@ export const BOARD_TEAM_JS = String.raw`(function () {
   /** One decision: the card, why it is here, who holds it, and the way out. */
   function decision(entry, view) {
     var card = entry.card;
-    var node = el("article", "board-team__decision");
+    var node = el("article", N.teamDecision);
     node.setAttribute("data-kind", entry.kind);
 
-    var open = el("button", "board-team__open");
+    var open = el("button", N.teamOpen);
     open.type = "button";
     open.setAttribute("aria-haspopup", "dialog");
-    open.appendChild(el("span", "board-team__ref", "#" + card.id));
-    var title = el("span", "board-team__title", card.title);
+    open.appendChild(el("span", N.teamRef, "#" + card.id));
+    var title = el("span", N.teamTitle, card.title);
     // A clamped title has no other way to be read, so it carries its own tooltip.
     title.title = card.title;
     open.appendChild(title);
     open.addEventListener("click", function () { board.openCard(card.id); });
     node.appendChild(open);
 
-    var foot = el("div", "board-team__foot");
+    var foot = el("div", N.teamFoot);
     if (card.owner) foot.appendChild(chip(card.owner.label, "accent"));
-    // The same permission table the card face and the dialog ask: a row offers the way out
-    // that this reader may actually take, and a card that waits offers none because a
-    // claim on it would be refused.
-    if (board.may(card, view, "reclaim")) {
-      var reclaim = actionButton("Reclaim", function () { board.act("reclaim", card); });
-      // Six identical buttons read as six identical buttons; the card is the name.
-      reclaim.setAttribute("aria-label", "Reclaim #" + card.id);
-      foot.appendChild(reclaim);
-    } else if (board.may(card, view, "claim")) {
-      var claim = actionButton("Claim", function () { board.act("claim", card); });
-      claim.setAttribute("aria-label", "Claim #" + card.id);
-      foot.appendChild(claim);
-    }
+    // No button: this page cannot claim or reclaim, and a page that offered either would
+    // be teaching a verb the server refuses. The row is a reason to pick a card up in the
+    // terminal, which is where a claim is made.
     node.appendChild(foot);
 
     // The reason gets the row's whole width and two lines; the tooltip carries the
     // rest, because this sentence is the lead's whole reason to look at the row.
-    var why = el("p", "board-team__why", entry.why);
+    var why = el("p", N.teamWhy, entry.why);
     why.title = entry.why;
-    if (entry.kind === "blocked") why.className = "board-team__why board-team__why--blocked";
+    if (entry.kind === "blocked") why.className = N.teamWhy + " " + N.teamWhyBlocked;
     node.appendChild(why);
     return node;
   }
@@ -175,9 +195,11 @@ export const BOARD_TEAM_JS = String.raw`(function () {
     function rank(mate) {
       if (mate.you) return -1;
       if (mate.state === "live") return 0;
-      if (mate.state === "quiet") return 1;
-      if (mate.state === "absent") return 2;
-      return 3;
+      // A crash outranks a stale heartbeat: one is news, the other may be a long turn.
+      if (mate.state === "gone") return 1;
+      if (mate.state === "quiet") return 2;
+      if (mate.state === "absent") return 3;
+      return 4;
     }
     rows.sort(function (a, b) { return rank(a) - rank(b) || a.label.localeCompare(b.label); });
     return rows;
@@ -192,14 +214,14 @@ export const BOARD_TEAM_JS = String.raw`(function () {
 
   /** One teammate: who, how they are, and what they hold. Not a button — nothing to open. */
   function mate(mate) {
-    var node = el("li", "board-team__mate");
+    var node = el("li", N.teamMate);
     node.setAttribute("data-state", mate.state);
     if (mate.you) node.setAttribute("data-you", "1");
 
-    var dot = el("span", "board-team__dot");
+    var dot = el("span", N.teamDot);
     dot.setAttribute("aria-hidden", "true");
     node.appendChild(dot);
-    node.appendChild(el("span", "board-team__name", mate.label));
+    node.appendChild(el("span", N.teamName, mate.label));
     if (mate.you) node.appendChild(chip("you"));
     // A live peer whose watch is off will read a handoff at its next turn instead of being
     // woken for it, which is the one thing a lead can still act on.
@@ -211,7 +233,7 @@ export const BOARD_TEAM_JS = String.raw`(function () {
     if (mate.mail > 0) node.appendChild(chip(plural(mate.mail, "mail"), "accent"));
 
     // "quiet" alone does not tell a lead whether to reclaim; the heartbeat age does.
-    var mets = el("p", "board-team__mets");
+    var mets = el("p", N.teamMets);
     if (mate.state === "quiet" && mate.seen !== undefined) {
       mets.appendChild(document.createTextNode("quiet for "));
       mets.appendChild(stamped(ago(mate.seen), mate.seen));
@@ -246,15 +268,15 @@ export const BOARD_TEAM_JS = String.raw`(function () {
     var filtering = query !== "";
     var noMatch = "no card here matches \"" + query + "\"";
 
-    var grid = el("div", "board-team__grid");
+    var grid = el("div", N.teamGrid);
 
     var all = needs(view);
     var decisions = all.filter(function (entry) { return keep(entry.card); });
     var queue = panel("Needs a decision", decisions.length, all.length);
     if (decisions.length === 0) {
-      queue.appendChild(el("p", "board-team__empty", filtering ? noMatch : "nothing needs you: no blockers, nothing idle, every card planned and held"));
+      queue.appendChild(el("p", N.teamEmpty, filtering ? noMatch : "nothing needs you: no blockers, nothing idle, every card planned and held"));
     } else {
-      var list = el("div", "board-team__queue");
+      var list = el("div", N.teamQueue);
       for (var i = 0; i < decisions.length; i++) list.appendChild(decision(decisions[i], view));
       queue.appendChild(list);
     }
@@ -270,9 +292,9 @@ export const BOARD_TEAM_JS = String.raw`(function () {
     });
     var people = panel("Teammates", shown.length, everyone.length);
     if (shown.length === 0) {
-      people.appendChild(el("p", "board-team__empty", filtering ? noMatch : roster === null ? "session-bus is not loaded here" : "nobody is here yet"));
+      people.appendChild(el("p", N.teamEmpty, filtering ? noMatch : roster === null ? "session-bus is not loaded here" : "nobody is here yet"));
     } else {
-      var rosterList = el("ul", "board-team__roster");
+      var rosterList = el("ul", N.teamRoster);
       for (var j = 0; j < shown.length; j++) rosterList.appendChild(mate(shown[j]));
       people.appendChild(rosterList);
     }
@@ -280,7 +302,7 @@ export const BOARD_TEAM_JS = String.raw`(function () {
     root.appendChild(grid);
 
     var done = round.done.filter(keep);
-    var strip = el("p", "board-team__done");
+    var strip = el("p", N.teamDone);
     if (done.length === 0) {
       // While filtering, a third "no card here matches" line adds nothing; the two
       // panels above already said it.
@@ -290,7 +312,7 @@ export const BOARD_TEAM_JS = String.raw`(function () {
       strip.appendChild(document.createTextNode("Done \u00B7 "));
       for (var m = 0; m < done.length; m++) {
         (function (card) {
-          var id = el("button", "board-team__id", "#" + card.id);
+          var id = el("button", N.teamId, "#" + card.id);
           id.type = "button";
           id.setAttribute("aria-haspopup", "dialog");
           id.addEventListener("click", function () { board.openCard(card.id); });

package/extensions/bytefly/footer/budget.ts

@@ -7,12 +7,13 @@
  * whether the threshold has been crossed and what the one notice says.
  *
  * Pure: the caller has the priced spend and the currency, this shapes the answer.
- * The amount formatting reuses the footer's own `formatCost`, so the notice and the
- * status bar cannot disagree about precision or about a sub-minor-unit amount.
+ * The amount formatting is the footer's own — `formatCost` for what was spent,
+ * `formatLimit` for the ceiling it is held against — so the notice and the status
+ * bar cannot disagree about either figure.
  */
 
 import { noticeMessage, type NoticeMessage } from "../../../lib/notice.ts";
-import { formatCost } from "./render/format.ts";
+import { formatCost, formatLimit } from "./render/format.ts";
 import type { Currency } from "./price/types.ts";
 
 /** Where the session stands against its budget. */
@@ -41,7 +42,7 @@ export function budgetState(limit: number, spent: number): BudgetState {
  */
 export function budgetNotice(state: BudgetState, currency: Currency): NoticeMessage {
 	const spent = formatCost(state.spent, currency);
-	const limit = formatCost(state.limit, currency);
+	const limit = formatLimit(state.limit, currency);
 	return noticeMessage({
 		content:
 			`Session spend reached the configured budget: ${spent} of ${limit}. ` +
@@ -60,5 +61,5 @@ export function budgetNotice(state: BudgetState, currency: Currency): NoticeMess
 
 /** The one-line body an OS notification carries. */
 export function budgetBody(state: BudgetState, currency: Currency): string {
-	return `Session budget reached · ${formatCost(state.spent, currency)} of ${formatCost(state.limit, currency)}`;
+	return `Session budget reached · ${formatCost(state.spent, currency)} of ${formatLimit(state.limit, currency)}`;
 }

package/extensions/bytefly/footer/collect/entries.ts

@@ -50,6 +50,17 @@ interface UsageSource {
  * not say. A `model_change` entry, and an assistant call that names its model,
  * both move the model in effect for the entries that follow.
  */
+/**
+ * The share of a call's prompt that came from the cache, as a percentage.
+ *
+ * One body, because two callers ask the same question: the collector for a live session,
+ * and the chrome capture, whose frame must print the same number the footer would.
+ */
+export function cacheHitRateOf(input: number, cacheRead: number, cacheWrite: number): number | null {
+	const prompt = input + cacheRead + cacheWrite;
+	return prompt > 0 ? (cacheRead / prompt) * 100 : null;
+}
+
 export function usageRecords(
 	entries: Iterable<unknown>,
 	active: { provider: string; model: string } | undefined,
@@ -89,10 +100,7 @@ export function usageRecords(
 			isAssistant: source.isAssistant,
 		});
 
-		if (source.isAssistant) {
-			const prompt = input + cacheRead + cacheWrite;
-			cacheHitRate = prompt > 0 ? (cacheRead / prompt) * 100 : null;
-		}
+		if (source.isAssistant) cacheHitRate = cacheHitRateOf(input, cacheRead, cacheWrite);
 	}
 
 	return { records, cacheHitRate };

package/extensions/bytefly/footer/collect/snapshot.ts

@@ -18,7 +18,7 @@ import type { DelegationLedger } from "../delegation.ts";
 import { createPricer } from "../price/price.ts";
 import type { ByteflyConfig } from "../price/types.ts";
 import { zeroUsage } from "../../../../lib/usage.ts";
-import type { ContextInfo, FooterData, PricedUsage, StatusSnapshot, UsageTotals } from "../types.ts";
+import type { ContextInfo, FooterData, PricedUsage, StatusSnapshot } from "../types.ts";
 import { usageRecords } from "./entries.ts";
 
 /**
@@ -42,22 +42,10 @@ export interface SnapshotReader {
 	peek(): PricedUsage | undefined;
 }
 
-/** The five counters, without the unpriced count that only the notice reads. */
-function countsOf(priced: PricedUsage): UsageTotals {
-	return {
-		input: priced.input,
-		output: priced.output,
-		cacheRead: priced.cacheRead,
-		cacheWrite: priced.cacheWrite,
-		cost: priced.cost,
-	};
-}
-
 export function createSnapshotReader(config: ByteflyConfig, delegation: DelegationLedger): SnapshotReader {
 	const price = createPricer(config);
 	let key: string | null = null;
-	let usage: PricedUsage = { ...zeroUsage(), unpriced: 0 };
-	let usageCounts: UsageTotals = zeroUsage();
+	let usage: PricedUsage = { ...zeroUsage(), unpriced: 0, unpricedModels: [] };
 	let delegationTotals = { runs: 0, usage: zeroUsage() };
 	let cacheHitRate: number | null = null;
 	let context: ContextInfo = { tokens: null, contextWindow: 0, percent: null };
@@ -73,11 +61,13 @@ export function createSnapshotReader(config: ByteflyConfig, delegation: Delegati
 			const active = current ? { provider: current.provider, model: current.id } : undefined;
 			const scanned = usageRecords(session.getEntries(), active);
 			usage = price(scanned.records);
-			usageCounts = countsOf(usage);
 			cacheHitRate = scanned.cacheHitRate;
 			// The child runs are priced by the same pricer, so a currency or rate
 			// change moves both numbers together — and neither is folded into the other.
-			delegationTotals = { runs: delegation.runs(), usage: countsOf(price(delegation.records())) };
+			// A child run's unpriced records are its own: the ledger keeps one amount per run,
+			// and nothing here reports them separately.
+			const { unpriced: _childUnpriced, unpricedModels: _childModels, ...childUsage } = price(delegation.records());
+			delegationTotals = { runs: delegation.runs(), usage: childUsage };
 
 			const usageInfo = ctx.getContextUsage();
 			context = {
@@ -105,8 +95,9 @@ export function createSnapshotReader(config: ByteflyConfig, delegation: Delegati
 			model,
 			thinkingLevel: ctx.thinkingLevel ?? null,
 			context,
-			usage: usageCounts,
+			usage,
 			currency: config.currency,
+			budget: config.budget,
 			cacheHitRate,
 			providerCount: footerData.getAvailableProviderCount(),
 			delegation: delegationTotals,

package/extensions/bytefly/footer/config.ts

@@ -9,32 +9,43 @@
 
 import { GLYPHS, SEPARATORS, STATUS_KEYS } from "../../../lib/tui/glyphs.ts";
 
+/**
+ * Status keys that are alerts rather than modes, and so are never dropped.
+ * A mode can be read again from the session; a failure cannot be re-derived once
+ * its chip is off the bar. Annotated rather than inferred so the list can be read
+ * against an arbitrary key from `getExtensionStatuses()`.
+ */
+const ALERT_STATUS_KEYS: readonly string[] = [STATUS_KEYS.jobsFailure];
+
 export const CONFIG = {
 	/** Context percentage thresholds. */
 	thresholds: { warn: 70, danger: 90 },
 	/** The block counts the context gauge steps down through. */
 	gauge: { widths: [10, 5, 3, 0] as const },
-	/**
-	 * Separators printed before grouped and other segments. The group divider is
-	 * the footer's own solid `│`, not the shared `╎`: that glyph is the transcript
-	 * rail (and `chrome.rail`'s default), and a status line is not a rail.
-	 */
-	separators: { group: " │ ", item: SEPARATORS.item },
+	/** Separator printed before every segment but the first in its zone. */
+	separators: { item: SEPARATORS.item },
 	icons: {
 		branch: GLYPHS.branch,
 		detached: GLYPHS.detached,
 		worktree: GLYPHS.worktree,
+		board: GLYPHS.board,
 		browse: GLYPHS.browse,
 		delegation: GLYPHS.delegation,
 	},
 	/** Status key the worktree extension uses; routed to line 1's right zone. */
 	worktreeStatusKey: STATUS_KEYS.worktree,
+	/** Status key the board extension publishes its page port under. */
+	boardStatusKey: STATUS_KEYS.board,
 	/** Status key the file-browse extension uses; routed to line 1's right zone. */
 	browseStatusKey: STATUS_KEYS.browse,
 	/** Status key whose ` · detail` suffix (the plan file name) is dropped. */
 	planStatusKey: STATUS_KEYS.planMode,
-	/** Status key treated as an alert: the one that sorts to the front of the slot. */
-	jobsFailureStatusKey: STATUS_KEYS.jobsFailure,
+	/**
+	 * Status keys that are alerts rather than modes, and so are never dropped.
+	 * A mode can be read again from the session; a failure cannot be re-derived
+	 * once its chip is off the bar.
+	 */
+	alertStatusKeys: ALERT_STATUS_KEYS,
 	labels: { noModel: "no model", detached: "detached" },
 	/** Minimum gap kept between the left and right zones. */
 	minGap: 2,