@atlashub/smartstack-cli 3.39.0 → 3.41.0

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

@@ -1,166 +1,166 @@
-/* ============================================
-   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((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' }) : '';
-
-        return `
-            <div class="review-comment-item" onclick="navigateToComment('${c.sectionId}', ${c.cardIndex})">
-                <div class="review-comment-section">${sectionLabel}</div>
-                <div class="review-comment-text">${c.content}</div>
-                <div class="review-comment-footer">
-                    <span class="review-comment-author">${c.author || 'Utilisateur'} - ${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 a revoir' : 'Valider'}">
-                            ${c.status === 'validated' ? 'A 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': 'Perimetre',
-        'cadrage-risks': 'Risques',
-        'cadrage-success': 'Criteres',
-        'decomp-modules': 'Domaines',
-        'decomp-dependencies': 'Dependances',
-        'consol-interactions': 'Interactions',
-        'consol-permissions': 'Acces',
-        'consol-flows': 'Parcours',
-        'handoff-summary': 'Synthese'
-    };
-    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: 'Regles metier', ent: 'Donnees' };
-        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, cardIndex) {
-    // 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(() => {
-            switchTab(moduleCode, tabType);
-            scrollToCommentThread(sectionId, cardIndex);
-        }, 150);
-    } else {
-        showSection(sectionId);
-        scrollToCommentThread(sectionId, cardIndex);
-    }
-}
-
-function scrollToCommentThread(sectionId, cardIndex) {
-    setTimeout(() => {
-        const thread = document.getElementById('comment-thread-' + sectionId + '-' + cardIndex);
-        if (thread && !thread.classList.contains('visible')) {
-            thread.classList.add('visible');
-        }
-        const container = document.querySelector(`.comment-btn-container[data-section-id="${sectionId}"][data-card-index="${cardIndex}"]`);
-        if (container) {
-            container.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-    }, 100);
-}
+/* ============================================
+   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((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' }) : '';
+
+        return `
+            <div class="review-comment-item" onclick="navigateToComment('${c.sectionId}', ${c.cardIndex})">
+                <div class="review-comment-section">${sectionLabel}</div>
+                <div class="review-comment-text">${c.content}</div>
+                <div class="review-comment-footer">
+                    <span class="review-comment-author">${c.author || 'Utilisateur'} - ${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 a revoir' : 'Valider'}">
+                            ${c.status === 'validated' ? 'A 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': 'Perimetre',
+        'cadrage-risks': 'Risques',
+        'cadrage-success': 'Criteres',
+        'decomp-modules': 'Domaines',
+        'decomp-dependencies': 'Dependances',
+        'consol-interactions': 'Interactions',
+        'consol-permissions': 'Acces',
+        'consol-flows': 'Parcours',
+        'handoff-summary': 'Synthese'
+    };
+    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: 'Regles metier', ent: 'Donnees' };
+        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, cardIndex) {
+    // 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(() => {
+            switchTab(moduleCode, tabType);
+            scrollToCommentThread(sectionId, cardIndex);
+        }, 150);
+    } else {
+        showSection(sectionId);
+        scrollToCommentThread(sectionId, cardIndex);
+    }
+}
+
+function scrollToCommentThread(sectionId, cardIndex) {
+    setTimeout(() => {
+        const thread = document.getElementById('comment-thread-' + sectionId + '-' + cardIndex);
+        if (thread && !thread.classList.contains('visible')) {
+            thread.classList.add('visible');
+        }
+        const container = document.querySelector(`.comment-btn-container[data-section-id="${sectionId}"][data-card-index="${cardIndex}"]`);
+        if (container) {
+            container.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }, 100);
+}

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

@@ -1,38 +1,38 @@
-/* ============================================
-   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;
-}
+/* ============================================
+   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/src/styles/02-layout.css

@@ -1,101 +1,101 @@
-/* ============================================
-   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
-   ============================================ */
-@media (max-width: 768px) {
-    .sidebar { display: none; }
-    .main { padding: 1rem; }
-    .form-row { grid-template-columns: 1fr; }
-    .stakeholder-grid { grid-template-columns: 1fr; }
-}
-
-/* ============================================
-   PRINT
-   ============================================ */
-@media print {
-    .sidebar, .header-actions, .add-btn, .uc-actions, .inline-form, .module-card-remove { display: none !important; }
-    .main { max-width: 100%; padding: 0; }
-    .section { display: block !important; page-break-inside: avoid; }
-    body { background: #fff; color: #1a1a1a; }
-    .card, .uc-item, .br-item, .module-card, .entity-block, .interaction-item { border-color: #ddd; }
-    .tab-panel { display: block !important; }
-    .tab-bar { display: none; }
-    .review-panel, .comment-btn-container { display: none !important; }
-}
+/* ============================================
+   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
+   ============================================ */
+@media (max-width: 768px) {
+    .sidebar { display: none; }
+    .main { padding: 1rem; }
+    .form-row { grid-template-columns: 1fr; }
+    .stakeholder-grid { grid-template-columns: 1fr; }
+}
+
+/* ============================================
+   PRINT
+   ============================================ */
+@media print {
+    .sidebar, .header-actions, .add-btn, .uc-actions, .inline-form, .module-card-remove { display: none !important; }
+    .main { max-width: 100%; padding: 0; }
+    .section { display: block !important; page-break-inside: avoid; }
+    body { background: #fff; color: #1a1a1a; }
+    .card, .uc-item, .br-item, .module-card, .entity-block, .interaction-item { border-color: #ddd; }
+    .tab-panel { display: block !important; }
+    .tab-bar { display: none; }
+    .review-panel, .comment-btn-container { display: none !important; }
+}