@atlashub/smartstack-cli 4.74.0 → 4.76.0

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

@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{APPLICATION_NAME}} - Analyse métier</title>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+    <script>mermaid.initialize({ startOnLoad: false, theme: 'dark', securityLevel: 'loose' });</script>
     <style>
 /* --- 01-variables.css --- */
 /* ============================================
@@ -2024,6 +2026,82 @@ body {
 .mock-form-tab-content.active {
     display: block;
 }
+
+
+/* --- 10-diagrams.css --- */
+/* ==========================================
+   MERMAID DIAGRAMS
+   ========================================== */
+
+.diagram-container {
+    margin: 1.5rem 0;
+    padding: 1rem;
+    background: var(--bg-card);
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    overflow-x: auto;
+}
+
+.diagram-container h3,
+.diagram-container h4 {
+    color: var(--text-bright);
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+}
+
+.diagram-container .mermaid {
+    display: flex;
+    justify-content: center;
+    min-height: 200px;
+}
+
+.diagram-container .mermaid svg {
+    max-width: 100%;
+    height: auto;
+}
+
+/* ERD specific */
+.diagram-erd {
+    margin-bottom: 2rem;
+    border-left: 3px solid var(--primary);
+}
+
+/* State machine specific */
+.diagram-state-machine {
+    border-left: 3px solid var(--accent);
+}
+
+/* Sequence diagram specific */
+.diagram-sequence {
+    border-left: 3px solid var(--success);
+}
+
+/* Diagram section header */
+.diagram-section-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    color: var(--text-bright);
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+.diagram-section-header::before {
+    content: '';
+    width: 4px;
+    height: 1.2em;
+    background: var(--primary);
+    border-radius: 2px;
+}
+
+/* No diagrams fallback */
+.diagram-empty {
+    color: var(--text-muted);
+    font-style: italic;
+    padding: 1rem;
+    text-align: center;
+}
 
     </style>
 </head>
@@ -2515,9 +2593,22 @@ if (!data.cadrage.scope || (!data.cadrage.scope.inscope?.length && data.cadrage.
             outofscope: (gs.outOfScope || []).map(s => typeof s === 'string' ? { name: s, description: '' } : s)
         };
     } else {
+        function normScopeItem(s) {
+            if (typeof s === 'string') return { name: s, description: '' };
+            if (s.name) return s;
+            var nm = s.feature || s.label || s.title || JSON.stringify(s);
+            var parts = [];
+            if (s.priority) parts.push(s.priority.toUpperCase());
+            if (s.module) parts.push('Module: ' + s.module);
+            return { name: nm, description: parts.join(' — ') };
+        }
         data.cadrage.scope = {
-            inscope: (gs.inScope || []).map(s => typeof s === 'string' ? { name: s, description: '' } : s),
-            outofscope: (gs.outOfScope || []).map(s => typeof s === 'string' ? { name: s, description: '' } : s)
+            inscope: (gs.inScope || []).map(normScopeItem),
+            outofscope: (gs.outOfScope || []).map(function(s) {
+                if (typeof s === 'string') return { name: s, description: '' };
+                if (s.name) return s;
+                return { name: s.feature || s.reason || JSON.stringify(s), description: s.reason || '' };
+            })
         };
     }
 }
@@ -2555,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) {
@@ -2851,54 +3006,14 @@ function renderModuleNavItem(mod) {
     var ucCount = (spec.useCases || []).length;
     var brCount = (spec.businessRules || []).length;
     var entCount = (spec.entities || []).length;
-    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;
-
-    var html = '<div class="nav-module" data-group-id="' + groupId + '">';
-
-    // Module header (clickable to expand + navigate to module spec)
     var totalItems = ucCount + brCount + entCount;
-    html += '<a class="nav-item nav-module-header" onclick="toggleNavGroup(\'' + groupId + '\');showSection(\'module-spec-' + code + '\')" data-section="module-spec-' + code + '">';
-    html += '<span class="nav-chevron ' + (collapsed ? '' : 'expanded') + '">&#9656;</span> ';
-    html += (mod.name || mod.code);
-    if (totalItems > 0) html += ' <span class="nav-badge">' + totalItems + '</span>';
-    html += '</a>';
-
-    // Children: sections/resources (navigable sub-tree)
-    // Tab-level items (UC, BR, Données, etc.) are NOT shown here — they are accessed
-    // via the tab bar in the module content area to avoid redundancy.
-    html += '<div class="nav-children"' + (collapsed ? ' style="display:none;"' : '') + '>';
-    if (sections.length > 0) {
-        sections.forEach(function(section) {
-            var resources = section.resources || [];
-            var sectionUCs = (section.useCases || []).length;
-            var sectionBRs = (section.businessRules || []).length;
-            var contentCount = sectionUCs + sectionBRs + resources.length;
-            html += '<div class="nav-section-item">';
-            html += '<a class="nav-item nav-section-link" onclick="showSection(\'module-spec-' + code + '\');switchTab(\'' + code + '\',\'struct\')" data-section="module-struct-' + code + '-' + section.code + '">';
-            html += '<span class="nav-icon nav-icon-section">&#9655;</span> ' + escapeHtml(section.code || section.name || '');
-            if (contentCount > 0) html += ' <span class="nav-badge">' + contentCount + '</span>';
-            html += '</a>';
-            if (resources.length > 0) {
-                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" 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>';
-                });
-                html += '</div>';
-            }
-            html += '</div>';
-        });
-    }
 
-    html += '</div>'; // nav-children
-    html += '</div>'; // nav-module
-    return html;
+    // Flat module link — sections/resources are accessible via tabs (Structure, Maquettes)
+    return '<a class="nav-item nav-module-header" onclick="showSection(\'module-spec-' + code + '\')" data-section="module-spec-' + code + '">' +
+        '<span class="nav-icon">&#9679;</span> ' +
+        (mod.name || mod.code) +
+        (totalItems > 0 ? ' <span class="nav-badge">' + totalItems + '</span>' : '') +
+    '</a>';
 }
 
 function renderModuleTabNavItem(code, tabId, label, badge) {
@@ -3642,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">
@@ -3652,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..."
@@ -3746,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>
@@ -3779,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());
 
@@ -3803,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();
 }
@@ -3920,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); }
         });
     });
@@ -3949,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;">
@@ -4154,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);
@@ -4302,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 ? `
@@ -4444,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('');
 }
@@ -4625,31 +4812,36 @@ function renderSmartFormMockup(res) {
         html += '<div class="mock-form-tab-content' + (ti === 0 || isOnly ? ' active' : '') + '"';
         html += ' data-mockup="' + mockupId + '" data-tab="' + ti + '">';
 
-        var fields = tab.fields || [];
-        var rows = [];
-        for (var i = 0; i < fields.length; i += 2) {
-            rows.push(fields.slice(i, i + 2));
-        }
+        // Tab-level subtable: the entire tab is a subtable (type: "subtable", entity, columns)
+        if (tab.type === 'subtable') {
+            html += renderSubtableMockup(tab);
+        } else {
+            var fields = tab.fields || [];
+            var rows = [];
+            for (var i = 0; i < fields.length; i += 2) {
+                rows.push(fields.slice(i, i + 2));
+            }
 
-        rows.forEach(function(row) {
-            if (row.length === 1 && row[0].type === 'subtable') {
-                html += renderSubtableMockup(row[0]);
-            } else {
-                html += '<div class="mock-form-row">';
-                row.forEach(function(field) {
-                    html += '<div class="mock-form-group">';
-                    html += '<label class="mock-label">' + escapeHtml(field.label || field.field);
-                    if (field.required) html += ' <span style="color:var(--error);">*</span>';
-                    html += '</label>';
-                    html += renderFormFieldMockup(field);
+            rows.forEach(function(row) {
+                if (row.length === 1 && row[0].type === 'subtable') {
+                    html += renderSubtableMockup(row[0]);
+                } else {
+                    html += '<div class="mock-form-row">';
+                    row.forEach(function(field) {
+                        html += '<div class="mock-form-group">';
+                        html += '<label class="mock-label">' + escapeHtml(field.label || field.field);
+                        if (field.required) html += ' <span style="color:var(--error);">*</span>';
+                        html += '</label>';
+                        html += renderFormFieldMockup(field);
+                        html += '</div>';
+                    });
                     html += '</div>';
-                });
-                html += '</div>';
-            }
-        });
+                }
+            });
 
-        if (fields.length === 0) {
-            html += '<div style="padding:2rem;text-align:center;color:var(--text-muted);font-style:italic;">Contenu de l\'onglet &laquo; ' + escapeHtml(tab.label) + ' &raquo;</div>';
+            if (fields.length === 0) {
+                html += '<div style="padding:2rem;text-align:center;color:var(--text-muted);font-style:italic;">Contenu de l\'onglet &laquo; ' + escapeHtml(tab.label) + ' &raquo;</div>';
+            }
         }
 
         html += '</div>';
@@ -4694,20 +4886,39 @@ function renderSubtableMockup(field) {
 
 /* ---------- SmartCard ---------- */
 function renderSmartCardMockup(res) {
-    var columns = res.columns || res.fields || [];
+    var fields = res.fields || res.columns || [];
     var html = '<div class="mock-header"><span class="mock-title">' + escapeHtml(res.label || 'Cartes') + '</span></div>';
     html += '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;">';
 
     for (var i = 0; i < 4; i++) {
         html += '<div style="background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:1rem;">';
-        columns.forEach(function(col, ci) {
-            var label = col.label || col.field || col;
-            if (ci === 0) {
+        // Title/Subtitle pattern (SmartCard with title + subtitle + fields + actions)
+        if (res.title) {
+            html += '<div style="font-weight:600;color:var(--text-bright);margin-bottom:0.25rem;">' + escapeHtml(res.title) + ' #' + (i + 1) + '</div>';
+        }
+        if (res.subtitle) {
+            html += '<div style="font-size:0.8rem;color:var(--accent);margin-bottom:0.5rem;">' + escapeHtml(res.subtitle) + '</div>';
+        }
+        // Fields
+        fields.forEach(function(col, ci) {
+            var label = col.label || col.field || (typeof col === 'string' ? col : '');
+            var iconMap = { calendar: '&#128197; ', 'dollar-sign': '&#128176; ', 'alert-circle': '&#9888; ', mail: '&#9993; ', building: '&#127970; ', user: '&#128100; ' };
+            var icon = col.icon ? (iconMap[col.icon] || '&#9679; ') : '';
+            if (!res.title && ci === 0) {
                 html += '<div style="font-weight:600;color:var(--text-bright);margin-bottom:0.5rem;">' + escapeHtml(label) + ' #' + (i + 1) + '</div>';
             } else {
-                html += '<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.25rem;">' + escapeHtml(label) + ': <span style="color:var(--text);">valeur</span></div>';
+                html += '<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.25rem;">' + icon + escapeHtml(label) + ': <span style="color:var(--text);">valeur</span></div>';
             }
         });
+        // Actions
+        if (res.actions && res.actions.length > 0) {
+            html += '<div style="margin-top:0.75rem;display:flex;gap:0.4rem;">';
+            res.actions.forEach(function(a) {
+                var actionLabel = typeof a === 'string' ? a.replace(/-/g, ' ') : (a.label || a.action || '');
+                html += '<span class="mock-btn" style="font-size:0.75rem;">' + escapeHtml(actionLabel) + '</span>';
+            });
+            html += '</div>';
+        }
         html += '</div>';
     }
     html += '</div>';
@@ -4716,7 +4927,7 @@ function renderSmartCardMockup(res) {
 
 /* ---------- SmartKanban ---------- */
 function renderSmartKanbanMockup(res) {
-    var options = res.options || res.columns || ['À faire', 'En cours', 'Terminé'];
+    var options = (res.options && res.options.length > 0) ? res.options : (res.columns && res.columns.length > 0) ? res.columns : ['À faire', 'En cours', 'Terminé'];
     var html = '<div class="mock-header"><span class="mock-title">' + escapeHtml(res.label || 'Kanban') + '</span></div>';
     html += '<div style="display:flex;gap:1rem;overflow-x:auto;padding-bottom:0.5rem;">';
 
@@ -4790,11 +5001,42 @@ function kpiDisplayValue(kpi) {
 
 /* ---------- SmartFilter ---------- */
 function renderSmartFilterMockup(res) {
-    var options = res.options || [];
-    var html = '<div style="display:flex;gap:0.4rem;flex-wrap:wrap;padding:0.5rem 0;">';
-    html += '<span style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.8rem;background:var(--primary);color:#fff;cursor:pointer;">Tous</span>';
-    options.forEach(function(opt) {
-        html += '<span style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.8rem;background:var(--bg-hover);color:var(--text);border:1px solid var(--border);cursor:pointer;">' + escapeHtml(opt) + '</span>';
+    var filters = res.filters || [];
+    if (filters.length === 0) {
+        // Fallback: legacy options[] format (tag pills)
+        var options = res.options || [];
+        if (options.length === 0) return '<div style="padding:1rem;text-align:center;color:var(--text-muted);">Aucun filtre défini</div>';
+        var html = '<div style="display:flex;gap:0.4rem;flex-wrap:wrap;padding:0.5rem 0;">';
+        html += '<span style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.8rem;background:var(--primary);color:#fff;cursor:pointer;">Tous</span>';
+        options.forEach(function(opt) {
+            html += '<span style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.8rem;background:var(--bg-hover);color:var(--text);border:1px solid var(--border);cursor:pointer;">' + escapeHtml(typeof opt === 'string' ? opt : opt.label || '') + '</span>';
+        });
+        html += '</div>';
+        return html;
+    }
+
+    // Rich filter bar: render each filter based on its type
+    var html = '<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:flex-end;padding:0.5rem 0;">';
+    filters.forEach(function(f) {
+        var label = typeof f === 'string' ? f : (f.label || f.field || '');
+        var type = typeof f === 'string' ? 'text' : (f.type || 'text');
+        html += '<div style="display:flex;flex-direction:column;gap:0.2rem;">';
+        html += '<span style="font-size:0.7rem;color:var(--text-muted);">' + escapeHtml(label) + '</span>';
+        switch (type) {
+            case 'select':
+                var opts = f.options || ['Option 1', 'Option 2'];
+                html += '<span class="mock-input" style="width:auto;min-width:130px;font-size:0.8rem;color:var(--text-muted);">' + escapeHtml(opts[0]) + ' &#9662;</span>';
+                break;
+            case 'lookup':
+                html += '<span class="mock-input" style="width:auto;min-width:130px;font-size:0.8rem;color:var(--accent);">' + escapeHtml(f.entity || label) + ' &#128269;</span>';
+                break;
+            case 'daterange':
+                html += '<span class="mock-input" style="width:auto;min-width:180px;font-size:0.8rem;color:var(--text-muted);">01/01/2025 — 31/12/2025 &#128197;</span>';
+                break;
+            default:
+                html += '<span class="mock-input" style="width:auto;min-width:160px;font-size:0.8rem;color:var(--text-muted);">Rechercher... &#128269;</span>';
+        }
+        html += '</div>';
     });
     html += '</div>';
     return html;
@@ -5721,6 +5963,171 @@ function scrollToCommentThread(sectionId, safeElId) {
         }
     }, 100);
 }
+
+
+/* --- 12-render-diagrams.js --- */
+/* ==========================================
+   MERMAID DIAGRAM RENDERING
+   Renders ERD, state machines, and sequence diagrams
+   from consolidation.mermaidDiagrams data.
+   ========================================== */
+
+function renderMermaidDiagrams() {
+    const data = window.FEATURE_DATA;
+    if (!data) return;
+
+    const diagrams = data.consolidation?.mermaidDiagrams;
+    if (!diagrams) return;
+
+    // 1. ERD in consol-datamodel (prepend before entity cards)
+    if (diagrams.erd) {
+        const erdContainer = document.getElementById('dataModelContainer');
+        if (erdContainer) {
+            const erdDiv = document.createElement('div');
+            erdDiv.className = 'diagram-container diagram-erd';
+            erdDiv.innerHTML =
+                '<div class="diagram-section-header">Diagramme Entit\u00e9-Relation (ERD)</div>' +
+                '<div class="mermaid">' + escapeHtml(diagrams.erd) + '</div>';
+            erdContainer.insertBefore(erdDiv, erdContainer.firstChild);
+        }
+    }
+
+    // 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');
+        if (smContainer) {
+            const smSection = document.createElement('div');
+            smSection.innerHTML = '<div class="diagram-section-header">Cycles de vie (State Machines)</div>';
+
+            Object.entries(diagrams.stateMachines).forEach(function(entry) {
+                var entity = entry[0];
+                var def = entry[1];
+                var smDiv = document.createElement('div');
+                smDiv.className = 'diagram-container diagram-state-machine';
+                smDiv.innerHTML =
+                    '<h4>' + escapeHtml(entity) + '</h4>' +
+                    '<div class="mermaid">' + escapeHtml(def) + '</div>';
+                smSection.appendChild(smDiv);
+            });
+
+            smContainer.appendChild(smSection);
+        }
+    }
+
+    // 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');
+        // Fallback: try the consol-flows section
+        if (!flowsContainer) {
+            var consolFlows = document.getElementById('consol-flows');
+            if (consolFlows) {
+                flowsContainer = consolFlows.querySelector('.section-body') || consolFlows;
+            }
+        }
+
+        if (flowsContainer) {
+            var seqSection = document.createElement('div');
+            seqSection.innerHTML = '<div class="diagram-section-header">Diagrammes de s\u00e9quence</div>';
+
+            Object.entries(diagrams.sequences).forEach(function(entry) {
+                var flowName = entry[0];
+                var def = entry[1];
+                var seqDiv = document.createElement('div');
+                seqDiv.className = 'diagram-container diagram-sequence';
+                seqDiv.innerHTML =
+                    '<h4>' + escapeHtml(flowName) + '</h4>' +
+                    '<div class="mermaid">' + escapeHtml(def) + '</div>';
+                seqSection.appendChild(seqDiv);
+            });
+
+            flowsContainer.appendChild(seqSection);
+        }
+    }
+
+    // 4. Render all mermaid elements
+    try {
+        if (typeof mermaid !== 'undefined' && mermaid.run) {
+            mermaid.run({ querySelector: '.mermaid' });
+        }
+    } catch (e) {
+        console.warn('Mermaid rendering failed:', e);
+        // Fallback: show raw text
+        document.querySelectorAll('.mermaid').forEach(function(el) {
+            if (!el.querySelector('svg')) {
+                el.style.whiteSpace = 'pre-wrap';
+                el.style.fontFamily = 'monospace';
+                el.style.fontSize = '0.85rem';
+                el.style.color = 'var(--text-muted)';
+            }
+        });
+    }
+}
+
+// Escape HTML for safe injection
+function escapeHtml(text) {
+    if (!text) return '';
+    // For mermaid content, we need to preserve the syntax
+    // Only escape actual HTML tags, not mermaid arrows
+    return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+// Auto-run after consolidation rendering
+(function() {
+    // Wait for DOM and other render functions to complete
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(renderMermaidDiagrams, 500);
+        });
+    } else {
+        setTimeout(renderMermaidDiagrams, 500);
+    }
+})();
 
     </script>
 </body>