From 2fc8b64964193891258e0182bb09137516007ae3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 7 Apr 2026 10:36:32 +0000
Subject: [PATCH 1/2] Initial plan


From 739f6a08da6ce0f7a2768feafe3121776f68b389 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 7 Apr 2026 10:39:59 +0000
Subject: [PATCH 2/2] Add service icon to modal header in
 openServiceDetailModal and openCredsModal

Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/3f26f03c-29fc-4d37-9d53-eebfb8a34c52

Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com>
---
 .../static/css/modals.css                     | 11 +++++++
 .../static/js/service-detail.js               | 32 +++++++++++++++++--
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/app/sovran_systemsos_web/static/css/modals.css b/app/sovran_systemsos_web/static/css/modals.css
index f98e956..371aa7b 100644
--- a/app/sovran_systemsos_web/static/css/modals.css
+++ b/app/sovran_systemsos_web/static/css/modals.css
@@ -147,6 +147,17 @@ button.btn-reboot:hover:not(:disabled) {
   font-size: 1.15rem;
   font-weight: 700;
   flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.creds-title-icon {
+  width: 28px;
+  height: 28px;
+  vertical-align: middle;
+  border-radius: 6px;
+  flex-shrink: 0;
 }
 
 .creds-close-btn {
diff --git a/app/sovran_systemsos_web/static/js/service-detail.js b/app/sovran_systemsos_web/static/js/service-detail.js
index faf869c..9ed9eef 100644
--- a/app/sovran_systemsos_web/static/js/service-detail.js
+++ b/app/sovran_systemsos_web/static/js/service-detail.js
@@ -55,7 +55,20 @@ function _attachCopyHandlers(container) {
 
 async function openServiceDetailModal(unit, name, icon) {
   if (!$credsModal) return;
-  if ($credsTitle) $credsTitle.textContent = name;
+  if ($credsTitle) {
+    $credsTitle.innerHTML = '';
+    if (icon) {
+      var iconImg = document.createElement("img");
+      iconImg.className = "creds-title-icon";
+      iconImg.src = "/static/icons/" + escHtml(icon) + ".svg";
+      iconImg.alt = name;
+      iconImg.onerror = function() { this.style.display = "none"; };
+      $credsTitle.appendChild(iconImg);
+    }
+    var nameSpan = document.createElement("span");
+    nameSpan.textContent = name;
+    $credsTitle.appendChild(nameSpan);
+  }
   if ($credsBody) $credsBody.innerHTML = '<p class="creds-loading">Loading…</p>';
   $credsModal.classList.add("open");
 
@@ -370,9 +383,22 @@ async function openServiceDetailModal(unit, name, icon) {
 
 // ── Credentials info modal ────────────────────────────────────────
 
-async function openCredsModal(unit, name) {
+async function openCredsModal(unit, name, icon) {
   if (!$credsModal) return;
-  if ($credsTitle) $credsTitle.textContent = name + " — Connection Info";
+  if ($credsTitle) {
+    $credsTitle.innerHTML = '';
+    if (icon) {
+      var iconImg = document.createElement("img");
+      iconImg.className = "creds-title-icon";
+      iconImg.src = "/static/icons/" + escHtml(icon) + ".svg";
+      iconImg.alt = name;
+      iconImg.onerror = function() { this.style.display = "none"; };
+      $credsTitle.appendChild(iconImg);
+    }
+    var nameSpan = document.createElement("span");
+    nameSpan.textContent = name + " — Connection Info";
+    $credsTitle.appendChild(nameSpan);
+  }
   if ($credsBody) $credsBody.innerHTML = '<p class="creds-loading">Loading…</p>';
   $credsModal.classList.add("open");
   try {