@atlashub/smartstack-cli 4.41.0 → 4.42.0

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/06-render-mockups.js

@@ -13,7 +13,7 @@ function renderScreenMockups(code) {
         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) +
+            '<span style="color:var(--accent);">&#9656;</span> ' + escapeHtml(screen.sectionLabel || screen.sectionCode) +
             '</h3>' +
             resources.map(function(res, ri) {
                 return renderResourceMockup(code, screen.sectionCode, res, ri);
@@ -31,9 +31,9 @@ function renderResourceMockup(code, sectionCode, res, index) {
     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>';
+    html += '<span class="mockup-title">' + escapeHtml(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 += '<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;">' + escapeHtml(res.permission) + '</span>';
     }
     html += '</div>';
 
@@ -66,7 +66,7 @@ function renderResourceMockup(code, sectionCode, res, index) {
     // 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 += '<strong>Notes:</strong> ' + escapeHtml(res.notes);
         html += '</div>';
     }
 
@@ -93,7 +93,7 @@ function renderSmartTableMockup(res) {
 
     // Header with actions
     html += '<div class="mock-header">';
-    html += '<span class="mock-title">' + (res.label || 'Liste') + '</span>';
+    html += '<span class="mock-title">' + escapeHtml(res.label || 'Liste') + '</span>';
     html += '<div style="display:flex;gap:0.4rem;">';
     (res.actions || []).forEach(function(action) {
         var isPrimary = action === 'create' || action === 'export';
@@ -115,7 +115,7 @@ function renderSmartTableMockup(res) {
     html += '<table class="mock-table">';
     html += '<thead><tr>';
     columns.forEach(function(col) {
-        html += '<th>' + (col.label || col.field);
+        html += '<th>' + escapeHtml(col.label || col.field);
         if (col.sortable) html += ' <span style="font-size:0.6rem;color:var(--text-muted);">&#9650;&#9660;</span>';
         html += '</th>';
     });
@@ -166,7 +166,7 @@ function renderSmartFormMockup(res) {
 
     // Header
     html += '<div class="mock-header">';
-    html += '<span class="mock-title">' + (res.label || 'Formulaire') + '</span>';
+    html += '<span class="mock-title">' + escapeHtml(res.label || 'Formulaire') + '</span>';
     html += '<div style="display:flex;gap:0.4rem;">';
     (res.actions || ['save', 'cancel']).forEach(function(action) {
         var isPrimary = action === 'save';
@@ -178,7 +178,7 @@ function renderSmartFormMockup(res) {
     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 += '<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)') + ';">' + escapeHtml(tab.label) + '</span>';
         });
         html += '</div>';
     }
@@ -197,7 +197,7 @@ function renderSmartFormMockup(res) {
             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);
+                html += '<label class="mock-label">' + escapeHtml(field.label || field.field);
                 if (field.required) html += ' <span style="color:var(--error);">*</span>';
                 html += '</label>';
                 html += renderFormFieldMockup(field);
@@ -233,11 +233,11 @@ function renderSubtableMockup(field) {
     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 style="font-weight:500;color:var(--text-bright);font-size:0.85rem;">' + escapeHtml(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>'; });
+    cols.forEach(function(c) { html += '<th>' + escapeHtml(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>';
@@ -247,7 +247,7 @@ function renderSubtableMockup(field) {
 /* ---------- 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>';
+    var html = '<div class="mock-header"><span class="mock-title">' + escapeHtml(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++) {
@@ -255,9 +255,9 @@ function renderSmartCardMockup(res) {
         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>';
+                html += '<div style="font-weight:600;color:var(--text-bright);margin-bottom:0.5rem;">' + escapeHtml(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 style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.25rem;">' + escapeHtml(label) + ': <span style="color:var(--text);">valeur</span></div>';
             }
         });
         html += '</div>';
@@ -269,14 +269,14 @@ function renderSmartCardMockup(res) {
 /* ---------- SmartKanban ---------- */
 function renderSmartKanbanMockup(res) {
     var options = res.options || res.columns || ['À faire', 'En cours', 'Terminé'];
-    var html = '<div class="mock-header"><span class="mock-title">' + (res.label || 'Kanban') + '</span></div>';
+    var html = '<div class="mock-header"><span class="mock-title">' + escapeHtml(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 += escapeHtml(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;">';
@@ -292,7 +292,7 @@ function renderSmartKanbanMockup(res) {
 
 /* ---------- SmartDashboard ---------- */
 function renderSmartDashboardMockup(res) {
-    var html = '<div class="mock-header"><span class="mock-title">' + (res.label || 'Tableau de bord') + '</span></div>';
+    var html = '<div class="mock-header"><span class="mock-title">' + escapeHtml(res.label || 'Tableau de bord') + '</span></div>';
 
     // KPI cards
     html += '<div class="mock-kpi-grid">';
@@ -303,7 +303,7 @@ function renderSmartDashboardMockup(res) {
         { 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 class="mock-kpi"><div class="mock-kpi-value">' + escapeHtml(kpi.value || '0') + '</div><div class="mock-kpi-label">' + escapeHtml(kpi.label || '') + '</div></div>';
     });
     html += '</div>';
 
@@ -319,7 +319,7 @@ function renderSmartFilterMockup(res) {
     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 += '<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;">' + escapeHtml(opt) + '</span>';
     });
     html += '</div>';
     return html;

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/07-render-handoff.js

@@ -5,6 +5,7 @@ function renderHandoff() {
     renderHandoffStats();
     renderHandoffModules();
     renderCoverageMatrix();
+    renderProgressIndicator();
 }
 
 function renderHandoffStats() {
@@ -43,8 +44,8 @@ function renderHandoffModules() {
                 <div style="display:flex;align-items:center;gap:0.75rem;">
                     <div style="width:28px;height:28px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-weight:700;flex-shrink:0;">${i + 1}</div>
                     <div style="flex:1;">
-                        <div style="font-weight:600;color:var(--text-bright);">${m.name}</div>
-                        <div style="font-size:0.8rem;color:var(--text-muted);">${m.description || ''}</div>
+                        <div style="font-weight:600;color:var(--text-bright);">${escapeHtml(m.name)}</div>
+                        <div style="font-size:0.8rem;color:var(--text-muted);">${escapeHtml(m.description || '')}</div>
                     </div>
                     <div style="display:flex;gap:1rem;font-size:0.75rem;color:var(--text-muted);">
                         <span>${(spec.useCases || []).length} cas d'utilisation</span>
@@ -77,12 +78,31 @@ function renderCoverageMatrix() {
                         : (data.modules.length > 0 ? data.modules.map(m => m.name).join(', ') : 'À définir');
                     return `
                         <tr>
-                            <td>${item.name}</td>
+                            <td>${escapeHtml(item.name)}</td>
                             <td><span class="priority priority-${item.priority}">${formatPriority(item.priority)}</span></td>
-                            <td style="color:var(--text-muted);">${moduleName}</td>
+                            <td style="color:var(--text-muted);">${escapeHtml(moduleName)}</td>
                             <td style="text-align:center;color:var(--success);">&#10003;</td>
                         </tr>`;
                 }).join('')}
             </tbody>
         </table>`;
 }
+
+function renderProgressIndicator() {
+    var container = document.getElementById('progressIndicator');
+    if (!container) return;
+    var p = computeProgress();
+    var html = '<div class="progress-bar-container">';
+    html += '<div class="progress-bar-fill" style="width:' + p.pct + '%;"></div>';
+    html += '</div>';
+    html += '<div class="progress-label">' + p.pct + '% complet — ' + p.doneCount + '/' + p.total + ' critères</div>';
+    html += '<div class="progress-checks">';
+    p.checks.forEach(function(c) {
+        html += '<div class="progress-check ' + (c.done ? 'done' : '') + '">';
+        html += '<span class="progress-check-icon">' + (c.done ? '&#10003;' : '&#9675;') + '</span> ';
+        html += escapeHtml(c.label);
+        html += '</div>';
+    });
+    html += '</div>';
+    container.innerHTML = html;
+}

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/08-editing.js

@@ -1,9 +1,13 @@
 /* ============================================
    PERSISTENCE
    ============================================ */
+let _saveTimer;
 function autoSave() {
-    data.metadata.lastModified = new Date().toISOString();
-    localStorage.setItem(APP_KEY, JSON.stringify(data));
+    clearTimeout(_saveTimer);
+    _saveTimer = setTimeout(function() {
+        data.metadata.lastModified = new Date().toISOString();
+        localStorage.setItem(APP_KEY, JSON.stringify(data));
+    }, 500);
 }
 
 function saveToLocalStorage() {

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/09-export.js

@@ -1,13 +1,10 @@
 /* ============================================
    EXPORT JSON
    ============================================ */
-function exportJSON() {
-    // Collect all editable fields (cadrage)
+function collectEditableFields() {
     document.querySelectorAll('.editable[data-field]').forEach(el => {
         setNestedValue(data, 'cadrage.' + el.dataset.field, el.textContent.trim());
     });
-
-    // Collect module editable fields
     document.querySelectorAll('.editable[data-module-field]').forEach(el => {
         const code = el.dataset.moduleCode;
         const field = el.dataset.moduleField;
@@ -15,17 +12,39 @@ function exportJSON() {
             data.moduleSpecs[code][field] = el.textContent.trim();
         }
     });
+}
+
+function buildModuleSpecsExport() {
+    var result = {};
+    data.modules.forEach(function(m) {
+        var spec = data.moduleSpecs[m.code] || {};
+        result[m.code] = {
+            module: m,
+            useCases: (spec.useCases || []).map(function(uc, i) {
+                return Object.assign({ id: 'UC-' + String(i + 1).padStart(3, '0') }, uc);
+            }),
+            businessRules: (spec.businessRules || []).map(function(br, i) {
+                return Object.assign({ id: 'BR-' + (br.category || 'GEN').toUpperCase().substring(0, 4) + '-' + String(i + 1).padStart(3, '0') }, br);
+            }),
+            entities: spec.entities || [],
+            permissions: spec.permissions || [],
+            notes: spec.notes || ''
+        };
+    });
+    return result;
+}
 
+function exportJSON() {
+    collectEditableFields();
     data.metadata.lastModified = new Date().toISOString();
     data.metadata.exportedAt = new Date().toISOString();
 
-    // Build complete export with structured data
     const exportData = {
         metadata: data.metadata,
         cadrage: data.cadrage,
         modules: data.modules,
         dependencies: data.dependencies,
-        moduleSpecifications: {},
+        moduleSpecifications: buildModuleSpecsExport(),
         consolidation: data.consolidation,
         artifacts: EMBEDDED_ARTIFACTS,
         wireframeComments: data.wireframeComments,
@@ -35,25 +54,6 @@ function exportJSON() {
         comments: data.comments
     };
 
-    // Structure module specs for export
-    data.modules.forEach(m => {
-        const spec = data.moduleSpecs[m.code] || {};
-        exportData.moduleSpecifications[m.code] = {
-            module: m,
-            useCases: (spec.useCases || []).map((uc, i) => ({
-                id: 'UC-' + String(i + 1).padStart(3, '0'),
-                ...uc
-            })),
-            businessRules: (spec.businessRules || []).map((br, i) => ({
-                id: 'BR-' + br.category.toUpperCase().substring(0, 4) + '-' + String(i + 1).padStart(3, '0'),
-                ...br
-            })),
-            entities: spec.entities || [],
-            permissions: spec.permissions || [],
-            notes: spec.notes || ''
-        };
-    });
-
     const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -93,24 +93,13 @@ function detectChanges(original, current) {
 }
 
 function saveReviewJSON() {
-    // Collect all editable fields (same as exportJSON)
-    document.querySelectorAll('.editable[data-field]').forEach(el => {
-        setNestedValue(data, 'cadrage.' + el.dataset.field, el.textContent.trim());
-    });
-    document.querySelectorAll('.editable[data-module-field]').forEach(el => {
-        const code = el.dataset.moduleCode;
-        const field = el.dataset.moduleField;
-        if (data.moduleSpecs[code]) {
-            data.moduleSpecs[code][field] = el.textContent.trim();
-        }
-    });
+    collectEditableFields();
 
     const changes = detectChanges(ORIGINAL_DATA, data);
     const hasChanges = changes.cadrage || changes.modulesAdded.length > 0
         || changes.modulesRemoved.length > 0 || changes.modulesModified.length > 0
         || changes.commentsCount > 0;
 
-    // Build review export with metadata envelope
     const reviewData = {
         _reviewMeta: {
             sourceVersion: data.metadata.version || '1.0',
@@ -129,7 +118,7 @@ function saveReviewJSON() {
         cadrage: data.cadrage,
         modules: data.modules,
         dependencies: data.dependencies,
-        moduleSpecifications: {},
+        moduleSpecifications: buildModuleSpecsExport(),
         consolidation: data.consolidation,
         wireframeComments: data.wireframeComments,
         specComments: data.specComments,
@@ -138,25 +127,6 @@ function saveReviewJSON() {
         comments: data.comments
     };
 
-    // Structure module specs (same logic as exportJSON)
-    data.modules.forEach(m => {
-        const spec = data.moduleSpecs[m.code] || {};
-        reviewData.moduleSpecifications[m.code] = {
-            module: m,
-            useCases: (spec.useCases || []).map((uc, i) => ({
-                id: 'UC-' + String(i + 1).padStart(3, '0'),
-                ...uc
-            })),
-            businessRules: (spec.businessRules || []).map((br, i) => ({
-                id: 'BR-' + br.category.toUpperCase().substring(0, 4) + '-' + String(i + 1).padStart(3, '0'),
-                ...br
-            })),
-            entities: spec.entities || [],
-            permissions: spec.permissions || [],
-            notes: spec.notes || ''
-        };
-    });
-
     const blob = new Blob([JSON.stringify(reviewData, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');

package/templates/skills/{ba-generate-html → business-analyse-html}/html/src/scripts/10-comments.js

@@ -4,14 +4,24 @@
 
 /**
  * Comments are stored in data.comments[] with structure:
- * { id, sectionId, cardIndex, author, timestamp, content, status, category }
+ * { id, sectionId, elementId, author, timestamp, content, status, category }
  *
- * - sectionId: matches the section div id (e.g. "cadrage-problem", "module-spec-Clients")
- * - cardIndex: index of the card within that section (0-based)
+ * - sectionId: matches the section div id (e.g. "cadrage-context", "module-spec-Clients")
+ * - elementId: stable identifier for the element (name, role, or generated id)
+ * - cardIndex: (deprecated, kept for backward compat) positional index
  * - status: "to-review" | "validated"
  * - category: "clarification" | "correction" | "suggestion"
  */
 
+function getElementId(item, sectionId, index) {
+    // Extract a stable ID from the element's data
+    var title = item.querySelector('.uc-title, .entity-name, .stakeholder-role, .card-title');
+    if (title) return title.textContent.trim();
+    var nameEl = item.querySelector('[data-field]');
+    if (nameEl) return nameEl.dataset.field;
+    return sectionId + '-' + index;
+}
+
 function initInlineComments() {
     // Cadrage sections: direct card children
     document.querySelectorAll('.section > .card, .section > .stakeholder-card, .section > .uc-item').forEach(function(card) {
@@ -21,7 +31,8 @@ function initInlineComments() {
         var sectionId = section ? section.id : 'unknown';
         var siblings = Array.from(section.querySelectorAll(':scope > .card, :scope > .stakeholder-card, :scope > .uc-item'));
         var index = siblings.indexOf(card);
-        card.appendChild(createCommentUI(sectionId, index));
+        var elementId = getElementId(card, sectionId, index);
+        card.appendChild(createCommentUI(sectionId, elementId));
     });
 
     // Module spec lists: nested items in ucList, brList, entList containers
@@ -32,7 +43,8 @@ function initInlineComments() {
         var listId = list.id;
         var siblings = Array.from(list.children);
         var index = siblings.indexOf(item);
-        item.appendChild(createCommentUI(listId, index));
+        var elementId = getElementId(item, listId, index);
+        item.appendChild(createCommentUI(listId, elementId));
     });
 
     // Stakeholder cards in grid
@@ -44,7 +56,8 @@ function initInlineComments() {
         var sectionId = section ? section.id : 'stakeholders';
         var siblings = Array.from(grid.children);
         var index = siblings.indexOf(card);
-        card.appendChild(createCommentUI(sectionId, index));
+        var elementId = getElementId(card, sectionId, index);
+        card.appendChild(createCommentUI(sectionId, elementId));
     });
 
     // Scope items
@@ -54,36 +67,39 @@ function initInlineComments() {
         container.querySelectorAll('.uc-item').forEach(function(item, index) {
             if (item.dataset.commentInitialized) return;
             item.dataset.commentInitialized = 'true';
-            item.appendChild(createCommentUI(containerId, index));
+            var elementId = getElementId(item, containerId, index);
+            item.appendChild(createCommentUI(containerId, elementId));
         });
     });
 }
 
-function createCommentUI(sectionId, cardIndex) {
-    const comments = getCommentsForCard(sectionId, cardIndex);
+function createCommentUI(sectionId, elementId) {
+    const comments = getCommentsForCard(sectionId, elementId);
     const count = comments.length;
+    const safeElId = String(elementId).replace(/[^a-zA-Z0-9_-]/g, '_');
+    const threadId = 'comment-thread-' + sectionId + '-' + safeElId;
 
     const container = document.createElement('div');
     container.className = 'comment-btn-container';
     container.dataset.sectionId = sectionId;
-    container.dataset.cardIndex = cardIndex;
+    container.dataset.elementId = elementId;
 
     container.innerHTML = `
-        <button class="comment-toggle-btn" onclick="toggleCommentThread('${sectionId}', ${cardIndex})">
+        <button class="comment-toggle-btn" onclick="toggleCommentThread('${sectionId}', '${safeElId}')">
             Commentaires <span class="comment-count ${count === 0 ? 'empty' : ''}">${count}</span>
         </button>
-        <div class="comment-thread" id="comment-thread-${sectionId}-${cardIndex}">
-            <div class="comment-items" id="comment-items-${sectionId}-${cardIndex}">
-                ${renderCommentItems(sectionId, cardIndex)}
+        <div class="comment-thread" id="${threadId}">
+            <div class="comment-items" id="comment-items-${sectionId}-${safeElId}">
+                ${renderCommentItems(sectionId, elementId)}
             </div>
             <div class="comment-add-form">
-                <textarea id="comment-text-${sectionId}-${cardIndex}" placeholder="Ajouter un commentaire..."></textarea>
-                <select id="comment-cat-${sectionId}-${cardIndex}">
+                <textarea id="comment-text-${sectionId}-${safeElId}" placeholder="Ajouter un commentaire..."></textarea>
+                <select id="comment-cat-${sectionId}-${safeElId}">
                     <option value="clarification">Clarification</option>
                     <option value="correction">Correction</option>
                     <option value="suggestion">Suggestion</option>
                 </select>
-                <button onclick="addInlineComment('${sectionId}', ${cardIndex})">Ajouter</button>
+                <button onclick="addInlineComment('${sectionId}', '${elementId.replace(/'/g, "\\'")}')">Ajouter</button>
             </div>
         </div>
     `;
@@ -91,25 +107,27 @@ function createCommentUI(sectionId, cardIndex) {
     return container;
 }
 
-function getCommentsForCard(sectionId, cardIndex) {
-    return (data.comments || []).filter(c =>
-        c.sectionId === sectionId && c.cardIndex === cardIndex
-    );
+function getCommentsForCard(sectionId, elementId) {
+    return (data.comments || []).filter(function(c) {
+        if (c.elementId) return c.sectionId === sectionId && c.elementId === elementId;
+        // Backward compat: match by cardIndex if elementId not set
+        return c.sectionId === sectionId && c.cardIndex === elementId;
+    });
 }
 
-function toggleCommentThread(sectionId, cardIndex) {
-    const thread = document.getElementById('comment-thread-' + sectionId + '-' + cardIndex);
+function toggleCommentThread(sectionId, safeElId) {
+    const thread = document.getElementById('comment-thread-' + sectionId + '-' + safeElId);
     if (thread) thread.classList.toggle('visible');
 }
 
-function renderCommentItems(sectionId, cardIndex) {
-    const comments = getCommentsForCard(sectionId, cardIndex);
+function renderCommentItems(sectionId, elementId) {
+    const comments = getCommentsForCard(sectionId, elementId);
     if (comments.length === 0) {
         return '<div style="font-size:0.8rem;color:var(--text-muted);padding:0.5rem 0;font-style:italic;">Aucun commentaire</div>';
     }
 
-    return comments.map((c, i) => {
-        const initials = (c.author || 'U').substring(0, 2).toUpperCase();
+    return comments.map(function(c, i) {
+        const initials = escapeHtml((c.author || 'U').substring(0, 2).toUpperCase());
         const date = c.timestamp ? new Date(c.timestamp).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }) : '';
         const globalIndex = data.comments.indexOf(c);
 
@@ -118,12 +136,12 @@ function renderCommentItems(sectionId, cardIndex) {
                 <div class="comment-avatar">${initials}</div>
                 <div class="comment-body">
                     <div class="comment-meta">
-                        <span class="comment-author">${c.author || 'Utilisateur'}</span>
-                        <span class="comment-date">${date}</span>
-                        <span class="comment-category comment-category-${c.category}">${c.category}</span>
+                        <span class="comment-author">${escapeHtml(c.author || 'Utilisateur')}</span>
+                        <span class="comment-date">${escapeHtml(date)}</span>
+                        <span class="comment-category comment-category-${escapeHtml(c.category)}">${escapeHtml(c.category)}</span>
                         <span class="comment-status comment-status-${c.status}">${c.status === 'validated' ? 'Validé' : 'À revoir'}</span>
                     </div>
-                    <div class="comment-text">${c.content}</div>
+                    <div class="comment-text">${escapeHtml(c.content)}</div>
                     <div class="comment-actions">
                         <button class="comment-action-btn" onclick="toggleCommentStatus(${globalIndex})">${c.status === 'validated' ? 'Remettre à revoir' : 'Valider'}</button>
                         <button class="comment-action-btn" onclick="deleteComment(${globalIndex})" style="color:var(--error);">Supprimer</button>
@@ -134,16 +152,17 @@ function renderCommentItems(sectionId, cardIndex) {
     }).join('');
 }
 
-function addInlineComment(sectionId, cardIndex) {
-    const textEl = document.getElementById('comment-text-' + sectionId + '-' + cardIndex);
-    const catEl = document.getElementById('comment-cat-' + sectionId + '-' + cardIndex);
+function addInlineComment(sectionId, elementId) {
+    var safeElId = String(elementId).replace(/[^a-zA-Z0-9_-]/g, '_');
+    const textEl = document.getElementById('comment-text-' + sectionId + '-' + safeElId);
+    const catEl = document.getElementById('comment-cat-' + sectionId + '-' + safeElId);
     const content = textEl.value.trim();
     if (!content) return;
 
     const comment = {
         id: 'comment-' + Date.now(),
         sectionId: sectionId,
-        cardIndex: cardIndex,
+        elementId: elementId,
         author: 'Utilisateur',
         timestamp: new Date().toISOString(),
         content: content,
@@ -154,7 +173,7 @@ function addInlineComment(sectionId, cardIndex) {
     data.comments.push(comment);
     textEl.value = '';
 
-    refreshCommentUI(sectionId, cardIndex);
+    refreshCommentUI(sectionId, elementId);
     renderReviewPanel();
     autoSave();
 }
@@ -163,32 +182,35 @@ function toggleCommentStatus(globalIndex) {
     const comment = data.comments[globalIndex];
     if (!comment) return;
     comment.status = comment.status === 'validated' ? 'to-review' : 'validated';
-    refreshCommentUI(comment.sectionId, comment.cardIndex);
+    var elId = comment.elementId || comment.cardIndex;
+    refreshCommentUI(comment.sectionId, elId);
     renderReviewPanel();
     autoSave();
 }
 
 function deleteComment(globalIndex) {
+    if (!confirm('Supprimer ce commentaire ?')) return;
     const comment = data.comments[globalIndex];
     if (!comment) return;
-    const sectionId = comment.sectionId;
-    const cardIndex = comment.cardIndex;
+    var sectionId = comment.sectionId;
+    var elId = comment.elementId || comment.cardIndex;
     data.comments.splice(globalIndex, 1);
-    refreshCommentUI(sectionId, cardIndex);
+    refreshCommentUI(sectionId, elId);
     renderReviewPanel();
     autoSave();
 }
 
-function refreshCommentUI(sectionId, cardIndex) {
+function refreshCommentUI(sectionId, elementId) {
+    var safeElId = String(elementId).replace(/[^a-zA-Z0-9_-]/g, '_');
     // Update comment items
-    const itemsContainer = document.getElementById('comment-items-' + sectionId + '-' + cardIndex);
+    const itemsContainer = document.getElementById('comment-items-' + sectionId + '-' + safeElId);
     if (itemsContainer) {
-        itemsContainer.innerHTML = renderCommentItems(sectionId, cardIndex);
+        itemsContainer.innerHTML = renderCommentItems(sectionId, elementId);
     }
 
     // Update count badge
-    const count = getCommentsForCard(sectionId, cardIndex).length;
-    const container = document.querySelector(`.comment-btn-container[data-section-id="${sectionId}"][data-card-index="${cardIndex}"]`);
+    const count = getCommentsForCard(sectionId, elementId).length;
+    const container = document.querySelector('.comment-btn-container[data-section-id="' + sectionId + '"][data-element-id="' + elementId + '"]');
     if (container) {
         const badge = container.querySelector('.comment-count');
         if (badge) {