@atlashub/smartstack-cli 3.1.0 → 3.3.0

package/templates/skills/business-analyse/_suggestions.md

@@ -0,0 +1,34 @@
+# Business Analysis - Suggestions & Context7 (_suggestions.md)
+
+> **Loaded by:** step-01-cadrage, step-04-consolidation
+> **Purpose:** Proactive suggestion patterns and Context7 library references
+
+---
+
+## Proactive Suggestions
+
+After scope definition in step-01, the skill suggests complementary modules/sections:
+
+1. Analyze feature type and scope from questionnaire answers
+2. Load `patterns/suggestion-catalog.md`
+3. Match against catalog patterns
+4. Present suggestions via AskUserQuestion (accept/reject per suggestion)
+5. Store in feature.json.suggestions[]
+
+Accepted suggestions become candidates for future /business-analyse runs.
+
+---
+
+## Context7 (Step 04)
+
+```
+Prompt pattern:
+"use context7 with /facebook/react and /i18next/react-i18next
+ to generate {component} following SmartStack patterns"
+```
+
+Libraries:
+- `/facebook/react` - React 19 patterns
+- `/i18next/react-i18next` - Internationalization
+- `/remix-run/react-router` - React Router v7
+- `/lucide-icons/lucide-react` - Icons

package/templates/skills/business-analyse/html/ba-interactive.html

@@ -374,6 +374,95 @@
             min-height: 200px;
         }
 
+        /* Wireframe rendering */
+        .ascii-wireframe {
+            font-family: 'Courier New', 'Consolas', monospace;
+            font-size: 0.7rem;
+            line-height: 1.3;
+            color: var(--primary-light);
+            background: var(--bg-dark);
+            padding: 1rem;
+            border-radius: 6px;
+            overflow-x: auto;
+            white-space: pre;
+            margin: 0;
+        }
+
+        .svg-wireframe {
+            background: var(--bg-dark);
+            padding: 1rem;
+            border-radius: 6px;
+            overflow-x: auto;
+        }
+
+        .svg-wireframe svg {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .wireframe-description {
+            padding: 0.75rem 1rem;
+            font-size: 0.85rem;
+            color: var(--text);
+            border-top: 1px solid var(--border);
+            background: var(--bg-input);
+        }
+
+        .wireframe-metadata {
+            padding: 0.75rem 1rem;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            border-top: 1px solid var(--border);
+        }
+
+        .wireframe-details {
+            padding: 0.75rem 1rem;
+            border-top: 1px solid var(--border);
+            background: var(--bg-input);
+        }
+
+        .wireframe-details summary {
+            cursor: pointer;
+            font-size: 0.85rem;
+            color: var(--primary-light);
+            font-weight: 500;
+            user-select: none;
+        }
+
+        .wireframe-details summary:hover {
+            color: var(--primary);
+        }
+
+        .mapping-table {
+            width: 100%;
+            margin-top: 0.75rem;
+            border-collapse: collapse;
+            font-size: 0.8rem;
+        }
+
+        .mapping-table th {
+            background: var(--bg-hover);
+            padding: 0.5rem;
+            text-align: left;
+            font-weight: 500;
+            color: var(--text-bright);
+            border: 1px solid var(--border);
+        }
+
+        .mapping-table td {
+            padding: 0.5rem;
+            border: 1px solid var(--border);
+            color: var(--text);
+        }
+
+        .mapping-table code {
+            background: var(--bg-dark);
+            padding: 0.2rem 0.4rem;
+            border-radius: 3px;
+            font-size: 0.75rem;
+            color: var(--accent);
+        }
+
         /* Mockup components */
         .mock-header {
             display: flex;
@@ -1407,6 +1496,7 @@
        ============================================ */
     const APP_KEY = 'ba-{{APPLICATION_ID}}';
     let data = {{FEATURE_DATA}};
+    const EMBEDDED_ARTIFACTS = {{EMBEDDED_ARTIFACTS}};
 
     /* ============================================
        INITIALIZATION
@@ -1682,7 +1772,8 @@
             modules: data.modules,
             dependencies: data.dependencies,
             moduleSpecifications: {},
-            consolidation: data.consolidation
+            consolidation: data.consolidation,
+            artifacts: EMBEDDED_ARTIFACTS  // NEW: Include visual artifacts
         };
 
         // Structure module specs for export
@@ -1700,8 +1791,8 @@
                 })),
                 entities: spec.entities || [],
                 permissions: spec.permissions || [],
-                notes: spec.notes || '',
-                mockupNotes: spec.mockupNotes || ''
+                notes: spec.notes || ''
+                // mockupNotes removed: wireframes now in artifacts
             };
         });
 
@@ -2132,60 +2223,9 @@
 
             <!-- TAB: Maquettes -->
             <div class="tab-panel" id="tab-${code}-mock">
-                <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Exemples visuels des ecrans principaux de ce domaine. Ces maquettes montrent la disposition generale, pas le design final.</p>
-
-                <div class="mockup-frame">
-                    <div class="mockup-toolbar">
-                        <div class="mockup-dot mockup-dot-red"></div>
-                        <div class="mockup-dot mockup-dot-yellow"></div>
-                        <div class="mockup-dot mockup-dot-green"></div>
-                        <span class="mockup-title">${mod.name} - Liste</span>
-                    </div>
-                    <div class="mockup-content">
-                        <div class="mock-header">
-                            <div class="mock-title">${mod.name}</div>
-                            <div class="mock-btn">+ Nouveau</div>
-                        </div>
-                        <div class="mock-search">Rechercher...</div>
-                        <table class="mock-table">
-                            <thead><tr>
-                                ${(mod.entities || []).slice(0, 1).length > 0 ? '<th>Identifiant</th><th>Nom</th><th>Statut</th><th>Date</th><th>Actions</th>' : '<th>Colonne 1</th><th>Colonne 2</th><th>Statut</th><th>Actions</th>'}
-                            </tr></thead>
-                            <tbody>
-                                <tr><td style="color:var(--primary-light);">001</td><td>Exemple 1</td><td><span class="mock-status mock-status-active">Actif</span></td><td>Aujourd'hui</td><td style="color:var(--text-muted);">Voir | Modifier</td></tr>
-                                <tr><td style="color:var(--primary-light);">002</td><td>Exemple 2</td><td><span class="mock-status mock-status-pending">En attente</span></td><td>Hier</td><td style="color:var(--text-muted);">Voir | Modifier</td></tr>
-                                <tr><td style="color:var(--primary-light);">003</td><td>Exemple 3</td><td><span class="mock-status mock-status-draft">Brouillon</span></td><td>Il y a 3 jours</td><td style="color:var(--text-muted);">Voir | Modifier</td></tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <div class="mockup-frame" style="margin-top:1rem;">
-                    <div class="mockup-toolbar">
-                        <div class="mockup-dot mockup-dot-red"></div>
-                        <div class="mockup-dot mockup-dot-yellow"></div>
-                        <div class="mockup-dot mockup-dot-green"></div>
-                        <span class="mockup-title">${mod.name} - Formulaire de creation</span>
-                    </div>
-                    <div class="mockup-content">
-                        <div class="mock-header">
-                            <div class="mock-title">Nouveau ${(mod.entities || [])[0] || 'enregistrement'}</div>
-                        </div>
-                        <div class="mock-form-row">
-                            <div class="mock-form-group"><div class="mock-label">Identifiant</div><div class="mock-input" style="color:var(--text-muted);">Genere automatiquement</div></div>
-                            <div class="mock-form-group"><div class="mock-label">Nom</div><div class="mock-input"></div></div>
-                        </div>
-                        <div class="mock-form-group"><div class="mock-label">Description</div><div class="mock-input" style="height:60px;"></div></div>
-                        <div class="mock-form-actions">
-                            <div class="mock-btn" style="background:var(--bg-hover);color:var(--text);">Annuler</div>
-                            <div class="mock-btn">Enregistrer</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card" style="margin-top:1rem;">
-                    <div class="card-label">Notes sur les maquettes</div>
-                    <div class="editable" contenteditable="true" data-module-code="${code}" data-module-field="mockupNotes" data-placeholder="Ajoutez vos remarques sur les maquettes : elements manquants, disposition souhaitee, comportements particuliers...">${spec.mockupNotes || ''}</div>
+                <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Maquettes validees lors de l'analyse. Ces wireframes montrent la structure exacte des ecrans de ce domaine.</p>
+                <div id="mockupContainer-${code}">
+                    ${renderModuleMockups(code)}
                 </div>
             </div>
 
@@ -2328,6 +2368,55 @@
         autoSave();
     }
 
+    function renderModuleMockups(code) {
+        // Get embedded wireframes for this module
+        const wireframes = EMBEDDED_ARTIFACTS?.wireframes?.[code] || [];
+
+        if (wireframes.length === 0) {
+            return `
+                <div class="card" style="text-align:center;padding:2rem;color:var(--text-muted);">
+                    <p>Aucune maquette disponible pour ce module.</p>
+                    <p style="font-size:0.85rem;margin-top:0.5rem;">Les maquettes seront generees lors de la specification detaillee.</p>
+                </div>`;
+        }
+
+        return wireframes.map((wf, i) => `
+            <div class="mockup-frame" style="${i > 0 ? 'margin-top:1.5rem;' : ''}">
+                <div class="mockup-toolbar">
+                    <div class="mockup-dot mockup-dot-red"></div>
+                    <div class="mockup-dot mockup-dot-yellow"></div>
+                    <div class="mockup-dot mockup-dot-green"></div>
+                    <span class="mockup-title">${wf.screen || wf.section}</span>
+                </div>
+                <div class="mockup-content">
+                    ${wf.format === 'ascii'
+                        ? `<pre class="ascii-wireframe">${wf.content || ''}</pre>`
+                        : `<div class="svg-wireframe">${wf.content || ''}</div>`}
+                </div>
+                ${wf.description ? `
+                <div class="wireframe-description">
+                    <strong>Description:</strong> ${wf.description}
+                </div>` : ''}
+                ${(wf.elements || []).length > 0 ? `
+                <div class="wireframe-metadata">
+                    <div><strong>Elements:</strong> ${wf.elements.join(', ')}</div>
+                </div>` : ''}
+                ${(wf.componentMapping || []).length > 0 ? `
+                <details class="wireframe-details">
+                    <summary>Mapping composants SmartStack</summary>
+                    <table class="mapping-table">
+                        <thead><tr><th>Element maquette</th><th>Composant React</th></tr></thead>
+                        <tbody>
+                            ${wf.componentMapping.map(m =>
+                                `<tr><td>${m.wireframeElement}</td><td><code>${m.reactComponent}</code></td></tr>`
+                            ).join('')}
+                        </tbody>
+                    </table>
+                </details>` : ''}
+            </div>
+        `).join('');
+    }
+
     function renderPermissionGrid(code) {
         const roles = data.cadrage.stakeholders.length > 0
             ? data.cadrage.stakeholders.map(s => s.role)

package/templates/skills/business-analyse/questionnaire/06-security.md

@@ -44,7 +44,7 @@
 > - Les rôles identifiés en Q6.1-Q6.4 sont des **ensembles de permissions**, pas des données métier
 > - L'accès est contrôlé par des permissions attribuées aux rôles, pas par des propriétés d'entité
 > - Ne jamais proposer de créer une entité `Role`, `UserRole`, ou un attribut `User.Role`
-> - Le mapping rôle → permissions se fait dans la **Permission Matrix** (step-03-specify)
+> - Le mapping rôle → permissions se fait dans la **Permission Matrix** (step-03a-specify)
 
 ## Elicitation Guide
 

package/templates/skills/business-analyse/questionnaire.md

@@ -1,6 +1,6 @@
 # Elicitation Questionnaire - Business Analysis
 
-> **Usage:** Structured questions for step-01-cadrage and step-03-specify
+> **Usage:** Structured questions for step-01-cadrage and step-03a-specify
 > **Standard:** BABOK v3 - Elicitation Techniques (VibeCoding-focused)
 > **Model:** OPUS with ULTRATHINK
 > **Total:** ~68 targeted questions (dev-relevant only)
@@ -284,7 +284,7 @@
 | Phase | Categories utilisees |
 |-------|---------------------|
 | step-01-cadrage | 00 (si mode application), 01, 02, 03, 14, 15 + conditionnelles (05, 06, 08, 09, 10) |
-| step-03-specify (par module) | 04, 07, 11, 12, 13 (chargees par module) |
+| step-03a-specify (par module) | 04, 07, 11, 12, 13 (chargees par module) |
 
 ### Phase de cadrage
 
@@ -315,18 +315,23 @@ Chaque question conservee passe ce test :
 
 | Categorie | Questions | Phase | Focus |
 |-----------|-----------|-------|-------|
-| 0. Identite de l'application | 8 | step-01 (mode application) | Nom, domaines, profils |
-| 1. Contexte metier | 12 | step-01 | Probleme, situation actuelle, vision, declencheur |
-| 2. Parties prenantes | 14 | step-01 | Utilisateurs, taches, acces, changement |
-| 3. Perimetre fonctionnel | 12 | step-01 | Priorites, parcours, besoins transversaux |
-| 4. Donnees | 8 | step-03 (par module) | Entites et regles |
-| 5. Integrations | 8 | step-01 (conditionnel) | Systemes et flux |
-| 6. Securite et acces | 8 | step-01 (conditionnel) | Permissions et restrictions |
-| 7. Interface utilisateur | 8 | step-03 (par module) | Ecrans et experience |
-| 8. Performance et qualite | 4 | step-01 (conditionnel) | Temps de reponse et tests |
-| 9. Contraintes | 4 | step-01 (conditionnel) | Technologies et dependances |
-| 10. Documentation | 4 | step-01 (conditionnel) | Guides et formation |
-| 14. Risques et hypotheses | 8 | step-01 | Risques, hypotheses, lecons du passe |
-| 15. Criteres de reussite | 8 | step-01 | Indicateurs de succes, conditions d'acceptation |
-| **Total noyau** | **~86** | | |
-| 11-13 (conditionnel) | ~24 | step-03 (par module) | Cycle de vie, migration, impact inter-modules |
+| 0. Identite de l'application | 18 | step-01 (mode application) | Nom, domaines, profils |
+| 1. Contexte metier | 32 | step-01 | Probleme, situation actuelle, vision, declencheur |
+| 2. Parties prenantes | 33 | step-01 | Utilisateurs, taches, acces, changement |
+| 3. Perimetre fonctionnel | 32 | step-01 | Priorites, parcours, besoins transversaux |
+| 4. Donnees | 15 | step-03 (par module) | Entites et regles |
+| 5. Integrations | 14 | step-01 (conditionnel) | Systemes et flux |
+| 6. Securite et acces | 13 | step-01 (conditionnel) | Permissions et restrictions |
+| 7. Interface utilisateur | 19 | step-03 (par module) | Ecrans et experience |
+| 8. Performance et qualite | 8 | step-01 (conditionnel) | Temps de reponse et tests |
+| 9. Contraintes | 6 | step-01 (conditionnel) | Technologies et dependances |
+| 10. Documentation | 7 | step-01 (conditionnel) | Guides et formation |
+| 11. Cycle de vie donnees | 14 | step-03 (conditionnel) | Retention, archivage, RGPD |
+| 12. Migration et transition | 14 | step-03 (conditionnel) | Donnees existantes, cutover |
+| 13. Impact inter-modules | 14 | step-03 (conditionnel) | Dependances, evenements |
+| 14. Risques et hypotheses | 16 | step-01 | Risques, hypotheses, lecons du passe |
+| 15. Criteres de reussite | 17 | step-01 | Indicateurs de succes, conditions d'acceptation |
+| **Total noyau (01-03, 14-15)** | **130** | | **Toujours charges** |
+| **Total avec app (00)** | **148** | | **Si mode application** |
+| **Total conditionnel (04-13)** | **124** | | **Selon contexte** |
+| **Total maximum possible** | **272** | | **Noyau + app + tous conditionnels** |

package/templates/skills/business-analyse/react/components.md

@@ -1,7 +1,7 @@
 # React Components - Business Analyse Viewer
 
 > **Usage:** React component that renders feature.json directly
-> **Loaded in:** step-05-handoff.md
+> **Loaded in:** step-05b-deploy.md
 > **Data source (module):** `docs/business/{app}/{module}/business-analyse/v{X.Y}/feature.json`
 > **Data source (application):** `docs/business/{app}/business-analyse/v{X.Y}/feature.json`
 > **Related:** `react/application-viewer.md` for application-level view

package/templates/skills/business-analyse/react/schema.md

@@ -1,7 +1,7 @@
 # TypeScript Schema - Feature JSON Types
 
 > **Usage:** TypeScript interfaces aligned with feature-schema.json and application-schema.json
-> **Loaded in:** step-05-handoff.md (for web app rendering)
+> **Loaded in:** step-05b-deploy.md (for web app rendering)
 > **Source (module):** `docs/business/{app}/{module}/business-analyse/v{X.Y}/feature.json`
 > **Source (application):** `docs/business/{app}/business-analyse/v{X.Y}/feature.json`
 

package/templates/skills/business-analyse/references/html-data-mapping.md

@@ -0,0 +1,294 @@
+# HTML Data Mapping Reference (references/html-data-mapping.md)
+
+> **Used by:** step-05b-deploy (section 3: Deploy Interactive HTML Document)
+> **Purpose:** Exact mapping from feature.json to HTML FEATURE_DATA and EMBEDDED_ARTIFACTS objects
+
+---
+
+## FEATURE_DATA Mapping
+
+Build a JSON object following this **exact mapping** from feature.json to the HTML data model:
+
+```javascript
+{
+  metadata: {
+    applicationName: master.metadata.application,       // e.g. "RH"
+    applicationId: master.id,                           // e.g. "FEAT-001"
+    version: master.version,                            // e.g. "1.0"
+    createdAt: master.metadata.createdAt,
+    lastModified: master.metadata.updatedAt
+  },
+  cadrage: {
+    problem: {
+      description: master.cadrage.problem,              // string → problem.description
+      trigger: master.cadrage.trigger,                  // string → problem.trigger
+      impactedPeople: "",                               // not in feature.json, client fills
+      history: "",
+      consequences: ""
+    },
+    current: {
+      tools: master.cadrage.asIs,                       // string → current.tools
+      steps: [],                                        // client can add process steps
+      painPoints: master.cadrage.stakeholders
+        .flatMap(s => s.painPoints || []).join("\n"),    // aggregate all painPoints
+      errors: ""
+    },
+    vision: {
+      changes: master.cadrage.toBe,                     // string → vision.changes
+      results: master.cadrage.acceptanceCriteria
+        .map(ac => ac.criterion).join("\n"),             // AC → results (one per line)
+      successSign: ""
+    },
+    stakeholders: master.cadrage.stakeholders.map(s => ({
+      role: s.role,
+      function: s.function || "",
+      tasks: s.tasks || [],
+      frequency: mapFrequency(s.frequency),             // "Quotidien"→"daily", etc.
+      access: mapAccess(s.involvement),                 // "decision-maker"→"admin", "end-user"→"contributor"
+      frustrations: (s.painPoints || []).join("\n")
+    })),
+    scope: {
+      vital: (master.cadrage.globalScope.mustHave || [])
+        .map(item => ({ name: item, description: "" })),      // string[] → {name,description}[]
+      important: (master.cadrage.globalScope.shouldHave || [])
+        .map(item => ({ name: item, description: "" })),
+      optional: (master.cadrage.globalScope.couldHave || [])
+        .map(item => ({ name: item, description: "" })),
+      excluded: (master.cadrage.globalScope.outOfScope || [])
+        .map(item => ({ name: item, description: "" }))
+    },
+    risks: (master.cadrage.risks || []).map(r => ({
+      description: r.description,
+      probability: r.probability,                       // "high" | "medium" | "low"
+      impact: r.impact,
+      mitigation: r.mitigation || ""
+    })),
+    assumptions: "",
+    success: {
+      definition: (master.cadrage.acceptanceCriteria || [])
+        .map(ac => ac.criterion).join("\n"),
+      metrics: "",
+      timeline: "",
+      minimumConditions: ""
+    }
+  },
+  modules: master.modules.map(m => ({
+    code: m.code,
+    name: m.code,                                       // module code as name
+    description: m.description || "",
+    featureType: m.featureType || "data-centric",
+    priority: m.priority || "must",
+    entities: m.entities || [],
+    status: m.status || "handed-off"
+  })),
+  dependencies: (master.dependencyGraph?.edges || []).map(e => ({
+    from: e.from,
+    to: e.to,
+    description: e.description || ""
+  })),
+  moduleSpecs: {
+    // FOR EACH module: read module feature.json, then map:
+    // [moduleCode]: { useCases, businessRules, entities, permissions, notes, mockupNotes }
+  },
+  consolidation: {
+    interactions: (master.consolidation?.crossModuleInteractions || []).map(i => ({
+      from: i.fromModule,
+      to: i.toModule,
+      description: i.description || ""
+    })),
+    e2eFlows: (master.consolidation?.e2eFlows || []).map(f => ({
+      name: f.name,
+      steps: (f.steps || []).map(s => ({ module: s.module, action: s.action })),
+      actors: (f.steps || []).map(s => s.permission).join(", ")
+    }))
+  },
+  handoff: master.handoff || {}
+}
+```
+
+### Module Specs Mapping
+
+For EACH module in `master.modules[]`:
+
+1. Read the module feature.json at `master.modules[i].featureJsonPath`
+2. Map to `moduleSpecs[moduleCode]`:
+
+```javascript
+moduleSpecs[moduleCode] = {
+  useCases: (moduleFeature.specification?.useCases || []).map(uc => ({
+    name: uc.name,
+    actor: uc.primaryActor,
+    steps: (uc.mainScenario || []).join("\n"),           // array → newline-separated string
+    alternative: (uc.alternativeScenarios || [])
+      .map(a => a.name + ": " + (a.steps || []).join(", ")).join("\n")
+  })),
+  businessRules: (moduleFeature.analysis?.businessRules || []).map(br => ({
+    name: br.name,
+    category: br.category,                              // "validation"|"calculation"|"workflow"|"security"|"data"
+    statement: br.statement,
+    example: (br.examples || []).map(e => e.input + " → " + e.expected).join("; ")
+  })),
+  entities: (moduleFeature.analysis?.entities || []).map(ent => ({
+    name: ent.name,
+    description: ent.description || "",
+    attributes: (ent.attributes || []).map(a => ({
+      name: a.name,
+      description: a.description || ""
+    })),
+    relationships: (ent.relationships || []).map(r =>
+      r.target + " (" + r.type + ") - " + (r.description || "")
+    )
+  })),
+  permissions: buildPermissionKeys(moduleFeature),      // see below
+  notes: "",
+  mockupNotes: ""  // Deprecated: wireframes now embedded separately in EMBEDDED_ARTIFACTS
+}
+```
+
+### Permission Keys Function
+
+The HTML uses `"Role|Action"` format (e.g. `"RH Admin|Consulter"`):
+
+```javascript
+function buildPermissionKeys(moduleFeature) {
+  const keys = [];
+  const matrix = moduleFeature.specification?.permissionMatrix;
+  if (!matrix) return keys;
+  const actionMap = { read: "Consulter", create: "Creer", update: "Modifier",
+                      delete: "Supprimer", validate: "Valider", export: "Exporter",
+                      submit: "Valider", import: "Creer" };
+  (matrix.roleAssignments || []).forEach(ra => {
+    (ra.permissions || []).forEach(permPath => {
+      const action = permPath.split(".").pop();         // last segment = action
+      const uiAction = actionMap[action] || action;
+      keys.push(ra.role + "|" + uiAction);
+    });
+  });
+  return keys;
+}
+```
+
+### Frequency Mapping
+
+```
+"Quotidien" → "daily", "Hebdomadaire" → "weekly", "Mensuel" → "monthly"
+Default: "daily"
+```
+
+### Access Mapping (involvement → access)
+
+```
+"decision-maker" → "admin", "end-user" with manager-like tasks → "manager"
+"end-user" → "contributor", "observer" → "viewer"
+Default: "contributor"
+```
+
+---
+
+## EMBEDDED_ARTIFACTS Mapping
+
+Build a JSON object containing ALL visual artifacts from feature.json:
+
+```javascript
+{
+  wireframes: {
+    // FOR EACH module: extract all wireframes from module feature.json
+    // [moduleCode]: [ {screen, format, content, elements, componentMapping, layout, description} ]
+  },
+  e2eFlows: [
+    // Extract from master consolidation.e2eFlows[]
+    // { name, diagram, steps, actors }
+  ],
+  dependencyGraph: {
+    // Extract from master dependencyGraph
+    // nodes: [ {id, label, type} ], edges: [ {from, to, description} ]
+  }
+}
+```
+
+### Wireframes Mapping
+
+For EACH module in `master.modules[]`:
+
+```javascript
+// Read the module feature.json
+const moduleFeature = readModuleFeature(moduleCode);
+const wireframes = (moduleFeature.specification?.uiWireframes || []).map(wf => ({
+  screen: wf.screen,                                    // e.g. "UM-list", "UM-form"
+  section: wf.section,                                  // e.g. "list", "form"
+  format: wf.mockupFormat || "ascii",                   // "ascii" | "svg"
+  content: wf.mockup,                                   // ASCII art or SVG markup
+  description: wf.description || "",
+  elements: wf.elements || [],                          // ["DataGrid", "FilterBar", ...]
+  actions: wf.actions || [],                            // ["filter", "sort", "create", ...]
+  componentMapping: wf.componentMapping || [],          // [{ wireframeElement, reactComponent }]
+  layout: wf.layout || null,                            // { type, regions: [...] }
+  permissionsRequired: wf.permissionsRequired || []
+}));
+
+// Store in artifacts object
+EMBEDDED_ARTIFACTS.wireframes[moduleCode] = wireframes;
+```
+
+### E2E Flows Mapping
+
+From master consolidation:
+
+```javascript
+EMBEDDED_ARTIFACTS.e2eFlows = (master.consolidation?.e2eFlows || []).map(flow => ({
+  name: flow.name,
+  diagram: generateE2EDiagram(flow),                    // ASCII diagram from flow.steps[]
+  steps: flow.steps || [],                              // [{ module, action, permission }]
+  actors: Array.from(new Set((flow.steps || [])
+    .map(s => s.permission?.split(".")[0])              // Extract role from permission path
+    .filter(Boolean))).join(", "),
+  modules: Array.from(new Set((flow.steps || [])
+    .map(s => s.module))).join(" → ")
+}));
+
+function generateE2EDiagram(flow) {
+  // Generate ASCII diagram from flow.steps[]
+  // Example output:
+  // "Customer ──[read]──→ Order ──[create]──→ Invoice ──[send]──→"
+  // "  (Orders)           (Orders)            (Invoices)"
+  // "  Contributor        Manager             System"
+
+  const stepDiagrams = (flow.steps || []).map(s =>
+    `${s.action}(${s.module})`
+  ).join(" ──→ ");
+
+  return stepDiagrams;
+}
+```
+
+### Dependency Graph Mapping
+
+From master dependencyGraph:
+
+```javascript
+EMBEDDED_ARTIFACTS.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 || ""
+  }))
+};
+```
+
+---
+
+## Usage in step-05b-deploy
+
+1. Serialize the FEATURE_DATA object as JSON (with 2-space indentation for readability)
+2. Serialize the EMBEDDED_ARTIFACTS object as JSON (with 2-space indentation)
+3. Replace `{{FEATURE_DATA}}` with the serialized FEATURE_DATA JSON
+4. Replace `{{EMBEDDED_ARTIFACTS}}` with the serialized EMBEDDED_ARTIFACTS JSON
+5. Replace `{{APPLICATION_NAME}}` → `{application_name}` (still used in `<title>` and header)
+6. Replace `{{APPLICATION_ID}}` → `{feature_id}` (still used in `APP_KEY`)
+7. Replace `{{VERSION}}` → `{version}`
+8. Replace `{{CREATED_AT}}` → `{ISO timestamp}`

package/templates/skills/business-analyse/schemas/feature-schema.json

@@ -43,7 +43,7 @@
     }
   },
 
-  "$comment": "Sub-schema loading guide per BA step: step-00-init → metadata-schema.json | step-01-cadrage → discovery-schema.json (module) OR application-schema.json (master) | step-02-decomposition → application-schema.json (modules[], dependencyGraph) | step-03-specify → analysis-schema.json + specification-schema.json | step-04-consolidation → validation-schema.json + application-schema.json (consolidation) | step-05-handoff → handoff-schema.json",
+  "$comment": "Sub-schema loading guide per BA step: step-00-init → metadata-schema.json | step-01-cadrage → discovery-schema.json (module) OR application-schema.json (master) | step-02-decomposition → application-schema.json (modules[], dependencyGraph) | step-03a-specify → analysis-schema.json | step-03b-compile → specification-schema.json | step-04-consolidation → validation-schema.json + application-schema.json (consolidation) | step-05a-handoff → handoff-schema.json | step-05b-deploy → (artifacts only)",
 
   "$defs": {
     "stepStatus": { "$ref": "shared/common-defs.json#/$defs/stepStatus" },