@atlashub/smartstack-cli 3.20.0 → 3.22.0

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

@@ -139,7 +139,7 @@ body {
    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; }
@@ -152,67 +152,125 @@ body {
 
 /* --- 03-navigation.css --- */
 /* ============================================
-   SIDEBAR - Navigation 5 niveaux
+   SIDEBAR - Hierarchical Tree Navigation
    ============================================ */
-.nav-group { padding: 1rem 0; }
+
+/* Sidebar header */
+.sidebar-header {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-hover);
+}
+.sidebar-app-name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--primary-light);
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Nav groups (top-level: Cadrage, Modules, Consolidation, Synthese) */
+.nav-group { padding: 0.4rem 0; }
 .nav-group + .nav-group { border-top: 1px solid var(--border); }
 
 .nav-group-title {
-    font-size: 0.65rem;
+    font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--text-muted);
-    padding: 0 1rem;
-    margin-bottom: 0.5rem;
+    padding: 0.4rem 1rem;
+    margin-bottom: 0.15rem;
     font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    user-select: none;
+    transition: color var(--transition-fast);
 }
+.nav-group-title:hover { color: var(--text-bright); }
 
+/* Chevron icon for expand/collapse */
+.nav-chevron {
+    font-size: 0.6rem;
+    display: inline-block;
+    transition: transform var(--transition-fast);
+    color: var(--text-muted);
+    width: 12px;
+    text-align: center;
+    flex-shrink: 0;
+}
+.nav-chevron.expanded { transform: rotate(90deg); }
+
+/* Nav items (leaf nodes) */
 .nav-item {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.45rem 1rem;
+    gap: 0.4rem;
+    padding: 0.35rem 1rem;
     color: var(--text);
     text-decoration: none;
-    font-size: 0.85rem;
+    font-size: 0.82rem;
     cursor: pointer;
     transition: all var(--transition-fast);
     border-left: 3px solid transparent;
 }
 .nav-item:hover { background: var(--bg-hover); color: var(--text-bright); }
-.nav-item.active { background: rgba(99,102,241,0.1); border-left-color: var(--primary); color: var(--primary-light); font-weight: 500; }
+.nav-item.active {
+    background: rgba(99,102,241,0.1);
+    border-left-color: var(--primary);
+    color: var(--primary-light);
+    font-weight: 500;
+}
 
-.nav-item .nav-icon { font-size: 1rem; width: 20px; text-align: center; }
+.nav-item .nav-icon {
+    font-size: 0.45rem;
+    width: 12px;
+    text-align: center;
+    color: var(--border-light);
+    flex-shrink: 0;
+}
 .nav-item .nav-badge {
     margin-left: auto;
-    font-size: 0.65rem;
+    font-size: 0.6rem;
     background: var(--bg-hover);
-    padding: 0.1rem 0.4rem;
+    padding: 0.1rem 0.35rem;
     border-radius: 10px;
     color: var(--text-muted);
+    min-width: 16px;
+    text-align: center;
 }
 
-.nav-children { margin-left: 1.2rem; }
-.nav-children .nav-item { font-size: 0.8rem; padding: 0.3rem 1rem; }
+/* Nested children (indented) */
+.nav-children { margin-left: 0; }
+.nav-children .nav-item { padding-left: 1.6rem; font-size: 0.8rem; }
+.nav-children .nav-children .nav-item { padding-left: 2.4rem; font-size: 0.78rem; }
+.nav-children .nav-children .nav-children .nav-item { padding-left: 3rem; font-size: 0.75rem; }
 
-/* ============================================
-   PHASE PROGRESS
-   ============================================ */
-.phase-progress {
-    display: flex; align-items: center; gap: 0.3rem;
-    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
+/* Module header in nav (collapsible) */
+.nav-module-header {
+    font-weight: 500;
+    color: var(--text-bright);
+    font-size: 0.85rem;
 }
-.phase-dot {
-    width: 24px; height: 24px; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 0.6rem; font-weight: 700; color: var(--text-muted);
-    background: var(--bg-hover); border: 2px solid var(--border);
-    transition: all var(--transition-fast);
+.nav-module-header:hover { color: var(--primary-light); }
+
+/* Section/Resource items in nav */
+.nav-section-item { margin-top: 0.1rem; }
+.nav-section-link { font-style: italic; }
+.nav-icon-section { font-size: 0.5rem; color: var(--accent); }
+.nav-icon-resource { font-size: 0.7rem; color: var(--border-light); }
+.nav-resource-link {
+    cursor: default;
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
 }
-.phase-dot.completed { background: var(--success); border-color: var(--success); color: #fff; }
-.phase-dot.current { background: var(--primary); border-color: var(--primary); color: #fff; }
-.phase-line { flex: 1; height: 2px; background: var(--border); }
-.phase-line.completed { background: var(--success); }
+.nav-resource-link:hover { background: transparent; color: var(--text-muted); }
+.nav-resources { margin-left: 0.5rem; }
 
 
 /* --- 04-cards.css --- */
@@ -806,6 +864,70 @@ body {
     margin-bottom: 0.2rem;
 }
 
+/* ============================================
+   STRUCTURE TAB (Sections/Resources)
+   ============================================ */
+.struct-section {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    overflow: hidden;
+}
+.struct-section-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg-hover);
+    border-bottom: 1px solid var(--border);
+}
+.struct-section-code {
+    font-weight: 600;
+    color: var(--text-bright);
+    font-size: 0.95rem;
+}
+.struct-section-desc {
+    flex: 1;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
+.struct-section-badge {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    background: rgba(99,102,241,0.1);
+    padding: 0.1rem 0.5rem;
+    border-radius: 4px;
+    white-space: nowrap;
+}
+.struct-resources {
+    padding: 0.5rem 0;
+}
+.struct-resource {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    padding: 0.35rem 1rem 0.35rem 1.5rem;
+    font-size: 0.85rem;
+    transition: background var(--transition-fast);
+}
+.struct-resource:hover {
+    background: var(--bg-hover);
+}
+.struct-resource-icon {
+    color: var(--primary-light);
+    font-size: 0.7rem;
+    flex-shrink: 0;
+}
+.struct-resource-name {
+    font-weight: 500;
+    color: var(--text-bright);
+}
+.struct-resource-desc {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
+
 
 /* --- 06-wireframes.css --- */
 /* ============================================
@@ -871,6 +993,48 @@ body {
 .svg-wireframe svg {
     max-width: 100%;
     height: auto;
+    display: block;
+}
+
+/* ============================================
+   WIREFRAME VIEW TOGGLE (SVG / ASCII)
+   ============================================ */
+.wireframe-toggle {
+    display: flex;
+    gap: 2px;
+    background: var(--bg-dark);
+    border-radius: 6px;
+    padding: 2px;
+    border: 1px solid var(--border);
+    margin-left: auto;
+}
+
+.wireframe-toggle-btn {
+    padding: 0.25rem 0.6rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    background: transparent;
+    color: var(--text-muted);
+    transition: all 0.15s ease;
+    font-family: inherit;
+}
+
+.wireframe-toggle-btn:hover {
+    color: var(--text-bright);
+    background: var(--bg-hover);
+}
+
+.wireframe-toggle-btn.active {
+    background: var(--primary);
+    color: #ffffff;
+}
+
+.wireframe-view:not(.active) {
+    display: none;
 }
 
 .wireframe-description {
@@ -1484,6 +1648,7 @@ body {
             <span class="header-app-name" id="appName">{{APPLICATION_NAME}}</span>
             <div class="header-spacer"></div>
             <div class="header-actions">
+                <button class="btn btn-sm" onclick="resetToEmbedded()" title="Reinitialiser depuis les donnees d'origine (supprime les modifications locales)">Reset</button>
                 <button class="btn btn-sm" onclick="saveToLocalStorage()" title="Sauvegarder les modifications dans le navigateur">Sauvegarder</button>
                 <button class="btn btn-sm btn-review" onclick="saveReviewJSON()" title="Sauvegarder les corrections pour creer une nouvelle version">Sauvegarder corrections</button>
                 <button class="btn btn-sm btn-primary" onclick="exportJSON()" title="Exporter les donnees au format JSON pour l'extraction">Exporter JSON</button>
@@ -1496,85 +1661,16 @@ body {
 
         <div class="body" id="appBody">
             <!-- ============================================
-                 SIDEBAR - Navigation 5 niveaux
+                 SIDEBAR - Navigation hierarchique
                  ============================================ -->
             <aside class="sidebar">
-                <!-- Phase Progress -->
-                <div class="phase-progress">
-                    <div class="phase-dot current" id="phase-1" title="Cadrage">1</div>
-                    <div class="phase-line" id="pline-1"></div>
-                    <div class="phase-dot" id="phase-2" title="Decomposition">2</div>
-                    <div class="phase-line" id="pline-2"></div>
-                    <div class="phase-dot" id="phase-3" title="Specification">3</div>
-                    <div class="phase-line" id="pline-3"></div>
-                    <div class="phase-dot" id="phase-4" title="Consolidation">4</div>
-                    <div class="phase-line" id="pline-4"></div>
-                    <div class="phase-dot" id="phase-5" title="Synthese">5</div>
-                </div>
-
-                <!-- Phase 1 : Cadrage -->
-                <div class="nav-group">
-                    <div class="nav-group-title">1. Cadrage</div>
-                    <a class="nav-item active" onclick="showSection('cadrage-context')" data-section="cadrage-context">
-                        <span class="nav-icon">&#9679;</span> Contexte
-                    </a>
-                    <a class="nav-item" onclick="showSection('cadrage-stakeholders')" data-section="cadrage-stakeholders">
-                        <span class="nav-icon">&#9679;</span> Parties prenantes
-                        <span class="nav-badge" id="stakeholderCount">0</span>
-                    </a>
-                    <a class="nav-item" onclick="showSection('cadrage-scope')" data-section="cadrage-scope">
-                        <span class="nav-icon">&#9679;</span> Perimetre fonctionnel
-                    </a>
-                    <a class="nav-item" onclick="showSection('cadrage-risks')" data-section="cadrage-risks">
-                        <span class="nav-icon">&#9679;</span> Risques et hypotheses
-                    </a>
-                    <a class="nav-item" onclick="showSection('cadrage-success')" data-section="cadrage-success">
-                        <span class="nav-icon">&#9679;</span> Criteres de reussite
-                    </a>
-                </div>
-
-                <!-- Phase 2 : Decomposition -->
-                <div class="nav-group">
-                    <div class="nav-group-title">2. Decomposition</div>
-                    <a class="nav-item" onclick="showSection('decomp-modules')" data-section="decomp-modules">
-                        <span class="nav-icon">&#9679;</span> Domaines fonctionnels
-                        <span class="nav-badge" id="moduleCount">0</span>
-                    </a>
-                    <a class="nav-item" onclick="showSection('decomp-dependencies')" data-section="decomp-dependencies">
-                        <span class="nav-icon">&#9679;</span> Dependances
-                    </a>
-                </div>
-
-                <!-- Phase 3 : Specification par module -->
-                <div class="nav-group" id="modulesNav">
-                    <div class="nav-group-title">3. Specification</div>
-                    <!-- Populated dynamically per module -->
-                </div>
-
-                <!-- Phase 4 : Consolidation -->
-                <div class="nav-group">
-                    <div class="nav-group-title">4. Consolidation</div>
-                    <a class="nav-item" onclick="showSection('consol-datamodel')" data-section="consol-datamodel">
-                        <span class="nav-icon">&#9679;</span> Modele de donnees
-                        <span class="nav-badge" id="entityCount">0</span>
-                    </a>
-                    <a class="nav-item" onclick="showSection('consol-interactions')" data-section="consol-interactions">
-                        <span class="nav-icon">&#9679;</span> Interactions
-                    </a>
-                    <a class="nav-item" onclick="showSection('consol-permissions')" data-section="consol-permissions">
-                        <span class="nav-icon">&#9679;</span> Coherence des acces
-                    </a>
-                    <a class="nav-item" onclick="showSection('consol-flows')" data-section="consol-flows">
-                        <span class="nav-icon">&#9679;</span> Parcours bout en bout
-                    </a>
+                <!-- Application Name -->
+                <div class="sidebar-header">
+                    <span class="sidebar-app-name" id="sidebarAppName">{{APPLICATION_NAME}}</span>
                 </div>
-
-                <!-- Phase 5 : Synthese -->
-                <div class="nav-group">
-                    <div class="nav-group-title">5. Synthese</div>
-                    <a class="nav-item" onclick="showSection('handoff-summary')" data-section="handoff-summary">
-                        <span class="nav-icon">&#9679;</span> Vue d'ensemble
-                    </a>
+                <!-- Dynamic Tree Navigation -->
+                <div id="sidebarNav">
+                    <!-- Populated by buildNavTree() -->
                 </div>
             </aside>
 
@@ -2092,6 +2188,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;
@@ -2132,11 +2236,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();
 }
 
@@ -2184,7 +2284,8 @@ document.addEventListener('DOMContentLoaded', function() {
     renderConsolidation();
     renderHandoff();
     renderE2EFlows();
-    updateCounts();
+    buildNavTree();
+    updateDepSelects();
     initInlineComments();
     renderReviewPanel();
 });
@@ -2192,9 +2293,12 @@ document.addEventListener('DOMContentLoaded', function() {
 
 /* --- 02-navigation.js --- */
 /* ============================================
-   NAVIGATION
+   NAVIGATION - Hierarchical Tree
    ============================================ */
 let currentSectionId = 'cadrage-context';
+let navCollapseState = {};
+
+/* ---------- Core ---------- */
 
 function showSection(sectionId) {
     currentSectionId = sectionId;
@@ -2202,9 +2306,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() {
@@ -2214,6 +2339,187 @@ function restoreCurrentSection() {
     }
 }
 
+/* ---------- 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');
+}
+
 
 /* --- 03-render-cadrage.js --- */
 /* ============================================
@@ -2433,6 +2739,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'
     });
 
@@ -2489,14 +2796,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();
 }
 
 /* ============================================
@@ -2671,6 +2971,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 -->
@@ -2747,7 +3048,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}">
@@ -2824,6 +3130,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>`;
 }
 
@@ -3007,18 +3321,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">
@@ -3057,7 +3383,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() {
@@ -3181,6 +3527,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;
@@ -3189,7 +3576,7 @@ 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');
 }
 
@@ -3471,7 +3858,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>
@@ -3499,37 +3888,127 @@ 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); }
 }
 
 
@@ -3999,6 +4478,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) {