@atlashub/smartstack-cli 3.0.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlashub/smartstack-cli",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "SmartStack Claude Code automation toolkit - GitFlow, EF Core migrations, prompts and more",
   "author": {
     "name": "SmartStack",
@@ -72,7 +72,11 @@
     "health": "node dist/index.js doctor --json",
     "test:mcp": "vitest run --config vitest.mcp.config.ts",
     "test:mcp:watch": "vitest --config vitest.mcp.config.ts",
-    "test:mcp:coverage": "vitest run --config vitest.mcp.config.ts --coverage"
+    "test:mcp:coverage": "vitest run --config vitest.mcp.config.ts --coverage",
+    "test:ba": "vitest run --config vitest.ba.config.ts",
+    "test:ba:watch": "vitest --config vitest.ba.config.ts",
+    "test:ba:coverage": "vitest run --config vitest.ba.config.ts --coverage",
+    "test:all": "npm run test:mcp && npm run test:ba"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.0",

package/templates/agents/gitflow/merge.md

@@ -12,9 +12,48 @@ Safe PR merge with review checklist. Supports GitHub and Azure DevOps.
 
 ## EXECUTION SEQUENCE
 
-### 1. Detect Provider and Load PR Context
+### 1. Load GitFlow Config (MANDATORY)
 
 ```bash
+# Find and verify config exists
+CONFIG_FILE=""
+if [ -f ".claude/gitflow/config.json" ]; then
+  CONFIG_FILE=".claude/gitflow/config.json"
+elif [ -f ".gitflow/config.json" ]; then
+  CONFIG_FILE=".gitflow/config.json"
+else
+  # Try develop worktree
+  DEVELOP_PATH=$(git worktree list --porcelain 2>/dev/null | grep -A1 "branch refs/heads/develop" | grep "^worktree " | sed 's/^worktree //')
+  if [ -n "$DEVELOP_PATH" ] && [ -f "$DEVELOP_PATH/.claude/gitflow/config.json" ]; then
+    CONFIG_FILE="$DEVELOP_PATH/.claude/gitflow/config.json"
+  elif [ -n "$DEVELOP_PATH" ] && [ -f "$DEVELOP_PATH/.gitflow/config.json" ]; then
+    CONFIG_FILE="$DEVELOP_PATH/.gitflow/config.json"
+  fi
+fi
+
+# CRITICAL: Block if no config
+if [ -z "$CONFIG_FILE" ] || [ ! -f "$CONFIG_FILE" ]; then
+  echo "❌ GitFlow config not found"
+  echo "→ Run: /gitflow init"
+  exit 1
+fi
+
+# Extract config values
+GF_PROVIDER=$(grep -oP '"provider":\s*"\K[^"]+' "$CONFIG_FILE" | head -1)
+GF_MAIN_BRANCH=$(grep -oP '"main":\s*"\K[^"]+' "$CONFIG_FILE" | head -1)
+GF_DEVELOP_BRANCH=$(grep -oP '"develop":\s*"\K[^"]+' "$CONFIG_FILE" | head -1)
+
+# Validate required values
+if [ -z "$GF_MAIN_BRANCH" ] || [ -z "$GF_DEVELOP_BRANCH" ]; then
+  echo "❌ Invalid GitFlow config (missing branches)"
+  exit 1
+fi
+```
+
+### 2. Detect Provider and Load PR Context
+
+```bash
+# Detect provider
 REMOTE_URL=$(git remote get-url origin 2>/dev/null)
 if [[ "$REMOTE_URL" == *"dev.azure.com"* ]]; then
   GIT_PROVIDER="azuredevops"
@@ -25,12 +64,23 @@ fi
 CURRENT=$(git rev-parse --abbrev-ref HEAD)
 BRANCH_TYPE=$(echo $CURRENT | cut -d'/' -f1)
 
+# Determine target branch (using config values)
+case "$BRANCH_TYPE" in
+  feature) TARGET="$GF_DEVELOP_BRANCH" ;;
+  release) TARGET="$GF_MAIN_BRANCH" ;;
+  hotfix)  TARGET="$GF_MAIN_BRANCH" ;;
+  *)       TARGET="$GF_DEVELOP_BRANCH" ;;
+esac
+
+echo "✓ Config loaded: $CONFIG_FILE"
+echo "✓ Branch: $CURRENT → Target: $TARGET"
+
 # Find PR for current branch
 # GitHub: gh pr list --head "$CURRENT"
 # Azure DevOps: az repos pr list --source-branch "$CURRENT"
 ```
 
-### 2. Determine Merge Strategy
+### 3. Determine Merge Strategy
 
 | Type | Strategy | Delete Branch |
 |------|----------|---------------|
@@ -38,7 +88,7 @@ BRANCH_TYPE=$(echo $CURRENT | cut -d'/' -f1)
 | Release | merge --no-ff | yes |
 | Hotfix | merge --no-ff | yes |
 
-### 3. Review Checklist
+### 4. Review Checklist
 
 Display review checklist:
 - Build status (pass/fail)
@@ -47,7 +97,7 @@ Display review checklist:
 - Conflicts (none/detected)
 - CI status (if available)
 
-### 4. Execute Merge
+### 5. Execute Merge
 
 **GitHub:**
 ```bash
@@ -67,7 +117,7 @@ az repos pr update --id $PR_ID --status completed --squash true --delete-source-
 az repos pr update --id $PR_ID --status completed --squash false --delete-source-branch true
 ```
 
-### 5. Verify Merge
+### 6. Verify Merge
 
 ```bash
 # Force update tracking refs
@@ -78,7 +128,7 @@ git fetch origin --prune --quiet
 MERGED=$(git branch -r --merged origin/$TARGET | grep "$CURRENT" | wc -l)
 ```
 
-### 6. Summary
+### 7. Summary
 
 ```
 PR MERGED

package/templates/agents/gitflow/pr.md

@@ -14,21 +14,68 @@ Create PR with auto-generated description, Azure DevOps and GitHub support.
 
 ## EXECUTION SEQUENCE
 
-### 1. Detect Provider and Branch Context
+### 1. Load GitFlow Config (MANDATORY)
 
 ```bash
-# Detect provider from remote URL
-REMOTE_URL=$(git remote get-url origin 2>/dev/null)
-if [[ "$REMOTE_URL" == *"dev.azure.com"* ]] || [[ "$REMOTE_URL" == *"visualstudio.com"* ]]; then
-  GIT_PROVIDER="azuredevops"
-  # Extract Azure DevOps details
+# Find and verify config exists
+CONFIG_FILE=""
+if [ -f ".claude/gitflow/config.json" ]; then
+  CONFIG_FILE=".claude/gitflow/config.json"
+elif [ -f ".gitflow/config.json" ]; then
+  CONFIG_FILE=".gitflow/config.json"
+else
+  # Try develop worktree
+  DEVELOP_PATH=$(git worktree list --porcelain 2>/dev/null | grep -A1 "branch refs/heads/develop" | grep "^worktree " | sed 's/^worktree //')
+  if [ -n "$DEVELOP_PATH" ] && [ -f "$DEVELOP_PATH/.claude/gitflow/config.json" ]; then
+    CONFIG_FILE="$DEVELOP_PATH/.claude/gitflow/config.json"
+  elif [ -n "$DEVELOP_PATH" ] && [ -f "$DEVELOP_PATH/.gitflow/config.json" ]; then
+    CONFIG_FILE="$DEVELOP_PATH/.gitflow/config.json"
+  fi
+fi
+
+# CRITICAL: Block if no config
+if [ -z "$CONFIG_FILE" ] || [ ! -f "$CONFIG_FILE" ]; then
+  echo "❌ GitFlow config not found"
+  echo "→ Run: /gitflow init"
+  exit 1
+fi
+
+# Extract config values
+GF_PROVIDER=$(grep -oP '"provider":\s*"\K[^"]+' "$CONFIG_FILE" | head -1)
+GF_MAIN_BRANCH=$(grep -oP '"main":\s*"\K[^"]+' "$CONFIG_FILE" | head -1)
+GF_DEVELOP_BRANCH=$(grep -oP '"develop":\s*"\K[^"]+' "$CONFIG_FILE" | head -1)
+GF_REMOTE_URL=$(grep -oP '"remoteUrl":\s*"\K[^"]+' "$CONFIG_FILE" | head -1)
+
+# Validate required values
+if [ -z "$GF_MAIN_BRANCH" ] || [ -z "$GF_DEVELOP_BRANCH" ]; then
+  echo "❌ Invalid GitFlow config (missing branches)"
+  exit 1
+fi
+```
+
+### 2. Detect Provider and Branch Context
+
+```bash
+# Detect provider from config or remote URL
+if [ -z "$GF_PROVIDER" ]; then
+  REMOTE_URL=$(git remote get-url origin 2>/dev/null)
+  if [[ "$REMOTE_URL" == *"dev.azure.com"* ]] || [[ "$REMOTE_URL" == *"visualstudio.com"* ]]; then
+    GIT_PROVIDER="azuredevops"
+  else
+    GIT_PROVIDER="github"
+  fi
+else
+  GIT_PROVIDER="$GF_PROVIDER"
+fi
+
+# Extract Azure DevOps details if needed
+if [ "$GIT_PROVIDER" = "azuredevops" ]; then
+  REMOTE_URL="${GF_REMOTE_URL:-$(git remote get-url origin 2>/dev/null)}"
   [[ "$REMOTE_URL" =~ dev\.azure\.com/([^/]+)/([^/]+)/_git/([^/]+) ]] && {
     AZURE_ORG="${BASH_REMATCH[1]}"
     AZURE_PROJECT="${BASH_REMATCH[2]}"
     AZURE_REPO="${BASH_REMATCH[3]}"
   }
-else
-  GIT_PROVIDER="github"
 fi
 
 # Get current branch (worktree-compatible)
@@ -37,7 +84,21 @@ BRANCH_TYPE=$(echo $CURRENT | cut -d'/' -f1)
 BRANCH_NAME=$(echo $CURRENT | sed 's/.*\///')
 ```
 
-### 2. Determine Target Branch
+### 3. Determine Target Branch
+
+```bash
+# Map branch type to target branch (using config values)
+case "$BRANCH_TYPE" in
+  feature) TARGET="$GF_DEVELOP_BRANCH" ;;
+  release) TARGET="$GF_MAIN_BRANCH" ;;
+  hotfix)  TARGET="$GF_MAIN_BRANCH" ;;
+  *)       TARGET="$GF_DEVELOP_BRANCH" ;;
+esac
+
+echo "✓ Config loaded: $CONFIG_FILE"
+echo "✓ Branch: $CURRENT (type: $BRANCH_TYPE)"
+echo "✓ Target: $TARGET"
+```
 
 | Type | Target | Reason |
 |------|--------|--------|

package/templates/project/appsettings.json.template

@@ -8,7 +8,6 @@
     "EnableDevSeeding": false
   },
   "Jwt": {
-    "Secret": "{{GenerateRandomSecret}}",
     "Issuer": "{{ProjectName}}",
     "Audience": "{{ProjectName}}",
     "AccessTokenExpirationMinutes": 60,
@@ -132,6 +131,10 @@
       "SenderAddress": ""
     }
   },
+  "Zefix": {
+    "Username": "",
+    "Password": ""
+  },
   "Entra": {
     "TenantId": "",
     "ClientId": "",
@@ -140,10 +143,13 @@
     "SyncIntervalMinutes": 60,
     "UseDeltaSync": true,
     "DefaultConflictResolution": "ManualReview",
-    "AutoCreateReferences": true
+    "AutoCreateReferences": true,
+    "BackgroundSyncEnabled": false,
+    "BackgroundSyncIntervalMinutes": 60
   },
   "MultiTenant": {
     "Enabled": true,
+    "EnableB2B": true,
     "EnableB2C": true,
     "SystemTenantSlug": "default",
     "SystemTenantName": "Default Workspace",

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

@@ -1,11 +1,17 @@
 ---
 name: business-analyse
-description: Business Analysis v5.0 - Iterative multi-module workflow with 5-level navigation hierarchy, client checkpoints, interactive HTML documentation, and extraction pipeline.
+description: Business Analysis v6.1 - Iterative multi-module workflow with optimized performance (schema caching), automatic skill launch transition, and streamlined execution.
 argument-hint: "[-a] [-e] [-q <FEAT-ID> \"question\"] [-r <FEAT-ID> \"change\"] [-m] [-x <json-path>] <feature description>"
 ---
 
 <objective>
 Execute VibeCoding-focused business analysis workflows. This skill produces a single feature.json progressively enriched at each step, published to docs/business/ for web app rendering. Supports 5 use cases: new feature analysis, questions about existing features, feature refactoring, one-shot micro-features, and extraction from interactive HTML documentation.
+
+**New in v6.1:**
+- ⚡ **Performance:** Schema deployment caching (~75% faster subsequent runs)
+- 🚀 **Seamless transition:** Automatic launch of chosen development approach (Ralph Loop / Feature Full)
+- 🎯 **Simplified:** Removed interactive mode (-i flag), streamlined execution
+- 📂 **Modern only:** Legacy `.business-analyse/` structure no longer supported
 </objective>
 
 <quick_start>
@@ -50,7 +56,6 @@ See `<parameters>` for complete flag list.
 | `-m` | `--micro` | Micro-feature mode: minimal questions, direct handoff |
 | `-x` | `--extract` | Extract mode: import from interactive HTML export JSON (requires json-path) |
 | `-app` | `--application` | Application mode: multi-module analysis with module decomposition |
-| `-i` | `--interactive` | Interactive mode: configure flags via AskUserQuestion |
 
 **Disable flags (turn OFF):**
 | Short | Long | Description |
@@ -178,6 +183,10 @@ When provided, step-00 will:
     - Per-module validation + client confirmation
 - **Step 04:** Cross-module consolidation (consolidated)
 - **Step 05:** Handoff with per-module prd.json (handed-off)
+  - **NEW v6.1:** User chooses development approach (AskUserQuestion)
+  - **If "Ralph Loop":** Automatic launch → `/ralph-loop` (seamless transition)
+  - **If "Feature Full":** Automatic launch → `/feature-full` (parallel generation)
+  - **If "Terminer":** BA ends, manual development
 
 **Single module workflow (same phases, simplified):**
 - **Step 00:** Parse flags, create master feature.json (draft)
@@ -186,10 +195,12 @@ When provided, step-00 will:
 - **Step 03:** Specification: single iteration (specified)
 - **Step 04:** Consolidation: auto-pass (consolidated)
 - **Step 05:** Handoff (handed-off)
+  - **NEW v6.1:** Automatic skill launch based on user choice
 
 **Micro workflow:**
 - **Step 00:** Create minimal feature.json
 - **Step 05:** Direct handoff (skip 01-04)
+  - **NEW v6.1:** Automatic skill launch
 
 **Extract workflow (from interactive HTML):**
 - **Step 00:** Parse `-x` flag, validate JSON file
@@ -244,21 +255,27 @@ Load ONLY relevant categories based on feature type:
 
 | Categorie | Fichier                               | Questions | Quand charger |
 | --------- | ------------------------------------- | --------- | ------------- |
-| 00        | `questionnaire/00-application.md`     | 8         | Si mode application |
-| 01        | `questionnaire/01-context.md`         | 12        | Toujours      |
-| 02        | `questionnaire/02-stakeholders.md`    | 14        | Toujours      |
-| 03        | `questionnaire/03-scope.md`           | 12        | Toujours      |
-| 04        | `questionnaire/04-data.md`            | 8         | Si module oriente donnees |
-| 05        | `questionnaire/05-integrations.md`    | 8         | Si integrations |
-| 06        | `questionnaire/06-security.md`        | 8         | Si securite mentionnee |
-| 07        | `questionnaire/07-ui.md`              | 12        | Si module oriente interface |
-| 08        | `questionnaire/08-performance.md`     | 4         | Si performance critique |
-| 09        | `questionnaire/09-constraints.md`     | 4         | Si contraintes |
-| 10        | `questionnaire/10-documentation.md`   | 4         | Si documentation requise |
-| 14        | `questionnaire/14-risk-assumptions.md`| 8         | Toujours      |
-| 15        | `questionnaire/15-success-metrics.md` | 8         | Toujours      |
-
-**Total noyau : ~86 questions (en profondeur, langage business)**
+| 00        | `questionnaire/00-application.md`     | 18        | Si mode application |
+| 01        | `questionnaire/01-context.md`         | 32        | Toujours      |
+| 02        | `questionnaire/02-stakeholders.md`    | 33        | Toujours      |
+| 03        | `questionnaire/03-scope.md`           | 32        | Toujours      |
+| 04        | `questionnaire/04-data.md`            | 15        | Si module oriente donnees |
+| 05        | `questionnaire/05-integrations.md`    | 14        | Si integrations |
+| 06        | `questionnaire/06-security.md`        | 13        | Si securite mentionnee |
+| 07        | `questionnaire/07-ui.md`              | 19        | Si module oriente interface |
+| 08        | `questionnaire/08-performance.md`     | 8         | Si performance critique |
+| 09        | `questionnaire/09-constraints.md`     | 6         | Si contraintes |
+| 10        | `questionnaire/10-documentation.md`   | 7         | Si documentation requise |
+| 11        | `questionnaire/11-data-lifecycle.md`  | 14        | Si lifecycle requis (retention, archivage, RGPD) |
+| 12        | `questionnaire/12-migration.md`       | 14        | Si nouveau module (migration donnees existantes) |
+| 13        | `questionnaire/13-cross-module.md`    | 14        | Si nouveau module OU references autres modules |
+| 14        | `questionnaire/14-risk-assumptions.md`| 16        | Toujours      |
+| 15        | `questionnaire/15-success-metrics.md` | 17        | Toujours      |
+
+**Total noyau (toujours chargés) : 130 questions** (contexte, acteurs, périmètre, risques, métriques)
+**Total avec application : 148 questions** (+ identité application si mode multi-module)
+**Total conditionnel : 124 questions** (data, intégrations, sécurité, UI, performance, contraintes, doc, lifecycle, migration, cross-module)
+**Total maximum possible : 272 questions** (noyau + application + tous conditionnels chargés)
 
 </questionnaire_files>
 

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;
@@ -1406,33 +1495,8 @@
        DATA STORE
        ============================================ */
     const APP_KEY = 'ba-{{APPLICATION_ID}}';
-    let data = {
-        metadata: {
-            applicationName: '{{APPLICATION_NAME}}',
-            applicationId: '{{APPLICATION_ID}}',
-            version: '{{VERSION}}',
-            createdAt: '{{CREATED_AT}}',
-            lastModified: new Date().toISOString()
-        },
-        cadrage: {
-            problem: {},
-            current: {},
-            vision: {},
-            stakeholders: [],
-            scope: { vital: [], important: [], optional: [], excluded: [] },
-            risks: [],
-            assumptions: '',
-            success: {}
-        },
-        modules: [],
-        dependencies: [],
-        moduleSpecs: {},
-        consolidation: {
-            interactions: [],
-            e2eFlows: []
-        },
-        handoff: {}
-    };
+    let data = {{FEATURE_DATA}};
+    const EMBEDDED_ARTIFACTS = {{EMBEDDED_ARTIFACTS}};
 
     /* ============================================
        INITIALIZATION
@@ -1708,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
@@ -1726,8 +1791,8 @@
                 })),
                 entities: spec.entities || [],
                 permissions: spec.permissions || [],
-                notes: spec.notes || '',
-                mockupNotes: spec.mockupNotes || ''
+                notes: spec.notes || ''
+                // mockupNotes removed: wireframes now in artifacts
             };
         });
 
@@ -2158,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>
 
@@ -2354,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)