@bridge_gpt/mcp-server 0.2.24 → 0.2.25

package/build/decision-page-template.js

@@ -64,7 +64,11 @@ export function generateDecisionPageHtml(data, assets = DEFAULT_ASSETS) {
     const { ticket_key, actionable_items, clear_improvements } = data;
     const hasDecisions = actionable_items.length > 0;
     const isPlanning = data.artifact_type === "pre_ticket_planning";
-    const needsForm = hasDecisions || (isPlanning && (data.system_goals?.nfrs?.length ?? 0) > 0);
+    // Acceptance criteria and NFRs both render stance controls, and the whole
+    // <script> block is gated on needsForm — so a page carrying either one must set
+    // it, or the radios render with no listeners and no capture loop behind them.
+    const stanceItemCount = (data.system_goals?.nfrs?.length ?? 0) + (data.system_goals?.acceptance_criteria?.length ?? 0);
+    const needsForm = hasDecisions || (isPlanning && stanceItemCount > 0);
     const effectiveLabels = resolveDecisionPageLabels(data.labels);
     const faviconLink = assets.faviconBase64
         ? `<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,${assets.faviconBase64}">`
@@ -437,18 +441,18 @@ ${fontFaces}
       color: var(--text-color);
       white-space: pre-wrap;
     }
-    .nfr-list, .order-list {
+    .nfr-list, .ac-list, .order-list {
       list-style: none;
       padding: 0;
       margin-top: 0.5rem;
     }
-    .nfr-list li, .order-list li {
+    .nfr-list li, .ac-list li, .order-list li {
       padding: 0.75rem 0;
       border-bottom: 1px solid var(--border-color);
     }
-    .nfr-list li:last-child, .order-list li:last-child { border-bottom: none; }
-    .nfr-category { font-weight: 600; }
-    .nfr-implication, .order-meta {
+    .nfr-list li:last-child, .ac-list li:last-child, .order-list li:last-child { border-bottom: none; }
+    .nfr-category, .ac-id { font-weight: 600; }
+    .nfr-implication, .ac-verification, .order-meta {
       font-size: 0.9rem;
       color: var(--secondary-color);
       margin-top: 0.25rem;
@@ -481,20 +485,22 @@ ${fontFaces}
       border-color: var(--primary-color);
       box-shadow: 0 0 0 3px rgba(226, 98, 75, 0.2);
     }
-    .nfr-feedback .comment-area {
+    /* display:block !important deliberately defeats the generic .hidden rule so
+       the max-height transition below can run; .hidden then collapses it. */
+    .nfr-feedback .comment-area, .ac-feedback .comment-area {
       display: block !important;
       overflow: hidden;
       transition: max-height 150ms cubic-bezier(0.4, 0, 0.2, 1),
                   opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
                   margin-top 150ms cubic-bezier(0.4, 0, 0.2, 1);
     }
-    .nfr-feedback .comment-area.hidden {
+    .nfr-feedback .comment-area.hidden, .ac-feedback .comment-area.hidden {
       max-height: 0;
       opacity: 0;
       margin-top: 0;
       pointer-events: none;
     }
-    .nfr-feedback .radio-group {
+    .nfr-feedback .radio-group, .ac-feedback .radio-group {
       display: flex;
       flex-direction: row;
       gap: 1.5rem;
@@ -508,7 +514,7 @@ ${fontFaces}
         align-items: stretch;
         flex-direction: column;
       }
-      .nfr-feedback .radio-group {
+      .nfr-feedback .radio-group, .ac-feedback .radio-group {
         flex-direction: column;
         gap: 0.75rem;
       }
@@ -583,14 +589,81 @@ function renderNoDecisions(isPlanning = false) {
         <p>${escapeHtml(message)}</p>
       </div>`;
 }
-// Read-only system-goals panel for the pre_ticket_planning artifact. Returns ""
-// when no goals are supplied so the review_decisions page is byte-for-byte
-// unchanged. Every model-supplied string is escaped via escapeHtml().
-// When isPlanning is true, each NFR renders an interactive stance control
-// (Agreed / Ask about this / Disagree) with a conditional comment textarea.
+// Renders the acceptance-criteria list — what the system must do — as the
+// centerpiece of the planning panel, above the NFRs. Returns "" when the list is
+// empty so pages that predate acceptance criteria (plan-epic) are unchanged.
+// When isPlanning is true each criterion carries the same Agreed / Ask about this
+// / Disagree stance control the NFR list uses.
+function renderAcceptanceCriteriaList(acs, isPlanning) {
+    if (acs.length === 0)
+        return "";
+    let items = "";
+    for (let i = 0; i < acs.length; i++) {
+        const ac = acs[i];
+        const statusClass = ac.status === "confirmed"
+            ? "status-confirmed"
+            : ac.status === "assumed"
+                ? "status-assumed"
+                : "status-open";
+        // acId is used as data-ac-id (becomes the JSON output key) and aria-label.
+        // acHtmlId is a whitespace-free variant for id/name/for attributes — HTML5
+        // forbids spaces in id values. The loop index i prefixes the radio/textarea
+        // identifiers so each criterion is its own radio group, mirroring the NFR
+        // list's disambiguation: without it, two ids that collapse to the same slug
+        // would share a name and clobber each other's selection.
+        const acId = escapeHtml(ac.id);
+        const acHtmlId = escapeHtml(ac.id.replace(/\s+/g, "-"));
+        const radioName = `ac-stance-${i}-${acHtmlId}`;
+        const textareaId = `ac-comment-${i}-${acHtmlId}`;
+        const stanceControls = isPlanning ? `
+              <div class="ac-feedback" data-ac-id="${acId}">
+                <div class="radio-group" role="radiogroup" aria-label="Stance on ${acId}">
+                  <div class="radio-option">
+                    <input type="radio" id="${radioName}-agreed" name="${radioName}" value="agreed" checked data-testid="ac-stance-radio">
+                    <label for="${radioName}-agreed">Agreed</label>
+                  </div>
+                  <div class="radio-option">
+                    <input type="radio" id="${radioName}-ask" name="${radioName}" value="ask" data-testid="ac-stance-radio">
+                    <label for="${radioName}-ask">Ask about this</label>
+                  </div>
+                  <div class="radio-option">
+                    <input type="radio" id="${radioName}-disagree" name="${radioName}" value="disagree" data-testid="ac-stance-radio">
+                    <label for="${radioName}-disagree">Disagree</label>
+                  </div>
+                </div>
+                <div class="comment-area hidden">
+                  <label for="${textareaId}">Comment</label>
+                  <textarea id="${textareaId}" name="${textareaId}" placeholder="Explain your question or concern..." data-testid="ac-comment"></textarea>
+                </div>
+              </div>` : "";
+        items += `
+            <li data-testid="system-goal-ac" data-status="${escapeHtml(ac.status)}">
+              <span class="ac-id">${escapeHtml(ac.id)}</span><span class="status-tag ${statusClass}">${escapeHtml(ac.status)}</span>
+              <div class="goal-body">${escapeHtml(ac.criterion)}</div>
+              <div class="ac-verification">Verify: ${escapeHtml(ac.verification)}</div>${stanceControls}
+            </li>`;
+    }
+    return `
+          <div class="goal-label">Acceptance criteria</div>
+          <ul class="ac-list">${items}
+          </ul>`;
+}
+// System-goals panel for the pre_ticket_planning artifact. Returns "" when no
+// goals are supplied so the review_decisions page is byte-for-byte unchanged.
+// Every model-supplied string is escaped via escapeHtml().
+// When isPlanning is true, each acceptance criterion and each NFR renders an
+// interactive stance control (Agreed / Ask about this / Disagree) with a
+// conditional comment textarea.
 function renderSystemGoals(goals, isPlanning = false) {
     if (!goals)
         return "";
+    const acceptanceCriteria = goals.acceptance_criteria ?? [];
+    const acHtml = renderAcceptanceCriteriaList(acceptanceCriteria, isPlanning);
+    // The heading leads with acceptance criteria only when there are some. Pages
+    // that carry goals + NFRs alone (plan-epic) keep the original heading.
+    const sectionHeading = acceptanceCriteria.length > 0
+        ? "Acceptance Criteria &amp; System Goals"
+        : "System Goals &amp; Non-Functional Requirements";
     const nfrs = goals.nfrs ?? [];
     let nfrHtml = "";
     if (nfrs.length > 0) {
@@ -647,7 +720,7 @@ function renderSystemGoals(goals, isPlanning = false) {
           </ul>`;
     }
     return `      <section class="planning-section" data-testid="system-goals">
-      <h2>System Goals &amp; Non-Functional Requirements</h2>
+      <h2>${sectionHeading}</h2>
       <div class="goal-row">
         <div class="goal-label">Business goal</div>
         <div class="goal-body" data-testid="system-goal-business">${escapeHtml(goals.business_goal)}</div>
@@ -659,7 +732,7 @@ function renderSystemGoals(goals, isPlanning = false) {
       <div class="goal-row">
         <div class="goal-label">System behavior</div>
         <div class="goal-body" data-testid="system-goal-behavior">${escapeHtml(goals.system_behavior)}</div>
-      </div>${nfrHtml}
+      </div>${acHtml}${nfrHtml}
       </section>`;
 }
 // Read-only recommended implementation order (epic surfaces). Returns "" when the
@@ -853,9 +926,11 @@ function renderScript(data, isPlanning = false) {
         postSubmitContainer = document.getElementById("post-submit-container");
         jsonOutput = document.getElementById("json-output");
 
-        ${isPlanning ? `// NFR stance radio disclosure (planning mode only)
-        var nfrContainers = document.querySelectorAll(".nfr-feedback");
-        nfrContainers.forEach(function(container) {
+        ${isPlanning ? `// Stance radio disclosure (planning mode only). Acceptance criteria and
+        // NFRs behave identically here, so they share one listener set; only the
+        // capture step below distinguishes them, since their JSON keys differ.
+        var stanceContainers = document.querySelectorAll(".nfr-feedback, .ac-feedback");
+        stanceContainers.forEach(function(container) {
           var radios = container.querySelectorAll('input[type="radio"]');
           radios.forEach(function(radio) {
             radio.addEventListener("change", function() {
@@ -874,7 +949,7 @@ function renderScript(data, isPlanning = false) {
               }
             });
           });
-        });` : `var nfrContainers = [];`}
+        });` : `var stanceContainers = [];`}
 
         submitBtn.addEventListener("click", function() {
           var cards = document.querySelectorAll(".card[data-item-id]");
@@ -909,8 +984,8 @@ function renderScript(data, isPlanning = false) {
             }
           });
 
-          // Validate NFR feedback: ask/disagree stance requires a comment.
-          nfrContainers.forEach(function(container) {
+          // Validate stance feedback: ask/disagree requires a comment.
+          stanceContainers.forEach(function(container) {
             var selected = container.querySelector('input[type="radio"]:checked');
             if (!selected) return;
             if (selected.value === "ask" || selected.value === "disagree") {
@@ -957,22 +1032,29 @@ function renderScript(data, isPlanning = false) {
             };
           });
 
-          ${isPlanning ? `// Capture NFR feedback stances
-          var nfrFeedback = {};
-          nfrContainers.forEach(function(container) {
-            var nfrId = container.getAttribute("data-nfr-id");
-            var selected = container.querySelector('input[type="radio"]:checked');
-            var commentArea = container.querySelector(".comment-area");
-            var textarea = commentArea ? commentArea.querySelector("textarea") : null;
-            nfrFeedback[nfrId] = {
-              stance: selected ? selected.value : "agreed",
-              comment: textarea ? textarea.value : ""
-            };
-          });` : ""}
+          ${isPlanning ? `// Capture stances. Acceptance criteria and NFRs land in separate maps
+          // because their keys differ: AC are keyed by id, NFRs by category.
+          function captureStances(selector, idAttr) {
+            var out = {};
+            document.querySelectorAll(selector).forEach(function(container) {
+              var key = container.getAttribute(idAttr);
+              var selected = container.querySelector('input[type="radio"]:checked');
+              var commentArea = container.querySelector(".comment-area");
+              var textarea = commentArea ? commentArea.querySelector("textarea") : null;
+              out[key] = {
+                stance: selected ? selected.value : "agreed",
+                comment: textarea ? textarea.value : ""
+              };
+            });
+            return out;
+          }
+          var acceptanceCriteriaFeedback = captureStances(".ac-feedback", "data-ac-id");
+          var nfrFeedback = captureStances(".nfr-feedback", "data-nfr-id");` : ""}
 
           var output = {
             ticket_key: ${safeJsonForScript(data.ticket_key)},
             decisions: decisions,
+            ${isPlanning ? "acceptance_criteria_feedback: acceptanceCriteriaFeedback," : ""}
             ${isPlanning ? "nfr_feedback: nfrFeedback," : ""}
             general_comment: document.getElementById("general-comment").value
           };