@atlashub/smartstack-cli 4.74.0 → 4.75.0

package/templates/skills/business-analyse-html/SKILL.md

@@ -77,3 +77,13 @@ When launched, detect and select the target project:
 ## Entry Point
 
 **FIRST ACTION:** Load `steps/step-01-collect.md`
+
+<success_criteria>
+- Sources JSON collectees (index, cadrage, modules, consolidation)
+- FEATURE_DATA construit avec mapping correct des champs
+- EMBEDDED_ARTIFACTS cree pour ERD, matrice permissions, wireframes
+- ba-interactive.html template injecte et rendu
+- Fichier HTML final > 100KB sans chaine [object Object]
+- moduleSpecs a UNE entree par module avec resources peuplees
+- Cles scope normalisees : inScope -> inscope, outOfScope -> outofscope
+</success_criteria>

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 || '' };
+            })
         };
     }
 }
@@ -2851,54 +2942,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) {
@@ -4625,31 +4676,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 +4750,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 +4791,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 +4865,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 +5827,125 @@ 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);
+        }
+    }
+
+    // 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);
+        }
+    }
+
+    // 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>

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

@@ -52,9 +52,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 || '' };
+            })
         };
     }
 }

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

@@ -149,54 +149,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) {