@atlashub/smartstack-cli 4.41.0 → 4.42.0

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/05-render-specs.js

@@ -27,23 +27,24 @@ function renderModuleSpecSection(mod) {
 
     return `
     <div class="section" id="module-spec-${code}" style="display:none;">
-        <h2 class="section-title">${mod.name}</h2>
-        <p class="section-subtitle">${mod.description || 'Spécification détaillée de ce domaine fonctionnel.'}</p>
-
-        <div class="tab-bar">
-            <button class="tab-btn active" onclick="switchTab('${code}', 'uc')">Cas d'utilisation</button>
-            <button class="tab-btn" onclick="switchTab('${code}', 'br')">Règles métier</button>
-            <button class="tab-btn" onclick="switchTab('${code}', 'ent')">Données</button>
-            <button class="tab-btn" onclick="switchTab('${code}', 'perm')">Droits d'accès</button>
-            <button class="tab-btn" onclick="switchTab('${code}', 'mock')">Maquettes</button>
-            <button class="tab-btn" onclick="switchTab('${code}', 'notes')">Notes</button>
-            <button class="tab-btn" onclick="switchTab('${code}', 'struct')">Structure</button>
+        <h2 class="section-title">${escapeHtml(mod.name)}</h2>
+        <p class="section-subtitle">${escapeHtml(mod.description || 'Spécification détaillée de ce domaine fonctionnel.')}</p>
+
+        <div class="tab-bar" role="tablist" aria-label="Spécifications du module ${escapeHtml(mod.name)}">
+            <button class="tab-btn active" role="tab" aria-selected="true" aria-controls="tab-${code}-uc" onclick="switchTab('${code}', 'uc')">Cas d'utilisation</button>
+            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-${code}-br" onclick="switchTab('${code}', 'br')">Règles métier</button>
+            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-${code}-ent" onclick="switchTab('${code}', 'ent')">Données</button>
+            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-${code}-perm" onclick="switchTab('${code}', 'perm')">Droits d'accès</button>
+            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-${code}-mock" onclick="switchTab('${code}', 'mock')">Maquettes</button>
+            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-${code}-notes" onclick="switchTab('${code}', 'notes')">Notes</button>
+            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-${code}-struct" onclick="switchTab('${code}', 'struct')">Structure</button>
         </div>
 
         <!-- TAB: Cas d'utilisation -->
-        <div class="tab-panel active" id="tab-${code}-uc">
+        <div class="tab-panel active" id="tab-${code}-uc" role="tabpanel" aria-hidden="false">
             <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Décrivez ce que chaque type d'utilisateur peut faire dans ce domaine. Un cas d'utilisation = une action concrète.</p>
             <div id="ucList-${code}" class="uc-list">
+                ${hasHierarchicalSpecs(mod) ? renderSectionGroupedItems(mod, 'useCases', code, renderUseCase) : ''}
                 ${spec.useCases.map((uc, i) => renderUseCase(code, uc, i)).join('')}
             </div>
             <button class="add-btn" onclick="toggleForm('addUcForm-${code}')">+ Ajouter un cas d'utilisation</button>
@@ -73,9 +74,10 @@ function renderModuleSpecSection(mod) {
         </div>
 
         <!-- TAB: Règles métier -->
-        <div class="tab-panel" id="tab-${code}-br">
+        <div class="tab-panel" id="tab-${code}-br" role="tabpanel" aria-hidden="true">
             <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Les règles que le système doit respecter. Formulez-les sous forme de conditions : "Si... alors... sinon..."</p>
             <div id="brList-${code}">
+                ${hasHierarchicalSpecs(mod) ? renderSectionGroupedItems(mod, 'businessRules', code, renderBusinessRule) : ''}
                 ${spec.businessRules.map((br, i) => renderBusinessRule(code, br, i)).join('')}
             </div>
             <button class="add-btn" onclick="toggleForm('addBrForm-${code}')">+ Ajouter une règle métier</button>
@@ -111,7 +113,7 @@ function renderModuleSpecSection(mod) {
         </div>
 
         <!-- TAB: Données (Entités) -->
-        <div class="tab-panel" id="tab-${code}-ent">
+        <div class="tab-panel" id="tab-${code}-ent" role="tabpanel" aria-hidden="true">
             <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Les types de données que ce domaine gère. Décrivez les informations importantes à enregistrer pour chaque type.</p>
             <div id="entList-${code}">
                 ${spec.entities.length > 0
@@ -148,7 +150,7 @@ function renderModuleSpecSection(mod) {
         </div>
 
         <!-- TAB: Droits d'accès -->
-        <div class="tab-panel" id="tab-${code}-perm">
+        <div class="tab-panel" id="tab-${code}-perm" role="tabpanel" aria-hidden="true">
             <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Définissez qui peut faire quoi dans ce domaine. Cochez les actions autorisées pour chaque profil.</p>
             <div id="permGrid-${code}">
                 ${renderPermissionGrid(code)}
@@ -182,7 +184,7 @@ function renderModuleSpecSection(mod) {
         </div>
 
         <!-- TAB: Maquettes -->
-        <div class="tab-panel" id="tab-${code}-mock">
+        <div class="tab-panel" id="tab-${code}-mock" role="tabpanel" aria-hidden="true">
             <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Maquettes validées lors de l'analyse. Ces wireframes montrent la structure exacte des écrans de ce domaine.</p>
             <div id="mockupContainer-${code}">
                 ${renderModuleMockups(code)}
@@ -190,7 +192,7 @@ function renderModuleSpecSection(mod) {
         </div>
 
         <!-- TAB: Notes -->
-        <div class="tab-panel" id="tab-${code}-notes">
+        <div class="tab-panel" id="tab-${code}-notes" role="tabpanel" aria-hidden="true">
             <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Notes libres, questions en suspens, éléments à clarifier pour ce domaine.</p>
             <div class="card">
                 <div class="editable" contenteditable="true" data-module-code="${code}" data-module-field="notes" data-placeholder="Notez ici tout ce qui concerne ce domaine : questions, précisions, contraintes particulières...">${spec.notes || ''}</div>
@@ -198,7 +200,7 @@ function renderModuleSpecSection(mod) {
         </div>
 
         <!-- TAB: Structure (sections/resources) -->
-        <div class="tab-panel" id="tab-${code}-struct">
+        <div class="tab-panel" id="tab-${code}-struct" role="tabpanel" aria-hidden="true">
             <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Organisation des écrans et ressources de ce domaine. Structure hiérarchique : sections regroupant des ressources.</p>
             <div id="structContainer-${code}">
                 ${renderModuleStructure(code)}
@@ -212,19 +214,19 @@ function renderUseCase(code, uc, index) {
         <div class="uc-item">
             <div class="uc-header">
                 <span class="uc-id">UC-${String(index + 1).padStart(3, '0')}</span>
-                <span class="uc-title">${uc.name}</span>
+                <span class="uc-title">${escapeHtml(uc.name)}</span>
                 <div class="uc-actions">
                     <button class="btn btn-sm" onclick="removeUseCase('${code}',${index})">Supprimer</button>
                 </div>
             </div>
-            <div class="uc-actors"><div class="uc-actor">${uc.actor}</div></div>
-            ${uc.steps ? `<div class="uc-detail-label">Déroulement</div><div class="uc-detail">${uc.steps.replace(/\n/g, '<br>')}</div>` : ''}
-            ${uc.alternative ? `<div class="uc-detail-label">En cas de problème</div><div class="uc-detail" style="color:var(--warning);">${uc.alternative}</div>` : ''}
+            <div class="uc-actors"><div class="uc-actor">${escapeHtml(uc.actor)}</div></div>
+            ${uc.steps ? `<div class="uc-detail-label">Déroulement</div><div class="uc-detail">${escapeHtml(uc.steps).replace(/\n/g, '<br>')}</div>` : ''}
+            ${uc.alternative ? `<div class="uc-detail-label">En cas de problème</div><div class="uc-detail" style="color:var(--warning);">${escapeHtml(uc.alternative)}</div>` : ''}
             <div style="padding:0.5rem 0.75rem;border-top:1px solid var(--border);background:var(--bg-input);border-radius:0 0 8px 8px;">
                 <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.25rem;">Commentaire / Feedback :</label>
                 <textarea class="form-textarea" placeholder="Ajouter un commentaire sur ce cas d'utilisation..."
                     onblur="updateSpecComment('${code}','uc',${index},this.value)"
-                    style="min-height:45px;font-size:0.8rem;resize:vertical;">${getSpecComment(code, 'uc', index)}</textarea>
+                    style="min-height:45px;font-size:0.8rem;resize:vertical;">${escapeHtml(getSpecComment(code, 'uc', index))}</textarea>
             </div>
         </div>`;
 }
@@ -247,6 +249,7 @@ function addUseCase(code) {
 }
 
 function removeUseCase(code, index) {
+    if (!confirm('Supprimer ce cas d\'utilisation ?')) return;
     data.moduleSpecs[code].useCases.splice(index, 1);
     renderAllModuleSpecs();
     updateCounts();
@@ -259,18 +262,18 @@ function renderBusinessRule(code, br, index) {
     return `
         <div style="margin-bottom:0.5rem;">
             <div class="br-item" style="margin-bottom:0;border-radius:8px 8px 0 0;">
-                <span class="br-category ${catColors[br.category] || 'br-cat-validation'}">${catLabels[br.category] || br.category}</span>
+                <span class="br-category ${catColors[br.category] || 'br-cat-validation'}">${escapeHtml(catLabels[br.category] || br.category)}</span>
                 <div class="br-text" style="flex:1;">
-                    <div style="font-weight:600;color:var(--text-bright);margin-bottom:0.2rem;">${br.name}</div>
-                    <div>${br.statement}</div>
-                    ${br.example ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.25rem;font-style:italic;">Exemple : ${br.example}</div>` : ''}
+                    <div style="font-weight:600;color:var(--text-bright);margin-bottom:0.2rem;">${escapeHtml(br.name)}</div>
+                    <div>${escapeHtml(br.statement)}</div>
+                    ${br.example ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.25rem;font-style:italic;">Exemple : ${escapeHtml(br.example)}</div>` : ''}
                 </div>
                 <button class="btn btn-sm" onclick="removeBusinessRule('${code}',${index})" style="opacity:0.5;flex-shrink:0;">&#10005;</button>
             </div>
             <div style="padding:0.4rem 0.75rem 0.6rem;background:var(--bg-input);border:1px solid var(--border);border-top:0;border-radius:0 0 8px 8px;">
                 <textarea class="form-textarea" placeholder="Commentaire sur cette règle..."
                     onblur="updateSpecComment('${code}','br',${index},this.value)"
-                    style="min-height:35px;font-size:0.8rem;resize:vertical;">${getSpecComment(code, 'br', index)}</textarea>
+                    style="min-height:35px;font-size:0.8rem;resize:vertical;">${escapeHtml(getSpecComment(code, 'br', index))}</textarea>
             </div>
         </div>`;
 }
@@ -292,18 +295,20 @@ function addBusinessRule(code) {
 }
 
 function removeBusinessRule(code, index) {
+    if (!confirm('Supprimer cette règle métier ?')) return;
     data.moduleSpecs[code].businessRules.splice(index, 1);
     renderAllModuleSpecs();
     autoSave();
 }
 
 function renderEntity(code, ent, index) {
+    var attrFormId = 'addAttrForm-' + code + '-' + index;
     return `
         <div class="entity-block">
             <div class="entity-header">
                 <div>
-                    <div class="entity-name">${ent.name}</div>
-                    <div class="entity-desc">${ent.description || ''}</div>
+                    <div class="entity-name">${escapeHtml(ent.name)}</div>
+                    <div class="entity-desc">${escapeHtml(ent.description || '')}</div>
                 </div>
                 <button class="btn btn-sm" onclick="removeEntity('${code}',${index})" style="opacity:0.5;">Supprimer</button>
             </div>
@@ -311,21 +316,26 @@ function renderEntity(code, ent, index) {
             <table class="attr-table">
                 <thead><tr><th>Information</th><th>Description</th></tr></thead>
                 <tbody>
-                    ${ent.attributes.map(a => `<tr><td style="font-weight:500;color:var(--text-bright);">${a.name}</td><td>${a.description || ''}</td></tr>`).join('')}
+                    ${ent.attributes.map(a => `<tr><td style="font-weight:500;color:var(--text-bright);">${escapeHtml(a.name)}</td><td>${escapeHtml(a.description || '')}</td></tr>`).join('')}
                 </tbody>
-            </table>
+            </table>` : ''}
             <div style="padding:0.3rem 0.75rem;">
-                <button class="add-btn" style="font-size:0.75rem;padding:0.4rem;" onclick="addEntityAttribute('${code}',${index})">+ Ajouter un attribut</button>
-            </div>` : ''}
+                <button class="add-btn" style="font-size:0.75rem;padding:0.4rem;" onclick="toggleForm('${attrFormId}')">+ Ajouter un attribut</button>
+                <div class="inline-form" id="${attrFormId}">
+                    <div class="form-group"><label class="form-label">Nom de l'attribut</label><input type="text" class="form-input" id="attr-name-${code}-${index}" placeholder="Nom de l'attribut"></div>
+                    <div class="form-group"><label class="form-label">Description (optionnel)</label><input type="text" class="form-input" id="attr-desc-${code}-${index}" placeholder="Description"></div>
+                    <div class="form-actions"><button class="btn" onclick="toggleForm('${attrFormId}')">Annuler</button><button class="btn btn-primary" onclick="addEntityAttribute('${code}',${index})">Ajouter</button></div>
+                </div>
+            </div>
             ${(ent.relationships || []).length > 0 ? `
             <div style="padding:0.5rem 0.75rem;font-size:0.8rem;color:var(--text-muted);border-top:1px solid var(--border);">
-                Relations : ${ent.relationships.map(r => `<span style="color:var(--accent);">${r}</span>`).join(', ')}
+                Relations : ${ent.relationships.map(r => `<span style="color:var(--accent);">${escapeHtml(typeof r === 'string' ? r : (r.target || ''))}</span>`).join(', ')}
             </div>` : ''}
             <div style="padding:0.4rem 0.75rem 0.6rem;background:var(--bg-input);border-top:1px solid var(--border);border-radius:0 0 8px 8px;">
                 <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.25rem;">Commentaire :</label>
                 <textarea class="form-textarea" placeholder="Commentaire sur cette entité..."
                     onblur="updateSpecComment('${code}','ent',${index},this.value)"
-                    style="min-height:35px;font-size:0.8rem;resize:vertical;">${getSpecComment(code, 'ent', index)}</textarea>
+                    style="min-height:35px;font-size:0.8rem;resize:vertical;">${escapeHtml(getSpecComment(code, 'ent', index))}</textarea>
             </div>
         </div>`;
 }
@@ -353,20 +363,21 @@ function addEntity(code) {
 }
 
 function removeEntity(code, index) {
+    if (!confirm('Supprimer ce type de données ?')) return;
     data.moduleSpecs[code].entities.splice(index, 1);
     renderAllModuleSpecs();
     autoSave();
 }
 
 function addEntityAttribute(code, entityIndex) {
-    var attrName = prompt('Nom de l\'attribut :');
-    if (!attrName) return;
-    var attrDesc = prompt('Description (optionnel) :') || '';
+    var attrName = document.getElementById('attr-name-' + code + '-' + entityIndex);
+    var attrDesc = document.getElementById('attr-desc-' + code + '-' + entityIndex);
+    if (!attrName || !attrName.value.trim()) return;
     if (!data.moduleSpecs[code]?.entities?.[entityIndex]) return;
     if (!data.moduleSpecs[code].entities[entityIndex].attributes) {
         data.moduleSpecs[code].entities[entityIndex].attributes = [];
     }
-    data.moduleSpecs[code].entities[entityIndex].attributes.push({ name: attrName, description: attrDesc });
+    data.moduleSpecs[code].entities[entityIndex].attributes.push({ name: attrName.value.trim(), description: (attrDesc?.value || '').trim() });
     renderAllModuleSpecs();
     autoSave();
 }
@@ -392,37 +403,6 @@ function updateWireframeComment(code, screen, value) {
     autoSave();
 }
 
-function renderModuleMockups(code) {
-    var spec = data.moduleSpecs[code] || {};
-    var screens = spec.screens || [];
-    var wireframes = EMBEDDED_ARTIFACTS?.wireframes?.[code] || [];
-
-    // Priority 1: HTML mockups from screens[] specs
-    if (screens.length > 0) {
-        var html = '';
-        if (typeof renderScreenMockups === 'function') {
-            html = renderScreenMockups(code);
-        }
-        // Also show wireframes below if available
-        if (wireframes.length > 0) {
-            html += '<h3 style="color:var(--text-bright);font-size:1rem;margin:2rem 0 1rem;">Wireframes</h3>';
-            html += wireframes.map(function(wf, i) { return renderWireframeMockup(code, wf, i); }).join('');
-        }
-        return html;
-    }
-
-    // Priority 2: Wireframes from EMBEDDED_ARTIFACTS
-    if (wireframes.length === 0) {
-        return `
-            <div class="card" style="text-align:center;padding:2rem;color:var(--text-muted);">
-                <p>Aucune maquette disponible pour ce module.</p>
-                <p style="font-size:0.85rem;margin-top:0.5rem;">Les maquettes seront générées lors de la spécification détaillée.</p>
-            </div>`;
-    }
-
-    return wireframes.map(function(wf, i) { return renderWireframeMockup(code, wf, i); }).join('');
-}
-
 function renderWireframeMockup(code, wf, i) {
     const hasSvg = !!wf.svgContent;
     const wireframeId = `wf-${code}-${i}`;
@@ -433,7 +413,7 @@ function renderWireframeMockup(code, wf, i) {
             <div class="mockup-dot mockup-dot-red"></div>
             <div class="mockup-dot mockup-dot-yellow"></div>
             <div class="mockup-dot mockup-dot-green"></div>
-            <span class="mockup-title">${wf.screen || wf.section}</span>
+            <span class="mockup-title">${escapeHtml(wf.screen || wf.section)}</span>
             ${hasSvg ? `
             <div class="wireframe-toggle">
                 <button class="wireframe-toggle-btn active" data-target="${wireframeId}" data-view="svg" onclick="toggleWireframeView('${wireframeId}', 'svg')">SVG</button>
@@ -450,11 +430,11 @@ function renderWireframeMockup(code, wf, i) {
         </div>
         ${wf.description ? `
         <div class="wireframe-description">
-            <strong>Description:</strong> ${wf.description}
+            <strong>Description:</strong> ${escapeHtml(wf.description)}
         </div>` : ''}
         ${(wf.elements || []).length > 0 ? `
         <div class="wireframe-metadata">
-            <div><strong>Elements:</strong> ${wf.elements.map(e => typeof e === 'string' ? e : (e.type || e.label || e.id || '')).filter(Boolean).join(', ')}</div>
+            <div><strong>Elements:</strong> ${wf.elements.map(e => escapeHtml(typeof e === 'string' ? e : (e.type || e.label || e.id || ''))).filter(Boolean).join(', ')}</div>
         </div>` : ''}
         ${(() => {
             const cm = wf.componentMapping;
@@ -468,7 +448,7 @@ function renderWireframeMockup(code, wf, i) {
                 <thead><tr><th>Élément maquette</th><th>Composant React</th></tr></thead>
                 <tbody>
                     ${mappings.map(m =>
-                        '<tr><td>' + (m.wireframeElement || '') + '</td><td><code>' + (m.reactComponent || '') + '</code></td></tr>'
+                        '<tr><td>' + escapeHtml(m.wireframeElement || '') + '</td><td><code>' + escapeHtml(m.reactComponent || '') + '</code></td></tr>'
                     ).join('')}
                 </tbody>
             </table>
@@ -543,12 +523,12 @@ function renderPermissionGrid(code) {
         <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
             <thead><tr>
                 <th>Profil</th>
-                ${actions.map((a, i) => `<th style="text-align:center;">${a}${i >= baseActionsCount ? ' <span onclick="removeCustomAction('+`'${code}','${a}'`+')" style="cursor:pointer;color:var(--danger);font-size:0.7rem;" title="Supprimer cette action">&#10005;</span>' : ''}</th>`).join('')}
+                ${actions.map((a, i) => `<th style="text-align:center;">${escapeHtml(a)}${i >= baseActionsCount ? ' <span onclick="removeCustomAction('+`'${code}','${a}'`+')" style="cursor:pointer;color:var(--danger);font-size:0.7rem;" title="Supprimer cette action">&#10005;</span>' : ''}</th>`).join('')}
             </tr></thead>
             <tbody>
                 ${roles.map((role, ri) => `
                     <tr>
-                        <td style="font-weight:500;color:var(--text-bright);">${role}${ri >= baseRolesCount ? ' <span onclick="removeCustomRole('+`'${code}','${role}'`+')" style="cursor:pointer;color:var(--danger);font-size:0.7rem;" title="Supprimer ce rôle">&#10005;</span>' : ''}</td>
+                        <td style="font-weight:500;color:var(--text-bright);">${escapeHtml(role)}${ri >= baseRolesCount ? ' <span onclick="removeCustomRole('+`'${code}','${role}'`+')" style="cursor:pointer;color:var(--danger);font-size:0.7rem;" title="Supprimer ce rôle">&#10005;</span>' : ''}</td>
                         ${actions.map(action => {
                             const key = role + '|' + action;
                             const wildcardKey = role + '|*';
@@ -642,24 +622,52 @@ function renderModuleStructure(code) {
 
     return sections.map(function(section) {
         var resources = section.resources || [];
+        var sectionUCs = section.useCases || [];
+        var sectionBRs = section.businessRules || [];
         var html = '<div class="struct-section">';
         html += '<div class="struct-section-header">';
-        html += '<span class="struct-section-code">' + (section.code || section.name || '') + '</span>';
+        html += '<span class="struct-section-code">' + escapeHtml(section.code || section.name || '') + '</span>';
         if (section.description) {
-            html += '<span class="struct-section-desc">' + section.description + '</span>';
+            html += '<span class="struct-section-desc">' + escapeHtml(section.description) + '</span>';
         }
         html += '<span class="struct-section-badge">' + resources.length + ' ressource' + (resources.length !== 1 ? 's' : '') + '</span>';
         html += '</div>';
 
+        // Section metadata (route, permission)
+        if (section.route || section.permission) {
+            html += '<div style="padding:0.4rem 1rem;font-size:0.75rem;color:var(--text-muted);display:flex;gap:1rem;border-bottom:1px solid var(--border);">';
+            if (section.route) html += '<span>Route: <code style="color:var(--accent);background:var(--bg-input);padding:0.1rem 0.3rem;border-radius:3px;">' + escapeHtml(section.route) + '</code></span>';
+            if (section.permission) html += '<span>Permission: <code style="color:var(--accent);background:var(--bg-input);padding:0.1rem 0.3rem;border-radius:3px;">' + escapeHtml(section.permission) + '</code></span>';
+            html += '</div>';
+        }
+
+        // Section-level UC summary
+        if (sectionUCs.length > 0) {
+            html += '<div style="padding:0.4rem 1rem;font-size:0.8rem;border-bottom:1px solid var(--border);">';
+            html += '<span style="color:var(--text-muted);font-weight:500;">' + sectionUCs.length + ' cas d\'utilisation :</span> ';
+            html += sectionUCs.map(function(uc) { return '<span style="color:var(--text-bright);">' + escapeHtml(uc.name || '') + '</span>'; }).join(', ');
+            html += '</div>';
+        }
+
+        // Section-level BR summary
+        if (sectionBRs.length > 0) {
+            html += '<div style="padding:0.4rem 1rem;font-size:0.8rem;border-bottom:1px solid var(--border);">';
+            html += '<span style="color:var(--text-muted);font-weight:500;">' + sectionBRs.length + ' règle' + (sectionBRs.length > 1 ? 's' : '') + ' métier :</span> ';
+            html += sectionBRs.map(function(br) { return '<span style="color:var(--text-bright);">' + escapeHtml(br.name || '') + '</span>'; }).join(', ');
+            html += '</div>';
+        }
+
         if (resources.length > 0) {
             html += '<div class="struct-resources">';
             resources.forEach(function(res) {
                 var resName = typeof res === 'string' ? res : (res.code || res.name || '');
+                var resType = typeof res === 'object' ? (res.type || '') : '';
                 var resDesc = typeof res === 'object' ? (res.description || '') : '';
                 html += '<div class="struct-resource">';
                 html += '<span class="struct-resource-icon">&#8226;</span>';
-                html += '<span class="struct-resource-name">' + resName + '</span>';
-                if (resDesc) html += '<span class="struct-resource-desc">' + resDesc + '</span>';
+                html += '<span class="struct-resource-name">' + escapeHtml(resName) + '</span>';
+                if (resType) html += '<span style="font-size:0.7rem;color:var(--accent);background:rgba(6,182,212,0.1);padding:0.1rem 0.3rem;border-radius:3px;">' + escapeHtml(resType) + '</span>';
+                if (resDesc) html += '<span class="struct-resource-desc">' + escapeHtml(resDesc) + '</span>';
                 html += '</div>';
             });
             html += '</div>';
@@ -670,14 +678,109 @@ function renderModuleStructure(code) {
     }).join('');
 }
 
+/* ---------- Section-Grouped Rendering (Hierarchical Mode) ---------- */
+
+function renderSectionGroupedItems(mod, itemsKey, code, renderFn) {
+    var sections = mod.anticipatedSections || [];
+    var html = '';
+    sections.forEach(function(section) {
+        var items = section[itemsKey] || [];
+        if (items.length === 0) return;
+        html += '<div class="section-group">';
+        html += '<div class="section-group-header">';
+        html += '<span class="section-group-icon">&#9655;</span> ';
+        html += '<span class="section-group-label">' + escapeHtml(section.code || section.name || '') + '</span>';
+        if (section.route) html += '<span class="section-group-route">' + escapeHtml(section.route) + '</span>';
+        html += '<span class="nav-badge">' + items.length + '</span>';
+        html += '</div>';
+        html += items.map(function(item, i) { return renderFn(code, item, i); }).join('');
+        html += '</div>';
+    });
+    return html;
+}
+
+function renderModuleMockups(code) {
+    var spec = data.moduleSpecs[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 || []) : [];
+
+    // Priority 1: HTML mockups from screens[] specs
+    if (screens.length > 0) {
+        var html = '';
+        if (typeof renderScreenMockups === 'function') {
+            html = renderScreenMockups(code);
+        }
+        if (wireframes.length > 0) {
+            html += '<h3 style="color:var(--text-bright);font-size:1rem;margin:2rem 0 1rem;">Wireframes</h3>';
+            html += wireframes.map(function(wf, i) { return renderWireframeMockup(code, wf, i); }).join('');
+        }
+        return html;
+    }
+
+    // Priority 2: Wireframes grouped by section (if sections exist)
+    if (wireframes.length > 0 && sections.length > 1) {
+        var grouped = {};
+        var ungrouped = [];
+        wireframes.forEach(function(wf, i) {
+            var sectionCode = wf.section || wf.sectionCode || '';
+            var matchingSection = sections.find(function(s) { return s.code === sectionCode; });
+            if (matchingSection) {
+                if (!grouped[sectionCode]) grouped[sectionCode] = { section: matchingSection, items: [] };
+                grouped[sectionCode].items.push({ wf: wf, index: i });
+            } else {
+                ungrouped.push({ wf: wf, index: i });
+            }
+        });
+
+        var html = '';
+        Object.keys(grouped).forEach(function(sectionCode) {
+            var group = grouped[sectionCode];
+            html += '<div class="section-group">';
+            html += '<div class="section-group-header">';
+            html += '<span class="section-group-icon">&#9655;</span> ';
+            html += '<span class="section-group-label">' + escapeHtml(group.section.code || '') + '</span>';
+            html += '<span class="nav-badge">' + group.items.length + '</span>';
+            html += '</div>';
+            group.items.forEach(function(item) {
+                html += renderWireframeMockup(code, item.wf, item.index);
+            });
+            html += '</div>';
+        });
+        ungrouped.forEach(function(item) {
+            html += renderWireframeMockup(code, item.wf, item.index);
+        });
+        return html;
+    }
+
+    // Priority 3: Flat wireframe list
+    if (wireframes.length === 0) {
+        return '<div class="card" style="text-align:center;padding:2rem;color:var(--text-muted);"><p>Aucune maquette disponible pour ce module.</p><p style="font-size:0.85rem;margin-top:0.5rem;">Les maquettes seront générées lors de la spécification détaillée.</p></div>';
+    }
+    return wireframes.map(function(wf, i) { return renderWireframeMockup(code, wf, i); }).join('');
+}
+
 function switchTab(code, tabId) {
     const section = document.getElementById('module-spec-' + code);
     if (!section) return;
-    section.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
-    section.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
+    section.querySelectorAll('.tab-btn').forEach(function(btn) {
+        btn.classList.remove('active');
+        btn.setAttribute('aria-selected', 'false');
+    });
+    section.querySelectorAll('.tab-panel').forEach(function(panel) {
+        panel.classList.remove('active');
+        panel.setAttribute('aria-hidden', 'true');
+    });
     const targetPanel = document.getElementById('tab-' + code + '-' + tabId);
-    if (targetPanel) targetPanel.classList.add('active');
+    if (targetPanel) {
+        targetPanel.classList.add('active');
+        targetPanel.setAttribute('aria-hidden', 'false');
+    }
     const buttons = section.querySelectorAll('.tab-btn');
     const tabIndex = { uc: 0, br: 1, ent: 2, perm: 3, mock: 4, notes: 5, struct: 6 }[tabId];
-    if (buttons[tabIndex]) buttons[tabIndex].classList.add('active');
+    if (buttons[tabIndex]) {
+        buttons[tabIndex].classList.add('active');
+        buttons[tabIndex].setAttribute('aria-selected', 'true');
+    }
 }

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/06-render-consolidation.js

@@ -53,7 +53,7 @@ function renderDataModel() {
 
         html += `<div class="dm-module-group">`;
         html += `<div class="dm-module-header">
-            <span class="dm-module-name">${m.name || m.code}</span>
+            <span class="dm-module-name">${escapeHtml(m.name || m.code)}</span>
             <span class="dm-module-count">${entities.length} entité${entities.length > 1 ? 's' : ''}</span>
         </div>`;
 
@@ -64,15 +64,15 @@ function renderDataModel() {
             html += `
                 <div class="dm-entity-card">
                     <div class="dm-entity-header">
-                        <span class="dm-entity-name">${ent.name}</span>
+                        <span class="dm-entity-name">${escapeHtml(ent.name)}</span>
                         <span class="dm-entity-attr-count">${attrs.length} champ${attrs.length > 1 ? 's' : ''}</span>
                     </div>
-                    ${ent.description ? `<div class="dm-entity-desc">${ent.description}</div>` : ''}
+                    ${ent.description ? `<div class="dm-entity-desc">${escapeHtml(ent.description)}</div>` : ''}
                     ${attrs.length > 0 ? `
                     <table class="dm-attr-table">
                         <thead><tr><th>Champ</th><th>Description</th></tr></thead>
                         <tbody>
-                            ${attrs.map(a => `<tr><td class="dm-attr-name">${a.name}</td><td class="dm-attr-desc">${a.description || ''}</td></tr>`).join('')}
+                            ${attrs.map(a => `<tr><td class="dm-attr-name">${escapeHtml(a.name)}</td><td class="dm-attr-desc">${escapeHtml(a.description || '')}</td></tr>`).join('')}
                         </tbody>
                     </table>` : ''}
                     ${rels.length > 0 ? `
@@ -80,7 +80,7 @@ function renderDataModel() {
                         <div class="dm-relations-title">Relations</div>
                         ${rels.map(r => {
                             const relText = typeof r === 'string' ? r : (r.target + ' (' + r.type + ') - ' + (r.description || ''));
-                            return `<div class="dm-relation-item">${relText}</div>`;
+                            return `<div class="dm-relation-item">${escapeHtml(relText)}</div>`;
                         }).join('')}
                     </div>` : ''}
                 </div>`;
@@ -100,11 +100,11 @@ function renderConsolInteractions() {
         const toName = data.modules.find(m => m.code === d.to)?.name || d.to;
         return `
             <div class="interaction-item">
-                <span style="font-weight:600;color:var(--text-bright);">${fromName}</span>
+                <span style="font-weight:600;color:var(--text-bright);">${escapeHtml(fromName)}</span>
                 <span class="interaction-arrow">&#8594;</span>
-                <span style="font-weight:600;color:var(--text-bright);">${toName}</span>
+                <span style="font-weight:600;color:var(--text-bright);">${escapeHtml(toName)}</span>
                 <span class="interaction-type">Dépendance</span>
-                <span style="flex:1;font-size:0.8rem;color:var(--text-muted);">${d.description || ''}</span>
+                <span style="flex:1;font-size:0.8rem;color:var(--text-muted);">${escapeHtml(d.description || '')}</span>
             </div>`;
     }).join('');
 }
@@ -117,11 +117,11 @@ function renderConsolPermissions() {
 
     let html = '<table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">';
     html += '<thead><tr><th>Profil</th>';
-    data.modules.forEach(m => { html += `<th style="text-align:center;">${m.name || m.code}</th>`; });
+    data.modules.forEach(m => { html += `<th style="text-align:center;">${escapeHtml(m.name || m.code)}</th>`; });
     html += '</tr></thead><tbody>';
 
     roles.forEach(role => {
-        html += `<tr><td style="font-weight:500;color:var(--text-bright);">${role}</td>`;
+        html += `<tr><td style="font-weight:500;color:var(--text-bright);">${escapeHtml(role)}</td>`;
         data.modules.forEach(m => {
             const allPerms = data.moduleSpecs[m.code]?.permissions || [];
             const hasWildcard = allPerms.includes(role + '|*');
@@ -165,6 +165,7 @@ function addE2EFlow() {
 }
 
 function removeE2EFlow(index) {
+    if (!confirm('Supprimer ce parcours bout en bout ?')) return;
     data.consolidation.e2eFlows.splice(index, 1);
     renderE2EFlows();
     autoSave();
@@ -177,15 +178,15 @@ function renderE2EFlows() {
     container.innerHTML = data.consolidation.e2eFlows.map((flow, fi) => `
         <div class="card" style="margin-bottom:1rem;">
             <div class="card-header">
-                <span class="card-title">${flow.name}</span>
+                <span class="card-title">${escapeHtml(flow.name)}</span>
                 <button class="btn btn-sm" onclick="removeE2EFlow(${fi})" style="opacity:0.5;">Supprimer</button>
             </div>
-            ${flow.actors ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.5rem;">Intervenants : ${flow.actors}</div>` : ''}
+            ${flow.actors ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.5rem;">Intervenants : ${escapeHtml(flow.actors)}</div>` : ''}
             <div class="e2e-flow">
                 ${flow.steps.map((s, i) => `
                     <div class="e2e-step">
-                        <div class="e2e-step-module">${s.module}</div>
-                        <div class="e2e-step-action">${s.action}</div>
+                        <div class="e2e-step-module">${escapeHtml(s.module)}</div>
+                        <div class="e2e-step-action">${escapeHtml(s.action)}</div>
                     </div>
                     ${i < flow.steps.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
                 `).join('')}