From d8095cddb6a51ad3e1b9f76eb54df8d232046344 Mon Sep 17 00:00:00 2001
From: Robert Wojciechowski <hello@robertvoy.com>
Date: Tue, 24 Feb 2026 21:44:33 +0000
Subject: [PATCH] fix(ui): restore worker panel states and spacing behavior

---
 web/constants.js       |  4 +++-
 web/distributed.css    |  1 +
 web/sidebarRenderer.js |  7 ++++++-
 web/workerLifecycle.js | 35 +++++++++++++++++++++++++----------
 web/workerSettings.js  |  3 +++
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/web/constants.js b/web/constants.js
index b594202..863aa06 100644
--- a/web/constants.js
+++ b/web/constants.js
@@ -106,7 +106,9 @@ export const PULSE_ANIMATION_CSS = `
     .worker-settings.expanded {
         max-height: 500px;
         opacity: 1;
-        padding: 12px 0;
+        padding: 12px;
+        margin-top: 8px;
+        margin-bottom: 8px;
     }
 
     /* Cloudflare tunnel spinner */
diff --git a/web/distributed.css b/web/distributed.css
index 0024e65..b36a911 100644
--- a/web/distributed.css
+++ b/web/distributed.css
@@ -180,6 +180,7 @@
     padding: 5px 10px !important;
     font-size: 14px !important;
     font-weight: bold !important;
+    border-radius: 6px !important;
 }
 
 .log-modal__body {
diff --git a/web/sidebarRenderer.js b/web/sidebarRenderer.js
index 20224cb..de74ab9 100644
--- a/web/sidebarRenderer.js
+++ b/web/sidebarRenderer.js
@@ -15,7 +15,12 @@ export function updateWorkerCard(extension, workerId, newStatus = {}) {
         return false;
     }
 
-    if (newStatus.online && newStatus.processing) {
+    const workerState = extension.state.getWorker(workerId);
+    const isLaunching = Boolean(workerState?.launching);
+
+    if (isLaunching && !newStatus.online) {
+        extension.ui.updateStatusDot(workerId, STATUS_COLORS.PROCESSING_YELLOW, "Launching...", true);
+    } else if (newStatus.online && newStatus.processing) {
         const queue = newStatus.queueCount || 0;
         extension.ui.updateStatusDot(workerId, STATUS_COLORS.PROCESSING_YELLOW, `Online - Processing (${queue} in queue)`, false);
     } else if (newStatus.online) {
diff --git a/web/workerLifecycle.js b/web/workerLifecycle.js
index 875c353..4893a8f 100644
--- a/web/workerLifecycle.js
+++ b/web/workerLifecycle.js
@@ -33,6 +33,14 @@ function setButtonClass(button, className) {
     }
 }
 
+function setButtonVisibility(button, visible) {
+    if (!button) {
+        return;
+    }
+    button.classList.toggle("is-hidden", !visible);
+    button.style.display = visible ? "" : "none";
+}
+
 export async function checkAllWorkerStatuses(extension) {
     if (_statusCheckRunning || !extension.panelElement) {
         return;
@@ -388,35 +396,36 @@ export function updateWorkerControls(extension, workerId) {
     const logBtn = document.getElementById(`log-${workerId}`);
 
     // Show log button immediately if we have log file info (even if worker is still starting)
-    if (managedInfo?.log_file && logBtn) {
-        logBtn.classList.remove("is-hidden");
-        setButtonClass(logBtn, "btn--log");
-    } else if (logBtn && !managedInfo) {
-        logBtn.classList.add("is-hidden");
+    if (logBtn) {
+        const showLog = Boolean(managedInfo?.log_file);
+        setButtonVisibility(logBtn, showLog);
+        if (showLog) {
+            setButtonClass(logBtn, "btn--log");
+        }
     }
 
     if (status?.online || managedInfo) {
         // Worker is running or we just launched it
-        launchBtn.classList.add("is-hidden");
+        setButtonVisibility(launchBtn, false);
 
         if (managedInfo) {
             // Only show stop button if we manage this worker
-            stopBtn.classList.remove("is-hidden");
+            setButtonVisibility(stopBtn, true);
             stopBtn.disabled = false;
             stopBtn.textContent = "Stop";
             setButtonClass(stopBtn, "btn--stop");
         } else {
             // Hide stop button for workers launched outside UI
-            stopBtn.classList.add("is-hidden");
+            setButtonVisibility(stopBtn, false);
         }
     } else {
         // Worker is not running
-        launchBtn.classList.remove("is-hidden");
+        setButtonVisibility(launchBtn, true);
         launchBtn.disabled = false;
         launchBtn.textContent = "Launch";
         setButtonClass(launchBtn, "btn--launch");
 
-        stopBtn.classList.add("is-hidden");
+        setButtonVisibility(stopBtn, false);
     }
 }
 
@@ -539,12 +548,18 @@ export function toggleWorkerExpanded(extension, workerId) {
     if (extension.state.isWorkerExpanded(workerId)) {
         extension.state.setWorkerExpanded(workerId, false);
         settingsDiv.classList.remove("expanded");
+        settingsDiv.style.padding = "0 12px";
+        settingsDiv.style.marginTop = "0";
+        settingsDiv.style.marginBottom = "0";
         if (settingsArrow) {
             settingsArrow.classList.remove("settings-arrow--expanded");
         }
     } else {
         extension.state.setWorkerExpanded(workerId, true);
         settingsDiv.classList.add("expanded");
+        settingsDiv.style.padding = "12px";
+        settingsDiv.style.marginTop = "8px";
+        settingsDiv.style.marginBottom = "8px";
         if (settingsArrow) {
             settingsArrow.classList.add("settings-arrow--expanded");
         }
diff --git a/web/workerSettings.js b/web/workerSettings.js
index f38d5e9..42e7cf9 100644
--- a/web/workerSettings.js
+++ b/web/workerSettings.js
@@ -149,6 +149,9 @@ export async function saveWorkerSettings(extension, workerId) {
             life: 3000,
         });
 
+        // Keep post-save card height consistent with the default collapsed layout.
+        extension.state.setWorkerExpanded(workerId, false);
+
         // Refresh the UI
         if (extension.panelElement) {
             renderSidebarContent(extension, extension.panelElement);