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

package/extensions/board/view/live.ts

@@ -1,6 +1,5 @@
 /**
- * The client's wiring: the tabs, the lane picker, the new-card dialog, the filter,
- * and the live frame stream.
+ * 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
@@ -12,19 +11,13 @@ 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" +
+    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") {
@@ -87,104 +80,6 @@ export const BOARD_LIVE_JS = String.raw`(function () {
 
   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) {
@@ -234,8 +129,8 @@ export const BOARD_LIVE_JS = String.raw`(function () {
     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"));
+      var lane = board.el("section", N.lane);
+      for (var j = 0; j < 2; j++) lane.appendChild(board.el("div", N.skeleton));
       lanes.appendChild(lane);
     }
   }
@@ -260,7 +155,7 @@ export const BOARD_LIVE_JS = String.raw`(function () {
 
   /** 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));
+    var source = new EventSource(pageBase() + "/events?token=" + encodeURIComponent(token));
     source.onopen = function () {
       badge("live", board.lastFrame);
     };
@@ -278,70 +173,7 @@ export const BOARD_LIVE_JS = String.raw`(function () {
     };
   }
 
-  /** 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. */
+  /** The filter and the two tab sets. */
   function wireChrome() {
     var filter = document.getElementById("board-filter");
     if (filter) {
@@ -349,9 +181,6 @@ export const BOARD_LIVE_JS = String.raw`(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) {
@@ -389,7 +218,6 @@ export const BOARD_LIVE_JS = String.raw`(function () {
     board.collapsed = {};
     showView(new URLSearchParams(window.location.search).get("view") === "team" ? "team" : "board");
     wireChrome();
-    wireComposer();
     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

@@ -13,8 +13,17 @@
  * 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 {
+	baseAttribute,
+	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. */
@@ -23,135 +32,97 @@ 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.
+ * 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; writes?: boolean }): string {
+export function renderBoardPage(input: { view: PageView; base?: string }): string {
 	const team = input.view === "team";
+	// The page answers under the session's mount, so its own script and theme are named
+	// from that prefix rather than from the origin's root.
+	const base = input.base ?? "";
 	return `<!doctype html>
-<html lang="en" data-view="${team ? "team" : "board"}" data-writes="${input.writes === false ? "0" : "1"}">
+<html lang="en" data-view="${team ? "team" : "board"}"${baseAttribute(base)}>
 <head>
-${docHead({ title: "board", css: BOARD_CSS })}
+${docHead({ title: tabTitle("board"), css: BOARD_CSS, base })}
 </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">
+<header class="bf-app__header"><div class="bf-toolbar ${N.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-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="board-controls">
+  <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 board-progress" id="board-progress" hidden>
+    <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 board-filter"><span class="sr-only">Filter cards</span>
+    <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: "+ 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>
+<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>
-      <button class="bf-btn bf-btn--primary" type="button" id="board-first-card">Add the first card</button>
+      <p class="bf-empty__sub"><code>board add</code> makes one — this page reads, and the tools write.</p>
     </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 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-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">
+  <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="board-dialog__state" id="card-dialog-state"></span>
       <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">
-      <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 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>
+<script src="${base}/app.js" defer></script>
 </body>
 </html>
 `;