@atlashub/smartstack-cli 4.18.0 → 4.20.0

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

@@ -4,25 +4,29 @@
  * Build script for ba-interactive.html
  *
  * Assembles the HTML template from split source files:
- * - src/template.html (shell with placeholders)
+ * - src/template.html (shell with PARTIAL placeholders)
+ * - src/partials/*.html (section content files)
  * - 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}}
+ * Preserves template placeholders: {{FEATURE_DATA}}, {{EMBEDDED_ARTIFACTS}}, {{PROJECT_NAME}}
+ * Backward compat: {{APPLICATION_NAME}} and {{APPLICATION_ID}} are also preserved if present
  */
 
 const fs = require('fs');
 const path = require('path');
 
 const SRC_DIR = path.join(__dirname, 'src');
+const PARTIALS_DIR = path.join(SRC_DIR, 'partials');
 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) {
+    if (!fs.existsSync(dir)) return [];
     const files = fs.readdirSync(dir)
         .filter(f => f.endsWith(extension))
         .sort();
@@ -33,6 +37,29 @@ function readSortedFiles(dir, extension) {
     });
 }
 
+function resolvePartials(template) {
+    const partialRegex = /<!-- PARTIAL:(\S+) -->/g;
+    let resolved = template;
+    let match;
+    const matches = [];
+
+    while ((match = partialRegex.exec(template)) !== null) {
+        matches.push({ placeholder: match[0], name: match[1] });
+    }
+
+    for (const m of matches) {
+        const partialFile = path.join(PARTIALS_DIR, m.name + '.html');
+        if (fs.existsSync(partialFile)) {
+            const partialContent = fs.readFileSync(partialFile, 'utf8');
+            resolved = resolved.replace(m.placeholder, partialContent);
+        } else {
+            console.warn(`[build-html] WARNING: Partial not found: ${m.name}.html`);
+        }
+    }
+
+    return resolved;
+}
+
 function build() {
     console.log('[build-html] Starting build...');
 
@@ -43,6 +70,13 @@ function build() {
     }
     let template = fs.readFileSync(TEMPLATE_FILE, 'utf8');
 
+    // Resolve partials
+    if (fs.existsSync(PARTIALS_DIR)) {
+        const partialFiles = fs.readdirSync(PARTIALS_DIR).filter(f => f.endsWith('.html'));
+        console.log(`[build-html] Partials: ${partialFiles.length} files`);
+        template = resolvePartials(template);
+    }
+
     // Read and concatenate CSS files
     const cssFiles = readSortedFiles(STYLES_DIR, '.css');
     console.log(`[build-html] CSS files: ${cssFiles.map(f => f.name).join(', ')}`);
@@ -58,8 +92,12 @@ function build() {
     template = template.replace('<!-- JS_PLACEHOLDER -->', js);
 
     // Verify placeholders are preserved
-    const requiredPlaceholders = ['{{FEATURE_DATA}}', '{{EMBEDDED_ARTIFACTS}}', '{{APPLICATION_NAME}}'];
+    const requiredPlaceholders = ['{{FEATURE_DATA}}', '{{EMBEDDED_ARTIFACTS}}'];
+    // Accept either {{PROJECT_NAME}} or {{APPLICATION_NAME}}
+    const hasProjectName = template.includes('{{PROJECT_NAME}}') || template.includes('{{APPLICATION_NAME}}');
     const missing = requiredPlaceholders.filter(p => !template.includes(p));
+    if (!hasProjectName) missing.push('{{PROJECT_NAME}} or {{APPLICATION_NAME}}');
+
     if (missing.length > 0) {
         console.error('[build-html] ERROR: Missing placeholders:', missing.join(', '));
         process.exit(1);

package/templates/skills/business-analyse/html/src/partials/cadrage-context.html

@@ -0,0 +1,34 @@
+                <!-- SECTION: Contexte (merged: problem + current + vision) -->
+                <div class="section" id="cadrage-context">
+                    <h2 class="section-title">Contexte du projet</h2>
+                    <p class="section-subtitle">Vue synthetique du besoin : probleme, situation actuelle et objectif vise.</p>
+
+                    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;">
+                        <div class="card" style="border-left:3px solid #f87171;">
+                            <div class="card-label" style="color:#f87171;">Probleme identifie</div>
+                            <div class="editable" contenteditable="true" data-field="context.problem" data-placeholder="Quel probleme ce projet doit-il resoudre ?"></div>
+                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
+                                <strong>Declencheur :</strong>
+                                <div class="editable" contenteditable="true" data-field="context.trigger" data-placeholder="Evenement declencheur" style="display:inline;"></div>
+                            </div>
+                        </div>
+
+                        <div class="card" style="border-left:3px solid #facc15;">
+                            <div class="card-label" style="color:#facc15;">Aujourd'hui</div>
+                            <div class="editable" contenteditable="true" data-field="context.currentSituation" data-placeholder="Comment les choses fonctionnent actuellement ?"></div>
+                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
+                                <strong>Points douleur :</strong>
+                                <div class="editable" contenteditable="true" data-field="context.painPoints" data-placeholder="Problemes recurrents" style="display:inline;"></div>
+                            </div>
+                        </div>
+
+                        <div class="card" style="border-left:3px solid #4ade80;">
+                            <div class="card-label" style="color:#4ade80;">Objectif</div>
+                            <div class="editable" contenteditable="true" data-field="context.desiredSituation" data-placeholder="Que doit permettre le systeme cible ?"></div>
+                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
+                                <strong>Criteres :</strong>
+                                <div class="editable" contenteditable="true" data-field="context.acceptanceCriteria" data-placeholder="Criteres de succes" style="display:inline;"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/cadrage-risks.html

@@ -0,0 +1,48 @@
+                <!-- SECTION: Risques et hypotheses -->
+                <div class="section" id="cadrage-risks" style="display:none;" data-vibe-hide>
+                    <h2 class="section-title">Risques et hypotheses</h2>
+                    <p class="section-subtitle">Ce qui pourrait mal tourner et les certitudes non verifiees.</p>
+
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin-bottom: 0.75rem;">Risques identifies</h3>
+                    <div id="risksList"></div>
+                    <button class="add-btn" onclick="toggleForm('addRiskForm')">+ Ajouter un risque</button>
+
+                    <div class="inline-form" id="addRiskForm">
+                        <div class="inline-form-title">Nouveau risque</div>
+                        <div class="form-group">
+                            <label class="form-label">Description du risque</label>
+                            <input type="text" class="form-input" id="risk-desc" placeholder="Qu'est-ce qui pourrait mal tourner ?">
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label">Probabilite</label>
+                                <select class="form-select" id="risk-probability">
+                                    <option value="high">Forte</option>
+                                    <option value="medium">Moyenne</option>
+                                    <option value="low">Faible</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Impact</label>
+                                <select class="form-select" id="risk-impact">
+                                    <option value="high">Grave</option>
+                                    <option value="medium">Moyen</option>
+                                    <option value="low">Faible</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Mesure de prevention ou de reduction</label>
+                            <textarea class="form-textarea" id="risk-mitigation" placeholder="Comment prevenir ou reduire ce risque ?"></textarea>
+                        </div>
+                        <div class="form-actions">
+                            <button class="btn" onclick="toggleForm('addRiskForm')">Annuler</button>
+                            <button class="btn btn-primary" onclick="addRisk()">Ajouter ce risque</button>
+                        </div>
+                    </div>
+
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 2rem 0 0.75rem;">Hypotheses a verifier</h3>
+                    <div class="card">
+                        <div class="editable" contenteditable="true" data-field="risks.assumptions" data-placeholder="Quelles hypotheses faites-vous sur ce projet sans les avoir verifiees ? (une par ligne)"></div>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/cadrage-scope.html

@@ -0,0 +1,49 @@
+                <!-- SECTION: Perimetre fonctionnel -->
+                <div class="section" id="cadrage-scope" style="display:none;">
+                    <h2 class="section-title">Perimetre fonctionnel</h2>
+                    <p class="section-subtitle">Ce que le systeme doit faire et ne pas faire, par ordre de priorite.</p>
+
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin-bottom: 0.75rem;">
+                        <span style="color: #f87171;">&#9632;</span> Fonctionnalites indispensables
+                    </h3>
+                    <div id="scopeVital" class="uc-list"></div>
+                    <button class="add-btn" onclick="toggleForm('addScopeForm-vital')">+ Ajouter une fonctionnalite indispensable</button>
+                    <div class="inline-form" id="addScopeForm-vital">
+                        <div class="form-group"><label class="form-label">Nom de la fonctionnalite</label><input type="text" class="form-input" id="scope-name-vital" placeholder="Ex: Gestion des commandes"></div>
+                        <div class="form-group"><label class="form-label">Description (optionnel)</label><input type="text" class="form-input" id="scope-desc-vital" placeholder="Courte description"></div>
+                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-vital')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('vital')">Ajouter</button></div>
+                    </div>
+
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
+                        <span style="color: #facc15;">&#9632;</span> Fonctionnalites importantes
+                    </h3>
+                    <div id="scopeImportant" class="uc-list"></div>
+                    <button class="add-btn" onclick="toggleForm('addScopeForm-important')">+ Ajouter une fonctionnalite importante</button>
+                    <div class="inline-form" id="addScopeForm-important">
+                        <div class="form-group"><label class="form-label">Nom de la fonctionnalite</label><input type="text" class="form-input" id="scope-name-important" placeholder="Ex: Export PDF"></div>
+                        <div class="form-group"><label class="form-label">Description (optionnel)</label><input type="text" class="form-input" id="scope-desc-important" placeholder="Courte description"></div>
+                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-important')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('important')">Ajouter</button></div>
+                    </div>
+
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
+                        <span style="color: #4ade80;">&#9632;</span> Fonctionnalites optionnelles
+                    </h3>
+                    <div id="scopeOptional" class="uc-list"></div>
+                    <button class="add-btn" onclick="toggleForm('addScopeForm-optional')">+ Ajouter une fonctionnalite optionnelle</button>
+                    <div class="inline-form" id="addScopeForm-optional">
+                        <div class="form-group"><label class="form-label">Nom de la fonctionnalite</label><input type="text" class="form-input" id="scope-name-optional" placeholder="Ex: Calendrier partage"></div>
+                        <div class="form-group"><label class="form-label">Description (optionnel)</label><input type="text" class="form-input" id="scope-desc-optional" placeholder="Courte description"></div>
+                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-optional')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('optional')">Ajouter</button></div>
+                    </div>
+
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
+                        <span style="color: #94a3b8;">&#9632;</span> Hors perimetre
+                    </h3>
+                    <div id="scopeExcluded" class="uc-list"></div>
+                    <button class="add-btn" onclick="toggleForm('addScopeForm-excluded')">+ Ajouter une exclusion</button>
+                    <div class="inline-form" id="addScopeForm-excluded">
+                        <div class="form-group"><label class="form-label">Element hors perimetre</label><input type="text" class="form-input" id="scope-name-excluded" placeholder="Ex: Gestion de la paie"></div>
+                        <div class="form-group"><label class="form-label">Raison (optionnel)</label><input type="text" class="form-input" id="scope-desc-excluded" placeholder="Pourquoi hors perimetre"></div>
+                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-excluded')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('excluded')">Ajouter</button></div>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/cadrage-stakeholders.html

@@ -0,0 +1,55 @@
+                <!-- SECTION: Parties prenantes -->
+                <div class="section" id="cadrage-stakeholders" style="display:none;">
+                    <h2 class="section-title">Parties prenantes</h2>
+                    <p class="section-subtitle">Toutes les personnes concernees par ce projet et leurs besoins.</p>
+
+                    <div class="stakeholder-grid" id="stakeholderGrid">
+                        <!-- Populated dynamically -->
+                    </div>
+
+                    <button class="add-btn" onclick="toggleForm('addStakeholderForm')">+ Ajouter un profil utilisateur</button>
+
+                    <div class="inline-form" id="addStakeholderForm">
+                        <div class="inline-form-title">Nouveau profil utilisateur</div>
+                        <div class="form-group">
+                            <label class="form-label">Titre du profil (exemple : Responsable de production)</label>
+                            <input type="text" class="form-input" id="sh-role" placeholder="Titre ou description du profil">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Fonction dans l'entreprise</label>
+                            <input type="text" class="form-input" id="sh-function" placeholder="Ce qu'il fait dans l'organisation">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Taches principales (une par ligne)</label>
+                            <textarea class="form-textarea" id="sh-tasks" placeholder="Tache 1&#10;Tache 2&#10;Tache 3"></textarea>
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label">Frequence d'utilisation</label>
+                                <select class="form-select" id="sh-frequency">
+                                    <option value="daily">Quotidienne</option>
+                                    <option value="weekly">Hebdomadaire</option>
+                                    <option value="monthly">Mensuelle</option>
+                                    <option value="occasional">Occasionnelle</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Niveau d'acces</label>
+                                <select class="form-select" id="sh-access">
+                                    <option value="admin">Administration complete</option>
+                                    <option value="manager">Supervision et validation</option>
+                                    <option value="contributor">Saisie et modification</option>
+                                    <option value="viewer">Consultation seule</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Frustrations actuelles</label>
+                            <textarea class="form-textarea" id="sh-frustrations" placeholder="Quelles sont les 2-3 plus grandes frustrations de ce profil avec la facon de travailler actuelle ?"></textarea>
+                        </div>
+                        <div class="form-actions">
+                            <button class="btn" onclick="toggleForm('addStakeholderForm')">Annuler</button>
+                            <button class="btn btn-primary" onclick="addStakeholder()">Ajouter ce profil</button>
+                        </div>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/cadrage-success.html

@@ -0,0 +1,34 @@
+                <!-- SECTION: Criteres de reussite -->
+                <div class="section" id="cadrage-success" style="display:none;">
+                    <h2 class="section-title">Criteres de reussite</h2>
+                    <p class="section-subtitle">Comment mesurer objectivement que le projet est un succes.</p>
+
+                    <div class="card">
+                        <div class="card-label">Definition du succes</div>
+                        <div class="editable" contenteditable="true" data-field="success.definition" data-placeholder="Comment saurez-vous que le projet est un succes ? Quel changement concret observerez-vous ?"></div>
+                    </div>
+
+                    <div class="card" data-vibe-hide>
+                        <div class="card-label">Objectifs mesurables</div>
+                        <div class="editable" contenteditable="true" data-field="success.metrics" data-placeholder="Quels chiffres presenteriez-vous a votre direction pour prouver le succes ? (temps, erreurs, satisfaction...)"></div>
+                    </div>
+
+                    <div class="card" data-vibe-hide>
+                        <div class="card-label">Delai d'evaluation</div>
+                        <div class="editable" contenteditable="true" data-field="success.timeline" data-placeholder="Au bout de combien de temps pourrez-vous juger si ca fonctionne ? 1 semaine ? 1 mois ? 3 mois ?"></div>
+                    </div>
+
+                    <div class="card" data-vibe-hide>
+                        <div class="card-label">Conditions minimales de mise en service</div>
+                        <div class="editable" contenteditable="true" data-field="success.minimumConditions" data-placeholder="Quelles conditions minimales pour mettre le systeme en service ? (fonctionnalites presentes, donnees migrees, formation faite...)"></div>
+                    </div>
+
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 2rem 0 0.75rem;">Criteres d'acceptation</h3>
+                    <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Criteres concrets et mesurables pour valider le succes du projet.</p>
+                    <div id="criteriaList" class="uc-list"></div>
+                    <button class="add-btn" onclick="toggleForm('addCriterionForm')">+ Ajouter un critere d'acceptation</button>
+                    <div class="inline-form" id="addCriterionForm">
+                        <div class="form-group"><label class="form-label">Critere (mesurable)</label><input type="text" class="form-input" id="criterion-text" placeholder="Ex: 80% des employes saisissent leurs heures chaque semaine"></div>
+                        <div class="form-actions"><button class="btn" onclick="toggleForm('addCriterionForm')">Annuler</button><button class="btn btn-primary" onclick="addCriterion()">Ajouter</button></div>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/consol-datamodel.html

@@ -0,0 +1,8 @@
+                <!-- SECTION: Modele de donnees -->
+                <div class="section" id="consol-datamodel" style="display:none;">
+                    <h2 class="section-title">Modele de donnees</h2>
+                    <p class="section-subtitle">Vue d'ensemble de toutes les entites metier, leurs attributs et leurs relations entre domaines.</p>
+                    <div id="dataModelContainer">
+                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Le modele de donnees sera genere a partir des specifications de chaque domaine.</p>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/consol-flows.html

@@ -0,0 +1,29 @@
+                <!-- SECTION: Parcours bout en bout -->
+                <div class="section" id="consol-flows" style="display:none;">
+                    <h2 class="section-title">Parcours bout en bout</h2>
+                    <p class="section-subtitle">Les processus metier qui traversent plusieurs domaines, de bout en bout.</p>
+
+                    <div id="e2eFlowsList"></div>
+
+                    <button class="add-btn" onclick="toggleForm('addFlowForm')">+ Ajouter un parcours</button>
+
+                    <div class="inline-form" id="addFlowForm">
+                        <div class="inline-form-title">Nouveau parcours bout en bout</div>
+                        <div class="form-group">
+                            <label class="form-label">Nom du parcours (exemple : De la commande a la facture)</label>
+                            <input type="text" class="form-input" id="flow-name" placeholder="Nom descriptif du parcours">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Etapes du parcours (une par ligne : Domaine - Action)</label>
+                            <textarea class="form-textarea" id="flow-steps" placeholder="Clients - Le client existe dans le systeme&#10;Commandes - Creer la commande&#10;Commandes - Valider la commande&#10;Factures - Generer la facture"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Qui intervient dans ce parcours ?</label>
+                            <input type="text" class="form-input" id="flow-actors" placeholder="Exemple : Contributeur (creation), Responsable (validation)">
+                        </div>
+                        <div class="form-actions">
+                            <button class="btn" onclick="toggleForm('addFlowForm')">Annuler</button>
+                            <button class="btn btn-primary" onclick="addE2EFlow()">Ajouter ce parcours</button>
+                        </div>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/consol-interactions.html

@@ -0,0 +1,8 @@
+                <!-- SECTION: Interactions cross-module -->
+                <div class="section" id="consol-interactions" style="display:none;">
+                    <h2 class="section-title">Interactions entre domaines</h2>
+                    <p class="section-subtitle">Vue d'ensemble de la facon dont les domaines communiquent et partagent des donnees.</p>
+                    <div id="consolInteractions">
+                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Les interactions seront calculees automatiquement a partir des dependances et des donnees partagees entre domaines.</p>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/consol-permissions.html

@@ -0,0 +1,8 @@
+                <!-- SECTION: Coherence des acces -->
+                <div class="section" id="consol-permissions" style="display:none;">
+                    <h2 class="section-title">Coherence des droits d'acces</h2>
+                    <p class="section-subtitle">Verification que les profils utilisateurs ont des droits coherents dans tous les domaines.</p>
+                    <div id="consolPermissions">
+                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">La coherence sera verifiee quand les permissions de chaque domaine seront definies.</p>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/decomp-dependencies.html

@@ -0,0 +1,38 @@
+                <!-- SECTION: Dependances -->
+                <div class="section" id="decomp-dependencies" style="display:none;">
+                    <h2 class="section-title">Dependances entre domaines</h2>
+                    <p class="section-subtitle">Indiquez quels domaines dependent d'autres domaines. Par exemple, les Commandes dependent des Clients et des Produits.</p>
+
+                    <div id="depGraphContainer">
+                        <div class="dep-graph" id="depGraph">
+                            <p style="color:var(--text-muted);text-align:center;padding:2rem;">Ajoutez des domaines fonctionnels pour visualiser les dependances.</p>
+                        </div>
+                    </div>
+
+                    <div style="margin-top:1.5rem;">
+                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ajouter une dependance</h3>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label">Ce domaine...</label>
+                                <select class="form-select" id="dep-from"></select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">...depend de</label>
+                                <select class="form-select" id="dep-to"></select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Nature de la dependance</label>
+                            <input type="text" class="form-input" id="dep-desc" placeholder="Exemple : La commande reference un client existant">
+                        </div>
+                        <button class="btn btn-primary" onclick="addDependency()" style="margin-top:0.5rem;">Ajouter cette dependance</button>
+                    </div>
+
+                    <div id="depList" style="margin-top:1.5rem;"></div>
+
+                    <div style="margin-top:2rem;">
+                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ordre de traitement propose</h3>
+                        <p class="section-subtitle">Les domaines sont traites dans l'ordre de leurs dependances : les fondations d'abord, puis les domaines qui en dependent.</p>
+                        <div id="processingOrder" class="process-flow"></div>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/decomp-modules.html

@@ -0,0 +1,51 @@
+                <!-- SECTION: Domaines fonctionnels -->
+                <div class="section" id="decomp-modules" style="display:none;">
+                    <h2 class="section-title">Domaines fonctionnels</h2>
+                    <p class="section-subtitle">Identifiez les grands domaines de votre application. Chaque domaine regroupe des fonctionnalites coherentes et independantes.</p>
+
+                    <div class="module-grid" id="moduleGrid">
+                        <!-- Populated dynamically -->
+                    </div>
+
+                    <button class="add-btn" onclick="toggleForm('addModuleForm')" style="margin-top:1rem;">+ Ajouter un domaine fonctionnel</button>
+
+                    <div class="inline-form" id="addModuleForm">
+                        <div class="inline-form-title">Nouveau domaine fonctionnel</div>
+                        <div class="form-group">
+                            <label class="form-label">Nom du domaine (exemple : Gestion des commandes)</label>
+                            <input type="text" class="form-input" id="mod-name" placeholder="Nom clair et explicite">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Description en une ou deux phrases</label>
+                            <textarea class="form-textarea" id="mod-desc" placeholder="A quoi sert ce domaine ? Quel probleme resout-il ?"></textarea>
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label">Type de domaine</label>
+                                <select class="form-select" id="mod-type">
+                                    <option value="data-centric">Gestion de donnees (listes, fiches, formulaires)</option>
+                                    <option value="workflow">Processus metier (etapes, validations, approbations)</option>
+                                    <option value="reporting">Tableaux de bord et rapports</option>
+                                    <option value="integration">Integration avec des systemes externes</option>
+                                    <option value="full-module">Domaine complet (donnees + processus + rapports)</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Priorite</label>
+                                <select class="form-select" id="mod-priority">
+                                    <option value="must">Indispensable</option>
+                                    <option value="should">Important</option>
+                                    <option value="could">Optionnel</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Principales donnees gerees (une par ligne)</label>
+                            <textarea class="form-textarea" id="mod-entities" placeholder="Commande&#10;Ligne de commande&#10;Facture"></textarea>
+                        </div>
+                        <div class="form-actions">
+                            <button class="btn" onclick="toggleForm('addModuleForm')">Annuler</button>
+                            <button class="btn btn-primary" onclick="addModule()">Ajouter ce domaine</button>
+                        </div>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/handoff-summary.html

@@ -0,0 +1,24 @@
+                <div class="section" id="handoff-summary" style="display:none;">
+                    <h2 class="section-title">Synthese de l'analyse</h2>
+                    <p class="section-subtitle">Vue d'ensemble de toute l'analyse metier, prete pour le developpement.</p>
+
+                    <div class="stat-grid" id="handoffStats">
+                        <!-- Populated dynamically -->
+                    </div>
+
+                    <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Domaines par ordre de traitement</h3>
+                    <div id="handoffModuleList"></div>
+
+                    <h3 style="color:var(--text-bright);font-size:1rem;margin:1.5rem 0 0.75rem;">Couverture du besoin initial</h3>
+                    <div class="card">
+                        <div class="card-label">Matrice de couverture</div>
+                        <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:0.75rem;">Chaque besoin du cadrage est couvert par au moins un domaine et un cas d'utilisation.</p>
+                        <div id="coverageMatrix"></div>
+                    </div>
+
+                    <div style="margin-top:2rem;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;text-align:center;">
+                        <p style="color:var(--text-bright);font-size:1.1rem;font-weight:600;margin-bottom:0.5rem;">Analyse prete pour l'extraction</p>
+                        <p style="color:var(--text-muted);font-size:0.85rem;margin-bottom:1rem;">Exportez le fichier JSON pour lancer la generation automatique du systeme.</p>
+                        <button class="btn btn-primary" onclick="exportJSON()" style="font-size:0.9rem;padding:0.6rem 1.5rem;">Exporter l'analyse complete en JSON</button>
+                    </div>
+                </div>

package/templates/skills/business-analyse/html/src/partials/module-spec-container.html

@@ -0,0 +1,4 @@
+                <!-- Container dynamique pour les specs de chaque module -->
+                <div id="moduleSpecContainer">
+                    <!-- Generated dynamically by renderModuleSpec() -->
+                </div>

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

@@ -6,6 +6,9 @@ let data = {{FEATURE_DATA}};
 const ORIGINAL_DATA = JSON.parse(JSON.stringify(data));
 const EMBEDDED_ARTIFACTS = {{EMBEDDED_ARTIFACTS}};
 
+// Initialize applications array (multi-app support)
+data.applications = data.applications || [];
+
 // Initialize optional data structures
 data.wireframeComments = data.wireframeComments || {};
 data.specComments = data.specComments || {};
@@ -32,7 +35,7 @@ data.cadrage.context = data.cadrage.context || { problem: '', trigger: '', curre
 // Initialize comments array
 data.comments = data.comments || [];
 
-// Defensive mapping: globalScope (feature.json format) -> scope (HTML format)
+// Defensive mapping: globalScope (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 || {};
@@ -45,6 +48,14 @@ if (!data.cadrage.scope || (!data.cadrage.scope.vital?.length && data.cadrage.gl
 }
 data.cadrage.scope = data.cadrage.scope || { vital: [], important: [], optional: [], excluded: [] };
 
+// Backward compat: mustHave/shouldHave/couldHave/wontHave → vital/important/optional/excluded
+if (data.cadrage.scope.mustHave && !data.cadrage.scope.vital?.length) {
+    data.cadrage.scope.vital = data.cadrage.scope.mustHave;
+    data.cadrage.scope.important = data.cadrage.scope.shouldHave || data.cadrage.scope.important || [];
+    data.cadrage.scope.optional = data.cadrage.scope.couldHave || data.cadrage.scope.optional || [];
+    data.cadrage.scope.excluded = data.cadrage.scope.wontHave || data.cadrage.scope.excluded || [];
+}
+
 // 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)
@@ -54,6 +65,11 @@ data.moduleSpecs = data.moduleSpecs || {};
     }
     // Ensure anticipatedSections array exists
     m.anticipatedSections = m.anticipatedSections || [];
+    m.applicationCode = m.applicationCode || '';
+    // Initialize screens array for interface specs
+    if (!data.moduleSpecs[m.code].screens) {
+        data.moduleSpecs[m.code].screens = [];
+    }
 });
 
 // Vibe coding mode: hide non-relevant sections

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

@@ -51,12 +51,38 @@ 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());
+    var html = renderNavGroup('cadrage', 'Cadrage', buildCadrageItems());
+
+    // Multi-app: group modules by application
+    if (data.applications && data.applications.length > 1) {
+        data.applications.forEach(function(app) {
+            var appModules = data.modules.filter(function(m) { return m.applicationCode === app.code; });
+            var appModuleItems = '';
+            appModules.forEach(function(mod) {
+                appModuleItems += renderModuleNavItem(mod);
+            });
+            // Global views at bottom of each app group
+            appModuleItems += renderNavItem('decomp-modules', 'Vue d\'ensemble', data.modules.length);
+            html += renderNavGroup('app-' + app.code, app.name || app.code, appModuleItems);
+        });
+        // Modules without applicationCode
+        var orphanModules = data.modules.filter(function(m) { return !m.applicationCode; });
+        if (orphanModules.length > 0) {
+            var orphanItems = '';
+            orphanModules.forEach(function(mod) {
+                orphanItems += renderModuleNavItem(mod);
+            });
+            html += renderNavGroup('modules-other', 'Autres modules (' + orphanModules.length + ')', orphanItems);
+        }
+        html += renderNavItem('decomp-dependencies', 'Dependances', data.dependencies.length);
+    } else {
+        html += renderNavGroup('modules', 'Modules (' + data.modules.length + ')', buildModuleItems());
+    }
+
+    html += renderNavGroup('consolidation', 'Consolidation', buildConsolidationItems());
+    html += renderNavGroup('synthese', 'Synthese', buildSyntheseItems());
 
+    nav.innerHTML = html;
     restoreNavState();
     highlightActiveNavItem();
 }
@@ -87,7 +113,7 @@ 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) +
+        (isVibeCoding ? '' : renderNavItem('cadrage-risks', 'Risques et hypotheses', data.cadrage.risks.length)) +
         renderNavItem('cadrage-success', 'Criteres de reussite');
 }