icdev 1.0.0__py3-none-any.whl

icdev/tools/dashboard/templates/diagrams.html

@@ -0,0 +1,224 @@
+{% extends "base.html" %}
+{% block title %}Diagrams - ICDEV Dashboard{% endblock %}
+{% block content %}
+<div class="page-header">
+    <h1>System Diagrams</h1>
+    <p class="subtitle">Interactive workflow and architecture diagrams</p>
+</div>
+
+<!-- Tab Navigation -->
+<div class="diagram-tabs" role="tablist" aria-label="Diagram sections">
+    <button class="diagram-tab active" data-tab="tab-catalog" role="tab" aria-selected="true"
+            aria-controls="tab-catalog" id="btn-catalog">Catalog</button>
+    <button class="diagram-tab" data-tab="tab-editor" role="tab" aria-selected="false"
+            aria-controls="tab-editor" id="btn-editor">Editor</button>
+</div>
+
+<!-- ── Catalog Tab ────────────────────────────────────────────── -->
+<div id="tab-catalog" class="diagram-tab-content active" role="tabpanel" aria-labelledby="btn-catalog">
+
+    <!-- Filter bar -->
+    <div class="mermaid-toolbar">
+        <label for="cat-filter">Category:</label>
+        <select id="cat-filter" aria-label="Filter by category">
+            <option value="">All</option>
+            <option value="workflows">Workflows</option>
+            <option value="compliance">Compliance</option>
+            <option value="security">Security</option>
+            <option value="architecture">Architecture</option>
+        </select>
+    </div>
+
+    <!-- Card grid -->
+    <div id="diagram-catalog" class="mermaid-catalog" aria-label="Diagram catalog"></div>
+
+    <!-- Viewer panel (hidden until a card is clicked) -->
+    <div id="diagram-viewer-panel" class="mermaid-viewer" aria-live="polite">
+        <div class="mermaid-viewer-header">
+            <h3 id="viewer-title">Diagram</h3>
+            <div>
+                <button onclick="ICDEV.exportMermaidSVG('diagram-viewer','icdev-diagram.svg')"
+                        title="Download as SVG">Export SVG</button>
+                <button onclick="loadIntoEditor()" title="Edit this diagram in the editor">Edit</button>
+                <button onclick="closeViewer()" title="Close viewer">Close</button>
+            </div>
+        </div>
+        <div id="diagram-viewer" class="mermaid-container" role="img" aria-label="Rendered diagram"></div>
+    </div>
+</div>
+
+<!-- ── Editor Tab ─────────────────────────────────────────────── -->
+<div id="tab-editor" class="diagram-tab-content" role="tabpanel" aria-labelledby="btn-editor">
+    <div class="mermaid-toolbar">
+        <label for="diagram-template">Template:</label>
+        <select id="diagram-template" aria-label="Load a template diagram">
+            <option value="">-- Select template --</option>
+        </select>
+        <button onclick="ICDEV.exportMermaidSVG('mermaid-preview','icdev-diagram.svg')"
+                title="Download preview as SVG">Export SVG</button>
+    </div>
+    <div class="mermaid-editor">
+        <div>
+            <textarea id="mermaid-source" rows="22" spellcheck="false"
+                      placeholder="flowchart LR&#10;  A[Start] --> B[End]"
+                      aria-label="Mermaid diagram source code"></textarea>
+        </div>
+        <div>
+            <div id="mermaid-preview" class="mermaid-preview" role="img"
+                 aria-label="Live diagram preview">
+                <p style="color:var(--text-muted)">Type Mermaid syntax to see a preview</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    'use strict';
+
+    // ── State ──────────────────────────────────────────────────────
+    var _allDiagrams = [];
+    var _currentMermaid = '';
+
+    // ── Tab switching ──────────────────────────────────────────────
+    document.querySelectorAll('.diagram-tab').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            document.querySelectorAll('.diagram-tab').forEach(function (b) {
+                b.classList.remove('active');
+                b.setAttribute('aria-selected', 'false');
+            });
+            document.querySelectorAll('.diagram-tab-content').forEach(function (c) {
+                c.classList.remove('active');
+            });
+            btn.classList.add('active');
+            btn.setAttribute('aria-selected', 'true');
+            document.getElementById(btn.getAttribute('data-tab')).classList.add('active');
+        });
+    });
+
+    // ── Load catalog ───────────────────────────────────────────────
+    function loadCatalog(category) {
+        var url = '/api/diagrams/';
+        var params = [];
+        var role = new URLSearchParams(window.location.search).get('role');
+        if (role) params.push('role=' + encodeURIComponent(role));
+        if (category) params.push('category=' + encodeURIComponent(category));
+        if (params.length) url += '?' + params.join('&');
+
+        fetch(url)
+            .then(function (r) { return r.json(); })
+            .then(function (data) {
+                _allDiagrams = data.diagrams || [];
+                renderCatalog(_allDiagrams);
+                populateTemplateSelect(_allDiagrams);
+            })
+            .catch(function (err) {
+                console.error('[Diagrams] Failed to load catalog:', err);
+            });
+    }
+
+    function renderCatalog(diagrams) {
+        var container = document.getElementById('diagram-catalog');
+        container.innerHTML = '';
+        if (diagrams.length === 0) {
+            container.innerHTML = '<p style="color:var(--text-muted)">No diagrams found.</p>';
+            return;
+        }
+        diagrams.forEach(function (d) {
+            var card = document.createElement('div');
+            card.className = 'mermaid-card';
+            card.setAttribute('tabindex', '0');
+            card.setAttribute('role', 'button');
+            card.setAttribute('aria-label', 'View ' + d.title);
+            card.innerHTML = '<h3>' + esc(d.title) + '</h3>'
+                + '<p>' + esc(d.description) + '</p>'
+                + '<span class="card-category">' + esc(d.category) + '</span>';
+            card.addEventListener('click', function () { openViewer(d.id, d.title); });
+            card.addEventListener('keydown', function (e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    openViewer(d.id, d.title);
+                }
+            });
+            container.appendChild(card);
+        });
+    }
+
+    function populateTemplateSelect(diagrams) {
+        var sel = document.getElementById('diagram-template');
+        // Keep the first "-- Select --" option, clear the rest
+        while (sel.options.length > 1) sel.remove(1);
+        diagrams.forEach(function (d) {
+            var opt = document.createElement('option');
+            opt.value = d.id;
+            opt.textContent = d.title;
+            sel.appendChild(opt);
+        });
+    }
+
+    // ── Viewer ─────────────────────────────────────────────────────
+    function openViewer(diagramId, title) {
+        fetch('/api/diagrams/' + encodeURIComponent(diagramId))
+            .then(function (r) { return r.json(); })
+            .then(function (data) {
+                if (data.error) return;
+                _currentMermaid = data.mermaid;
+                document.getElementById('viewer-title').textContent = data.title;
+                var panel = document.getElementById('diagram-viewer-panel');
+                panel.classList.add('active');
+                ICDEV.renderMermaid('diagram-viewer', data.mermaid);
+                panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            });
+    }
+
+    window.closeViewer = function () {
+        document.getElementById('diagram-viewer-panel').classList.remove('active');
+    };
+
+    window.loadIntoEditor = function () {
+        // Switch to editor tab and populate textarea
+        document.querySelector('[data-tab="tab-editor"]').click();
+        var textarea = document.getElementById('mermaid-source');
+        textarea.value = _currentMermaid;
+        ICDEV.renderMermaid('mermaid-preview', _currentMermaid);
+    };
+
+    // ── Category filter ────────────────────────────────────────────
+    document.getElementById('cat-filter').addEventListener('change', function () {
+        loadCatalog(this.value || null);
+    });
+
+    // ── Template selector ──────────────────────────────────────────
+    document.getElementById('diagram-template').addEventListener('change', function () {
+        var id = this.value;
+        if (!id) return;
+        fetch('/api/diagrams/' + encodeURIComponent(id))
+            .then(function (r) { return r.json(); })
+            .then(function (data) {
+                if (data.error) return;
+                var textarea = document.getElementById('mermaid-source');
+                textarea.value = data.mermaid;
+                ICDEV.renderMermaid('mermaid-preview', data.mermaid);
+            });
+    });
+
+    // ── Editor init ────────────────────────────────────────────────
+    if (ICDEV.initMermaidEditor) {
+        ICDEV.initMermaidEditor('mermaid-source', 'mermaid-preview');
+    }
+
+    // ── Escape helper ──────────────────────────────────────────────
+    function esc(str) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode(str));
+        return div.innerHTML;
+    }
+
+    // ── Init ───────────────────────────────────────────────────────
+    loadCatalog(null);
+
+});
+</script>
+{% endblock %}

icdev/tools/dashboard/templates/events/timeline.html

@@ -0,0 +1,232 @@
+{% extends "base.html" %}
+{% block title %}Events Timeline — ICDEV Dashboard{% endblock %}
+
+{% block content %}
+<nav class="breadcrumbs" aria-label="Breadcrumb">
+    <a href="/">Home</a>
+    <span class="separator" aria-hidden="true">/</span>
+    <span class="current">Events</span>
+</nav>
+
+<div class="page-header">
+    <h1>Event Timeline</h1>
+    <p class="subtitle">Real-time hook events and system activity
+        <span class="help-icon" title="Events are ingested from Claude Code hooks and CI/CD triggers. Polling updates every 3 seconds.">?</span>
+    </p>
+</div>
+
+<!-- Filter Bar -->
+<div style="display: flex; gap: 8px; align-items: center; margin-bottom: 1rem; flex-wrap: wrap;">
+    <label for="filter-severity" style="font-size: 0.85rem;">Severity:</label>
+    <select id="filter-severity" aria-label="Filter by severity"
+            style="background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 4px 8px;">
+        <option value="">All</option>
+        <option value="critical">Critical</option>
+        <option value="high">High</option>
+        <option value="warning">Warning</option>
+        <option value="info">Info</option>
+    </select>
+    <label for="filter-hook" style="font-size: 0.85rem; margin-left: 8px;">Hook:</label>
+    <select id="filter-hook" aria-label="Filter by hook type"
+            style="background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 4px 8px;">
+        <option value="">All</option>
+    </select>
+    <label for="filter-tool" style="font-size: 0.85rem; margin-left: 8px;">Tool:</label>
+    <select id="filter-tool" aria-label="Filter by tool name"
+            style="background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 4px 8px;">
+        <option value="">All</option>
+    </select>
+    <button onclick="loadEvents()" style="background: var(--accent-blue); color: white; border: none; border-radius: 4px; padding: 4px 12px; cursor: pointer; margin-left: 8px;">Refresh</button>
+    <span id="poll-status" class="text-muted" style="margin-left: auto; font-size: 0.8rem;"></span>
+</div>
+
+<!-- Summary Cards -->
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
+    <div class="card stat-card">
+        <div class="stat-label">Total Events</div>
+        <div class="stat-value" id="stat-total">{{ recent_events|length }}</div>
+    </div>
+    <div class="card stat-card">
+        <div class="stat-label">Critical</div>
+        <div class="stat-value" id="stat-critical" style="color: var(--status-critical);">0</div>
+    </div>
+    <div class="card stat-card">
+        <div class="stat-label">Warnings</div>
+        <div class="stat-value" id="stat-warning" style="color: var(--status-warning);">0</div>
+    </div>
+    <div class="card stat-card">
+        <div class="stat-label">Info</div>
+        <div class="stat-value" id="stat-info" style="color: var(--accent-blue-light);">0</div>
+    </div>
+</div>
+
+<!-- Events Table -->
+<div class="card table-container">
+    <table id="events-table" role="grid" aria-label="Hook events timeline">
+        <thead>
+            <tr>
+                <th>Time</th>
+                <th>Severity</th>
+                <th>Hook Type</th>
+                <th>Tool</th>
+                <th>Message</th>
+                <th>Project</th>
+            </tr>
+        </thead>
+        <tbody id="events-body">
+            {% if recent_events %}
+                {% for ev in recent_events %}
+                <tr>
+                    <td><small>{{ ev.created_at or '—' }}</small></td>
+                    <td>
+                        {% if ev.severity == 'critical' %}
+                            <span style="color: var(--status-critical); font-weight: 600;">{{ ev.severity }}</span>
+                        {% elif ev.severity == 'high' %}
+                            <span style="color: var(--status-critical);">{{ ev.severity }}</span>
+                        {% elif ev.severity == 'warning' %}
+                            <span style="color: var(--status-warning);">{{ ev.severity }}</span>
+                        {% else %}
+                            <span class="text-muted">{{ ev.severity or 'info' }}</span>
+                        {% endif %}
+                    </td>
+                    <td>{{ ev.hook_type or '—' }}</td>
+                    <td>{{ ev.tool_name or '—' }}</td>
+                    <td>{{ ev.message or '—' }}</td>
+                    <td>{{ ev.project_id or '—' }}</td>
+                </tr>
+                {% endfor %}
+            {% else %}
+                <tr><td colspan="6" class="text-muted" style="text-align: center;">No events recorded yet. Events appear as hooks fire during Claude Code sessions.</td></tr>
+            {% endif %}
+        </tbody>
+    </table>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function () {
+    'use strict';
+
+    var _cursor = '';
+    var _pollInterval = 3000;
+    var _pollTimer = null;
+
+    function severityBadge(sev) {
+        var colors = {
+            critical: 'var(--status-critical)',
+            high: 'var(--status-critical)',
+            warning: 'var(--status-warning)',
+            info: 'var(--accent-blue-light)'
+        };
+        var c = colors[sev] || 'var(--text-muted)';
+        var bold = sev === 'critical' ? 'font-weight:600;' : '';
+        return '<span style="color:' + c + ';' + bold + '">' + (sev || 'info') + '</span>';
+    }
+
+    function esc(s) {
+        var d = document.createElement('div');
+        d.appendChild(document.createTextNode(s || ''));
+        return d.innerHTML;
+    }
+
+    // Load filter options
+    fetch('/api/events/filter-options')
+        .then(function (r) { return r.json(); })
+        .then(function (data) {
+            var hookSel = document.getElementById('filter-hook');
+            (data.hook_types || []).forEach(function (h) {
+                var o = document.createElement('option');
+                o.value = h; o.textContent = h;
+                hookSel.appendChild(o);
+            });
+            var toolSel = document.getElementById('filter-tool');
+            (data.tool_names || []).forEach(function (t) {
+                var o = document.createElement('option');
+                o.value = t; o.textContent = t;
+                toolSel.appendChild(o);
+            });
+        })
+        .catch(function () {});
+
+    window.loadEvents = function () {
+        var sev = document.getElementById('filter-severity').value;
+        var hook = document.getElementById('filter-hook').value;
+        var tool = document.getElementById('filter-tool').value;
+        var params = ['limit=50'];
+        if (sev) params.push('severity=' + encodeURIComponent(sev));
+        if (hook) params.push('hook_type=' + encodeURIComponent(hook));
+        if (tool) params.push('tool_name=' + encodeURIComponent(tool));
+
+        fetch('/api/events/recent?' + params.join('&'))
+            .then(function (r) { return r.json(); })
+            .then(function (data) {
+                var events = data.events || [];
+                updateStats(events, data.total || events.length);
+                renderTable(events);
+                if (events.length > 0) _cursor = events[0].created_at;
+            })
+            .catch(function (err) {
+                document.getElementById('events-body').innerHTML =
+                    '<tr><td colspan="6" class="text-muted" style="text-align:center;">Error: ' + err + '</td></tr>';
+            });
+    };
+
+    function updateStats(events, total) {
+        document.getElementById('stat-total').textContent = total;
+        var counts = { critical: 0, warning: 0, info: 0 };
+        events.forEach(function (e) {
+            if (e.severity === 'critical' || e.severity === 'high') counts.critical++;
+            else if (e.severity === 'warning') counts.warning++;
+            else counts.info++;
+        });
+        document.getElementById('stat-critical').textContent = counts.critical;
+        document.getElementById('stat-warning').textContent = counts.warning;
+        document.getElementById('stat-info').textContent = counts.info;
+    }
+
+    function renderTable(events) {
+        var tbody = document.getElementById('events-body');
+        if (events.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="6" class="text-muted" style="text-align:center;">No events recorded yet.</td></tr>';
+            return;
+        }
+        tbody.innerHTML = events.map(function (e) {
+            return '<tr>' +
+                '<td><small>' + esc(e.created_at) + '</small></td>' +
+                '<td>' + severityBadge(e.severity) + '</td>' +
+                '<td>' + esc(e.hook_type) + '</td>' +
+                '<td>' + esc(e.tool_name) + '</td>' +
+                '<td>' + esc(e.message) + '</td>' +
+                '<td>' + esc(e.project_id) + '</td>' +
+                '</tr>';
+        }).join('');
+    }
+
+    // Poll for new events
+    function poll() {
+        var params = ['limit=10'];
+        if (_cursor) params.push('since=' + encodeURIComponent(_cursor));
+        fetch('/api/events/poll?' + params.join('&'))
+            .then(function (r) { return r.json(); })
+            .then(function (data) {
+                if (data.events && data.events.length > 0) {
+                    _cursor = data.cursor;
+                    loadEvents();
+                }
+                _pollInterval = data.poll_interval_ms || 3000;
+                document.getElementById('poll-status').textContent = 'Polling active';
+            })
+            .catch(function () {
+                document.getElementById('poll-status').textContent = 'Poll error';
+            });
+    }
+
+    // Start polling
+    _pollTimer = setInterval(poll, _pollInterval);
+
+    // Initial load via JS (overwrite server-rendered content for live updates)
+    loadEvents();
+})();
+</script>
+{% endblock %}

icdev/tools/dashboard/templates/evidence.html

@@ -0,0 +1,134 @@
+{% extends "base.html" %}
+{% block title %}Evidence Collection - ICDEV Dashboard{% endblock %}
+{% block content %}
+<div class="container">
+  <h1>Compliance Evidence Collection</h1>
+  <p style="color:#666;">Phase 56 &mdash; Universal evidence auto-collection across all compliance frameworks (D347)</p>
+
+  <!-- Controls -->
+  <div style="margin:1rem 0;display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;">
+    <input id="ev-project-id" type="text" placeholder="Project ID (e.g. proj-123)" style="padding:0.4rem 0.8rem;border:1px solid #ccc;border-radius:4px;width:240px;" />
+    <button onclick="collectEvidence()" style="padding:0.4rem 1rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;">Collect Evidence</button>
+    <button onclick="checkFreshness()" style="padding:0.4rem 1rem;background:#388e3c;color:#fff;border:none;border-radius:4px;cursor:pointer;">Check Freshness</button>
+  </div>
+
+  <!-- Stat Grid -->
+  <div id="ev-stats" class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1rem 0;">
+    <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
+      <div class="stat-value" id="ev-total-fw" style="font-size:2rem;font-weight:bold;">{{ stats.total_frameworks if stats else '--' }}</div>
+      <div class="stat-label" style="color:#999;">Frameworks</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
+      <div class="stat-value" id="ev-required" style="font-size:2rem;font-weight:bold;">{{ stats.required_frameworks if stats else '--' }}</div>
+      <div class="stat-label" style="color:#999;">Required</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
+      <div class="stat-value" id="ev-with-data" style="font-size:2rem;font-weight:bold;">--</div>
+      <div class="stat-label" style="color:#999;">With Evidence</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
+      <div class="stat-value" id="ev-coverage" style="font-size:2rem;font-weight:bold;">--</div>
+      <div class="stat-label" style="color:#999;">Coverage %</div>
+    </div>
+  </div>
+
+  <!-- Framework Table -->
+  <h2 style="margin-top:1.5rem;">Framework Evidence Inventory</h2>
+  <div class="table-container">
+    <table id="ev-table" style="width:100%;border-collapse:collapse;">
+      <thead>
+        <tr style="border-bottom:2px solid #ddd;">
+          <th style="text-align:left;padding:0.5rem;">Framework</th>
+          <th style="text-align:left;padding:0.5rem;">Description</th>
+          <th style="text-align:center;padding:0.5rem;">Required</th>
+          <th style="text-align:right;padding:0.5rem;">Records</th>
+          <th style="text-align:center;padding:0.5rem;">Status</th>
+        </tr>
+      </thead>
+      <tbody id="ev-tbody">
+        {% if stats and stats.frameworks %}
+          {% for fw in stats.frameworks %}
+          <tr style="border-bottom:1px solid #eee;">
+            <td style="padding:0.5rem;font-weight:600;">{{ fw.id }}</td>
+            <td style="padding:0.5rem;">{{ fw.description }}</td>
+            <td style="padding:0.5rem;text-align:center;">{{ '&#10003;' if fw.required else '' }}</td>
+            <td style="padding:0.5rem;text-align:right;">{{ fw.total_records }}</td>
+            <td style="padding:0.5rem;text-align:center;">
+              {% if fw.total_records > 0 %}
+                <span style="color:#388e3c;">&#9679; Has Data</span>
+              {% else %}
+                <span style="color:#999;">&#9675; No Data</span>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        {% else %}
+          <tr><td colspan="5" style="padding:1rem;text-align:center;color:#999;">Enter a Project ID and click Collect Evidence</td></tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Results Panel -->
+  <div id="ev-results" style="margin-top:1.5rem;display:none;">
+    <h2>Collection Results</h2>
+    <pre id="ev-json" style="background:#f5f5f5;padding:1rem;border-radius:4px;overflow-x:auto;max-height:500px;font-size:0.85rem;"></pre>
+  </div>
+</div>
+
+<script>
+function collectEvidence() {
+  var pid = document.getElementById('ev-project-id').value.trim();
+  if (!pid) { alert('Enter a Project ID'); return; }
+  fetch('/api/evidence/collect', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({project_id: pid})
+  })
+  .then(function(r) { return r.json(); })
+  .then(function(data) {
+    if (data.summary) {
+      document.getElementById('ev-with-data').textContent = data.summary.frameworks_with_evidence;
+      document.getElementById('ev-coverage').textContent = data.summary.coverage_pct + '%';
+    }
+    document.getElementById('ev-results').style.display = 'block';
+    document.getElementById('ev-json').textContent = JSON.stringify(data, null, 2);
+    if (data.frameworks) { updateTable(data.frameworks); }
+  });
+}
+
+function checkFreshness() {
+  var pid = document.getElementById('ev-project-id').value.trim();
+  if (!pid) { alert('Enter a Project ID'); return; }
+  fetch('/api/evidence/freshness?project_id=' + encodeURIComponent(pid))
+  .then(function(r) { return r.json(); })
+  .then(function(data) {
+    document.getElementById('ev-results').style.display = 'block';
+    document.getElementById('ev-json').textContent = JSON.stringify(data, null, 2);
+  });
+}
+
+function updateTable(frameworks) {
+  var tbody = document.getElementById('ev-tbody');
+  tbody.innerHTML = '';
+  var keys = Object.keys(frameworks);
+  for (var i = 0; i < keys.length; i++) {
+    var fw = frameworks[keys[i]];
+    var dbCount = 0;
+    for (var j = 0; j < fw.db_evidence.length; j++) { dbCount += fw.db_evidence[j].count; }
+    var statusHtml = fw.status === 'evidence_found'
+      ? '<span style="color:#388e3c;">&#9679; Found</span>'
+      : fw.status === 'partial'
+        ? '<span style="color:#f57c00;">&#9679; Partial</span>'
+        : '<span style="color:#999;">&#9675; None</span>';
+    var reqHtml = fw.required ? '&#10003;' : '';
+    tbody.innerHTML += '<tr style="border-bottom:1px solid #eee;">'
+      + '<td style="padding:0.5rem;font-weight:600;">' + keys[i] + '</td>'
+      + '<td style="padding:0.5rem;">' + fw.description + '</td>'
+      + '<td style="padding:0.5rem;text-align:center;">' + reqHtml + '</td>'
+      + '<td style="padding:0.5rem;text-align:right;">' + dbCount + '</td>'
+      + '<td style="padding:0.5rem;text-align:center;">' + statusHtml + '</td></tr>';
+  }
+}
+</script>
+{% endblock %}