From 3439a5722ce43230f395bab2e93e40a64895cd51 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Mon, 15 Dec 2025 16:48:36 -0300
Subject: [PATCH] Fix all app CSS loading - add all app CSS to index.html head

---
 ui/suite/chat/chat.html | 168 +++++++++++++++++++++++-----------------
 ui/suite/index.html     |  12 +++
 2 files changed, 110 insertions(+), 70 deletions(-)

diff --git a/ui/suite/chat/chat.html b/ui/suite/chat/chat.html
index 1f7a32c..680e650 100644
--- a/ui/suite/chat/chat.html
+++ b/ui/suite/chat/chat.html
@@ -1,54 +1,73 @@
-<link rel="stylesheet" href="/chat/chat.css" />
+<link rel="stylesheet" href="chat/chat.css" />
 <script>
     // WebSocket URL - use relative path to go through botui proxy
-    const WS_BASE_URL = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    const WS_BASE_URL =
+        window.location.protocol === "https:" ? "wss://" : "ws://";
     const WS_URL = `${WS_BASE_URL}${window.location.host}`;
-    
+
     // Message Type Constants
-    const MessageType = { EXTERNAL: 0, USER: 1, BOT_RESPONSE: 2, CONTINUE: 3, SUGGESTION: 4, CONTEXT_CHANGE: 5 };
-    
+    const MessageType = {
+        EXTERNAL: 0,
+        USER: 1,
+        BOT_RESPONSE: 2,
+        CONTINUE: 3,
+        SUGGESTION: 4,
+        CONTEXT_CHANGE: 5,
+    };
+
     // State
-    let ws = null, currentSessionId = null, currentUserId = null, currentBotId = "default";
-    let isStreaming = false, streamingMessageId = null, currentStreamingContent = "";
+    let ws = null,
+        currentSessionId = null,
+        currentUserId = null,
+        currentBotId = "default";
+    let isStreaming = false,
+        streamingMessageId = null,
+        currentStreamingContent = "";
     let reconnectAttempts = 0;
     const maxReconnectAttempts = 5;
-    
+
     // Initialize auth and WebSocket
     async function initChat() {
         try {
-            updateConnectionStatus('connecting');
-            const botName = 'default';
+            updateConnectionStatus("connecting");
+            const botName = "default";
             // Use the botui proxy for auth (handles SSL cert issues)
-            const response = await fetch(`/api/auth?bot_name=${encodeURIComponent(botName)}`);
+            const response = await fetch(
+                `/api/auth?bot_name=${encodeURIComponent(botName)}`,
+            );
             const auth = await response.json();
             currentUserId = auth.user_id;
             currentSessionId = auth.session_id;
             currentBotId = auth.bot_id || "default";
-            console.log("Auth:", { currentUserId, currentSessionId, currentBotId });
+            console.log("Auth:", {
+                currentUserId,
+                currentSessionId,
+                currentBotId,
+            });
             connectWebSocket();
         } catch (e) {
             console.error("Auth failed:", e);
-            updateConnectionStatus('disconnected');
+            updateConnectionStatus("disconnected");
             setTimeout(initChat, 3000);
         }
     }
-    
+
     function connectWebSocket() {
         if (ws) ws.close();
         // Use the botui proxy for WebSocket (handles SSL cert issues)
         const url = `${WS_URL}/ws?session_id=${currentSessionId}&user_id=${currentUserId}`;
         ws = new WebSocket(url);
-        
+
         ws.onopen = () => {
             console.log("WebSocket connected");
-            updateConnectionStatus('connected');
+            updateConnectionStatus("connected");
             reconnectAttempts = 0;
         };
-        
+
         ws.onmessage = (event) => {
             try {
                 const data = JSON.parse(event.data);
-                if (data.type === 'connected') return;
+                if (data.type === "connected") return;
                 if (data.message_type === MessageType.BOT_RESPONSE) {
                     processMessage(data);
                 }
@@ -56,46 +75,46 @@
                 console.error("WS message error:", e);
             }
         };
-        
+
         ws.onclose = () => {
-            updateConnectionStatus('disconnected');
+            updateConnectionStatus("disconnected");
             if (reconnectAttempts < maxReconnectAttempts) {
                 reconnectAttempts++;
                 setTimeout(connectWebSocket, 1000 * reconnectAttempts);
             }
         };
-        
+
         ws.onerror = (e) => console.error("WebSocket error:", e);
     }
-    
+
     function processMessage(data) {
         if (data.is_complete) {
             if (isStreaming) {
                 finalizeStreaming();
             } else {
-                addMessage('bot', data.content);
+                addMessage("bot", data.content);
             }
             isStreaming = false;
         } else {
             if (!isStreaming) {
                 isStreaming = true;
-                streamingMessageId = 'streaming-' + Date.now();
-                currentStreamingContent = data.content || '';
-                addMessage('bot', currentStreamingContent, streamingMessageId);
+                streamingMessageId = "streaming-" + Date.now();
+                currentStreamingContent = data.content || "";
+                addMessage("bot", currentStreamingContent, streamingMessageId);
             } else {
-                currentStreamingContent += data.content || '';
+                currentStreamingContent += data.content || "";
                 updateStreaming(currentStreamingContent);
             }
         }
     }
-    
+
     function addMessage(sender, content, msgId = null) {
-        const messages = document.getElementById('messages');
-        const div = document.createElement('div');
+        const messages = document.getElementById("messages");
+        const div = document.createElement("div");
         div.className = `message ${sender}`;
         if (msgId) div.id = msgId;
-        
-        if (sender === 'user') {
+
+        if (sender === "user") {
             div.innerHTML = `<div class="message-content user-message">${escapeHtml(content)}</div>`;
         } else {
             div.innerHTML = `<div class="message-content bot-message">${marked.parse(content)}</div>`;
@@ -103,82 +122,91 @@
         messages.appendChild(div);
         messages.scrollTop = messages.scrollHeight;
     }
-    
+
     function updateStreaming(content) {
         const el = document.getElementById(streamingMessageId);
-        if (el) el.querySelector('.message-content').innerHTML = marked.parse(content);
+        if (el)
+            el.querySelector(".message-content").innerHTML =
+                marked.parse(content);
     }
-    
+
     function finalizeStreaming() {
         const el = document.getElementById(streamingMessageId);
         if (el) {
-            el.querySelector('.message-content').innerHTML = marked.parse(currentStreamingContent);
-            el.removeAttribute('id');
+            el.querySelector(".message-content").innerHTML = marked.parse(
+                currentStreamingContent,
+            );
+            el.removeAttribute("id");
         }
         streamingMessageId = null;
-        currentStreamingContent = '';
+        currentStreamingContent = "";
     }
-    
+
     function sendMessage() {
-        const input = document.getElementById('messageInput');
+        const input = document.getElementById("messageInput");
         const content = input.value.trim();
         if (!content || !ws || ws.readyState !== WebSocket.OPEN) return;
-        
-        addMessage('user', content);
-        
-        ws.send(JSON.stringify({
-            bot_id: currentBotId,
-            user_id: currentUserId,
-            session_id: currentSessionId,
-            channel: 'web',
-            content: content,
-            message_type: MessageType.USER,
-            timestamp: new Date().toISOString()
-        }));
-        
-        input.value = '';
+
+        addMessage("user", content);
+
+        ws.send(
+            JSON.stringify({
+                bot_id: currentBotId,
+                user_id: currentUserId,
+                session_id: currentSessionId,
+                channel: "web",
+                content: content,
+                message_type: MessageType.USER,
+                timestamp: new Date().toISOString(),
+            }),
+        );
+
+        input.value = "";
         input.focus();
     }
-    
+
     function updateConnectionStatus(status) {
-        const el = document.getElementById('connectionStatus');
+        const el = document.getElementById("connectionStatus");
         if (el) el.className = `connection-status ${status}`;
     }
-    
+
     function escapeHtml(text) {
-        const div = document.createElement('div');
+        const div = document.createElement("div");
         div.textContent = text;
         return div.innerHTML;
     }
-    
+
     // Initialize chat - runs immediately when script is executed
     // (works both on full page load and HTMX partial load)
     function setupChat() {
-        const input = document.getElementById('messageInput');
-        const sendBtn = document.getElementById('sendBtn');
-        
+        const input = document.getElementById("messageInput");
+        const sendBtn = document.getElementById("sendBtn");
+
         if (sendBtn) sendBtn.onclick = sendMessage;
         if (input) {
-            input.addEventListener('keypress', (e) => {
-                if (e.key === 'Enter') sendMessage();
+            input.addEventListener("keypress", (e) => {
+                if (e.key === "Enter") sendMessage();
             });
         }
-        
+
         initChat();
     }
-    
+
     // Initialize after a micro-delay to ensure DOM is ready
     // This works for both full page loads and HTMX partial loads
     setTimeout(() => {
-        if (document.getElementById('messageInput') && !window.chatInitialized) {
+        if (
+            document.getElementById("messageInput") &&
+            !window.chatInitialized
+        ) {
             window.chatInitialized = true;
             setupChat();
         }
     }, 0);
-    
+
     // Fallback for full page load
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', () => {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => {
             if (!window.chatInitialized) {
                 window.chatInitialized = true;
                 setupChat();
diff --git a/ui/suite/index.html b/ui/suite/index.html
index 20802ab..c49f31f 100644
--- a/ui/suite/index.html
+++ b/ui/suite/index.html
@@ -14,7 +14,19 @@
         <link rel="stylesheet" href="css/app.css" />
         <link rel="stylesheet" href="css/apps-extended.css" />
         <link rel="stylesheet" href="css/components.css" />
+        <link rel="stylesheet" href="css/base.css" />
+
+        <!-- App-specific CSS -->
         <link rel="stylesheet" href="chat/chat.css" />
+        <link rel="stylesheet" href="calendar/calendar.css" />
+        <link rel="stylesheet" href="drive/drive.css" />
+        <link rel="stylesheet" href="mail/mail.css" />
+        <link rel="stylesheet" href="meet/meet.css" />
+        <link rel="stylesheet" href="paper/paper.css" />
+        <link rel="stylesheet" href="research/research.css" />
+        <link rel="stylesheet" href="tasks/tasks.css" />
+        <link rel="stylesheet" href="analytics/analytics.css" />
+        <link rel="stylesheet" href="monitoring/monitoring.css" />
 
         <!-- Local Libraries (no external CDN dependencies) -->
         <script src="js/vendor/htmx.min.js"></script>