From 6dfe9f3d6a30de238ea48a2d479250a7973a017e Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Wed, 3 Jun 2026 17:26:50 -0700
Subject: [PATCH] Worker orbs/hub: preserve logo aspect ratio + use SoulSync
 logo on Manage Workers button

- Nucleus logo now fits to the pulsing radius using the image's natural
  width/height, so it no longer stretches to a square.
- Manage Workers button swaps the helix emoji for the SoulSync logo
  (trans2.png) inside the existing accent badge.
---
 webui/index.html            |  2 +-
 webui/static/style.css      |  1 +
 webui/static/worker-orbs.js | 12 ++++++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index f9c2507a..e9791098 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -651,7 +651,7 @@
                             <button class="em-manage-btn" id="manage-enrichment-btn"
                                     title="Manage enrichment workers — stats, unmatched items, manual matching"
                                     onclick="openEnrichmentManager()">
-                                <span class="em-manage-btn-icon">🧬</span>
+                                <span class="em-manage-btn-icon"><img src="/static/trans2.png" alt="SoulSync" class="em-manage-btn-logo"></span>
                                 <span class="em-manage-btn-label">Manage Workers</span>
                             </button>
                         </div>
diff --git a/webui/static/style.css b/webui/static/style.css
index cea5ca67..42325850 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -64905,6 +64905,7 @@ body.reduce-effects .dash-card::after {
     background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.55));
     box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
 }
+.em-manage-btn-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
 .em-manage-btn-label { background: linear-gradient(90deg, #fff, rgba(255,255,255,0.85)); -webkit-background-clip: text; background-clip: text; }
 
 .enrichment-manager-modal {
diff --git a/webui/static/worker-orbs.js b/webui/static/worker-orbs.js
index ad91a09d..1901a129 100644
--- a/webui/static/worker-orbs.js
+++ b/webui/static/worker-orbs.js
@@ -591,12 +591,16 @@
                 ctx.fill();
 
                 if (hubImageReady) {
-                    // SoulSync logo as the nucleus — sized to the pulsing radius,
-                    // brightness lifts a touch with energy
-                    const imgSize = hubR * 3.2;
+                    // SoulSync logo as the nucleus — fit to the pulsing radius while
+                    // preserving the image's natural aspect ratio (no stretch)
+                    const natW = hubImage.naturalWidth || 1;
+                    const natH = hubImage.naturalHeight || 1;
+                    const fit = (hubR * 3.2) / Math.max(natW, natH);
+                    const dw = natW * fit;
+                    const dh = natH * fit;
                     ctx.save();
                     ctx.globalAlpha = Math.min(1, 0.85 + energy * 0.15 + slow * 0.1);
-                    ctx.drawImage(hubImage, orb.x - imgSize / 2, orb.y - imgSize / 2, imgSize, imgSize);
+                    ctx.drawImage(hubImage, orb.x - dw / 2, orb.y - dh / 2, dw, dh);
                     ctx.restore();
                 } else {
                     // Fallback while the logo loads: solid bright core + highlight