@atlashub/smartstack-cli 3.1.0 → 3.2.0

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.md

@@ -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/steps/step-00-init.md

@@ -37,7 +37,6 @@ question_mode: false
 refactor_mode: false
 micro_mode: false
 extract_mode: false
-interactive_mode: false
 application_mode: false    # Multi-module application analysis
 ```
 
@@ -52,7 +51,6 @@ application_mode: false    # Multi-module application analysis
 | `-q` | `--question` | Question mode | next arg = FEAT-ID, remaining = question text |
 | `-r` | `--refactor` | Refactoring mode | next arg = FEAT-ID, remaining = change description |
 | `-m` | `--micro` | Micro feature mode | none |
-| `-i` | `--interactive` | Interactive mode | none |
 | `-x` | `--extract` | Extract mode: import from interactive HTML export | next arg = JSON file path |
 | `-app` | `--application` | Application mode: multi-module analysis | none |
 
@@ -232,25 +230,7 @@ mcp__smartstack__validate_conventions({ checks: ["tables"] })
 **DO NOT** continue to Step 4 or any subsequent step.
 **STOP the skill immediately.**
 
-## Step 4: Interactive Mode
-
-If `-i` or `--interactive` flag is set, prompt for confirmation.
-
-**Prompt:**
-```
-Confirm initialization with:
-- Use Case: {use_case}
-- Application: {application_name}
-- Module: {module_name}
-- Auto Mode: {auto_mode}
-- Economy Mode: {economy_mode}
-
-Continue? (y/n)
-```
-
-If 'n', EXIT.
-
-## Step 5: Validate Business Context
+## Step 4: Validate Business Context
 
 Verify that the business context is properly configured.
 
@@ -275,23 +255,27 @@ Verify that the business context is properly configured.
 }
 ```
 
-## Step 6: Determine Application and Module
+## Step 5: Determine Application and Module
 
 Scan for existing applications and modules.
 
-**Scan order:**
-1. Primary: `docs/business/` (modern structure)
-   - List subdirectories = applications
-   - Inside each app, list subdirectories = modules
-2. Fallback: `.business-analyse/business/` (legacy)
-   - Same structure as above
+**Scan location:** `docs/business/` (modern structure only)
+
+```
+1. List subdirectories in `docs/business/` = applications
+2. For each app, list subdirectories = modules
+3. IF no applications found:
+     Will create new under docs/business/
+```
+
+**Legacy structure (`.business-analyse/business/`) is NO LONGER SUPPORTED.**
 
 **Logic:**
 ```
 IF auto_mode = true:
   application_name = first found app OR "default"
   module_name = first found module OR "default"
-ELSE (interactive):
+ELSE:
   Prompt: "Select application: [list]"
   Prompt: "Select module: [list]"
   OR: "Create new application: {name}"
@@ -304,7 +288,7 @@ application_name: string
 module_name: string
 ```
 
-## Step 7: Select Language
+## Step 6: Select Language
 
 Determine the language for analysis and code generation.
 
@@ -312,13 +296,15 @@ Determine the language for analysis and code generation.
 - Retrieve `businessContext.language` from config
 - Default: "en" (English)
 
-**If interactive:**
+**If not in config OR auto_mode = false:**
 ```
-Select language:
-[ ] English (en)
-[ ] French (fr)
-[ ] Spanish (es)
-[ ] Custom: {input}
+Ask via AskUserQuestion:
+  question: "Select language for analysis"
+  header: "Language"
+  options:
+    - label: "English (en)"
+    - label: "French (fr)"
+    - label: "Spanish (es)"
 ```
 
 **Store:**
@@ -326,7 +312,7 @@ Select language:
 language: string (code, e.g., "en", "fr")
 ```
 
-## Step 8: Generate Feature ID
+## Step 7: Generate Feature ID
 
 Create a unique feature identifier.
 
@@ -345,7 +331,7 @@ ELSE:
 feature_id: string
 ```
 
-## Step 9: Create Output Directory Structure
+## Step 8: Create Output Directory Structure
 
 Create the directory hierarchy for feature documentation.
 
@@ -370,20 +356,35 @@ docs_dir: "docs/business/{app}/{module}/business-analyse/v{version}"
 output_dir: same as docs_dir
 ```
 
-## Step 9-bis: Deploy JSON Schemas to Project (MANDATORY)
+## Step 8-bis: Deploy JSON Schemas to Project (MANDATORY)
 
 > **The JSON Schemas MUST be present in the project alongside the generated feature.json files.**
 > Without schemas, feature.json files cannot be validated and have no structural reference.
 
-**Check if schemas already deployed:**
+**Performance optimization:** Use cache file to avoid redundant deployments.
+
+### Cache-based deployment logic:
+
+**Step 1: Check deployment cache**
+
+Cache file location: `docs/business/{app}/business-analyse/.schema-cache.json`
+
 ```
-IF EXISTS docs/business/{app}/business-analyse/schemas/feature-schema.json:
-  Skip deployment (schemas already present)
+IF EXISTS docs/business/{app}/business-analyse/.schema-cache.json:
+  Read cache file
+  IF cache.version == "6.0" (CURRENT SKILL VERSION):
+    Display: "✓ Schemas already deployed (v6.0) - skipping"
+    SKIP deployment (trust cache)
+    → Go to Step 10
+  ELSE:
+    Display: "⚠ Schema version mismatch (cache: {cache.version}, current: 6.0)"
+    Proceed to deployment
 ELSE:
-  Deploy schemas
+  Display: "Deploying schemas (first time)..."
+  Proceed to deployment
 ```
 
-**Deploy all schema files from skill directory to project:**
+**Step 2: Deploy schemas (if needed)**
 
 Source: `schemas/` (relative to skill root = `~/.claude/skills/business-analyse/schemas/`)
 Destination: `docs/business/{app}/business-analyse/schemas/`
@@ -411,13 +412,43 @@ docs/business/{app}/business-analyse/schemas/
 1. Use Glob to find all `.json` files in `schemas/` directory (skill-relative)
 2. For each file, Read from skill directory and Write to project directory
 3. Preserve the subdirectory structure (sections/, shared/)
+4. Display progress: "Deploying schema {i}/{total}: {filename}"
+
+**Step 3: Write cache file (after successful deployment)**
+
+```json
+{
+  "version": "6.0",
+  "deployedAt": "{ISO timestamp}",
+  "schemas": [
+    "feature-schema.json",
+    "application-schema.json",
+    "sections/metadata-schema.json",
+    "sections/discovery-schema.json",
+    "sections/analysis-schema.json",
+    "sections/specification-schema.json",
+    "sections/validation-schema.json",
+    "sections/handoff-schema.json",
+    "shared/common-defs.json"
+  ]
+}
+```
+
+Write to: `docs/business/{app}/business-analyse/.schema-cache.json`
+
+Display: "✓ Schemas deployed successfully (9 files)"
 
 **Store:**
 ```yaml
 schemas_dir: "docs/business/{app}/business-analyse/schemas"
 ```
 
-## Step 10: Create Master feature.json
+**Performance gain:**
+- First deployment: ~12 seconds (unchanged)
+- Subsequent deployments: **~0 seconds (skipped via cache)** ✨
+- Cache invalidation: automatic on skill version upgrade
+
+## Step 9: Create Master feature.json
 
 Create the master feature document using ba-writer agent.
 
@@ -526,7 +557,7 @@ ba-writer.createApplicationFeature({
 {docs_dir}/feature.json
 ```
 
-## Step 11: Update Config
+## Step 10: Update Config
 
 Update `.business-analyse/config.json` with new feature information.
 
@@ -543,12 +574,11 @@ Update `.business-analyse/config.json` with new feature information.
   },
   "lastInitialized": "{ISO timestamp}",
   "autoMode": {auto_mode},
-  "economyMode": {economy_mode},
-  "interactiveMode": {interactive_mode}
+  "economyMode": {economy_mode}
 }
 ```
 
-## Step 12: Display Summary
+## Step 11: Display Summary
 
 Show initialization results in a clear table format.
 
@@ -576,7 +606,7 @@ NEXT STEP: step-01-analyse ({use_case} mode)
 ═══════════════════════════════════════════════════════════════
 ```
 
-## Step 13: Load Next Step
+## Step 12: Load Next Step
 
 **All modes except question (-q), micro (-m), and extract (-x):**
 After showing initialization summary, proceed to `./step-01-cadrage.md`
@@ -596,7 +626,6 @@ language: string
 docs_dir: string
 auto_mode: boolean
 economy_mode: boolean
-interactive_mode: boolean
 mcp_available: boolean
 workflow_mode: string
 ```
@@ -625,9 +654,3 @@ If initialization was interrupted:
 3. If found, offer to resume from last completed step
 4. If not found, create fresh feature.json
 
-### Clean Fallbacks
-
-If modern paths unavailable:
-1. Search `.business-analyse/business/` (legacy)
-2. Create new structure under `docs/business/` regardless
-3. Log migration notice (automated, non-blocking)