fix: aria-required sync, aria-label pills, deduplicate setDuration logic

- updateSuppressForm() now sets required + aria-required on sup-name/sup-detail
  when target type changes; sup-reason gets static aria-required="true"
- onTypeChange() in suppressions page syncs aria-required on s-name
- s-name in suppressions.html gets initial required/aria-required (default type=host)
- Duration pills in both modal and suppressions page now have descriptive
  aria-label ("30 minutes", "1 hour", etc.) alongside the group aria-label
- setDuration() in app.js accepts optional {expiresId,pillSel,hintId} opts so
  logic lives in one place; suppressions.html setDur() delegates to it
- Post-create form reset uses setDur() instead of manually patching DOM

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

app.py

@@ -291,7 +291,7 @@ def api_links():
             return jsonify(json.loads(raw))
         except Exception as e:
             logger.error(f'Failed to parse link_stats JSON: {e}')
-    return jsonify({'hosts': {}, 'updated': None})
+    return jsonify({'hosts': {}, 'unifi_switches': {}, 'updated': None})
 
 
 @app.route('/api/events')

diagnose.py

@@ -221,8 +221,6 @@ class DiagnosticsRunner:
                 data['auto_neg'] = (val.lower() == 'on')
             elif key == 'Link detected':
                 data['link_detected'] = (val.lower() == 'yes')
-            elif 'Supported link modes' in key:
-                data.setdefault('supported_modes', []).append(val)
         return data
 
     @staticmethod

static/app.js

@@ -294,18 +294,33 @@ function updateSuppressForm() {
   const type      = document.getElementById('sup-type').value;
   const nameGrp   = document.getElementById('sup-name-group');
   const detailGrp = document.getElementById('sup-detail-group');
+  const nameInput   = document.getElementById('sup-name');
+  const detailInput = document.getElementById('sup-detail');
   if (nameGrp)   nameGrp.style.display   = (type === 'all') ? 'none' : '';
   if (detailGrp) detailGrp.style.display = (type === 'interface') ? '' : 'none';
+  if (nameInput) {
+    const req = (type !== 'all');
+    nameInput.required = req;
+    nameInput.setAttribute('aria-required', String(req));
+  }
+  if (detailInput) {
+    const req = (type === 'interface');
+    detailInput.required = req;
+    detailInput.setAttribute('aria-required', String(req));
+  }
 }
 
-function setDuration(mins, el) {
+function setDuration(mins, el, opts) {
-  document.getElementById('sup-expires').value = mins || '';
+  const o         = opts || {};
-  document.querySelectorAll('#suppress-modal .pill').forEach(p => {
+  const expiresEl = document.getElementById(o.expiresId || 'sup-expires');
+  const pillSel   = o.pillSel || '#suppress-modal .pill';
+  const hint      = document.getElementById(o.hintId || 'duration-hint');
+  if (expiresEl) expiresEl.value = mins || '';
+  document.querySelectorAll(pillSel).forEach(p => {
     p.classList.remove('active');
     p.setAttribute('aria-pressed', 'false');
   });
   if (el) { el.classList.add('active'); el.setAttribute('aria-pressed', 'true'); }
-  const hint = document.getElementById('duration-hint');
   if (hint) {
     if (mins) {
       const h = Math.floor(mins / 60), m = mins % 60;

static/style.css

@@ -217,6 +217,7 @@
 .sev-pills          { display: flex; gap: 4px; }
 .g-page-sub { font-size: .78em; color: var(--text-muted); margin-top: 4px; }
 .g-page-sub-aside { font-size: .78em; color: var(--text-muted); margin-left: 8px; }
+.g-stale-warn { color: var(--orange); font-weight: 600; }
 
 /* ── Badge severity color variants (used with lt-badge) ───────────── */
 .badge-critical { color: var(--red);    border-color: var(--red);    text-shadow: var(--glow-red); }

templates/base.html

@@ -227,16 +227,16 @@
           <div class="lt-form-group">
             <label class="lt-label" for="sup-reason">Reason <span class="required">*</span></label>
             <input type="text" class="lt-input" id="sup-reason" name="reason"
-                   placeholder="e.g. Planned switch reboot" required>
+                   placeholder="e.g. Planned switch reboot" required aria-required="true">
           </div>
           <div class="lt-form-group lt-form-group--last">
             <label class="lt-label">Duration</label>
             <div class="duration-pills" role="group" aria-label="Select suppression duration">
-              <button type="button" class="pill" data-duration="30" aria-pressed="false">30 min</button>
+              <button type="button" class="pill" data-duration="30" aria-pressed="false" aria-label="30 minutes">30 min</button>
-              <button type="button" class="pill" data-duration="60" aria-pressed="false">1 hr</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false" aria-label="1 hour">1 hr</button>
-              <button type="button" class="pill" data-duration="240" aria-pressed="false">4 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false" aria-label="4 hours">4 hr</button>
-              <button type="button" class="pill" data-duration="480" aria-pressed="false">8 hr</button>
+              <button type="button" class="pill" data-duration="480" aria-pressed="false" aria-label="8 hours">8 hr</button>
-              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true">Manual &#x221E;</button>
+              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true" aria-label="Manual, no expiry">Manual &#x221E;</button>
             </div>
             <input type="hidden" id="sup-expires" name="expires_minutes" value="">
             <div class="lt-field-hint" id="duration-hint">Persists until manually removed.</div>

templates/index.html

@@ -92,7 +92,7 @@
     <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>
+    <div class="pagination-notice">Showing {{ events|length }} of {{ total_active }} active alerts — use the search box to filter, or <a href="/api/events?limit=1000" target="_blank" rel="noopener">export all as JSON</a></div>
     {% endif %}
     <div class="lt-table-wrap">
       <table class="lt-table" id="events-table">

templates/inspector.html

@@ -428,7 +428,14 @@ function renderInspector(data) {
 
   const updEl = document.getElementById('inspector-updated');
   if (updEl && data.updated) {
-    updEl.textContent = 'Updated: ' + new Date(data.updated + (data.updated.includes('Z') ? '' : 'Z')).toLocaleTimeString();
+    const updMs = new Date(data.updated + (data.updated.includes('Z') ? '' : 'Z'));
+    const ageMin = (Date.now() - updMs) / 60000;
+    const timeStr = updMs.toLocaleTimeString();
+    if (ageMin > 15) {
+      updEl.innerHTML = `<span class="g-stale-warn" title="Data is ${Math.floor(ageMin)} minutes old — monitor may be down">⚠ Stale: ${timeStr}</span>`;
+    } else {
+      updEl.textContent = 'Updated: ' + timeStr;
+    }
   }
 
   if (!Object.keys(switches).length) {
@@ -487,7 +494,13 @@ document.addEventListener('click', e => {
   if (diagBtn) { runDiagnostic(diagBtn.dataset.sw, parseInt(diagBtn.dataset.idx, 10)); return; }
 
   const toggleDiag = e.target.closest('[data-action="toggle-diag"]');
-  if (toggleDiag) { toggleDiag.parentElement.classList.toggle('diag-open'); return; }
+  if (toggleDiag) {
+    const section = toggleDiag.parentElement;
+    const nowOpen = section.classList.toggle('diag-open');
+    const hint = toggleDiag.querySelector('.diag-toggle-hint');
+    if (hint) hint.textContent = nowOpen ? '[collapse]' : '[expand]';
+    return;
+  }
 });
 
 // ── Link Diagnostics ─────────────────────────────────────────────────
@@ -510,7 +523,10 @@ function runDiagnostic(swName, portIdx) {
       pollDiagnostic(resp.job_id, statusEl, resultsEl);
     })
     .catch(e => {
-      statusEl.textContent = 'Error: ' + (e.message || 'Request failed');
+      const msg = (e && e.status === 429)
+        ? 'Rate limit reached — max 5 diagnostics per minute. Please wait.'
+        : 'Error: ' + (e && e.message || 'Request failed');
+      statusEl.textContent = msg;
     });
 }
 
@@ -520,7 +536,13 @@ function pollDiagnostic(jobId, statusEl, resultsEl) {
     attempts++;
     if (attempts > 120) {  // 2min timeout
       clearInterval(_diagPollTimer);
-      statusEl.textContent = 'Timed out waiting for results.';
+      _diagPollTimer = null;
+      statusEl.innerHTML = 'Timed out waiting for results. '
+        + '<button class="lt-btn lt-btn-ghost lt-btn-sm" id="diag-retry-btn">Retry</button>';
+      document.getElementById('diag-retry-btn')?.addEventListener('click', () => {
+        const sel = document.querySelector('.switch-port-block.selected');
+        if (sel) runDiagnostic(sel.dataset.switch, parseInt(sel.dataset.portIdx));
+      });
       return;
     }
     lt.api.get(`/api/diagnose/${jobId}`)
@@ -535,7 +557,12 @@ function pollDiagnostic(jobId, statusEl, resultsEl) {
     .catch(() => {
       clearInterval(_diagPollTimer);
       _diagPollTimer = null;
-      statusEl.textContent = 'Error: lost connection while collecting diagnostics.';
+      statusEl.innerHTML = 'Error: lost connection while collecting diagnostics. '
+        + '<button class="lt-btn lt-btn-ghost lt-btn-sm" id="diag-retry-btn">Retry</button>';
+      document.getElementById('diag-retry-btn')?.addEventListener('click', () => {
+        const sel = document.querySelector('.switch-port-block.selected');
+        if (sel) runDiagnostic(sel.dataset.switch, parseInt(sel.dataset.portIdx));
+      });
     });
   }, 2000);
 }

templates/suppressions.html

@@ -32,7 +32,7 @@
             <label class="lt-label" for="s-name">Target Name <span class="required">*</span></label>
             <input type="text" class="lt-input" id="s-name" name="target_name"
                    placeholder="hostname or device name" autocomplete="off"
-                   list="target-name-list">
+                   required aria-required="true" list="target-name-list">
             <datalist id="target-name-list">
               {% for name in snapshot.hosts.keys() | sort %}
               <option value="{{ name }}">
@@ -59,11 +59,11 @@
           <div class="lt-form-group">
             <label class="lt-label">Duration</label>
             <div class="duration-pills" role="group" aria-label="Select suppression duration">
-              <button type="button" class="pill" data-duration="30" aria-pressed="false">30 min</button>
+              <button type="button" class="pill" data-duration="30" aria-pressed="false" aria-label="30 minutes">30 min</button>
-              <button type="button" class="pill" data-duration="60" aria-pressed="false">1 hr</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false" aria-label="1 hour">1 hr</button>
-              <button type="button" class="pill" data-duration="240" aria-pressed="false">4 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false" aria-label="4 hours">4 hr</button>
-              <button type="button" class="pill" data-duration="480" aria-pressed="false">8 hr</button>
+              <button type="button" class="pill" data-duration="480" aria-pressed="false" aria-label="8 hours">8 hr</button>
-              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true">Manual ∞</button>
+              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true" aria-label="Manual, no expiry">Manual ∞</button>
             </div>
             <input type="hidden" id="s-expires" name="expires_minutes" value="">
             <div class="lt-field-hint" id="s-dur-hint">Persists until manually removed.</div>
@@ -217,23 +217,16 @@
     const t = document.getElementById('s-type').value;
     document.getElementById('name-group').style.display = (t==='all') ? 'none' : '';
     document.getElementById('detail-group').style.display = (t==='interface') ? '' : 'none';
-    document.getElementById('s-name').required = (t!=='all');
+    const nameInput = document.getElementById('s-name');
+    if (nameInput) {
+      const req = (t !== 'all');
+      nameInput.required = req;
+      nameInput.setAttribute('aria-required', String(req));
+    }
   }
 
   function setDur(mins, el) {
-    document.getElementById('s-expires').value = mins || '';
+    setDuration(mins, el, { expiresId: 's-expires', pillSel: '#create-suppression-form .pill', hintId: 's-dur-hint' });
-    document.querySelectorAll('.duration-pills .pill').forEach(p => {
-      p.classList.remove('active');
-      p.setAttribute('aria-pressed', 'false');
-    });
-    if (el) { el.classList.add('active'); el.setAttribute('aria-pressed', 'true'); }
-    const hint = document.getElementById('s-dur-hint');
-    if (mins) {
-      const h = Math.floor(mins/60), m = mins%60;
-      hint.textContent = `Expires in ${h?h+'h ':''}${m?m+'m':''}`.trim()+'.';
-    } else {
-      hint.textContent = 'Persists until manually removed.';
-    }
   }
 
   function renderActiveRows(rows) {
@@ -302,9 +295,7 @@
       showToast('Suppression applied', 'success');
       form.reset();
       onTypeChange();
-      document.querySelectorAll('.duration-pills .pill').forEach(p => p.classList.remove('active'));
+      setDur(null, document.querySelector('#create-suppression-form .pill-manual'));
-      document.querySelector('.duration-pills .pill-manual')?.classList.add('active');
-      document.getElementById('s-dur-hint').textContent = 'Persists until manually removed.';
       await refreshActive();
     } catch (err) {
       showToast(err.message || 'Error', 'error');