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

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,9 @@
  * 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 { 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,129 +24,88 @@ 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 }): string {
 	const team = input.view === "team";
 	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"}">
 <head>
-${docHead({ title: "board", css: BOARD_CSS })}
+${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 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>