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

package/extensions/board/view/render.ts

@@ -0,0 +1,496 @@
+/**
+ * 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
+ * `innerHTML`, never into a template string. A card title is model-written and a note
+ * can be anything a person typed, so the only safe renderer is one that never parses
+ * 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.
+ *
+ * The client modules share one namespace, `window.bfBoard`: this one paints,
+ * `team.ts` draws the round, `actions.ts` posts, `keys.ts` binds, and `live.ts` owns
+ * the frame stream and the wiring.
+ */
+
+export const BOARD_RENDER_JS = 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;
+
+  /** One element with optional class and text. */
+  function el(tag, className, text) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined && text !== null) node.textContent = String(text);
+    return node;
+  }
+
+  /**
+   * 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.
+   */
+  function actionButton(label, onClick, variant) {
+    var kind = variant === "plain" ? "" : variant ? " bf-btn--" + variant : " bf-btn--ghost";
+    var node = el("button", "bf-btn" + kind, label);
+    node.type = "button";
+    node.addEventListener("click", onClick);
+    return node;
+  }
+
+  /** A kit chip, with a tone when the meaning is a state. */
+  function chip(text, tone) {
+    return el("span", "bf-chip" + (tone ? " bf-chip--" + tone : ""), text);
+  }
+
+  /** "12m", "3h", "2d" — the age of a card's last write, compact enough for a meta line. */
+  function ago(at) {
+    var seconds = Math.max(0, Math.round((Date.now() - at) / 1000));
+    if (seconds < 45) return "now";
+    var minutes = Math.round(seconds / 60);
+    if (minutes < 60) return minutes + "m";
+    var hours = Math.round(minutes / 60);
+    if (hours < 24) return hours + "h";
+    return Math.round(hours / 24) + "d";
+  }
+
+  /** Bytes, the way the footer says them. */
+  function size(bytes) {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " kB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  }
+
+  /** Every card the snapshot carries, in lane order. */
+  function cards(view) {
+    var all = [];
+    for (var i = 0; i < view.lanes.length; i++) all = all.concat(view.lanes[i].cards);
+    return all;
+  }
+
+  /** One card by id, or undefined when the last frame no longer has it. */
+  function findCard(view, id) {
+    var all = cards(view);
+    for (var i = 0; i < all.length; i++) if (all[i].id === id) return all[i];
+    return undefined;
+  }
+
+  /** Whether this session holds the card. */
+  function mine(card, me) {
+    if (!card.owner) return false;
+    if (card.owner.id !== undefined && me.id !== undefined) return card.owner.id === me.id;
+    return String(card.owner.label).toLowerCase() === String(me.label).toLowerCase();
+  }
+
+  /** A card's priority; an older card that never recorded one is ordinary. */
+  function priorityOf(card) {
+    return card.priority || "normal";
+  }
+
+  /**
+   * The cards this one waits for that are not finished yet.
+   *
+   * The board is the index: a link is one id in the waiting card's file, so the other
+   * card's lane can only be read from the frame. A finished dependency has stopped
+   * explaining anything, so it drops out of the answer.
+   */
+  function blockersOf(card, view) {
+    var ids = card.dependsOn || [];
+    if (ids.length === 0 || !view) return [];
+    var all = cards(view);
+    var open = [];
+    for (var i = 0; i < ids.length; i++) {
+      for (var j = 0; j < all.length; j++) {
+        if (all[j].id === ids[i] && all[j].status !== "done") open.push(all[j]);
+      }
+    }
+    return open;
+  }
+
+  /** How the board says what a card waits for: the id and the lane that explains it. */
+  function waitingText(card, view) {
+    return blockersOf(card, view)
+      .map(function (blocker) { return "#" + blocker.id + " (" + blocker.status + ")"; })
+      .join(", ");
+  }
+
+  /**
+   * Whether this reader may do one verb to one card.
+   *
+   * The one table behind three surfaces: a card face, the dialog's footer, and a queue
+   * row each draw a different subset — a face offers two actions, the dialog five — but
+   * a verb is allowed for the same reader on all of them, and it is the same rule the
+   * server applies in lib/board/rules.ts. Open is always allowed: reading is not a write.
+   */
+  function may(card, view, verb) {
+    // Reading is not a write, so it survives a viewer's page; everything else is what
+    // the document's authority says it may be.
+    if (verb === "open") return true;
+    if (!canWrite()) return false;
+    var isMine = mine(card, view.me);
+    var waiting = blockersOf(card, view).length > 0;
+    var finished = card.status === "done";
+    if (verb === "claim") return card.status === "todo" && !waiting;
+    if (verb === "move") return isMine && !finished;
+    if (verb === "release") return isMine && !finished;
+    if (verb === "edit") return card.owner === undefined || isMine;
+    if (verb === "drop") return card.status === "todo" || finished || isMine;
+    if (verb === "reclaim") return card.owner !== undefined && !finished;
+    // Recording an owner is what a page can do where it cannot message: an unowned card
+    // that is not waiting for another, which is the same card a claim is offered.
+    if (verb === "assign") return card.owner === undefined && !finished && !waiting;
+    return false;
+  }
+
+  /**
+   * Whether this page may change a card at all.
+   *
+   * The document is rendered per request, so a viewer's shell says data-writes="0":
+   * one attribute decides every affordance, and the server refuses anyway — a page
+   * that offered what it would be turned down for teaches a reader the wrong thing.
+   */
+  function canWrite() {
+    return document.documentElement.getAttribute("data-writes") !== "0";
+  }
+
+  /** 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.
+    var waiting = waitingText(card, view);
+    if (waiting !== "") return { text: "waits on " + waiting, kind: "waiting" };
+    if (card.status === "blocked") {
+      // The lane already says blocked and the tone already says danger; the line says why.
+      return { text: last ? last.text : "blocked, with nothing recorded", kind: "blocked" };
+    }
+    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") return { text: "✓ done" + (card.owner ? " by " + card.owner.label : ""), 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", "board-card__paths");
+    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", "board-card");
+    item.setAttribute("data-card", card.id);
+    item.setAttribute("data-status", card.status);
+    item.setAttribute("data-rev", String(card.rev));
+
+    var head = el("p", "board-card__head");
+    head.appendChild(el("span", "board-card__id", "#" + card.id));
+    var title = actionButton(card.title, function () {
+      board.openCard(card.id);
+    });
+    title.className = "board-card__title";
+    head.appendChild(title);
+    item.appendChild(head);
+
+    var meta = el("p", "board-card__meta");
+    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 (priorityOf(card) !== "normal") meta.appendChild(chip(priorityOf(card)));
+    // 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) {
+      var kind = reason.kind === "blocked" || reason.kind === "unplanned" ? " board-card__reason--" + reason.kind : "";
+      var line = el("p", "board-card__reason" + kind, reason.text);
+      // It clamps to one line on the card, so the full sentence is the tooltip.
+      line.title = reason.text;
+      item.appendChild(line);
+    }
+
+    var actions = el("div", "board-card__actions");
+    // A card that waits cannot be claimed, so the card face does not offer it: the reason
+    // line above is what it says instead. Move is not a permission but the way into the
+    // dialog, so it is drawn for any card still in flight, whoever holds it.
+    if (may(card, view, "claim")) {
+      actions.appendChild(actionButton("Claim", function () { board.act("claim", card); }, "plain"));
+    } else if (canWrite() && card.status !== "todo" && card.status !== "done") {
+      // Move is the way into the dialog, not a permission, but a dialog with no actions
+      // in it is not worth opening.
+      actions.appendChild(actionButton("Move", function () { board.openCard(card.id, "move"); }, "plain"));
+    }
+    // A note is a write, and a viewer's dialog has no field for one.
+    if (canWrite()) actions.appendChild(actionButton("Note", function () { board.openCard(card.id, "note"); }));
+    actions.appendChild(actionButton("Open", function () { board.openCard(card.id); }));
+    item.appendChild(actions);
+    return item;
+  }
+
+  /** The toolbar's identity, progress, and footer. */
+  function renderChrome(view) {
+    var me = document.getElementById("board-me");
+    if (me) {
+      me.textContent = view.me.label;
+      me.title = "Writes from this page are made as " + view.me.label;
+    }
+    var progress = document.getElementById("board-progress");
+    if (progress) {
+      var total = view.counts.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) + "%";
+      var text = document.getElementById("board-progress-text");
+      if (text) text.textContent = view.counts.done + "/" + total + " done";
+    }
+    // A viewer gets the board, not the chance to make one: the composer and the empty
+    // state's way into it belong to whoever serves the page.
+    var create = document.getElementById("board-new");
+    if (create) create.hidden = !canWrite();
+    var first = document.getElementById("board-first-card");
+    if (first) first.hidden = !canWrite();
+    var where = document.getElementById("board-where");
+    if (where) {
+      where.textContent = "store " + view.where + " · " + plural(view.counts.total, "card") + " · " + size(view.bytes);
+    }
+  }
+
+  /** 1 card, 2 cards. */
+  function plural(count, noun) {
+    return count + " " + noun + (count === 1 ? "" : "s");
+  }
+
+  /**
+   * Rewrite every age already on the page from its own timestamp.
+   *
+   * A frame carries the ages of the moment it was built, so on a board nobody is
+   * 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.
+   */
+  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;
+    }
+  }
+
+  /** Whether the filter keeps a card: title, a path hint, or the holder. */
+  function matches(card, query) {
+    if (!query) return true;
+    var needle = query.toLowerCase();
+    if (card.title.toLowerCase().indexOf(needle) !== -1) return true;
+    if (card.owner && card.owner.label.toLowerCase().indexOf(needle) !== -1) return true;
+    for (var i = 0; i < card.paths.length; i++) if (card.paths[i].toLowerCase().indexOf(needle) !== -1) return true;
+    return false;
+  }
+
+  /** The lane section for one status, created once and then reused. */
+  function laneNode(lane) {
+    var section = document.querySelector('.board-lane[data-status="' + lane.status + '"]');
+    if (section) return section;
+    section = el("section", "board-lane");
+    section.setAttribute("data-status", lane.status);
+    var head = el("h2", "board-lane__head");
+    var toggle = actionButton(LANE_LABEL[lane.status] || lane.status, function () {
+      board.toggleLane(lane.status);
+    });
+    toggle.className = "board-lane__toggle";
+    toggle.setAttribute("aria-expanded", "true");
+    toggle.setAttribute("aria-controls", "lane-" + lane.status);
+    toggle.id = "lane-head-" + lane.status;
+    head.appendChild(el("span", "board-lane__dot"));
+    head.appendChild(toggle);
+    head.appendChild(el("span", "board-lane__count"));
+    section.appendChild(head);
+    var list = el("ol", "board-lane__list");
+    list.id = "lane-" + lane.status;
+    section.appendChild(list);
+    section.appendChild(el("p", "board-lane__empty", LANE_EMPTY[lane.status] || "nothing"));
+    return section;
+  }
+
+  /** Draw the lanes, rebuilding only one whose cards actually moved. */
+  function renderLanes(view) {
+    var lanes = document.getElementById("board-lanes");
+    if (!lanes) return;
+    if (lanes.getAttribute("data-skeleton") === "1") {
+      // The placeholders have done their job; the real lanes replace them whole.
+      lanes.textContent = "";
+      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;
+    for (var i = 0; i < view.lanes.length; i++) {
+      var lane = view.lanes[i];
+      var section = laneNode(lane);
+      if (section.parentNode !== lanes) lanes.appendChild(section);
+      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;
+      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));
+      }
+      var count = section.querySelector(".board-lane__count");
+      if (count) {
+        count.textContent = query === "" || shown.length === lane.cards.length
+          ? String(lane.cards.length)
+          : shown.length + "/" + lane.cards.length;
+      }
+      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";
+      }
+      var collapsed = board.collapsed && board.collapsed[lane.status] === true;
+      var list = section.querySelector(".board-lane__list");
+      if (list) list.hidden = collapsed;
+      var toggle = section.querySelector(".board-lane__toggle");
+      if (toggle) toggle.setAttribute("aria-expanded", String(!collapsed));
+    }
+    renderPicker(view);
+  }
+
+  /** The lane selector the narrow layout shows instead of four columns. */
+  function renderPicker(view) {
+    var picker = document.getElementById("board-picker");
+    if (!picker) return;
+    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);
+        item.type = "button";
+        item.setAttribute("role", "tab");
+        item.setAttribute("data-lane", lane.status);
+        item.addEventListener("click", function () { board.showLane(lane.status); });
+        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;
+    // 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;
+    document.getElementById("card-dialog-meta").textContent =
+      "#" + card.id + " · updated " + ago(card.updatedAt) + " · last edited by " + card.by;
+    var owner = document.getElementById("card-dialog-owner");
+    owner.textContent = "";
+    owner.appendChild(card.owner ? chip(card.owner.label, "accent") : document.createTextNode("unassigned"));
+    if (priorityOf(card) !== "normal") owner.appendChild(chip(priorityOf(card)));
+
+    var pathList = document.getElementById("card-dialog-paths");
+    pathList.textContent = "";
+    for (var i = 0; i < card.paths.length; i++) {
+      var item = el("li", "");
+      item.appendChild(chip(card.paths[i]));
+      pathList.appendChild(item);
+    }
+
+    var waits = document.getElementById("card-dialog-depends");
+    if (waits) {
+      var linked = (card.dependsOn || []).map(function (id) { return "#" + id; }).join(", ");
+      waits.hidden = linked === "";
+      waits.textContent = linked === "" ? "" : "waits on " + linked;
+    }
+
+    var plan = document.getElementById("card-dialog-plan");
+    plan.hidden = !card.plan;
+    plan.textContent = card.plan ? "plan " + card.plan : "";
+
+    var notes = document.getElementById("card-dialog-notes");
+    notes.textContent = "";
+    for (var j = 0; j < card.notes.length; j++) {
+      var note = card.notes[j];
+      // Who and when on their own line, the sentence under it, a rule between notes:
+      // wrapped prose used to run one note into the next with nothing to separate them.
+      var row = el("li", "board-dialog__note");
+      var head = el("p", "board-dialog__note-head");
+      head.appendChild(el("span", "board-dialog__note-by", note.by));
+      head.appendChild(el("span", "board-dialog__note-at", ago(note.at)));
+      row.appendChild(head);
+      row.appendChild(el("p", "board-dialog__note-text", note.text));
+      notes.appendChild(row);
+    }
+    var earlier = document.getElementById("card-dialog-earlier");
+    earlier.hidden = card.notesDropped === 0;
+    earlier.textContent = card.notesDropped === 0 ? "" : card.notesDropped + " earlier notes dropped";
+
+    // A note is a write, so a viewer's dialog carries none — and its actions are what
+    // board.may leaves, which for a viewer is Close alone.
+    var noteComposer = document.getElementById("card-dialog-note-composer");
+    if (noteComposer) noteComposer.hidden = !canWrite();
+    board.fillDialogActions(card, view);
+  }
+
+  /** Paint a whole snapshot. */
+  board.render = function (view) {
+    board.view = view;
+    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();
+    }
+  };
+
+  board.el = el;
+  board.chip = chip;
+  board.actionButton = actionButton;
+  board.ago = ago;
+  board.findCard = findCard;
+  board.mine = mine;
+  board.matches = matches;
+  board.canWrite = canWrite;
+  board.priorityOf = priorityOf;
+  board.blockersOf = blockersOf;
+  board.waitingText = waitingText;
+  board.may = may;
+  board.fillDialog = fillDialog;
+  board.refreshAges = refreshAges;
+  board.plural = plural;
+})();`;