chore: commit remaining workspace updates

.gitignore

@@ -3,5 +3,3 @@ logs/
 gpu_config.json
 __pycache__/
 AGENTS.md
-docs/REFACTOR_PLAN.md
-docs/refactor-validation-checklist.md

web/tunnelManager.js

@@ -4,37 +4,39 @@ export function updateTunnelUIElements(extension, isRunning, isStarting) {
 
     const elements = extension.tunnelElements || {};
     const status = (extension.tunnelStatus?.status || "stopped").toLowerCase();
-    const enableColor = "#665533"; // requested yellow/brown tone
-    const disableColor = "#7c4a4a"; // match worker delete button
-    const colors = {
-        running: disableColor,
-        starting: enableColor,
-        stopped: enableColor,
-        error: disableColor,
-        unknown: enableColor,
-        stopping: disableColor,
-    };
+    const tunnelButtonColorClasses = ["tunnel-button--enable", "tunnel-button--disable"];
+    const tunnelStatusColorClasses = ["tunnel-status--enable", "tunnel-status--disable"];
 
     if (elements.button) {
         elements.button.disabled = status === "starting" || status === "stopping";
+        elements.button.classList.remove(...tunnelButtonColorClasses);
+
         if (status === "starting") {
             elements.button.innerHTML = `<span class="tunnel-spinner"></span> Starting...`;
-            elements.button.style.backgroundColor = enableColor;
+            elements.button.classList.add("tunnel-button--enable");
+        } else if (status === "stopping") {
+            elements.button.innerHTML = `<span class="tunnel-spinner"></span> Stopping...`;
+            elements.button.classList.add("tunnel-button--disable");
         } else if (status === "running") {
             elements.button.textContent = "Disable Cloudflare Tunnel";
-            elements.button.style.backgroundColor = disableColor;
+            elements.button.classList.add("tunnel-button--disable");
         } else if (status === "error") {
             elements.button.textContent = "Retry Cloudflare Tunnel";
-            elements.button.style.backgroundColor = disableColor;
+            elements.button.classList.add("tunnel-button--disable");
         } else {
             elements.button.textContent = "Enable Cloudflare Tunnel";
-            elements.button.style.backgroundColor = enableColor;
+            elements.button.classList.add("tunnel-button--enable");
         }
     }
 
     if (elements.status) {
         elements.status.textContent = status.toUpperCase();
-        elements.status.style.backgroundColor = colors[status] || colors.stopped;
+        elements.status.classList.remove(...tunnelStatusColorClasses);
+        if (status === "running" || status === "error" || status === "stopping") {
+            elements.status.classList.add("tunnel-status--disable");
+        } else {
+            elements.status.classList.add("tunnel-status--enable");
+        }
     }
 
     if (elements.url) {

web/ui/entityCard.js

@@ -23,6 +23,7 @@ export function renderEntityCard(ui, cardConfigs, entityType, data, extension) {
     card.appendChild(leftColumn);
 
     const rightColumn = ui.createCardColumn('content');
+    rightColumn.classList.add("entity-card-content");
 
     const infoRow = ui.createInfoRow();
     if (config.infoRowPadding) {
@@ -87,14 +88,15 @@ export function renderEntityCard(ui, cardConfigs, entityType, data, extension) {
     rightColumn.appendChild(infoRow);
 
     if (config.hover === true) {
+        rightColumn.classList.add("entity-card-content--hoverable");
         rightColumn.onmouseover = () => {
-            rightColumn.style.backgroundColor = "#333";
+            rightColumn.classList.add("entity-card-content--hovered");
             if (settingsArrow) {
                 settingsArrow.style.color = "#fff";
             }
         };
         rightColumn.onmouseout = () => {
-            rightColumn.style.backgroundColor = "transparent";
+            rightColumn.classList.remove("entity-card-content--hovered");
             if (settingsArrow) {
                 settingsArrow.style.color = "#888";
             }