@atlashub/smartstack-cli 4.48.0 → 4.50.0

package/templates/skills/business-analyse-handoff/references/prd-generation.md

@@ -208,6 +208,64 @@ Each file entry in a category array must have:
 
 ---
 
+### 6. Specification Files (MANDATORY)
+
+Each PRD MUST include a `specificationFiles` object and 5 companion files in `.ralph/`:
+
+```json
+{
+  "$version": "3.0.0",
+  "implementation": { "filesToCreate": { /* 8 categories */ } },
+  "brToCodeMapping": [ /* enriched with statement, example, formula */ ],
+  "apiEndpointSummary": [ /* ... */ ],
+  "specificationFiles": {
+    "entities": "prd-{moduleCode}.entities.json",
+    "rules": "prd-{moduleCode}.rules.json",
+    "usecases": "prd-{moduleCode}.usecases.json",
+    "screens": "prd-{moduleCode}.screens.json",
+    "permissions": "prd-{moduleCode}.permissions.json"
+  }
+}
+```
+
+**Companion files** are VERBATIM copies of BA source files, colocated in `.ralph/`:
+
+```
+.ralph/
+  prd-Employees.json                  # PRD manifest (compact)
+  prd-Employees.entities.json         # VERBATIM copy of entities.json
+  prd-Employees.rules.json            # VERBATIM copy of rules.json
+  prd-Employees.usecases.json         # VERBATIM copy of usecases.json
+  prd-Employees.screens.json          # VERBATIM copy of screens.json
+  prd-Employees.permissions.json      # VERBATIM copy of permissions.json
+```
+
+**Validation:**
+```javascript
+const specFiles = prd.specificationFiles;
+if (!specFiles) {
+  BLOCKING_ERROR('specificationFiles missing from PRD');
+}
+const specKeys = ['entities', 'rules', 'usecases', 'screens', 'permissions'];
+for (const key of specKeys) {
+  if (!specFiles[key]) {
+    BLOCKING_ERROR(`specificationFiles.${key} missing`);
+  }
+  const filePath = path.join('.ralph', specFiles[key]);
+  if (!fs.existsSync(filePath)) {
+    BLOCKING_ERROR(`Companion file not found: ${filePath}`);
+  }
+}
+```
+
+**Why companion files matter:**
+- `/apex` loads only the specs needed per layer (entities for L0, rules+usecases for L2, screens for L3)
+- Context per layer is ~200-500 lines instead of ~2000 lines monolithic
+- Zero risk of specs being lost at the bottom of a large context window
+- Full BA detail available for oneshot generation (attributes, formulas, screen columns)
+
+---
+
 ## Validation Checklist
 
 Use this checklist when validating PRD files:
@@ -219,6 +277,7 @@ Use this checklist when validating PRD files:
 | **Categories** | All 8 categories present | PASS/FAIL |
 | **File Counts** | PRD counts match index.json handoff.filesToCreate | PASS/FAIL |
 | **File Schemas** | All files have path, type, module | PASS/FAIL |
+| **Spec Files** | `specificationFiles` present with 5 paths, all companion files exist | PASS/FAIL |
 
 **All checks must PASS before proceeding to /business-analyse-develop**
 

package/templates/skills/business-analyse-handoff/steps/step-01-transform.md

@@ -151,6 +151,25 @@ Write via ba-writer.enrichModuleHandoff with the complete handoff payload:
 - totalFiles, totalTasks, handedOffAt (ISO timestamp)
 - featureDescription: {featureDescription}
 
+### Specification Files (MANDATORY)
+After writing the handoff data, ALSO write 5 companion files:
+1. `.ralph/prd-{moduleCode}.entities.json` = VERBATIM copy of `{moduleDir}/entities.json`
+2. `.ralph/prd-{moduleCode}.rules.json` = VERBATIM copy of `{moduleDir}/rules.json`
+3. `.ralph/prd-{moduleCode}.usecases.json` = VERBATIM copy of `{moduleDir}/usecases.json`
+4. `.ralph/prd-{moduleCode}.screens.json` = VERBATIM copy of `{moduleDir}/screens.json`
+5. `.ralph/prd-{moduleCode}.permissions.json` = VERBATIM copy of `{moduleDir}/permissions.json`
+
+Add `specificationFiles` to the PRD referencing these files (relative names, all in `.ralph/`):
+```json
+"specificationFiles": {
+  "entities": "prd-{moduleCode}.entities.json",
+  "rules": "prd-{moduleCode}.rules.json",
+  "usecases": "prd-{moduleCode}.usecases.json",
+  "screens": "prd-{moduleCode}.screens.json",
+  "permissions": "prd-{moduleCode}.permissions.json"
+}
+```
+
 ### POST-CHECK (BLOCKING)
 After writing, verify:
 1. Handoff not empty
@@ -159,7 +178,12 @@ After writing, verify:
 4. Section resources have entity field
 5. SeedData contains CORE entries (NavigationModuleSeedData, NavigationSectionSeedData if sections exist, PermissionsSeedData, RolesSeedData)
 6. For FIRST module only: SeedData contains APP-LEVEL CORE entries (NavigationApplicationSeedData, ApplicationRolesSeedData)
-Display: "POST-CHECK PASS: {moduleCode} -- 8 categories, {brCount} BRs mapped, {coreCount} core seeds"
+7. All 5 companion files exist in `.ralph/` and are non-empty
+8. `specificationFiles` present in the PRD with all 5 paths
+9. Entity count in companion matches source: `prd-{moduleCode}.entities.json` entities[] count = `{moduleDir}/entities.json` entities[] count
+10. BR count in companion matches source: `prd-{moduleCode}.rules.json` rules[] count = `{moduleDir}/rules.json` rules[] count
+11. Each `brToCodeMapping[].statement` is non-empty (not just a title paraphrase)
+Display: "POST-CHECK PASS: {moduleCode} -- 8 categories, {brCount} BRs mapped, {coreCount} core seeds, 5 companion files"
 ```
 
 ### 3. Display Progress

package/templates/skills/business-analyse-handoff/steps/step-02-export.md

@@ -91,6 +91,26 @@ for (const cat of categories) {
     BLOCKING_ERROR(`${cat}: prd=${prdCount} but feature=${featureCount}`);
   }
 }
+
+// Check 5: Specification files (companion files)
+const specFiles = prd.specificationFiles;
+if (!specFiles) {
+  BLOCKING_ERROR("specificationFiles missing from PRD");
+}
+const specKeys = ['entities', 'rules', 'usecases', 'screens', 'permissions'];
+for (const key of specKeys) {
+  if (!specFiles[key]) {
+    BLOCKING_ERROR(`specificationFiles.${key} path missing`);
+  }
+  const companionPath = `.ralph/${specFiles[key]}`;
+  if (!fileExists(companionPath)) {
+    BLOCKING_ERROR(`Companion file not found: ${companionPath}`);
+  }
+  const companionSize = fileSize(companionPath);
+  if (companionSize < 10) {
+    BLOCKING_ERROR(`Companion file empty or too small: ${companionPath} (${companionSize} bytes)`);
+  }
+}
 ```
 
 Display verification table showing all 8 categories match between module JSON files and prd.json.
@@ -187,10 +207,15 @@ Readiness Scores:
 └──────────────┴────────────┴──────────────┘
 
 Artifacts generated:
-  .ralph/prd-{module}.json      — Task breakdown per module
-  .ralph/progress.txt           — Progression tracker
-  .ralph/modules-queue.json     — Module execution order (if multi-module)
-  docs/index.json               — BA manifest (status: handed-off)
+  .ralph/prd-{module}.json                — Task breakdown per module
+  .ralph/prd-{module}.entities.json       — Entity specifications (companion)
+  .ralph/prd-{module}.rules.json          — Business rules (companion)
+  .ralph/prd-{module}.usecases.json       — Use cases (companion)
+  .ralph/prd-{module}.screens.json        — Screen specifications (companion)
+  .ralph/prd-{module}.permissions.json    — Permissions (companion)
+  .ralph/progress.txt                     — Progression tracker
+  .ralph/modules-queue.json               — Module execution order (if multi-module)
+  docs/index.json                         — BA manifest (status: handed-off)
 
 [NEXT] Development:
   1. Run /business-analyse-develop to begin implementation
@@ -210,5 +235,8 @@ Artifacts generated:
 4. `docs/index.json` updated with correct entry count and status "handed-off"
 5. All PRD files have $version=3.0.0 or 4.0.0, file manifest present, 8 categories
 6. File counts match between PRD and handoff for all categories
+7. For EACH module: 5 companion files exist in `.ralph/` (entities, rules, usecases, screens, permissions)
+8. Each PRD contains `specificationFiles` with all 5 paths
+9. Each companion file is non-empty (>10 bytes)
 
 **IF any check fails -> fix before completing.**

package/templates/skills/business-analyse-html/html/ba-interactive.html

@@ -378,13 +378,13 @@ body {
 .nav-icon-section { font-size: 0.5rem; color: var(--accent); }
 .nav-icon-resource { font-size: 0.7rem; color: var(--border-light); }
 .nav-resource-link {
-    cursor: default;
+    cursor: pointer;
     font-size: 0.72rem;
     color: var(--text-muted);
     padding-top: 0.2rem;
     padding-bottom: 0.2rem;
 }
-.nav-resource-link:hover { background: transparent; color: var(--text-muted); }
+.nav-resource-link:hover { background: var(--bg-hover); color: var(--accent); }
 .nav-resources { margin-left: 0.5rem; }
 
 
@@ -1031,6 +1031,44 @@ body {
     color: var(--text-muted);
 }
 
+/* ============================================
+   STRUCTURE LEGEND
+   ============================================ */
+.struct-legend {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 0.75rem 1rem;
+    margin-bottom: 1.25rem;
+}
+.struct-legend-title {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+.struct-legend-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.4rem 1.5rem;
+}
+.struct-legend-item {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    line-height: 1.4;
+}
+.struct-legend-code {
+    display: inline-block;
+    font-weight: 600;
+    color: var(--accent);
+    background: rgba(6,182,212,0.1);
+    padding: 0.05rem 0.4rem;
+    border-radius: 3px;
+    font-size: 0.72rem;
+    margin-right: 0.3rem;
+    font-family: monospace;
+}
+
 /* ============================================
    SECTION GROUPS (Hierarchical Mode)
    ============================================ */
@@ -2416,8 +2454,10 @@ data.moduleSpecs = data.moduleSpecs || {};
     if (!data.moduleSpecs[m.code]) {
         data.moduleSpecs[m.code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
     }
-    // Ensure anticipatedSections array exists
-    m.anticipatedSections = m.anticipatedSections || [];
+    // Ensure anticipatedSections array exists and normalize strings to objects
+    m.anticipatedSections = (m.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, description: '', resources: [] } : s;
+    });
     m.applicationCode = m.applicationCode || '';
     // Initialize screens array for interface specs
     if (!data.moduleSpecs[m.code].screens) {
@@ -2729,7 +2769,9 @@ function renderModuleNavItem(mod) {
     var ucCount = (spec.useCases || []).length;
     var brCount = (spec.businessRules || []).length;
     var entCount = (spec.entities || []).length;
-    var sections = mod.anticipatedSections || [];
+    var sections = (mod.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, resources: [] } : s;
+    });
     var groupId = 'mod-' + code;
     var collapsed = navCollapseState[groupId] === true;
 
@@ -2762,7 +2804,7 @@ function renderModuleNavItem(mod) {
                 html += '<div class="nav-children nav-resources">';
                 resources.forEach(function(res) {
                     var resName = typeof res === 'string' ? res : (res.code || res.name || '');
-                    html += '<a class="nav-item nav-resource-link">';
+                    html += '<a class="nav-item nav-resource-link" onclick="showSection(\'module-spec-' + code + '\');switchTab(\'' + code + '\',\'mock\');scrollToMockup(\'' + code + '\',\'' + section.code + '\')">';
                     html += '<span class="nav-icon nav-icon-resource">&#8226;</span> ' + escapeHtml(resName);
                     html += '</a>';
                 });
@@ -2785,6 +2827,18 @@ function renderModuleTabNavItem(code, tabId, label, badge) {
     '</a>';
 }
 
+function scrollToMockup(moduleCode, sectionCode) {
+    setTimeout(function() {
+        var el = document.getElementById('screen-' + moduleCode + '-' + sectionCode);
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            el.style.outline = '2px solid var(--accent)';
+            el.style.borderRadius = '10px';
+            setTimeout(function() { el.style.outline = ''; el.style.borderRadius = ''; }, 2000);
+        }
+    }, 150);
+}
+
 /* ---------- Collapse/Expand ---------- */
 
 function toggleNavGroup(groupId) {
@@ -3907,7 +3961,9 @@ function refreshAllPermGrids() {
 
 function renderModuleStructure(code) {
     const mod = data.modules.find(m => m.code === code);
-    const sections = mod ? (mod.anticipatedSections || []) : [];
+    const sections = mod ? (mod.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, description: '', resources: [] } : s;
+    }) : [];
 
     if (sections.length === 0) {
         return '<div class="card" style="text-align:center;padding:2rem;color:var(--text-muted);">' +
@@ -3916,7 +3972,16 @@ function renderModuleStructure(code) {
             '</div>';
     }
 
-    return sections.map(function(section) {
+    var legend = '<div class="struct-legend">' +
+        '<div class="struct-legend-title">&#9432; Types de sections</div>' +
+        '<div class="struct-legend-grid">' +
+        '<div class="struct-legend-item"><span class="struct-legend-code">list</span> Page principale — grille de données avec filtres, tri et actions (créer, exporter)</div>' +
+        '<div class="struct-legend-item"><span class="struct-legend-code">detail</span> Fiche détaillée — affichée au clic sur une ligne, avec onglets (infos, relations, historique)</div>' +
+        '<div class="struct-legend-item"><span class="struct-legend-code">dashboard</span> Tableau de bord — KPIs, graphiques et métriques du module</div>' +
+        '<div class="struct-legend-item"><span class="struct-legend-code">approve</span> Workflow — file de validation avec actions (approuver, rejeter, mettre en attente)</div>' +
+        '</div></div>';
+
+    return legend + sections.map(function(section) {
         var resources = section.resources || [];
         var sectionUCs = section.useCases || [];
         var sectionBRs = section.businessRules || [];
@@ -3977,7 +4042,9 @@ function renderModuleStructure(code) {
 /* ---------- Section-Grouped Rendering (Hierarchical Mode) ---------- */
 
 function renderSectionGroupedItems(mod, itemsKey, code, renderFn) {
-    var sections = mod.anticipatedSections || [];
+    var sections = (mod.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, resources: [] } : s;
+    });
     var html = '';
     sections.forEach(function(section) {
         var items = section[itemsKey] || [];
@@ -4000,7 +4067,9 @@ function renderModuleMockups(code) {
     var screens = spec.screens || [];
     var wireframes = EMBEDDED_ARTIFACTS?.wireframes?.[code] || [];
     var mod = data.modules.find(function(m) { return m.code === code; });
-    var sections = mod ? (mod.anticipatedSections || []) : [];
+    var sections = mod ? (mod.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, resources: [] } : s;
+    }) : [];
 
     // Priority 1: HTML mockups from screens[] specs
     if (screens.length > 0) {
@@ -4295,7 +4364,7 @@ function renderScreenMockups(code) {
 
     return screens.map(function(screen, si) {
         var resources = screen.resources || [];
-        return '<div class="screen-section" style="margin-bottom:2rem;">' +
+        return '<div class="screen-section" id="screen-' + code + '-' + screen.sectionCode + '" style="margin-bottom:2rem;">' +
             '<h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:1rem;">' +
             '<span style="color:var(--accent);">&#9656;</span> ' + escapeHtml(screen.sectionLabel || screen.sectionCode) +
             '</h3>' +

package/templates/skills/business-analyse-html/html/src/scripts/01-data-init.js

@@ -66,8 +66,10 @@ data.moduleSpecs = data.moduleSpecs || {};
     if (!data.moduleSpecs[m.code]) {
         data.moduleSpecs[m.code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
     }
-    // Ensure anticipatedSections array exists
-    m.anticipatedSections = m.anticipatedSections || [];
+    // Ensure anticipatedSections array exists and normalize strings to objects
+    m.anticipatedSections = (m.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, description: '', resources: [] } : s;
+    });
     m.applicationCode = m.applicationCode || '';
     // Initialize screens array for interface specs
     if (!data.moduleSpecs[m.code].screens) {

package/templates/skills/business-analyse-html/html/src/scripts/02-navigation.js

@@ -149,7 +149,9 @@ function renderModuleNavItem(mod) {
     var ucCount = (spec.useCases || []).length;
     var brCount = (spec.businessRules || []).length;
     var entCount = (spec.entities || []).length;
-    var sections = mod.anticipatedSections || [];
+    var sections = (mod.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, resources: [] } : s;
+    });
     var groupId = 'mod-' + code;
     var collapsed = navCollapseState[groupId] === true;
 
@@ -182,7 +184,7 @@ function renderModuleNavItem(mod) {
                 html += '<div class="nav-children nav-resources">';
                 resources.forEach(function(res) {
                     var resName = typeof res === 'string' ? res : (res.code || res.name || '');
-                    html += '<a class="nav-item nav-resource-link">';
+                    html += '<a class="nav-item nav-resource-link" onclick="showSection(\'module-spec-' + code + '\');switchTab(\'' + code + '\',\'mock\');scrollToMockup(\'' + code + '\',\'' + section.code + '\')">';
                     html += '<span class="nav-icon nav-icon-resource">&#8226;</span> ' + escapeHtml(resName);
                     html += '</a>';
                 });
@@ -205,6 +207,18 @@ function renderModuleTabNavItem(code, tabId, label, badge) {
     '</a>';
 }
 
+function scrollToMockup(moduleCode, sectionCode) {
+    setTimeout(function() {
+        var el = document.getElementById('screen-' + moduleCode + '-' + sectionCode);
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            el.style.outline = '2px solid var(--accent)';
+            el.style.borderRadius = '10px';
+            setTimeout(function() { el.style.outline = ''; el.style.borderRadius = ''; }, 2000);
+        }
+    }, 150);
+}
+
 /* ---------- Collapse/Expand ---------- */
 
 function toggleNavGroup(groupId) {

package/templates/skills/business-analyse-html/html/src/scripts/05-render-specs.js

@@ -611,7 +611,9 @@ function refreshAllPermGrids() {
 
 function renderModuleStructure(code) {
     const mod = data.modules.find(m => m.code === code);
-    const sections = mod ? (mod.anticipatedSections || []) : [];
+    const sections = mod ? (mod.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, description: '', resources: [] } : s;
+    }) : [];
 
     if (sections.length === 0) {
         return '<div class="card" style="text-align:center;padding:2rem;color:var(--text-muted);">' +
@@ -620,7 +622,16 @@ function renderModuleStructure(code) {
             '</div>';
     }
 
-    return sections.map(function(section) {
+    var legend = '<div class="struct-legend">' +
+        '<div class="struct-legend-title">&#9432; Types de sections</div>' +
+        '<div class="struct-legend-grid">' +
+        '<div class="struct-legend-item"><span class="struct-legend-code">list</span> Page principale — grille de données avec filtres, tri et actions (créer, exporter)</div>' +
+        '<div class="struct-legend-item"><span class="struct-legend-code">detail</span> Fiche détaillée — affichée au clic sur une ligne, avec onglets (infos, relations, historique)</div>' +
+        '<div class="struct-legend-item"><span class="struct-legend-code">dashboard</span> Tableau de bord — KPIs, graphiques et métriques du module</div>' +
+        '<div class="struct-legend-item"><span class="struct-legend-code">approve</span> Workflow — file de validation avec actions (approuver, rejeter, mettre en attente)</div>' +
+        '</div></div>';
+
+    return legend + sections.map(function(section) {
         var resources = section.resources || [];
         var sectionUCs = section.useCases || [];
         var sectionBRs = section.businessRules || [];
@@ -681,7 +692,9 @@ function renderModuleStructure(code) {
 /* ---------- Section-Grouped Rendering (Hierarchical Mode) ---------- */
 
 function renderSectionGroupedItems(mod, itemsKey, code, renderFn) {
-    var sections = mod.anticipatedSections || [];
+    var sections = (mod.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, resources: [] } : s;
+    });
     var html = '';
     sections.forEach(function(section) {
         var items = section[itemsKey] || [];
@@ -704,7 +717,9 @@ function renderModuleMockups(code) {
     var screens = spec.screens || [];
     var wireframes = EMBEDDED_ARTIFACTS?.wireframes?.[code] || [];
     var mod = data.modules.find(function(m) { return m.code === code; });
-    var sections = mod ? (mod.anticipatedSections || []) : [];
+    var sections = mod ? (mod.anticipatedSections || []).map(function(s) {
+        return typeof s === 'string' ? { code: s, name: s, resources: [] } : s;
+    }) : [];
 
     // Priority 1: HTML mockups from screens[] specs
     if (screens.length > 0) {

package/templates/skills/business-analyse-html/html/src/scripts/06-render-mockups.js

@@ -11,7 +11,7 @@ function renderScreenMockups(code) {
 
     return screens.map(function(screen, si) {
         var resources = screen.resources || [];
-        return '<div class="screen-section" style="margin-bottom:2rem;">' +
+        return '<div class="screen-section" id="screen-' + code + '-' + screen.sectionCode + '" style="margin-bottom:2rem;">' +
             '<h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:1rem;">' +
             '<span style="color:var(--accent);">&#9656;</span> ' + escapeHtml(screen.sectionLabel || screen.sectionCode) +
             '</h3>' +

package/templates/skills/business-analyse-html/html/src/styles/03-navigation.css

@@ -110,11 +110,11 @@
 .nav-icon-section { font-size: 0.5rem; color: var(--accent); }
 .nav-icon-resource { font-size: 0.7rem; color: var(--border-light); }
 .nav-resource-link {
-    cursor: default;
+    cursor: pointer;
     font-size: 0.72rem;
     color: var(--text-muted);
     padding-top: 0.2rem;
     padding-bottom: 0.2rem;
 }
-.nav-resource-link:hover { background: transparent; color: var(--text-muted); }
+.nav-resource-link:hover { background: var(--bg-hover); color: var(--accent); }
 .nav-resources { margin-left: 0.5rem; }

package/templates/skills/business-analyse-html/html/src/styles/05-modules.css

@@ -443,6 +443,44 @@
     color: var(--text-muted);
 }
 
+/* ============================================
+   STRUCTURE LEGEND
+   ============================================ */
+.struct-legend {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 0.75rem 1rem;
+    margin-bottom: 1.25rem;
+}
+.struct-legend-title {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+.struct-legend-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.4rem 1.5rem;
+}
+.struct-legend-item {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    line-height: 1.4;
+}
+.struct-legend-code {
+    display: inline-block;
+    font-weight: 600;
+    color: var(--accent);
+    background: rgba(6,182,212,0.1);
+    padding: 0.05rem 0.4rem;
+    border-radius: 3px;
+    font-size: 0.72rem;
+    margin-right: 0.3rem;
+    font-family: monospace;
+}
+
 /* ============================================
    SECTION GROUPS (Hierarchical Mode)
    ============================================ */

package/templates/skills/business-analyse-html/references/data-build.md

@@ -51,7 +51,10 @@ const FEATURE_DATA = {
       featureType: module.featureType || "data-centric",
       estimatedComplexity: module.estimatedComplexity || "medium",
       entities: module.entities || [],
-      anticipatedSections: module.anticipatedSections || [],
+      // NORMALIZE: source may have strings (coverageMatrix) or objects (module schema)
+      anticipatedSections: (module.anticipatedSections || []).map(s =>
+        typeof s === 'string' ? { code: s, name: s, description: '', resources: [] } : s
+      ),   // ALWAYS [{code, name, description, resources[]}]
       dependencies: module.dependencies || [],
       dependents: module.dependents || []
     }

package/templates/skills/business-analyse-html/references/data-mapping.md

@@ -57,7 +57,10 @@ Build a JSON object following this **exact mapping** from index.json to the HTML
     description: m.description || "",
     featureType: m.featureType || "data-centric",
     entities: m.entities || [],
-    anticipatedSections: m.anticipatedSections || [],    // [{code, description, resources[]}]
+    // NORMALIZE: source may have strings (coverageMatrix) or objects (module schema)
+    anticipatedSections: (m.anticipatedSections || []).map(s =>
+      typeof s === 'string' ? { code: s, name: s, description: '', resources: [] } : s
+    ),   // ALWAYS [{code, name, description, resources[]}]
     dependencies: m.dependencies || [],
     dependents: m.dependents || [],
     estimatedComplexity: m.estimatedComplexity || "medium",