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

package/extensions/board/view/actions.ts

@@ -0,0 +1,306 @@
+/**
+ * The client's writes and its two kit dialogs: one request per named action, the
+ * confirmation a claim, a reclaim, or a deletion asks for first, and the card dialog
+ * that shows a card whole.
+ *
+ * A browser is not an identity — the page writes as the session that serves it — so
+ * the three actions that move a card between people ask before they act, and the
+ * answer names the card and the session. Everything else is a single request whose
+ * refusal becomes a banner, never an `alert()`.
+ *
+ * Both dialogs are the kit's (`bf-dialog` + `dialogScript`): the Tab trap, `Esc`,
+ * the backdrop click, and the focus return are `lib/web`'s. This module only fills
+ * them, answers them, and notices when the user dismissed one.
+ */
+
+export const BOARD_ACTIONS_JS = String.raw`(function () {
+  "use strict";
+  var board = window.bfBoard || (window.bfBoard = {});
+  var token = new URLSearchParams(window.location.search).get("token") || "";
+
+  /** The one place a message reaches the reader: a banner, cleared by the next success. */
+  function banner(message) {
+    var node = document.getElementById("board-banner");
+    if (!node) return;
+    node.hidden = !message;
+    node.textContent = message || "";
+  }
+
+  /** One write. The token rides in the query string, the body is JSON. */
+  function request(path, method, body) {
+    var url = path + "?token=" + encodeURIComponent(token);
+    var options = { method: method };
+    if (body !== undefined) {
+      options.headers = { "Content-Type": "application/json" };
+      options.body = JSON.stringify(body);
+    }
+    return fetch(url, options).then(function (response) {
+      return response.json().catch(function () { return {}; }).then(function (payload) {
+        if (!response.ok) {
+          throw new Error(payload && payload.error ? payload.error : "The board refused that (" + response.status + ").");
+        }
+        banner("");
+        return payload;
+      });
+    });
+  }
+
+  function post(path, body) {
+    return request(path, "POST", body);
+  }
+
+  function remove(path) {
+    return request(path, "DELETE");
+  }
+
+  /** Call settle(false) when the kit closes the dialog without this module asking. */
+  function whenClosed(dialog, settle) {
+    var observer = new MutationObserver(function () {
+      if (dialog.hidden) {
+        observer.disconnect();
+        settle(false);
+      }
+    });
+    observer.observe(dialog, { attributes: true, attributeFilter: ["hidden"] });
+    return function () {
+      observer.disconnect();
+    };
+  }
+
+  /**
+   * Ask one question in the confirm dialog, and answer whether it was accepted.
+   *
+   * Esc and a backdrop click are the kit's to handle, and both mean "no": the
+   * dialog's hidden attribute going back up is what settles the promise, so a
+   * dismissed question never leaves the caller waiting.
+   */
+  function confirm(options) {
+    var dialog = document.getElementById("board-confirm");
+    var ok = document.getElementById("confirm-ok");
+    var cancel = document.getElementById("confirm-cancel");
+    if (!dialog || !ok || !cancel || !window.bfConfirm) return Promise.resolve(true);
+    document.getElementById("confirm-title").textContent = options.title;
+    document.getElementById("confirm-body").textContent = options.body || "";
+    ok.textContent = options.ok || "Confirm";
+    ok.className = "bf-btn " + (options.danger ? "bf-btn--danger" : "bf-btn--primary");
+    return new Promise(function (resolve) {
+      var answered = false;
+      function finish(value) {
+        if (answered) return;
+        answered = true;
+        ok.removeEventListener("click", accept);
+        cancel.removeEventListener("click", dismiss);
+        stop();
+        if (!dialog.hidden) window.bfConfirm.close();
+        resolve(value);
+      }
+      function accept() { finish(true); }
+      function dismiss() { finish(false); }
+      var stop = whenClosed(dialog, finish);
+      ok.addEventListener("click", accept);
+      cancel.addEventListener("click", dismiss);
+      window.bfConfirm.open();
+      cancel.focus();
+    });
+  }
+
+  /** The question a claim, a reclaim, or a deletion asks, or none for the rest. */
+  function question(verb, card) {
+    var me = board.view ? board.view.me.label : "this session";
+    if (verb === "claim") {
+      return { title: "Claim #" + card.id + "?", body: "Claim #" + card.id + " as " + me + "?", ok: "Claim" };
+    }
+    if (verb === "reclaim") {
+      return {
+        title: "Reclaim #" + card.id + "?",
+        body: "Reclaim #" + card.id + " from " + (card.owner ? card.owner.label : "nobody") + "? It returns to To do and keeps its notes.",
+        ok: "Reclaim",
+        danger: true
+      };
+    }
+    if (verb === "drop") {
+      var notes = card.notes.length;
+      return {
+        title: "Delete #" + card.id + "?",
+        body: "Delete #" + card.id + (notes > 0 ? " and its " + notes + " notes?" : "?"),
+        ok: "Delete",
+        danger: true
+      };
+    }
+    return undefined;
+  }
+
+  /**
+   * Run one named action against a card, after its question when it has one.
+   *
+   * A refusal is a banner; a success needs nothing, because the next frame is the
+   * truth and it arrives within a second.
+   */
+  board.act = function (verb, card, extra) {
+    var ask = question(verb, card);
+    var proceed = ask ? confirm(ask) : Promise.resolve(true);
+    return proceed.then(function (accepted) {
+      if (!accepted) return undefined;
+      var path = "/api/cards/" + encodeURIComponent(card.id);
+      var done = verb === "drop" ? remove(path) : post(path + "/" + verb, extra || {});
+      return done.catch(function (error) {
+        banner(error.message);
+        return undefined;
+      });
+    });
+  };
+
+  /**
+   * Hand an unowned card to a teammate, from the board rather than the bus.
+   *
+   * The page records the owner; it cannot send, so the card's history says no handoff
+   * went out and the peer reads it the next time it looks. The team tool's assign is
+   * the action that messages somebody.
+   */
+  board.assignTo = function (card, label) {
+    return post("/api/cards/" + encodeURIComponent(card.id) + "/assign", { to: label }).catch(function (error) {
+      banner(error.message);
+      return undefined;
+    });
+  };
+
+  /** Add a card from the composer. */
+  board.add = function (input) {
+    return post("/api/cards", input).catch(function (error) {
+      banner(error.message);
+      return undefined;
+    });
+  };
+
+  /** Note the card whose dialog is open, from its own field. */
+  board.addNote = function () {
+    var input = document.getElementById("card-dialog-note");
+    if (!input || board.openId === undefined) return undefined;
+    var text = input.value.trim();
+    if (!text) return undefined;
+    var card = board.findCard(board.view, board.openId);
+    if (!card) return undefined;
+    return post("/api/cards/" + encodeURIComponent(card.id) + "/note", { text: text })
+      .then(function (payload) {
+        input.value = "";
+        return payload;
+      })
+      .catch(function (error) {
+        banner(error.message);
+        return undefined;
+      });
+  };
+
+  /** Fill and open the card dialog; the second argument names what to focus. */
+  board.openCard = function (id, focus) {
+    var view = board.view;
+    if (!view) return;
+    var card = board.findCard(view, id);
+    if (!card || !window.bfCard) return;
+    board.openId = id;
+    board.fillDialog(card, view);
+    window.bfCard.open();
+    if (focus === "note") {
+      var input = document.getElementById("card-dialog-note");
+      if (input) input.focus();
+    }
+  };
+
+  board.closeCard = function () {
+    if (window.bfCard) window.bfCard.close();
+  };
+
+  board.dialogOpen = function () {
+    return window.bfCard ? window.bfCard.isOpen() : false;
+  };
+
+  /**
+   * Assign to: a teammate, then the button.
+   *
+   * The names come from the roster the page already has, live first: a session that has
+   * gone quiet is still a label a card can record, but it is not the one to pick.
+   */
+  function assignControl(card, view) {
+    var row = board.el("div", "board-dialog__assign");
+    var select = board.el("select", "bf-input board-dialog__assign-select");
+    select.setAttribute("aria-label", "Assign to");
+    var mates = view.teammates === undefined ? [] : view.teammates.map(function (mate) { return mate.label; });
+    // Your own terminal is not somebody to hand a card to, and neither is the seat.
+    var self = view.session ? view.session.label : "";
+    var others = mates.filter(function (label) { return label.toLowerCase() !== self.toLowerCase(); });
+    if (others.length > 0) mates = others;
+    if (mates.length === 0) mates = ["team-lead"];
+    for (var i = 0; i < mates.length; i++) {
+      var option = board.el("option", "", mates[i]);
+      option.value = mates[i];
+      select.appendChild(option);
+    }
+    row.appendChild(board.el("span", "board-dialog__label", "Assign to"));
+    row.appendChild(select);
+    row.appendChild(board.actionButton("Assign", function () { board.assignTo(card, select.value); }));
+    return row;
+  }
+
+  /**
+   * The card dialog's footer: the claim an unowned card is waiting for, the lane
+   * buttons its owner may move to, then its destructive ones. Nothing here is a
+   * card-face action, so a reader cannot delete a card from the lane by hitting the
+   * wrong button.
+   */
+  board.fillDialogActions = function (card, view) {
+    var footer = document.getElementById("card-dialog-actions");
+    if (!footer) return;
+    footer.textContent = "";
+    // Which verb a card allows is board.may's answer, the same one the card face and a
+    // queue row ask; this list only decides which of them the footer shows, and in what
+    // order. An unclaimed card is waiting for its first owner — without Claim the dialog
+    // offered a reader only Drop and Close on a card they had just opened.
+    if (board.may(card, view, "claim")) {
+      footer.appendChild(board.actionButton("Claim", function () { board.act("claim", card); }, "primary"));
+    }
+    if (board.may(card, view, "move")) {
+      // Only the lanes this card can reach: the lane it is in is the head's status, and
+      // a segmented control whose selected item is a disabled button reads as a live one.
+      var targets = ["doing", "blocked", "done"].filter(function (lane) { return lane !== card.status; });
+      var move = board.el("div", "board-dialog__move");
+      move.appendChild(board.el("span", "board-dialog__label", "Move to"));
+      var lanes = board.el("div", "bf-segmented");
+      for (var i = 0; i < targets.length; i++) {
+        (function (lane) {
+          var item = board.el("button", "bf-segmented__item", board.laneLabel(lane));
+          item.type = "button";
+          item.addEventListener("click", function () { board.act("move", card, { status: lane }); });
+          lanes.appendChild(item);
+        })(targets[i]);
+      }
+      move.appendChild(lanes);
+      footer.appendChild(move);
+    }
+    if (board.may(card, view, "assign")) footer.appendChild(assignControl(card, view));
+    if (board.may(card, view, "release")) {
+      footer.appendChild(board.actionButton("Release", function () { board.act("release", card); }));
+    }
+    // Fixing what the card says follows the same rule the rules do: the holder decides,
+    // and anyone decides while nobody holds it — including a finished card.
+    if (board.may(card, view, "edit")) {
+      footer.appendChild(board.actionButton("Edit", function () { board.editCard(card); }));
+    }
+    if (board.may(card, view, "drop")) {
+      footer.appendChild(board.actionButton("Drop", function () { board.act("drop", card); }, "danger"));
+    }
+    footer.appendChild(board.actionButton("Close", function () { board.closeCard(); }));
+  };
+
+  // A dialog the kit closed — Esc, a backdrop click, or its own close button —
+  // forgets which card it showed, so the next frame stops filling a hidden panel.
+  var cardDialog = document.getElementById("board-card-dialog");
+  if (cardDialog) {
+    new MutationObserver(function () {
+      if (cardDialog.hidden) board.openId = undefined;
+    }).observe(cardDialog, { attributes: true, attributeFilter: ["hidden"] });
+  }
+
+  board.banner = banner;
+  board.confirm = confirm;
+  board.post = post;
+})();`;

package/extensions/board/view/client.ts

@@ -0,0 +1,41 @@
+/**
+ * The client bundle: the five modules that paint, round up, write, bind keys, and
+ * follow the frame stream, plus the kit's own theme toggle and one `dialogScript`
+ * per modal, and the one entry point that starts them.
+ *
+ * Served as one string, because a page that opens six requests before it can paint
+ * is a page that looks broken for a moment. Nothing here is typed — no compiler sees
+ * a template string — so the split is by job and the class-contract test reads the
+ * result: `render.ts` paints, `team.ts` draws the round, `actions.ts` posts and owns
+ * the two dialogs, `keys.ts` binds, and `live.ts` owns the tabs and the stream.
+ *
+ * Load order is a dependency: `team` takes helpers from `render`, and `live` starts
+ * last, after every `board.*` handler it wires exists.
+ */
+
+import { THEME_TOGGLE_JS, dialogScript, keysDialogScript } from "../../../lib/web/index.ts";
+import { BOARD_ACTIONS_JS } from "./actions.ts";
+import { BOARD_KEYS_JS } from "./keys.ts";
+import { BOARD_LIVE_JS } from "./live.ts";
+import { BOARD_RENDER_JS } from "./render.ts";
+import { BOARD_TEAM_JS } from "./team.ts";
+
+/** The whole client, in load order: paint, round, write, keys, wiring, then start. */
+export const BOARD_CLIENT_JS = `${BOARD_RENDER_JS}
+${BOARD_TEAM_JS}
+${BOARD_ACTIONS_JS}
+${BOARD_KEYS_JS}
+${BOARD_LIVE_JS}
+${THEME_TOGGLE_JS}
+${dialogScript({ dialogId: "board-new-dialog", globalName: "bfNew" })}
+${dialogScript({ dialogId: "board-card-dialog", closeId: "card-dialog-close", globalName: "bfCard" })}
+${dialogScript({ dialogId: "board-confirm", globalName: "bfConfirm" })}
+${keysDialogScript("keys-open")}
+(function () {
+  "use strict";
+  var board = window.bfBoard;
+  if (!board) return;
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", function () { board.start(); });
+  else board.start();
+})();
+`;

package/extensions/board/view/keys.ts

@@ -0,0 +1,121 @@
+/**
+ * The board page's keyboard: one table, and the two halves that read it.
+ *
+ * The sheet the user opens with `?` is server-rendered from {@link BOARD_KEYS}, and
+ * the bindings that make those keys work are {@link BOARD_KEYS_JS}, so the key a row
+ * advertises and the key the client listens for sit in one file — the drift this
+ * module exists to prevent, since no type checker sees the bundle.
+ *
+ * The vocabulary is the TUI's where it means the same thing (`j`/`k`, `?`, `Esc`);
+ * `n`, `/` and `t` are this page's own.
+ */
+
+import type { KeyHint } from "../../../lib/web/index.ts";
+
+/** One binding: the key or keys, and what pressing it does. */
+export const BOARD_KEYS: readonly KeyHint[] = [
+	{ keys: "n", label: "New card — open the dialog and focus the title field" },
+	{ keys: "/", label: "Filter the cards" },
+	{ keys: ["j", "k"], label: "Next or previous card" },
+	{ keys: "Enter", label: "Open the focused card" },
+	{ keys: "t", label: "Switch Board and Team" },
+	{ keys: "Esc", label: "Close a dialog, or clear the filter" },
+	{ keys: "?", label: "This sheet" },
+];
+
+/**
+ * The bindings, as the client sees them.
+ *
+ * Every branch reads `board.` state and calls `board.` handlers that `render.ts`,
+ * `team.ts`, and `live.ts` already published, so this module decides only *which
+ * key* does what. A field with focus keeps its keys: `n` inside the note input types
+ * an `n`.
+ */
+export const BOARD_KEYS_JS = String.raw`(function () {
+  "use strict";
+  var board = window.bfBoard || (window.bfBoard = {});
+
+  /** Whether the event landed in a field, where every key is text. */
+  function typing(target) {
+    if (!target || !target.tagName) return false;
+    var tag = target.tagName.toLowerCase();
+    return tag === "input" || tag === "textarea" || tag === "select" || target.isContentEditable === true;
+  }
+
+  /** The card nodes in reading order, so j/k walk the board as it is drawn. */
+  function cards() {
+    var seen = [];
+    var nodes = document.querySelectorAll(".board-card");
+    for (var i = 0; i < nodes.length; i++) if (!nodes[i].hidden) seen.push(nodes[i]);
+    return seen;
+  }
+
+  /** Move focus to the next or previous drawn card, and say so for a screen reader. */
+  function step(delta) {
+    var drawn = cards();
+    if (drawn.length === 0) return;
+    var at = drawn.indexOf(document.activeElement);
+    var next = at < 0 ? (delta > 0 ? 0 : drawn.length - 1) : (at + delta + drawn.length) % drawn.length;
+    var button = drawn[next].querySelector(".board-card__title");
+    if (button) button.focus();
+  }
+
+  board.bindKeys = function (doc) {
+    doc.addEventListener("keydown", function (event) {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      var target = event.target;
+      if (event.key === "?" && !typing(target)) {
+        event.preventDefault();
+        board.openKeys();
+        return;
+      }
+      if (event.key === "Escape") {
+        if (board.keysOpen && board.keysOpen()) {
+          board.closeKeys();
+          return;
+        }
+        if (board.dialogOpen && board.dialogOpen()) {
+          board.closeCard();
+          return;
+        }
+        // The composer is a kit dialog, so the kit's own Esc closed it in the capture
+        // phase already; a filter with text is what Escape is for here. An empty one
+        // gives the keyboard back to the page by leaving the field.
+        if (board.hasFilter()) {
+          board.clearFilter();
+          if (typing(target)) target.blur();
+          return;
+        }
+        if (typing(target)) {
+          target.blur();
+          return;
+        }
+        return;
+      }
+      if (typing(target)) {
+        if (event.key === "Enter" && target.id === "card-dialog-note") board.addNote();
+        if (event.key === "Enter" && target.id === "board-filter") board.applyFilter();
+        return;
+      }
+      if (event.key === "n") {
+        // Two modals over one board is a trap whose edge the reader cannot see, and a
+        // viewer's page has no composer to open at all.
+        if (!board.canWrite() || board.dialogOpen() || board.composerOpen()) return;
+        event.preventDefault();
+        board.focusComposer();
+      } else if (event.key === "/") {
+        event.preventDefault();
+        board.focusFilter();
+      } else if (event.key === "j") {
+        event.preventDefault();
+        step(1);
+      } else if (event.key === "k") {
+        event.preventDefault();
+        step(-1);
+      } else if (event.key === "t") {
+        event.preventDefault();
+        board.showView(board.viewName() === "team" ? "board" : "team");
+      }
+    });
+  };
+})();`;