@atlashub/smartstack-cli 3.1.0 → 3.2.0

package/templates/skills/business-analyse/steps/step-05-handoff.md

@@ -1071,8 +1071,7 @@ moduleSpecs[moduleCode] = {
   })),
   permissions: buildPermissionKeys(moduleFeature),      // see below
   notes: "",
-  mockupNotes: (moduleFeature.specification?.uiWireframes || [])
-    .map(w => "[" + w.screen + "]\n" + w.mockup).join("\n\n")
+  mockupNotes: ""  // Deprecated: wireframes now embedded separately in EMBEDDED_ARTIFACTS
 }
 ```
 
@@ -1110,18 +1109,113 @@ Default: "daily"
 Default: "contributor"
 ```
 
+#### Step 2-bis: Build EMBEDDED_ARTIFACTS object (NEW)
+
+> **NEW in v6.2:** Visual artifacts (wireframes, E2E diagrams) are now embedded as a separate JavaScript object in the HTML for client-side rendering and export.
+
+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 || ""
+  }))
+};
+```
+
 #### Step 3: Replace placeholders in template
 
 1. Serialize the FEATURE_DATA object as JSON (with 2-space indentation for readability)
-2. Replace `{{FEATURE_DATA}}` with the serialized JSON
-3. Replace `{{APPLICATION_NAME}}` → `{application_name}` (still used in `<title>` and header)
-4. Replace `{{APPLICATION_ID}}` → `{feature_id}` (still used in `APP_KEY`)
-5. Replace `{{VERSION}}` → `{version}`
-6. Replace `{{CREATED_AT}}` → `{ISO timestamp}`
+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}`
 
 > **NOTE:** `{{APPLICATION_NAME}}`, `{{APPLICATION_ID}}`, `{{VERSION}}`, `{{CREATED_AT}}` still appear
 > in the HTML body (`<title>`, header, `APP_KEY`). They MUST be replaced separately from FEATURE_DATA.
 
+> **NEW:** `{{EMBEDDED_ARTIFACTS}}` is a separate JavaScript variable in the HTML that stores all visual artifacts (wireframes, E2E diagrams, dependency graph) for client-side rendering and export.
+
 #### Step 4: Write and confirm
 
 1. Write the populated HTML to the output directory
@@ -1132,6 +1226,7 @@ Default: "contributor"
   Path: docs/business/{app}/business-analyse/v{version}/ba-interactive.html
   Pre-populated with: {stakeholder_count} stakeholders, {module_count} modules,
     {total_uc} use cases, {total_br} business rules, {total_entity} entities
+  Visual artifacts: {total_wireframes} wireframes, {e2e_flow_count} E2E diagrams
   Open in browser to review and edit the business analysis.
   Export JSON and re-import with: /business-analyse -x <exported-json-path>
 ```
@@ -1241,7 +1336,7 @@ options:
   - label: "Feature Full (Recommandé)"
     description: "Génération parallèle rapide (code + tests). Couverture 70-80%. ~{hours/3} heures."
   - label: "Ralph Loop"
-    description: "Développement task-driven séquentiel. Couverture 95-100%. ~{hours} heures."
+    description: "Développement itératif task-par-task avec cycle : Analyse → Dev (backend + tests unitaires + tests non-régression + frontend + tests + documentation) → Validation → Correction → Test ... jusqu'à 100% tests pass. Couverture 95-100%. ~{hours} heures."
   - label: "Terminer le BA"
     description: "Finir l'analyse, développement manuel par l'équipe."
 ```
@@ -1253,6 +1348,179 @@ options:
 
 ---
 
+### 10-bis. Execute User Choice (Automatic Skill Launch)
+
+> **NEW in v6.1:** Automatically launch the chosen development approach for seamless transition.
+
+**After receiving AskUserQuestion response:**
+
+```javascript
+const choice = userAnswer; // "Feature Full (Recommandé)" | "Ralph Loop" | "Terminer le BA"
+
+// Extract choice label (remove "(Recommandé)" suffix)
+const choiceLabel = choice.replace(/\s*\(.*?\)\s*$/g, '').trim();
+
+if (choiceLabel === "Ralph Loop") {
+  // Launch ralph-loop skill automatically
+  display("");
+  display("🚀 Lancement de Ralph Loop - Développement itératif automatique");
+  display("");
+  display("╔══════════════════════════════════════════════════════════════╗");
+  display("║  CYCLE RALPH LOOP - Comment ça fonctionne ?                 ║");
+  display("╠══════════════════════════════════════════════════════════════╣");
+  display("║                                                              ║");
+  display("║  Ralph Loop exécute un cycle itératif jusqu'à 100% tests:   ║");
+  display("║                                                              ║");
+  display("║  1️⃣ ANALYSE      → Charger task suivante du prd.json       ║");
+  display("║  2️⃣ DÉVELOPPEMENT → Générer le code demandé                 ║");
+  display("║     • Backend (Entities, Services, Controllers, Repos)      ║");
+  display("║     • Tests unitaires (xUnit) + non-régression              ║");
+  display("║     • Frontend (Pages, Components, Hooks)                   ║");
+  display("║     • Tests frontend (React Testing Library)                ║");
+  display("║     • SeedData (Core RBAC + business data)                  ║");
+  display("║     • Documentation utilisateur (inline + tooltips)         ║");
+  display("║  3️⃣ VALIDATION   → Commit + MCP conventions check           ║");
+  display("║  4️⃣ TEST         → Exécuter dotnet test + npm test          ║");
+  display("║  5️⃣ CORRECTION   → Si échec, analyser et corriger           ║");
+  display("║  6️⃣ BOUCLE       → Répéter 4-5 jusqu'à 100% tests pass      ║");
+  display("║  7️⃣ NEXT TASK    → Passer à la task suivante (retour à 1)  ║");
+  display("║                                                              ║");
+  display("║  🎯 Objectif: ZÉRO ERREUR avant de passer à la task suivante║");
+  display("║  📊 Couverture: 95-100% (tests générés automatiquement)     ║");
+  display("║                                                              ║");
+  display("╚══════════════════════════════════════════════════════════════╝");
+  display("");
+  display("   Configuration du projet:");
+  display("   ┌────────────────────────────────────────────────────────────┐");
+  display("   │ Modules:   " + modules.map(m => m.code).join(", "));
+  display("   │ Stratégie: " + implementationStrategy);
+  display("   │ PRD:       " + (modules.length > 1 ? ".ralph/prd-{module}.json (per module)" : ".ralph/prd.json"));
+  display("   │ Progress:  .ralph/progress.txt");
+  display("   │ Ordre:     " + (modules.length > 1 ? "topologique (dépendances d'abord)" : "module unique"));
+  display("   └────────────────────────────────────────────────────────────┘");
+  display("");
+  display("   Modules à traiter (dans l'ordre):");
+  for (let i = 0; i < modules.length; i++) {
+    display("   " + (i+1) + ". " + modules[i].code + " (" + modules[i].complexity + ") - " + modules[i].tasksCount + " tasks");
+  }
+  display("");
+  display("   📂 Fichiers générés par le BA (inputs pour Ralph):");
+  display("   ├─ feature.json (master + modules) → Spécification source");
+  display("   ├─ prd.json (ou prd-{module}.json) → Task breakdown avec UC/FR/BR");
+  display("   ├─ progress.txt                    → Tracker hiérarchique (module → layer → tasks)");
+  display("   └─ ba-interactive.html             → Revue client (mockups, wireframes)");
+  display("");
+  display("   🔄 Ralph Loop va maintenant:");
+  display("   1. Détecter les prd-*.json par module (si multi-module)");
+  display("   2. Créer modules-queue.json avec l'ordre de traitement");
+  display("   3. Traiter module par module dans l'ordre topologique");
+  display("   4. Pour chaque module: parcourir les tasks (domain → seeddata → application → infrastructure → api → frontend → i18n → tests)");
+  display("   5. Pour chaque task: générer code → commit → tests → correction si échec → re-test → next task");
+  display("   6. Passer au module suivant quand 100% tasks du module actuel = completed");
+  display("   7. Générer rapport final avec métriques de couverture");
+  display("");
+  display("═══════════════════════════════════════════════════════════════");
+  display("");
+  display("➡️  Transition vers Ralph Loop...");
+  display("");
+
+  // Call the ralph-loop skill (no arguments needed - prd.json exists)
+  Skill({ skill: "ralph-loop" });
+
+  // EXIT - ralph-loop takes over
+  // The skill does NOT return here - ralph-loop continues in a new context
+
+} else if (choiceLabel === "Feature Full") {
+  // Launch feature-full skill automatically
+  display("");
+  display("🚀 Lancement de Feature Full...");
+  display("");
+  display("   Configuration:");
+  display("   - Mode: Parallel generation");
+  display("   - Couverture: 70-80%");
+  display("   - Durée estimée: ~" + Math.round(totalHours / 3) + " heures");
+  display("");
+  display("═══════════════════════════════════════════════════════════════");
+  display("");
+
+  Skill({ skill: "feature-full" });
+
+  // EXIT
+
+} else {
+  // "Terminer le BA" - no skill launch, end gracefully
+  display("");
+  display("✅ Business Analysis terminée.");
+  display("");
+  display("   Les équipes peuvent commencer le développement manuel.");
+  display("   Tous les artefacts sont prêts pour l'implémentation.");
+  display("");
+  display("📂 Fichiers générés:");
+  display("   - feature.json (master + modules) - Spécification complète");
+  display("   - .ralph/prd.json (ou prd-{module}.json) - Task breakdown");
+  display("   - .ralph/progress.txt - Tracker de progression");
+  display("   - ba-interactive.html - Document de revue client");
+  display("");
+  display("📊 Métriques:");
+  display("   - Modules: " + modules.length);
+  display("   - Entités: " + totalEntities);
+  display("   - Use cases: " + totalUseCases);
+  display("   - Business rules: " + totalBusinessRules);
+  display("   - Fichiers à créer: " + totalFiles);
+  display("");
+  display("🎯 Prochaines étapes recommandées:");
+  display("   1. Ouvrir ba-interactive.html dans le navigateur");
+  display("   2. Partager avec les stakeholders pour validation finale");
+  display("   3. Utiliser progress.txt comme guide de développement");
+  display("   4. Implémenter module par module selon l'ordre topologique");
+  display("");
+  display("💡 Pour lancer le développement assisté plus tard:");
+  display("   - Ralph Loop: /ralph-loop (détecte automatiquement .ralph/prd.json)");
+  display("   - Feature Full: /feature-full");
+  display("");
+  display("═══════════════════════════════════════════════════════════════");
+
+  // EXIT gracefully - BA workflow complete
+}
+```
+
+**Key behaviors:**
+
+1. **Ralph Loop launch:**
+   - No arguments needed (prd.json already exists)
+   - Ralph automatically detects single vs multi-module
+   - Ralph reads modules-queue.json if multi-module
+   - Seamless transition - user sees continuous flow
+
+2. **Feature Full launch:**
+   - Passes application context
+   - Parallel generation starts immediately
+
+3. **Manual development:**
+   - Clear summary of generated artifacts
+   - Actionable next steps
+   - Instructions for later skill launch
+
+**Error handling:**
+
+```javascript
+try {
+  Skill({ skill: "ralph-loop" });
+} catch (error) {
+  display("⚠️ Échec du lancement automatique de Ralph Loop");
+  display("");
+  display("   Veuillez lancer manuellement:");
+  display("   /ralph-loop");
+  display("");
+  display("   Si le problème persiste:");
+  display("   1. Vérifier que la skill ralph-loop est installée");
+  display("   2. Vérifier les permissions Claude Code");
+  display("   3. Consulter les logs: .ralph/logs/");
+}
+```
+
+---
+
 ## MODE SUPPORT
 
 ### Standard Mode

package/templates/skills/business-analyse/steps/step-06-extract.md

@@ -67,13 +67,27 @@ Lire le fichier passe en argument : {extract_path}
       "businessRules": [{ "id": "", "name": "", "category": "", "statement": "", "example": "" }],
       "entities": [{ "name": "", "description": "", "attributes": [{ "name": "", "description": "" }], "relationships": [] }],
       "permissions": [],
-      "notes": "",
-      "mockupNotes": ""
+      "notes": ""
     }
   },
   "consolidation": {
     "interactions": [],
-    "e2eFlows": [{ "name": "", "steps": [{ "module": "", "action": "" }], "actors": "" }]
+    "e2eFlows": [{ "name": "", "steps": [{ "module": "", "action": "" }], "actors": "", "diagram": "" }]
+  },
+  "artifacts": {
+    "wireframes": {
+      "{moduleCode}": [
+        { "screen": "", "section": "", "format": "ascii|svg", "content": "", "description": "",
+          "elements": [], "actions": [], "componentMapping": [], "layout": {}, "permissionsRequired": [] }
+      ]
+    },
+    "e2eFlows": [
+      { "name": "", "diagram": "", "steps": [], "actors": "", "modules": "" }
+    ],
+    "dependencyGraph": {
+      "nodes": [{ "id": "", "label": "", "type": "" }],
+      "edges": [{ "from": "", "to": "", "description": "" }]
+    }
   }
 }
 ```
@@ -407,6 +421,113 @@ ba-writer.enrichSection({
 ba-writer.updateStatus({feature_id}, "consolidated")
 ```
 
+### 6-bis. Extraire et reconstituer les artefacts visuels (NEW)
+
+> **NEW in v6.2:** Visual artifacts (wireframes, E2E diagrams, dependency graph) are now extracted from the exported JSON and reconstituted into feature.json.
+
+**IF** `artifacts` exists in exported JSON:
+
+#### Extract wireframes per module
+
+Pour chaque module dans `artifacts.wireframes`:
+
+```
+FOR EACH moduleCode IN artifacts.wireframes:
+  moduleWireframes = artifacts.wireframes[moduleCode]
+
+  // Locate the module feature.json
+  moduleFeature = ba-reader.findModuleFeature({feature_id}, moduleCode)
+
+  // Map wireframes to specification.uiWireframes[]
+  uiWireframes = moduleWireframes.map(wf => ({
+    "screen": wf.screen,
+    "section": wf.section,
+    "mockupFormat": wf.format,
+    "mockup": wf.content,
+    "description": wf.description || "",
+    "elements": wf.elements || [],
+    "actions": wf.actions || [],
+    "permissionsRequired": wf.permissionsRequired || [],
+    "componentMapping": wf.componentMapping || [],
+    "layout": wf.layout || null
+  }))
+
+  // Write to module feature.json (enriching specification section)
+  ba-writer.enrichSection({
+    featureId: moduleFeature.id,
+    section: "specification",
+    data: { uiWireframes: uiWireframes }
+  })
+```
+
+**Validation:** For each wireframe:
+- `screen` must be unique within module
+- `mockupFormat` must be "ascii" or "svg"
+- `mockup` content must not be empty
+- `componentMapping` array must have at least one entry
+- `layout` object must have `type` and `regions` if present
+
+#### Extract E2E flow diagrams
+
+IF `artifacts.e2eFlows` exists:
+
+```
+e2eFlows = artifacts.e2eFlows.map(flow => ({
+  "name": flow.name,
+  "modules": flow.modules.split(" → ").map(m => m.trim()),  // "OrderManagement → Invoicing" → ["OrderManagement", "Invoicing"]
+  "steps": flow.steps || [],
+  "diagram": flow.diagram,  // NEW: ASCII diagram preserved
+  "actors": flow.actors.split(", ").map(a => a.trim())
+}))
+
+// Merge with existing e2eFlows from consolidation.e2eFlows
+ba-writer.enrichSection({
+  featureId: {feature_id},
+  section: "consolidation",
+  data: { e2eFlows: e2eFlows }
+})
+```
+
+**Validation:** For each E2E flow:
+- `diagram` must not be empty if present
+- `modules` array must match modules defined in master feature.json
+- `steps` must have at least 2 entries (cross-module flow)
+
+#### Extract dependency graph (optional)
+
+IF `artifacts.dependencyGraph` exists:
+
+```
+dependencyGraph = {
+  "nodes": artifacts.dependencyGraph.nodes.map(n => ({
+    "id": n.id,
+    "label": n.label || n.id,
+    "type": n.type || "data-centric"
+  })),
+  "edges": artifacts.dependencyGraph.edges.map(e => ({
+    "from": e.from,
+    "to": e.to,
+    "description": e.description || ""
+  }))
+}
+
+// Write to master feature.json
+ba-writer.enrichSection({
+  featureId: {feature_id},
+  section: "decomposition",
+  data: { dependencyGraph: dependencyGraph }
+})
+```
+
+**Post-extraction summary:**
+
+```
+✓ Artefacts visuels extraits:
+  - Wireframes: {total_wireframe_count} across {module_count} modules
+  - E2E diagrams: {e2e_flow_count}
+  - Dependency graph: {node_count} nodes, {edge_count} edges
+```
+
 ### 7. Resume de l'extraction
 
 Afficher un resume comparatif :
@@ -432,11 +553,18 @@ Afficher un resume comparatif :
 | Regles metier          | {total}        | analysis.businessRules |
 | Entites                | {total}        | analysis.entities |
 | Parcours E2E           | {count}        | consolidation.e2eFlows |
+| Maquettes (wireframes) | {total}        | specification.uiWireframes[] |
+| Diagrammes E2E         | {count}        | consolidation.e2eFlows[].diagram |
 
 Fichiers generes :
   - docs/business/{app}/business-analyse/v1.0/feature.json (master)
   - docs/business/{app}/{module}/business-analyse/v1.0/feature.json (par module)
 
+Artefacts visuels preserves :
+  - Toutes les maquettes ASCII/SVG validees lors de la specification
+  - Tous les diagrammes E2E pour les flux cross-module
+  - Graphe de dependances entre modules
+
 ═══════════════════════════════════════════════════════════════
 ```