@atlashub/smartstack-cli 4.80.0 → 5.0.0

package/templates/skills/business-analyse-html/html/src/scripts/11-review-panel.js

@@ -1,167 +0,0 @@
-/* ============================================
-   REVIEW PANEL
-   ============================================ */
-let reviewPanelOpen = false;
-let reviewFilter = 'all';
-
-function toggleReviewPanel() {
-    reviewPanelOpen = !reviewPanelOpen;
-    const panel = document.getElementById('reviewPanel');
-    const body = document.getElementById('appBody');
-    const btn = document.getElementById('reviewToggleBtn');
-
-    if (reviewPanelOpen) {
-        panel.classList.add('visible');
-        body.classList.add('review-open');
-        btn.classList.add('active');
-    } else {
-        panel.classList.remove('visible');
-        body.classList.remove('review-open');
-        btn.classList.remove('active');
-    }
-
-    renderReviewPanel();
-}
-
-function filterReviewComments(filter) {
-    reviewFilter = filter;
-    // Update active filter button
-    document.querySelectorAll('.review-filter-btn').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.filter === filter);
-    });
-    renderReviewPanel();
-}
-
-function renderReviewPanel() {
-    const comments = data.comments || [];
-
-    // Update header badge
-    const toReviewCount = comments.filter(c => c.status === 'to-review').length;
-    const badge = document.getElementById('reviewBadge');
-    if (badge) {
-        badge.textContent = toReviewCount;
-        badge.classList.toggle('hidden', toReviewCount === 0);
-    }
-
-    // Update stats
-    const totalEl = document.getElementById('reviewStatTotal');
-    const toReviewEl = document.getElementById('reviewStatToReview');
-    const validatedEl = document.getElementById('reviewStatValidated');
-    if (totalEl) totalEl.textContent = comments.length;
-    if (toReviewEl) toReviewEl.textContent = toReviewCount;
-    if (validatedEl) validatedEl.textContent = comments.filter(c => c.status === 'validated').length;
-
-    // Filter comments
-    let filtered = comments;
-    if (reviewFilter === 'to-review') {
-        filtered = comments.filter(c => c.status === 'to-review');
-    } else if (reviewFilter === 'validated') {
-        filtered = comments.filter(c => c.status === 'validated');
-    }
-
-    // Render comment list
-    const container = document.getElementById('reviewCommentsList');
-    if (!container) return;
-
-    if (filtered.length === 0) {
-        container.innerHTML = '<div class="review-empty">Aucun commentaire' +
-            (reviewFilter !== 'all' ? ' avec ce filtre' : '') + '.</div>';
-        return;
-    }
-
-    container.innerHTML = filtered.map(function(c, i) {
-        const globalIndex = data.comments.indexOf(c);
-        const sectionLabel = getSectionLabel(c.sectionId);
-        const date = c.timestamp ? new Date(c.timestamp).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' }) : '';
-        var elId = c.elementId || c.cardIndex;
-        var safeElId = String(elId).replace(/[^a-zA-Z0-9_-]/g, '_');
-
-        return `
-            <div class="review-comment-item" onclick="navigateToComment('${c.sectionId}', '${safeElId}')">
-                <div class="review-comment-section">${escapeHtml(sectionLabel)}</div>
-                <div class="review-comment-text">${escapeHtml(c.content)}</div>
-                <div class="review-comment-footer">
-                    <span class="review-comment-author">${escapeHtml(c.author || 'Utilisateur')} - ${escapeHtml(date)}</span>
-                    <div class="review-comment-actions">
-                        <button class="review-action-btn ${c.status === 'validated' ? 'reject' : 'validate'}"
-                            onclick="event.stopPropagation();toggleCommentStatus(${globalIndex})"
-                            title="${c.status === 'validated' ? 'Remettre à revoir' : 'Valider'}">
-                            ${c.status === 'validated' ? 'À revoir' : 'Valider'}
-                        </button>
-                        <button class="review-action-btn delete"
-                            onclick="event.stopPropagation();deleteComment(${globalIndex})"
-                            title="Supprimer">
-                            &#10005;
-                        </button>
-                    </div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-function getSectionLabel(sectionId) {
-    const labels = {
-        'cadrage-context': 'Contexte',
-        'cadrage-stakeholders': 'Parties prenantes',
-        'cadrage-scope': 'Périmètre',
-        'cadrage-success': 'Critères',
-        'decomp-modules': 'Domaines',
-        'decomp-dependencies': 'Dépendances',
-        'consol-interactions': 'Interactions',
-        'consol-permissions': 'Accès',
-        'consol-flows': 'Parcours',
-        'handoff-summary': 'Synthèse'
-    };
-    if (labels[sectionId]) return labels[sectionId];
-    if (sectionId.startsWith('module-spec-')) {
-        const code = sectionId.replace('module-spec-', '');
-        const mod = data.modules.find(m => m.code === code);
-        return mod ? mod.name : code;
-    }
-    // Handle module structure sections (module-struct-{code}-{section})
-    const structMatch = sectionId.match(/^module-struct-(.+?)-(.+)$/);
-    if (structMatch) {
-        const mod = data.modules.find(m => m.code === structMatch[1]);
-        const modName = mod ? mod.name : structMatch[1];
-        return modName + ' > Structure > ' + structMatch[2];
-    }
-    // Handle list-based sectionIds (ucList-*, brList-*, entList-*)
-    const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
-    if (listMatch) {
-        const tabLabels = { uc: 'Cas d\'utilisation', br: 'Règles métier', ent: 'Données' };
-        const mod = data.modules.find(m => m.code === listMatch[2]);
-        const modName = mod ? mod.name : listMatch[2];
-        return modName + ' > ' + (tabLabels[listMatch[1]] || listMatch[1]);
-    }
-    return sectionId;
-}
-
-function navigateToComment(sectionId, safeElId) {
-    // Handle list-based sectionIds (ucList-*, brList-*, entList-*) → navigate to module + tab
-    const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
-    if (listMatch) {
-        const [, tabType, moduleCode] = listMatch;
-        showSection('module-spec-' + moduleCode);
-        setTimeout(function() {
-            switchTab(moduleCode, tabType);
-            scrollToCommentThread(sectionId, safeElId);
-        }, 150);
-    } else {
-        showSection(sectionId);
-        scrollToCommentThread(sectionId, safeElId);
-    }
-}
-
-function scrollToCommentThread(sectionId, safeElId) {
-    setTimeout(function() {
-        const thread = document.getElementById('comment-thread-' + sectionId + '-' + safeElId);
-        if (thread && !thread.classList.contains('visible')) {
-            thread.classList.add('visible');
-        }
-        const container = document.querySelector('.comment-btn-container[data-section-id="' + sectionId + '"][data-element-id]');
-        if (container) {
-            container.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-    }, 100);
-}

package/templates/skills/business-analyse-html/html/src/scripts/12-render-diagrams.js

@@ -1,162 +0,0 @@
-/* ==========================================
-   MERMAID DIAGRAM RENDERING
-   Renders ERD, state machines, and sequence diagrams
-   from consolidation.mermaidDiagrams data.
-   ========================================== */
-
-function renderMermaidDiagrams() {
-    const data = window.FEATURE_DATA;
-    if (!data) return;
-
-    const diagrams = data.consolidation?.mermaidDiagrams;
-    if (!diagrams) return;
-
-    // 1. ERD in consol-datamodel (prepend before entity cards)
-    if (diagrams.erd) {
-        const erdContainer = document.getElementById('dataModelContainer');
-        if (erdContainer) {
-            const erdDiv = document.createElement('div');
-            erdDiv.className = 'diagram-container diagram-erd';
-            erdDiv.innerHTML =
-                '<div class="diagram-section-header">Diagramme Entit\u00e9-Relation (ERD)</div>' +
-                '<div class="mermaid">' + escapeHtml(diagrams.erd) + '</div>';
-            erdContainer.insertBefore(erdDiv, erdContainer.firstChild);
-        }
-    }
-
-    // 1b. MCD (Modèle Conceptuel de Données) — after ERD
-    if (diagrams.mcd) {
-        var erdContainer = document.getElementById('dataModelContainer');
-        if (erdContainer) {
-            var mcdDiv = document.createElement('div');
-            mcdDiv.className = 'diagram-container diagram-mcd';
-            mcdDiv.innerHTML =
-                '<div class="diagram-section-header" style="font-size:0.95rem;font-weight:600;color:var(--text-bright);margin-bottom:0.75rem;">Mod\u00e8le Conceptuel de Donn\u00e9es (MCD)</div>' +
-                '<div class="mermaid">' + escapeHtml(diagrams.mcd) + '</div>';
-            var erdDiv = erdContainer.querySelector('.diagram-erd');
-            if (erdDiv && erdDiv.nextSibling) {
-                erdContainer.insertBefore(mcdDiv, erdDiv.nextSibling);
-            } else {
-                erdContainer.appendChild(mcdDiv);
-            }
-        }
-    }
-
-    // 2. State machine diagrams — inject in module spec sections or consol-datamodel
-    if (diagrams.stateMachines && Object.keys(diagrams.stateMachines).length > 0) {
-        const smContainer = document.getElementById('dataModelContainer');
-        if (smContainer) {
-            const smSection = document.createElement('div');
-            smSection.innerHTML = '<div class="diagram-section-header">Cycles de vie (State Machines)</div>';
-
-            Object.entries(diagrams.stateMachines).forEach(function(entry) {
-                var entity = entry[0];
-                var def = entry[1];
-                var smDiv = document.createElement('div');
-                smDiv.className = 'diagram-container diagram-state-machine';
-                smDiv.innerHTML =
-                    '<h4>' + escapeHtml(entity) + '</h4>' +
-                    '<div class="mermaid">' + escapeHtml(def) + '</div>';
-                smSection.appendChild(smDiv);
-            });
-
-            smContainer.appendChild(smSection);
-        }
-    }
-
-    // 2b. Use Case diagrams — inject in each module's UC tab
-    if (diagrams.useCases && Object.keys(diagrams.useCases).length > 0) {
-        Object.entries(diagrams.useCases).forEach(function(entry) {
-            var moduleCode = entry[0];
-            var def = entry[1];
-            var ucTab = document.getElementById('tab-' + moduleCode + '-uc');
-            if (!ucTab) {
-                // Try kebab-case version
-                var kebab = moduleCode.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-                ucTab = document.getElementById('tab-' + kebab + '-uc');
-            }
-            if (ucTab) {
-                var ucDiagramDiv = document.createElement('div');
-                ucDiagramDiv.className = 'diagram-container diagram-usecase';
-                ucDiagramDiv.innerHTML =
-                    '<div class="diagram-section-header" style="font-size:0.95rem;font-weight:600;color:var(--text-bright);margin-bottom:0.75rem;">Diagramme de cas d\'utilisation</div>' +
-                    '<div class="mermaid">' + escapeHtml(def) + '</div>';
-                // Insert after the first paragraph (description text)
-                var firstP = ucTab.querySelector('p');
-                if (firstP && firstP.nextSibling) {
-                    ucTab.insertBefore(ucDiagramDiv, firstP.nextSibling);
-                } else {
-                    ucTab.insertBefore(ucDiagramDiv, ucTab.firstChild);
-                }
-            }
-        });
-    }
-
-    // 3. Sequence diagrams in consol-flows
-    if (diagrams.sequences && Object.keys(diagrams.sequences).length > 0) {
-        var flowsContainer = document.getElementById('consolFlowsContainer');
-        // Fallback: try the consol-flows section
-        if (!flowsContainer) {
-            var consolFlows = document.getElementById('consol-flows');
-            if (consolFlows) {
-                flowsContainer = consolFlows.querySelector('.section-body') || consolFlows;
-            }
-        }
-
-        if (flowsContainer) {
-            var seqSection = document.createElement('div');
-            seqSection.innerHTML = '<div class="diagram-section-header">Diagrammes de s\u00e9quence</div>';
-
-            Object.entries(diagrams.sequences).forEach(function(entry) {
-                var flowName = entry[0];
-                var def = entry[1];
-                var seqDiv = document.createElement('div');
-                seqDiv.className = 'diagram-container diagram-sequence';
-                seqDiv.innerHTML =
-                    '<h4>' + escapeHtml(flowName) + '</h4>' +
-                    '<div class="mermaid">' + escapeHtml(def) + '</div>';
-                seqSection.appendChild(seqDiv);
-            });
-
-            flowsContainer.appendChild(seqSection);
-        }
-    }
-
-    // 4. Render all mermaid elements
-    try {
-        if (typeof mermaid !== 'undefined' && mermaid.run) {
-            mermaid.run({ querySelector: '.mermaid' });
-        }
-    } catch (e) {
-        console.warn('Mermaid rendering failed:', e);
-        // Fallback: show raw text
-        document.querySelectorAll('.mermaid').forEach(function(el) {
-            if (!el.querySelector('svg')) {
-                el.style.whiteSpace = 'pre-wrap';
-                el.style.fontFamily = 'monospace';
-                el.style.fontSize = '0.85rem';
-                el.style.color = 'var(--text-muted)';
-            }
-        });
-    }
-}
-
-// Escape HTML for safe injection
-function escapeHtml(text) {
-    if (!text) return '';
-    // For mermaid content, we need to preserve the syntax
-    // Only escape actual HTML tags, not mermaid arrows
-    return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-
-// Auto-run after consolidation rendering
-(function() {
-    // Wait for DOM and other render functions to complete
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', function() {
-            setTimeout(renderMermaidDiagrams, 500);
-        });
-    } else {
-        setTimeout(renderMermaidDiagrams, 500);
-    }
-})();

package/templates/skills/business-analyse-html/html/src/styles/01-variables.css

@@ -1,38 +0,0 @@
-/* ============================================
-   DESIGN SYSTEM - SmartStack Business Analysis
-   ============================================ */
-:root {
-    --primary: #6366f1;
-    --primary-dark: #4f46e5;
-    --primary-light: #818cf8;
-    --secondary: #f97316;
-    --accent: #06b6d4;
-    --bg-dark: #0f172a;
-    --bg-card: #1e293b;
-    --bg-hover: #334155;
-    --bg-input: #151d2e;
-    --text: #b8c4d1;
-    --text-muted: #8a9bb0;
-    --text-bright: #e2e8f0;
-    --border: #334155;
-    --border-light: #475569;
-    --success: #22c55e;
-    --warning: #eab308;
-    --error: #ef4444;
-    --info: #3b82f6;
-    --sidebar-width: 280px;
-    --header-height: 52px;
-    --transition-fast: 0.15s ease;
-    --transition-normal: 0.3s ease;
-}
-
-* { margin: 0; padding: 0; box-sizing: border-box; }
-html { scroll-behavior: smooth; }
-
-body {
-    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
-    background: var(--bg-dark);
-    color: var(--text);
-    line-height: 1.7;
-    min-height: 100vh;
-}

package/templates/skills/business-analyse-html/html/src/styles/02-layout.css

@@ -1,216 +0,0 @@
-/* ============================================
-   LAYOUT
-   ============================================ */
-.app { display: flex; flex-direction: column; min-height: 100vh; }
-
-.header {
-    background: var(--bg-card);
-    border-bottom: 1px solid var(--border);
-    height: var(--header-height);
-    display: flex;
-    align-items: center;
-    padding: 0 1.5rem;
-    gap: 1rem;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-}
-
-.header-logo {
-    width: 32px; height: 32px;
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    border-radius: 6px;
-    display: flex; align-items: center; justify-content: center;
-    font-weight: 700; font-size: 0.85rem; color: #fff;
-    flex-shrink: 0;
-}
-
-.header-title { font-size: 1rem; font-weight: 600; color: var(--text-bright); }
-.header-sep { width: 1px; height: 24px; background: var(--border); }
-.header-app-name { font-size: 0.9rem; color: var(--primary-light); font-weight: 500; }
-.header-spacer { flex: 1; }
-
-.header-actions { display: flex; gap: 0.5rem; }
-
-.body { display: flex; flex: 1; }
-
-/* ============================================
-   SIDEBAR - Container
-   ============================================ */
-.sidebar {
-    width: var(--sidebar-width);
-    background: var(--bg-card);
-    border-right: 1px solid var(--border);
-    overflow-y: auto;
-    height: calc(100vh - var(--header-height));
-    position: sticky;
-    top: var(--header-height);
-    flex-shrink: 0;
-}
-
-.sidebar::-webkit-scrollbar { width: 4px; }
-.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-
-/* ============================================
-   MAIN CONTENT - FULL WIDTH
-   ============================================ */
-.main {
-    flex: 1;
-    padding: 2rem 3rem;
-    overflow-y: auto;
-    height: calc(100vh - var(--header-height));
-}
-
-.section { margin-bottom: 4rem; }
-.section-title {
-    font-size: 1.4rem;
-    color: var(--text-bright);
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid var(--primary);
-}
-.section-subtitle {
-    font-size: 0.9rem;
-    color: var(--text-muted);
-    margin-bottom: 1.5rem;
-}
-
-/* ============================================
-   RESPONSIVE
-   ============================================ */
-.hamburger-btn {
-    display: none;
-    background: none;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    color: var(--text);
-    font-size: 1.2rem;
-    padding: 0.2rem 0.5rem;
-    cursor: pointer;
-    flex-shrink: 0;
-}
-.sidebar-overlay {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.5);
-    z-index: 149;
-}
-.sidebar-overlay.visible { display: block; }
-
-@media (max-width: 768px) {
-    .hamburger-btn { display: block; }
-    .sidebar {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: 100vh;
-        z-index: 150;
-        box-shadow: 4px 0 24px rgba(0,0,0,0.3);
-    }
-    .sidebar.mobile-open { display: block; }
-    .main { padding: 1rem; }
-    .form-row { grid-template-columns: 1fr; }
-    .stakeholder-grid { grid-template-columns: 1fr; }
-    .module-grid { grid-template-columns: 1fr; }
-    .stat-grid { grid-template-columns: repeat(2, 1fr); }
-    .dm-entity-grid { grid-template-columns: 1fr; }
-    .mock-form-row { grid-template-columns: 1fr; }
-    .mock-kpi-grid { grid-template-columns: repeat(2, 1fr); }
-    .header-actions { gap: 0.25rem; }
-    .header-actions .btn-sm { padding: 0.2rem 0.4rem; font-size: 0.7rem; }
-    .header-title { display: none; }
-    .header-sep { display: none; }
-}
-
-/* ============================================
-   SEARCH
-   ============================================ */
-.sidebar-search {
-    padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid var(--border);
-}
-.sidebar-search input {
-    width: 100%;
-    padding: 0.4rem 0.6rem;
-    background: var(--bg-input);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    color: var(--text);
-    font-size: 0.8rem;
-    font-family: inherit;
-}
-.sidebar-search input:focus {
-    outline: none;
-    border-color: var(--primary);
-}
-.nav-item.search-hidden { display: none; }
-.nav-group.search-hidden { display: none; }
-.search-highlight { background: rgba(234,179,8,0.3); border-radius: 2px; }
-
-/* ============================================
-   PROGRESS INDICATOR
-   ============================================ */
-.progress-bar-container {
-    width: 100%;
-    height: 8px;
-    background: var(--bg-hover);
-    border-radius: 4px;
-    overflow: hidden;
-    margin-bottom: 0.5rem;
-}
-.progress-bar-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--primary), var(--success));
-    border-radius: 4px;
-    transition: width 0.5s ease;
-}
-.progress-label {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    margin-bottom: 0.75rem;
-}
-.progress-checks {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 0.3rem;
-}
-.progress-check {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-}
-.progress-check.done { color: var(--success); }
-.progress-check-icon { font-size: 0.9rem; width: 16px; text-align: center; }
-
-/* ============================================
-   PRINT
-   ============================================ */
-@media print {
-    .sidebar, .header-actions, .add-btn, .uc-actions, .inline-form, .module-card-remove, .hamburger-btn, .sidebar-search { display: none !important; }
-    .main { max-width: 100%; padding: 0.5cm; height: auto; overflow: visible; }
-    .body { display: block; }
-    .section { display: block !important; page-break-inside: avoid; margin-bottom: 1cm; }
-    .section + .section { page-break-before: auto; }
-    body { background: #fff !important; color: #1a1a1a !important; }
-    * { color-adjust: exact; -webkit-print-color-adjust: exact; }
-    .card, .uc-item, .br-item, .module-card, .entity-block, .interaction-item {
-        border-color: #ddd !important;
-        background: #fff !important;
-        color: #1a1a1a !important;
-    }
-    .card-label, .uc-detail-label, .section-subtitle, .form-label { color: #666 !important; }
-    .section-title { color: #1a1a1a !important; border-bottom-color: #333 !important; }
-    .tab-panel { display: block !important; page-break-inside: avoid; }
-    .tab-bar { display: none !important; }
-    .review-panel, .comment-btn-container, .notification, .wireframe-comment, [contenteditable] { display: none !important; }
-    .editable { border: none !important; padding: 0 !important; }
-    .header { position: static; background: #fff !important; border-bottom-color: #ddd !important; }
-    .header-logo { background: #333 !important; }
-    .header-title, .header-app-name { color: #1a1a1a !important; }
-    a { text-decoration: none !important; color: inherit !important; }
-}