fix(admin): render service health details as structured HTML

frontend/src/admin.ts

@@ -562,17 +562,21 @@ async function deleteOverride(id: number) {
 async function renderServiceRow(service: any) {
   const svcDetail = service.detail || "";
 
-  // playout service returns json detail, all others return ISO formatted time string
+  // playout service returns json detail, all others return `local process` or `ping ok`
   if (service.name === "playout" && svcDetail) {
     try {
       // create a list of key-value pairs for each property in the JSON object
       const detailObj = JSON.parse(svcDetail);
-      service.detail = Object.entries(detailObj)
+      // create a list item for each key-value pair in the object
-        .map(([key, value]) => `${key}: ${value}`)
+      const detailList = Object.entries(detailObj)
-        .join("\n");
+        .map(([key, value]) => `<li><strong>${key}:</strong> ${value}</li>`)
+        .join("");
+      service.detail = `<ul>${detailList}</ul>`;
     } catch {
       // ignore JSON parse errors
     }
+  } else {
+    service.detail = `<p>${service.detail}</p>`;
   }
 
   const row = document.createElement("article");
@@ -584,7 +588,7 @@ async function renderServiceRow(service: any) {
     </div>
     <div class="service-row-right">
       <p class="service-status service-status-${service.status}">${service.status}</p>
-      <p>${service.detail}</p>
+      ${service.detail}
     </div>
   `;
   return row;