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

package/extensions/board/view/live.ts

@@ -0,0 +1,397 @@
+/**
+ * The client's wiring: the tabs, the lane picker, the new-card dialog, the filter,
+ * and the live frame stream.
+ *
+ * A frame is a whole snapshot, so every message repaints from it rather than patching
+ * it — the renderer decides what actually changed. The only client state is which tab
+ * is showing, the filter text, which lanes are collapsed, and which card's dialog is
+ * open; none of it is authoritative, and none of it is sent anywhere.
+ */
+
+export const BOARD_LIVE_JS = String.raw`(function () {
+  "use strict";
+  var board = window.bfBoard || (window.bfBoard = {});
+  var token = new URLSearchParams(window.location.search).get("token") || "";
+  var LANE_LABEL = { todo: "To do", doing: "Doing", blocked: "Blocked", done: "Done" };
+
+  /** The lane's word, for the dialog's move buttons. */
+  board.laneLabel = function (lane) {
+    return LANE_LABEL[lane] || lane;
+  };
+
+  /** The badge's text and its kit status role: connecting, live, reconnecting. */
+  function badge(state, at) {
+    var node = document.getElementById("board-status");
+    if (!node) return;
+    node.setAttribute("data-state", state);
+    node.className = "bf-status board-status" +
+      (state === "live" ? " bf-status--saved" : state === "reconnecting" ? " bf-status--error" : "");
+    // "now" would read as "live · now ago", so a fresh frame says only "live".
+    if (state === "live") {
+      var age = at === undefined ? "now" : board.ago(at);
+      node.textContent = age === "now" ? "live" : "live · " + age;
+    }
+    else if (state === "reconnecting") node.textContent = "reconnecting…";
+    else node.textContent = "connecting…";
+  }
+
+  /** Show one tab: the panel, aria-current, and the address so a link is shareable. */
+  function showView(view) {
+    var team = view === "team";
+    document.documentElement.setAttribute("data-view", team ? "team" : "board");
+    document.getElementById("panel-board").hidden = team;
+    document.getElementById("panel-team").hidden = !team;
+    var tabs = document.querySelectorAll("[data-view][role='tab']");
+    for (var i = 0; i < tabs.length; i++) {
+      var current = tabs[i].getAttribute("data-view") === (team ? "team" : "board");
+      if (current) tabs[i].setAttribute("aria-current", "page");
+      else tabs[i].removeAttribute("aria-current");
+    }
+    var url = new URL(window.location.href);
+    url.searchParams.set("view", team ? "team" : "board");
+    window.history.replaceState(null, "", url.toString());
+  }
+
+  board.viewName = function () {
+    return document.documentElement.getAttribute("data-view") === "team" ? "team" : "board";
+  };
+
+  /** The narrow layout shows one lane; the picker is the only way to change it. */
+  function applyLane() {
+    var narrow = window.matchMedia && window.matchMedia("(max-width: 860px)").matches;
+    var lanes = document.querySelectorAll(".board-lane");
+    for (var i = 0; i < lanes.length; i++) {
+      var selected = lanes[i].getAttribute("data-status") === board.lane;
+      lanes[i].hidden = narrow && !selected;
+    }
+    var items = document.querySelectorAll("#board-picker [data-lane]");
+    for (var j = 0; j < items.length; j++) {
+      if (items[j].getAttribute("data-lane") === board.lane) items[j].setAttribute("aria-current", "page");
+      else items[j].removeAttribute("aria-current");
+    }
+  }
+
+  board.applyLane = applyLane;
+
+  board.showLane = function (lane) {
+    board.lane = lane;
+    applyLane();
+  };
+
+  /** Fold a lane's cards away and leave its head, count and all. */
+  board.toggleLane = function (status) {
+    board.collapsed = board.collapsed || {};
+    board.collapsed[status] = board.collapsed[status] !== true;
+    if (board.view) board.render(board.view);
+  };
+
+  board.showView = showView;
+
+  /**
+   * The composer writes one card: a new one, or the one the card dialog was showing.
+   *
+   * The mode lives here rather than in the form, because the form is a draft: leaving
+   * edit mode puts the dialog back the way the toolbar's button opens it, and the text
+   * it held was the card's, not the reader's.
+   */
+  var composer = { mode: "add", card: undefined };
+
+  /** The title's character count, shown from the first character typed. */
+  function showTitleCount() {
+    var field = document.getElementById("new-title");
+    var count = document.getElementById("new-title-count");
+    if (!field || !count) return;
+    var max = Number(field.getAttribute("maxlength"));
+    if (!max) return;
+    var used = field.value.length;
+    count.textContent = used + "/" + max;
+    count.hidden = used === 0;
+  }
+
+  /** Dress the dialog for a new card or for the one being edited, and fill it in. */
+  function setComposerMode(mode, card) {
+    var heading = document.getElementById("board-new-title");
+    var submit = document.getElementById("new-submit");
+    var hint = document.getElementById("composer-hint");
+    var form = document.getElementById("board-composer");
+    var was = composer.mode;
+    composer.mode = mode;
+    composer.card = mode === "edit" ? card : undefined;
+    if (mode === "edit") {
+      var title = document.getElementById("new-title");
+      var paths = document.getElementById("new-paths");
+      var priority = document.getElementById("new-priority");
+      if (title) title.value = card.title;
+      if (paths) paths.value = (card.paths || []).join(" ");
+      if (priority) priority.value = board.priorityOf(card);
+      if (heading) heading.textContent = "Edit card #" + card.id;
+      if (submit) submit.textContent = "Save";
+      if (hint) hint.textContent = "links are recorded with the board tool, while the card is being planned";
+      showTitleCount();
+      return;
+    }
+    // Leaving edit mode throws its text away; a draft written here survives Esc.
+    if (was === "edit" && form) form.reset();
+    if (heading) heading.textContent = "New card";
+    if (submit) submit.textContent = "Add card";
+    if (hint && board.composerHint !== undefined) hint.textContent = board.composerHint;
+    showTitleCount();
+  }
+
+  /** Open whichever mode the composer is dressed for, with the caret in the title. */
+  function openComposerForm() {
+    if (!window.bfNew) return;
+    // The kit focuses a dialog's first control, which here is its close button; a card
+    // starts with a title, so the caret belongs in that field.
+    window.bfNew.open();
+    var input = document.getElementById("new-title");
+    if (input) input.focus();
+  }
+
+  /** Open the new-card dialog. */
+  board.openComposer = function () {
+    if (composer.mode === "edit") setComposerMode("add");
+    openComposerForm();
+  };
+
+  /** Open it on one card: the same two fields, prefilled, with Save in place of Add. */
+  board.editCard = function (card) {
+    if (!window.bfNew) return;
+    board.closeCard();
+    setComposerMode("edit", card);
+    openComposerForm();
+    var title = document.getElementById("new-title");
+    // The end of the title is where a typo is, so that is where the caret starts.
+    if (title && title.setSelectionRange) title.setSelectionRange(title.value.length, title.value.length);
+  };
+
+  /** Close it and keep the draft: only Cancel throws one away. */
+  board.closeComposer = function () {
+    if (window.bfNew) window.bfNew.close();
+  };
+
+  /** Discard the draft and close, which is what its own Cancel button does. */
+  board.cancelComposer = function () {
+    var form = document.getElementById("board-composer");
+    if (form) form.reset();
+    setComposerMode("add");
+    board.closeComposer();
+  };
+
+  board.composerOpen = function () {
+    return window.bfNew ? window.bfNew.isOpen() : false;
+  };
+
+  board.focusComposer = function () {
+    board.openComposer();
+  };
+  board.focusFilter = function () {
+    var input = document.getElementById("board-filter");
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  };
+
+  /** Apply the filter box's text to the board, without waiting for a frame. */
+  board.applyFilter = function () {
+    var input = document.getElementById("board-filter");
+    board.query = input ? input.value.trim() : "";
+    if (board.view) board.render(board.view);
+  };
+
+  board.hasFilter = function () {
+    return board.query !== undefined && board.query !== "";
+  };
+
+  board.clearFilter = function () {
+    var input = document.getElementById("board-filter");
+    if (input && input.value !== "") {
+      input.value = "";
+      board.applyFilter();
+    }
+  };
+
+  board.openKeys = function () {
+    if (window.bfKeys) window.bfKeys.open();
+  };
+  board.closeKeys = function () {
+    if (window.bfKeys) window.bfKeys.close();
+  };
+  board.keysOpen = function () {
+    return window.bfKeys ? window.bfKeys.isOpen() : false;
+  };
+
+  /**
+   * The grey cards a page shows while it waits for its first frame.
+   *
+   * They are marked as placeholders rather than given a lane status: the renderer
+   * looks lanes up by data-status, so a skeleton that carried one would be adopted
+   * as the real lane and the cards would never be drawn into it.
+   */
+  function skeletons() {
+    var lanes = document.getElementById("board-lanes");
+    if (!lanes || lanes.childElementCount > 0) return;
+    lanes.setAttribute("data-skeleton", "1");
+    for (var i = 0; i < 4; i++) {
+      var lane = board.el("section", "board-lane");
+      for (var j = 0; j < 2; j++) lane.appendChild(board.el("div", "board-skeleton"));
+      lanes.appendChild(lane);
+    }
+  }
+
+  /**
+   * The lane a narrow reader lands on: the first with a card in it, else the first
+   * lane. Opening on an empty To do while the only card sits in Blocked is a blank
+   * page with a picker nobody has a reason to press.
+   */
+  function laneWithWork(view) {
+    for (var i = 0; i < view.lanes.length; i++) if (view.lanes[i].cards.length > 0) return view.lanes[i].status;
+    return view.lanes[0] ? view.lanes[0].status : "todo";
+  }
+
+  /** One frame: paint and record when it arrived. */
+  function paint(view) {
+    board.lastFrame = Date.now();
+    board.lane = board.lane || laneWithWork(view);
+    badge("live", board.lastFrame);
+    board.render(view);
+  }
+
+  /** The live channel: a reconnect is the browser's own retry, not a second request. */
+  function stream() {
+    var source = new EventSource("/events?token=" + encodeURIComponent(token));
+    source.onopen = function () {
+      badge("live", board.lastFrame);
+    };
+    source.onmessage = function (event) {
+      var view;
+      try {
+        view = JSON.parse(event.data);
+      } catch (error) {
+        return;
+      }
+      paint(view);
+    };
+    source.onerror = function () {
+      badge("reconnecting");
+    };
+  }
+
+  /** The new-card dialog: a title, space-separated path hints, a priority, and Add. */
+  function wireComposer() {
+    var form = document.getElementById("board-composer");
+    if (!form) return;
+    // The hint is the page's, not this module's: a second copy of the sentence would drift.
+    var hint = document.getElementById("composer-hint");
+    board.composerHint = hint ? hint.textContent : "";
+    // The field is capped at 120 characters, and a cap nobody can see reads as a bug the
+    // first time typing stops; the count appears with the first character.
+    var titleField = document.getElementById("new-title");
+    if (titleField) titleField.addEventListener("input", showTitleCount);
+    form.addEventListener("submit", function (event) {
+      event.preventDefault();
+      var title = document.getElementById("new-title");
+      if (!title.value.trim()) {
+        title.focus();
+        return;
+      }
+      var paths = document.getElementById("new-paths").value.split(/\s+/).filter(Boolean);
+      var priorityField = document.getElementById("new-priority");
+      var priority = priorityField ? priorityField.value : "normal";
+      if (composer.mode === "edit") {
+        var card = composer.card;
+        if (!card) return;
+        // Every field goes, including the unchanged ones: an edit means "this is what it
+        // should say", and a priority changed back to normal is a change too.
+        board.act("edit", card, { title: title.value.trim(), paths: paths, priority: priority }).then(function (payload) {
+          if (payload) board.cancelComposer();
+        });
+        return;
+      }
+      var input = { title: title.value.trim(), paths: paths };
+      if (priority !== "normal") input.priority = priority;
+      board.add(input).then(function (payload) {
+        if (!payload) return;
+        // The dialog stays open: a lead publishes several cards in a row.
+        form.reset();
+        showTitleCount();
+        title.focus();
+      });
+    });
+    var trigger = document.getElementById("board-new");
+    if (trigger) {
+      trigger.addEventListener("click", function () {
+        if (board.composerOpen()) board.closeComposer();
+        else board.openComposer();
+      });
+    }
+    // The dialog's single closer: Esc and the backdrop keep the draft, this does not.
+    var cancel = document.getElementById("board-cancel");
+    if (cancel) {
+      cancel.addEventListener("click", function () {
+        board.cancelComposer();
+      });
+    }
+    var first = document.getElementById("board-first-card");
+    if (first) {
+      first.addEventListener("click", function () {
+        board.openComposer();
+      });
+    }
+  }
+
+  /** The filter, the note button, and the two tab sets. */
+  function wireChrome() {
+    var filter = document.getElementById("board-filter");
+    if (filter) {
+      filter.addEventListener("input", function () {
+        board.applyFilter();
+      });
+    }
+    var noteAdd = document.getElementById("card-dialog-note-add");
+    if (noteAdd) noteAdd.addEventListener("click", function () { board.addNote(); });
+
+    var tabs = document.querySelectorAll("[data-view][role='tab']");
+    for (var i = 0; i < tabs.length; i++) {
+      tabs[i].addEventListener("click", function (event) {
+        showView(event.currentTarget.getAttribute("data-view"));
+      });
+    }
+    var picker = document.getElementById("board-picker");
+    if (picker) {
+      picker.addEventListener("click", function (event) {
+        var lane = event.target && event.target.getAttribute ? event.target.getAttribute("data-lane") : null;
+        if (lane) board.showLane(lane);
+      });
+    }
+    if (window.matchMedia) {
+      var query = window.matchMedia("(max-width: 860px)");
+      var onChange = function () {
+        applyLane();
+      };
+      if (query.addEventListener) query.addEventListener("change", onChange);
+      else if (query.addListener) query.addListener(onChange);
+    }
+    // The badge says how fresh the last frame is, which is the one thing a quiet
+    // board cannot show by changing; the ages are the other, so the same tick keeps
+    // them honest without waiting for somebody to write.
+    window.setInterval(function () {
+      if (board.lastFrame !== undefined) badge("live", board.lastFrame);
+      board.refreshAges();
+    }, 1000);
+  }
+
+  board.start = function () {
+    board.lane = undefined;
+    board.openId = undefined;
+    board.query = "";
+    board.collapsed = {};
+    showView(new URLSearchParams(window.location.search).get("view") === "team" ? "team" : "board");
+    wireChrome();
+    wireComposer();
+    skeletons();
+    board.bindKeys(document);
+    stream();
+  };
+})();`;

package/extensions/board/view/page.ts

@@ -0,0 +1,158 @@
+/**
+ * The board page's document: an inert shell the client fills from the snapshot.
+ *
+ * The page carries no card text in its markup — not even escaped — so there is no
+ * path from a card file to the document's HTML. Every field the client shows is set
+ * as `textContent` from the JSON frame, which is the one property a page with a
+ * model-writable store should have.
+ *
+ * The shell is complete before the script runs: the toolbar, both panels, the three
+ * kit dialogs, the keyboard sheet, and the live region are in the markup, so a slow
+ * frame shows a skeleton rather than an empty page. Every id here is a contract with
+ * the client (`render.ts`, `team.ts`, `live.ts`, `actions.ts`), and the class
+ * contract test holds every class to the kit or to this page's stylesheet.
+ */
+
+import { brandLockup, button, docHead, keysSheet, themeToggle } from "../../../lib/web/index.ts";
+import { BOARD_KEYS } from "./keys.ts";
+import { BOARD_CSS } from "./styles.ts";
+
+/** The two views the page offers. */
+export type PageView = "board" | "team";
+
+/**
+ * Render the document for one initial view.
+ *
+ * Both panels are rendered and one is `hidden`, so switching tabs costs no request
+ * and a shared link opens the tab it names. `writes` is the credential's authority:
+ * a viewer's document says `data-writes="0"`, which is what makes the client draw a
+ * page with no button the server would refuse.
+ */
+export function renderBoardPage(input: { view: PageView; writes?: boolean }): string {
+	const team = input.view === "team";
+	return `<!doctype html>
+<html lang="en" data-view="${team ? "team" : "board"}" data-writes="${input.writes === false ? "0" : "1"}">
+<head>
+${docHead({ title: "board", css: BOARD_CSS })}
+</head>
+<body class="bf-app">
+<h1 class="sr-only">board — the shared feature list for this repository</h1>
+<a class="skip" href="#main">Skip to the cards</a>
+<header class="bf-app__header"><div class="bf-toolbar board-toolbar">
+  ${brandLockup("board")}
+  <span class="bf-chip bf-chip--accent" id="board-me" title="Writes from this page are made as this session">board</span>
+  <p class="bf-status board-status" id="board-status" data-state="connecting" aria-live="polite">connecting…</p>
+  <span class="bf-spacer"></span>
+  <div class="board-controls">
+    <div class="bf-segmented" role="tablist" aria-label="View">
+      <button type="button" class="bf-segmented__item" role="tab" id="tab-board" data-view="board" aria-controls="panel-board"${team ? "" : ' aria-current="page"'}>Board</button>
+      <button type="button" class="bf-segmented__item" role="tab" id="tab-team" data-view="team" aria-controls="panel-team"${team ? ' aria-current="page"' : ""}>Team</button>
+    </div>
+    <p class="bf-progress board-progress" id="board-progress" hidden>
+      <span class="bf-progress__track"><span class="bf-progress__fill" id="board-progress-fill"></span></span>
+      <span id="board-progress-text">0/0</span>
+    </p>
+    <label class="bf-field board-filter"><span class="sr-only">Filter cards</span>
+      <input class="bf-input" id="board-filter" type="search" placeholder="filter cards" autocomplete="off">
+    </label>
+    ${button({ label: "+ New card", id: "board-new", title: "New card — n", attrs: { "aria-haspopup": "dialog" } })}
+    ${button({ label: "?", variant: "icon", id: "keys-open", title: "Keyboard shortcuts", attrs: { "aria-haspopup": "dialog" } })}
+    ${themeToggle()}
+  </div>
+</div></header>
+<main class="bf-app__main board-main" id="main" tabindex="-1">
+  <p class="bf-note board-banner" id="board-banner" role="status" hidden></p>
+  <section class="board-panel" id="panel-board" role="tabpanel" aria-labelledby="tab-board"${team ? " hidden" : ""}>
+    <div class="bf-segmented board-picker" id="board-picker" role="tablist" aria-label="Lane"></div>
+    <div class="board-lanes" id="board-lanes"></div>
+    <div class="bf-empty board-no-cards" id="board-no-cards" hidden>
+      <p class="bf-empty__title">No cards yet</p>
+      <p class="bf-empty__sub">One card per feature: what it delivers, who holds it, and where to start.</p>
+      <button class="bf-btn bf-btn--primary" type="button" id="board-first-card">Add the first card</button>
+    </div>
+  </section>
+  <section class="board-panel" id="panel-team" role="tabpanel" aria-labelledby="tab-team"${team ? "" : " hidden"}>
+    <div class="board-team" id="board-team"></div>
+  </section>
+</main>
+<footer class="bf-app__footer"><span id="board-where"></span></footer>
+
+<div class="bf-dialog" id="board-new-dialog" hidden>
+  <div class="bf-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="board-new-title">
+    <div class="bf-dialog__head">
+      <h2 id="board-new-title">New card</h2>
+    </div>
+    <form class="board-composer" id="board-composer" autocomplete="off">
+      <div class="bf-dialog__body">
+        <div class="board-composer__fields">
+          <label class="board-composer__field board-composer__field--title">
+            <span class="board-composer__label">Title<span class="board-composer__count" id="new-title-count" hidden></span></span>
+            <span class="bf-field"><input class="bf-input" id="new-title" name="title" placeholder="what it delivers, in one line" maxlength="120" required></span>
+          </label>
+          <label class="board-composer__field">
+            <span class="board-composer__label">Paths</span>
+            <span class="bf-field"><input class="bf-input" id="new-paths" name="paths" placeholder="extensions/board  lib/web" aria-describedby="composer-hint"></span>
+          </label>
+          <label class="board-composer__field">
+            <span class="board-composer__label">Priority</span>
+            <span class="bf-field"><select class="bf-input board-composer__select" id="new-priority" name="priority">
+              <option value="high">high</option>
+              <option value="normal" selected>normal</option>
+              <option value="low">low</option>
+            </select></span>
+          </label>
+        </div>
+        <p class="bf-dialog__hint" id="composer-hint">one card per feature — its steps live in the owner's plan and todo</p>
+      </div>
+      <div class="bf-dialog__actions">
+        <button class="bf-btn" type="button" id="board-cancel">Cancel</button>
+        <button class="bf-btn bf-btn--primary" type="submit" id="new-submit">Add card</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<div class="bf-dialog" id="board-card-dialog" hidden>
+  <div class="bf-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="card-dialog-title" tabindex="-1">
+    <div class="bf-dialog__head">
+      <h2 id="card-dialog-title"></h2>
+      <span class="board-dialog__state" id="card-dialog-state"></span>
+      <span class="bf-spacer"></span>
+      <button type="button" class="bf-btn bf-btn--icon" id="card-dialog-close" aria-label="Close">×</button>
+    </div>
+    <div class="bf-dialog__body">
+      <p class="board-dialog__meta" id="card-dialog-meta"></p>
+      <p class="board-dialog__owner" id="card-dialog-owner"></p>
+      <ul class="board-card__paths" id="card-dialog-paths"></ul>
+      <p class="board-dialog__depends" id="card-dialog-depends" hidden></p>
+      <p class="board-dialog__plan" id="card-dialog-plan" hidden></p>
+      <ol class="board-dialog__notes" id="card-dialog-notes"></ol>
+      <p class="bf-dialog__hint" id="card-dialog-earlier" hidden></p>
+      <div class="bf-composer board-dialog__note-composer" id="card-dialog-note-composer">
+        <label class="bf-field"><span class="sr-only">Add a note</span>
+          <input class="bf-input" id="card-dialog-note" placeholder="add a note" maxlength="1000">
+        </label>
+        <div class="bf-composer__row"><button type="button" class="bf-btn" id="card-dialog-note-add">Note</button></div>
+      </div>
+    </div>
+    <div class="bf-dialog__actions" id="card-dialog-actions"></div>
+  </div>
+</div>
+
+<div class="bf-dialog board-confirm" id="board-confirm" hidden>
+  <div class="bf-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="confirm-title" tabindex="-1">
+    <div class="bf-dialog__head"><h2 id="confirm-title"></h2></div>
+    <div class="bf-dialog__body"><p class="board-confirm__body" id="confirm-body"></p></div>
+    <div class="bf-dialog__actions">
+      <button type="button" class="bf-btn" id="confirm-cancel">Cancel</button>
+      <button type="button" class="bf-btn bf-btn--primary" id="confirm-ok">Confirm</button>
+    </div>
+  </div>
+</div>
+
+${keysSheet(BOARD_KEYS)}
+<script src="/app.js" defer></script>
+</body>
+</html>
+`;
+}