@atlashub/smartstack-cli 4.80.0 → 5.0.0

package/templates/skills/business-analyse-html/html/src/scripts/07-render-handoff.js

@@ -1,108 +0,0 @@
-/* ============================================
-   HANDOFF / SYNTHESE
-   ============================================ */
-function renderHandoff() {
-    renderHandoffStats();
-    renderHandoffModules();
-    renderCoverageMatrix();
-    renderProgressIndicator();
-}
-
-function renderHandoffStats() {
-    const container = document.getElementById('handoffStats');
-    if (!container) return;
-
-    const totalUCs = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.useCases || []).length, 0);
-    const totalBRs = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.businessRules || []).length, 0);
-    const totalEnts = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.entities || []).length, 0);
-    const totalStakeholders = data.cadrage.stakeholders.length;
-
-    container.innerHTML = `
-        <div class="stat-card"><div class="stat-value">${data.modules.length}</div><div class="stat-label">Domaines fonctionnels</div></div>
-        <div class="stat-card"><div class="stat-value">${totalUCs}</div><div class="stat-label">Cas d'utilisation</div></div>
-        <div class="stat-card"><div class="stat-value">${totalBRs}</div><div class="stat-label">Règles métier</div></div>
-        <div class="stat-card"><div class="stat-value">${totalEnts}</div><div class="stat-label">Types de données</div></div>
-        <div class="stat-card"><div class="stat-value">${totalStakeholders}</div><div class="stat-label">Profils utilisateurs</div></div>
-        <div class="stat-card"><div class="stat-value">${data.dependencies.length}</div><div class="stat-label">Dépendances</div></div>
-        <div class="stat-card"><div class="stat-value">${data.consolidation.e2eFlows.length}</div><div class="stat-label">Parcours bout en bout</div></div>
-    `;
-}
-
-function renderHandoffModules() {
-    const container = document.getElementById('handoffModuleList');
-    if (!container) return;
-
-    const layers = computeTopologicalLayers();
-    const order = layers ? layers.flat() : data.modules.map(m => m.code);
-
-    container.innerHTML = order.map((code, i) => {
-        const m = data.modules.find(mod => mod.code === code);
-        if (!m) return '';
-        const spec = data.moduleSpecs[code] || {};
-        return `
-            <div class="card" style="margin-bottom:0.75rem;">
-                <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);">${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>
-                        <span>${(spec.businessRules || []).length} règles</span>
-                        <span>${(spec.entities || []).length} données</span>
-                    </div>
-                </div>
-            </div>`;
-    }).join('');
-}
-
-function renderCoverageMatrix() {
-    const container = document.getElementById('coverageMatrix');
-    if (!container) return;
-
-    const allScope = (data.cadrage.scope.inscope || []).map(item => ({ ...item, priority: 'inscope' }));
-
-    if (allScope.length === 0) {
-        container.innerHTML = '<p style="color:var(--text-muted);font-style:italic;">Aucun élément de périmètre défini dans le cadrage.</p>';
-        return;
-    }
-
-    container.innerHTML = `
-        <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
-            <thead><tr><th>Besoin</th><th>Périmètre</th><th>Domaine</th><th>Couvert</th></tr></thead>
-            <tbody>
-                ${allScope.map(item => {
-                    const moduleName = item.module
-                        ? (data.modules.find(m => m.code === item.module)?.name || item.module)
-                        : (data.modules.length > 0 ? data.modules.map(m => m.name).join(', ') : 'À définir');
-                    return `
-                        <tr>
-                            <td>${escapeHtml(item.name)}</td>
-                            <td><span class="priority priority-${item.priority}">${formatPriority(item.priority)}</span></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/business-analyse-html/html/src/scripts/08-editing.js

@@ -1,137 +0,0 @@
-/* ============================================
-   PERSISTENCE
-   ============================================ */
-let _saveTimer;
-function autoSave() {
-    clearTimeout(_saveTimer);
-    _saveTimer = setTimeout(function() {
-        data.metadata.lastModified = new Date().toISOString();
-        localStorage.setItem(APP_KEY, JSON.stringify(data));
-    }, 500);
-}
-
-function saveToLocalStorage() {
-    autoSave();
-    showNotification('Modifications sauvegardées');
-}
-
-function resetToEmbedded() {
-    if (!confirm('Réinitialiser toutes les données depuis la version d\'origine ? Vos modifications locales (commentaires, notes) seront perdues.')) return;
-    localStorage.removeItem(APP_KEY);
-    // Restore data from ORIGINAL_DATA
-    Object.keys(data).forEach(k => delete data[k]);
-    Object.assign(data, JSON.parse(JSON.stringify(ORIGINAL_DATA)));
-    // Re-render everything
-    initEditableFields();
-    renderStakeholders();
-    renderScope();
-    renderCriteria();
-    renderModules();
-    renderDependencies();
-    renderAllModuleSpecs();
-    renderConsolidation();
-    renderHandoff();
-    renderE2EFlows();
-    updateCounts();
-    renderReviewPanel();
-    showNotification('Données réinitialisées depuis la version d\'origine');
-}
-
-function loadFromLocalStorage() {
-    const saved = localStorage.getItem(APP_KEY);
-    if (!saved) return;
-
-    try {
-        const parsed = JSON.parse(saved);
-
-        // Build fingerprint of embedded structural data to detect HTML regeneration
-        const embeddedFingerprint = ORIGINAL_DATA.modules.map(m => m.code).sort().join(',')
-            + '|' + (ORIGINAL_DATA.metadata?.createdAt || '')
-            + '|' + ORIGINAL_DATA.modules.length;
-        const cachedFingerprint = parsed._structureFingerprint || '';
-
-        const structureChanged = embeddedFingerprint !== cachedFingerprint;
-        const embeddedModuleCount = ORIGINAL_DATA.modules?.length || 0;
-        const cachedModuleCount = (parsed.modules || []).length;
-        const hasNewModules = embeddedModuleCount > cachedModuleCount;
-        const embeddedModuleCodes = new Set(ORIGINAL_DATA.modules.map(m => m.code));
-        const cachedModuleCodes = new Set((parsed.modules || []).map(m => m.code));
-        const missingModules = [...embeddedModuleCodes].filter(c => !cachedModuleCodes.has(c));
-
-        if (structureChanged || hasNewModules || missingModules.length > 0) {
-            // HTML was regenerated or has new modules — keep embedded structural data
-            // Only restore user-specific edits (comments, custom roles, notes)
-            data.wireframeComments = parsed.wireframeComments || {};
-            data.specComments = parsed.specComments || {};
-            data.customRoles = parsed.customRoles || [];
-            data.customActions = parsed.customActions || [];
-            data.comments = parsed.comments || [];
-
-            // Merge user-added notes per module (preserve existing module notes)
-            for (const code of Object.keys(parsed.moduleSpecs || {})) {
-                if (data.moduleSpecs[code] && parsed.moduleSpecs[code]?.notes) {
-                    data.moduleSpecs[code].notes = parsed.moduleSpecs[code].notes;
-                }
-            }
-
-            // Save fresh embedded data with fingerprint
-            data._structureFingerprint = embeddedFingerprint;
-            autoSave();
-        } else {
-            // Cache matches current structure — safe to restore user edits on cadrage/notes
-            // IMPORTANT: Always keep embedded modules and moduleSpecs as structural source of truth
-            // Only merge cadrage user-editable fields and notes
-            if (parsed.cadrage) {
-                // Merge cadrage context (user may have edited text fields)
-                if (parsed.cadrage.context) {
-                    data.cadrage.context = { ...data.cadrage.context, ...parsed.cadrage.context };
-                }
-                // Merge scope only if user added items interactively
-                if (parsed.cadrage.scope) {
-                    data.cadrage.scope = { ...data.cadrage.scope, ...parsed.cadrage.scope };
-                }
-                // Merge stakeholders if user edited them
-                if (parsed.cadrage.stakeholders) data.cadrage.stakeholders = parsed.cadrage.stakeholders;
-            }
-            data.dependencies = parsed.dependencies || data.dependencies;
-            data.consolidation = { ...data.consolidation, ...(parsed.consolidation || {}) };
-
-            // Merge moduleSpecs: keep embedded structure, overlay user-editable fields (notes, custom permissions)
-            for (const code of Object.keys(data.moduleSpecs)) {
-                const cached = parsed.moduleSpecs?.[code];
-                if (cached) {
-                    // Preserve user notes
-                    if (cached.notes) data.moduleSpecs[code].notes = cached.notes;
-                    // Preserve user-added use cases/rules/entities (merged with embedded)
-                    // Only add items that don't exist in embedded (by name match)
-                    const embeddedUcNames = new Set((data.moduleSpecs[code].useCases || []).map(uc => uc.name));
-                    (cached.useCases || []).forEach(uc => {
-                        if (!embeddedUcNames.has(uc.name)) data.moduleSpecs[code].useCases.push(uc);
-                    });
-                    const embeddedBrNames = new Set((data.moduleSpecs[code].businessRules || []).map(br => br.name));
-                    (cached.businessRules || []).forEach(br => {
-                        if (!embeddedBrNames.has(br.name)) data.moduleSpecs[code].businessRules.push(br);
-                    });
-                    // Preserve user permissions edits
-                    if (cached.permissions) data.moduleSpecs[code].permissions = cached.permissions;
-                }
-            }
-
-            data.wireframeComments = parsed.wireframeComments || {};
-            data.specComments = parsed.specComments || {};
-            data.customRoles = parsed.customRoles || [];
-            data.customActions = parsed.customActions || [];
-            data.comments = parsed.comments || [];
-
-            // Update fingerprint
-            data._structureFingerprint = embeddedFingerprint;
-            autoSave();
-        }
-
-        // Restore editable fields
-        document.querySelectorAll('.editable[data-field]').forEach(el => {
-            const value = getNestedValue(data, 'cadrage.' + el.dataset.field);
-            if (value) el.textContent = value;
-        });
-    } catch (e) { console.error('Error loading saved data:', e); }
-}

package/templates/skills/business-analyse-html/html/src/scripts/09-export.js

@@ -1,138 +0,0 @@
-/* ============================================
-   EXPORT JSON
-   ============================================ */
-function collectEditableFields() {
-    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();
-        }
-    });
-}
-
-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();
-
-    const exportData = {
-        metadata: data.metadata,
-        cadrage: data.cadrage,
-        modules: data.modules,
-        dependencies: data.dependencies,
-        moduleSpecifications: buildModuleSpecsExport(),
-        consolidation: data.consolidation,
-        artifacts: EMBEDDED_ARTIFACTS,
-        wireframeComments: data.wireframeComments,
-        specComments: data.specComments,
-        customRoles: data.customRoles,
-        customActions: data.customActions,
-        comments: data.comments
-    };
-
-    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = (data.metadata.applicationId || 'analyse') + '-export.json';
-    a.click();
-    URL.revokeObjectURL(url);
-    showNotification('Export JSON téléchargé');
-}
-
-/* ============================================
-   SAVE REVIEW JSON (corrections for new version)
-   ============================================ */
-function detectChanges(original, current) {
-    const changes = { cadrage: false, modulesAdded: [], modulesRemoved: [], modulesModified: [], commentsCount: 0 };
-
-    // Cadrage changes
-    if (JSON.stringify(original.cadrage) !== JSON.stringify(current.cadrage)) {
-        changes.cadrage = true;
-    }
-
-    // Module changes
-    const origCodes = (original.modules || []).map(m => m.code);
-    const currCodes = (current.modules || []).map(m => m.code);
-    changes.modulesAdded = currCodes.filter(c => !origCodes.includes(c));
-    changes.modulesRemoved = origCodes.filter(c => !currCodes.includes(c));
-    currCodes.filter(c => origCodes.includes(c)).forEach(code => {
-        const origSpec = JSON.stringify(original.moduleSpecs?.[code] || {});
-        const currSpec = JSON.stringify(current.moduleSpecs?.[code] || {});
-        if (origSpec !== currSpec) changes.modulesModified.push(code);
-    });
-
-    // Comments count
-    changes.commentsCount = (current.comments || []).length;
-
-    return changes;
-}
-
-function saveReviewJSON() {
-    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;
-
-    const reviewData = {
-        _reviewMeta: {
-            sourceVersion: data.metadata.version || '1.0',
-            sourceApplicationId: data.metadata.applicationId || '',
-            exportedAt: new Date().toISOString(),
-            hasChanges: hasChanges,
-            changeSummary: {
-                cadrageModified: changes.cadrage,
-                modulesAdded: changes.modulesAdded,
-                modulesRemoved: changes.modulesRemoved,
-                modulesModified: changes.modulesModified,
-                commentsCount: changes.commentsCount
-            }
-        },
-        metadata: data.metadata,
-        cadrage: data.cadrage,
-        modules: data.modules,
-        dependencies: data.dependencies,
-        moduleSpecifications: buildModuleSpecsExport(),
-        consolidation: data.consolidation,
-        wireframeComments: data.wireframeComments,
-        specComments: data.specComments,
-        customRoles: data.customRoles,
-        customActions: data.customActions,
-        comments: data.comments
-    };
-
-    const blob = new Blob([JSON.stringify(reviewData, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'ba-review.json';
-    a.click();
-    URL.revokeObjectURL(url);
-    showNotification('ba-review.json téléchargé — sauvegardez-le à côté du HTML');
-}

package/templates/skills/business-analyse-html/html/src/scripts/10-comments.js

@@ -1,221 +0,0 @@
-/* ============================================
-   INLINE COMMENTS SYSTEM
-   ============================================ */
-
-/**
- * Comments are stored in data.comments[] with structure:
- * { id, sectionId, elementId, author, timestamp, content, status, category }
- *
- * - 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) {
-        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'));
-        var index = siblings.indexOf(card);
-        var elementId = getElementId(card, sectionId, index);
-        card.appendChild(createCommentUI(sectionId, elementId));
-    });
-
-    // 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);
-        var elementId = getElementId(item, listId, index);
-        item.appendChild(createCommentUI(listId, elementId));
-    });
-
-    // 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);
-        var elementId = getElementId(card, sectionId, index);
-        card.appendChild(createCommentUI(sectionId, elementId));
-    });
-
-    // Scope items
-    ['scopeInScope', 'scopeOutOfScope'].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';
-            var elementId = getElementId(item, containerId, index);
-            item.appendChild(createCommentUI(containerId, elementId));
-        });
-    });
-}
-
-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.elementId = elementId;
-
-    container.innerHTML = `
-        <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="${threadId}">
-            <div class="comment-items" id="comment-items-${sectionId}-${safeElId}">
-                ${renderCommentItems(sectionId, elementId)}
-            </div>
-            <div class="comment-add-form">
-                <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}', '${elementId.replace(/'/g, "\\'")}')">Ajouter</button>
-            </div>
-        </div>
-    `;
-
-    return container;
-}
-
-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, safeElId) {
-    const thread = document.getElementById('comment-thread-' + sectionId + '-' + safeElId);
-    if (thread) thread.classList.toggle('visible');
-}
-
-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(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);
-
-        return `
-            <div class="comment-item">
-                <div class="comment-avatar">${initials}</div>
-                <div class="comment-body">
-                    <div class="comment-meta">
-                        <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">${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>
-                    </div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-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,
-        elementId: elementId,
-        author: 'Utilisateur',
-        timestamp: new Date().toISOString(),
-        content: content,
-        status: 'to-review',
-        category: catEl.value
-    };
-
-    data.comments.push(comment);
-    textEl.value = '';
-
-    refreshCommentUI(sectionId, elementId);
-    renderReviewPanel();
-    autoSave();
-}
-
-function toggleCommentStatus(globalIndex) {
-    const comment = data.comments[globalIndex];
-    if (!comment) return;
-    comment.status = comment.status === 'validated' ? 'to-review' : 'validated';
-    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;
-    var sectionId = comment.sectionId;
-    var elId = comment.elementId || comment.cardIndex;
-    data.comments.splice(globalIndex, 1);
-    refreshCommentUI(sectionId, elId);
-    renderReviewPanel();
-    autoSave();
-}
-
-function refreshCommentUI(sectionId, elementId) {
-    var safeElId = String(elementId).replace(/[^a-zA-Z0-9_-]/g, '_');
-    // Update comment items
-    const itemsContainer = document.getElementById('comment-items-' + sectionId + '-' + safeElId);
-    if (itemsContainer) {
-        itemsContainer.innerHTML = renderCommentItems(sectionId, elementId);
-    }
-
-    // Update count badge
-    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) {
-            badge.textContent = count;
-            badge.className = 'comment-count' + (count === 0 ? ' empty' : '');
-        }
-    }
-}