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

package/extensions/board/view/styles.ts

@@ -0,0 +1,211 @@
+/**
+ * The board page's stylesheet: the shared Bytefly shell and components, then the
+ * page-only `board-*` layout rules.
+ *
+ * Layout only — every colour, size step, and radius is a kit token, so the page
+ * follows the theme and `lib/web/web.test.ts`'s "draws every colour through a token"
+ * rule holds without an exception here. Colour is a role: a lane's dot, its head,
+ * and the reason line read `--muted`, `--accent`, `--danger`, and `--success`
+ * through `data-status`, never a literal.
+ *
+ * The sheet is in three parts, in the order the page stacks: the toolbar, the
+ * board (lanes, cards, and the Team tables), then its dialogs.
+ */
+
+import { WEB_BASE_CSS, WEB_COMPONENTS_CSS, WEB_LAYOUT_CSS, WEB_THEME_CSS } from "../../../lib/web/index.ts";
+
+/** The shared shell, the components, and the board's own layout. */
+export const BOARD_CSS = `${WEB_BASE_CSS}
+${WEB_THEME_CSS}
+${WEB_LAYOUT_CSS}
+${WEB_COMPONENTS_CSS}
+
+/* Toolbar: identity and state on the left, the controls the reader uses on the right. */
+.board-toolbar{gap:var(--space-3);flex-wrap:wrap}
+.board-status{margin:0}
+/* The right side of the toolbar is one group, so a wrap happens between groups
+   rather than between two controls that belong together. */
+.board-controls{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;justify-content:flex-end}
+.board-filter{width:13rem}
+.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)}
+.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)}
+.board-lane__toggle::after{content:"▾";margin-left:2px;font-size:var(--fs-sm);color:var(--muted)}
+.board-lane__toggle:hover::after{color:var(--accent)}
+.board-lane__toggle[aria-expanded="false"]::after{content:"▸"}
+.board-lane__count{font-variant-numeric:tabular-nums;color:var(--muted);background:var(--canvas);border-radius:var(--radius-pill);padding:0 var(--space-2);font-size:var(--fs-xs);letter-spacing:0}
+.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)}
+
+/* A card: the title, then the facts a reader needs to act on it. Its lane says
+   which state it is in, so the card itself carries no second colour bar. */
+.board-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--canvas);transition:border-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
+.board-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
+.board-card[hidden]{display:none}
+.board-card__head{display:flex;align-items:baseline;gap:var(--space-2);margin:0;min-width:0}
+.board-card__id{font:var(--fs-xs) var(--font-mono);color:var(--dim)}
+.board-card__title{margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:var(--fw-semibold) var(--fs-base)/var(--lh-snug) var(--font-ui);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.board-card__title:hover{color:var(--accent)}
+/* Finished work recedes: it is history, and the live lanes should not compete with it. */
+.board-card[data-status="done"] .board-card__title{color:var(--muted)}
+.board-card[data-status="done"] .board-card__title:hover{color:var(--accent)}
+.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--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}
+.board-team__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(18rem,1fr);gap:var(--space-6);align-items:start;min-width:0}
+/* Each panel is its own grid, so both captions land on one line and both lists start on the next. */
+.board-team__group{display:grid;grid-template-rows:auto 1fr;gap:var(--space-3);align-content:start;min-width:0}
+.board-team__caption{margin:0;padding-bottom:var(--space-2);border-bottom:1px solid var(--border);font:var(--fw-semibold) var(--fs-md) var(--font-ui);color:var(--text);display:flex;align-items:center;gap:var(--space-2)}
+.board-team__caption .bf-chip{margin-left:auto;font-variant-numeric:tabular-nums}
+/* The queue: one row per card, its kind as an edge, its way out in the foot. */
+.board-team__queue{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
+/* The queue is the tallest thing here and it can be unbounded; capping it keeps the two
+   panels on one screen. Stacked below 1180px there is no second column to balance, and a
+   nested scroll on a phone is worse than the page's own. */
+@media (min-width:1181px){
+  /* A row cut at the edge reads as a bug unless something says the list continues, and a
+     mac's scrollbars are hidden until it moves: an inset shade in the page's own colour
+     marks the edge without a literal. */
+  /* A floor, because a short window must not turn three rows into a scroll box. */
+  .board-team__queue{max-height:max(18rem,calc(100dvh - 16rem));overflow:auto;overscroll-behavior:contain;padding-right:var(--space-1);box-shadow:inset 0 calc(-1 * var(--space-6)) var(--space-6) calc(-1 * var(--space-6)) var(--canvas)}
+}
+.board-team__decision{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"open foot" "why why";align-items:center;gap:var(--space-1) var(--space-3);padding:var(--space-2) var(--space-3);background:var(--raised);border:1px solid var(--border);border-left:3px solid var(--dim);border-radius:var(--radius-md);transition:border-color var(--motion-base) var(--motion-ease),transform var(--motion-base) var(--motion-ease)}
+.board-team__decision:hover{border-color:var(--border-strong);transform:translateY(-1px)}
+.board-team__decision[data-kind="blocked"]{border-left-color:var(--danger)}
+.board-team__decision[data-kind="idle"]{border-left-color:var(--warn)}
+/* Nobody holds it, so the edge is drawn but not filled: a shape, not a claim. */
+.board-team__decision[data-kind="unassigned"]{border-left-style:dashed}
+.board-team__open{grid-area:open;display:flex;align-items:baseline;gap:var(--space-2);appearance:none;border:0;background:none;padding:0;margin:0;text-align:left;cursor:pointer;color:var(--text);font:var(--fw-medium) var(--fs-md) var(--font-ui);min-width:0}
+.board-team__open:hover .board-team__title{color:var(--accent)}
+.board-team__ref{font:var(--fs-xs) var(--font-mono);color:var(--muted);flex:0 0 auto}
+.board-team__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+/* Two lines, then a tooltip: the "why" is the reason the row is on this tab. */
+.board-team__why{grid-area:why;margin:0;color:var(--muted);font:var(--fs-sm)/var(--lh-snug) var(--font-ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
+.board-team__why--blocked{color:var(--danger)}
+.board-team__foot{grid-area:foot;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2)}
+/* A row with no owner chip still puts its one action on the row's edge. */
+.board-team__foot>.bf-btn:only-child{margin-left:auto}
+/* The roster: who is here and what they hold. No hover fill — nothing to open. */
+.board-team__roster{display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding:0;list-style:none;min-width:0}
+/* No row rule: the caption already delimits the list, and a second hairline beside it
+   was the same pen drawn twice. */
+.board-team__mate{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2);padding:var(--space-2) 0;min-width:0}
+.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 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)}
+/* 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}
+/* 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)}
+.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-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-lane[hidden]{display:none}
+  .board-picker{display:flex}
+  .board-toolbar{gap:var(--space-2)}
+  .board-toolbar .bf-spacer{display:none}
+  /* The icons stay with the tabs and the filter takes the last row whole, so the
+     toolbar wraps once, on purpose, instead of leaving two buttons stranded. */
+  .board-controls{width:100%;justify-content:flex-start}
+  .board-filter{order:9;width:100%}
+  .board-team__foot{flex-wrap:wrap}
+}
+@media (prefers-reduced-motion: reduce){
+  .board-card,.board-team__decision{transition:none}
+  .board-card:hover,.board-team__decision:hover{transform:none}
+}
+@media print{
+  .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-lane__toggle::after{content:""}
+}
+`;

package/extensions/board/view/team.ts

@@ -0,0 +1,305 @@
+/**
+ * The Team tab: the lead's dashboard.
+ *
+ * Two panels and one strip. **Needs a decision** is the queue — one row per card,
+ * carrying why it is there and the action that fixes it — and **Teammates** is the
+ * people: the sessions this repository's bus knows, plus every owner a card names,
+ * so a session holding nothing and a label that stopped answering are both visible.
+ * Done is a quiet strip of ids that open their cards.
+ *
+ * The roster is optional throughout: `view.teammates` is absent when `session-bus`
+ * has no records here, and every state then reads `—` rather than claiming the
+ * session is gone. A card is the only thing that can make a row a decision, so the
+ * first panel is drawn from the round and the second from the round and the roster
+ * together.
+ *
+ * Same rule as the rest of the client: every value arrives as `textContent`.
+ */
+
+export const BOARD_TEAM_JS = String.raw`(function () {
+  "use strict";
+  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" };
+
+  /**
+   * A panel: its heading row, then its body.
+   *
+   * With a filter on, the count reads shown/total the way a lane head does, so a
+   * reader can tell "nothing here" from "nothing matches".
+   */
+  function panel(text, count, total) {
+    var node = el("section", "board-team__group");
+    node.setAttribute("aria-label", text);
+    var caption = el("h2", "board-team__caption", text);
+    caption.appendChild(chip(total !== undefined && total !== count ? count + "/" + total : String(count)));
+    node.appendChild(caption);
+    return node;
+  }
+
+  /**
+   * Which cards need the lead, and why — entries, not rows.
+   *
+   * The renderer filters this list, so it has to be the data: filtering the built
+   * rows would test the element instead of the card.
+   *
+   * The round's groups overlap on purpose — a doing card untouched for half an hour
+   * is both idle and unplanned — so a card can arrive twice. On the page one card is
+   * 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 };
+
+  function needs(view) {
+    var round = view.round;
+    var byCard = {};
+    var entries = [];
+    function add(cards, why, kind) {
+      for (var i = 0; i < cards.length; i++) {
+        var card = cards[i];
+        var entry = { card: card, why: why(card), kind: kind };
+        var seen = byCard[card.id];
+        if (seen === undefined) {
+          byCard[card.id] = entry;
+          entries.push(entry);
+        } else if (KIND_RANK[kind] < KIND_RANK[seen.kind]) {
+          seen.why = entry.why;
+          seen.kind = kind;
+        }
+      }
+    }
+    add(round.blocked, function (card) {
+      var last = card.notes.length > 0 ? card.notes[card.notes.length - 1] : undefined;
+      return last ? last.text : "blocked";
+    }, "blocked");
+    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");
+    add(round.unassigned, function () { return "nobody holds it"; }, "unassigned");
+    // 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); },
+      "waiting",
+    );
+    return entries;
+  }
+
+  /** 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");
+    node.setAttribute("data-kind", entry.kind);
+
+    var open = el("button", "board-team__open");
+    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);
+    // 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");
+    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);
+    }
+    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);
+    why.title = entry.why;
+    if (entry.kind === "blocked") why.className = "board-team__why board-team__why--blocked";
+    node.appendChild(why);
+    return node;
+  }
+
+  /**
+   * Every teammate: the bus's sessions and the owners a card names, as one list.
+   *
+   * An owner with no live session is the interesting row — work is held by a label
+   * nothing answers to — so it stays, with "no record" where a heartbeat would be.
+   */
+  function teammates(view, roster) {
+    var round = view.round;
+    var byLabel = {};
+    var rows = [];
+    function labelOf(label) { return label.toLowerCase(); }
+
+    for (var i = 0; i < round.owners.length; i++) {
+      var group = round.owners[i];
+      byLabel[labelOf(group.label)] = { label: group.label, live: group.cards, done: group.done };
+    }
+    var seen = {};
+    if (roster !== null) {
+      for (var j = 0; j < roster.length; j++) {
+        var entry = roster[j];
+        seen[labelOf(entry.label)] = true;
+        rows.push({
+          label: entry.label,
+          state: entry.state,
+          seen: entry.seen,
+          mail: entry.mail,
+          listening: entry.listening,
+          you: entry.you,
+          cards: byLabel[labelOf(entry.label)] || { live: [], done: [] },
+        });
+      }
+    }
+    for (var key in byLabel) {
+      if (seen[key]) continue;
+      rows.push({ label: byLabel[key].label, state: roster === null ? "unknown" : "absent", seen: undefined, mail: 0, listening: undefined, you: false, cards: byLabel[key] });
+    }
+
+    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;
+    }
+    rows.sort(function (a, b) { return rank(a) - rank(b) || a.label.localeCompare(b.label); });
+    return rows;
+  }
+
+  /** A text node carrying its stamp, so refreshAges rewrites it with every other age. */
+  function stamped(text, at) {
+    var node = el("span", "", text);
+    node.setAttribute("data-at", String(at));
+    return node;
+  }
+
+  /** 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");
+    node.setAttribute("data-state", mate.state);
+    if (mate.you) node.setAttribute("data-you", "1");
+
+    var dot = el("span", "board-team__dot");
+    dot.setAttribute("aria-hidden", "true");
+    node.appendChild(dot);
+    node.appendChild(el("span", "board-team__name", 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.
+    if (mate.state === "live" && mate.listening === false) {
+      var silent = chip("not listening");
+      silent.title = "Mail waits for this session's next turn; it is not woken for it.";
+      node.appendChild(silent);
+    }
+    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");
+    if (mate.state === "quiet" && mate.seen !== undefined) {
+      mets.appendChild(document.createTextNode("quiet for "));
+      mets.appendChild(stamped(ago(mate.seen), mate.seen));
+    } else {
+      mets.appendChild(document.createTextNode(STATE_WORD[mate.state] || mate.state));
+    }
+    var held = mate.cards.live.length;
+    var done = mate.cards.done.length;
+    mets.appendChild(document.createTextNode(" \u00B7 " + (held === 0 ? "no cards" : held + " held")));
+    if (done > 0) mets.appendChild(document.createTextNode(" \u00B7 " + done + " done"));
+    if (held > 0) {
+      var at = mate.cards.live[0].updatedAt;
+      for (var i = 1; i < mate.cards.live.length; i++) at = Math.min(at, mate.cards.live[i].updatedAt);
+      mets.appendChild(document.createTextNode(" \u00B7 oldest "));
+      mets.appendChild(stamped(ago(at), at));
+    }
+    node.appendChild(mets);
+    return node;
+  }
+
+  board.renderTeam = function (view) {
+    var root = document.getElementById("board-team");
+    if (!root) return;
+    root.textContent = "";
+    var round = view.round;
+    // Absent, not empty: null means no bus here, so every state reads unknown.
+    var roster = view.teammates === undefined ? null : view.teammates;
+    // The toolbar's filter is one control for both tabs, so the round reads it too.
+    var query = board.query || "";
+    var keep = function (card) { return board.matches(card, query); };
+    var matchesLabel = function (label) { return label.toLowerCase().indexOf(query.toLowerCase()) !== -1; };
+    var filtering = query !== "";
+    var noMatch = "no card here matches \"" + query + "\"";
+
+    var grid = el("div", "board-team__grid");
+
+    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"));
+    } else {
+      var list = el("div", "board-team__queue");
+      for (var i = 0; i < decisions.length; i++) list.appendChild(decision(decisions[i], view));
+      queue.appendChild(list);
+    }
+    grid.appendChild(queue);
+
+    var everyone = teammates(view, roster);
+    var shown = everyone.filter(function (m) {
+      if (!filtering) return true;
+      if (matchesLabel(m.label)) return true;
+      var held = m.cards.live.concat(m.cards.done);
+      for (var k = 0; k < held.length; k++) if (keep(held[k])) return true;
+      return false;
+    });
+    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"));
+    } else {
+      var rosterList = el("ul", "board-team__roster");
+      for (var j = 0; j < shown.length; j++) rosterList.appendChild(mate(shown[j]));
+      people.appendChild(rosterList);
+    }
+    grid.appendChild(people);
+    root.appendChild(grid);
+
+    var done = round.done.filter(keep);
+    var strip = el("p", "board-team__done");
+    if (done.length === 0) {
+      // While filtering, a third "no card here matches" line adds nothing; the two
+      // panels above already said it.
+      if (filtering) return root;
+      strip.textContent = "nothing finished yet";
+    } else {
+      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);
+          id.type = "button";
+          id.setAttribute("aria-haspopup", "dialog");
+          id.addEventListener("click", function () { board.openCard(card.id); });
+          strip.appendChild(id);
+        })(done[m]);
+      }
+      strip.appendChild(document.createTextNode(" \u00B7 " + plural(done.length, "card") +
+        (filtering && done.length !== round.done.length ? " of " + round.done.length : "")));
+    }
+    root.appendChild(strip);
+  };
+})();`;

package/extensions/board/writes.ts

@@ -0,0 +1,99 @@
+/**
+ * The page's write path: one request from a browser, one call into the store.
+ *
+ * A browser is not an identity, so every write here is made as the actor the page
+ * serves as — the session that started it, until a page has a seat. Two statuses matter
+ * to a client that retries: a field it can fix is 422, and a card somebody else moved is
+ * 409 with the card as it now stands. Everything else about a card's lifecycle is
+ * `lib/board/rules.ts`.
+ */
+
+import { normalizeCardId } from "../../lib/board/card.ts";
+import type { Actor, CardOp } from "../../lib/board/rules.ts";
+import type { BoardStore } from "../../lib/board/store.ts";
+import { normalizeLabel } from "../../lib/session-label.ts";
+import { createInput } from "./input.ts";
+import type { PageResult, PageWrite } from "./transport/router.ts";
+
+/** What a write needs: the store, who it is made as, and the clock. */
+export interface WriteContext {
+	store: BoardStore;
+	actor: () => Actor;
+	now: () => number;
+}
+
+/** One write, with the status the page shows as a banner. */
+export async function writeOf(context: WriteContext, request: PageWrite): Promise<PageResult> {
+	const me = context.actor();
+	if (request.kind === "add") {
+		const parsed = createInput(request.body);
+		if ("error" in parsed) return { ok: false, status: 422, error: parsed.error };
+		const card = await context.store.create(parsed.input, me, context.now());
+		return { ok: true, card };
+	}
+
+	const id = normalizeCardId(request.id);
+	if (id === undefined) return { ok: false, status: 422, error: `"${request.id}" is not a card id.` };
+	const op = opOf(request);
+	if ("error" in op) return { ok: false, status: 422, error: op.error };
+	const result = await context.store.mutate(id, op.op, me, context.now());
+	if (!result.ok)
+		return {
+			ok: false,
+			status: 409,
+			error: result.error,
+			...(result.card === undefined ? {} : { card: result.card }),
+		};
+	return { ok: true, card: result.card };
+}
+
+/** The operation a card route names, or the reason it cannot be one. */
+export function opOf(request: PageWrite): { op: CardOp } | { error: string } {
+	switch (request.kind) {
+		case "claim":
+			return { op: { kind: "claim" } };
+		case "release":
+			return { op: { kind: "release" } };
+		case "reclaim":
+			return { op: { kind: "reclaim" } };
+		case "assign": {
+			// A page cannot message a peer — a command context has no tool calls — so this
+			// records the owner and says in the card's history that nothing was sent.
+			const to = normalizeLabel(typeof request.body.to === "string" ? request.body.to : "", "");
+			if (to === "") return { error: "assign needs a teammate to hand the card to." };
+			return {
+				op: {
+					kind: "assign",
+					to: { label: to },
+					note: `assigned to ${to} from the board page; no handoff was sent`,
+				},
+			};
+		}
+		case "drop":
+			return { op: { kind: "drop" } };
+		case "note":
+			return { op: { kind: "note", text: request.body.text } };
+		case "plan":
+			return { op: { kind: "plan", path: request.body.path } };
+		case "edit":
+			// Every field is passed through as the browser sent it, including the absent
+			// ones: `applyOp` leaves an absent field alone, which is what keeps the page
+			// from clearing a link it never showed.
+			return {
+				op: {
+					kind: "edit",
+					title: request.body.title,
+					paths: request.body.paths,
+					priority: request.body.priority,
+					dependsOn: request.body.dependsOn,
+				},
+			};
+		case "move": {
+			const status = request.body.status;
+			if (status === "doing" || status === "blocked" || status === "done") return { op: { kind: "move", status } };
+			return { error: 'move needs a target lane: "doing", "blocked", or "done".' };
+		}
+		default:
+			return { error: "add is not a card route." };
+	}
+}

package/extensions/bytefly/notify/types.ts

@@ -21,7 +21,7 @@ export interface NotifyConfig {
 	needsInput: boolean;
 	/** Notify when a background `job` finishes. */
 	jobFinished: boolean;
-	/** Notify when a `watch` wake match fires while the agent is idle. */
+	/** Notify when a `watch` wake match fires, once the agent is idle. */
 	matchFound: boolean;
 	/** Delivery method; `auto` chooses by terminal and platform. */
 	method: NotifyMethod;