@atlashub/smartstack-cli 3.20.0 → 3.22.0

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

@@ -47,6 +47,14 @@ data.cadrage.scope = data.cadrage.scope || { vital: [], important: [], optional:
 
 // Defensive init: moduleSpecs (may be missing if LLM didn't follow mapping)
 data.moduleSpecs = data.moduleSpecs || {};
+// Ensure ALL modules have a moduleSpecs entry (prevents missing schemas)
+(data.modules || []).forEach(function(m) {
+    if (!data.moduleSpecs[m.code]) {
+        data.moduleSpecs[m.code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+    }
+    // Ensure anticipatedSections array exists
+    m.anticipatedSections = m.anticipatedSections || [];
+});
 
 // Vibe coding mode: hide non-relevant sections
 const isVibeCoding = data.metadata?.vibeCoding === true;
@@ -87,11 +95,7 @@ function setNestedValue(obj, path, value) {
 }
 
 function updateCounts() {
-    document.getElementById('stakeholderCount').textContent = data.cadrage.stakeholders.length;
-    document.getElementById('moduleCount').textContent = data.modules.length;
-    const totalEntities = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.entities || []).length, 0);
-    document.getElementById('entityCount').textContent = totalEntities;
-    updateModulesNav();
+    buildNavTree();
     updateDepSelects();
 }
 
@@ -139,7 +143,8 @@ document.addEventListener('DOMContentLoaded', function() {
     renderConsolidation();
     renderHandoff();
     renderE2EFlows();
-    updateCounts();
+    buildNavTree();
+    updateDepSelects();
     initInlineComments();
     renderReviewPanel();
 });

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

@@ -1,7 +1,10 @@
 /* ============================================
-   NAVIGATION
+   NAVIGATION - Hierarchical Tree
    ============================================ */
 let currentSectionId = 'cadrage-context';
+let navCollapseState = {};
+
+/* ---------- Core ---------- */
 
 function showSection(sectionId) {
     currentSectionId = sectionId;
@@ -9,9 +12,30 @@ function showSection(sectionId) {
     const section = document.getElementById(sectionId);
     if (section) section.style.display = 'block';
 
-    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
-    const navItem = document.querySelector('[data-section="' + sectionId + '"]');
-    if (navItem) navItem.classList.add('active');
+    // Highlight active nav item
+    document.querySelectorAll('#sidebarNav .nav-item').forEach(n => n.classList.remove('active'));
+    const navItem = document.querySelector('#sidebarNav [data-section="' + sectionId + '"]');
+    if (navItem) {
+        navItem.classList.add('active');
+        // Auto-expand parent groups to reveal active item
+        let parent = navItem.parentElement;
+        while (parent && parent.id !== 'sidebarNav') {
+            if (parent.classList.contains('nav-children') && parent.style.display === 'none') {
+                parent.style.display = '';
+                const groupEl = parent.parentElement;
+                if (groupEl) {
+                    const groupId = groupEl.dataset.groupId;
+                    if (groupId) {
+                        navCollapseState[groupId] = false;
+                        const chevron = groupEl.querySelector(':scope > .nav-group-title .nav-chevron, :scope > .nav-item.nav-module-header .nav-chevron');
+                        if (chevron) chevron.classList.add('expanded');
+                    }
+                }
+            }
+            parent = parent.parentElement;
+        }
+        saveNavState();
+    }
 }
 
 function restoreCurrentSection() {
@@ -20,3 +44,184 @@ function restoreCurrentSection() {
         if (section) section.style.display = 'block';
     }
 }
+
+/* ---------- Tree Builder ---------- */
+
+function buildNavTree() {
+    const nav = document.getElementById('sidebarNav');
+    if (!nav) return;
+
+    nav.innerHTML =
+        renderNavGroup('cadrage', 'Cadrage', buildCadrageItems()) +
+        renderNavGroup('modules', 'Modules (' + data.modules.length + ')', buildModuleItems()) +
+        renderNavGroup('consolidation', 'Consolidation', buildConsolidationItems()) +
+        renderNavGroup('synthese', 'Synthese', buildSyntheseItems());
+
+    restoreNavState();
+    highlightActiveNavItem();
+}
+
+function renderNavGroup(id, title, itemsHtml) {
+    const collapsed = navCollapseState[id] === true;
+    return '<div class="nav-group" data-group-id="' + id + '">' +
+        '<div class="nav-group-title" onclick="toggleNavGroup(\'' + id + '\')">' +
+            '<span class="nav-chevron ' + (collapsed ? '' : 'expanded') + '">&#9656;</span> ' +
+            title +
+        '</div>' +
+        '<div class="nav-children"' + (collapsed ? ' style="display:none;"' : '') + '>' +
+            itemsHtml +
+        '</div>' +
+    '</div>';
+}
+
+function renderNavItem(sectionId, label, badge) {
+    return '<a class="nav-item" onclick="showSection(\'' + sectionId + '\')" data-section="' + sectionId + '">' +
+        '<span class="nav-icon">&#9679;</span> ' + label +
+        (badge !== undefined ? ' <span class="nav-badge">' + badge + '</span>' : '') +
+    '</a>';
+}
+
+/* ---------- Group Builders ---------- */
+
+function buildCadrageItems() {
+    return renderNavItem('cadrage-context', 'Contexte') +
+        renderNavItem('cadrage-stakeholders', 'Parties prenantes', data.cadrage.stakeholders.length) +
+        renderNavItem('cadrage-scope', 'Perimetre fonctionnel') +
+        renderNavItem('cadrage-risks', 'Risques et hypotheses', data.cadrage.risks.length) +
+        renderNavItem('cadrage-success', 'Criteres de reussite');
+}
+
+function buildModuleItems() {
+    let html = '';
+    data.modules.forEach(function(mod) {
+        html += renderModuleNavItem(mod);
+    });
+    // Global module views at bottom
+    html += renderNavItem('decomp-modules', 'Vue d\'ensemble', data.modules.length);
+    html += renderNavItem('decomp-dependencies', 'Dependances', data.dependencies.length);
+    return html;
+}
+
+function buildConsolidationItems() {
+    var totalEntities = data.modules.reduce(function(sum, m) {
+        return sum + (data.moduleSpecs[m.code]?.entities || []).length;
+    }, 0);
+    return renderNavItem('consol-datamodel', 'Modele de donnees', totalEntities) +
+        renderNavItem('consol-interactions', 'Interactions') +
+        renderNavItem('consol-permissions', 'Coherence des acces') +
+        renderNavItem('consol-flows', 'Parcours bout en bout', data.consolidation.e2eFlows.length);
+}
+
+function buildSyntheseItems() {
+    return renderNavItem('handoff-summary', 'Vue d\'ensemble');
+}
+
+/* ---------- Module Sub-Tree ---------- */
+
+function renderModuleNavItem(mod) {
+    var code = mod.code;
+    var spec = data.moduleSpecs[code] || {};
+    var ucCount = (spec.useCases || []).length;
+    var brCount = (spec.businessRules || []).length;
+    var entCount = (spec.entities || []).length;
+    var sections = mod.anticipatedSections || [];
+    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)
+    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);
+    html += '</a>';
+
+    // Children: tabs
+    html += '<div class="nav-children"' + (collapsed ? ' style="display:none;"' : '') + '>';
+    html += renderModuleTabNavItem(code, 'uc', 'Cas d\'utilisation', ucCount);
+    html += renderModuleTabNavItem(code, 'br', 'Regles metier', brCount);
+    html += renderModuleTabNavItem(code, 'ent', 'Donnees', entCount);
+    html += renderModuleTabNavItem(code, 'perm', 'Droits d\'acces');
+    html += renderModuleTabNavItem(code, 'mock', 'Maquettes');
+    html += renderModuleTabNavItem(code, 'struct', 'Structure', sections.length);
+
+    // Children: sections/resources (deeper tree)
+    if (sections.length > 0) {
+        sections.forEach(function(section) {
+            var resources = section.resources || [];
+            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> ' + section.code;
+            if (resources.length > 0) html += ' <span class="nav-badge">' + resources.length + '</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">';
+                    html += '<span class="nav-icon nav-icon-resource">&#8226;</span> ' + resName;
+                    html += '</a>';
+                });
+                html += '</div>';
+            }
+            html += '</div>';
+        });
+    }
+
+    html += '</div>'; // nav-children
+    html += '</div>'; // nav-module
+    return html;
+}
+
+function renderModuleTabNavItem(code, tabId, label, badge) {
+    var sectionId = 'module-spec-' + code;
+    return '<a class="nav-item" onclick="showSection(\'' + sectionId + '\');switchTab(\'' + code + '\',\'' + tabId + '\')" data-section="' + sectionId + '-' + tabId + '">' +
+        '<span class="nav-icon">&#9679;</span> ' + label +
+        (badge !== undefined ? ' <span class="nav-badge">' + badge + '</span>' : '') +
+    '</a>';
+}
+
+/* ---------- Collapse/Expand ---------- */
+
+function toggleNavGroup(groupId) {
+    navCollapseState[groupId] = !navCollapseState[groupId];
+    var groupEl = document.querySelector('[data-group-id="' + groupId + '"]');
+    if (groupEl) {
+        var children = groupEl.querySelector(':scope > .nav-children');
+        var chevron = groupEl.querySelector(':scope > .nav-group-title .nav-chevron, :scope > .nav-item.nav-module-header .nav-chevron');
+        if (children) children.style.display = navCollapseState[groupId] ? 'none' : '';
+        if (chevron) chevron.classList.toggle('expanded', !navCollapseState[groupId]);
+    }
+    saveNavState();
+}
+
+function saveNavState() {
+    try { localStorage.setItem(APP_KEY + '-nav', JSON.stringify(navCollapseState)); } catch(e) {}
+}
+
+function restoreNavState() {
+    try {
+        var saved = localStorage.getItem(APP_KEY + '-nav');
+        if (saved) {
+            navCollapseState = JSON.parse(saved);
+            // Apply collapse state to all groups
+            Object.keys(navCollapseState).forEach(function(groupId) {
+                if (navCollapseState[groupId]) {
+                    var groupEl = document.querySelector('[data-group-id="' + groupId + '"]');
+                    if (groupEl) {
+                        var children = groupEl.querySelector(':scope > .nav-children');
+                        var chevron = groupEl.querySelector(':scope > .nav-group-title .nav-chevron, :scope > .nav-item.nav-module-header .nav-chevron');
+                        if (children) children.style.display = 'none';
+                        if (chevron) chevron.classList.remove('expanded');
+                    }
+                }
+            });
+        }
+    } catch(e) {}
+}
+
+function highlightActiveNavItem() {
+    if (!currentSectionId) return;
+    var navItem = document.querySelector('#sidebarNav [data-section="' + currentSectionId + '"]');
+    if (navItem) navItem.classList.add('active');
+}

package/templates/skills/business-analyse/html/src/scripts/04-render-modules.js

@@ -13,6 +13,7 @@ function addModule() {
         featureType: document.getElementById('mod-type').value,
         priority: document.getElementById('mod-priority').value,
         entities: document.getElementById('mod-entities').value.split('\n').filter(e => e.trim()),
+        anticipatedSections: [],
         status: 'pending'
     });
 
@@ -69,14 +70,7 @@ function renderModules() {
 }
 
 function updateModulesNav() {
-    const nav = document.getElementById('modulesNav');
-    const navItems = data.modules.map(m => `
-        <a class="nav-item" onclick="showSection('module-spec-${m.code}')" data-section="module-spec-${m.code}">
-            <span class="nav-icon">&#9679;</span> ${m.name}
-            <span class="nav-badge">${(data.moduleSpecs[m.code]?.useCases || []).length}</span>
-        </a>
-    `).join('');
-    nav.innerHTML = '<div class="nav-group-title">3. Specification</div>' + (navItems || '<div style="padding:0.3rem 1rem;font-size:0.8rem;color:var(--text-muted);font-style:italic;">Aucun domaine</div>');
+    buildNavTree();
 }
 
 /* ============================================

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

@@ -37,6 +37,7 @@ function renderModuleSpecSection(mod) {
             <button class="tab-btn" onclick="switchTab('${code}', 'perm')">Droits d'acces</button>
             <button class="tab-btn" onclick="switchTab('${code}', 'mock')">Maquettes</button>
             <button class="tab-btn" onclick="switchTab('${code}', 'notes')">Notes</button>
+            <button class="tab-btn" onclick="switchTab('${code}', 'struct')">Structure</button>
         </div>
 
         <!-- TAB: Cas d'utilisation -->
@@ -113,7 +114,12 @@ function renderModuleSpecSection(mod) {
         <div class="tab-panel" id="tab-${code}-ent">
             <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Les types de donnees que ce domaine gere. Decrivez les informations importantes a enregistrer pour chaque type.</p>
             <div id="entList-${code}">
-                ${spec.entities.map((ent, i) => renderEntity(code, ent, i)).join('')}
+                ${spec.entities.length > 0
+                    ? spec.entities.map((ent, i) => renderEntity(code, ent, i)).join('')
+                    : (mod.entities || []).length > 0
+                        ? '<div class="card" style="color:var(--text-muted);padding:1.5rem;"><p style="margin-bottom:0.75rem;">Les schemas detailles ne sont pas encore disponibles. Entites identifiees :</p><ul style="list-style:disc;padding-left:1.5rem;">' + mod.entities.map(e => '<li>' + e + '</li>').join('') + '</ul><p style="font-size:0.8rem;margin-top:0.75rem;font-style:italic;">Utilisez le bouton ci-dessous pour ajouter les schemas detailles.</p></div>'
+                        : ''
+                }
             </div>
             <button class="add-btn" onclick="toggleForm('addEntForm-${code}')">+ Ajouter un type de donnees</button>
             <div class="inline-form" id="addEntForm-${code}">
@@ -190,6 +196,14 @@ function renderModuleSpecSection(mod) {
                 <div class="editable" contenteditable="true" data-module-code="${code}" data-module-field="notes" data-placeholder="Notez ici tout ce qui concerne ce domaine : questions, precisions, contraintes particulieres...">${spec.notes || ''}</div>
             </div>
         </div>
+
+        <!-- TAB: Structure (sections/resources) -->
+        <div class="tab-panel" id="tab-${code}-struct">
+            <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Organisation des ecrans et ressources de ce domaine. Structure hierarchique : sections regroupant des ressources.</p>
+            <div id="structContainer-${code}">
+                ${renderModuleStructure(code)}
+            </div>
+        </div>
     </div>`;
 }
 
@@ -373,18 +387,30 @@ function renderModuleMockups(code) {
             </div>`;
     }
 
-    return wireframes.map((wf, i) => `
+    return wireframes.map((wf, i) => {
+        const hasSvg = !!wf.svgContent;
+        const wireframeId = `wf-${code}-${i}`;
+
+        return `
         <div class="mockup-frame" style="${i > 0 ? 'margin-top:1.5rem;' : ''}">
             <div class="mockup-toolbar">
                 <div class="mockup-dot mockup-dot-red"></div>
                 <div class="mockup-dot mockup-dot-yellow"></div>
                 <div class="mockup-dot mockup-dot-green"></div>
                 <span class="mockup-title">${wf.screen || wf.section}</span>
+                ${hasSvg ? `
+                <div class="wireframe-toggle">
+                    <button class="wireframe-toggle-btn active" data-target="${wireframeId}" data-view="svg" onclick="toggleWireframeView('${wireframeId}', 'svg')">SVG</button>
+                    <button class="wireframe-toggle-btn" data-target="${wireframeId}" data-view="ascii" onclick="toggleWireframeView('${wireframeId}', 'ascii')">ASCII</button>
+                </div>` : ''}
             </div>
-            <div class="mockup-content">
-                ${wf.format === 'ascii'
-                    ? `<pre class="ascii-wireframe">${wf.content || ''}</pre>`
-                    : `<div class="svg-wireframe">${wf.content || ''}</div>`}
+            <div class="mockup-content" id="${wireframeId}">
+                ${hasSvg
+                    ? `<div class="svg-wireframe wireframe-view active" data-view="svg">${wf.svgContent}</div>
+                       <pre class="ascii-wireframe wireframe-view" data-view="ascii" style="display:none;">${wf.content || ''}</pre>`
+                    : (wf.format === 'ascii'
+                        ? `<pre class="ascii-wireframe">${wf.content || ''}</pre>`
+                        : `<div class="svg-wireframe">${wf.content || ''}</div>`)}
             </div>
             ${wf.description ? `
             <div class="wireframe-description">
@@ -423,7 +449,27 @@ function renderModuleMockups(code) {
                 >${getWireframeComment(code, wf.screen)}</textarea>
             </div>
         </div>
-    `).join('');
+    `}).join('');
+}
+
+function toggleWireframeView(wireframeId, view) {
+    const container = document.getElementById(wireframeId);
+    if (!container) return;
+
+    // Toggle visibility of wireframe views
+    container.querySelectorAll('.wireframe-view').forEach(el => {
+        const isTarget = el.dataset.view === view;
+        el.style.display = isTarget ? '' : 'none';
+        el.classList.toggle('active', isTarget);
+    });
+
+    // Toggle button active states
+    const toolbar = container.closest('.mockup-frame').querySelector('.wireframe-toggle');
+    if (toolbar) {
+        toolbar.querySelectorAll('.wireframe-toggle-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.view === view);
+        });
+    }
 }
 
 function getPermRoles() {
@@ -547,6 +593,47 @@ function refreshAllPermGrids() {
     });
 }
 
+function renderModuleStructure(code) {
+    const mod = data.modules.find(m => m.code === code);
+    const sections = mod ? (mod.anticipatedSections || []) : [];
+
+    if (sections.length === 0) {
+        return '<div class="card" style="text-align:center;padding:2rem;color:var(--text-muted);">' +
+            '<p>Aucune section definie pour ce module.</p>' +
+            '<p style="font-size:0.85rem;margin-top:0.5rem;">Les sections et ressources seront identifiees lors de l\'analyse approfondie.</p>' +
+            '</div>';
+    }
+
+    return sections.map(function(section) {
+        var resources = section.resources || [];
+        var html = '<div class="struct-section">';
+        html += '<div class="struct-section-header">';
+        html += '<span class="struct-section-code">' + (section.code || section.name || '') + '</span>';
+        if (section.description) {
+            html += '<span class="struct-section-desc">' + section.description + '</span>';
+        }
+        html += '<span class="struct-section-badge">' + resources.length + ' ressource' + (resources.length !== 1 ? 's' : '') + '</span>';
+        html += '</div>';
+
+        if (resources.length > 0) {
+            html += '<div class="struct-resources">';
+            resources.forEach(function(res) {
+                var resName = typeof res === 'string' ? res : (res.code || res.name || '');
+                var resDesc = typeof res === 'object' ? (res.description || '') : '';
+                html += '<div class="struct-resource">';
+                html += '<span class="struct-resource-icon">&#8226;</span>';
+                html += '<span class="struct-resource-name">' + resName + '</span>';
+                if (resDesc) html += '<span class="struct-resource-desc">' + resDesc + '</span>';
+                html += '</div>';
+            });
+            html += '</div>';
+        }
+
+        html += '</div>';
+        return html;
+    }).join('');
+}
+
 function switchTab(code, tabId) {
     const section = document.getElementById('module-spec-' + code);
     if (!section) return;
@@ -555,6 +642,6 @@ function switchTab(code, tabId) {
     const targetPanel = document.getElementById('tab-' + code + '-' + tabId);
     if (targetPanel) targetPanel.classList.add('active');
     const buttons = section.querySelectorAll('.tab-btn');
-    const tabIndex = { uc: 0, br: 1, ent: 2, perm: 3, mock: 4, notes: 5 }[tabId];
+    const tabIndex = { uc: 0, br: 1, ent: 2, perm: 3, mock: 4, notes: 5, struct: 6 }[tabId];
     if (buttons[tabIndex]) buttons[tabIndex].classList.add('active');
 }

package/templates/skills/business-analyse/html/src/scripts/07-render-handoff.js

@@ -76,7 +76,9 @@ function renderCoverageMatrix() {
             <thead><tr><th>Besoin</th><th>Priorite</th><th>Domaine</th><th>Couvert</th></tr></thead>
             <tbody>
                 ${allScope.map(item => {
-                    const moduleName = data.modules.length > 0 ? data.modules[0].name : 'A definir';
+                    const moduleName = item.module
+                        ? (data.modules.find(m => m.code === item.module)?.name || item.module)
+                        : (data.modules.length > 0 ? data.modules.map(m => m.name).join(', ') : 'A definir');
                     return `
                         <tr>
                             <td>${item.name}</td>

package/templates/skills/business-analyse/html/src/scripts/08-editing.js

@@ -11,35 +11,125 @@ function saveToLocalStorage() {
     showNotification('Modifications sauvegardees');
 }
 
+function resetToEmbedded() {
+    if (!confirm('Reinitialiser toutes les donnees depuis la version d\'origine ? Vos modifications locales (commentaires, notes) seront perdues.')) return;
+    localStorage.removeItem(APP_KEY);
+    // Restore data from ORIGINAL_DATA
+    Object.keys(data).forEach(k => delete data[k]);
+    Object.assign(data, JSON.parse(JSON.stringify(ORIGINAL_DATA)));
+    // Re-render everything
+    initEditableFields();
+    renderStakeholders();
+    renderScope();
+    renderRisks();
+    renderCriteria();
+    renderModules();
+    renderDependencies();
+    renderAllModuleSpecs();
+    renderConsolidation();
+    renderHandoff();
+    renderE2EFlows();
+    updateCounts();
+    renderReviewPanel();
+    showNotification('Donnees reinitialisees depuis la version d\'origine');
+}
+
 function loadFromLocalStorage() {
     const saved = localStorage.getItem(APP_KEY);
-    if (saved) {
-        try {
-            const parsed = JSON.parse(saved);
-            // Deep merge with defaults
-            data.metadata = { ...data.metadata, ...parsed.metadata };
-            data.cadrage = {
-                ...data.cadrage,
-                ...parsed.cadrage,
-                scope: { ...data.cadrage.scope, ...(parsed.cadrage?.scope || {}) }
-            };
-            data.modules = parsed.modules || [];
-            data.dependencies = parsed.dependencies || [];
-            data.moduleSpecs = parsed.moduleSpecs || {};
+    if (!saved) return;
+
+    try {
+        const parsed = JSON.parse(saved);
+
+        // Build fingerprint of embedded structural data to detect HTML regeneration
+        const embeddedFingerprint = ORIGINAL_DATA.modules.map(m => m.code).sort().join(',')
+            + '|' + (ORIGINAL_DATA.metadata?.createdAt || '')
+            + '|' + ORIGINAL_DATA.modules.length;
+        const cachedFingerprint = parsed._structureFingerprint || '';
+
+        const structureChanged = embeddedFingerprint !== cachedFingerprint;
+        const embeddedModuleCount = ORIGINAL_DATA.modules?.length || 0;
+        const cachedModuleCount = (parsed.modules || []).length;
+        const hasNewModules = embeddedModuleCount > cachedModuleCount;
+        const embeddedModuleCodes = new Set(ORIGINAL_DATA.modules.map(m => m.code));
+        const cachedModuleCodes = new Set((parsed.modules || []).map(m => m.code));
+        const missingModules = [...embeddedModuleCodes].filter(c => !cachedModuleCodes.has(c));
+
+        if (structureChanged || hasNewModules || missingModules.length > 0) {
+            // HTML was regenerated or has new modules — keep embedded structural data
+            // Only restore user-specific edits (comments, custom roles, notes)
+            data.wireframeComments = parsed.wireframeComments || {};
+            data.specComments = parsed.specComments || {};
+            data.customRoles = parsed.customRoles || [];
+            data.customActions = parsed.customActions || [];
+            data.comments = parsed.comments || [];
+
+            // Merge user-added notes per module (preserve existing module notes)
+            for (const code of Object.keys(parsed.moduleSpecs || {})) {
+                if (data.moduleSpecs[code] && parsed.moduleSpecs[code]?.notes) {
+                    data.moduleSpecs[code].notes = parsed.moduleSpecs[code].notes;
+                }
+            }
+
+            // Save fresh embedded data with fingerprint
+            data._structureFingerprint = embeddedFingerprint;
+            autoSave();
+        } else {
+            // Cache matches current structure — safe to restore user edits on cadrage/notes
+            // IMPORTANT: Always keep embedded modules and moduleSpecs as structural source of truth
+            // Only merge cadrage user-editable fields and notes
+            if (parsed.cadrage) {
+                // Merge cadrage context (user may have edited text fields)
+                if (parsed.cadrage.context) {
+                    data.cadrage.context = { ...data.cadrage.context, ...parsed.cadrage.context };
+                }
+                // Merge scope only if user added items interactively
+                if (parsed.cadrage.scope) {
+                    data.cadrage.scope = { ...data.cadrage.scope, ...parsed.cadrage.scope };
+                }
+                // Merge stakeholders and risks if user edited them
+                if (parsed.cadrage.stakeholders) data.cadrage.stakeholders = parsed.cadrage.stakeholders;
+                if (parsed.cadrage.risks) data.cadrage.risks = parsed.cadrage.risks;
+            }
+            data.dependencies = parsed.dependencies || data.dependencies;
             data.consolidation = { ...data.consolidation, ...(parsed.consolidation || {}) };
-            data.handoff = parsed.handoff || {};
+
+            // Merge moduleSpecs: keep embedded structure, overlay user-editable fields (notes, custom permissions)
+            for (const code of Object.keys(data.moduleSpecs)) {
+                const cached = parsed.moduleSpecs?.[code];
+                if (cached) {
+                    // Preserve user notes
+                    if (cached.notes) data.moduleSpecs[code].notes = cached.notes;
+                    // Preserve user-added use cases/rules/entities (merged with embedded)
+                    // Only add items that don't exist in embedded (by name match)
+                    const embeddedUcNames = new Set((data.moduleSpecs[code].useCases || []).map(uc => uc.name));
+                    (cached.useCases || []).forEach(uc => {
+                        if (!embeddedUcNames.has(uc.name)) data.moduleSpecs[code].useCases.push(uc);
+                    });
+                    const embeddedBrNames = new Set((data.moduleSpecs[code].businessRules || []).map(br => br.name));
+                    (cached.businessRules || []).forEach(br => {
+                        if (!embeddedBrNames.has(br.name)) data.moduleSpecs[code].businessRules.push(br);
+                    });
+                    // Preserve user permissions edits
+                    if (cached.permissions) data.moduleSpecs[code].permissions = cached.permissions;
+                }
+            }
+
             data.wireframeComments = parsed.wireframeComments || {};
             data.specComments = parsed.specComments || {};
             data.customRoles = parsed.customRoles || [];
             data.customActions = parsed.customActions || [];
             data.comments = parsed.comments || [];
 
-            // Restore editable fields
-            document.querySelectorAll('.editable[data-field]').forEach(el => {
-                const value = getNestedValue(data, 'cadrage.' + el.dataset.field);
-                if (value) el.textContent = value;
-            });
-            renderProcessFlow();
-        } catch (e) { console.error('Error loading saved data:', e); }
-    }
+            // Update fingerprint
+            data._structureFingerprint = embeddedFingerprint;
+            autoSave();
+        }
+
+        // Restore editable fields
+        document.querySelectorAll('.editable[data-field]').forEach(el => {
+            const value = getNestedValue(data, 'cadrage.' + el.dataset.field);
+            if (value) el.textContent = value;
+        });
+    } catch (e) { console.error('Error loading saved data:', e); }
 }

package/templates/skills/business-analyse/html/src/scripts/11-review-panel.js

@@ -118,6 +118,13 @@ function getSectionLabel(sectionId) {
         const mod = data.modules.find(m => m.code === code);
         return mod ? mod.name : code;
     }
+    // Handle module structure sections (module-struct-{code}-{section})
+    const structMatch = sectionId.match(/^module-struct-(.+?)-(.+)$/);
+    if (structMatch) {
+        const mod = data.modules.find(m => m.code === structMatch[1]);
+        const modName = mod ? mod.name : structMatch[1];
+        return modName + ' > Structure > ' + structMatch[2];
+    }
     // Handle list-based sectionIds (ucList-*, brList-*, entList-*)
     const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
     if (listMatch) {

package/templates/skills/business-analyse/html/src/styles/02-layout.css

@@ -90,7 +90,7 @@
    PRINT
    ============================================ */
 @media print {
-    .sidebar, .header-actions, .add-btn, .uc-actions, .inline-form, .module-card-remove, .phase-progress { display: none !important; }
+    .sidebar, .header-actions, .add-btn, .uc-actions, .inline-form, .module-card-remove { display: none !important; }
     .main { max-width: 100%; padding: 0; }
     .section { display: block !important; page-break-inside: avoid; }
     body { background: #fff; color: #1a1a1a; }