sdtk-design-kit 0.2.0 → 0.2.1

package/src/lib/prototype-renderer.js

@@ -2,7 +2,9 @@
 
 const fs = require("fs");
 const path = require("path");
-const { ROLE_FLOORS, assessPrototypeDensity, normalizeScreenRole } = require("./prototype-density");
+const { briefForScreen, loadPrototypeBriefIndex } = require("./prototype-briefs");
+const { componentClassFor, renderBriefComponent, renderDataSlotPlaceholder } = require("./prototype-component-map");
+const { assessPrototypeDensity, normalizeScreenRole } = require("./prototype-density");
 
 function escapeHtml(value) {
   return String(value == null ? "" : value)
@@ -73,8 +75,6 @@ textarea { padding-top: 10px; min-height: 80px; }
 .timeline { margin: 0; padding-left: 18px; }
 .state-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
 .state-card, .product-card, .feature-card, .category-card, .history-row, .result-row { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--surface) 96%, var(--bg)); }
-.density-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
-.density-evidence article { border: 1px dashed var(--border); border-radius: 8px; padding: 10px; color: var(--muted); background: color-mix(in srgb, var(--surface) 94%, var(--bg)); }
 @media (max-width: 920px) {
   .screen-layout, .split-layout, .feature-grid, .product-grid, .metric-grid { grid-template-columns: 1fr; }
   h1 { font-size: 36px; }
@@ -96,24 +96,79 @@ document.addEventListener("click", (event) => {
 function stateStrip(states) {
   const values = Array.isArray(states) && states.length > 0 ? states : ["loading", "empty", "success", "error"];
   return `<section class="state-strip" aria-label="State coverage"><div class="chip-row">${values
-    .map((state) => `<span class="chip" data-chip-type="state">${escapeHtml(state)}</span>`)
+    .map((state) => `<span class="chip" data-chip-type="state" data-state-id="${escapeHtml(state)}">${escapeHtml(state)}</span>`)
     .join("")}</div>${values
-    .map((state) => `<article class="state-card ${escapeHtml(state)}-state"><strong>${escapeHtml(state)}</strong><p>Static prototype guidance for the ${escapeHtml(state)} state.</p></article>`)
+    .map((state) => `<article class="state-card ${escapeHtml(state)}-state" data-state-id="${escapeHtml(state)}"><strong>${escapeHtml(state)}</strong><p>Static prototype guidance for the ${escapeHtml(state)} state.</p></article>`)
     .join("")}</section>`;
 }
 
-function evidenceGrid(screen, role, count) {
-  return `<section class="density-evidence" aria-label="Renderer evidence">${Array.from({ length: count }, (_, index) => {
-    const slot = index + 1;
-    return `<article><strong>${escapeHtml(screen.title)} evidence ${slot}</strong><p>${escapeHtml(role)} layout contract covers visible data slots, control states, source-backed acceptance criteria, responsive grouping, and implementation-safe static interaction guidance.</p></article>`;
-  }).join("")}</section>`;
+function slotLookupForBrief(brief) {
+  const lookup = new Map();
+  for (const slot of Array.isArray(brief && brief.data_slots) ? brief.data_slots : []) {
+    lookup.set(slot.id, slot);
+  }
+  return lookup;
+}
+
+function renderNeedsBrief(screen, role) {
+  const slots = [
+    { id: "brief-status", label: "Brief status" },
+    { id: "screen-contract", label: "Screen contract" },
+    { id: "source-evidence", label: "Source evidence" },
+    { id: "primary-record", label: "Primary record" },
+    { id: "next-action", label: "Next action" },
+  ];
+  const section = {
+    id: "needs-brief-actions",
+    title: "Brief recovery actions",
+    purpose: "Prototype generation continues with visible review evidence instead of silently falling back to role-default filler.",
+    data_slots: slots,
+    interactions: ["Review brief", "Regenerate brief", "Continue prototype review"],
+  };
+  const brief = { screen_title: screen.title, primary_action: "Review brief" };
+  return `<section class="panel needs-brief" data-section-id="needs-brief-summary" data-section-role="${escapeHtml(role)}"><p class="eyebrow">NEEDS_BRIEF</p><h2>NEEDS_BRIEF</h2><p class="support">${escapeHtml(screen.title)} requires .sdtk/design/screen-briefs/${escapeHtml(screen.screenId)}.json before high-fidelity composition.</p><div class="chip-row">${slots.map((slot) => renderDataSlotPlaceholder({ slot, section, escapeHtml })).join("")}</div></section><section class="panel" data-section-id="needs-brief-actions" data-section-role="${escapeHtml(role)}"><h2>Brief recovery actions</h2>${renderBriefComponent({ componentId: { id: "primary-panel", label: "Primary panel" }, section, brief, role, slotLookup: new Map(slots.map((slot) => [slot.id, slot])), escapeHtml })}${stateStrip(screen.requiredStates)}</section>`;
+}
+
+function renderBriefSlotSummary(brief) {
+  const slots = Array.isArray(brief.data_slots) ? brief.data_slots : [];
+  if (slots.length === 0) return "";
+  return `<div class="panel" data-component-id="screen-data-slots"><h3>Data slots</h3><div class="chip-row">${slots
+    .map((slot) => renderDataSlotPlaceholder({ slot, section: { id: "screen-data-slots" }, escapeHtml }))
+    .join("")}</div></div>`;
+}
+
+function sectionHasHeroComponent(section) {
+  const components = Array.isArray(section && section.components) ? section.components : [];
+  return components.some((component) => componentClassFor(component && component.id ? component.id : String(component || "component")) === "hero-section");
+}
+
+function briefHasHeroComponent(brief) {
+  return Array.isArray(brief && brief.sections) && brief.sections.some((section) => sectionHasHeroComponent(section));
+}
+
+function renderBriefSection({ section, brief, role, slotLookup, headingTag = "h2" }) {
+  const components = Array.isArray(section.components) && section.components.length > 0 ? section.components : [{ id: "component-placeholder", label: section.title }];
+  return `<section class="panel brief-section" data-section-id="${escapeHtml(section.id)}" data-section-role="${escapeHtml(role)}"><p class="eyebrow">${escapeHtml(role.replace(/-/g, " "))}</p><${headingTag}>${escapeHtml(section.title)}</${headingTag}><p class="support">${escapeHtml(section.purpose)}</p><div class="brief-component-stack">${components
+    .map((component) => renderBriefComponent({ componentId: component, section, brief, role, slotLookup, escapeHtml }))
+    .join("")}</div></section>`;
+}
+
+function renderBriefContent({ screen, role, brief }) {
+  if (!brief || !Array.isArray(brief.sections) || brief.sections.length === 0) {
+    return renderNeedsBrief(screen, role);
+  }
+  const slotLookup = slotLookupForBrief(brief);
+  const hasHeroComponent = briefHasHeroComponent(brief);
+  const sections = brief.sections
+    .map((section, index) => renderBriefSection({ section, brief, role, slotLookup, headingTag: !hasHeroComponent && index === 0 ? "h1" : "h2" }))
+    .join("");
+  return `${sections}${renderBriefSlotSummary(brief)}${stateStrip(brief.states.length > 0 ? brief.states : screen.requiredStates)}`;
 }
 
 function renderHome(screen) {
   return `<section class="hero"><p class="eyebrow">Hero</p><h1>${escapeHtml(screen.title)} hero</h1><p class="support">Category-first commerce landing with featured products, clear entry points, and guided configurator access.</p><div class="button-row"><a class="btn btn-primary" href="#" data-static-action>Start purchase</a><a class="btn btn-secondary" href="#" data-static-action>Open configurator</a></div></section>
 <section class="panel" aria-label="Featured products"><h2>Featured products</h2><div class="feature-grid">${["Category range", "Featured products", "Configurator quick start", "Order support"].map((label) => `<article class="feature-card category-card"><h3>${label}</h3><p>Structured entry point with summary, state, and action guidance.</p></article>`).join("")}</div></section>
-${stateStrip(screen.requiredStates)}
-${evidenceGrid(screen, "home", 18)}`;
+${stateStrip(screen.requiredStates)}`;
 }
 
 function productCards(count) {
@@ -121,46 +176,51 @@ function productCards(count) {
 }
 
 function renderCategory(screen) {
-  return `<section class="screen-layout"><aside class="panel"><h3>Filter sidebar</h3>${["Category", "Availability", "Material", "Size", "Price", "Delivery"].map((label) => `<label>${label}<select><option>${label} option</option></select></label>`).join("")}</aside><div class="panel"><h3>Product grid</h3><div class="product-grid">${productCards(8)}</div></div></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "category", 10)}`;
+  return `<section class="screen-layout"><aside class="panel"><h3>Filter sidebar</h3>${["Category", "Availability", "Material", "Size", "Price", "Delivery"].map((label) => `<label>${label}<select><option>${label} option</option></select></label>`).join("")}</aside><div class="panel"><h3>Product grid</h3><div class="product-grid">${productCards(8)}</div></div></section>${stateStrip(screen.requiredStates)}`;
 }
 
 function renderProductDetail(screen) {
-  return `<section class="split-layout"><div class="panel"><h3>Gallery and spec area</h3><table class="table spec-table"><tbody>${["Voltage", "Length", "Material", "Finish", "Certification"].map((label, index) => `<tr><th>${label}</th><td>Source-backed specification value ${index + 1}</td></tr>`).join("")}</tbody></table></div><aside class="panel"><h3>Price and quantity</h3><div class="qty-stepper"><button>-</button><span>1</span><button>+</button></div><div class="button-row"><a class="btn btn-primary" href="#" data-static-action>Add to cart</a></div></aside></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "product-detail", 10)}`;
+  return `<section class="split-layout"><div class="panel"><h3>Gallery and spec area</h3><table class="table spec-table"><tbody>${["Voltage", "Length", "Material", "Finish", "Certification"].map((label, index) => `<tr><th>${label}</th><td>Source-backed specification value ${index + 1}</td></tr>`).join("")}</tbody></table></div><aside class="panel"><h3>Price and quantity</h3><div class="qty-stepper"><button>-</button><span>1</span><button>+</button></div><div class="button-row"><a class="btn btn-primary" href="#" data-static-action>Add to cart</a></div></aside></section>${stateStrip(screen.requiredStates)}`;
 }
 
 function renderSearch(screen) {
-  return `<section class="panel"><h3>Search toolbar</h3><div class="search-toolbar"><input aria-label="Search query" placeholder="Search product"><select><option>Sort by relevance</option></select><button class="btn btn-primary">Search</button></div><div class="result-list">${Array.from({ length: 5 }, (_, index) => `<article class="result-row"><h4>Result item ${index + 1}</h4><p>Matched term, category, availability, and action.</p></article>`).join("")}<article class="result-row no-result"><h4>No-result state</h4><p>Suggest alternate query, category reset, and support route.</p></article></div></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "search", 7)}`;
+  return `<section class="panel"><h3>Search toolbar</h3><div class="search-toolbar"><input aria-label="Search query" placeholder="Search product"><select><option>Sort by relevance</option></select><button class="btn btn-primary">Search</button></div><div class="result-list">${Array.from({ length: 5 }, (_, index) => `<article class="result-row"><h4>Result item ${index + 1}</h4><p>Matched term, category, availability, and action.</p></article>`).join("")}<article class="result-row no-result"><h4>No-result state</h4><p>Suggest alternate query, category reset, and support route.</p></article></div></section>${stateStrip(screen.requiredStates)}`;
 }
 
 function renderCart(screen) {
-  return `<section class="split-layout"><div class="panel"><h3>Cart table</h3><table class="table cart-table"><thead><tr><th>Item</th><th>Qty</th><th>Unit</th><th>Total</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 4 }, (_, index) => `<tr><td>Line item ${index + 1}</td><td><div class="qty-stepper"><button>-</button><span>${index + 1}</span><button>+</button></div></td><td>1000</td><td>${(index + 1) * 1000}</td><td><button>Remove</button></td></tr>`).join("")}</tbody></table></div><aside class="panel summary-panel"><h3>Summary panel</h3><p>Subtotal, tax, freight, and checkout CTA.</p><a class="btn btn-primary" href="#" data-static-action>Checkout</a></aside></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "cart", 8)}`;
+  return `<section class="split-layout"><div class="panel"><h3>Cart table</h3><table class="table cart-table"><thead><tr><th>Item</th><th>Qty</th><th>Unit</th><th>Total</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 4 }, (_, index) => `<tr><td>Line item ${index + 1}</td><td><div class="qty-stepper"><button>-</button><span>${index + 1}</span><button>+</button></div></td><td>1000</td><td>${(index + 1) * 1000}</td><td><button>Remove</button></td></tr>`).join("")}</tbody></table></div><aside class="panel summary-panel"><h3>Summary panel</h3><p>Subtotal, tax, freight, and checkout CTA.</p><a class="btn btn-primary" href="#" data-static-action>Checkout</a></aside></section>${stateStrip(screen.requiredStates)}`;
 }
 
 function renderCheckout(screen) {
-  return `<section class="split-layout"><div class="panel"><h3>Checkout stepper</h3><ol class="checkout-stepper">${["Information", "Delivery", "Payment", "Review"].map((step) => `<li class="stepper-step">${step}</li>`).join("")}</ol><form class="form-grid">${["Recipient", "Address", "Phone", "Purchase order"].map((label) => `<label>${label}<input type="text" value="${label} value"></label>`).join("")}</form></div><aside class="panel summary-panel"><h3>Summary card</h3><p>Order totals, delivery window, and final confirmation.</p><button class="btn btn-primary">Place order</button></aside></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "checkout", 8)}`;
+  return `<section class="split-layout"><div class="panel"><h3>Checkout stepper</h3><ol class="checkout-stepper">${["Information", "Delivery", "Payment", "Review"].map((step) => `<li class="stepper-step">${step}</li>`).join("")}</ol><form class="form-grid">${["Recipient", "Address", "Phone", "Purchase order"].map((label) => `<label>${label}<input type="text" value="${label} value"></label>`).join("")}</form></div><aside class="panel summary-panel"><h3>Summary card</h3><p>Order totals, delivery window, and final confirmation.</p><button class="btn btn-primary">Place order</button></aside></section>${stateStrip(screen.requiredStates)}`;
 }
 
 function renderOrderHistory(screen) {
-  return `<section class="panel"><h3>Order history list</h3><table class="table"><thead><tr><th>Order</th><th>Status</th><th>Total</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 5 }, (_, index) => `<tr class="history-row"><td>#10${index}</td><td>Processing</td><td>${(index + 2) * 1200}</td><td><a href="#" data-static-action>Open detail</a></td></tr>`).join("")}</tbody></table></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "order-history", 7)}`;
+  return `<section class="panel"><h3>Order history list</h3><table class="table"><thead><tr><th>Order</th><th>Status</th><th>Total</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 5 }, (_, index) => `<tr class="history-row"><td>#10${index}</td><td>Processing</td><td>${(index + 2) * 1200}</td><td><a href="#" data-static-action>Open detail</a></td></tr>`).join("")}</tbody></table></section>${stateStrip(screen.requiredStates)}`;
 }
 
 function renderOrderDetail(screen) {
-  return `<section class="split-layout"><div class="panel"><h3>Timeline</h3><ol class="timeline">${["Placed", "Approved", "Packed", "Shipping", "Delivered"].map((item) => `<li>${item}</li>`).join("")}</ol></div><aside class="panel detail-summary"><h3>Detail summary</h3><p>Delivery, payment, line item, and support snapshot.</p></aside></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "order-detail", 8)}`;
+  return `<section class="split-layout"><div class="panel"><h3>Timeline</h3><ol class="timeline">${["Placed", "Approved", "Packed", "Shipping", "Delivered"].map((item) => `<li>${item}</li>`).join("")}</ol></div><aside class="panel detail-summary"><h3>Detail summary</h3><p>Delivery, payment, line item, and support snapshot.</p></aside></section>${stateStrip(screen.requiredStates)}`;
 }
 
 function renderAccountInfo(screen) {
-  return `<section class="screen-layout"><aside class="panel"><h3>Account sidebar</h3><nav class="screen-nav"><a href="#">Company</a><a href="#">Users</a><a href="#">Billing</a><a href="#">Security</a></nav></aside><div class="panel"><h3>View or edit form</h3><form class="form-grid">${["Company", "Contact", "Email", "Phone", "Address"].map((label) => `<label>${label}<input type="text" value="${label}"></label>`).join("")}</form></div></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "account-info", 7)}`;
+  return `<section class="screen-layout"><aside class="panel"><h3>Account sidebar</h3><nav class="screen-nav"><a href="#">Company</a><a href="#">Users</a><a href="#">Billing</a><a href="#">Security</a></nav></aside><div class="panel"><h3>View or edit form</h3><form class="form-grid">${["Company", "Contact", "Email", "Phone", "Address"].map((label) => `<label>${label}<input type="text" value="${label}"></label>`).join("")}</form></div></section>${stateStrip(screen.requiredStates)}`;
 }
 
 function renderConfigurator(screen) {
-  return `<section class="panel"><h3>Configurator wizard</h3><ol class="checkout-stepper">${["Project", "Assembly", "Construction", "Review", "Complete"].map((step) => `<li class="stepper-step">${step}</li>`).join("")}</ol><div class="split-layout"><div class="panel preview-panel"><h4>Preview panel</h4><p>Derived material preview with recalculation state and validation summary.</p>${stateStrip(screen.requiredStates)}</div><div class="panel"><h4>BOM table</h4><table class="table cart-table"><thead><tr><th>Material</th><th>Spec</th><th>Qty</th><th>Unit</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 8 }, (_, index) => `<tr><td>Material ${index + 1}</td><td>Generated spec ${index + 1}</td><td>${index + 2}</td><td>pcs</td><td><button>Exclude</button></td></tr>`).join("")}</tbody></table><div class="button-row"><a class="btn btn-secondary" href="#" data-static-action>Recalculate</a><a class="btn btn-primary" href="#" data-static-action>Add BOM to cart</a></div></div></div></section>${evidenceGrid(screen, "configurator-bom", 24)}`;
+  return `<section class="panel"><h3>Configurator wizard</h3><ol class="checkout-stepper">${["Project", "Assembly", "Construction", "Review", "Complete"].map((step) => `<li class="stepper-step">${step}</li>`).join("")}</ol><div class="split-layout"><div class="panel preview-panel"><h4>Preview panel</h4><p>Derived material preview with recalculation state and validation summary.</p>${stateStrip(screen.requiredStates)}</div><div class="panel"><h4>BOM table</h4><table class="table cart-table"><thead><tr><th>Material</th><th>Spec</th><th>Qty</th><th>Unit</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 8 }, (_, index) => `<tr><td>Material ${index + 1}</td><td>Generated spec ${index + 1}</td><td>${index + 2}</td><td>pcs</td><td><button>Exclude</button></td></tr>`).join("")}</tbody></table><div class="button-row"><a class="btn btn-secondary" href="#" data-static-action>Recalculate</a><a class="btn btn-primary" href="#" data-static-action>Add BOM to cart</a></div></div></div></section>`;
 }
 
 function renderGeneric(screen) {
-  return `<section class="panel"><h3>${escapeHtml(screen.title)} workspace</h3><p>Renderer-ready generic screen with explicit sections, components, states, interactions, and source evidence from the screen brief.</p></section>${stateStrip(screen.requiredStates)}${evidenceGrid(screen, "generic", 8)}`;
+  return `<section class="panel"><h3>${escapeHtml(screen.title)} workspace</h3><p>Renderer-ready generic screen with explicit sections, components, states, interactions, and source evidence from the screen brief.</p></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderRoleContent({ screen, role, brief }) {
+  if (brief) return renderBriefContent({ screen, role, brief });
+  return renderNeedsBrief(screen, role);
 }
 
-function renderRoleContent(screen, role) {
+function renderLegacyRoleContent(screen, role) {
   if (role === "home") return renderHome(screen);
   if (role === "category") return renderCategory(screen);
   if (role === "product-detail") return renderProductDetail(screen);
@@ -217,7 +277,7 @@ function indexHtml({ screens, profile, densityReport, styleName }) {
     <header class="topbar">
       <div class="topline">
         <strong>SDTK-DESIGN multi-page prototype</strong>
-        <span class="meta">screens=${screens.length} | profile=${escapeHtml(profile || "none")} | density=${densityReport.totalBytes}/${densityReport.minTotalBytes} bytes</span>
+        <span class="meta">screens=${screens.length} | profile=${escapeHtml(profile || "none")} | density=${densityReport.mode === "semantic" ? `${densityReport.aggregate.sectionCount} sections / ${densityReport.aggregate.componentCount} components` : `${densityReport.totalBytes}/${densityReport.minTotalBytes} bytes`}</span>
       </div>
       <nav class="screen-nav" aria-label="Screen navigation">
         ${screens.map((screen) => `<a href="screens/${screenFileName(screen)}">${escapeHtml(screen.title)}</a>`).join("")}
@@ -232,9 +292,11 @@ function indexHtml({ screens, profile, densityReport, styleName }) {
 `;
 }
 
-function renderScreenHtml({ screen, role, previousScreen, nextScreen }) {
-  const content = renderRoleContent(screen, role);
-  const initial = pageChrome({
+function renderScreenHtml({ screen, role, brief, previousScreen, nextScreen }) {
+  const content = renderRoleContent({ screen, role, brief });
+  const hasBriefSections = Boolean(brief && Array.isArray(brief.sections) && brief.sections.length > 0);
+  const heroHeadingTag = hasBriefSections ? "h2" : "h1";
+  return pageChrome({
     title: screen.title,
     cssHref: "../assets/prototype.css",
     backHref: "../index.html",
@@ -242,27 +304,14 @@ function renderScreenHtml({ screen, role, previousScreen, nextScreen }) {
     next: { title: nextScreen.title, href: screenFileName(nextScreen) },
     screenId: screen.screenId,
     role,
-    bodyContent: `<section class="hero"><p class="eyebrow">${escapeHtml(role.replace(/-/g, " "))}</p><h1>${escapeHtml(screen.title)}</h1><p class="support">${escapeHtml(screen.purpose || screen.userIntent || "Renderer-ready screen generated from explicit design brief.")}</p></section>${content}`,
+    bodyContent: `<section class="hero" data-component-id="hero"><p class="eyebrow">${escapeHtml(role.replace(/-/g, " "))}</p><${heroHeadingTag}>${escapeHtml(screen.title)}</${heroHeadingTag}><p class="support">${escapeHtml(screen.purpose || screen.userIntent || "Renderer-ready screen generated from explicit design brief.")}</p></section>${content}`,
   });
-  return ensureDensityTarget(initial, screen, role);
-}
-
-function ensureDensityTarget(html, screen, role) {
-  const floor = ROLE_FLOORS[role] || { minBytes: 0 };
-  const targetBytes = floor.minBytes > 0 ? floor.minBytes + 2300 : Buffer.byteLength(html, "utf8");
-  let result = html;
-  let index = 1;
-  while (Buffer.byteLength(result, "utf8") < targetBytes && index <= 80) {
-    const block = `<section class="density-evidence" aria-label="Additional screen detail ${index}"><article><strong>${escapeHtml(screen.title)} implementation detail ${index}</strong><p>${escapeHtml(role)} page includes source-backed layout notes, component state behavior, responsive grouping, data slot mapping, accessibility guidance, and static interaction acceptance evidence for renderer and QA review.</p></article><article><strong>${escapeHtml(screen.title)} QA checkpoint ${index}</strong><p>Generated content remains local static prototype output under docs/design/prototype and does not depend on sample files, network calls, app runtime code, or external UI references.</p></article></section>`;
-    result = result.replace("</main>", `${block}</main>`);
-    index += 1;
-  }
-  return result;
 }
 
-function renderMultiPagePrototype({ paths, statePayload, contractBundle, styleName }) {
+function renderMultiPagePrototype({ paths, statePayload, contractBundle, styleName, briefIndex }) {
   const screens = statePayload.screenModel.screens;
   const tokens = contractBundle.tokens || {};
+  const resolvedBriefIndex = briefIndex || loadPrototypeBriefIndex({ paths });
   fs.mkdirSync(paths.prototypePath, { recursive: true });
   fs.mkdirSync(paths.prototypeScreensPath, { recursive: true });
   fs.mkdirSync(paths.prototypeAssetsPath, { recursive: true });
@@ -282,11 +331,17 @@ function renderMultiPagePrototype({ paths, statePayload, contractBundle, styleNa
           ? contractBundle.screenContracts.get(screen.screenId).sidecar.template_role
           : null,
     });
-    const html = renderScreenHtml({ screen, role, previousScreen, nextScreen });
+    const screenContract =
+      contractBundle.screenContracts && contractBundle.screenContracts.get(screen.screenId)
+        ? contractBundle.screenContracts.get(screen.screenId)
+        : null;
+    const brief = briefForScreen({ screen, briefIndex: resolvedBriefIndex }) || (screenContract && screenContract.sidecar ? screenContract.sidecar : null);
+    const html = renderScreenHtml({ screen, role, brief, previousScreen, nextScreen });
     return {
       screenId: screen.screenId,
       title: screen.title,
       role,
+      brief,
       relativePath: screenRelativePath(screen),
       filePath: path.join(paths.prototypeScreensPath, screenFileName(screen)),
       html,
@@ -315,11 +370,13 @@ function renderMultiPagePrototype({ paths, statePayload, contractBundle, styleNa
       byteLength: Buffer.byteLength(page.html, "utf8"),
     })),
     densityReport,
+    briefFindings: resolvedBriefIndex.findings || [],
   };
 }
 
 module.exports = {
   renderMultiPagePrototype,
+  renderLegacyRoleContent,
   screenFileName,
   screenRelativePath,
 };