refactor(ui): блочный дизайн + LLM-отчёт с цветовой индикацией

dashboard:
- Убран: severity ratio bar, Top Rules Triggered, Most Flagged Packages
- Заменены 6 stat-карточек на компактную stat-minibar
- 2-колоночная сетка: heatmap + Latest Flagged (с красной рамкой)
- Таблицы сжаты (.compact)

findings (scan/package detail):
- Findings всегда раскрыты как блоки (.finding-block)
- Убран accordion (details/summary) и toggle-all кнопка
- Код в тёмном блоке, кнопка Copy сверху

LLM-отчёт:
- Цветовая индикация по вердикту:
  - safe       → зелёный badge, зелёная рамка, лёгкий зелёный фон
  - suspicious → жёлтый badge, жёлтая рамка, лёгкий жёлтый фон
  - malicious  → красный badge, красная рамка, лёгкий красный фон
- Бейдж с вердиктом + severity rating в хедере
- Summary курсивом, analysis с pre-line для абзацев

Скан-инфо:
- scan-info-block с grid-раскладкой (8 полей)
- SHA256 компактным шрифтом
- Блок ошибки скана отдельно выделен

CSS:
- Удалены: .stats-grid, .stat-card, .severity-bar*, .top-rules-chart*,
  .finding-card*, .finding-details, .finding-header-row, .finding-summary-hint
- Добавлены: .stat-minibar, .dashboard-grid, .dash-block, .scan-info-*,
  .finding-block, .llm-{safe,suspicious,malicious}, .llm-badge-*,
  table.compact
- app.js: удалён toggleFindings()

guarddog_nexus/web/static/app.js

@@ -1,16 +1,5 @@
 // GuardDog Nexus — shared UI utilities
 
-function toggleFindings() {
-    var container = document.getElementById('findings-container');
-    if (!container) return;
-    var details = container.querySelectorAll('details');
-    if (details.length === 0) return;
-    var isOpen = details[0].open;
-    details.forEach(function (d) { d.open = !isOpen; });
-    var btn = document.querySelector('.toggle-all-btn');
-    if (btn) btn.textContent = isOpen ? 'Expand All' : 'Collapse All';
-}
-
 function copyCode(btn, codeId) {
     var el = document.getElementById(codeId);
     if (!el) return;

guarddog_nexus/web/static/style.css

@@ -1,130 +1,71 @@
 /* GuardDog Nexus — Web UI styles */
 
-/* Status badges */
+/* ------------------------------------------------------------------ */
-.flagged {
+/* Status / severity colours                                           */
-    color: var(--pico-color-red-400);
+/* ------------------------------------------------------------------ */
-    font-weight: bold;
+.flagged           { color: var(--pico-color-red-400); font-weight: bold; }
-}
+.clean             { color: var(--pico-color-green-400); }
 
-.clean {
+.status-pending    { color: var(--pico-color-yellow-400); }
-    color: var(--pico-color-green-400);
+.status-scanning   { color: var(--pico-color-blue-400); animation: pulse 1.5s ease-in-out infinite; }
-}
+.status-completed  { color: var(--pico-color-green-400); }
+.status-failed     { color: var(--pico-color-red-400); }
 
-.status-pending {
+.severity-WARNING  { color: var(--pico-color-yellow-400); }
-    color: var(--pico-color-yellow-400);
+.severity-ERROR    { color: var(--pico-color-red-400); }
-}
 
-.status-scanning {
+/* ------------------------------------------------------------------ */
-    color: var(--pico-color-blue-400);
+/* Dashboard mini-bar                                                 */
-    animation: pulse 1.5s ease-in-out infinite;
+/* ------------------------------------------------------------------ */
-}
+.stat-minibar {
-
+    display: flex;
-.status-completed {
+    gap: 1.5rem;
-    color: var(--pico-color-green-400);
+    padding: 0.6rem 0;
-}
+    margin-bottom: 1.5rem;
-
+    border-bottom: 1px solid var(--pico-color-gray-500);
-.status-failed {
+    font-size: 0.9rem;
-    color: var(--pico-color-red-400);
-}
-
-/* Severity colors */
-.severity-WARNING {
-    color: var(--pico-color-yellow-400);
-}
-
-.severity-ERROR {
-    color: var(--pico-color-red-400);
-}
-
-/* Finding cards */
-.finding-card {
-    margin-bottom: 0.5rem;
-    padding: 0.5rem;
-    border-left: 3px solid;
-    transition: opacity 0.2s;
-}
-
-.finding-card:hover {
     opacity: 0.9;
 }
 
-.finding-card.WARNING {
+/* Dashboard block grid (2 cols → 1 on mobile) */
-    border-left-color: var(--pico-color-yellow-400);
+.dashboard-grid {
-}
+    display: grid;
-
+    grid-template-columns: 1fr 1fr;
-.finding-card.ERROR {
+    gap: 1rem;
-    border-left-color: var(--pico-color-red-400);
-}
-
-.finding-card.INFO {
-    border-left-color: var(--pico-color-blue-400);
-}
-
-/* Tables */
-table {
-    font-size: 0.9rem;
-}
-
-/* Nav */
-nav {
     margin-bottom: 1rem;
 }
 
-/* Stats grid */
+.dash-block {
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 1rem;
-    margin-bottom: 2rem;
-}
-
-.stat-card {
-    text-align: center;
     padding: 1rem;
-    transition: transform 0.2s, box-shadow 0.2s;
+    margin-bottom: 0;
 }
 
-.stat-card:hover {
+.dash-block h3 {
-    transform: translateY(-2px);
+    margin-top: 0;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    font-size: 0.95rem;
 }
 
-/* Severity ratio bar */
+.dash-block-warn {
-.severity-bar {
+    border-left: 3px solid var(--pico-color-red-400);
-    display: flex;
-    height: 8px;
-    border-radius: 4px;
-    overflow: hidden;
-    margin-top: 4px;
-    margin-bottom: 2rem;
 }
 
-.severity-bar .bar-error {
+/* ------------------------------------------------------------------ */
-    background: var(--pico-color-red-400);
+/* Tables                                                             */
-    transition: width 0.5s ease;
+/* ------------------------------------------------------------------ */
-}
+table            { font-size: 0.9rem; }
+table.compact    { font-size: 0.82rem; }
+table.compact th,
+table.compact td { padding: 0.35rem 0.5rem; }
 
-.severity-bar .bar-warning {
+/* ------------------------------------------------------------------ */
-    background: var(--pico-color-yellow-400);
+/* Heatmap                                                            */
-    transition: width 0.5s ease;
+/* ------------------------------------------------------------------ */
-}
-
-.severity-bar-labels {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.75rem;
-    margin-top: 2px;
-    margin-bottom: 2rem;
-}
-
-/* Scan activity heatmap */
 .heatmap {
     display: flex;
     align-items: flex-end;
     gap: 2px;
     height: 40px;
-    margin-top: 4px;
+    margin: 0.4rem 0 0 0;
-    margin-bottom: 2rem;
 }
 
 .heatmap-day {
@@ -139,12 +80,9 @@ nav {
     border-radius: 2px 2px 0 0;
     opacity: 0.8;
     transition: height 0.3s ease, opacity 0.2s;
-    cursor: default;
 }
 
-.heatmap-day:hover .bar {
+.heatmap-day:hover .bar { opacity: 1; }
-    opacity: 1;
-}
 
 .heatmap-day .tooltip {
     display: none;
@@ -162,138 +100,152 @@ nav {
     margin-bottom: 4px;
 }
 
-.heatmap-day:hover .tooltip {
+.heatmap-day:hover .tooltip { display: block; }
-    display: block;
+
+/* ------------------------------------------------------------------ */
+/* Scan info block (detail page)                                      */
+/* ------------------------------------------------------------------ */
+.scan-info-block {
+    padding: 1rem 1.25rem;
+    margin-bottom: 1.5rem;
 }
 
-/* Top rules bar chart */
+.scan-info-grid {
-.top-rules-chart {
+    display: grid;
-    margin-bottom: 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 0.6rem 1.5rem;
 }
 
-.top-rules-chart .rule-bar-row {
+.sha256 {
+    font-size: 0.72rem;
+    word-break: break-all;
+}
+
+.scan-error {
+    margin-top: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    background: rgba(var(--pico-color-red-400), 0.1);
+    border-left: 3px solid var(--pico-color-red-400);
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+/* ------------------------------------------------------------------ */
+/* Finding blocks (replaces accordion details/summary)                */
+/* ------------------------------------------------------------------ */
+.finding-block {
+    margin-bottom: 0.75rem;
+    border: 1px solid var(--pico-color-gray-600);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.finding-summary {
     display: flex;
     align-items: center;
-    margin-bottom: 0.4rem;
-}
-
-.top-rules-chart .rule-name {
-    flex: 0 0 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: right;
-    padding-right: 0.75rem;
-    font-size: 0.85rem;
-}
-
-.top-rules-chart .rule-bar-container {
-    flex: 1;
-    background: var(--pico-color-gray-500);
-    border-radius: 4px;
-    overflow: hidden;
-    height: 20px;
-}
-
-.top-rules-chart .rule-bar {
-    height: 100%;
-    background: var(--pico-color-blue-400);
-    border-radius: 4px;
-    transition: width 0.5s ease;
-    min-width: 2px;
-}
-
-.top-rules-chart .rule-count {
-    flex: 0 0 50px;
-    padding-left: 0.5rem;
-    font-size: 0.85rem;
-}
-
-/* Sticky nav */
-nav.sticky {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    background: var(--pico-color-dark);
-    padding: 0.5rem 0;
-    border-bottom: 1px solid var(--pico-color-gray-500);
-}
-
-/* Breadcrumbs */
-.breadcrumbs {
-    margin-bottom: 1rem;
-    font-size: 0.85rem;
-    opacity: 0.7;
-}
-
-.breadcrumbs a {
-    text-decoration: none;
-}
-
-.breadcrumbs .separator {
-    margin: 0 0.5rem;
-    opacity: 0.5;
-}
-
-/* Empty states */
-.empty-state {
-    text-align: center;
-    padding: 2rem 1rem;
-    opacity: 0.5;
-    font-style: italic;
-}
-
-/* Filter bar */
-.filter-bar {
-    display: flex;
-    flex-wrap: wrap;
     gap: 0.5rem;
-    margin-bottom: 1rem;
+    padding: 0.5rem 0.75rem;
-    align-items: center;
+    background: var(--pico-color-gray-650);
+    font-size: 0.9rem;
+    border-bottom: 1px solid var(--pico-color-gray-600);
 }
 
-.filter-bar input[type="text"],
+.finding-body {
-.filter-bar select {
+    padding: 0.75rem;
-    margin-bottom: 0;
 }
 
-.filter-bar .filter-btn {
+.finding-body p {
-    margin-bottom: 0;
+    margin-bottom: 0.5rem;
 }
 
-/* Sortable columns */
+.finding-body pre {
-th.sortable {
-    cursor: pointer;
-    user-select: none;
-}
-
-th.sortable:hover {
-    background: var(--pico-color-gray-600);
-}
-
-th.sortable .sort-icon {
-    margin-left: 0.25rem;
-    opacity: 0.3;
-}
-
-th.sortable.active .sort-icon {
-    opacity: 1;
-}
-
-/* Collapsible findings */
-.finding-details {
-    margin-top: 0.5rem;
-}
-
-.finding-details pre {
     background: var(--pico-color-gray-700);
     padding: 0.5rem;
     border-radius: 4px;
     overflow-x: auto;
     font-size: 0.8rem;
+    margin-bottom: 0;
+}
+
+.finding-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.finding-header-row h2 {
+    margin-bottom: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* LLM report — verdict-based colour scheme                           */
+/* ------------------------------------------------------------------ */
+.llm-report {
+    margin-top: 0.75rem;
+    padding: 0.8rem 1rem;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    line-height: 1.55;
+    border-left: 4px solid var(--pico-color-gray-500);
+    background: var(--pico-color-gray-750);
+}
+
+.llm-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.llm-badge {
+    display: inline-block;
+    padding: 0.1rem 0.5rem;
+    border-radius: 3px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.llm-badge-safe        { background: #1a5c2a; color: #4ade80; }
+.llm-badge-suspicious  { background: #5c4a1a; color: #facc15; }
+.llm-badge-malicious   { background: #5c1a1a; color: #f87171; }
+
+.llm-safe       { border-left-color: var(--pico-color-green-400); background: rgba(74,222,128,0.06); }
+.llm-suspicious { border-left-color: var(--pico-color-yellow-400); background: rgba(250,204,21,0.06); }
+.llm-malicious  { border-left-color: var(--pico-color-red-400); background: rgba(248,113,113,0.08); }
+
+.llm-severity {
+    font-size: 0.72rem;
+    opacity: 0.6;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.llm-summary {
+    font-style: italic;
+    margin-bottom: 0.4rem;
+    color: var(--pico-color-zinc-300);
+}
+
+.llm-analysis {
+    margin-bottom: 0;
+    white-space: pre-line;
+}
+
+.llm-actions       { margin-top: 0.5rem; }
+.llm-actions button { font-size: 0.8rem; }
+
+/* ------------------------------------------------------------------ */
+/* Shared controls                                                    */
+/* ------------------------------------------------------------------ */
+.code-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 0.25rem;
 }
 
-/* Copy button */
 .copy-btn {
     cursor: pointer;
     background: none;
@@ -305,16 +257,57 @@ th.sortable.active .sort-icon {
     transition: background 0.2s;
 }
 
-.copy-btn:hover {
+.copy-btn:hover { background: var(--pico-color-gray-600); }
-    background: var(--pico-color-gray-600);
+.copy-btn.copied { color: var(--pico-color-green-400); border-color: var(--pico-color-green-400); }
+
+.toggle-all-btn {
+    font-size: 0.8rem;
+    cursor: pointer;
+    background: none;
+    border: 1px solid var(--pico-color-gray-500);
+    padding: 0.2rem 0.6rem;
+    border-radius: 3px;
+    color: var(--pico-color-gray-300);
 }
 
-.copy-btn.copied {
+.toggle-all-btn:hover { background: var(--pico-color-gray-600); }
-    color: var(--pico-color-green-400);
+
-    border-color: var(--pico-color-green-400);
+.htmx-indicator { display: inline; }
+
+/* ------------------------------------------------------------------ */
+/* Nav / breadcrumbs / empty state                                    */
+/* ------------------------------------------------------------------ */
+nav           { margin-bottom: 1rem; }
+nav.sticky    { position: sticky; top: 0; z-index: 100; background: var(--pico-color-dark); padding: 0.5rem 0; border-bottom: 1px solid var(--pico-color-gray-500); }
+
+.breadcrumbs  { margin-bottom: 1rem; font-size: 0.85rem; opacity: 0.7; }
+.breadcrumbs a { text-decoration: none; }
+.breadcrumbs .separator { margin: 0 0.5rem; opacity: 0.5; }
+
+.empty-state  { text-align: center; padding: 2rem 1rem; opacity: 0.5; font-style: italic; }
+
+/* ------------------------------------------------------------------ */
+/* Filter bar / sortable cols                                         */
+/* ------------------------------------------------------------------ */
+.filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    align-items: center;
 }
 
-/* Spinner for scanning status */
+.filter-bar input[type="text"],
+.filter-bar select { margin-bottom: 0; }
+
+th.sortable { cursor: pointer; user-select: none; }
+th.sortable:hover { background: var(--pico-color-gray-600); }
+th.sortable .sort-icon { margin-left: 0.25rem; opacity: 0.3; }
+th.sortable.active .sort-icon { opacity: 1; }
+
+/* ------------------------------------------------------------------ */
+/* Spinner / animations                                               */
+/* ------------------------------------------------------------------ */
 .spinner {
     display: inline-block;
     width: 12px;
@@ -327,156 +320,33 @@ th.sortable.active .sort-icon {
     vertical-align: middle;
 }
 
-@keyframes spin {
+@keyframes spin  { to { transform: rotate(360deg); } }
-    to {
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
-}
-
-/* Finding header row */
-.finding-header-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-}
-
-/* Finding summary */
-.finding-summary {
-    cursor: pointer;
-    list-style: none;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.25rem 0;
-}
-
-/* Finding summary hint */
-.finding-summary-hint {
-    margin-left: auto;
-    font-size: 0.8rem;
-    opacity: 0.5;
-}
-
-/* Code block toolbar */
-.code-toolbar {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 0.25rem;
-}
-
-/* LLM report */
-.llm-report {
-    margin-top: 0.75rem;
-    padding: 0.6rem 0.8rem;
-    background: var(--pico-color-gray-700);
-    border-radius: 6px;
-    font-size: 0.85rem;
-    line-height: 1.5;
-    border-left: 3px solid var(--pico-color-blue-400);
-}
-
-.llm-report strong {
-    color: var(--pico-color-blue-300);
-}
-
-.verdict-safe {
-    color: var(--pico-color-green-400);
-    font-weight: bold;
-}
-
-.verdict-suspicious {
-    color: var(--pico-color-yellow-400);
-    font-weight: bold;
-}
-
-.verdict-malicious {
-    color: var(--pico-color-red-400);
-    font-weight: bold;
-}
-
-.llm-actions {
-    margin-top: 0.5rem;
-}
-
-.llm-actions button {
-    font-size: 0.8rem;
-}
-
-/* htmx indicator */
-.htmx-indicator {
-    display: inline;
-}
-.toggle-all-btn {
-    font-size: 0.8rem;
-    margin-bottom: 0.5rem;
-    cursor: pointer;
-    background: none;
-    border: 1px solid var(--pico-color-gray-500);
-    padding: 0.2rem 0.6rem;
-    border-radius: 3px;
-    color: var(--pico-color-gray-300);
-}
-
-.toggle-all-btn:hover {
-    background: var(--pico-color-gray-600);
-}
 
+/* ------------------------------------------------------------------ */
 /* Responsive                                                         */
+/* ------------------------------------------------------------------ */
 @media (max-width: 768px) {
-    .stats-grid {
+    .dashboard-grid         { grid-template-columns: 1fr; }
-        grid-template-columns: repeat(2, 1fr);
+    .scan-info-grid         { grid-template-columns: 1fr 1fr; }
-    }
+    .stat-minibar           { flex-wrap: wrap; gap: 0.75rem; }
-
+    .filter-bar             { flex-direction: column; align-items: stretch; }
-    .filter-bar {
+    nav ul                  { flex-wrap: wrap; }
-        flex-direction: column;
+    table, table.compact    { font-size: 0.78rem; }
-        align-items: stretch;
+    th, td                  { padding: 0.3rem 0.4rem; }
-    }
-
-    .top-rules-chart .rule-name {
-        flex: 0 0 100px;
-    }
-
-    nav ul {
-        flex-wrap: wrap;
-    }
-
-    table {
-        font-size: 0.8rem;
-    }
-
-    th, td {
-        padding: 0.35rem 0.5rem;
-    }
 }
 
 @media (max-width: 480px) {
-    .stats-grid {
+    .scan-info-grid { grid-template-columns: 1fr; }
-        grid-template-columns: 1fr;
+    .stat-minibar   { font-size: 0.8rem; }
 }
 
-    .stat-card {
+/* ------------------------------------------------------------------ */
-        padding: 0.75rem;
+/* Print                                                              */
-    }
+/* ------------------------------------------------------------------ */
-}
-
-/* Print styles */
 @media print {
-    nav, .filter-bar, .copy-btn, .toggle-all-btn, nav.sticky {
+    nav, .filter-bar, .copy-btn, .toggle-all-btn, nav.sticky,
-        display: none !important;
+    .llm-actions, .breadcrumbs { display: none !important; }
-    }
+    body { background: white; color: black; }
-
+    .llm-report { border: 1px solid #ccc; background: none; }
-    body {
-        background: white;
-        color: black;
-    }
 }

guarddog_nexus/web/templates/_llm_report_fragment.html

@@ -1,9 +1,10 @@
-<div class="llm-report">
+<div class="llm-report llm-{{ report.verdict }}">
-    <strong>LLM Analysis</strong>
+    <div class="llm-header">
-    <span class="verdict-{{ report.verdict }}">[{{ report.verdict }}]</span>
+        <span class="llm-badge llm-badge-{{ report.verdict }}">{{ report.verdict }}</span>
         {% if report.severity_rating %}
-    <span class="severity-{{ report.severity_rating }}">({{ report.severity_rating }})</span>
+        <span class="llm-severity">{{ report.severity_rating }}</span>
         {% endif %}
-    <p><em>{{ report.summary }}</em></p>
+    </div>
-    <p>{{ report.analysis }}</p>
+    <p class="llm-summary">{{ report.summary }}</p>
+    <p class="llm-analysis">{{ report.analysis }}</p>
 </div>

guarddog_nexus/web/templates/dashboard_stats.html

@@ -1,51 +1,15 @@
-<div class="stats-grid">
+<div class="stat-minibar">
-    <article class="stat-card">
+    <span><strong>{{ total_scans }}</strong> scans</span>
-        <h3>{{ total_scans }}</h3>
+    <span><strong class="flagged">{{ flagged_scans }}</strong> flagged</span>
-        <small>Total Scans</small>
+    <span><strong>{{ total_findings }}</strong> findings</span>
-    </article>
+    <span class="severity-ERROR"><strong>{{ errors_count }}</strong> errors</span>
-    <article class="stat-card">
+    <span class="severity-WARNING"><strong>{{ warnings_count }}</strong> warnings</span>
-        <h3 class="flagged">{{ flagged_scans }}</h3>
-        <small>⚠ Flagged</small>
-    </article>
-    <article class="stat-card">
-        <h3>{{ recent_flagged }}</h3>
-        <small>Flagged (7 days)</small>
-    </article>
-    <article class="stat-card">
-        <h3>{{ total_findings }}</h3>
-        <small>Total Findings</small>
-    </article>
-    <article class="stat-card">
-        <h3 class="severity-ERROR">{{ errors_count }}</h3>
-        <small>Errors</small>
-    </article>
-    <article class="stat-card">
-        <h3 class="severity-WARNING">{{ warnings_count }}</h3>
-        <small>Warnings</small>
-    </article>
 </div>
 
-{% if total_findings > 0 %}
+<div class="dashboard-grid">
-<div>
-    <small>Severity ratio</small>
-    <div class="severity-bar">
-        {% set err_pct = (errors_count / total_findings * 100) | int %}
-        {% set warn_pct = 100 - err_pct %}
-        <div class="bar-error" style="width: {{ err_pct }}%;" title="ERROR: {{ errors_count }}"></div>
-        <div class="bar-warning" style="width: {{ warn_pct }}%;" title="WARNING: {{ warnings_count }}"></div>
-    </div>
-    <div class="severity-bar-labels">
-        <span class="severity-ERROR">ERROR {{ errors_count }}</span>
-        <span class="severity-WARNING">WARNING {{ warnings_count }}</span>
-    </div>
-</div>
-{% else %}
-<p class="empty-state">No findings yet — scan results will appear here once packages are processed.</p>
-{% endif %}
-
     {% if days %}
-<div>
+    <article class="dash-block">
-    <small>Scan activity (14 days)</small>
+        <h3>Scan activity (14 days)</h3>
         <div class="heatmap">
             {% set max_cnt = days | map(attribute=1) | max %}
             {% for day, cnt, fl in days %}
@@ -56,39 +20,14 @@
             </div>
             {% endfor %}
         </div>
-</div>
+    </article>
-{% endif %}
-
-{% if most_flagged %}
-<div>
-    <h3>⚠ Most Flagged Packages</h3>
-    <table>
-        <thead>
-            <tr><th>Package</th><th>Version</th><th>Findings</th></tr>
-        </thead>
-        <tbody>
-        {% for p in most_flagged %}
-            <tr>
-                <td><a href="/packages/{{ p.package_name }}/{{ p.package_version }}"><strong>{{ p.package_name }}</strong></a></td>
-                <td>{{ p.package_version }}</td>
-                <td>
-                    <span class="flagged">{{ p.total }}</span>
-                    <progress value="{{ p.total }}" max="{{ max_findings }}" style="width: 80px; height: 6px; vertical-align: middle; margin-left: 6px;"></progress>
-                </td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
-</div>
     {% endif %}
 
     {% if latest_flagged %}
-<div>
+    <article class="dash-block dash-block-warn">
-    <h3>🔴 Latest Flagged</h3>
+        <h3>Latest Flagged</h3>
-    <table>
+        <table class="compact">
-        <thead>
+            <thead><tr><th>Package</th><th>Version</th><th>Findings</th><th>Time</th></tr></thead>
-            <tr><th>Package</th><th>Version</th><th>Findings</th><th>Time</th></tr>
-        </thead>
             <tbody>
             {% for s in latest_flagged %}
                 <tr>
@@ -100,20 +39,15 @@
             {% endfor %}
             </tbody>
         </table>
-</div>
+    </article>
     {% endif %}
+</div>
 
+<article class="dash-block" style="margin-top: 0;">
     <h3>Latest Scans</h3>
-<table>
+    <table class="compact">
         <thead>
-        <tr>
+            <tr><th>Package</th><th>Version</th><th>Repo</th><th>Status</th><th></th><th>Time</th></tr>
-            <th>Package</th>
-            <th>Version</th>
-            <th>Repo</th>
-            <th>Status</th>
-            <th></th>
-            <th>Time</th>
-        </tr>
         </thead>
         <tbody>
         {% for s in latest_scans %}
@@ -131,20 +65,6 @@
         </tbody>
     </table>
     <small><a href="/scans">View all scans →</a></small>
+</article>
 
-{% if top_rules %}
+<small style="opacity: 0.4;">Last refresh: {{ now.strftime('%H:%M:%S') }} (auto every 30s)</small>
-<div class="top-rules-chart">
-    <h3>Top Rules Triggered</h3>
-    {% for r in top_rules %}
-    <div class="rule-bar-row">
-        <span class="rule-name" title="{{ r.rule }}"><code>{{ r.rule }}</code></span>
-        <div class="rule-bar-container">
-            <div class="rule-bar" style="width: {{ (r.count / top_rules[0].count * 100) | int if top_rules[0].count > 0 else 0 }}%;"></div>
-        </div>
-        <span class="rule-count">{{ r.count }}</span>
-    </div>
-    {% endfor %}
-</div>
-{% endif %}
-
-<small style="opacity: 0.5;">Last refresh: {{ now.strftime('%H:%M:%S') }} (auto every 30s)</small>

guarddog_nexus/web/templates/package_detail.html

@@ -12,8 +12,9 @@
 {% block content %}
 <h1>{{ pkg_name }} <small>v{{ pkg_version }}</small></h1>
 
+<article class="scan-info-block">
     <h2>Scans ({{ scans|length }})</h2>
-<table>
+    <table class="compact">
         <thead>
             <tr><th>ID</th><th>Repo</th><th>Status</th><th>Findings</th><th>Time</th></tr>
         </thead>
@@ -31,25 +32,20 @@
         {% endfor %}
         </tbody>
     </table>
+</article>
 
-<div class="finding-header-row">
+<h2 style="margin-bottom: 0.75rem;">Findings ({{ findings|length }})</h2>
-    <h2>Findings ({{ findings|length }})</h2>
-    {% if findings|length > 1 %}
-    <button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
-    {% endif %}
-</div>
 
 {% if findings %}
     <div id="findings-container">
     {% for f in findings %}
-    <details class="finding-card {{ f.data.severity }}" data-finding-id="{{ f.id }}">
+    <div class="finding-block finding-{{ f.data.severity|lower }}">
-        <summary class="finding-summary">
+        <div class="finding-summary">
             <strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
             <strong>{{ f.data.rule }}</strong>
             {% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
-            <span class="finding-summary-hint">click to expand</span>
+        </div>
-        </summary>
+        <div class="finding-body">
-        <div class="finding-details">
             <p>{{ f.data.message }}</p>
             {% if f.data.code %}
             <div class="code-toolbar">
@@ -59,12 +55,15 @@
             {% endif %}
 
             {% if f.report %}
-            <div class="llm-report">
+            <div class="llm-report llm-{{ f.report.verdict }}">
-                <strong>LLM Analysis</strong>
+                <div class="llm-header">
-                <span class="verdict-{{ f.report.verdict }}">[{{ f.report.verdict }}]</span>
+                    <span class="llm-badge llm-badge-{{ f.report.verdict }}">{{ f.report.verdict }}</span>
-                <span class="severity-{{ f.report.severity_rating }}">({{ f.report.severity_rating }})</span>
+                    {% if f.report.severity_rating %}
-                <p><em>{{ f.report.summary }}</em></p>
+                    <span class="llm-severity">{{ f.report.severity_rating }}</span>
-                <p>{{ f.report.analysis }}</p>
+                    {% endif %}
+                </div>
+                <p class="llm-summary">{{ f.report.summary }}</p>
+                <p class="llm-analysis">{{ f.report.analysis }}</p>
             </div>
             {% else %}
             <div class="llm-actions" id="llm-{{ f.id }}">
@@ -81,7 +80,7 @@
             </div>
             {% endif %}
         </div>
-    </details>
+    </div>
     {% endfor %}
     </div>
 {% else %}

guarddog_nexus/web/templates/scan_detail.html

@@ -12,38 +12,34 @@
 {% block content %}
 <h1>Scan #{{ scan.id }}</h1>
 
-<table>
+<article class="scan-info-block">
-    <tr><td><strong>Package</strong></td><td><a href="/packages/{{ scan.package_name }}/{{ scan.package_version }}">{{ scan.package_name }}</a></td></tr>
+    <div class="scan-info-grid">
-    <tr><td><strong>Version</strong></td><td>{{ scan.package_version }}</td></tr>
+        <div><strong>Package</strong><br><a href="/packages/{{ scan.package_name }}/{{ scan.package_version }}">{{ scan.package_name }}</a></div>
-    <tr><td><strong>Ecosystem</strong></td><td>{{ scan.ecosystem }}</td></tr>
+        <div><strong>Version</strong><br>{{ scan.package_version }}</div>
-    <tr><td><strong>Repository</strong></td><td>{{ scan.repository }}</td></tr>
+        <div><strong>Ecosystem</strong><br>{{ scan.ecosystem }}</div>
-    <tr><td><strong>Status</strong></td><td>
+        <div><strong>Repository</strong><br>{{ scan.repository }}</div>
+        <div><strong>Status</strong><br>
             {% if scan.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ scan.status }}">{{ scan.status }}</span>{% endif %}
-    </td></tr>
-    <tr><td><strong>SHA256</strong></td><td><code>{{ scan.sha256 or '-' }}</code></td></tr>
-    <tr><td><strong>Started</strong></td><td>{{ scan.started_at.isoformat() if scan.started_at }}</td></tr>
-    <tr><td><strong>Finished</strong></td><td>{{ scan.finished_at.isoformat() if scan.finished_at }}</td></tr>
-    {% if scan.error_message %}<tr><td><strong>Error</strong></td><td><span class="flagged">{{ scan.error_message }}</span></td></tr>{% endif %}
-</table>
-
-<div class="finding-header-row">
-    <h2>Findings ({{ scan.findings|length }})</h2>
-    {% if scan.findings|length > 1 %}
-    <button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
-    {% endif %}
         </div>
+        <div><strong>SHA256</strong><br><code class="sha256">{{ scan.sha256 or '-' }}</code></div>
+        <div><strong>Started</strong><br>{{ scan.started_at.strftime('%Y-%m-%d %H:%M') if scan.started_at }}</div>
+        <div><strong>Finished</strong><br>{{ scan.finished_at.strftime('%Y-%m-%d %H:%M') if scan.finished_at }}</div>
+    </div>
+    {% if scan.error_message %}<div class="scan-error"><strong>Error:</strong> {{ scan.error_message }}</div>{% endif %}
+</article>
+
+<h2 style="margin-bottom: 0.75rem;">Findings ({{ scan.findings|length }})</h2>
 
 {% if scan.findings %}
     <div id="findings-container">
     {% for f in scan.findings %}
-    <details class="finding-card {{ f.data.severity }}" data-finding-id="{{ f.id }}">
+    <div class="finding-block finding-{{ f.data.severity|lower }}">
-        <summary class="finding-summary">
+        <div class="finding-summary">
             <strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
             <strong>{{ f.data.rule }}</strong>
             {% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
-            <span class="finding-summary-hint">click to expand</span>
+        </div>
-        </summary>
+        <div class="finding-body">
-        <div class="finding-details">
             <p>{{ f.data.message }}</p>
             {% if f.data.code %}
             <div class="code-toolbar">
@@ -53,12 +49,15 @@
             {% endif %}
 
             {% if f.report %}
-            <div class="llm-report">
+            <div class="llm-report llm-{{ f.report.verdict }}">
-                <strong>LLM Analysis</strong>
+                <div class="llm-header">
-                <span class="verdict-{{ f.report.verdict }}">[{{ f.report.verdict }}]</span>
+                    <span class="llm-badge llm-badge-{{ f.report.verdict }}">{{ f.report.verdict }}</span>
-                <span class="severity-{{ f.report.severity_rating }}">({{ f.report.severity_rating }})</span>
+                    {% if f.report.severity_rating %}
-                <p><em>{{ f.report.summary }}</em></p>
+                    <span class="llm-severity">{{ f.report.severity_rating }}</span>
-                <p>{{ f.report.analysis }}</p>
+                    {% endif %}
+                </div>
+                <p class="llm-summary">{{ f.report.summary }}</p>
+                <p class="llm-analysis">{{ f.report.analysis }}</p>
             </div>
             {% else %}
             <div class="llm-actions" id="llm-{{ f.id }}">
@@ -75,7 +74,7 @@
             </div>
             {% endif %}
         </div>
-    </details>
+    </div>
     {% endfor %}
     </div>
 {% else %}

tests/test_api.py

@@ -174,7 +174,7 @@ async def test_web_ui_dashboard(client):
 async def test_web_ui_dashboard_stats_fragment(client):
     resp = await client.get("/dashboard/stats")
     assert resp.status_code == 200
-    assert "Total Scans" in resp.text
+    assert "scans" in resp.text.lower()
 
 
 @pytest.mark.asyncio