@atlashub/smartstack-cli 4.18.0 → 4.19.0

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

@@ -1633,6 +1633,145 @@ body {
         box-shadow: -4px 0 20px rgba(0,0,0,0.3);
     }
 }
+
+
+/* --- 09-mockups-html.css --- */
+/* ============================================
+   HTML MOCKUPS - Realistic component previews
+   ============================================ */
+
+/* Screen section container */
+.screen-section {
+    margin-bottom: 2rem;
+}
+
+.screen-section h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+/* Mockup frame enhancements for HTML mockups */
+.mockup-frame .mock-header {
+    margin-bottom: 1rem;
+}
+
+/* SmartTable inside mockups */
+.mockup-content .mock-table {
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.mockup-content .mock-table th {
+    background: var(--bg-hover);
+}
+
+/* SmartForm tabs */
+.mockup-content .form-tab-bar {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 1.5rem;
+}
+
+.mockup-content .form-tab {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    color: var(--text-muted);
+}
+
+.mockup-content .form-tab.active {
+    border-bottom-color: var(--primary);
+    color: var(--primary-light);
+}
+
+/* SmartKanban columns */
+.mockup-content .kanban-board {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+}
+
+.mockup-content .kanban-column {
+    min-width: 200px;
+    flex: 1;
+    background: var(--bg-hover);
+    border-radius: 8px;
+    padding: 0.75rem;
+}
+
+.mockup-content .kanban-column-header {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: var(--text-bright);
+    margin-bottom: 0.75rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+.mockup-content .kanban-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+}
+
+/* SmartDashboard KPI */
+.mockup-content .mock-kpi-grid {
+    margin-bottom: 1.5rem;
+}
+
+/* SmartFilter pills */
+.mockup-content .filter-pill {
+    padding: 0.3rem 0.7rem;
+    border-radius: 16px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.mockup-content .filter-pill:hover {
+    background: var(--bg-hover);
+    border-color: var(--primary);
+}
+
+.mockup-content .filter-pill.active {
+    background: var(--primary);
+    color: #fff;
+    border-color: var(--primary);
+}
+
+/* Subtable in forms */
+.mockup-content .subtable-container {
+    margin: 1rem 0;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.mockup-content .subtable-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    background: var(--bg-hover);
+}
+
+/* Permission annotation in mockup toolbar */
+.mockup-toolbar .permission-badge {
+    margin-left: auto;
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    background: var(--bg-dark);
+    padding: 0.15rem 0.5rem;
+    border-radius: 4px;
+}
 
     </style>
 </head>
@@ -2147,6 +2286,9 @@ let data = {{FEATURE_DATA}};
 const ORIGINAL_DATA = JSON.parse(JSON.stringify(data));
 const EMBEDDED_ARTIFACTS = {{EMBEDDED_ARTIFACTS}};
 
+// Initialize applications array (multi-app support)
+data.applications = data.applications || [];
+
 // Initialize optional data structures
 data.wireframeComments = data.wireframeComments || {};
 data.specComments = data.specComments || {};
@@ -2173,7 +2315,7 @@ data.cadrage.context = data.cadrage.context || { problem: '', trigger: '', curre
 // Initialize comments array
 data.comments = data.comments || [];
 
-// Defensive mapping: globalScope (feature.json format) -> scope (HTML format)
+// Defensive mapping: globalScope (JSON format) -> scope (HTML format)
 // Handles cases where FEATURE_DATA contains raw globalScope instead of pre-mapped scope
 if (!data.cadrage.scope || (!data.cadrage.scope.vital?.length && data.cadrage.globalScope)) {
     const gs = data.cadrage.globalScope || {};
@@ -2186,6 +2328,14 @@ if (!data.cadrage.scope || (!data.cadrage.scope.vital?.length && data.cadrage.gl
 }
 data.cadrage.scope = data.cadrage.scope || { vital: [], important: [], optional: [], excluded: [] };
 
+// Backward compat: mustHave/shouldHave/couldHave/wontHave → vital/important/optional/excluded
+if (data.cadrage.scope.mustHave && !data.cadrage.scope.vital?.length) {
+    data.cadrage.scope.vital = data.cadrage.scope.mustHave;
+    data.cadrage.scope.important = data.cadrage.scope.shouldHave || data.cadrage.scope.important || [];
+    data.cadrage.scope.optional = data.cadrage.scope.couldHave || data.cadrage.scope.optional || [];
+    data.cadrage.scope.excluded = data.cadrage.scope.wontHave || data.cadrage.scope.excluded || [];
+}
+
 // Defensive init: moduleSpecs (may be missing if LLM didn't follow mapping)
 data.moduleSpecs = data.moduleSpecs || {};
 // Ensure ALL modules have a moduleSpecs entry (prevents missing schemas)
@@ -2195,6 +2345,11 @@ data.moduleSpecs = data.moduleSpecs || {};
     }
     // Ensure anticipatedSections array exists
     m.anticipatedSections = m.anticipatedSections || [];
+    m.applicationCode = m.applicationCode || '';
+    // Initialize screens array for interface specs
+    if (!data.moduleSpecs[m.code].screens) {
+        data.moduleSpecs[m.code].screens = [];
+    }
 });
 
 // Vibe coding mode: hide non-relevant sections
@@ -2345,12 +2500,38 @@ function buildNavTree() {
     const nav = document.getElementById('sidebarNav');
     if (!nav) return;
 
-    nav.innerHTML =
-        renderNavGroup('cadrage', 'Cadrage', buildCadrageItems()) +
-        renderNavGroup('modules', 'Modules (' + data.modules.length + ')', buildModuleItems()) +
-        renderNavGroup('consolidation', 'Consolidation', buildConsolidationItems()) +
-        renderNavGroup('synthese', 'Synthese', buildSyntheseItems());
+    var html = renderNavGroup('cadrage', 'Cadrage', buildCadrageItems());
 
+    // Multi-app: group modules by application
+    if (data.applications && data.applications.length > 1) {
+        data.applications.forEach(function(app) {
+            var appModules = data.modules.filter(function(m) { return m.applicationCode === app.code; });
+            var appModuleItems = '';
+            appModules.forEach(function(mod) {
+                appModuleItems += renderModuleNavItem(mod);
+            });
+            // Global views at bottom of each app group
+            appModuleItems += renderNavItem('decomp-modules', 'Vue d\'ensemble', data.modules.length);
+            html += renderNavGroup('app-' + app.code, app.name || app.code, appModuleItems);
+        });
+        // Modules without applicationCode
+        var orphanModules = data.modules.filter(function(m) { return !m.applicationCode; });
+        if (orphanModules.length > 0) {
+            var orphanItems = '';
+            orphanModules.forEach(function(mod) {
+                orphanItems += renderModuleNavItem(mod);
+            });
+            html += renderNavGroup('modules-other', 'Autres modules (' + orphanModules.length + ')', orphanItems);
+        }
+        html += renderNavItem('decomp-dependencies', 'Dependances', data.dependencies.length);
+    } else {
+        html += renderNavGroup('modules', 'Modules (' + data.modules.length + ')', buildModuleItems());
+    }
+
+    html += renderNavGroup('consolidation', 'Consolidation', buildConsolidationItems());
+    html += renderNavGroup('synthese', 'Synthese', buildSyntheseItems());
+
+    nav.innerHTML = html;
     restoreNavState();
     highlightActiveNavItem();
 }
@@ -3247,7 +3428,10 @@ function renderEntity(code, ent, index) {
                 <tbody>
                     ${ent.attributes.map(a => `<tr><td style="font-weight:500;color:var(--text-bright);">${a.name}</td><td>${a.description || ''}</td></tr>`).join('')}
                 </tbody>
-            </table>` : ''}
+            </table>
+            <div style="padding:0.3rem 0.75rem;">
+                <button class="add-btn" style="font-size:0.75rem;padding:0.4rem;" onclick="addEntityAttribute('${code}',${index})">+ Ajouter un attribut</button>
+            </div>` : ''}
             ${(ent.relationships || []).length > 0 ? `
             <div style="padding:0.5rem 0.75rem;font-size:0.8rem;color:var(--text-muted);border-top:1px solid var(--border);">
                 Relations : ${ent.relationships.map(r => `<span style="color:var(--accent);">${r}</span>`).join(', ')}
@@ -3289,6 +3473,19 @@ function removeEntity(code, index) {
     autoSave();
 }
 
+function addEntityAttribute(code, entityIndex) {
+    var attrName = prompt('Nom de l\'attribut :');
+    if (!attrName) return;
+    var attrDesc = prompt('Description (optionnel) :') || '';
+    if (!data.moduleSpecs[code]?.entities?.[entityIndex]) return;
+    if (!data.moduleSpecs[code].entities[entityIndex].attributes) {
+        data.moduleSpecs[code].entities[entityIndex].attributes = [];
+    }
+    data.moduleSpecs[code].entities[entityIndex].attributes.push({ name: attrName, description: attrDesc });
+    renderAllModuleSpecs();
+    autoSave();
+}
+
 function getSpecComment(code, type, index) {
     const key = code + '.' + type + '.' + index;
     return data.specComments[key] || '';
@@ -3311,8 +3508,25 @@ function updateWireframeComment(code, screen, value) {
 }
 
 function renderModuleMockups(code) {
-    const wireframes = EMBEDDED_ARTIFACTS?.wireframes?.[code] || [];
+    var spec = data.moduleSpecs[code] || {};
+    var screens = spec.screens || [];
+    var wireframes = EMBEDDED_ARTIFACTS?.wireframes?.[code] || [];
+
+    // Priority 1: HTML mockups from screens[] specs
+    if (screens.length > 0) {
+        var html = '';
+        if (typeof renderScreenMockups === 'function') {
+            html = renderScreenMockups(code);
+        }
+        // Also show wireframes below if available
+        if (wireframes.length > 0) {
+            html += '<h3 style="color:var(--text-bright);font-size:1rem;margin:2rem 0 1rem;">Wireframes</h3>';
+            html += wireframes.map(function(wf, i) { return renderWireframeMockup(code, wf, i); }).join('');
+        }
+        return html;
+    }
 
+    // Priority 2: Wireframes from EMBEDDED_ARTIFACTS
     if (wireframes.length === 0) {
         return `
             <div class="card" style="text-align:center;padding:2rem;color:var(--text-muted);">
@@ -3321,69 +3535,73 @@ function renderModuleMockups(code) {
             </div>`;
     }
 
-    return wireframes.map((wf, i) => {
-        const hasSvg = !!wf.svgContent;
-        const wireframeId = `wf-${code}-${i}`;
+    return wireframes.map(function(wf, i) { return renderWireframeMockup(code, wf, i); }).join('');
+}
 
-        return `
-        <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>
-                ${hasSvg ? `
-                <div class="wireframe-toggle">
-                    <button class="wireframe-toggle-btn active" data-target="${wireframeId}" data-view="svg" onclick="toggleWireframeView('${wireframeId}', 'svg')">SVG</button>
-                    <button class="wireframe-toggle-btn" data-target="${wireframeId}" data-view="ascii" onclick="toggleWireframeView('${wireframeId}', 'ascii')">ASCII</button>
-                </div>` : ''}
-            </div>
-            <div class="mockup-content" id="${wireframeId}">
-                ${hasSvg
-                    ? `<div class="svg-wireframe wireframe-view active" data-view="svg">${wf.svgContent}</div>
-                       <pre class="ascii-wireframe wireframe-view" data-view="ascii" style="display:none;">${wf.content || ''}</pre>`
-                    : (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.map(e => typeof e === 'string' ? e : (e.type || e.label || e.id || '')).filter(Boolean).join(', ')}</div>
+function renderWireframeMockup(code, wf, i) {
+    const hasSvg = !!wf.svgContent;
+    const wireframeId = `wf-${code}-${i}`;
+
+    return `
+    <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>
+            ${hasSvg ? `
+            <div class="wireframe-toggle">
+                <button class="wireframe-toggle-btn active" data-target="${wireframeId}" data-view="svg" onclick="toggleWireframeView('${wireframeId}', 'svg')">SVG</button>
+                <button class="wireframe-toggle-btn" data-target="${wireframeId}" data-view="ascii" onclick="toggleWireframeView('${wireframeId}', 'ascii')">ASCII</button>
             </div>` : ''}
-            ${(() => {
-                const cm = wf.componentMapping;
-                const mappings = Array.isArray(cm) ? cm
-                    : (typeof cm === 'object' && cm !== null) ? Object.entries(cm).map(([k,v]) => ({wireframeElement: k, reactComponent: v}))
-                    : [];
-                return mappings.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>
-                        ${mappings.map(m =>
-                            '<tr><td>' + (m.wireframeElement || '') + '</td><td><code>' + (m.reactComponent || '') + '</code></td></tr>'
-                        ).join('')}
-                    </tbody>
-                </table>
-            </details>` : '';
-            })()}
-            <div class="wireframe-comment">
-                <label style="font-size:0.8rem;color:var(--text-muted);display:block;margin-bottom:0.3rem;">Commentaire / Feedback :</label>
-                <textarea class="form-textarea"
-                    data-module="${code}"
-                    data-screen="${wf.screen}"
-                    placeholder="Ajouter un commentaire sur cette maquette (ex: deplacer ce bouton, ajouter une colonne...)"
-                    onblur="updateWireframeComment('${code}', '${wf.screen}', this.value)"
-                    style="min-height:60px;font-size:0.85rem;resize:vertical;"
-                >${getWireframeComment(code, wf.screen)}</textarea>
-            </div>
         </div>
-    `}).join('');
+        <div class="mockup-content" id="${wireframeId}">
+            ${hasSvg
+                ? `<div class="svg-wireframe wireframe-view active" data-view="svg">${wf.svgContent}</div>
+                   <pre class="ascii-wireframe wireframe-view" data-view="ascii" style="display:none;">${wf.content || ''}</pre>`
+                : (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.map(e => typeof e === 'string' ? e : (e.type || e.label || e.id || '')).filter(Boolean).join(', ')}</div>
+        </div>` : ''}
+        ${(() => {
+            const cm = wf.componentMapping;
+            const mappings = Array.isArray(cm) ? cm
+                : (typeof cm === 'object' && cm !== null) ? Object.entries(cm).map(([k,v]) => ({wireframeElement: k, reactComponent: v}))
+                : [];
+            return mappings.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>
+                    ${mappings.map(m =>
+                        '<tr><td>' + (m.wireframeElement || '') + '</td><td><code>' + (m.reactComponent || '') + '</code></td></tr>'
+                    ).join('')}
+                </tbody>
+            </table>
+        </details>` : '';
+        })()}
+        <div class="wireframe-comment">
+            <label style="font-size:0.8rem;color:var(--text-muted);display:block;margin-bottom:0.3rem;">Commentaire / Feedback :</label>
+            <textarea class="form-textarea"
+                data-module="${code}"
+                data-screen="${wf.screen}"
+                placeholder="Ajouter un commentaire sur cette maquette (ex: deplacer ce bouton, ajouter une colonne...)"
+                onblur="updateWireframeComment('${code}', '${wf.screen}', this.value)"
+                style="min-height:60px;font-size:0.85rem;resize:vertical;"
+            >${getWireframeComment(code, wf.screen)}</textarea>
+        </div>
+    </div>
+    `;
+}
 }
 
 function toggleWireframeView(wireframeId, view) {
@@ -3407,7 +3625,7 @@ function toggleWireframeView(wireframeId, view) {
 }
 
 function getPermRoles() {
-    // Extract roles from actual permission data (handles English role names from feature.json)
+    // Extract roles from actual permission data (handles English role names from JSON data)
     const rolesFromPerms = [];
     const seen = new Set();
     data.modules.forEach(m => {
@@ -3779,6 +3997,381 @@ function renderE2EFlows() {
 }
 
 
+/* --- 06-render-mockups.js --- */
+/* ============================================
+   HTML MOCKUP RENDERER
+   Generates realistic HTML mockups from screens[] specs
+   ============================================ */
+
+function renderScreenMockups(code) {
+    var spec = data.moduleSpecs[code] || {};
+    var screens = spec.screens || [];
+
+    if (screens.length === 0) return '';
+
+    return screens.map(function(screen, si) {
+        var resources = screen.resources || [];
+        return '<div class="screen-section" style="margin-bottom:2rem;">' +
+            '<h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:1rem;">' +
+            '<span style="color:var(--accent);">&#9656;</span> ' + (screen.sectionLabel || screen.sectionCode) +
+            '</h3>' +
+            resources.map(function(res, ri) {
+                return renderResourceMockup(code, screen.sectionCode, res, ri);
+            }).join('') +
+        '</div>';
+    }).join('');
+}
+
+function renderResourceMockup(code, sectionCode, res, index) {
+    var mockupId = 'mockup-' + code + '-' + sectionCode + '-' + index;
+    var html = '<div class="mockup-frame" style="margin-bottom:1.5rem;">';
+
+    // Browser chrome
+    html += '<div class="mockup-toolbar">';
+    html += '<div class="mockup-dot mockup-dot-red"></div>';
+    html += '<div class="mockup-dot mockup-dot-yellow"></div>';
+    html += '<div class="mockup-dot mockup-dot-green"></div>';
+    html += '<span class="mockup-title">' + (res.label || res.code) + ' (' + res.type + ')</span>';
+    if (res.permission) {
+        html += '<span style="margin-left:auto;font-size:0.65rem;color:var(--text-muted);background:var(--bg-dark);padding:0.15rem 0.5rem;border-radius:4px;">' + res.permission + '</span>';
+    }
+    html += '</div>';
+
+    // Mockup content
+    html += '<div class="mockup-content" id="' + mockupId + '">';
+    switch (res.type) {
+        case 'SmartTable':
+            html += renderSmartTableMockup(res);
+            break;
+        case 'SmartForm':
+            html += renderSmartFormMockup(res);
+            break;
+        case 'SmartCard':
+            html += renderSmartCardMockup(res);
+            break;
+        case 'SmartKanban':
+            html += renderSmartKanbanMockup(res);
+            break;
+        case 'SmartDashboard':
+            html += renderSmartDashboardMockup(res);
+            break;
+        case 'SmartFilter':
+            html += renderSmartFilterMockup(res);
+            break;
+        default:
+            html += '<div style="padding:2rem;text-align:center;color:var(--text-muted);">Composant ' + res.type + ' - maquette non disponible</div>';
+    }
+    html += '</div>';
+
+    // Notes
+    if (res.notes) {
+        html += '<div style="padding:0.5rem 1rem;font-size:0.8rem;color:var(--text-muted);border-top:1px solid var(--border);background:var(--bg-input);">';
+        html += '<strong>Notes:</strong> ' + res.notes;
+        html += '</div>';
+    }
+
+    // Comment area
+    html += '<div class="wireframe-comment">';
+    html += '<label style="font-size:0.8rem;color:var(--text-muted);display:block;margin-bottom:0.3rem;">Commentaire :</label>';
+    html += '<textarea class="form-textarea" placeholder="Commentaire sur cette maquette..."';
+    html += ' onblur="updateWireframeComment(\'' + code + '\', \'' + (res.code || sectionCode + '-' + index) + '\', this.value)"';
+    html += ' style="min-height:50px;font-size:0.85rem;resize:vertical;">';
+    html += getWireframeComment(code, res.code || sectionCode + '-' + index);
+    html += '</textarea>';
+    html += '</div>';
+
+    html += '</div>';
+    return html;
+}
+
+/* ---------- SmartTable ---------- */
+function renderSmartTableMockup(res) {
+    var columns = res.columns || [];
+    if (columns.length === 0) return '<div style="padding:2rem;text-align:center;color:var(--text-muted);">Table sans colonnes definies</div>';
+
+    var html = '';
+
+    // Header with actions
+    html += '<div class="mock-header">';
+    html += '<span class="mock-title">' + (res.label || 'Liste') + '</span>';
+    html += '<div style="display:flex;gap:0.4rem;">';
+    (res.actions || []).forEach(function(action) {
+        var isPrimary = action === 'create' || action === 'export';
+        html += '<span class="mock-btn' + (isPrimary ? '' : '" style="background:var(--bg-hover);color:var(--text)') + '">' + formatActionLabel(action) + '</span>';
+    });
+    html += '</div></div>';
+
+    // Filters
+    if (res.filters && res.filters.length > 0) {
+        html += '<div style="display:flex;gap:0.5rem;margin-bottom:1rem;">';
+        res.filters.forEach(function(f) {
+            html += '<span class="mock-input" style="width:auto;min-width:120px;font-size:0.8rem;color:var(--text-muted);">' + f + ' &#9662;</span>';
+        });
+        html += '<span class="mock-input" style="width:auto;min-width:200px;font-size:0.8rem;color:var(--text-muted);">Rechercher...</span>';
+        html += '</div>';
+    }
+
+    // Table
+    html += '<table class="mock-table">';
+    html += '<thead><tr>';
+    columns.forEach(function(col) {
+        html += '<th>' + (col.label || col.field);
+        if (col.sortable) html += ' <span style="font-size:0.6rem;color:var(--text-muted);">&#9650;&#9660;</span>';
+        html += '</th>';
+    });
+    html += '<th style="width:80px;">Actions</th>';
+    html += '</tr></thead>';
+
+    // Sample rows
+    html += '<tbody>';
+    var sampleData = generateSampleRows(columns, 4);
+    sampleData.forEach(function(row) {
+        html += '<tr>';
+        columns.forEach(function(col) {
+            var val = row[col.field] || '';
+            if (col.type === 'badge') {
+                html += '<td><span class="mock-status mock-status-active">' + val + '</span></td>';
+            } else if (col.type === 'lookup') {
+                html += '<td style="color:var(--accent);">' + val + '</td>';
+            } else {
+                html += '<td>' + val + '</td>';
+            }
+        });
+        html += '<td style="text-align:center;"><span style="cursor:pointer;color:var(--text-muted);">&#9998; &#128465;</span></td>';
+        html += '</tr>';
+    });
+    html += '</tbody></table>';
+
+    // Pagination
+    html += '<div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;font-size:0.8rem;color:var(--text-muted);">';
+    html += '<span>1-4 sur 24 resultats</span>';
+    html += '<div style="display:flex;gap:0.3rem;">';
+    html += '<span class="mock-btn" style="background:var(--primary);font-size:0.75rem;padding:0.2rem 0.5rem;">1</span>';
+    html += '<span class="mock-btn" style="background:var(--bg-hover);font-size:0.75rem;padding:0.2rem 0.5rem;">2</span>';
+    html += '<span class="mock-btn" style="background:var(--bg-hover);font-size:0.75rem;padding:0.2rem 0.5rem;">3</span>';
+    html += '</div></div>';
+
+    return html;
+}
+
+/* ---------- SmartForm ---------- */
+function renderSmartFormMockup(res) {
+    var tabs = res.tabs || [];
+    if (tabs.length === 0 && res.fields) {
+        tabs = [{ label: 'Informations', fields: res.fields }];
+    }
+    if (tabs.length === 0) return '<div style="padding:2rem;text-align:center;color:var(--text-muted);">Formulaire sans champs definis</div>';
+
+    var html = '';
+
+    // Header
+    html += '<div class="mock-header">';
+    html += '<span class="mock-title">' + (res.label || 'Formulaire') + '</span>';
+    html += '<div style="display:flex;gap:0.4rem;">';
+    (res.actions || ['save', 'cancel']).forEach(function(action) {
+        var isPrimary = action === 'save';
+        html += '<span class="mock-btn' + (isPrimary ? '' : '" style="background:var(--bg-hover);color:var(--text)') + '">' + formatActionLabel(action) + '</span>';
+    });
+    html += '</div></div>';
+
+    // Tabs
+    if (tabs.length > 1) {
+        html += '<div style="display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.5rem;">';
+        tabs.forEach(function(tab, i) {
+            html += '<span style="padding:0.5rem 1rem;font-size:0.85rem;cursor:pointer;border-bottom:2px solid ' + (i === 0 ? 'var(--primary)' : 'transparent') + ';color:' + (i === 0 ? 'var(--primary-light)' : 'var(--text-muted)') + ';">' + tab.label + '</span>';
+        });
+        html += '</div>';
+    }
+
+    // Fields (first tab only)
+    var fields = tabs[0].fields || [];
+    var rows = [];
+    for (var i = 0; i < fields.length; i += 2) {
+        rows.push(fields.slice(i, i + 2));
+    }
+
+    rows.forEach(function(row) {
+        if (row.length === 1 && row[0].type === 'subtable') {
+            html += renderSubtableMockup(row[0]);
+        } else {
+            html += '<div class="mock-form-row">';
+            row.forEach(function(field) {
+                html += '<div class="mock-form-group">';
+                html += '<label class="mock-label">' + (field.label || field.field);
+                if (field.required) html += ' <span style="color:var(--error);">*</span>';
+                html += '</label>';
+                html += renderFormFieldMockup(field);
+                html += '</div>';
+            });
+            html += '</div>';
+        }
+    });
+
+    return html;
+}
+
+function renderFormFieldMockup(field) {
+    var val = generateSampleValue(field);
+    switch (field.type) {
+        case 'select':
+            return '<span class="mock-input" style="display:block;">' + val + ' &#9662;</span>';
+        case 'lookup':
+            return '<span class="mock-input" style="display:block;color:var(--accent);">' + val + ' &#128269;</span>';
+        case 'date':
+            return '<span class="mock-input" style="display:block;">' + val + ' &#128197;</span>';
+        case 'textarea':
+            return '<span class="mock-input" style="display:block;min-height:60px;">' + val + '</span>';
+        case 'checkbox':
+            return '<div style="display:flex;align-items:center;gap:0.5rem;"><input type="checkbox" checked disabled style="width:16px;height:16px;"><span style="font-size:0.85rem;color:var(--text);">' + val + '</span></div>';
+        default:
+            return '<span class="mock-input" style="display:block;' + (field.readonly ? 'opacity:0.6;' : '') + '">' + val + '</span>';
+    }
+}
+
+function renderSubtableMockup(field) {
+    var cols = field.columns || [];
+    var entity = field.entity || 'Element';
+    var html = '<div style="margin:1rem 0;border:1px solid var(--border);border-radius:8px;overflow:hidden;">';
+    html += '<div style="display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0.75rem;background:var(--bg-hover);">';
+    html += '<span style="font-weight:500;color:var(--text-bright);font-size:0.85rem;">' + entity + '</span>';
+    html += '<span class="mock-btn" style="font-size:0.75rem;padding:0.2rem 0.5rem;">+ Ajouter</span>';
+    html += '</div>';
+    html += '<table class="mock-table"><thead><tr>';
+    cols.forEach(function(c) { html += '<th>' + c + '</th>'; });
+    html += '</tr></thead><tbody>';
+    html += '<tr>' + cols.map(function() { return '<td style="color:var(--text-muted);font-style:italic;">...</td>'; }).join('') + '</tr>';
+    html += '</tbody></table></div>';
+    return html;
+}
+
+/* ---------- SmartCard ---------- */
+function renderSmartCardMockup(res) {
+    var columns = res.columns || res.fields || [];
+    var html = '<div class="mock-header"><span class="mock-title">' + (res.label || 'Cartes') + '</span></div>';
+    html += '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;">';
+
+    for (var i = 0; i < 4; i++) {
+        html += '<div style="background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:1rem;">';
+        columns.forEach(function(col, ci) {
+            var label = col.label || col.field || col;
+            if (ci === 0) {
+                html += '<div style="font-weight:600;color:var(--text-bright);margin-bottom:0.5rem;">' + label + ' #' + (i + 1) + '</div>';
+            } else {
+                html += '<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.25rem;">' + label + ': <span style="color:var(--text);">valeur</span></div>';
+            }
+        });
+        html += '</div>';
+    }
+    html += '</div>';
+    return html;
+}
+
+/* ---------- SmartKanban ---------- */
+function renderSmartKanbanMockup(res) {
+    var options = res.options || res.columns || ['A faire', 'En cours', 'Termine'];
+    var html = '<div class="mock-header"><span class="mock-title">' + (res.label || 'Kanban') + '</span></div>';
+    html += '<div style="display:flex;gap:1rem;overflow-x:auto;padding-bottom:0.5rem;">';
+
+    options.forEach(function(col, ci) {
+        var colLabel = typeof col === 'string' ? col : (col.label || col.field || 'Colonne');
+        html += '<div style="min-width:200px;flex:1;background:var(--bg-hover);border-radius:8px;padding:0.75rem;">';
+        html += '<div style="font-weight:600;font-size:0.85rem;color:var(--text-bright);margin-bottom:0.75rem;display:flex;justify-content:space-between;">';
+        html += colLabel + ' <span style="font-size:0.7rem;background:var(--bg-card);padding:0.1rem 0.4rem;border-radius:4px;color:var(--text-muted);">' + (3 - ci) + '</span>';
+        html += '</div>';
+        for (var j = 0; j < Math.max(1, 3 - ci); j++) {
+            html += '<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:0.5rem;margin-bottom:0.5rem;font-size:0.8rem;">';
+            html += '<div style="color:var(--text-bright);font-weight:500;">Element ' + (j + 1) + '</div>';
+            html += '<div style="color:var(--text-muted);font-size:0.7rem;margin-top:0.25rem;">Description...</div>';
+            html += '</div>';
+        }
+        html += '</div>';
+    });
+    html += '</div>';
+    return html;
+}
+
+/* ---------- SmartDashboard ---------- */
+function renderSmartDashboardMockup(res) {
+    var html = '<div class="mock-header"><span class="mock-title">' + (res.label || 'Tableau de bord') + '</span></div>';
+
+    // KPI cards
+    html += '<div class="mock-kpi-grid">';
+    var kpis = res.kpis || [
+        { label: 'Total', value: '1,234' },
+        { label: 'Actifs', value: '987' },
+        { label: 'En attente', value: '156' },
+        { label: 'Taux', value: '80%' }
+    ];
+    kpis.forEach(function(kpi) {
+        html += '<div class="mock-kpi"><div class="mock-kpi-value">' + (kpi.value || '0') + '</div><div class="mock-kpi-label">' + (kpi.label || '') + '</div></div>';
+    });
+    html += '</div>';
+
+    // Chart placeholder
+    html += '<div class="mock-chart-placeholder">Graphique</div>';
+
+    return html;
+}
+
+/* ---------- SmartFilter ---------- */
+function renderSmartFilterMockup(res) {
+    var options = res.options || [];
+    var html = '<div style="display:flex;gap:0.4rem;flex-wrap:wrap;padding:0.5rem 0;">';
+    html += '<span style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.8rem;background:var(--primary);color:#fff;cursor:pointer;">Tous</span>';
+    options.forEach(function(opt) {
+        html += '<span style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.8rem;background:var(--bg-hover);color:var(--text);border:1px solid var(--border);cursor:pointer;">' + opt + '</span>';
+    });
+    html += '</div>';
+    return html;
+}
+
+/* ---------- Helpers ---------- */
+function formatActionLabel(action) {
+    var labels = {
+        create: 'Nouveau', edit: 'Modifier', delete: 'Supprimer',
+        export: 'Exporter', save: 'Enregistrer', cancel: 'Annuler',
+        validate: 'Valider', archive: 'Archiver', print: 'Imprimer'
+    };
+    return labels[action] || action;
+}
+
+function generateSampleRows(columns, count) {
+    var rows = [];
+    for (var i = 0; i < count; i++) {
+        var row = {};
+        columns.forEach(function(col) {
+            row[col.field] = generateSampleValue(col, i);
+        });
+        rows.push(row);
+    }
+    return rows;
+}
+
+function generateSampleValue(field, index) {
+    var idx = (index || 0) + 1;
+    var t = field.type || 'text';
+    var f = field.field || '';
+
+    if (field.options && field.options.length > 0) {
+        return field.options[idx % field.options.length];
+    }
+
+    if (t === 'date') return '0' + idx + '/03/2026';
+    if (t === 'badge' || t === 'select') return 'Actif';
+    if (t === 'lookup') return f.replace(/Id$/, '') + ' #' + idx;
+    if (t === 'number') return String(idx * 100);
+    if (t === 'checkbox') return idx % 2 === 0 ? 'Oui' : 'Non';
+
+    if (f.toLowerCase().includes('code')) return 'CODE-' + String(idx).padStart(3, '0');
+    if (f.toLowerCase().includes('name') || f.toLowerCase().includes('nom')) return 'Nom ' + idx;
+    if (f.toLowerCase().includes('email')) return 'user' + idx + '@example.com';
+    if (f.toLowerCase().includes('date')) return '0' + idx + '/03/2026';
+    if (f.toLowerCase().includes('status') || f.toLowerCase().includes('statut')) return 'Actif';
+
+    return f + ' ' + idx;
+}
+
+
 /* --- 07-render-handoff.js --- */
 /* ============================================
    HANDOFF / SYNTHESE
@@ -4199,20 +4792,48 @@ function saveReviewJSON() {
  */
 
 function initInlineComments() {
-    // Add comment buttons under each card and uc-item (direct children of sections)
-    document.querySelectorAll('.section').forEach(section => {
-        const sectionId = section.id;
-        section.querySelectorAll(':scope > .card, :scope > .uc-item').forEach((card, index) => {
-            if (card.querySelector('.comment-btn-container')) return;
-            card.appendChild(createCommentUI(sectionId, index));
-        });
+    // Cadrage sections: direct card children
+    document.querySelectorAll('.section > .card, .section > .stakeholder-card, .section > .uc-item, .section > .risk-item').forEach(function(card) {
+        if (card.dataset.commentInitialized) return;
+        card.dataset.commentInitialized = 'true';
+        var section = card.closest('.section');
+        var sectionId = section ? section.id : 'unknown';
+        var siblings = Array.from(section.querySelectorAll(':scope > .card, :scope > .stakeholder-card, :scope > .uc-item, :scope > .risk-item'));
+        var index = siblings.indexOf(card);
+        card.appendChild(createCommentUI(sectionId, index));
+    });
+
+    // Module spec lists: nested items in ucList, brList, entList containers
+    document.querySelectorAll('[id^="ucList-"] > .uc-item, [id^="brList-"] > div, [id^="entList-"] > .entity-block').forEach(function(item) {
+        if (item.dataset.commentInitialized) return;
+        item.dataset.commentInitialized = 'true';
+        var list = item.parentElement;
+        var listId = list.id;
+        var siblings = Array.from(list.children);
+        var index = siblings.indexOf(item);
+        item.appendChild(createCommentUI(listId, index));
     });
-    // Second pass: nested list containers in module specs (ucList-*, brList-*, entList-*)
-    document.querySelectorAll('[id^="ucList-"], [id^="brList-"], [id^="entList-"]').forEach(list => {
-        const listId = list.id;
-        list.querySelectorAll(':scope > .uc-item, :scope > .entity-block, :scope > div').forEach((item, index) => {
-            if (item.querySelector('.comment-btn-container')) return;
-            item.appendChild(createCommentUI(listId, index));
+
+    // Stakeholder cards in grid
+    document.querySelectorAll('.stakeholder-grid > .stakeholder-card').forEach(function(card) {
+        if (card.dataset.commentInitialized) return;
+        card.dataset.commentInitialized = 'true';
+        var grid = card.parentElement;
+        var section = card.closest('.section');
+        var sectionId = section ? section.id : 'stakeholders';
+        var siblings = Array.from(grid.children);
+        var index = siblings.indexOf(card);
+        card.appendChild(createCommentUI(sectionId, index));
+    });
+
+    // Scope items
+    ['scopeVital', 'scopeImportant', 'scopeOptional', 'scopeExcluded'].forEach(function(containerId) {
+        var container = document.getElementById(containerId);
+        if (!container) return;
+        container.querySelectorAll('.uc-item').forEach(function(item, index) {
+            if (item.dataset.commentInitialized) return;
+            item.dataset.commentInitialized = 'true';
+            item.appendChild(createCommentUI(containerId, index));
         });
     });
 }