fix(ui): dynamic suggestion text and borders contrast, cache busting

src/ui_server/mod.rs

@@ -922,17 +922,12 @@ async fn handle_task_progress_ws_proxy(
                     // Log manifest_update messages for debugging
                     let is_manifest = text.contains("manifest_update");
                     if is_manifest {
-                        info!(
-                            "[WS_PROXY] Forwarding manifest_update to client: {}...",
-                            &text[..text.len().min(200)]
-                        );
                     } else if text.contains("task_progress") {
                         debug!("[WS_PROXY] Forwarding task_progress to client");
                     }
                     match client_tx.send(AxumMessage::Text(text)).await {
                         Ok(()) => {
                             if is_manifest {
-                                info!("[WS_PROXY] manifest_update SENT successfully to client");
                             }
                         }
                         Err(e) => {

ui/suite/chat/chat.css

@@ -246,14 +246,14 @@
 
 .user-message {
     background: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
-    color: #ffffff !important;
+    color: var(--chat-fg1, #ffffff) !important;
     border-bottom-right-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 .bot-message {
     background: var(--chat-color2, var(--surface, var(--card, #2a2a2a)));
-    color: #000000 !important;
+    color: var(--chat-fg2, var(--text)) !important;
     border-bottom-left-radius: 4px;
     border: 1px solid var(--chat-color1, rgba(0, 0, 0, 0.2));
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -270,7 +270,7 @@
 .bot-message h2,
 .bot-message h3,
 .bot-message h4 {
-    color: #000000 !important;
+    color: var(--chat-fg2, var(--text)) !important;
 }
 
 /* Markdown content in bot messages */
@@ -555,9 +555,9 @@ footer {
 .suggestion-button {
     padding: 6px 12px;
     border-radius: 20px;
-    border: 2px solid var(--chat-color2, #002147);
+    border: 2px solid var(--chat-color1, #002147);
     background: var(--chat-color2, #002147);
-    color: #ffffff;
+    color: var(--chat-fg2, var(--text, #ffffff));
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
@@ -587,7 +587,7 @@ footer {
 .suggestion-chip:hover,
 .suggestion-button:hover {
     background: var(--chat-color1, var(--suggestion-color, #4a9eff));
-    color: #ffffff;
+    color: var(--chat-fg1, #ffffff);
     border-color: var(--chat-color1, var(--suggestion-color, #6bb3ff));
     transform: translateY(-2px) scale(1.02);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
@@ -629,7 +629,7 @@ form.input-container {
     border-radius: 20px;
     border: none;
     background: transparent;
-    color: #ffffff;
+    color: var(--text, inherit);
     font-size: 15px;
     outline: none;
     transition: all 0.2s;

ui/suite/chat/chat.html

@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/suite/chat/chat.css" />
+<link rel="stylesheet" href="/suite/chat/chat.css?v=3" />
 <link rel="stylesheet" href="/suite/css/markdown-message.css" />
 
 <div class="chat-layout" id="chat-app">
@@ -941,6 +941,18 @@
         }
 
         // Apply theme data from WebSocket events
+        function getContrastYIQ(hexcolor) {
+            if (!hexcolor || typeof hexcolor !== 'string') return '#ffffff';
+            hexcolor = hexcolor.replace("#", "");
+            if (hexcolor.length === 3) hexcolor = hexcolor.split('').map(function (c) { return c + c; }).join('');
+            if (hexcolor.length !== 6) return '#ffffff';
+            var r = parseInt(hexcolor.substr(0, 2), 16);
+            var g = parseInt(hexcolor.substr(2, 2), 16);
+            var b = parseInt(hexcolor.substr(4, 2), 16);
+            var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+            return (yiq >= 128) ? '#000000' : '#ffffff';
+        }
+
         function applyThemeData(themeData) {
             console.log("Applying theme data:", themeData);
 
@@ -963,6 +975,9 @@
             document.documentElement.style.setProperty("--primary", color1);
             document.documentElement.style.setProperty("--accent", color1);
 
+            document.documentElement.style.setProperty("--chat-fg1", getContrastYIQ(color1));
+            document.documentElement.style.setProperty("--chat-fg2", getContrastYIQ(color2));
+
             console.log("Theme applied:", { color1: color1, color2: color2, logo: logo, title: title });
         }
 
@@ -1016,6 +1031,8 @@
                         document.documentElement.style.setProperty("--color2", color2);
                         document.documentElement.style.setProperty("--primary", color1);
                         document.documentElement.style.setProperty("--accent", color1);
+                        document.documentElement.style.setProperty("--chat-fg1", getContrastYIQ(color1));
+                        document.documentElement.style.setProperty("--chat-fg2", getContrastYIQ(color2));
                         console.log("Bot config colors applied:", { color1: color1, color2: color2 });
                     } else {
                         console.log("Bot config colors skipped - user selected custom theme:", localStorageTheme);