@atlashub/smartstack-cli 4.41.0 → 4.42.0

package/templates/skills/{ba-generate-html → business-analyse-html}/html/build-html.js

@@ -60,8 +60,28 @@ function resolvePartials(template) {
     return resolved;
 }
 
+function minifyCss(css) {
+    return css
+        .replace(/\/\*[\s\S]*?\*\//g, '')   // remove comments
+        .replace(/\s*([{}:;,>~+])\s*/g, '$1') // remove whitespace around symbols
+        .replace(/\s+/g, ' ')                // collapse whitespace
+        .replace(/;\s*}/g, '}')              // remove trailing semicolons
+        .trim();
+}
+
+function minifyJs(js) {
+    // Light minification — remove comments and collapse whitespace (no AST transform)
+    return js
+        .replace(/\/\*[\s\S]*?\*\//g, '')    // remove block comments
+        .replace(/\/\/.*$/gm, '')             // remove line comments
+        .replace(/^\s*\n/gm, '')              // remove empty lines
+        .replace(/\n\s+/g, '\n')              // reduce leading whitespace
+        .trim();
+}
+
 function build() {
-    console.log('[build-html] Starting build...');
+    const doMinify = process.argv.includes('--minify');
+    console.log('[build-html] Starting build...' + (doMinify ? ' (minified)' : ''));
 
     // Read template
     if (!fs.existsSync(TEMPLATE_FILE)) {
@@ -80,12 +100,14 @@ function build() {
     // Read and concatenate CSS files
     const cssFiles = readSortedFiles(STYLES_DIR, '.css');
     console.log(`[build-html] CSS files: ${cssFiles.map(f => f.name).join(', ')}`);
-    const css = cssFiles.map(f => `/* --- ${f.name} --- */\n${f.content}`).join('\n\n');
+    let css = cssFiles.map(f => `/* --- ${f.name} --- */\n${f.content}`).join('\n\n');
+    if (doMinify) css = minifyCss(css);
 
     // Read and concatenate JS files
     const jsFiles = readSortedFiles(SCRIPTS_DIR, '.js');
     console.log(`[build-html] JS files: ${jsFiles.map(f => f.name).join(', ')}`);
-    const js = jsFiles.map(f => `/* --- ${f.name} --- */\n${f.content}`).join('\n\n');
+    let js = jsFiles.map(f => `/* --- ${f.name} --- */\n${f.content}`).join('\n\n');
+    if (doMinify) js = minifyJs(js);
 
     // Inject into template
     template = template.replace('<!-- CSS_PLACEHOLDER -->', css);

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/01-data-init.js

@@ -73,8 +73,23 @@ data.moduleSpecs = data.moduleSpecs || {};
     if (!data.moduleSpecs[m.code].screens) {
         data.moduleSpecs[m.code].screens = [];
     }
+    // Ensure sections have initialized arrays for hierarchical data
+    m.anticipatedSections.forEach(function(section) {
+        section.useCases = section.useCases || [];
+        section.businessRules = section.businessRules || [];
+        section.resources = section.resources || [];
+        section.permission = section.permission || '';
+        section.route = section.route || '';
+    });
 });
 
+// Detect if modules use section-level specs (hierarchical mode)
+function hasHierarchicalSpecs(mod) {
+    return (mod.anticipatedSections || []).some(function(s) {
+        return (s.useCases && s.useCases.length > 0) || (s.businessRules && s.businessRules.length > 0);
+    });
+}
+
 // Defensive: normalize stakeholder tasks (string → array)
 (data.cadrage.stakeholders || []).forEach(function(s) {
     if (typeof s.tasks === 'string') {
@@ -146,6 +161,45 @@ function formatModuleType(t) {
     return { 'data-centric': 'Données', 'workflow': 'Processus', 'reporting': 'Rapports', 'integration': 'Intégration', 'full-module': 'Complet' }[t] || t;
 }
 
+function escapeHtml(s) {
+    if (s == null) return '';
+    var d = document.createElement('div');
+    d.textContent = String(s);
+    return d.innerHTML;
+}
+
+function computeProgress() {
+    var totalModules = data.modules.length;
+    var modulesWithUC = 0, modulesWithBR = 0, modulesWithEntities = 0, modulesWithWireframes = 0;
+    var totalUCs = 0, totalBRs = 0, totalEntities = 0;
+
+    data.modules.forEach(function(m) {
+        var spec = data.moduleSpecs[m.code] || {};
+        var ucs = (spec.useCases || []).length;
+        var brs = (spec.businessRules || []).length;
+        var ents = (spec.entities || []).length;
+        var wfs = (EMBEDDED_ARTIFACTS?.wireframes?.[m.code] || []).length + (spec.screens || []).length;
+        totalUCs += ucs; totalBRs += brs; totalEntities += ents;
+        if (ucs > 0) modulesWithUC++;
+        if (brs > 0) modulesWithBR++;
+        if (ents > 0) modulesWithEntities++;
+        if (wfs > 0) modulesWithWireframes++;
+    });
+
+    var checks = [];
+    if (totalModules > 0) checks.push({ done: true, label: 'Modules définis (' + totalModules + ')' });
+    checks.push({ done: modulesWithUC === totalModules && totalModules > 0, label: 'Cas d\'utilisation (' + modulesWithUC + '/' + totalModules + ' modules)' });
+    checks.push({ done: modulesWithBR === totalModules && totalModules > 0, label: 'Règles métier (' + modulesWithBR + '/' + totalModules + ' modules)' });
+    checks.push({ done: modulesWithEntities === totalModules && totalModules > 0, label: 'Données (' + modulesWithEntities + '/' + totalModules + ' modules)' });
+    checks.push({ done: modulesWithWireframes === totalModules && totalModules > 0, label: 'Maquettes (' + modulesWithWireframes + '/' + totalModules + ' modules)' });
+    checks.push({ done: data.cadrage.stakeholders.length > 0, label: 'Parties prenantes (' + data.cadrage.stakeholders.length + ')' });
+    checks.push({ done: (data.cadrage.scope.inscope || []).length > 0, label: 'Périmètre défini' });
+
+    var doneCount = checks.filter(function(c) { return c.done; }).length;
+    var pct = checks.length > 0 ? Math.round(doneCount / checks.length * 100) : 0;
+    return { checks: checks, doneCount: doneCount, total: checks.length, pct: pct, totalUCs: totalUCs, totalBRs: totalBRs, totalEntities: totalEntities };
+}
+
 /* ============================================
    INITIALIZATION
    ============================================ */

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/02-navigation.js

@@ -174,17 +174,20 @@ function renderModuleNavItem(mod) {
     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> ' + section.code;
-            if (resources.length > 0) html += ' <span class="nav-badge">' + resources.length + '</span>';
+            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">';
-                    html += '<span class="nav-icon nav-icon-resource">&#8226;</span> ' + resName;
+                    html += '<span class="nav-icon nav-icon-resource">&#8226;</span> ' + escapeHtml(resName);
                     html += '</a>';
                 });
                 html += '</div>';
@@ -250,3 +253,94 @@ function highlightActiveNavItem() {
     var navItem = document.querySelector('#sidebarNav [data-section="' + currentSectionId + '"]');
     if (navItem) navItem.classList.add('active');
 }
+
+/* ---------- Mobile Sidebar ---------- */
+
+function toggleMobileSidebar() {
+    var sidebar = document.getElementById('sidebarAside');
+    var overlay = document.getElementById('sidebarOverlay');
+    if (!sidebar) return;
+    var isOpen = sidebar.classList.contains('mobile-open');
+    sidebar.classList.toggle('mobile-open', !isOpen);
+    if (overlay) overlay.classList.toggle('visible', !isOpen);
+}
+
+/* ---------- Search / Filter ---------- */
+
+var _searchTimer;
+function filterNavItems(query) {
+    clearTimeout(_searchTimer);
+    _searchTimer = setTimeout(function() { doFilterNavItems(query); }, 200);
+}
+
+function doFilterNavItems(query) {
+    var q = (query || '').toLowerCase().trim();
+    var nav = document.getElementById('sidebarNav');
+    if (!nav) return;
+
+    // Clear previous highlights
+    nav.querySelectorAll('.search-highlight').forEach(function(el) {
+        el.outerHTML = el.textContent;
+    });
+
+    if (!q) {
+        // Show all items
+        nav.querySelectorAll('.nav-item, .nav-group, .nav-module, .nav-section-item').forEach(function(el) {
+            el.classList.remove('search-hidden');
+        });
+        return;
+    }
+
+    // Filter nav items
+    var allItems = nav.querySelectorAll('.nav-item');
+    var visibleSections = new Set();
+
+    allItems.forEach(function(item) {
+        var text = item.textContent.toLowerCase();
+        if (text.includes(q)) {
+            item.classList.remove('search-hidden');
+            // Show parent groups
+            var parent = item.parentElement;
+            while (parent && parent.id !== 'sidebarNav') {
+                parent.classList.remove('search-hidden');
+                if (parent.querySelector(':scope > .nav-children')) {
+                    var children = parent.querySelector(':scope > .nav-children');
+                    if (children) children.style.display = '';
+                }
+                parent = parent.parentElement;
+            }
+            // Track section for content search
+            var sectionId = item.dataset.section;
+            if (sectionId) visibleSections.add(sectionId);
+        } else {
+            item.classList.add('search-hidden');
+        }
+    });
+
+    // Hide groups that have no visible children
+    nav.querySelectorAll('.nav-group, .nav-module').forEach(function(group) {
+        var visibleChildren = group.querySelectorAll('.nav-item:not(.search-hidden)');
+        if (visibleChildren.length === 0) {
+            group.classList.add('search-hidden');
+        } else {
+            group.classList.remove('search-hidden');
+        }
+    });
+
+    // Also search in section content and show matching sections
+    document.querySelectorAll('.section').forEach(function(section) {
+        var text = section.textContent.toLowerCase();
+        if (text.includes(q) && !visibleSections.has(section.id)) {
+            // Unhide corresponding nav item
+            var navItem = nav.querySelector('[data-section="' + section.id + '"]');
+            if (navItem) {
+                navItem.classList.remove('search-hidden');
+                var parent = navItem.parentElement;
+                while (parent && parent.id !== 'sidebarNav') {
+                    parent.classList.remove('search-hidden');
+                    parent = parent.parentElement;
+                }
+            }
+        }
+    });
+}

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/03-render-cadrage.js

@@ -42,23 +42,24 @@ function renderStakeholders() {
     grid.innerHTML = data.cadrage.stakeholders.map((s, i) => `
         <div class="stakeholder-card">
             <div style="display:flex;justify-content:space-between;align-items:start;">
-                <div class="stakeholder-role">${s.role}</div>
+                <div class="stakeholder-role">${escapeHtml(s.role)}</div>
                 <button class="btn btn-sm" onclick="removeStakeholder(${i})" style="opacity:0.5;font-size:0.7rem;">Supprimer</button>
             </div>
-            <div class="stakeholder-function">${s.function || ''}</div>
+            <div class="stakeholder-function">${escapeHtml(s.function || '')}</div>
             <ul class="stakeholder-tasks">
-                ${(Array.isArray(s.tasks) ? s.tasks : typeof s.tasks === 'string' ? s.tasks.split(',').map(t => t.trim()).filter(Boolean) : []).map(t => '<li>' + t + '</li>').join('')}
+                ${(Array.isArray(s.tasks) ? s.tasks : typeof s.tasks === 'string' ? s.tasks.split(',').map(t => t.trim()).filter(Boolean) : []).map(t => '<li>' + escapeHtml(t) + '</li>').join('')}
             </ul>
             <div class="stakeholder-meta">
                 <span>${formatFrequency(s.frequency)}</span>
                 <span>${formatAccess(s.access)}</span>
             </div>
-            ${s.frustrations ? '<div style="font-size:0.8rem;color:var(--warning);margin-top:0.5rem;font-style:italic;">' + s.frustrations + '</div>' : ''}
+            ${s.frustrations ? '<div style="font-size:0.8rem;color:var(--warning);margin-top:0.5rem;font-style:italic;">' + escapeHtml(s.frustrations) + '</div>' : ''}
         </div>
     `).join('');
 }
 
 function removeStakeholder(index) {
+    if (!confirm('Supprimer ce profil utilisateur ?')) return;
     data.cadrage.stakeholders.splice(index, 1);
     renderStakeholders();
     updateCounts();
@@ -89,12 +90,12 @@ function renderScope() {
             <div class="uc-item">
                 <div class="uc-header">
                     <span class="priority priority-${p}">${formatPriority(p)}</span>
-                    <span class="uc-title">${item.name}</span>
+                    <span class="uc-title">${escapeHtml(item.name)}</span>
                     <div class="uc-actions">
                         <button class="btn btn-sm" onclick="removeScopeItem('${p}',${i})">Supprimer</button>
                     </div>
                 </div>
-                ${item.description ? '<div class="uc-detail">' + item.description + '</div>' : ''}
+                ${item.description ? '<div class="uc-detail">' + escapeHtml(item.description) + '</div>' : ''}
             </div>
         `).join('');
     });
@@ -139,7 +140,7 @@ function renderCriteria() {
     container.innerHTML = criteria.map((c, i) => `
         <div class="uc-item" style="display:flex;align-items:center;gap:0.75rem;">
             <input type="checkbox" ${c.validated ? 'checked' : ''} onchange="toggleCriterion(${i})" style="cursor:pointer;width:18px;height:18px;flex-shrink:0;">
-            <span style="flex:1;${c.validated ? 'text-decoration:line-through;color:var(--text-muted);' : ''}">${c.text}</span>
+            <span style="flex:1;${c.validated ? 'text-decoration:line-through;color:var(--text-muted);' : ''}">${escapeHtml(c.text)}</span>
             <button class="btn btn-sm" onclick="removeCriterion(${i})" style="opacity:0.5;flex-shrink:0;">&#10005;</button>
         </div>
     `).join('');

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/04-render-modules.js

@@ -55,10 +55,10 @@ function renderModules() {
         <div class="module-card" onclick="showSection('module-spec-${m.code}')">
             <button class="module-card-remove" onclick="event.stopPropagation();removeModule(${i})">&#10005;</button>
             <div class="module-card-header">
-                <span class="module-card-code">${m.name}</span>
+                <span class="module-card-code">${escapeHtml(m.name)}</span>
                 <span class="module-card-type">${formatModuleType(m.featureType)}</span>
             </div>
-            <div class="module-card-desc">${m.description || ''}</div>
+            <div class="module-card-desc">${escapeHtml(m.description || '')}</div>
             <div class="module-card-meta">
                 <span>${(m.entities || []).length} données</span>
                 <span>${(data.moduleSpecs[m.code]?.useCases || []).length} cas d'utilisation</span>
@@ -115,10 +115,10 @@ function renderDependencies() {
             const toName = data.modules.find(m => m.code === d.to)?.name || d.to;
             return `
                 <div class="interaction-item">
-                    <span style="font-weight:600;color:var(--text-bright);">${fromName}</span>
+                    <span style="font-weight:600;color:var(--text-bright);">${escapeHtml(fromName)}</span>
                     <span class="interaction-arrow">&#8594;</span>
-                    <span style="font-weight:600;color:var(--text-bright);">${toName}</span>
-                    <span style="flex:1;font-size:0.8rem;color:var(--text-muted);">${d.description || ''}</span>
+                    <span style="font-weight:600;color:var(--text-bright);">${escapeHtml(toName)}</span>
+                    <span style="flex:1;font-size:0.8rem;color:var(--text-muted);">${escapeHtml(d.description || '')}</span>
                     <button class="btn btn-sm" onclick="removeDependency(${i})" style="opacity:0.5;">Supprimer</button>
                 </div>
             `;
@@ -147,7 +147,7 @@ function renderDepGraph() {
             <div class="dep-layer-modules">
                 ${layer.map(code => {
                     const m = data.modules.find(mod => mod.code === code);
-                    return `<div class="dep-module">${m ? (m.name || m.code) : code}</div>`;
+                    return `<div class="dep-module">${escapeHtml(m ? (m.name || m.code) : code)}</div>`;
                 }).join('')}
             </div>
         </div>
@@ -195,7 +195,7 @@ function renderProcessingOrder() {
         return `
             <div class="process-step">
                 <div class="process-step-number">Étape ${i + 1}</div>
-                <div class="process-step-label">${m ? (m.name || m.code) : code}</div>
+                <div class="process-step-label">${escapeHtml(m ? (m.name || m.code) : code)}</div>
             </div>
             ${i < order.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
         `;