TDS polish: lt-frame tables, lt-stats-grid link summary, settings-aware refresh

- links.html: replace custom link-summary-panel with lt-stats-grid/lt-stat-card
  showing total interfaces, ports down, errors, and PoE load
- suppressions.html: wrap active suppressions and history tables in lt-frame
  with lt-section-header labels
- inspector.html: wire auto-refresh to gandalfSettings (respects interval pill),
  fix updated timestamp to use locale time

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/app.js

@@ -89,6 +89,14 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
     alertBadge.style.display = total ? '' : 'none';
   }
 
+  // Update stat cards
+  const scCrit = document.getElementById('stat-critical-val');
+  const scWarn = document.getElementById('stat-warning-val');
+  if (scCrit) scCrit.textContent = critCount;
+  if (scWarn) scWarn.textContent = warnCount;
+  const statCritCard = document.getElementById('stat-critical');
+  if (statCritCard) statCritCard.classList.toggle('lt-stat-card--alert', critCount > 0);
+
   // Stale data banner: warn if last_check is older than 15 minutes
   let staleBanner = document.getElementById('stale-banner');
   if (lastCheck) {
@@ -112,6 +120,9 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
 }
 
 function updateHostGrid(hosts) {
+  const scHosts = document.getElementById('stat-hosts-val');
+  if (scHosts) scHosts.textContent = Object.keys(hosts).length;
+
   for (const [name, host] of Object.entries(hosts)) {
     const card = document.querySelector(`.host-card[data-host="${CSS.escape(name)}"]`);
     if (!card) continue;

static/style.css

@@ -995,6 +995,17 @@
 .diag-pulse-link a { color: var(--cyan); }
 .diag-pulse-link a:hover { text-shadow: var(--glow-cyan); }
 
+/* ── Stat card alert variant (pulsing border when critical > 0) ─── */
+.lt-stat-card--alert {
+  border-color: var(--red) !important;
+  box-shadow: 0 0 8px rgba(255,45,85,.25) !important;
+  animation: topo-pulse-down 2s ease-in-out infinite;
+}
+.lt-stat-card--alert::before { background: var(--red); box-shadow: var(--glow-red); }
+
+/* ── lt-frame inside g-section: no extra bottom margin ────────────── */
+.g-section > .lt-frame { margin-bottom: 0; }
+
 /* ── Responsive ───────────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .host-grid         { grid-template-columns: 1fr; }

templates/index.html

@@ -26,6 +26,42 @@
   </div>
 </div>
 
+<!-- ── Stats summary cards ──────────────────────────────────────────── -->
+<div class="lt-stats-grid">
+  <div class="lt-stat-card{% if summary.critical %} lt-stat-card--alert{% endif %}"
+       id="stat-critical" role="button" tabindex="0"
+       data-stat-filter="critical" aria-label="{{ summary.critical or 0 }} critical alerts">
+    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--red);text-shadow:var(--glow-red)">●</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value" id="stat-critical-val" style="color:var(--red)">{{ summary.critical or 0 }}</span>
+      <span class="lt-stat-label">Critical</span>
+    </div>
+  </div>
+  <div class="lt-stat-card"
+       id="stat-warning" role="button" tabindex="0"
+       data-stat-filter="warning" aria-label="{{ summary.warning or 0 }} warning alerts">
+    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--amber)">●</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value" id="stat-warning-val" style="color:var(--amber)">{{ summary.warning or 0 }}</span>
+      <span class="lt-stat-label">Warning</span>
+    </div>
+  </div>
+  <div class="lt-stat-card" id="stat-hosts" aria-label="Monitored hosts">
+    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value" id="stat-hosts-val" style="color:var(--cyan)">{{ snapshot.hosts | length }}</span>
+      <span class="lt-stat-label">Hosts</span>
+    </div>
+  </div>
+  <div class="lt-stat-card" id="stat-resolved" aria-label="{{ recent_resolved | length }} alerts resolved in last 24 hours">
+    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--green);text-shadow:var(--glow)">✔</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value" id="stat-resolved-val" style="color:var(--green)">{{ recent_resolved | length }}</span>
+      <span class="lt-stat-label">Resolved 24h</span>
+    </div>
+  </div>
+</div>
+
 <!-- ── Network topology + host grid ───────────────────────────────── -->
 <section class="g-section">
   <div class="g-section-header">
@@ -282,19 +318,25 @@
     <h2 class="g-section-title">Active Alerts</h2>
     <span class="g-section-badge" id="alert-count-badge"
           {% if not summary.critical and not summary.warning %}style="display:none"{% endif %}>{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
-    <div class="g-section-actions">
+  </div>
-      <div class="events-filter-bar">
+  <div class="lt-toolbar">
-        <input type="search" class="lt-input lt-input-sm" id="events-search"
+    <div class="lt-toolbar-left">
+      <div class="lt-search">
+        <input type="search" class="lt-input lt-search-input" id="events-search"
                placeholder="Filter by target, type, description…" autocomplete="off">
-        <div class="sev-pills">
+      </div>
-          <button type="button" class="pill active" data-sev="">All</button>
+      <div class="sev-pills">
-          <button type="button" class="pill" data-sev="critical">Critical</button>
+        <button type="button" class="pill active" data-sev="">All</button>
-          <button type="button" class="pill" data-sev="warning">Warning</button>
+        <button type="button" class="pill" data-sev="critical">Critical</button>
-        </div>
+        <button type="button" class="pill" data-sev="warning">Warning</button>
       </div>
     </div>
   </div>
-  <div id="events-table-wrap">
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Alert Queue</div>
+    <div id="events-table-wrap">
     {% if events %}
     {% if total_active is defined and total_active > events|length %}
     <div class="pagination-notice">Showing {{ events|length }} of {{ total_active }} active alerts &mdash; <a href="/api/events?limit=1000">view all via API</a></div>
@@ -364,7 +406,8 @@
       <div class="lt-empty-state-title">No active alerts</div>
     </div>
     {% endif %}
-  </div>
+    </div><!-- /#events-table-wrap -->
+  </div><!-- /.lt-frame -->
 </section>
 
 <!-- ── Recently Resolved (last 24h) ───────────────────────────────── -->
@@ -374,34 +417,24 @@
     <h2 class="g-section-title">Recently Resolved</h2>
     <span class="g-section-badge g-section-badge-resolved">{{ recent_resolved | length }} in last 24h</span>
   </div>
-  <div class="lt-table-wrap">
+  <div class="lt-timeline">
-    <table class="lt-table">
+    {% for e in recent_resolved %}
-      <caption class="lt-sr-only">Recently resolved alerts</caption>
+    {%- set dot_cls = 'lt-timeline-item--green' if e.severity == 'info' else 'lt-timeline-item--dim' -%}
-      <thead>
+    <div class="lt-timeline-item {{ dot_cls }}">
-        <tr>
+      <div class="lt-timeline-meta">
-          <th>Sev</th>
+        <strong class="lt-timeline-actor">{{ e.target_name }}</strong>
-          <th>Type</th>
+        {% if e.target_detail %}<span>· {{ e.target_detail }}</span>{% endif %}
-          <th>Target</th>
+        <span class="lt-timeline-time event-age" data-ts="{{ e.resolved_at }}">{{ e.resolved_at }}</span>
-          <th>Detail</th>
+      </div>
-          <th>Resolved</th>
+      <div class="lt-timeline-body">
-          <th>Duration</th>
+        {{ e.event_type | replace('_', ' ') }}
-        </tr>
+        &nbsp;·&nbsp;
-      </thead>
+        <span class="lt-badge badge-resolved">{{ e.severity }}</span>
-      <tbody>
+        &nbsp;·&nbsp; duration
-        {% for e in recent_resolved %}
+        <span class="event-duration" data-first="{{ e.first_seen }}" data-resolved="{{ e.resolved_at }}">–</span>
-        <tr class="row-resolved">
+      </div>
-          <td><span class="lt-badge badge-resolved">{{ e.severity }}</span></td>
+    </div>
-          <td>{{ e.event_type | replace('_', ' ') }}</td>
+    {% endfor %}
-          <td><strong>{{ e.target_name }}</strong></td>
-          <td>{{ e.target_detail or '–' }}</td>
-          <td class="ts-cell">
-            <span class="event-age" data-ts="{{ e.resolved_at }}">{{ e.resolved_at }}</span>
-          </td>
-          <td class="ts-cell event-duration" data-first="{{ e.first_seen }}" data-resolved="{{ e.resolved_at }}">–</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
   </div>
 </section>
 {% endif %}
@@ -529,5 +562,19 @@
   // Re-apply filter after dynamic table updates
   new MutationObserver(applyEventsFilter)
     .observe(document.getElementById('events-table-wrap'), { childList: true, subtree: true });
+
+  // Stat card clicks — filter events table by severity
+  document.querySelectorAll('.lt-stat-card[data-stat-filter]').forEach(card => {
+    card.addEventListener('click', () => {
+      const sev = card.dataset.statFilter;
+      document.querySelectorAll('.sev-pills .pill').forEach(p => p.classList.remove('active'));
+      const matchPill = document.querySelector(`.sev-pills .pill[data-sev="${sev}"]`);
+      if (matchPill) matchPill.classList.add('active');
+      _filterSev = sev;
+      applyEventsFilter();
+      document.getElementById('events-table-wrap')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+    card.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); } });
+  });
 </script>
 {% endblock %}

templates/inspector.html

@@ -3,12 +3,14 @@
 
 {% block content %}
 
-<div class="g-page-header">
+<div class="lt-page-header">
-  <h1 class="g-page-title">Network Inspector</h1>
+  <div>
-  <p class="g-page-sub">
+    <h1 class="lt-page-title">Network Inspector</h1>
-    Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
+    <p class="g-page-sub" style="margin-top:4px">
-    <span id="inspector-updated" style="margin-left:10px; color:var(--text-muted); font-size:.85em;"></span>
+      Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
-  </p>
+      <span id="inspector-updated" style="margin-left:8px"></span>
+    </p>
+  </div>
 </div>
 
 <div class="inspector-layout">
@@ -425,9 +427,10 @@ function renderInspector(data) {
   const main = document.getElementById('inspector-main');
   const switches = data.unifi_switches || {};
 
-  const upd = data.updated ? `Updated: ${data.updated}` : '';
   const updEl = document.getElementById('inspector-updated');
-  if (updEl) updEl.textContent = upd;
+  if (updEl && data.updated) {
+    updEl.textContent = 'Updated: ' + new Date(data.updated + (data.updated.includes('Z') ? '' : 'Z')).toLocaleTimeString();
+  }
 
   if (!Object.keys(switches).length) {
     main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
@@ -463,7 +466,13 @@ async function loadInspector() {
 }
 
 loadInspector();
-lt.autoRefresh.start(loadInspector, 60000);
+var _inspInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+if (_inspInterval > 0) lt.autoRefresh.start(loadInspector, Math.max(_inspInterval, 15) * 1000);
+
+window.onGandalfSettingsChanged = function(s) {
+  lt.autoRefresh.stop();
+  if (s.refreshInterval > 0) lt.autoRefresh.start(loadInspector, Math.max(s.refreshInterval, 15) * 1000);
+};
 lt.keys.on('Escape', () => {
   if (document.getElementById('inspector-panel').classList.contains('open')) closePanel();
 });

templates/links.html

@@ -3,13 +3,14 @@
 
 {% block content %}
 
-<div class="g-page-header">
+<div class="lt-page-header">
-  <h1 class="g-page-title">Link Debug</h1>
+  <div>
-  <p class="g-page-sub">
+    <h1 class="lt-page-title">Link Debug</h1>
-    Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
+    <p class="g-page-sub" style="margin-top:4px">
-    Data collected via Prometheus node_exporter + SSH ethtool (servers) and UniFi API (switches) every poll cycle.
+      Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
-    <span id="links-updated" style="margin-left:10px; color:var(--text-muted); font-size:.85em;"></span>
+      <span id="links-updated" style="margin-left:8px"></span>
-  </p>
+    </p>
+  </div>
 </div>
 
 <div id="links-container">
@@ -383,33 +384,51 @@ function buildLinkSummary(hosts, unifiSwitches) {
       if ((d.tx_errs_rate || 0) > 0 || (d.rx_errs_rate || 0) > 0) errIfaces++;
     }
   }
+  let swTotal = 0, swDown = 0;
   for (const sw of Object.values(unifiSwitches || {})) {
     for (const p of Object.values(sw.ports || {})) {
       totalPoe += p.poe_power || 0;
+      swTotal++;
+      if (!p.up) swDown++;
     }
   }
-  const hasAlerts = downIfaces > 0 || errIfaces > 0;
+  const allTotal = totalIfaces + swTotal;
-  return `
+  const allDown  = downIfaces  + swDown;
-    <div class="link-summary-panel ${hasAlerts ? 'link-summary-has-alerts' : ''}">
+  const downColor = allDown  > 0 ? 'var(--red)'   : 'var(--green)';
-      <div class="link-summary-grid">
+  const errColor  = errIfaces > 0 ? 'var(--amber)' : 'var(--green)';
-        <div class="link-summary-stat">
+  const downCardCls = allDown  > 0 ? ' lt-stat-card--alert' : '';
-          <span class="lss-label">Total Interfaces</span>
+  const poeCard = totalPoe > 0 ? `
-          <span class="lss-value">${totalIfaces}</span>
+    <div class="lt-stat-card">
-        </div>
+      <span class="lt-stat-icon" aria-hidden="true" style="color:var(--amber)">⚡</span>
-        <div class="link-summary-stat ${downIfaces ? 'lss-alert' : ''}">
+      <div class="lt-stat-info">
-          <span class="lss-label">Interfaces Down</span>
+        <span class="lt-stat-value" style="color:var(--amber)">${totalPoe.toFixed(1)}</span>
-          <span class="lss-value ${downIfaces ? 'val-crit' : 'val-good'}">${downIfaces}</span>
+        <span class="lt-stat-label">PoE Load (W)</span>
-        </div>
-        <div class="link-summary-stat ${errIfaces ? 'lss-alert' : ''}">
-          <span class="lss-label">With Errors</span>
-          <span class="lss-value ${errIfaces ? 'val-warn' : 'val-good'}">${errIfaces}</span>
-        </div>
-        ${totalPoe > 0 ? `
-        <div class="link-summary-stat">
-          <span class="lss-label">PoE Load</span>
-          <span class="lss-value">${totalPoe.toFixed(1)} <span class="lss-sub">W</span></span>
-        </div>` : ''}
       </div>
+    </div>` : '';
+  return `
+    <div class="lt-stats-grid" style="margin-bottom:16px">
+      <div class="lt-stat-card">
+        <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value" style="color:var(--cyan)">${allTotal}</span>
+          <span class="lt-stat-label">Interfaces</span>
+        </div>
+      </div>
+      <div class="lt-stat-card${downCardCls}">
+        <span class="lt-stat-icon" aria-hidden="true" style="color:${downColor}">●</span>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value" style="color:${downColor}">${allDown}</span>
+          <span class="lt-stat-label">Ports Down</span>
+        </div>
+      </div>
+      <div class="lt-stat-card">
+        <span class="lt-stat-icon" aria-hidden="true" style="color:${errColor}">▲</span>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value" style="color:${errColor}">${errIfaces}</span>
+          <span class="lt-stat-label">With Errors</span>
+        </div>
+      </div>
+      ${poeCard}
     </div>`;
 }
 

templates/suppressions.html

@@ -3,9 +3,11 @@
 
 {% block content %}
 
-<div class="g-page-header">
+<div class="lt-page-header">
-  <h1 class="g-page-title">Alert Suppressions</h1>
+  <div>
-  <p class="g-page-sub">Manage maintenance windows and per-target alert suppression rules.</p>
+    <h1 class="lt-page-title">Alert Suppressions</h1>
+    <p class="g-page-sub" style="margin-top:4px">Manage maintenance windows and per-target alert suppression rules.</p>
+  </div>
 </div>
 
 <!-- ── Create suppression ─────────────────────────────────────────── -->
@@ -83,33 +85,38 @@
   </div>
   <div id="active-sup-wrap">
   {% if active %}
-  <div class="lt-table-wrap">
+  <div class="lt-frame">
-    <table class="lt-table" id="active-sup-table">
+    <span class="lt-frame-bl">&#x255A;</span>
-      <caption class="lt-sr-only">Active suppression rules</caption>
+    <span class="lt-frame-br">&#x255D;</span>
-      <thead>
+    <div class="lt-section-header">Active Rules</div>
-        <tr>
+    <div class="lt-table-wrap">
-          <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+      <table class="lt-table" id="active-sup-table">
-          <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
+        <caption class="lt-sr-only">Active suppression rules</caption>
-        </tr>
+        <thead>
-      </thead>
+          <tr>
-      <tbody>
+            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
-        {% for s in active %}
+            <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
-        <tr id="sup-row-{{ s.id }}">
+          </tr>
-          {%- set _sup_badge = {'host':'badge-warning','interface':'badge-info','unifi_device':'badge-purple','all':'badge-critical'} -%}
+        </thead>
-          <td><span class="lt-badge {{ _sup_badge.get(s.target_type, 'badge-neutral') }}">{{ s.target_type }}</span></td>
+        <tbody>
-          <td>{{ s.target_name or 'all' }}</td>
+          {% for s in active %}
-          <td>{{ s.target_detail or '–' }}</td>
+          <tr id="sup-row-{{ s.id }}">
-          <td>{{ s.reason }}</td>
+            {%- set _sup_badge = {'host':'badge-warning','interface':'badge-info','unifi_device':'badge-purple','all':'badge-critical'} -%}
-          <td>{{ s.suppressed_by }}</td>
+            <td><span class="lt-badge {{ _sup_badge.get(s.target_type, 'badge-neutral') }}">{{ s.target_type }}</span></td>
-          <td class="ts-cell">{{ s.created_at }}</td>
+            <td>{{ s.target_name or 'all' }}</td>
-          <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
+            <td>{{ s.target_detail or '–' }}</td>
-          <td>
+            <td>{{ s.reason }}</td>
-            <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}">Remove</button>
+            <td>{{ s.suppressed_by }}</td>
-          </td>
+            <td class="ts-cell">{{ s.created_at }}</td>
-        </tr>
+            <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
-        {% endfor %}
+            <td>
-      </tbody>
+              <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}">Remove</button>
-    </table>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </div>
   {% else %}
   <div class="lt-empty-state lt-empty-state--sm" id="no-active-msg">
@@ -128,36 +135,41 @@
     <span class="g-section-badge">{{ history | length }}</span>
   </div>
   {% if history %}
-  <div class="lt-table-wrap">
+  <div class="lt-frame">
-    <table class="lt-table lt-table-sm">
+    <span class="lt-frame-bl">&#x255A;</span>
-      <caption class="lt-sr-only">Suppression history</caption>
+    <span class="lt-frame-br">&#x255D;</span>
-      <thead>
+    <div class="lt-section-header">Suppression Log</div>
-        <tr>
+    <div class="lt-table-wrap">
-          <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+      <table class="lt-table lt-table-sm">
-          <th>By</th><th>Created</th><th>Expires</th><th>Active</th>
+        <caption class="lt-sr-only">Suppression history</caption>
-        </tr>
+        <thead>
-      </thead>
+          <tr>
-      <tbody>
+            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
-        {% for s in history %}
+            <th>By</th><th>Created</th><th>Expires</th><th>Active</th>
-        <tr class="{% if not s.active %}row-resolved{% endif %}">
+          </tr>
-          <td>{{ s.target_type }}</td>
+        </thead>
-          <td>{{ s.target_name or 'all' }}</td>
+        <tbody>
-          <td>{{ s.target_detail or '–' }}</td>
+          {% for s in history %}
-          <td>{{ s.reason }}</td>
+          <tr class="{% if not s.active %}row-resolved{% endif %}">
-          <td>{{ s.suppressed_by }}</td>
+            <td>{{ s.target_type }}</td>
-          <td class="ts-cell">{{ s.created_at }}</td>
+            <td>{{ s.target_name or 'all' }}</td>
-          <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
+            <td>{{ s.target_detail or '–' }}</td>
-          <td>
+            <td>{{ s.reason }}</td>
-            {% if s.active %}
+            <td>{{ s.suppressed_by }}</td>
-            <span class="lt-badge badge-ok">Yes</span>
+            <td class="ts-cell">{{ s.created_at }}</td>
-            {% else %}
+            <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
-            <span class="lt-badge badge-neutral">No</span>
+            <td>
-            {% endif %}
+              {% if s.active %}
-          </td>
+              <span class="lt-badge badge-ok">Yes</span>
-        </tr>
+              {% else %}
-        {% endfor %}
+              <span class="lt-badge badge-neutral">No</span>
-      </tbody>
+              {% endif %}
-    </table>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </div>
   {% else %}
   <div class="lt-empty-state lt-empty-state--sm">
@@ -235,15 +247,20 @@
         <td><button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="${s.id}">Remove</button></td>
       </tr>`).join('');
     wrap.innerHTML = `
-      <div class="lt-table-wrap">
+      <div class="lt-frame">
-        <table class="lt-table" id="active-sup-table">
+        <span class="lt-frame-bl">&#x255A;</span>
-          <caption class="lt-sr-only">Active suppression rules</caption>
+        <span class="lt-frame-br">&#x255D;</span>
-          <thead><tr>
+        <div class="lt-section-header">Active Rules</div>
-            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+        <div class="lt-table-wrap">
-            <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
+          <table class="lt-table" id="active-sup-table">
-          </tr></thead>
+            <caption class="lt-sr-only">Active suppression rules</caption>
-          <tbody>${tbody}</tbody>
+            <thead><tr>
-        </table>
+              <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+              <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
+            </tr></thead>
+            <tbody>${tbody}</tbody>
+          </table>
+        </div>
       </div>`;
   }