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

package/extensions/board/view/live.ts

@@ -0,0 +1,231 @@
+/**
+ * The client's wiring: the tabs, the lane picker, 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 " + N.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;
+
+  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", N.lane);
+      for (var j = 0; j < 2; j++) lane.appendChild(board.el("div", N.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 filter and the two tab sets. */
+  function wireChrome() {
+    var filter = document.getElementById("board-filter");
+    if (filter) {
+      filter.addEventListener("input", function () {
+        board.applyFilter();
+      });
+    }
+    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();
+    skeletons();
+    board.bindKeys(document);
+    stream();
+  };
+})();`;

package/extensions/board/view/names.ts

@@ -0,0 +1,91 @@
+/**
+ * The board page's class vocabulary, as one table.
+ *
+ * The document (`page.ts`) and the client bundle cannot import from each other, so a
+ * class name used to be a string in each — and two of them were assembled at runtime
+ * (`"board-card__reason" + kind`), which is why nothing could compare what the page
+ * wears with what `styles.ts` draws. Reading both halves from this table makes those two
+ * sets enumerable, and `pages.test.ts` holds them equal.
+ *
+ * A name here is a **class**, not an id: ids are how the client finds an element
+ * (`getElementById`), they are not styled, and `pages.test.ts` pins their list.
+ */
+
+/** Every `board-*` class the page wears. Keys are what the code reads; values are what CSS matches. */
+export const BOARD_CLASS = {
+	// The shell, the toolbar, and the two panel wrappers.
+	toolbar: "board-toolbar",
+	controls: "board-controls",
+	main: "board-main",
+	panel: "board-panel",
+	filter: "board-filter",
+	picker: "board-picker",
+	progress: "board-progress",
+	status: "board-status",
+	noCards: "board-no-cards",
+	skeleton: "board-skeleton",
+
+	// One lane: a tray of cards with a head that sticks and folds.
+	lanes: "board-lanes",
+	lane: "board-lane",
+	laneHead: "board-lane__head",
+	laneDot: "board-lane__dot",
+	laneToggle: "board-lane__toggle",
+	laneCount: "board-lane__count",
+	laneList: "board-lane__list",
+	laneEmpty: "board-lane__empty",
+
+	// One card, and the two tones its reason line can take.
+	card: "board-card",
+	cardHead: "board-card__head",
+	cardId: "board-card__id",
+	cardTitle: "board-card__title",
+	cardMeta: "board-card__meta",
+	cardPaths: "board-card__paths",
+	cardReason: "board-card__reason",
+	cardReasonBlocked: "board-card__reason--blocked",
+	cardReasonUnplanned: "board-card__reason--unplanned",
+
+	// The card dialog: the record of one card, as a ladder of facts and its notes.
+	dialogPanel: "board-dialog__panel",
+	dialogHead: "board-dialog__head",
+	dialogId: "board-dialog__id",
+	dialogState: "board-dialog__state",
+	dialogBody: "board-dialog__body",
+	dialogSection: "board-dialog__section",
+	dialogHeading: "board-dialog__heading",
+	dialogCount: "board-dialog__count",
+	dialogFacts: "board-dialog__facts",
+	dialogPaths: "board-dialog__paths",
+	dialogPath: "board-dialog__path",
+	dialogValue: "board-dialog__value",
+	dialogPlan: "board-dialog__plan",
+	dialogNotes: "board-dialog__notes",
+	dialogNote: "board-dialog__note",
+	dialogNoteFoot: "board-dialog__note-foot",
+	dialogNoteBy: "board-dialog__note-by",
+	dialogNoteAt: "board-dialog__note-at",
+	dialogNoteText: "board-dialog__note-text",
+
+	// The Team tab: the queue of decisions, the roster, and the Done strip.
+	team: "board-team",
+	teamGrid: "board-team__grid",
+	teamGroup: "board-team__group",
+	teamCaption: "board-team__caption",
+	teamQueue: "board-team__queue",
+	teamDecision: "board-team__decision",
+	teamOpen: "board-team__open",
+	teamRef: "board-team__ref",
+	teamTitle: "board-team__title",
+	teamFoot: "board-team__foot",
+	teamWhy: "board-team__why",
+	teamWhyBlocked: "board-team__why--blocked",
+	teamRoster: "board-team__roster",
+	teamMate: "board-team__mate",
+	teamDot: "board-team__dot",
+	teamName: "board-team__name",
+	teamMets: "board-team__mets",
+	teamEmpty: "board-team__empty",
+	teamDone: "board-team__done",
+	teamId: "board-team__id",
+} as const satisfies Readonly<Record<string, string>>;

package/extensions/board/view/page.ts

@@ -0,0 +1,118 @@
+/**
+ * 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, tabTitle, themeToggle } from "../../../lib/web/index.ts";
+import { BOARD_KEYS } from "./keys.ts";
+import { BOARD_CLASS as N } from "./names.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. The document has no form and no write affordance:
+ * a page that cannot change a card cannot offer a button the server would refuse.
+ */
+export function renderBoardPage(input: { view: PageView }): string {
+	const team = input.view === "team";
+	return `<!doctype html>
+<html lang="en" data-view="${team ? "team" : "board"}">
+<head>
+${docHead({ title: tabTitle("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 ${N.toolbar}">
+  ${brandLockup("board")}
+  <span class="bf-chip bf-chip--accent" id="board-me" title="This page is served as this session, and it cannot change a card">board</span>
+  <p class="bf-status ${N.status}" id="board-status" data-state="connecting" aria-live="polite">connecting…</p>
+  <span class="bf-spacer"></span>
+  <div class="${N.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 ${N.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 ${N.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: "?", variant: "icon", id: "keys-open", title: "Keyboard shortcuts", attrs: { "aria-haspopup": "dialog" } })}
+    ${themeToggle()}
+  </div>
+</div></header>
+<main class="bf-app__main ${N.main}" id="main" tabindex="-1">
+  <section class="${N.panel}" id="panel-board" role="tabpanel" aria-labelledby="tab-board"${team ? " hidden" : ""}>
+    <div class="bf-segmented ${N.picker}" id="board-picker" role="tablist" aria-label="Lane"></div>
+    <div class="${N.lanes}" id="board-lanes"></div>
+    <div class="bf-empty ${N.noCards}" 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>
+      <p class="bf-empty__sub"><code>board add</code> makes one — this page reads, and the tools write.</p>
+    </div>
+  </section>
+  <section class="${N.panel}" id="panel-team" role="tabpanel" aria-labelledby="tab-team"${team ? "" : " hidden"}>
+    <div class="${N.team}" id="board-team"></div>
+  </section>
+</main>
+<footer class="bf-app__footer"><span id="board-where"></span></footer>
+
+<div class="bf-dialog" id="board-card-dialog" hidden>
+  <div class="bf-dialog__panel ${N.dialogPanel}" role="dialog" aria-modal="true" aria-labelledby="card-dialog-title" tabindex="-1">
+    <div class="bf-dialog__head ${N.dialogHead}">
+      <span class="${N.dialogId}" id="card-dialog-id"></span>
+      <h2 id="card-dialog-title"></h2>
+      <span class="bf-spacer"></span>
+      <span class="${N.dialogState}" id="card-dialog-state"></span>
+      <button type="button" class="bf-btn bf-btn--icon" id="card-dialog-close" aria-label="Close">×</button>
+    </div>
+    <div class="bf-dialog__body ${N.dialogBody}">
+      <p class="sr-only" id="card-dialog-where" aria-live="polite"></p>
+      <section class="${N.dialogSection}" aria-labelledby="card-dialog-card-head">
+        <h3 class="${N.dialogHeading}" id="card-dialog-card-head">the card</h3>
+        <dl class="${N.dialogFacts}">
+          <dt id="card-dialog-owner-label">owner</dt><dd class="${N.dialogValue}" id="card-dialog-owner"></dd>
+          <dt id="card-dialog-priority-label" hidden>priority</dt><dd class="${N.dialogValue}" id="card-dialog-priority" hidden></dd>
+          <dt id="card-dialog-updated-label">updated</dt><dd class="${N.dialogValue}" id="card-dialog-updated"></dd>
+          <dt id="card-dialog-lane-label" hidden>in lane</dt><dd class="${N.dialogValue}" id="card-dialog-lane" hidden></dd>
+          <dt id="card-dialog-by-label">last edited</dt><dd class="${N.dialogValue}" id="card-dialog-by"></dd>
+          <dt id="card-dialog-landed-label" hidden>landed</dt><dd class="${N.dialogValue}" id="card-dialog-landed" hidden></dd>
+          <dt id="card-dialog-depends-label" hidden>waits on</dt><dd class="${N.dialogValue}" id="card-dialog-depends" hidden></dd>
+          <dt id="card-dialog-dependents-label" hidden>waited on by</dt><dd class="${N.dialogValue}" id="card-dialog-dependents" hidden></dd>
+          <dt id="card-dialog-plan-label" hidden>plan</dt><dd class="${N.dialogValue} ${N.dialogPlan}" id="card-dialog-plan" hidden></dd>
+          <dt id="card-dialog-paths-label" hidden>paths</dt><dd id="card-dialog-paths" hidden><ul class="${N.dialogPaths}" id="card-dialog-path-list"></ul></dd>
+        </dl>
+      </section>
+      <section class="${N.dialogSection}" aria-labelledby="card-dialog-notes-head">
+        <h3 class="${N.dialogHeading}" id="card-dialog-notes-head">notes<span class="${N.dialogCount}" id="card-dialog-note-count"></span></h3>
+        <ol class="${N.dialogNotes}" id="card-dialog-notes"></ol>
+        <p class="bf-dialog__hint" id="card-dialog-earlier" hidden></p>
+      </section>
+    </div>
+  </div>
+</div>
+
+${keysSheet(BOARD_KEYS)}
+<script src="/app.js" defer></script>
+</body>
+</html>
+`;
+}