@atlashub/smartstack-cli 3.7.0 → 3.8.0

package/templates/skills/business-analyse/html/build-html.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+/**
+ * Build script for ba-interactive.html
+ *
+ * Assembles the HTML template from split source files:
+ * - src/template.html (shell with placeholders)
+ * - src/styles/*.css (concatenated in alphabetical order)
+ * - src/scripts/*.js (concatenated in alphabetical order)
+ *
+ * Output: ba-interactive.html (single file, compatible with file:// protocol)
+ *
+ * Preserves template placeholders: {{FEATURE_DATA}}, {{EMBEDDED_ARTIFACTS}}, {{APPLICATION_NAME}}, {{APPLICATION_ID}}
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const SRC_DIR = path.join(__dirname, 'src');
+const STYLES_DIR = path.join(SRC_DIR, 'styles');
+const SCRIPTS_DIR = path.join(SRC_DIR, 'scripts');
+const TEMPLATE_FILE = path.join(SRC_DIR, 'template.html');
+const OUTPUT_FILE = path.join(__dirname, 'ba-interactive.html');
+
+function readSortedFiles(dir, extension) {
+    const files = fs.readdirSync(dir)
+        .filter(f => f.endsWith(extension))
+        .sort();
+
+    return files.map(f => {
+        const content = fs.readFileSync(path.join(dir, f), 'utf8');
+        return { name: f, content };
+    });
+}
+
+function build() {
+    console.log('[build-html] Starting build...');
+
+    // Read template
+    if (!fs.existsSync(TEMPLATE_FILE)) {
+        console.error('[build-html] ERROR: Template not found at', TEMPLATE_FILE);
+        process.exit(1);
+    }
+    let template = fs.readFileSync(TEMPLATE_FILE, 'utf8');
+
+    // 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');
+
+    // 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');
+
+    // Inject into template
+    template = template.replace('<!-- CSS_PLACEHOLDER -->', css);
+    template = template.replace('<!-- JS_PLACEHOLDER -->', js);
+
+    // Verify placeholders are preserved
+    const requiredPlaceholders = ['{{FEATURE_DATA}}', '{{EMBEDDED_ARTIFACTS}}', '{{APPLICATION_NAME}}'];
+    const missing = requiredPlaceholders.filter(p => !template.includes(p));
+    if (missing.length > 0) {
+        console.error('[build-html] ERROR: Missing placeholders:', missing.join(', '));
+        process.exit(1);
+    }
+
+    // Write output
+    fs.writeFileSync(OUTPUT_FILE, template, 'utf8');
+
+    const sizeKB = Math.round(fs.statSync(OUTPUT_FILE).size / 1024);
+    console.log(`[build-html] Output: ${OUTPUT_FILE} (${sizeKB} KB)`);
+    console.log(`[build-html] CSS: ${cssFiles.length} files, JS: ${jsFiles.length} files`);
+    console.log('[build-html] Build complete.');
+}
+
+build();

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

@@ -0,0 +1,129 @@
+/* ============================================
+   DATA STORE
+   ============================================ */
+const APP_KEY = 'ba-{{APPLICATION_ID}}';
+let data = {{FEATURE_DATA}};
+const EMBEDDED_ARTIFACTS = {{EMBEDDED_ARTIFACTS}};
+
+// Initialize optional data structures
+data.wireframeComments = data.wireframeComments || {};
+data.specComments = data.specComments || {};
+data.customRoles = data.customRoles || [];
+data.customActions = data.customActions || [];
+data.cadrage.criteria = data.cadrage.criteria || [];
+data.cadrage.risks = data.cadrage.risks || [];
+data.consolidation = data.consolidation || {};
+data.consolidation.e2eFlows = data.consolidation.e2eFlows || [];
+
+// Initialize comments array
+data.comments = data.comments || [];
+
+// Defensive mapping: globalScope (feature.json format) -> scope (HTML format)
+// Handles cases where FEATURE_DATA contains raw globalScope instead of pre-mapped scope
+if (!data.cadrage.scope || (!data.cadrage.scope.vital?.length && data.cadrage.globalScope)) {
+    const gs = data.cadrage.globalScope || {};
+    data.cadrage.scope = {
+        vital: (gs.mustHave || []).map(s => typeof s === 'string' ? { name: s, description: '' } : s),
+        important: (gs.shouldHave || []).map(s => typeof s === 'string' ? { name: s, description: '' } : s),
+        optional: (gs.couldHave || []).map(s => typeof s === 'string' ? { name: s, description: '' } : s),
+        excluded: (gs.outOfScope || []).map(s => typeof s === 'string' ? { name: s, description: '' } : s)
+    };
+}
+data.cadrage.scope = data.cadrage.scope || { vital: [], important: [], optional: [], excluded: [] };
+
+// Defensive init: moduleSpecs (may be missing if LLM didn't follow mapping)
+data.moduleSpecs = data.moduleSpecs || {};
+
+// Vibe coding mode: hide non-relevant sections
+const isVibeCoding = data.metadata?.vibeCoding === true;
+if (isVibeCoding) {
+    document.querySelectorAll('[data-vibe-hide]').forEach(el => el.style.display = 'none');
+}
+
+/* ============================================
+   UTILITIES
+   ============================================ */
+function showNotification(message) {
+    const el = document.getElementById('notification');
+    el.textContent = message;
+    el.classList.add('visible');
+    setTimeout(() => el.classList.remove('visible'), 2500);
+}
+
+function toggleForm(formId) {
+    document.getElementById(formId).classList.toggle('visible');
+}
+
+function clearForm(formId) {
+    document.querySelectorAll('#' + formId + ' input, #' + formId + ' textarea').forEach(el => el.value = '');
+}
+
+function getNestedValue(obj, path) {
+    return path.split('.').reduce((o, k) => (o || {})[k], obj);
+}
+
+function setNestedValue(obj, path, value) {
+    const keys = path.split('.');
+    let current = obj;
+    for (let i = 0; i < keys.length - 1; i++) {
+        if (!current[keys[i]]) current[keys[i]] = {};
+        current = current[keys[i]];
+    }
+    current[keys[keys.length - 1]] = value;
+}
+
+function updateCounts() {
+    document.getElementById('stakeholderCount').textContent = data.cadrage.stakeholders.length;
+    document.getElementById('moduleCount').textContent = data.modules.length;
+    updateModulesNav();
+    updateDepSelects();
+}
+
+function formatFrequency(f) {
+    return { daily: 'Quotidien', weekly: 'Hebdomadaire', monthly: 'Mensuel', occasional: 'Occasionnel' }[f] || f;
+}
+
+function formatAccess(a) {
+    return { admin: 'Administration', manager: 'Supervision', contributor: 'Contribution', viewer: 'Consultation' }[a] || a;
+}
+
+function formatPriority(p) {
+    return { vital: 'Indispensable', important: 'Important', optional: 'Optionnel', excluded: 'Hors perimetre' }[p] || p;
+}
+
+function formatLevel(l) {
+    return { high: 'Fort', medium: 'Moyen', low: 'Faible' }[l] || l;
+}
+
+function formatModuleType(t) {
+    return { 'data-centric': 'Donnees', 'workflow': 'Processus', 'reporting': 'Rapports', 'integration': 'Integration', 'full-module': 'Complet' }[t] || t;
+}
+
+function formatModulePriority(p) {
+    return { must: 'Indispensable', should: 'Important', could: 'Optionnel' }[p] || p;
+}
+
+/* ============================================
+   INITIALIZATION
+   ============================================ */
+document.addEventListener('DOMContentLoaded', function() {
+    loadFromLocalStorage();
+    initEditableFields();
+    // Re-apply vibe hiding after DOM init (in case loadFromLocalStorage changed data)
+    if (isVibeCoding) {
+        document.querySelectorAll('[data-vibe-hide]').forEach(el => el.style.display = 'none');
+    }
+    renderStakeholders();
+    renderScope();
+    renderRisks();
+    renderCriteria();
+    renderModules();
+    renderDependencies();
+    renderAllModuleSpecs();
+    renderConsolidation();
+    renderHandoff();
+    renderE2EFlows();
+    updateCounts();
+    initInlineComments();
+    renderReviewPanel();
+});

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

@@ -0,0 +1,22 @@
+/* ============================================
+   NAVIGATION
+   ============================================ */
+let currentSectionId = 'cadrage-problem';
+
+function showSection(sectionId) {
+    currentSectionId = sectionId;
+    document.querySelectorAll('.section').forEach(s => s.style.display = 'none');
+    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');
+}
+
+function restoreCurrentSection() {
+    if (currentSectionId) {
+        const section = document.getElementById(currentSectionId);
+        if (section) section.style.display = 'block';
+    }
+}

package/templates/skills/business-analyse/html/src/scripts/03-render-cadrage.js

@@ -0,0 +1,208 @@
+/* ============================================
+   EDITABLE FIELDS
+   ============================================ */
+function initEditableFields() {
+    document.querySelectorAll('.editable[data-field]').forEach(el => {
+        const field = el.dataset.field;
+        const value = getNestedValue(data, 'cadrage.' + field);
+        if (value) el.textContent = value;
+
+        el.addEventListener('blur', function() {
+            setNestedValue(data, 'cadrage.' + field, this.textContent.trim());
+            autoSave();
+        });
+    });
+}
+
+/* ============================================
+   STAKEHOLDERS
+   ============================================ */
+function addStakeholder() {
+    const role = document.getElementById('sh-role').value.trim();
+    if (!role) return;
+
+    data.cadrage.stakeholders.push({
+        role: role,
+        function: document.getElementById('sh-function').value.trim(),
+        tasks: document.getElementById('sh-tasks').value.split('\n').filter(t => t.trim()),
+        frequency: document.getElementById('sh-frequency').value,
+        access: document.getElementById('sh-access').value,
+        frustrations: document.getElementById('sh-frustrations').value.trim()
+    });
+
+    renderStakeholders();
+    toggleForm('addStakeholderForm');
+    clearForm('addStakeholderForm');
+    updateCounts();
+    autoSave();
+}
+
+function renderStakeholders() {
+    const grid = document.getElementById('stakeholderGrid');
+    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>
+                <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>
+            <ul class="stakeholder-tasks">
+                ${(s.tasks || []).map(t => '<li>' + 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>' : ''}
+        </div>
+    `).join('');
+}
+
+function removeStakeholder(index) {
+    data.cadrage.stakeholders.splice(index, 1);
+    renderStakeholders();
+    updateCounts();
+    autoSave();
+}
+
+/* ============================================
+   SCOPE ITEMS
+   ============================================ */
+function addScopeItem(priority) {
+    const name = document.getElementById('scope-name-' + priority).value.trim();
+    if (!name) return;
+    const description = document.getElementById('scope-desc-' + priority).value.trim();
+
+    data.cadrage.scope[priority].push({ name, description });
+    renderScope();
+    toggleForm('addScopeForm-' + priority);
+    document.getElementById('scope-name-' + priority).value = '';
+    document.getElementById('scope-desc-' + priority).value = '';
+    autoSave();
+}
+
+function renderScope() {
+    ['vital', 'important', 'optional', 'excluded'].forEach(p => {
+        const container = document.getElementById('scope' + p.charAt(0).toUpperCase() + p.slice(1));
+        container.innerHTML = data.cadrage.scope[p].map((item, i) => `
+            <div class="uc-item">
+                <div class="uc-header">
+                    <span class="priority priority-${p}">${formatPriority(p)}</span>
+                    <span class="uc-title">${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>' : ''}
+            </div>
+        `).join('');
+    });
+}
+
+function removeScopeItem(priority, index) {
+    data.cadrage.scope[priority].splice(index, 1);
+    renderScope();
+    autoSave();
+}
+
+/* ============================================
+   ACCEPTANCE CRITERIA
+   ============================================ */
+function addCriterion() {
+    const text = document.getElementById('criterion-text').value.trim();
+    if (!text) return;
+    if (!data.cadrage.criteria) data.cadrage.criteria = [];
+    data.cadrage.criteria.push({ text, validated: false });
+    renderCriteria();
+    toggleForm('addCriterionForm');
+    document.getElementById('criterion-text').value = '';
+    autoSave();
+}
+
+function removeCriterion(index) {
+    data.cadrage.criteria.splice(index, 1);
+    renderCriteria();
+    autoSave();
+}
+
+function toggleCriterion(index) {
+    data.cadrage.criteria[index].validated = !data.cadrage.criteria[index].validated;
+    renderCriteria();
+    autoSave();
+}
+
+function renderCriteria() {
+    const container = document.getElementById('criteriaList');
+    if (!container) return;
+    const criteria = data.cadrage.criteria || [];
+    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>
+            <button class="btn btn-sm" onclick="removeCriterion(${i})" style="opacity:0.5;flex-shrink:0;">&#10005;</button>
+        </div>
+    `).join('');
+}
+
+/* ============================================
+   RISKS
+   ============================================ */
+function addRisk() {
+    const desc = document.getElementById('risk-desc').value.trim();
+    if (!desc) return;
+
+    data.cadrage.risks.push({
+        description: desc,
+        probability: document.getElementById('risk-probability').value,
+        impact: document.getElementById('risk-impact').value,
+        mitigation: document.getElementById('risk-mitigation').value.trim()
+    });
+
+    renderRisks();
+    toggleForm('addRiskForm');
+    clearForm('addRiskForm');
+    autoSave();
+}
+
+function renderRisks() {
+    const list = document.getElementById('risksList');
+    list.innerHTML = data.cadrage.risks.map((r, i) => {
+        const level = (r.probability === 'high' && r.impact === 'high') ? 'critical'
+            : (r.probability === 'low' && r.impact === 'low') ? 'low' : 'medium';
+        return `
+            <div class="risk-item">
+                <div class="risk-level risk-${level}"></div>
+                <div>
+                    <div class="risk-text">${r.description}</div>
+                    ${r.mitigation ? '<div style="font-size:0.75rem;color:var(--text-muted);margin-top:0.25rem;">Prevention : ' + r.mitigation + '</div>' : ''}
+                </div>
+                <div class="risk-probability">${formatLevel(r.probability)}</div>
+                <div class="risk-impact">${formatLevel(r.impact)}</div>
+            </div>
+        `;
+    }).join('');
+}
+
+/* ============================================
+   PROCESS STEPS
+   ============================================ */
+function addProcessStep() {
+    const label = prompt('Nom de l\'etape :');
+    if (!label) return;
+    if (!data.cadrage.current.steps) data.cadrage.current.steps = [];
+    data.cadrage.current.steps.push(label);
+    renderProcessFlow();
+    autoSave();
+}
+
+function renderProcessFlow() {
+    const container = document.getElementById('processFlow');
+    const steps = data.cadrage.current.steps || [];
+    container.innerHTML = steps.map((step, i) => `
+        <div class="process-step">
+            <div class="process-step-number">Etape ${i + 1}</div>
+            <div class="process-step-label">${step}</div>
+        </div>
+        ${i < steps.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
+    `).join('');
+}

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

@@ -0,0 +1,211 @@
+/* ============================================
+   MODULE MANAGEMENT
+   ============================================ */
+function addModule() {
+    const name = document.getElementById('mod-name').value.trim();
+    if (!name) return;
+    const code = name.replace(/[^a-zA-Z0-9]/g, '');
+
+    data.modules.push({
+        code: code,
+        name: name,
+        description: document.getElementById('mod-desc').value.trim(),
+        featureType: document.getElementById('mod-type').value,
+        priority: document.getElementById('mod-priority').value,
+        entities: document.getElementById('mod-entities').value.split('\n').filter(e => e.trim()),
+        status: 'pending'
+    });
+
+    // Initialize module spec
+    if (!data.moduleSpecs[code]) {
+        data.moduleSpecs[code] = {
+            useCases: [],
+            businessRules: [],
+            entities: [],
+            permissions: [],
+            notes: ''
+        };
+    }
+
+    renderModules();
+    renderDependencies();
+    renderAllModuleSpecs();
+    toggleForm('addModuleForm');
+    clearForm('addModuleForm');
+    updateCounts();
+    autoSave();
+}
+
+function removeModule(index) {
+    if (!confirm('Supprimer ce domaine fonctionnel ?')) return;
+    const code = data.modules[index].code;
+    data.modules.splice(index, 1);
+    delete data.moduleSpecs[code];
+    data.dependencies = data.dependencies.filter(d => d.from !== code && d.to !== code);
+    renderModules();
+    renderDependencies();
+    renderAllModuleSpecs();
+    updateCounts();
+    autoSave();
+}
+
+function renderModules() {
+    const grid = document.getElementById('moduleGrid');
+    grid.innerHTML = data.modules.map((m, i) => `
+        <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-type">${formatModuleType(m.featureType)}</span>
+            </div>
+            <div class="module-card-desc">${m.description || ''}</div>
+            <div class="module-card-meta">
+                <span class="priority priority-${m.priority === 'must' ? 'vital' : m.priority === 'should' ? 'important' : 'optional'}">${formatModulePriority(m.priority)}</span>
+                <span>${(m.entities || []).length} donnees</span>
+                <span>${(data.moduleSpecs[m.code]?.useCases || []).length} cas d'utilisation</span>
+            </div>
+        </div>
+    `).join('') || '<p style="color:var(--text-muted);text-align:center;padding:2rem;grid-column:1/-1;">Aucun domaine fonctionnel defini. Cliquez sur le bouton ci-dessous pour commencer.</p>';
+}
+
+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>');
+}
+
+/* ============================================
+   DEPENDENCY MANAGEMENT
+   ============================================ */
+function updateDepSelects() {
+    const fromSel = document.getElementById('dep-from');
+    const toSel = document.getElementById('dep-to');
+    if (!fromSel || !toSel) return;
+    const opts = data.modules.map(m => `<option value="${m.code}">${m.name}</option>`).join('');
+    fromSel.innerHTML = opts;
+    toSel.innerHTML = opts;
+}
+
+function addDependency() {
+    const from = document.getElementById('dep-from').value;
+    const to = document.getElementById('dep-to').value;
+    if (!from || !to || from === to) return;
+    if (data.dependencies.some(d => d.from === from && d.to === to)) return;
+
+    data.dependencies.push({
+        from: from,
+        to: to,
+        description: document.getElementById('dep-desc').value.trim()
+    });
+    document.getElementById('dep-desc').value = '';
+
+    renderDependencies();
+    autoSave();
+}
+
+function removeDependency(index) {
+    data.dependencies.splice(index, 1);
+    renderDependencies();
+    autoSave();
+}
+
+function renderDependencies() {
+    // Render dependency list
+    const depList = document.getElementById('depList');
+    if (depList) {
+        depList.innerHTML = data.dependencies.map((d, i) => {
+            const fromName = data.modules.find(m => m.code === d.from)?.name || d.from;
+            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 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>
+                    <button class="btn btn-sm" onclick="removeDependency(${i})" style="opacity:0.5;">Supprimer</button>
+                </div>
+            `;
+        }).join('');
+    }
+
+    // Render graph
+    renderDepGraph();
+    // Render processing order
+    renderProcessingOrder();
+}
+
+function renderDepGraph() {
+    const graph = document.getElementById('depGraph');
+    if (!graph || data.modules.length === 0) return;
+
+    const layers = computeTopologicalLayers();
+    if (!layers) {
+        graph.innerHTML = '<p style="color:var(--error);text-align:center;padding:1rem;">Dependance circulaire detectee ! Corrigez les dependances.</p>';
+        return;
+    }
+
+    graph.innerHTML = layers.map((layer, i) => `
+        <div class="dep-layer">
+            <div class="dep-layer-label">Couche ${i + 1}</div>
+            <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>`;
+                }).join('')}
+            </div>
+        </div>
+        ${i < layers.length - 1 ? '<div class="dep-arrow">&#8595;</div>' : ''}
+    `).join('');
+}
+
+function computeTopologicalLayers() {
+    const codes = data.modules.map(m => m.code);
+    const inDeg = {};
+    const adj = {};
+    codes.forEach(c => { inDeg[c] = 0; adj[c] = []; });
+    data.dependencies.forEach(d => {
+        if (inDeg[d.from] !== undefined && adj[d.to] !== undefined) {
+            adj[d.to].push(d.from);
+            inDeg[d.from]++;
+        }
+    });
+
+    const layers = [];
+    let remaining = new Set(codes);
+    while (remaining.size > 0) {
+        const layer = [];
+        remaining.forEach(c => {
+            if (inDeg[c] === 0) layer.push(c);
+        });
+        if (layer.length === 0) return null; // cycle
+        layers.push(layer);
+        layer.forEach(c => {
+            remaining.delete(c);
+            (adj[c] || []).forEach(dep => { inDeg[dep]--; });
+        });
+    }
+    return layers;
+}
+
+function renderProcessingOrder() {
+    const container = document.getElementById('processingOrder');
+    if (!container) return;
+    const layers = computeTopologicalLayers();
+    if (!layers) { container.innerHTML = ''; return; }
+    const order = layers.flat();
+    container.innerHTML = order.map((code, i) => {
+        const m = data.modules.find(mod => mod.code === code);
+        return `
+            <div class="process-step">
+                <div class="process-step-number">Etape ${i + 1}</div>
+                <div class="process-step-label">${m ? (m.name || m.code) : code}</div>
+            </div>
+            ${i < order.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
+        `;
+    }).join('');
+}