Integrate TDS v1.2 lt.* APIs throughout app

- app.js: replace raw fetch/escHtml/fmtRelTime with lt.api, lt.escHtml, lt.time.ago; modal open/close via lt.modal; add _toIso() for timestamp normalisation
- index.html: data-action="refresh", data-duration pills, lt.autoRefresh.start, remove local fmtRelTime
- suppressions.html: lt.api.post/delete, data-dur pill delegation
- base.html: user avatar with initials, admin badge, lt.keys.on('r') replaces manual keydown handler
- base.css: add dot-*, chip, row-state aliases so apps can use unprefixed class names

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

templates/index.html

@@ -18,7 +18,7 @@
   </div>
   <div class="status-meta">
     <span class="last-check" id="last-check">{{ last_check }}</span>
-    <button class="lt-btn lt-btn-ghost lt-btn-sm" onclick="refreshAll()">↻ REFRESH</button>
+    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="refresh">↻ REFRESH</button>
   </div>
 </div>
 
@@ -386,7 +386,7 @@
   <div class="lt-modal">
     <div class="lt-modal-header">
       <h3 class="lt-modal-title" id="suppress-modal-title">Suppress Alert</h3>
-      <button type="button" class="lt-modal-close" onclick="closeSuppressModal()" aria-label="Close">✕</button>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
     </div>
     <form id="suppress-form" onsubmit="submitSuppress(event)">
       <div class="lt-modal-body">
@@ -415,18 +415,18 @@
         <div class="lt-form-group" style="margin-bottom:0">
           <label class="lt-label">Duration</label>
           <div class="duration-pills">
-            <button type="button" class="pill" onclick="setDuration(30, this)">30 min</button>
-            <button type="button" class="pill" onclick="setDuration(60, this)">1 hr</button>
-            <button type="button" class="pill" onclick="setDuration(240, this)">4 hr</button>
-            <button type="button" class="pill" onclick="setDuration(480, this)">8 hr</button>
-            <button type="button" class="pill pill-manual active" onclick="setDuration(null, this)">Manual ∞</button>
+            <button type="button" class="pill" data-duration="30">30 min</button>
+            <button type="button" class="pill" data-duration="60">1 hr</button>
+            <button type="button" class="pill" data-duration="240">4 hr</button>
+            <button type="button" class="pill" data-duration="480">8 hr</button>
+            <button type="button" class="pill pill-manual active" data-duration="">Manual ∞</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>
         </div>
       </div>
       <div class="lt-modal-footer">
-        <button type="button" class="lt-btn lt-btn-secondary" onclick="closeSuppressModal()">Cancel</button>
+        <button type="button" class="lt-btn lt-btn-secondary" data-modal-close>Cancel</button>
         <button type="submit" class="lt-btn lt-btn-primary">Apply</button>
       </div>
     </form>
@@ -437,23 +437,11 @@
 
 {% block scripts %}
 <script>
-  setInterval(refreshAll, 30000);
-
-  // ── Relative time display for event age cells ──────────────────
-  function fmtRelTime(tsStr) {
-    if (!tsStr) return '–';
-    const d = new Date(tsStr.replace(' UTC', 'Z').replace(' ', 'T'));
-    if (isNaN(d)) return tsStr;
-    const secs = Math.floor((Date.now() - d) / 1000);
-    if (secs < 60)   return `${secs}s ago`;
-    if (secs < 3600) return `${Math.floor(secs/60)}m ago`;
-    if (secs < 86400) return `${Math.floor(secs/3600)}h ago`;
-    return `${Math.floor(secs/86400)}d ago`;
-  }
+  lt.autoRefresh.start(refreshAll, 30000);
 
   function updateEventAges() {
     document.querySelectorAll('.event-age[data-ts]').forEach(el => {
-      el.textContent = fmtRelTime(el.dataset.ts);
+      el.textContent = lt.time.ago(_toIso(el.dataset.ts));
     });
   }
 
@@ -463,8 +451,7 @@
   // ── Event duration (resolved_at - first_seen) ──────────────────
   function fmtDuration(firstTs, resolvedTs) {
     if (!firstTs || !resolvedTs) return '–';
-    const parse = s => new Date(s.replace(' UTC', 'Z').replace(' ', 'T'));
-    const secs = Math.floor((parse(resolvedTs) - parse(firstTs)) / 1000);
+    const secs = Math.floor((new Date(_toIso(resolvedTs)) - new Date(_toIso(firstTs))) / 1000);
     if (secs < 0) return '–';
     if (secs < 60)   return `${secs}s`;
     if (secs < 3600) return `${Math.floor(secs/60)}m`;