npm - @atlashub/smartstack-cli - Versions diffs - 3.7.0 → 3.9.0 - Mend

@atlashub/smartstack-cli 3.7.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/templates/skills/business-analyse/html/src/template.html ADDED Viewed

@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{APPLICATION_NAME}} - Analyse metier</title>
+    <style>
+<!-- CSS_PLACEHOLDER -->
+    </style>
+</head>
+<body>
+    <div class="app">
+        <!-- ============================================
+             HEADER
+             ============================================ -->
+        <header class="header">
+            <div class="header-logo">BA</div>
+            <span class="header-title">Analyse metier</span>
+            <div class="header-sep"></div>
+            <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="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>
+                <button class="btn btn-sm review-toggle-btn" id="reviewToggleBtn" onclick="toggleReviewPanel()" title="Ouvrir/fermer le panneau de review">
+                    Review
+                    <span class="review-badge hidden" id="reviewBadge">0</span>
+                </button>
+            </div>
+        </header>
+        <div class="body" id="appBody">
+            <!-- ============================================
+                 SIDEBAR - Navigation 5 niveaux
+                 ============================================ -->
+            <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-problem')" data-section="cadrage-problem">
+                        <span class="nav-icon">&#9679;</span> Probleme a resoudre
+                    </a>
+                    <a class="nav-item" onclick="showSection('cadrage-current')" data-section="cadrage-current" data-vibe-hide>
+                        <span class="nav-icon">&#9679;</span> Situation actuelle
+                    </a>
+                    <a class="nav-item" onclick="showSection('cadrage-vision')" data-section="cadrage-vision" data-vibe-hide>
+                        <span class="nav-icon">&#9679;</span> Situation souhaitee
+                    </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-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>
+                </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>
+                </div>
+            </aside>
+            <!-- ============================================
+                 MAIN CONTENT
+                 ============================================ -->
+            <main class="main" id="mainContent">
+                <!-- SECTION: Probleme a resoudre -->
+                <div class="section" id="cadrage-problem">
+                    <h2 class="section-title">Probleme a resoudre</h2>
+                    <p class="section-subtitle">Decrivez le probleme principal que ce projet doit resoudre. Soyez le plus concret possible.</p>
+                    <div class="card">
+                        <div class="card-label">Description du probleme</div>
+                        <div class="editable" contenteditable="true" data-field="problem.description" data-placeholder="Decrivez le probleme que vous rencontrez aujourd'hui. Qu'est-ce qui ne fonctionne pas, ou pas assez bien ?"></div>
+                    </div>
+                    <div class="card" data-vibe-hide>
+                        <div class="card-label">Qui est le plus impacte ?</div>
+                        <div class="editable" contenteditable="true" data-field="problem.impactedPeople" data-placeholder="Quelles personnes souffrent le plus de ce probleme au quotidien ? Quel impact sur leur travail ?"></div>
+                    </div>
+                    <div class="card" data-vibe-hide>
+                        <div class="card-label">Depuis quand ce probleme existe-t-il ?</div>
+                        <div class="editable" contenteditable="true" data-field="problem.history" data-placeholder="Depuis combien de temps ce probleme existe-t-il ? A-t-il empire recemment ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Evenement declencheur</div>
+                        <div class="editable" contenteditable="true" data-field="problem.trigger" data-placeholder="Qu'est-ce qui a declenche cette demande maintenant ? Pourquoi pas il y a 6 mois ?"></div>
+                    </div>
+                    <div class="card" data-vibe-hide>
+                        <div class="card-label">Consequences si le projet n'est pas realise</div>
+                        <div class="editable" contenteditable="true" data-field="problem.consequences" data-placeholder="Que se passerait-il si ce projet n'etait PAS realise ? Quelles consequences a court et moyen terme ?"></div>
+                    </div>
+                </div>
+                <!-- SECTION: Situation actuelle -->
+                <div class="section" id="cadrage-current" style="display:none;" data-vibe-hide>
+                    <h2 class="section-title">Situation actuelle</h2>
+                    <p class="section-subtitle">Comment les choses se passent aujourd'hui, concretement.</p>
+                    <div class="card">
+                        <div class="card-label">Outils et methodes utilises aujourd'hui</div>
+                        <div class="editable" contenteditable="true" data-field="current.tools" data-placeholder="Comment gerez-vous ce sujet aujourd'hui ? Avec quels outils (tableur, email, papier, logiciel) ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Processus actuel, etape par etape</div>
+                        <div id="processFlow" class="process-flow">
+                            <!-- Populated dynamically -->
+                        </div>
+                        <button class="add-btn" onclick="addProcessStep()">+ Ajouter une etape au processus</button>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Etapes les plus penibles ou les plus longues</div>
+                        <div class="editable" contenteditable="true" data-field="current.painPoints" data-placeholder="Quelles sont les etapes les plus penibles ou les plus longues dans ce processus ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Erreurs ou problemes recurrents</div>
+                        <div class="editable" contenteditable="true" data-field="current.errors" data-placeholder="Quelles erreurs ou problemes reviennent regulierement ? Donnez 2 a 3 exemples concrets."></div>
+                    </div>
+                </div>
+                <!-- SECTION: Situation souhaitee -->
+                <div class="section" id="cadrage-vision" style="display:none;" data-vibe-hide>
+                    <h2 class="section-title">Situation souhaitee</h2>
+                    <p class="section-subtitle">Ce que le client veut obtenir, pas ce qu'il veut construire.</p>
+                    <div class="card">
+                        <div class="card-label">Ce qui changerait concretement</div>
+                        <div class="editable" contenteditable="true" data-field="vision.changes" data-placeholder="Si le probleme etait resolu demain, que feriez-vous differemment dans votre journee de travail ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Resultats attendus (mesurables)</div>
+                        <div class="editable" contenteditable="true" data-field="vision.results" data-placeholder="Quels resultats concrets attendez-vous ? Citez 2 a 3 ameliorations mesurables."></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Signe visible de succes</div>
+                        <div class="editable" contenteditable="true" data-field="vision.successSign" data-placeholder="Comment saurez-vous que le projet est un succes ? Quel est le signe visible ?"></div>
+                    </div>
+                </div>
+                <!-- 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>
+                <!-- 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>
+                <!-- SECTION: Risques et hypotheses -->
+                <div class="section" id="cadrage-risks" style="display:none;">
+                    <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>
+                <!-- 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>
+                <!-- ================================================================
+                     PHASE 2 : DECOMPOSITION
+                     ================================================================ -->
+                <!-- 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>
+                <!-- 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>
+                <!-- ================================================================
+                     PHASE 3 : SPECIFICATION PAR MODULE
+                     ================================================================ -->
+                <!-- Container dynamique pour les specs de chaque module -->
+                <div id="moduleSpecContainer">
+                    <!-- Generated dynamically by renderModuleSpec() -->
+                </div>
+                <!-- ================================================================
+                     PHASE 4 : CONSOLIDATION
+                     ================================================================ -->
+                <!-- 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>
+                <!-- 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>
+                <!-- 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>
+                <!-- ================================================================
+                     PHASE 5 : SYNTHESE
+                     ================================================================ -->
+                <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>
+            </main>
+            <!-- ============================================
+                 REVIEW PANEL (right sidebar)
+                 ============================================ -->
+            <aside class="review-panel" id="reviewPanel">
+                <div class="review-panel-header">
+                    <span class="review-panel-title">Review</span>
+                    <button class="review-panel-close" onclick="toggleReviewPanel()" title="Fermer">&times;</button>
+                </div>
+                <div class="review-filters">
+                    <button class="review-filter-btn active" onclick="filterReviewComments('all')" data-filter="all">Tous</button>
+                    <button class="review-filter-btn" onclick="filterReviewComments('to-review')" data-filter="to-review">A revoir</button>
+                    <button class="review-filter-btn" onclick="filterReviewComments('validated')" data-filter="validated">Valides</button>
+                </div>
+                <div class="review-comments" id="reviewCommentsList">
+                    <div class="review-empty">Aucun commentaire pour le moment.</div>
+                </div>
+                <div class="review-stats" id="reviewStats">
+                    <div class="review-stat">
+                        <div class="review-stat-value" id="reviewStatTotal">0</div>
+                        <div class="review-stat-label">Total</div>
+                    </div>
+                    <div class="review-stat">
+                        <div class="review-stat-value" id="reviewStatToReview">0</div>
+                        <div class="review-stat-label">A revoir</div>
+                    </div>
+                    <div class="review-stat">
+                        <div class="review-stat-value" id="reviewStatValidated">0</div>
+                        <div class="review-stat-label">Valides</div>
+                    </div>
+                </div>
+            </aside>
+        </div>
+    </div>
+    <!-- Notification -->
+    <div class="notification notification-success" id="notification"></div>
+    <script>
+<!-- JS_PLACEHOLDER -->
+    </script>
+</body>
+</html>