@atlashub/smartstack-cli 4.75.0 → 4.76.0

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

@@ -2646,6 +2646,70 @@ data.moduleSpecs = data.moduleSpecs || {};
     });
 });
 
+// Normalize permissions: convert any object format to "Role|Action" pipe-delimited strings
+// Handles 5 formats:
+// A: "Role|Action" strings (already correct)
+// B: {role, permissions: ["Read:all", ...]} with role-permission pairs
+// C: {role, permissions: ["Module.Entity.Read", ...]} with path-based permissions
+// D: {code, label, description} permission definitions without role assignment
+// E: {role: "", permissions: []} empty entries (skip)
+(data.modules || []).forEach(function(m) {
+    var spec = data.moduleSpecs[m.code];
+    if (!spec || !spec.permissions || spec.permissions.length === 0) return;
+    // Skip if already normalized (first element is a pipe-delimited string)
+    if (typeof spec.permissions[0] === 'string' && spec.permissions[0].indexOf('|') !== -1) return;
+    if (typeof spec.permissions[0] !== 'object') return;
+
+    var actionMap = {
+        'read': 'Consulter', 'create': 'Créer', 'update': 'Modifier',
+        'delete': 'Supprimer', 'approve': 'Valider', 'validate': 'Valider',
+        'export': 'Exporter', 'admin': 'Administrer', 'import': 'Importer',
+        'viewsalary': 'Consulter', 'assignteam': 'Modifier', 'cancel': 'Supprimer',
+        'viewbalance': 'Consulter', 'invoicetime': 'Valider'
+    };
+    var normalized = [];
+    var first = spec.permissions[0];
+
+    // Detect Format D: {code, label, description} — permission codes without roles
+    if (first.code && !first.role && !first.permissions) {
+        // Extract actions from permission codes, assign to stakeholder roles
+        var roles = (data.cadrage.stakeholders || []).map(function(s) { return s.role; }).filter(Boolean);
+        if (roles.length === 0) roles = ['Administrateur', 'Responsable', 'Contributeur', 'Lecteur'];
+        spec.permissions.forEach(function(permDef) {
+            var code = permDef.code || '';
+            var raw = code.split('.').pop(); // "Module.Entity.Read" → "Read"
+            var action = actionMap[raw.toLowerCase()] || raw;
+            // Assign to first role (admin) by default — better than empty
+            if (roles[0]) {
+                var key = roles[0] + '|' + action;
+                if (normalized.indexOf(key) === -1) normalized.push(key);
+            }
+        });
+    } else {
+        // Format B/C: {role, permissions: [...]}
+        spec.permissions.forEach(function(entry) {
+            var role = entry.role || entry.name || '';
+            if (!role) return; // Skip Format E (empty role)
+            var perms = entry.permissions || entry.actions || [];
+            if (perms.length === 0 && entry.permissionPattern && entry.permissionPattern.endsWith('*')) {
+                ['Consulter', 'Créer', 'Modifier', 'Supprimer', 'Valider', 'Exporter'].forEach(function(a) {
+                    normalized.push(role + '|' + a);
+                });
+                return;
+            }
+            perms.forEach(function(perm) {
+                if (typeof perm !== 'string') return;
+                var raw = perm.split(':')[0]; // "Read:all" → "Read"
+                if (raw.indexOf('.') !== -1) raw = raw.split('.').pop(); // "Module.Entity.Read" → "Read"
+                var action = actionMap[raw.toLowerCase()] || raw;
+                var key = role + '|' + action;
+                if (normalized.indexOf(key) === -1) normalized.push(key);
+            });
+        });
+    }
+    spec.permissions = normalized;
+});
+
 // Detect if modules use section-level specs (hierarchical mode)
 function hasHierarchicalSpecs(mod) {
     return (mod.anticipatedSections || []).some(function(s) {
@@ -3693,6 +3757,11 @@ function renderModuleSpecSection(mod) {
 }
 
 function renderUseCase(code, uc, index) {
+    var preconditions = uc.preconditions || [];
+    var postconditions = uc.postconditions || [];
+    var errorScenarios = uc.errorScenarios || [];
+    var description = uc.description || '';
+
     return `
         <div class="uc-item">
             <div class="uc-header">
@@ -3703,8 +3772,12 @@ function renderUseCase(code, uc, index) {
                 </div>
             </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>` : ''}
+            ${description ? `<div class="uc-detail-label">Description</div><div class="uc-detail" style="font-style:italic;color:var(--text-muted);">${escapeHtml(description)}</div>` : ''}
+            ${preconditions.length > 0 ? `<div class="uc-detail-label">Préconditions</div><div class="uc-detail"><ul style="margin:0;padding-left:1.2rem;">${preconditions.map(p => '<li>' + escapeHtml(typeof p === 'string' ? p : p.description || '') + '</li>').join('')}</ul></div>` : ''}
+            ${uc.steps ? `<div class="uc-detail-label">Déroulement principal</div><div class="uc-detail">${escapeHtml(uc.steps).replace(/\n/g, '<br>')}</div>` : ''}
+            ${uc.alternative ? `<div class="uc-detail-label">Scénarios alternatifs</div><div class="uc-detail" style="color:var(--warning);">${escapeHtml(uc.alternative)}</div>` : ''}
+            ${errorScenarios.length > 0 ? `<div class="uc-detail-label">Scénarios d'erreur</div><div class="uc-detail" style="color:var(--danger);"><ul style="margin:0;padding-left:1.2rem;">${errorScenarios.map(e => '<li><strong>' + escapeHtml(typeof e === 'string' ? e : e.name || '') + '</strong>' + (typeof e === 'object' && e.steps ? ' : ' + escapeHtml(Array.isArray(e.steps) ? e.steps.join(', ') : e.steps) : '') + '</li>').join('')}</ul></div>` : ''}
+            ${postconditions.length > 0 ? `<div class="uc-detail-label">Postconditions</div><div class="uc-detail"><ul style="margin:0;padding-left:1.2rem;">${postconditions.map(p => '<li>' + escapeHtml(typeof p === 'string' ? p : p.description || '') + '</li>').join('')}</ul></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..."
@@ -3797,15 +3870,16 @@ function renderEntity(code, ent, index) {
             </div>
             ${(ent.attributes || []).length > 0 ? `
             <table class="attr-table">
-                <thead><tr><th>Information</th><th>Description</th></tr></thead>
+                <thead><tr><th>Information</th><th style="width:100px;">Type</th><th>Description</th></tr></thead>
                 <tbody>
-                    ${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('')}
+                    ${ent.attributes.map(a => `<tr><td style="font-weight:500;color:var(--text-bright);">${escapeHtml(a.name)}</td><td style="font-family:monospace;font-size:0.8rem;color:var(--accent);">${escapeHtml(a.type || 'string')}</td><td>${escapeHtml(a.description || '')}</td></tr>`).join('')}
                 </tbody>
             </table>` : ''}
             <div style="padding:0.3rem 0.75rem;">
                 <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">Type</label><input type="text" class="form-input" id="attr-type-${code}-${index}" placeholder="string, guid, int, decimal, date, enum, boolean" value="string"></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>
@@ -3830,7 +3904,7 @@ function addEntity(code) {
 
     const attrs = document.getElementById('ent-attrs-' + code).value.split('\n').filter(l => l.trim()).map(l => {
         const parts = l.split(' - ');
-        return { name: parts[0]?.trim() || l.trim(), description: parts.slice(1).join(' - ').trim() };
+        return { name: parts[0]?.trim() || l.trim(), type: parts[1]?.trim() || 'string', description: parts.slice(2).join(' - ').trim() || parts.slice(1).join(' - ').trim() };
     });
     const rels = document.getElementById('ent-rels-' + code).value.split('\n').filter(l => l.trim());
 
@@ -3854,13 +3928,14 @@ function removeEntity(code, index) {
 
 function addEntityAttribute(code, entityIndex) {
     var attrName = document.getElementById('attr-name-' + code + '-' + entityIndex);
+    var attrType = document.getElementById('attr-type-' + 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.value.trim(), description: (attrDesc?.value || '').trim() });
+    data.moduleSpecs[code].entities[entityIndex].attributes.push({ name: attrName.value.trim(), type: (attrType?.value || 'string').trim(), description: (attrDesc?.value || '').trim() });
     renderAllModuleSpecs();
     autoSave();
 }
@@ -3971,13 +4046,68 @@ function toggleWireframeView(wireframeId, view) {
     }
 }
 
+// Normalize permissions array: handles 3 formats:
+// Format 1 (string): "Role|Action" → already correct
+// Format 2 (object): {role, permissions: ["Read:all", "Create:all", ...]}
+// Format 3 (object): {role, permissions: ["Module.Entity.Read", ...]}
+function normalizePermissions(permsArray) {
+    if (!permsArray || permsArray.length === 0) return [];
+    // If first element is a string with '|', already normalized
+    if (typeof permsArray[0] === 'string' && permsArray[0].includes('|')) return permsArray;
+    // If first element is a string without '|', return as-is (unknown format)
+    if (typeof permsArray[0] === 'string') return permsArray;
+    // Format 2/3: objects with {role, permissions[]}
+    const actionMap = {
+        'read': 'Consulter', 'create': 'Créer', 'update': 'Modifier',
+        'delete': 'Supprimer', 'approve': 'Valider', 'validate': 'Valider',
+        'export': 'Exporter', 'admin': 'Administrer', 'import': 'Importer',
+        'viewsalary': 'Consulter', 'assignteam': 'Modifier', 'cancel': 'Supprimer'
+    };
+    const normalized = [];
+    permsArray.forEach(function(entry) {
+        if (typeof entry !== 'object' || !entry) return;
+        var role = entry.role || entry.name || '';
+        if (!role) return;
+        var perms = entry.permissions || entry.actions || [];
+        if (perms.length === 0 && entry.permissionPattern && entry.permissionPattern.endsWith('*')) {
+            // Wildcard: expand to all standard actions
+            ['Consulter', 'Créer', 'Modifier', 'Supprimer', 'Valider', 'Exporter'].forEach(function(a) {
+                normalized.push(role + '|' + a);
+            });
+            return;
+        }
+        perms.forEach(function(perm) {
+            var action = '';
+            if (typeof perm === 'string') {
+                // "Read:all" → extract "Read"
+                var raw = perm.split(':')[0];
+                // "Module.Entity.Read" → extract "Read"
+                if (raw.includes('.')) raw = raw.split('.').pop();
+                action = actionMap[raw.toLowerCase()] || raw;
+            }
+            if (action) {
+                var key = role + '|' + action;
+                if (normalized.indexOf(key) === -1) normalized.push(key);
+            }
+        });
+    });
+    return normalized;
+}
+
 function getPermRoles() {
-    // Extract roles from actual permission data (handles English role names from JSON data)
+    // Extract roles from actual permission data (handles multiple formats)
     const rolesFromPerms = [];
     const seen = new Set();
     data.modules.forEach(m => {
-        (data.moduleSpecs[m.code]?.permissions || []).forEach(p => {
-            const role = p.split('|')[0];
+        var perms = data.moduleSpecs[m.code]?.permissions || [];
+        // Handle object format directly for role extraction
+        perms.forEach(p => {
+            var role = '';
+            if (typeof p === 'string') {
+                role = p.split('|')[0];
+            } else if (typeof p === 'object' && p) {
+                role = p.role || p.name || '';
+            }
             if (role && !seen.has(role)) { seen.add(role); rolesFromPerms.push(role); }
         });
     });
@@ -4000,7 +4130,9 @@ function renderPermissionGrid(code) {
     const baseRolesCount = roles.length - (data.customRoles || []).length;
     const baseActionsCount = 6;
 
-    const perms = data.moduleSpecs[code]?.permissions || [];
+    // Normalize permissions to "Role|Action" format (handles object and string formats)
+    const rawPerms = data.moduleSpecs[code]?.permissions || [];
+    const perms = normalizePermissions(rawPerms);
 
     return `
         <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
@@ -4205,7 +4337,8 @@ function renderModuleMockups(code) {
     }) : [];
 
     // Priority 1: HTML mockups from screens[] specs (wireframes NOT shown when screens exist)
-    if (screens.length > 0) {
+    var hasResources = screens.some(function(s) { return (s.resources || []).length > 0; });
+    if (screens.length > 0 && hasResources) {
         var html = '';
         if (typeof renderScreenMockups === 'function') {
             html = renderScreenMockups(code);
@@ -4353,9 +4486,9 @@ function renderDataModel() {
                     ${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>
+                        <thead><tr><th>Champ</th><th style="width:100px;">Type</th><th>Description</th></tr></thead>
                         <tbody>
-                            ${attrs.map(a => `<tr><td class="dm-attr-name">${escapeHtml(a.name)}</td><td class="dm-attr-desc">${escapeHtml(a.description || '')}</td></tr>`).join('')}
+                            ${attrs.map(a => `<tr><td class="dm-attr-name">${escapeHtml(a.name)}</td><td style="font-family:monospace;font-size:0.8rem;color:var(--accent);">${escapeHtml(a.type || 'string')}</td><td class="dm-attr-desc">${escapeHtml(a.description || '')}</td></tr>`).join('')}
                         </tbody>
                     </table>` : ''}
                     ${rels.length > 0 ? `
@@ -4495,13 +4628,16 @@ function renderScreenMockups(code) {
 
     return screens.map(function(screen, si) {
         var resources = screen.resources || [];
+        var content = resources.length > 0
+            ? resources.map(function(res, ri) {
+                return renderResourceMockup(code, screen.sectionCode, res, ri);
+            }).join('')
+            : '<div class="card" style="padding:1.5rem;color:var(--text-muted);text-align:center;"><p>Maquette en attente de spécification pour cette section.</p></div>';
         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>' +
-            resources.map(function(res, ri) {
-                return renderResourceMockup(code, screen.sectionCode, res, ri);
-            }).join('') +
+            content +
         '</div>';
     }).join('');
 }
@@ -5856,6 +5992,24 @@ function renderMermaidDiagrams() {
         }
     }
 
+    // 1b. MCD (Modèle Conceptuel de Données) — after ERD
+    if (diagrams.mcd) {
+        var erdContainer = document.getElementById('dataModelContainer');
+        if (erdContainer) {
+            var mcdDiv = document.createElement('div');
+            mcdDiv.className = 'diagram-container diagram-mcd';
+            mcdDiv.innerHTML =
+                '<div class="diagram-section-header" style="font-size:0.95rem;font-weight:600;color:var(--text-bright);margin-bottom:0.75rem;">Mod\u00e8le Conceptuel de Donn\u00e9es (MCD)</div>' +
+                '<div class="mermaid">' + escapeHtml(diagrams.mcd) + '</div>';
+            var erdDiv = erdContainer.querySelector('.diagram-erd');
+            if (erdDiv && erdDiv.nextSibling) {
+                erdContainer.insertBefore(mcdDiv, erdDiv.nextSibling);
+            } else {
+                erdContainer.appendChild(mcdDiv);
+            }
+        }
+    }
+
     // 2. State machine diagrams — inject in module spec sections or consol-datamodel
     if (diagrams.stateMachines && Object.keys(diagrams.stateMachines).length > 0) {
         const smContainer = document.getElementById('dataModelContainer');
@@ -5878,6 +6032,34 @@ function renderMermaidDiagrams() {
         }
     }
 
+    // 2b. Use Case diagrams — inject in each module's UC tab
+    if (diagrams.useCases && Object.keys(diagrams.useCases).length > 0) {
+        Object.entries(diagrams.useCases).forEach(function(entry) {
+            var moduleCode = entry[0];
+            var def = entry[1];
+            var ucTab = document.getElementById('tab-' + moduleCode + '-uc');
+            if (!ucTab) {
+                // Try kebab-case version
+                var kebab = moduleCode.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+                ucTab = document.getElementById('tab-' + kebab + '-uc');
+            }
+            if (ucTab) {
+                var ucDiagramDiv = document.createElement('div');
+                ucDiagramDiv.className = 'diagram-container diagram-usecase';
+                ucDiagramDiv.innerHTML =
+                    '<div class="diagram-section-header" style="font-size:0.95rem;font-weight:600;color:var(--text-bright);margin-bottom:0.75rem;">Diagramme de cas d\'utilisation</div>' +
+                    '<div class="mermaid">' + escapeHtml(def) + '</div>';
+                // Insert after the first paragraph (description text)
+                var firstP = ucTab.querySelector('p');
+                if (firstP && firstP.nextSibling) {
+                    ucTab.insertBefore(ucDiagramDiv, firstP.nextSibling);
+                } else {
+                    ucTab.insertBefore(ucDiagramDiv, ucTab.firstChild);
+                }
+            }
+        });
+    }
+
     // 3. Sequence diagrams in consol-flows
     if (diagrams.sequences && Object.keys(diagrams.sequences).length > 0) {
         var flowsContainer = document.getElementById('consolFlowsContainer');

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

@@ -105,6 +105,70 @@ data.moduleSpecs = data.moduleSpecs || {};
     });
 });
 
+// Normalize permissions: convert any object format to "Role|Action" pipe-delimited strings
+// Handles 5 formats:
+// A: "Role|Action" strings (already correct)
+// B: {role, permissions: ["Read:all", ...]} with role-permission pairs
+// C: {role, permissions: ["Module.Entity.Read", ...]} with path-based permissions
+// D: {code, label, description} permission definitions without role assignment
+// E: {role: "", permissions: []} empty entries (skip)
+(data.modules || []).forEach(function(m) {
+    var spec = data.moduleSpecs[m.code];
+    if (!spec || !spec.permissions || spec.permissions.length === 0) return;
+    // Skip if already normalized (first element is a pipe-delimited string)
+    if (typeof spec.permissions[0] === 'string' && spec.permissions[0].indexOf('|') !== -1) return;
+    if (typeof spec.permissions[0] !== 'object') return;
+
+    var actionMap = {
+        'read': 'Consulter', 'create': 'Créer', 'update': 'Modifier',
+        'delete': 'Supprimer', 'approve': 'Valider', 'validate': 'Valider',
+        'export': 'Exporter', 'admin': 'Administrer', 'import': 'Importer',
+        'viewsalary': 'Consulter', 'assignteam': 'Modifier', 'cancel': 'Supprimer',
+        'viewbalance': 'Consulter', 'invoicetime': 'Valider'
+    };
+    var normalized = [];
+    var first = spec.permissions[0];
+
+    // Detect Format D: {code, label, description} — permission codes without roles
+    if (first.code && !first.role && !first.permissions) {
+        // Extract actions from permission codes, assign to stakeholder roles
+        var roles = (data.cadrage.stakeholders || []).map(function(s) { return s.role; }).filter(Boolean);
+        if (roles.length === 0) roles = ['Administrateur', 'Responsable', 'Contributeur', 'Lecteur'];
+        spec.permissions.forEach(function(permDef) {
+            var code = permDef.code || '';
+            var raw = code.split('.').pop(); // "Module.Entity.Read" → "Read"
+            var action = actionMap[raw.toLowerCase()] || raw;
+            // Assign to first role (admin) by default — better than empty
+            if (roles[0]) {
+                var key = roles[0] + '|' + action;
+                if (normalized.indexOf(key) === -1) normalized.push(key);
+            }
+        });
+    } else {
+        // Format B/C: {role, permissions: [...]}
+        spec.permissions.forEach(function(entry) {
+            var role = entry.role || entry.name || '';
+            if (!role) return; // Skip Format E (empty role)
+            var perms = entry.permissions || entry.actions || [];
+            if (perms.length === 0 && entry.permissionPattern && entry.permissionPattern.endsWith('*')) {
+                ['Consulter', 'Créer', 'Modifier', 'Supprimer', 'Valider', 'Exporter'].forEach(function(a) {
+                    normalized.push(role + '|' + a);
+                });
+                return;
+            }
+            perms.forEach(function(perm) {
+                if (typeof perm !== 'string') return;
+                var raw = perm.split(':')[0]; // "Read:all" → "Read"
+                if (raw.indexOf('.') !== -1) raw = raw.split('.').pop(); // "Module.Entity.Read" → "Read"
+                var action = actionMap[raw.toLowerCase()] || raw;
+                var key = role + '|' + action;
+                if (normalized.indexOf(key) === -1) normalized.push(key);
+            });
+        });
+    }
+    spec.permissions = normalized;
+});
+
 // Detect if modules use section-level specs (hierarchical mode)
 function hasHierarchicalSpecs(mod) {
     return (mod.anticipatedSections || []).some(function(s) {

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

@@ -210,6 +210,11 @@ function renderModuleSpecSection(mod) {
 }
 
 function renderUseCase(code, uc, index) {
+    var preconditions = uc.preconditions || [];
+    var postconditions = uc.postconditions || [];
+    var errorScenarios = uc.errorScenarios || [];
+    var description = uc.description || '';
+
     return `
         <div class="uc-item">
             <div class="uc-header">
@@ -220,8 +225,12 @@ function renderUseCase(code, uc, index) {
                 </div>
             </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>` : ''}
+            ${description ? `<div class="uc-detail-label">Description</div><div class="uc-detail" style="font-style:italic;color:var(--text-muted);">${escapeHtml(description)}</div>` : ''}
+            ${preconditions.length > 0 ? `<div class="uc-detail-label">Préconditions</div><div class="uc-detail"><ul style="margin:0;padding-left:1.2rem;">${preconditions.map(p => '<li>' + escapeHtml(typeof p === 'string' ? p : p.description || '') + '</li>').join('')}</ul></div>` : ''}
+            ${uc.steps ? `<div class="uc-detail-label">Déroulement principal</div><div class="uc-detail">${escapeHtml(uc.steps).replace(/\n/g, '<br>')}</div>` : ''}
+            ${uc.alternative ? `<div class="uc-detail-label">Scénarios alternatifs</div><div class="uc-detail" style="color:var(--warning);">${escapeHtml(uc.alternative)}</div>` : ''}
+            ${errorScenarios.length > 0 ? `<div class="uc-detail-label">Scénarios d'erreur</div><div class="uc-detail" style="color:var(--danger);"><ul style="margin:0;padding-left:1.2rem;">${errorScenarios.map(e => '<li><strong>' + escapeHtml(typeof e === 'string' ? e : e.name || '') + '</strong>' + (typeof e === 'object' && e.steps ? ' : ' + escapeHtml(Array.isArray(e.steps) ? e.steps.join(', ') : e.steps) : '') + '</li>').join('')}</ul></div>` : ''}
+            ${postconditions.length > 0 ? `<div class="uc-detail-label">Postconditions</div><div class="uc-detail"><ul style="margin:0;padding-left:1.2rem;">${postconditions.map(p => '<li>' + escapeHtml(typeof p === 'string' ? p : p.description || '') + '</li>').join('')}</ul></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..."
@@ -314,15 +323,16 @@ function renderEntity(code, ent, index) {
             </div>
             ${(ent.attributes || []).length > 0 ? `
             <table class="attr-table">
-                <thead><tr><th>Information</th><th>Description</th></tr></thead>
+                <thead><tr><th>Information</th><th style="width:100px;">Type</th><th>Description</th></tr></thead>
                 <tbody>
-                    ${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('')}
+                    ${ent.attributes.map(a => `<tr><td style="font-weight:500;color:var(--text-bright);">${escapeHtml(a.name)}</td><td style="font-family:monospace;font-size:0.8rem;color:var(--accent);">${escapeHtml(a.type || 'string')}</td><td>${escapeHtml(a.description || '')}</td></tr>`).join('')}
                 </tbody>
             </table>` : ''}
             <div style="padding:0.3rem 0.75rem;">
                 <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">Type</label><input type="text" class="form-input" id="attr-type-${code}-${index}" placeholder="string, guid, int, decimal, date, enum, boolean" value="string"></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>
@@ -347,7 +357,7 @@ function addEntity(code) {
 
     const attrs = document.getElementById('ent-attrs-' + code).value.split('\n').filter(l => l.trim()).map(l => {
         const parts = l.split(' - ');
-        return { name: parts[0]?.trim() || l.trim(), description: parts.slice(1).join(' - ').trim() };
+        return { name: parts[0]?.trim() || l.trim(), type: parts[1]?.trim() || 'string', description: parts.slice(2).join(' - ').trim() || parts.slice(1).join(' - ').trim() };
     });
     const rels = document.getElementById('ent-rels-' + code).value.split('\n').filter(l => l.trim());
 
@@ -371,13 +381,14 @@ function removeEntity(code, index) {
 
 function addEntityAttribute(code, entityIndex) {
     var attrName = document.getElementById('attr-name-' + code + '-' + entityIndex);
+    var attrType = document.getElementById('attr-type-' + 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.value.trim(), description: (attrDesc?.value || '').trim() });
+    data.moduleSpecs[code].entities[entityIndex].attributes.push({ name: attrName.value.trim(), type: (attrType?.value || 'string').trim(), description: (attrDesc?.value || '').trim() });
     renderAllModuleSpecs();
     autoSave();
 }
@@ -488,13 +499,68 @@ function toggleWireframeView(wireframeId, view) {
     }
 }
 
+// Normalize permissions array: handles 3 formats:
+// Format 1 (string): "Role|Action" → already correct
+// Format 2 (object): {role, permissions: ["Read:all", "Create:all", ...]}
+// Format 3 (object): {role, permissions: ["Module.Entity.Read", ...]}
+function normalizePermissions(permsArray) {
+    if (!permsArray || permsArray.length === 0) return [];
+    // If first element is a string with '|', already normalized
+    if (typeof permsArray[0] === 'string' && permsArray[0].includes('|')) return permsArray;
+    // If first element is a string without '|', return as-is (unknown format)
+    if (typeof permsArray[0] === 'string') return permsArray;
+    // Format 2/3: objects with {role, permissions[]}
+    const actionMap = {
+        'read': 'Consulter', 'create': 'Créer', 'update': 'Modifier',
+        'delete': 'Supprimer', 'approve': 'Valider', 'validate': 'Valider',
+        'export': 'Exporter', 'admin': 'Administrer', 'import': 'Importer',
+        'viewsalary': 'Consulter', 'assignteam': 'Modifier', 'cancel': 'Supprimer'
+    };
+    const normalized = [];
+    permsArray.forEach(function(entry) {
+        if (typeof entry !== 'object' || !entry) return;
+        var role = entry.role || entry.name || '';
+        if (!role) return;
+        var perms = entry.permissions || entry.actions || [];
+        if (perms.length === 0 && entry.permissionPattern && entry.permissionPattern.endsWith('*')) {
+            // Wildcard: expand to all standard actions
+            ['Consulter', 'Créer', 'Modifier', 'Supprimer', 'Valider', 'Exporter'].forEach(function(a) {
+                normalized.push(role + '|' + a);
+            });
+            return;
+        }
+        perms.forEach(function(perm) {
+            var action = '';
+            if (typeof perm === 'string') {
+                // "Read:all" → extract "Read"
+                var raw = perm.split(':')[0];
+                // "Module.Entity.Read" → extract "Read"
+                if (raw.includes('.')) raw = raw.split('.').pop();
+                action = actionMap[raw.toLowerCase()] || raw;
+            }
+            if (action) {
+                var key = role + '|' + action;
+                if (normalized.indexOf(key) === -1) normalized.push(key);
+            }
+        });
+    });
+    return normalized;
+}
+
 function getPermRoles() {
-    // Extract roles from actual permission data (handles English role names from JSON data)
+    // Extract roles from actual permission data (handles multiple formats)
     const rolesFromPerms = [];
     const seen = new Set();
     data.modules.forEach(m => {
-        (data.moduleSpecs[m.code]?.permissions || []).forEach(p => {
-            const role = p.split('|')[0];
+        var perms = data.moduleSpecs[m.code]?.permissions || [];
+        // Handle object format directly for role extraction
+        perms.forEach(p => {
+            var role = '';
+            if (typeof p === 'string') {
+                role = p.split('|')[0];
+            } else if (typeof p === 'object' && p) {
+                role = p.role || p.name || '';
+            }
             if (role && !seen.has(role)) { seen.add(role); rolesFromPerms.push(role); }
         });
     });
@@ -517,7 +583,9 @@ function renderPermissionGrid(code) {
     const baseRolesCount = roles.length - (data.customRoles || []).length;
     const baseActionsCount = 6;
 
-    const perms = data.moduleSpecs[code]?.permissions || [];
+    // Normalize permissions to "Role|Action" format (handles object and string formats)
+    const rawPerms = data.moduleSpecs[code]?.permissions || [];
+    const perms = normalizePermissions(rawPerms);
 
     return `
         <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
@@ -722,7 +790,8 @@ function renderModuleMockups(code) {
     }) : [];
 
     // Priority 1: HTML mockups from screens[] specs (wireframes NOT shown when screens exist)
-    if (screens.length > 0) {
+    var hasResources = screens.some(function(s) { return (s.resources || []).length > 0; });
+    if (screens.length > 0 && hasResources) {
         var html = '';
         if (typeof renderScreenMockups === 'function') {
             html = renderScreenMockups(code);

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

@@ -70,9 +70,9 @@ function renderDataModel() {
                     ${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>
+                        <thead><tr><th>Champ</th><th style="width:100px;">Type</th><th>Description</th></tr></thead>
                         <tbody>
-                            ${attrs.map(a => `<tr><td class="dm-attr-name">${escapeHtml(a.name)}</td><td class="dm-attr-desc">${escapeHtml(a.description || '')}</td></tr>`).join('')}
+                            ${attrs.map(a => `<tr><td class="dm-attr-name">${escapeHtml(a.name)}</td><td style="font-family:monospace;font-size:0.8rem;color:var(--accent);">${escapeHtml(a.type || 'string')}</td><td class="dm-attr-desc">${escapeHtml(a.description || '')}</td></tr>`).join('')}
                         </tbody>
                     </table>` : ''}
                     ${rels.length > 0 ? `

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

@@ -13,13 +13,16 @@ function renderScreenMockups(code) {
 
     return screens.map(function(screen, si) {
         var resources = screen.resources || [];
+        var content = resources.length > 0
+            ? resources.map(function(res, ri) {
+                return renderResourceMockup(code, screen.sectionCode, res, ri);
+            }).join('')
+            : '<div class="card" style="padding:1.5rem;color:var(--text-muted);text-align:center;"><p>Maquette en attente de spécification pour cette section.</p></div>';
         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>' +
-            resources.map(function(res, ri) {
-                return renderResourceMockup(code, screen.sectionCode, res, ri);
-            }).join('') +
+            content +
         '</div>';
     }).join('');
 }