Добавлена страница Summary

SQLLinter.CLI/Program.cs

@@ -56,14 +56,20 @@ namespace SQLLinter.CLI
 
             using (StreamReader reader = new StreamReader(@"C:\Users\frost\Downloads\Telegram Desktop\test.sql"))
             {
-                linter.Run("test.sql", reader.BaseStream);
-                diagramer.Run("test.sql", reader.BaseStream);
+                Dictionary<string, Stream> files = new Dictionary<string, Stream>
+                {
+                    { "test-qwewq-asdcxczc-asdsa -s--sadsasd-dsads-dsa-d-sd--dsa - 1.sql", reader.BaseStream },
+                    { "test-qwewq-asdcxczc-asdsa -s--sadsasd-dsads-dsa-d-sd--dsa - 2.sql", reader.BaseStream },
+
+                };
+                linter.Run(files);
+                //diagramer.Run("test.sql", reader.BaseStream);
             }
 
             //linter.Run(@"C:\Users\frost\Desktop\DISTR-2599\test.sql");
 
-            var formatter = new HtmlReportFormatter_v1();
-            var content = formatter.Format(rep.Violations, bpmn);
+            var formatter = new HtmlReportFormatter_v2();
+            var content = formatter.Format(rep.Violations, null);
 
             File.WriteAllText(@"C:\Users\frost\Downloads\Telegram Desktop\test.html", content);
         }

SQLLinter/Infrastructure/Reporters/HtmlMinifier.cs

@@ -5,6 +5,11 @@ public static class HtmlMinifier
 {
     public static string MinifyHtml(string html)
     {
+
+        var htmlMinifier = new WebMarkupMin.Core.HtmlMinifier();
+        var result = htmlMinifier.Minify(html, generateStatistics: true);
+        return result.MinifiedContent;
+
         if (string.IsNullOrEmpty(html))
             return html;
 

SQLLinter/Infrastructure/Reporters/IReportFormatter.cs

@@ -6,5 +6,5 @@ namespace SQLLinter.Infrastructure.Reporters;
 public interface IReportFormatter
 {
     string Format(List<IRuleViolation> violations);
-    string Format(List<IRuleViolation> violations, BpmnDiagram diagram);
+    string Format(List<IRuleViolation> violations, BpmnDiagram? diagram);
 }

SQLLinter/Infrastructure/Reporters/Static/HtmlFormatter.css

@@ -35,6 +35,7 @@
     --shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14);
     --shadow-16: 0 8px 16px rgba(0, 0, 0, 0.16);
     /* Spacing */
+    --spacing-xxs: 1px;
     --spacing-xs: 4px;
     --spacing-sm: 8px;
     --spacing-md: 12px;
@@ -49,6 +50,7 @@
     --border-radius-xlarge: 8px;
     /* Typography */
     --font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
+    --font-size-xxs: 10px;
     --font-size-xs: 12px;
     --font-size-sm: 13px;
     --font-size-md: 14px;
@@ -445,13 +447,47 @@ td.description {
     display: flex;
     gap: var(--spacing-xs);
     overflow-x: auto;
+    overflow-y: hidden;
     scrollbar-width: thin;
     padding: var(--spacing-xs) 0;
+    cursor: grab;
+    scroll-behavior: smooth;
+    flex-wrap: nowrap;
+    width: 100%;
+    -webkit-overflow-scrolling: touch; /* Для плавного скролла на iOS */
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-touch-callout: none;
+    /*white-space: nowrap;*/
+    height: auto; /* Автоматическая высота */
+    min-height: 50px; /* Минимальная высота */
+}
+    .tabs:active {
+        cursor: grabbing;
+    }
+
+    .tabs::-webkit-scrollbar {
+        height: 6px;
+    }
+
+    .tabs::-webkit-scrollbar-track {
+        background: var(--color-background-neutral);
+        border-radius: var(--border-radius-medium);
+    }
+
+    .tabs::-webkit-scrollbar-thumb {
+        background: var(--color-border-strong);
+        border-radius: var(--border-radius-medium);
+    }
+        .tabs::-webkit-scrollbar-thumb:hover {
+            background: var(--color-text-tertiary);
         }
 
 .tab {
     position: relative;
-    padding: var(--spacing-md) var(--spacing-lg);
+    padding: var(--spacing-sm) var(--spacing-md);
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
@@ -460,14 +496,23 @@ td.description {
     font-size: var(--font-size-md);
     font-weight: 600;
     cursor: pointer;
-    white-space: nowrap;
+    white-space: normal; /* Изменено с nowrap на normal */
     transition: color var(--transition-medium), background-color var(--transition-medium), border-color var(--transition-medium), transform var(--transition-medium);
     border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
-    min-height: 44px;
+    min-height: auto;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items: flex-start; /* Важно: flex-start вместо center */
     z-index: 1002;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    justify-content: space-between;
+    flex-shrink: 0;
+    max-width: 300px; /* Ограничиваем максимальную ширину */
+    min-width: 150px; /* Минимальная ширина для читаемости */
+    text-align: left;
+    line-height: 1.4;
 }
 
     .tab:hover {
@@ -481,25 +526,217 @@ td.description {
         background-color: var(--color-background-neutral);
     }
 
-.tab-badge {
+.tab-inner {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+    min-width: 0; /* Важно для работы text-overflow */
+    gap: 8px;
+}
+
+.tab-counters {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-left: 8px;
+    justify-content: flex-start;
+    align-items: flex-end;
+    flex-shrink: 0;
+    min-height: 32px; /* Минимальная высота для трех счетчиков с отступами */
+}
+
+.tab-counter {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 20px;
-    height: 20px;
-    padding: 0 var(--spacing-xs);
-    margin-left: var(--spacing-xs);
-    font-size: var(--font-size-xs);
-    font-weight: 600;
-    background-color: var(--color-background-neutral-dark);
-    color: var(--color-text-secondary);
-    border-radius: 10px;
-    transition: background-color var(--transition-fast), color var(--transition-fast);
+    min-width: 16px;
+    height: 16px;
+    padding: 0 var(--spacing-xxs);
+    font-size: var(--font-size-xxs);
+    font-weight: 400;
+    border-radius: var(--border-radius-small);
+    text-align: center;
+    color: white;
+    line-height: 1;
+    border: 1px solid var(--color-border);
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+    box-sizing: border-box;
 }
 
-.tab.active .tab-badge {
-    background-color: var(--color-primary);
-    color: #ffffff;
+    .tab-counter.empty {
+        background-color: transparent !important;
+        color: transparent !important;
+        border-style: dashed !important;
+        opacity: 0.5;
+        cursor: default;
+        box-shadow: none !important;
+        text-shadow: none !important;
+        background-image: none !important;
+    }
+
+    /* Цветные пунктирные границы для пустых счетчиков */
+    .tab-counter.critical.empty {
+        border-color: var(--color-critical) !important;
+    }
+
+    .tab-counter.warning.empty {
+        border-color: var(--color-warning) !important;
+    }
+
+    .tab-counter.info.empty {
+        border-color: var(--color-info) !important;
+    }
+
+    .tab-counter.critical:not(.empty) {
+        background-color: var(--color-critical-bg);
+        color: var(--color-critical);
+        border-color: var(--color-critical);
+    }
+
+    .tab-counter.warning:not(.empty) {
+        background-color: var(--color-warning-bg);
+        color: var(--color-warning);
+        border-color: var(--color-warning);
+    }
+
+    .tab-counter.info:not(.empty) {
+        background-color: var(--color-info-bg);
+        color: var(--color-info);
+        border-color: var(--color-info);
+    }
+
+/* При наведении на таб не менять стили пустых счетчиков */
+.tab:hover .tab-counter.empty {
+    background-color: transparent !important;
+    color: transparent !important;
+    opacity: 0.5;
+}
+
+/* Активный таб тоже не должен влиять на пустые счетчики */
+.tab.active .tab-counter.empty {
+    background-color: transparent !important;
+    color: transparent !important;
+    opacity: 0.5;
+}
+
+/* Сохраняем прозрачный текст для пустых счетчиков */
+.tab-counter.empty::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+}
+
+.tab-text {
+    display: block;
+    overflow-wrap: break-word; /* Используем вместо word-break */
+    word-wrap: break-word; /* Для старых браузеров */
+    hyphens: auto; /* Автоматическое добавление переносов */
+    text-align: left;
+    line-height: 1.3;
+    white-space: normal;
+    flex-grow: 1;
+    min-width: 0;
+    word-break: break-word; /* Разрешаем разрыв длинных слов */
+    max-height: 2.8em; /* Примерно 2 строки текста */
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* Ограничиваем 2 строками */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Адаптивные стили для мобильных */
+@media (max-width: 768px) {
+    .tab {
+        padding: 8px 10px;
+        font-size: 13px;
+        min-width: 120px;
+        max-width: 200px;
+    }
+
+    .tab-text {
+        font-size: 13px;
+        line-height: 1.2;
+    }
+
+    .tab-counters {
+        margin-left: 8px;
+        gap: 2px;
+        min-height: 55px; /* Немного меньше для мобильных */
+    }
+
+    .tab-counter {
+        min-width: 18px;
+        height: 18px;
+        font-size: 10px;
+        padding: 0 4px;
+    }
+        .tab-counter.empty {
+            opacity: 0.2;
+        }
+}
+
+@media (max-width: 480px) {
+    .tab {
+        padding: 6px 8px;
+        font-size: 12px;
+        min-width: 100px;
+        max-width: 160px;
+    }
+
+    .tab-text {
+        font-size: 12px;
+        max-height: 2.4em;
+    }
+
+    .tab-counters {
+        margin-left: 6px;
+        gap: 1px;
+        min-height: 50px;
+    }
+
+    .tab-counter {
+        min-width: 16px;
+        height: 16px;
+        font-size: 9px;
+        padding: 0 3px;
+    }
+        .tab-counter.empty {
+            border-width: 1px !important; /* Уменьшаем толщину границы */
+        }
+}
+
+/* Усилить видимость пунктирных границ на темных темах */
+@media (prefers-color-scheme: dark) {
+    .tab-counter.empty {
+        opacity: 0.7;
+    }
+
+    .tab-counter.critical.empty {
+        border-color: var(--color-critical) !important;
+    }
+
+    .tab-counter.warning.empty {
+        border-color: var(--color-warning) !important;
+    }
+
+    .tab-counter.info.empty {
+        border-color: var(--color-info) !important;
+    }
+}
+
+/* Усилить видимость пунктирных границ при наведении на таб */
+.tab:hover .tab-counter.empty {
+    opacity: 0.8;
+    border-style: dashed !important;
+}
+
+/* Активный таб - усилить видимость */
+.tab.active .tab-counter.empty {
+    opacity: 0.8;
 }
 
 /* ---------------------------------------------------------
@@ -1208,3 +1445,237 @@ svg .flowchart-link {
 * {
     -webkit-tap-highlight-color: transparent;
 }
+
+
+/* Summary page styles */
+.summary-section {
+    margin: var(--spacing-xl) var(--spacing-xxxl);
+    padding: var(--spacing-xl);
+    background-color: var(--color-background);
+    border-radius: var(--border-radius-large);
+    box-shadow: var(--shadow-4);
+    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
+}
+
+    .summary-section:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-8);
+    }
+
+.summary-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--spacing-xl);
+    padding-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.summary-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.summary-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-xl);
+}
+
+.stat-card {
+    padding: var(--spacing-lg);
+    border-radius: var(--border-radius-medium);
+    background-color: var(--color-background-alt);
+    border: 1px solid var(--color-border);
+    transition: all var(--transition-medium);
+}
+
+    .stat-card:hover {
+        transform: translateY(-4px);
+        box-shadow: var(--shadow-8);
+    }
+
+    .stat-card.critical {
+        border-top: 4px solid var(--color-critical);
+    }
+
+    .stat-card.warning {
+        border-top: 4px solid var(--color-warning);
+    }
+
+    .stat-card.info {
+        border-top: 4px solid var(--color-info);
+    }
+
+    .stat-card.success {
+        border-top: 4px solid var(--color-success);
+    }
+
+.stat-value {
+    font-size: var(--font-size-xxxl);
+    font-weight: 700;
+    margin-bottom: var(--spacing-xs);
+    line-height: 1;
+}
+
+.stat-label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    margin-bottom: var(--spacing-xs);
+}
+
+.stat-change {
+    font-size: var(--font-size-xs);
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+    .stat-change.positive {
+        color: var(--color-success);
+    }
+
+    .stat-change.negative {
+        color: var(--color-critical);
+    }
+
+.files-overview {
+    margin-top: var(--spacing-xxl);
+}
+
+.files-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.file-card {
+    padding: var(--spacing-lg);
+    border-radius: var(--border-radius-medium);
+    background-color: var(--color-background-alt);
+    border: 1px solid var(--color-border);
+    transition: all var(--transition-medium);
+    display: flex;
+    flex-direction: column;
+}
+
+    .file-card:hover {
+        transform: translateY(-4px);
+        box-shadow: var(--shadow-8);
+    }
+
+.file-card-header {
+    display: flex;
+    align-items: flex-start; /* Change from center to flex-start */
+    justify-content: space-between;
+    margin-bottom: var(--spacing-md);
+    gap: var(--spacing-sm); /* Add gap between name and badges */
+}
+
+
+.file-name-small {
+    font-weight: 600;
+    color: var(--color-text-primary);
+    /* Remove truncation properties */
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal; /* Change from nowrap to normal */
+    word-wrap: break-word;
+    word-break: break-word;
+    flex: 1;
+    line-height: 1.4;
+    max-height: none; /* Remove max-height if exists */
+    display: block; /* Change from -webkit-box */
+    -webkit-line-clamp: unset; /* Remove line clamp */
+    -webkit-box-orient: unset;
+}
+
+.file-violations {
+    display: flex;
+    gap: var(--spacing-xs);
+    justify-content: flex-end;
+    flex-shrink: 0;
+    align-items: flex-start; /* Align badges to top */
+}
+
+.violation-badge {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xxs) var(--spacing-xs);
+    border-radius: var(--border-radius-small);
+    font-weight: 600;
+}
+
+    .violation-badge.critical {
+        background-color: var(--color-critical-bg);
+        color: var(--color-critical);
+        border: 1px solid var(--color-critical);
+    }
+
+    .violation-badge.warning {
+        background-color: var(--color-warning-bg);
+        color: var(--color-warning);
+        border: 1px solid var(--color-warning);
+    }
+
+    .violation-badge.info {
+        background-color: var(--color-info-bg);
+        color: var(--color-info);
+        border: 1px solid var(--color-info);
+    }
+
+.progress-bar {
+    height: 8px;
+    background-color: var(--color-background-neutral);
+    border-radius: var(--border-radius-small);
+    overflow: hidden;
+    margin-top: var(--spacing-md);
+    display: flex; /* Изменено с block на flex */
+}
+
+.progress-fill {
+    height: 100%;
+    transition: width var(--transition-medium);
+    flex-shrink: 0; /* Предотвращает сжатие */
+}
+
+    .progress-fill.critical {
+        background-color: var(--color-critical);
+        order: 1;
+    }
+
+    .progress-fill.warning {
+        background-color: var(--color-warning);
+        order: 2;
+    }
+
+    .progress-fill.info {
+        background-color: var(--color-info);
+        order: 3;
+    }
+
+@media (max-width: 768px) {
+    .summary-section {
+        margin: var(--spacing-lg);
+        padding: var(--spacing-lg);
+    }
+
+    .summary-stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .files-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 480px) {
+    .summary-stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stat-value {
+        font-size: var(--font-size-xxl);
+    }
+}

SQLLinter/Infrastructure/Reporters/Static/HtmlFormatter.js

@@ -23,6 +23,7 @@ class ReportRenderer {
 
     init() {
         this.renderTabs();
+        this.setupTabsDragScroll();
         this.renderFileReports();
         this.setupTabNavigation();
         this.activateTab(0);
@@ -34,33 +35,162 @@ class ReportRenderer {
 
         this.tabsList.innerHTML = '';
 
-        // Табы для файлов
+        //Add file tabs
         this.files.forEach((file, index) => {
             const tab = document.createElement('button');
             tab.className = `tab ${index === 0 ? 'active' : ''}`;
             tab.dataset.target = `file_${index}`;
             tab.dataset.index = index;
 
-            const total = (file.v.c?.length || 0) + (file.v.w?.length || 0) + (file.v.i?.length || 0);
+            // Подсчет нарушений по типам
+            const criticalCount = file.v.c?.length || 0;
+            const warningCount = file.v.w?.length || 0;
+            const infoCount = file.v.i?.length || 0;
+
+            // Создание HTML с раздельными счетчиками
+            const countersHTML = `
+                <div class="tab-counters">
+                    <span class="tab-counter critical ${criticalCount === 0 ? 'empty' : ''}" title="${criticalCount} critical">${criticalCount || ''}</span>
+                    <span class="tab-counter warning ${warningCount === 0 ? 'empty' : ''}" title="${warningCount} warning">${warningCount || ''}</span>
+                    <span class="tab-counter info ${infoCount === 0 ? 'empty' : ''}" title="${infoCount} info">${infoCount || ''}</span>
+                </div>
+            `;
 
             tab.innerHTML = `
-                ${this.escapeHtml(file.n)}
-                <span class="tab-badge">${total}</span>
+                <div class="tab-inner">
+                    <span class="tab-text" title="${this.escapeHtml(file.n)}">${this.escapeHtml(file.n)}</span>
+                    ${countersHTML}
+                </div>
             `;
 
             this.tabsList.appendChild(tab);
         });
 
-        // Таб для диаграммы (если есть)
+        // Add Summary tab
+        const summaryTab = document.createElement('button');
+        summaryTab.className = 'tab';
+        summaryTab.dataset.target = 'summary_report';
+        summaryTab.innerHTML = `<div class="tab-inner"><span class="tab-text">Summary</span></div>`;
+        tabsList.appendChild(summaryTab);
+
+        //Add diagram tab if exists
         if (this.diagram.h || this.diagram.hasDiagram) {
             const diagramTab = document.createElement('button');
             diagramTab.className = 'tab';
             diagramTab.dataset.target = 'mermaid';
-            diagramTab.textContent = 'Диаграмма';
+            // Создаем пустые счетчики для диаграммы
+
+            diagramTab.innerHTML = `
+                <div class="tab-inner">
+                    <span class="tab-text">Диаграмма</span>
+                </div>
+            `;
+
             tabsList.appendChild(diagramTab);
         }
     }
 
+    // Drag-to-scroll для табов
+    setupTabsDragScroll() {
+        const tabs = document.querySelector('.tabs');
+        if (!tabs) return;
+
+        let isDown = false;
+        let startX;
+        let scrollLeft;
+        let lastTimestamp = 0;
+        const SCROLL_SPEED = 1.5;
+        const FRAME_TIME = 16; // ~60 FPS
+
+        // Улучшенная прокрутка колесиком
+        tabs.addEventListener('wheel', (e) => {
+            if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+                e.preventDefault();
+
+                const now = Date.now();
+                if (now - lastTimestamp < FRAME_TIME) return; // Ограничиваем частоту
+
+                lastTimestamp = now;
+
+                // Плавная прокрутка с инерцией
+                tabs.style.scrollBehavior = 'auto';
+                const currentScroll = tabs.scrollLeft;
+                const targetScroll = currentScroll + e.deltaY * SCROLL_SPEED;
+
+                // Используем requestAnimationFrame для плавности
+                const animateScroll = () => {
+                    const diff = targetScroll - tabs.scrollLeft;
+                    const step = diff * 0.3; // Эффект плавного замедления
+
+                    tabs.scrollLeft += step;
+
+                    if (Math.abs(diff) > 0.5) {
+                        requestAnimationFrame(animateScroll);
+                    }
+                };
+
+                animateScroll();
+            }
+        }, { passive: false });
+
+        // Улучшенный drag-scroll
+        const startDrag = (clientX) => {
+            isDown = true;
+            tabs.style.cursor = 'grabbing';
+            tabs.style.scrollBehavior = 'auto';
+            startX = clientX - tabs.getBoundingClientRect().left;
+            scrollLeft = tabs.scrollLeft;
+        };
+
+        const endDrag = () => {
+            isDown = false;
+            tabs.style.cursor = 'grab';
+        };
+
+        const doDrag = (clientX) => {
+            if (!isDown) return;
+
+            const x = clientX - tabs.getBoundingClientRect().left;
+            const walk = (x - startX) * 2;
+
+            // Плавное обновление позиции
+            requestAnimationFrame(() => {
+                tabs.scrollLeft = scrollLeft - walk;
+            });
+        };
+
+        // Мышь
+        tabs.addEventListener('mousedown', (e) => {
+            if (e.button !== 0) return; // Только левая кнопка
+            startDrag(e.clientX);
+        });
+
+        tabs.addEventListener('mouseleave', endDrag);
+        tabs.addEventListener('mouseup', endDrag);
+
+        tabs.addEventListener('mousemove', (e) => {
+            if (!isDown) return;
+            e.preventDefault();
+            doDrag(e.clientX);
+        });
+
+        // Сенсорные устройства
+        tabs.addEventListener('touchstart', (e) => {
+            if (e.touches.length === 1) {
+                startDrag(e.touches[0].clientX);
+            }
+        }, { passive: true });
+
+        tabs.addEventListener('touchend', endDrag);
+        tabs.addEventListener('touchcancel', endDrag);
+
+        tabs.addEventListener('touchmove', (e) => {
+            if (!isDown || e.touches.length !== 1) return;
+            e.preventDefault();
+            doDrag(e.touches[0].clientX);
+        }, { passive: false });
+    }
+
     renderFileReports() {
         const container = document.getElementById('reports-container');
         if (!container) return;
@@ -148,6 +278,8 @@ class ReportRenderer {
 
             this.reportsContainer.appendChild(diagramDiv);
         }
+
+        this.renderSummaryReport();
     }
 
     createViolationSection(severity, violations) {
@@ -189,7 +321,7 @@ class ReportRenderer {
         section.innerHTML = `
             <div class="severity-header">
                 <div class="severity-title">
-                    <h3>${severityTitle}</h3>
+                    <h2>${severityTitle}</h2>
                     <span class="severity-count">${violations.length}</span>
                 </div>
             </div>
@@ -258,9 +390,156 @@ class ReportRenderer {
     }
 
     calculateTotalViolations(file) {
-        return (file.criticalViolations?.length || 0) +
-            (file.warningViolations?.length || 0) +
-            (file.infoViolations?.length || 0);
+        return (file.v.c?.length || 0) + (file.v.w?.length || 0) + (file.v.i?.length || 0);
+    }
+
+    renderSummaryReport() {
+        const summaryDiv = document.createElement('div');
+        summaryDiv.id = 'summary_report';
+        summaryDiv.className = 'file-report';
+        summaryDiv.style.display = 'none';
+
+        // Calculate total statistics
+        let totalCritical = 0;
+        let totalWarning = 0;
+        let totalInfo = 0;
+        let totalFiles = this.files.length;
+
+        this.files.forEach(file => {
+            totalCritical += file.v.c?.length || 0;
+            totalWarning += file.v.w?.length || 0;
+            totalInfo += file.v.i?.length || 0;
+        });
+
+        const totalViolations = totalCritical + totalWarning + totalInfo;
+
+        // Calculate percentages for progress bars - FIXED
+        let criticalPercent = totalViolations > 0 ? (totalCritical / totalViolations * 100) : 0;
+        let warningPercent = totalViolations > 0 ? (totalWarning / totalViolations * 100) : 0;
+        let infoPercent = totalViolations > 0 ? (totalInfo / totalViolations * 100) : 0;
+
+        // Ensure sum equals 100%
+        const totalPercent = criticalPercent + warningPercent + infoPercent;
+        if (totalPercent > 0 && Math.abs(totalPercent - 100) > 0.01) {
+            // Adjust the largest segment to make sum = 100%
+            const maxVal = Math.max(criticalPercent, warningPercent, infoPercent);
+            if (maxVal === criticalPercent) {
+                criticalPercent = 100 - warningPercent - infoPercent;
+            } else if (maxVal === warningPercent) {
+                warningPercent = 100 - criticalPercent - infoPercent;
+            } else {
+                infoPercent = 100 - criticalPercent - warningPercent;
+            }
+        }
+
+        // Format for display
+        const criticalPercentDisplay = criticalPercent.toFixed(1);
+        const warningPercentDisplay = warningPercent.toFixed(1);
+        const infoPercentDisplay = infoPercent.toFixed(1);
+
+        summaryDiv.innerHTML = `
+        <div class="file-title-container">
+            <div class="file-title">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9 17H7V10H9V17ZM13 12H11V17H13V12ZM17 7H15V17H17V7ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span class="file-name">Сводный отчет</span>
+            </div>
+        </div>
+        <div class="summary-section">
+            <div class="summary-header">
+                <div class="summary-title">
+                    <h2>Общая статистика</h2>
+                </div>
+            </div>
+            <div class="summary-stats-grid">
+                <div class="stat-card success">
+                    <div class="stat-value">${totalFiles}</div>
+                    <div class="stat-label">Всего файлов</div>
+                </div>
+                <div class="stat-card critical">
+                    <div class="stat-value">${totalCritical}</div>
+                    <div class="stat-label">Critical нарушений</div>
+                </div>
+                <div class="stat-card warning">
+                    <div class="stat-value">${totalWarning}</div>
+                    <div class="stat-label">Warning нарушений</div>
+                </div>
+                <div class="stat-card info">
+                    <div class="stat-value">${totalInfo}</div>
+                    <div class="stat-label">Info нарушений</div>
+                </div>
+            </div>
+            <div class="violation-distribution" style="margin-top: var(--spacing-xl);">
+                <div class="progress-bar">
+                    <div class="progress-fill critical" style="width: ${criticalPercent}%"></div>
+                    <div class="progress-fill warning" style="width: ${warningPercent}%"></div>
+                    <div class="progress-fill info" style="width: ${infoPercent}%"></div>
+                </div>
+                <div style="display: flex; justify-content: space-between; margin-top: var(--spacing-sm); font-size: var(--font-size-xs);">
+                    <span>Critical: ${totalCritical} (${criticalPercentDisplay}%)</span>
+                    <span>Warning: ${totalWarning} (${warningPercentDisplay}%)</span>
+                    <span>Info: ${totalInfo} (${infoPercentDisplay}%)</span>
+                </div>
+            </div>
+        </div>
+        <div class="summary-section files-overview">
+            <div class="summary-header">
+                <div class="summary-title">
+                    <h2>Статистика файлов</h2>
+                    <span class="severity-count">${totalFiles}</span>
+                </div>
+            </div>
+            <div class="files-grid">
+                ${this.files.map(file => {
+            const critical = file.v.c?.length || 0;
+            const warning = file.v.w?.length || 0;
+            const info = file.v.i?.length || 0;
+            const total = critical + warning + info;
+
+            // Calculate percentages for file progress bar - FIXED
+            let fileCriticalPercent = total > 0 ? (critical / total * 100) : 0;
+            let fileWarningPercent = total > 0 ? (warning / total * 100) : 0;
+            let fileInfoPercent = total > 0 ? (info / total * 100) : 0;
+
+            // Ensure sum equals 100%
+            const fileTotalPercent = fileCriticalPercent + fileWarningPercent + fileInfoPercent;
+            if (fileTotalPercent > 0 && Math.abs(fileTotalPercent - 100) > 0.01) {
+                // Adjust the largest segment to make sum = 100%
+                const maxVal = Math.max(fileCriticalPercent, fileWarningPercent, fileInfoPercent);
+                if (maxVal === fileCriticalPercent) {
+                    fileCriticalPercent = 100 - fileWarningPercent - fileInfoPercent;
+                } else if (maxVal === fileWarningPercent) {
+                    fileWarningPercent = 100 - fileCriticalPercent - fileInfoPercent;
+                } else {
+                    fileInfoPercent = 100 - fileCriticalPercent - fileWarningPercent;
+                }
+            }
+
+            return `<div class="file-card">
+                            <div class="file-card-header">
+                                <span class="file-name-small" title="${this.escapeHtml(file.n)}">${this.escapeHtml(file.n)}</span>
+                            </div>
+                            <div class="progress-bar">
+                                <div class="progress-fill critical" style="width: ${fileCriticalPercent}%"></div>
+                                <div class="progress-fill warning" style="width: ${fileWarningPercent}%"></div>
+                                <div class="progress-fill info" style="width: ${fileInfoPercent}%"></div>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-xs); font-size: var(--font-size-xs);">
+                                <span>Total: ${total}</span>
+                                <div class="file-violations">
+                                    <span class="violation-badge critical" title="${critical} critical">${critical}</span>
+                                    <span class="violation-badge warning" title="${warning} warning">${warning}</span>
+                                    <span class="violation-badge info" title="${info} info">${info}</span>
+                                </div>
+                            </div>
+                    </div>`;
+            }).join('')}
+            </div>
+        </div>
+        `;
+
+        this.reportsContainer.appendChild(summaryDiv);
     }
 
     escapeHtml(text) {
@@ -319,8 +598,10 @@ function initTabs(onTabActivated) {
                 top: ${y - size / 2}px;
             `;
 
+            /*
             tab.style.position = 'relative';
             tab.style.overflow = 'hidden';
+            */
             tab.appendChild(ripple);
 
             setTimeout(() => {

SQLLinter/SQLLinter.csproj

@@ -28,7 +28,8 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.SqlServer.TransactSql.ScriptDom" Version="170.128.0" />
+    <PackageReference Include="Microsoft.SqlServer.TransactSql.ScriptDom" Version="170.147.0" />
+    <PackageReference Include="WebMarkupMin.Core" Version="2.20.1" />
   </ItemGroup>
 
 </Project>