From a17b1382bc6ed921c2446ff99ab166d3f202c6c9 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sat, 18 Apr 2026 23:59:19 -0400
Subject: [PATCH] Migrate inspector and links pages to TDS lt.* APIs

- Add escHtml alias (lt.escHtml) to both pages so existing template strings work without touching 40+ call sites
- Replace raw fetch() with lt.api.get/post in loadInspector, loadLinks, runDiagnostic, pollDiagnostic
- Replace setInterval(load*, 60000) with lt.autoRefresh.start() for intelligent polling
- Add lt.toast.error() to catch blocks for user-visible error feedback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 templates/inspector.html | 37 ++++++++++++++-----------------------
 templates/links.html     | 13 +++++--------
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/templates/inspector.html b/templates/inspector.html
index af722ec..6c0e260 100644
--- a/templates/inspector.html
+++ b/templates/inspector.html
@@ -24,6 +24,8 @@
 
 {% block scripts %}
 <script>
+const escHtml = s => lt.escHtml(s);
+
 // ── Switch layout config ─────────────────────────────────────────────────
 // keys match the model field returned by the UniFi API
 // rows: array of rows, each row is an array of port_idx values
@@ -451,18 +453,17 @@ function renderInspector(data) {
 // ── Fetch and render ─────────────────────────────────────────────────────
 async function loadInspector() {
   try {
-    const resp = await fetch('/api/links');
-    if (!resp.ok) throw new Error('API error');
-    const data = await resp.json();
+    const data = await lt.api.get('/api/links');
     renderInspector(data);
   } catch (e) {
     document.getElementById('inspector-main').innerHTML =
       '<p class="empty-state">Failed to load inspector data.</p>';
+    lt.toast.error('Failed to load inspector data');
   }
 }
 
 loadInspector();
-setInterval(loadInspector, 60000);
+lt.autoRefresh.start(loadInspector, 60000);
 
 // ── Link Diagnostics ─────────────────────────────────────────────────
 let _diagPollTimer = null;
@@ -478,23 +479,14 @@ function runDiagnostic(swName, portIdx) {
   statusEl.textContent = 'Submitting to Pulse...';
   resultsEl.innerHTML = '';
 
-  fetch('/api/diagnose', {
-    method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({switch_name: swName, port_idx: portIdx}),
-  })
-  .then(r => r.json())
-  .then(resp => {
-    if (resp.error) {
-      statusEl.textContent = 'Error: ' + resp.error;
-      return;
-    }
-    statusEl.textContent = 'Collecting diagnostics via Pulse...';
-    pollDiagnostic(resp.job_id, statusEl, resultsEl);
-  })
-  .catch(e => {
-    statusEl.textContent = 'Request failed: ' + e;
-  });
+  lt.api.post('/api/diagnose', {switch_name: swName, port_idx: portIdx})
+    .then(resp => {
+      statusEl.textContent = 'Collecting diagnostics via Pulse...';
+      pollDiagnostic(resp.job_id, statusEl, resultsEl);
+    })
+    .catch(e => {
+      statusEl.textContent = 'Error: ' + (e.message || 'Request failed');
+    });
 }
 
 function pollDiagnostic(jobId, statusEl, resultsEl) {
@@ -506,8 +498,7 @@ function pollDiagnostic(jobId, statusEl, resultsEl) {
       statusEl.textContent = 'Timed out waiting for results.';
       return;
     }
-    fetch(`/api/diagnose/${jobId}`)
-    .then(r => r.json())
+    lt.api.get(`/api/diagnose/${jobId}`)
     .then(resp => {
       if (resp.status === 'done') {
         clearInterval(_diagPollTimer);
diff --git a/templates/links.html b/templates/links.html
index 1b768a4..80f5c7e 100644
--- a/templates/links.html
+++ b/templates/links.html
@@ -20,6 +20,8 @@
 
 {% block scripts %}
 <script>
+const escHtml = s => lt.escHtml(s);
+
 // ── Formatting helpers ────────────────────────────────────────────
 function fmtRate(bytesPerSec) {
   if (bytesPerSec === null || bytesPerSec === undefined) return '–';
@@ -480,13 +482,7 @@ function checkLinksStale(updatedStr) {
 // ── Fetch + render ────────────────────────────────────────────────
 async function loadLinks() {
   try {
-    const resp = await fetch('/api/links');
-    if (!resp.ok) {
-      document.getElementById('links-container').innerHTML =
-        '<div class="error-state">Failed to load link statistics.</div>';
-      return;
-    }
-    const data = await resp.json();
+    const data = await lt.api.get('/api/links');
     if (!data.hosts && !data.unifi_switches) {
       document.getElementById('links-container').innerHTML =
         '<div class="link-no-data">No link data yet — monitor has not completed a full cycle.</div>';
@@ -501,10 +497,11 @@ async function loadLinks() {
   } catch (e) {
     document.getElementById('links-container').innerHTML =
       '<div class="error-state">Network error loading link statistics.</div>';
+    lt.toast.error('Failed to load link statistics');
   }
 }
 
 loadLinks();
-setInterval(loadLinks, 60000);
+lt.autoRefresh.start(loadLinks, 60000);
 </script>
 {% endblock %}