npm - @atlashub/smartstack-cli - Versions diffs - 4.80.0 → 5.0.0 - Mend

@atlashub/smartstack-cli 4.80.0 → 5.0.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 (1008) hide show

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

@@ -1,449 +0,0 @@
-<!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 métier</title>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
-    <script>mermaid.initialize({ startOnLoad: false, theme: 'dark', securityLevel: 'loose' });</script>
-    <style>
-<!-- CSS_PLACEHOLDER -->
-    </style>
-</head>
-<body>
-    <div class="app">
-        <!-- ============================================
-             HEADER
-             ============================================ -->
-        <header class="header" role="banner">
-            <button class="hamburger-btn" onclick="toggleMobileSidebar()" aria-label="Ouvrir le menu de navigation">&#9776;</button>
-            <div class="header-logo" aria-hidden="true">BA</div>
-            <span class="header-title">Analyse métier</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="resetToEmbedded()" title="Réinitialiser depuis les données d'origine (supprime les modifications locales)" aria-label="Réinitialiser les données">Reset</button>
-                <button class="btn btn-sm" onclick="saveToLocalStorage()" title="Sauvegarder les modifications dans le navigateur" aria-label="Sauvegarder">Sauvegarder</button>
-                <button class="btn btn-sm btn-review" onclick="saveReviewJSON()" title="Sauvegarder les corrections pour créer une nouvelle version" aria-label="Sauvegarder les corrections">Sauvegarder corrections</button>
-                <button class="btn btn-sm btn-primary" onclick="exportJSON()" title="Exporter les données au format JSON pour l'extraction" aria-label="Exporter en JSON">Exporter JSON</button>
-                <button class="btn btn-sm review-toggle-btn" id="reviewToggleBtn" onclick="toggleReviewPanel()" title="Ouvrir/fermer le panneau de review" aria-label="Panneau de review">
-                    Review
-                    <span class="review-badge hidden" id="reviewBadge" aria-live="polite">0</span>
-                </button>
-            </div>
-        </header>
-        <div class="body" id="appBody">
-            <!-- ============================================
-                 SIDEBAR - Navigation hiérarchique
-                 ============================================ -->
-            <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleMobileSidebar()"></div>
-            <aside class="sidebar" id="sidebarAside" role="navigation" aria-label="Navigation principale">
-                <!-- Application Name -->
-                <div class="sidebar-header">
-                    <span class="sidebar-app-name" id="sidebarAppName">{{APPLICATION_NAME}}</span>
-                </div>
-                <!-- Search -->
-                <div class="sidebar-search">
-                    <input type="search" id="sidebarSearchInput" placeholder="Rechercher..." oninput="filterNavItems(this.value)" aria-label="Rechercher dans le document">
-                </div>
-                <!-- Dynamic Tree Navigation -->
-                <div id="sidebarNav">
-                    <!-- Populated by buildNavTree() -->
-                </div>
-            </aside>
-            <!-- ============================================
-                 MAIN CONTENT
-                 ============================================ -->
-            <main class="main" id="mainContent" role="main">
-                <!-- 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 synthétique du besoin : problème, situation actuelle et objectif visé.</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;">Problème identifié</div>
-                            <div class="editable" contenteditable="true" data-field="context.problem" data-placeholder="Quel problème ce projet doit-il résoudre ?"></div>
-                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
-                                <strong>Déclencheur :</strong>
-                                <div class="editable" contenteditable="true" data-field="context.trigger" data-placeholder="Événement déclencheur" 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 système cible ?"></div>
-                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
-                                <strong>Critères :</strong>
-                                <div class="editable" contenteditable="true" data-field="context.acceptanceCriteria" data-placeholder="Critères de succès" style="display:inline;"></div>
-                            </div>
-                        </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 concernées 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">Tâches principales (une par ligne)</label>
-                            <textarea class="form-textarea" id="sh-tasks" placeholder="Tâche 1&#10;Tâche 2&#10;Tâche 3"></textarea>
-                        </div>
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label class="form-label">Fréquence 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'accès</label>
-                                <select class="form-select" id="sh-access">
-                                    <option value="admin">Administration complète</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 façon 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: Périmètre fonctionnel -->
-                <div class="section" id="cadrage-scope" style="display:none;">
-                    <h2 class="section-title">Périmètre fonctionnel</h2>
-                    <p class="section-subtitle">Ce que le système doit faire et ne pas faire.</p>
-                    <h3 style="color: var(--text-bright); font-size: 1rem; margin-bottom: 0.75rem;">
-                        <span style="color: #60a5fa;">&#9632;</span> Dans le périmètre
-                    </h3>
-                    <div id="scopeInScope" class="uc-list"></div>
-                    <button class="add-btn" onclick="toggleForm('addScopeForm-inscope')">+ Ajouter une fonctionnalité</button>
-                    <div class="inline-form" id="addScopeForm-inscope">
-                        <div class="form-group"><label class="form-label">Nom de la fonctionnalité</label><input type="text" class="form-input" id="scope-name-inscope" 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-inscope" placeholder="Courte description"></div>
-                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-inscope')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('inscope')">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 périmètre
-                    </h3>
-                    <div id="scopeOutOfScope" class="uc-list"></div>
-                    <button class="add-btn" onclick="toggleForm('addScopeForm-outofscope')">+ Ajouter une exclusion</button>
-                    <div class="inline-form" id="addScopeForm-outofscope">
-                        <div class="form-group"><label class="form-label">Élément hors périmètre</label><input type="text" class="form-input" id="scope-name-outofscope" 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-outofscope" placeholder="Pourquoi hors périmètre"></div>
-                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-outofscope')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('outofscope')">Ajouter</button></div>
-                    </div>
-                </div>
-                <!-- SECTION: Critères de réussite -->
-                <div class="section" id="cadrage-success" style="display:none;">
-                    <h2 class="section-title">Critères de réussite</h2>
-                    <p class="section-subtitle">Comment mesurer objectivement que le projet est un succès.</p>
-                    <div class="card">
-                        <div class="card-label">Définition du succès</div>
-                        <div class="editable" contenteditable="true" data-field="success.definition" data-placeholder="Comment saurez-vous que le projet est un succès ? 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 présenteriez-vous à votre direction pour prouver le succès ? (temps, erreurs, satisfaction...)"></div>
-                    </div>
-                    <div class="card" data-vibe-hide>
-                        <div class="card-label">Délai d'évaluation</div>
-                        <div class="editable" contenteditable="true" data-field="success.timeline" data-placeholder="Au bout de combien de temps pourrez-vous juger si ça 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 système en service ? (fonctionnalités présentes, données migrées, formation faite...)"></div>
-                    </div>
-                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 2rem 0 0.75rem;">Critères d'acceptation</h3>
-                    <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Critères concrets et mesurables pour valider le succès du projet.</p>
-                    <div id="criteriaList" class="uc-list"></div>
-                    <button class="add-btn" onclick="toggleForm('addCriterionForm')">+ Ajouter un critère d'acceptation</button>
-                    <div class="inline-form" id="addCriterionForm">
-                        <div class="form-group"><label class="form-label">Critère (mesurable)</label><input type="text" class="form-input" id="criterion-text" placeholder="Ex: 80% des employés 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 fonctionnalités cohérentes et indépendantes.</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="À quoi sert ce domaine ? Quel problème résout-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 données (listes, fiches, formulaires)</option>
-                                    <option value="workflow">Processus métier (étapes, validations, approbations)</option>
-                                    <option value="reporting">Tableaux de bord et rapports</option>
-                                    <option value="integration">Intégration avec des systèmes externes</option>
-                                    <option value="full-module">Domaine complet (données + processus + rapports)</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Principales données gérées (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: Dépendances -->
-                <div class="section" id="decomp-dependencies" style="display:none;">
-                    <h2 class="section-title">Dépendances entre domaines</h2>
-                    <p class="section-subtitle">Indiquez quels domaines dépendent d'autres domaines. Par exemple, les Commandes dépendent 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 dépendances.</p>
-                        </div>
-                    </div>
-                    <div style="margin-top:1.5rem;">
-                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ajouter une dépendance</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">...dépend de</label>
-                                <select class="form-select" id="dep-to"></select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Nature de la dépendance</label>
-                            <input type="text" class="form-input" id="dep-desc" placeholder="Exemple : La commande référence un client existant">
-                        </div>
-                        <button class="btn btn-primary" onclick="addDependency()" style="margin-top:0.5rem;">Ajouter cette dépendance</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 proposé</h3>
-                        <p class="section-subtitle">Les domaines sont traités dans l'ordre de leurs dépendances : les fondations d'abord, puis les domaines qui en dépendent.</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: Modèle de données -->
-                <div class="section" id="consol-datamodel" style="display:none;">
-                    <h2 class="section-title">Modèle de données</h2>
-                    <p class="section-subtitle">Vue d'ensemble de toutes les entités métier, leurs attributs et leurs relations entre domaines.</p>
-                    <div id="dataModelContainer">
-                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Le modèle de données sera généré à partir des spécifications de chaque domaine.</p>
-                    </div>
-                </div>
-                <!-- 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 façon dont les domaines communiquent et partagent des données.</p>
-                    <div id="consolInteractions">
-                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Les interactions seront calculées automatiquement à partir des dépendances et des données partagées entre domaines.</p>
-                    </div>
-                </div>
-                <!-- SECTION: Cohérence des accès -->
-                <div class="section" id="consol-permissions" style="display:none;">
-                    <h2 class="section-title">Cohérence des droits d'accès</h2>
-                    <p class="section-subtitle">Vérification que les profils utilisateurs ont des droits cohérents dans tous les domaines.</p>
-                    <div id="consolPermissions">
-                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">La cohérence sera vérifiée quand les permissions de chaque domaine seront définies.</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 métier 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 à 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">Étapes du parcours (une par ligne : Domaine - Action)</label>
-                            <textarea class="form-textarea" id="flow-steps" placeholder="Clients - Le client existe dans le système&#10;Commandes - Créer la commande&#10;Commandes - Valider la commande&#10;Factures - Générer 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 (création), 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">Synthèse de l'analyse</h2>
-                    <p class="section-subtitle">Vue d'ensemble de toute l'analyse métier, prête pour le développement.</p>
-                    <div class="card" style="margin-bottom:1.5rem;" id="progressIndicator">
-                        <!-- Populated by renderProgressIndicator() -->
-                    </div>
-                    <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 prête pour l'extraction</p>
-                        <p style="color:var(--text-muted);font-size:0.85rem;margin-bottom:1rem;">Exportez le fichier JSON pour lancer la génération automatique du système.</p>
-                        <button class="btn btn-primary" onclick="exportJSON()" style="font-size:0.9rem;padding:0.6rem 1.5rem;">Exporter l'analyse complète en JSON</button>
-                    </div>
-                </div>
-            </main>
-            <!-- ============================================
-                 REVIEW PANEL (right sidebar)
-                 ============================================ -->
-            <aside class="review-panel" id="reviewPanel" role="complementary" aria-label="Panneau de review">
-                <div class="review-panel-header">
-                    <span class="review-panel-title">Review</span>
-                    <button class="review-panel-close" onclick="toggleReviewPanel()" title="Fermer" aria-label="Fermer le panneau de review">&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">À revoir</button>
-                    <button class="review-filter-btn" onclick="filterReviewComments('validated')" data-filter="validated">Validés</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">À revoir</div>
-                    </div>
-                    <div class="review-stat">
-                        <div class="review-stat-value" id="reviewStatValidated">0</div>
-                        <div class="review-stat-label">Validés</div>
-                    </div>
-                </div>
-            </aside>
-        </div>
-    </div>
-    <!-- Notification -->
-    <div class="notification notification-success" id="notification"></div>
-    <script>
-<!-- JS_PLACEHOLDER -->
-    </script>
-</body>
-</html>

package/templates/skills/business-analyse-html/references/02-embedded-artifacts-building.md DELETED Viewed

@@ -1,144 +0,0 @@
-# Reference: EMBEDDED_ARTIFACTS Building Details
-## wireframes{} — per moduleCode
-### Architecture: Flat File + Nested Structures
-**FLAT-FILE:** Wireframes come from `screens.json` in each module directory (collected in step-01),
-NOT from `moduleFeature.specification.uiWireframes`.
-### STEP 1: Collect wireframe sources from BOTH flat and nested structures
-```javascript
-const mod = collected_data.modules[moduleCode];
-// Flat: mod.screens.screens[] with mockupFormat/mockup at top level
-// Nested: mod.screens.sections[].resources[].wireframe (design step output)
-let rawWireframes = [];
-// Source A: flat screens[] array (original BA output or manually enriched)
-const flatScreens = mod.screens?.screens || [];
-rawWireframes.push(...flatScreens.filter(s => s.mockup || s.mockupFormat));
-// Source B: nested sections[].resources[].wireframe (design step output)
-const sections = mod.screens?.sections || [];
-for (const section of sections) {
-  // B1: wireframe directly on section (ba-004 style: sections[].wireframe)
-  if (section.wireframe) {
-    rawWireframes.push({
-      ...section.wireframe,
-      section: section.wireframe.section || section.id || section.code || section.sectionCode || "",
-      screen: section.wireframe.screen || section.id || section.code || section.sectionCode || ""
-    });
-  }
-  // B2: wireframe on resources (nested: sections[].resources[].wireframe)
-  for (const resource of (section.resources || [])) {
-    if (resource.wireframe) {
-      rawWireframes.push({
-        ...resource.wireframe,
-        section: resource.wireframe.section || section.sectionCode || section.id || "",
-        screen: resource.wireframe.screen || `${section.sectionCode || section.id}-${resource.code}` || ""
-      });
-    }
-  }
-}
-// Source C: screens/sections without mockup → auto-generate text description as wireframe fallback
-// C1: from flat screens[]
-const screensWithoutMockup = flatScreens.filter(s => !s.mockup && !s.mockupFormat);
-// C2: from sections[] (ba-004 style) — sections without wireframe property
-const sectionsWithoutWireframe = sections.filter(s => !s.wireframe);
-const allNoMockup = [
-  ...screensWithoutMockup.map(s => ({
-    type: s.componentType || "", columns: s.columns || [], tabs: s.tabs || [],
-    kpis: s.kpis || [], screen: s.screen || "", section: s.section || "",
-    description: s.sectionDescription || ""
-  })),
-  ...sectionsWithoutWireframe.map(s => ({
-    type: s.layout || s.componentType || "", columns: s.columns || [], tabs: s.tabs || [],
-    kpis: s.kpis || [], screen: s.id || s.code || "", section: s.id || s.code || "",
-    description: s.description || ""
-  }))
-];
-for (const screen of allNoMockup) {
-  const type = screen.type;
-  let desc = "";
-  if (type.includes("Table") || type.includes("Grid")) {
-    const cols = screen.columns;
-    desc = "Tableau avec " + cols.length + " colonnes : " + cols.map(c => c.label || c.displayName || c.code || c.name).join(", ");
-  } else if (type.includes("Form")) {
-    const tabs = screen.tabs;
-    desc = "Formulaire " + (tabs.length > 0 ? "avec " + tabs.length + " onglet(s)" : "");
-  } else if (type.includes("Dashboard")) {
-    desc = "Tableau de bord avec " + (screen.kpis.length || "") + " KPIs";
-  } else if (type.includes("Kanban")) {
-    desc = "Vue Kanban";
-  }
-  if (desc) {
-    rawWireframes.push({
-      screen: screen.screen, section: screen.section,
-      mockupFormat: "text", mockup: desc,
-      description: screen.description, elements: [], componentMapping: []
-    });
-  }
-}
-```
-### STEP 2: Map to HTML format (RENAME: mockupFormat → format, mockup → content)
-**FIELD RENAME WARNING:** Module JSON uses `mockupFormat`/`mockup`. HTML reads `format`/`content`. You MUST rename.
-```javascript
-wireframes: {
-  [moduleCode]: rawWireframes.map(wf => ({
-      screen: wf.screen || wf.name || wf.title || wf.id || "",
-      section: wf.section || "",
-      format: wf.mockupFormat || "ascii",                   // RENAME: mockupFormat → format
-      content: wf.mockup || wf.ascii || wf.content || "",   // RENAME: mockup → content
-      svgContent: null,
-      description: wf.description || "",
-      elements: wf.elements || [],
-      actions: wf.actions || [],
-      componentMapping: Array.isArray(wf.componentMapping)
-        ? wf.componentMapping.map(function(entry) {
-            if (entry.wireframeElement && entry.reactComponent) return entry; // canonical
-            // Shorthand: [{key: value}] → {wireframeElement, reactComponent}
-            var keys = Object.keys(entry);
-            if (keys.length === 1 && !entry.wireframeElement) {
-              return { wireframeElement: keys[0], reactComponent: entry[keys[0]] };
-            }
-            return entry;
-          })
-        : typeof wf.componentMapping === 'object' && wf.componentMapping !== null
-          ? Object.entries(wf.componentMapping).map(([k, v]) => ({ wireframeElement: k, reactComponent: v }))
-          : [],
-      layout: typeof wf.layout === 'object' ? wf.layout : null,
-      permissionsRequired: wf.permissionsRequired || []
-    }))
-}
-```
-## e2eFlows[]
-```javascript
-e2eFlows: (master.consolidation?.e2eFlows || []).map(flow => ({
-  name: flow.name,
-  diagram: flow.steps.map(s => s.action + "(" + s.module + ")").join(" ──→ "),
-  steps: flow.steps || [],
-  actors: [...new Set(flow.steps.map(s => s.permission?.split(".")[0]).filter(Boolean))].join(", "),
-  modules: [...new Set(flow.steps.map(s => s.module))].join(" → ")
-}))
-```
-## dependencyGraph
-```javascript
-dependencyGraph: {
-  nodes: (master.modules || []).map(m => ({
-    id: m.code, label: m.code, type: m.featureType || "data-centric"
-  })),
-  edges: (master.dependencyGraph?.edges || []).map(e => ({
-    from: e.from, to: e.to, description: e.description || ""
-  }))
-}
-```