Make SLA priority-alert banner update live on priority change (#64)

The P1/P2 SLA breach banner and progress bar were rendered server-side
at page load and never touched again. Changing a ticket's priority in
edit mode (P1->P3 or P3->P1) left the banner in a stale state —
showing/counting for a priority that no longer applied — until the
page was reloaded.

Moved the banner's render/update/teardown logic into a reusable
renderSlaBanner() in ticket.js (verified via jsdom against real
DOM: creates the banner for P1/P2, removes it when priority drops
below P2 or the ticket is closed, and re-creates it including the
already-breached state when priority is raised into P1/P2 range).
The priority-change handler now calls it after a successful update,
and the initial page load calls it once instead of relying on
duplicated server-rendered markup + inline script.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015nCxwFFsy8ouMWzn56rPVP

views/TicketView.php

@@ -114,6 +114,7 @@ $json_priority   = json_encode($ticket['priority'], JSON_HEX_TAG);
 $json_category   = json_encode($ticket['category'], JSON_HEX_TAG);
 $json_type       = json_encode($ticket['type'], JSON_HEX_TAG);
 $json_updated_at     = json_encode($ticket['updated_at'], JSON_HEX_TAG);
+$json_created_at_ts  = json_encode((int)strtotime($ticket['created_at']), JSON_HEX_TAG);
 $json_total_comments = json_encode((int)$totalComments, JSON_HEX_TAG);
 $json_comment_page   = json_encode((int)$commentPageSize, JSON_HEX_TAG);
 $json_current_uid    = json_encode((int)($currentUser['user_id'] ?? 0), JSON_HEX_TAG);
@@ -127,6 +128,7 @@ window.ticketData = {
     category:       {$json_category},
     type:           {$json_type},
     updated_at:     {$json_updated_at},
+    created_at_ts:  {$json_created_at_ts},
     totalComments:  {$json_total_comments},
     commentOffset:  {$json_comment_page},
     commentPageSize:{$json_comment_page},
@@ -209,95 +211,17 @@ include __DIR__ . '/layout_header.php';
   </div>
 </div>
 
-<?php if ($priorityNum <= 2 && $ticket['status'] !== 'Closed') : ?>
-    <?php
-    $slaTargetHours = match ($priorityNum) {
-        1 => 8, 2 => 24, default => 72
-    };
-    $elapsedSeconds = time() - strtotime($ticket['created_at']);
-    $slaPct         = min(100, round(($elapsedSeconds / ($slaTargetHours * 3600)) * 100));
-    $slaBreached    = $elapsedSeconds >= ($slaTargetHours * 3600);
-    $slaClass       = $priorityNum === 1 ? 'lt-sla-p1' : 'lt-sla-p2';
-    $slaIcon        = $priorityNum === 1 ? '[ ! ]' : '[ ~ ]';
-    $slaLabel       = $priorityNum === 1 ? 'P1 Critical' : 'P2 High';
-    $slaId          = 'sla-' . htmlspecialchars($ticket['ticket_id'], ENT_QUOTES, 'UTF-8');
-    ?>
-<!-- SLA banner — P1/P2 only, dismissible per session -->
-<div class="<?= $slaClass ?>" id="priorityAlertBanner" role="alert" aria-live="polite"
-     data-sla-id="<?= $slaId ?>"
-     data-created-at="<?= (int)strtotime($ticket['created_at']) ?>"
-     data-sla-hours="<?= $slaTargetHours ?>"
-     style="margin-bottom:0.75rem">
-  <span class="lt-sla-icon" aria-hidden="true"><?= $slaIcon ?></span>
-  <div class="lt-sla-info">
-    <div class="lt-sla-title">
-      <?= $slaLabel ?> — SLA: <span id="slaElapsedTimer"></span> elapsed of <?= $slaTargetHours ?>h limit
-      <?php if ($slaBreached) : ?>
-        &nbsp;<span class="lt-text-danger" id="slaBreachLabel">BREACHED</span>
-      <?php endif ?>
-    </div>
-    <div class="lt-sla-bar" aria-label="SLA progress <?= $slaPct ?>%" id="slaProgress">
-      <div class="lt-sla-fill" id="slaProgressBar" style="width:<?= $slaPct ?>%"></div>
-    </div>
-  </div>
-    <?php if (!$slaBreached) : ?>
-        <div class="lt-sla-meta" id="slaCountdownTimer"></div>
-    <?php else : ?>
-        <div class="lt-sla-meta lt-text-danger" id="slaCountdownTimer">+<span id="slaOverrunTimer"><?= round(($elapsedSeconds - $slaTargetHours * 3600) / 3600, 1) ?>h</span> over</div>
-    <?php endif ?>
-  <button type="button" class="lt-sla-dismiss" aria-label="Dismiss">&#x2715;</button>
-</div>
+<?php // SLA banner (P1/P2, non-Closed tickets) is rendered and kept live by
+      // renderSlaBanner() in ticket.js, so it can also rebuild/tear itself
+      // down when priority changes client-side without a page reload. ?>
+<div id="priorityAlertBannerAnchor"></div>
 <script nonce="<?= htmlspecialchars($nonce, ENT_QUOTES, 'UTF-8') ?>">
-(function(){
-  var banner = document.getElementById('priorityAlertBanner');
-  var id = banner.dataset.slaId;
-  try { if (id && sessionStorage.getItem('lt_sla_dismissed_' + id)) banner.hidden = true; } catch(e) {}
-
-  banner.querySelector('.lt-sla-dismiss').addEventListener('click', function() {
-    banner.hidden = true;
-    try { if (id) sessionStorage.setItem('lt_sla_dismissed_' + id, '1'); } catch(e) {}
-  });
-
-  document.addEventListener('DOMContentLoaded', function() {
-    if (banner.hidden) return;
-    var createdAt = parseInt(banner.dataset.createdAt, 10) * 1000;
-    var slaMs     = parseInt(banner.dataset.slaHours, 10) * 3600 * 1000;
-    var deadline  = new Date(createdAt + slaMs);
-    var elapsedEl   = document.getElementById('slaElapsedTimer');
-    var countdownEl = document.getElementById('slaCountdownTimer');
-    var overrunEl   = document.getElementById('slaOverrunTimer');
-    var fillBar     = document.getElementById('slaProgressBar');
-    var progressWrap = document.getElementById('slaProgress');
-
-    function fmtHMS(ms) {
-      var s = Math.floor(Math.abs(ms) / 1000);
-      var h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), ss = s % 60;
-      return [h, m, ss].map(function(n){ return String(n).padStart(2,'0'); }).join(':');
+document.addEventListener('DOMContentLoaded', function() {
+    if (typeof renderSlaBanner === 'function') {
+        renderSlaBanner(window.ticketData.priority);
     }
-
-    function tick() {
-      var now      = Date.now();
-      var elapsed  = now - createdAt;
-      var remaining = deadline - now;
-      var pct      = Math.min(100, Math.round((elapsed / slaMs) * 100));
-
-      if (elapsedEl)   elapsedEl.textContent = fmtHMS(elapsed);
-      if (fillBar)     fillBar.style.width = pct + '%';
-      if (progressWrap) progressWrap.setAttribute('aria-label', 'SLA progress ' + pct + '%');
-
-      if (remaining > 0) {
-        if (countdownEl) countdownEl.textContent = fmtHMS(remaining) + ' remaining';
-      } else {
-        if (overrunEl) overrunEl.textContent = fmtHMS(-remaining);
-      }
-    }
-
-    tick();
-    setInterval(tick, 1000);
-  });
-})();
+});
 </script>
-<?php endif ?>
 
 <!-- ═══════════════════════════════════════════════════════════
      TICKET DETAIL FRAME