From 5618ed436784e0cf3e6f68ee04850b5d54876e52 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Wed, 4 Feb 2026 13:54:26 -0300
Subject: [PATCH] Update: UI files and add error-reporter.js

---
 src/ui_server/mod.rs              |  208 ++-
 ui/suite/base.html                |    5 +-
 ui/suite/default.gbui             |   50 +-
 ui/suite/home.html                |    2 +-
 ui/suite/js/auth-service.js       |    4 +-
 ui/suite/js/error-reporter.js     |  135 ++
 ui/suite/js/htmx-app.js           |   29 +-
 ui/suite/js/security-bootstrap.js |    6 +
 ui/suite/js/suite_app.js          | 2459 ++++++++++++++---------------
 ui/suite/tasks/autotask.html      |    8 +-
 ui/suite/tasks/tasks.js           |   18 +-
 11 files changed, 1625 insertions(+), 1299 deletions(-)
 create mode 100644 ui/suite/js/error-reporter.js

diff --git a/src/ui_server/mod.rs b/src/ui_server/mod.rs
index 62e6aa1..e740d98 100644
--- a/src/ui_server/mod.rs
+++ b/src/ui_server/mod.rs
@@ -7,10 +7,10 @@ use axum::{
     http::{Request, StatusCode},
     response::{Html, IntoResponse, Response},
     routing::{any, get},
-    Router,
+    Json, Router,
 };
 use futures_util::{SinkExt, StreamExt};
-use log::{debug, error, info};
+use log::{debug, error, info, warn};
 #[cfg(feature = "embed-ui")]
 use rust_embed::RustEmbed;
 use serde::Deserialize;
@@ -130,8 +130,98 @@ const ROOT_FILES: &[&str] = &[
     "single.gbui",
 ];
 
-pub async fn index() -> impl IntoResponse {
-    serve_suite().await
+pub async fn index(OriginalUri(uri): OriginalUri) -> Response {
+    let path = uri.path();
+    
+    // Check if path contains static asset directories - serve them directly
+    let path_lower = path.to_lowercase();
+    if path_lower.contains("/js/") 
+        || path_lower.contains("/css/")
+        || path_lower.contains("/vendor/")
+        || path_lower.contains("/assets/")
+        || path_lower.contains("/public/")
+        || path_lower.contains("/partials/")
+        || path_lower.ends_with(".js") 
+        || path_lower.ends_with(".css") 
+        || path_lower.ends_with(".png") 
+        || path_lower.ends_with(".jpg") 
+        || path_lower.ends_with(".jpeg") 
+        || path_lower.ends_with(".gif") 
+        || path_lower.ends_with(".svg") 
+        || path_lower.ends_with(".ico") 
+        || path_lower.ends_with(".woff") 
+        || path_lower.ends_with(".woff2") 
+        || path_lower.ends_with(".ttf") 
+        || path_lower.ends_with(".eot")
+        || path_lower.ends_with(".mp4") 
+        || path_lower.ends_with(".webm")
+        || path_lower.ends_with(".mp3")
+        || path_lower.ends_with(".wav")
+    {
+        // Remove bot name prefix if present (e.g., /edu/suite/js/file.js -> suite/js/file.js)
+        let path_parts: Vec<&str> = path.split('/').collect();
+        let fs_path = if path_parts.len() > 1 {
+            let mut start_idx = 1;
+            let known_dirs = ["suite", "js", "css", "vendor", "assets", "public", "partials", "settings", "auth", "about", "drive", "chat", "tasks", "admin", "mail", "calendar", "meet", "docs", "sheet", "slides", "paper", "research", "sources", "learn", "analytics", "dashboards", "monitoring", "people", "crm", "tickets", "billing", "products", "video", "player", "canvas", "social", "project", "goals", "workspace", "designer"];
+            
+            if path_parts.len() > start_idx && !known_dirs.contains(&path_parts[start_idx]) {
+                start_idx += 1;
+            }
+            
+            path_parts[start_idx..].join("/")
+        } else {
+            path.to_string()
+        };
+        
+        let full_path = get_ui_root().join(&fs_path);
+        
+        debug!("index: Serving static file: {} -> {:?} (fs_path: {})", path, full_path, fs_path);
+        
+        #[cfg(feature = "embed-ui")]
+        {
+            let asset_path = fs_path.trim_start_matches('/');
+            if let Some(content) = Assets::get(asset_path) {
+                let mime = mime_guess::from_path(asset_path).first_or_octet_stream();
+                return ([(axum::http::header::CONTENT_TYPE, mime.as_ref())], content.data).into_response();
+            }
+        }
+        
+        #[cfg(not(feature = "embed-ui"))]
+        {
+            if let Ok(bytes) = tokio::fs::read(&full_path).await {
+                let mime = mime_guess::from_path(&full_path).first_or_octet_stream();
+                return (StatusCode::OK, [("content-type", mime.as_ref())], bytes).into_response();
+            }
+        }
+        
+        warn!("index: Static file not found: {} -> {:?}", path, full_path);
+        return StatusCode::NOT_FOUND.into_response();
+    }
+    
+    let path_parts: Vec<&str> = path.split('/').collect();
+    let bot_name = path_parts
+        .iter()
+        .rev()
+        .find(|part| {
+            !part.is_empty()
+                && **part != "chat"
+                && **part != "app"
+                && **part != "ws"
+                && **part != "ui"
+                && **part != "api"
+                && **part != "auth"
+                && **part != "suite"
+                && !part.ends_with(".js")
+                && !part.ends_with(".css")
+        })
+        .map(|s| s.to_string());
+
+    info!(
+        "index: Extracted bot_name: {:?} from path: {}",
+        bot_name,
+        path
+    );
+    serve_suite(bot_name).await.into_response()
 }
 
 pub fn get_ui_root() -> PathBuf {
@@ -196,7 +286,7 @@ pub async fn serve_minimal() -> impl IntoResponse {
     }
 }
 
-pub async fn serve_suite() -> impl IntoResponse {
+pub async fn serve_suite(bot_name: Option<String>) -> impl IntoResponse {
     let raw_html_res = {
         #[cfg(feature = "embed-ui")]
         {
@@ -235,6 +325,32 @@ pub async fn serve_suite() -> impl IntoResponse {
             #[allow(unused_mut)] // Mutable required for feature-gated blocks
             let mut html = raw_html;
 
+            // Inject base tag and bot_name into the page
+            if let Some(head_end) = html.find("</head>") {
+                // Set base href to include bot context if present (e.g., /edu/)
+                let base_href = if let Some(ref name) = bot_name {
+                    format!("/{}/", name)
+                } else {
+                    "/".to_string()
+                };
+                let base_tag = format!(r#"<base href="{}">"#, base_href);
+                html.insert_str(head_end, &base_tag);
+                
+                if let Some(name) = bot_name {
+                    info!("serve_suite: Injecting bot_name '{}' into page with base href='{}'", name, base_href);
+                    let bot_script = format!(
+                        r#"<script>window.__INITIAL_BOT_NAME__ = "{}";</script>"#,
+                        &name
+                    );
+                    html.insert_str(head_end + base_tag.len(), &bot_script);
+                    info!("serve_suite: Successfully injected base tag and bot_name script");
+                } else {
+                    info!("serve_suite: Successfully injected base tag (no bot_name)");
+                }
+            } else {
+                error!("serve_suite: Failed to find </head> tag to inject content");
+            }
+
             // Core Apps
             #[cfg(not(feature = "chat"))]
             {
@@ -452,14 +568,26 @@ async fn health(State(state): State<AppState>) -> (StatusCode, axum::Json<serde_
     }
 }
 
-async fn api_health() -> (StatusCode, axum::Json<serde_json::Value>) {
-    (
-        StatusCode::OK,
-        axum::Json(serde_json::json!({
-            "status": "ok",
-            "version": env!("CARGO_PKG_VERSION")
-        })),
-    )
+async fn api_health(State(state): State<AppState>) -> (StatusCode, axum::Json<serde_json::Value>) {
+    if state.health_check().await {
+        (
+            StatusCode::OK,
+            axum::Json(serde_json::json!({
+                "status": "ok",
+                "botserver": "healthy",
+                "version": env!("CARGO_PKG_VERSION")
+            })),
+        )
+    } else {
+        (
+            StatusCode::SERVICE_UNAVAILABLE,
+            axum::Json(serde_json::json!({
+                "status": "error",
+                "botserver": "unhealthy",
+                "version": env!("CARGO_PKG_VERSION")
+            })),
+        )
+    }
 }
 
 fn extract_app_context(headers: &axum::http::HeaderMap, path: &str) -> Option<String> {
@@ -588,6 +716,7 @@ async fn build_proxy_response(resp: reqwest::Response) -> Response<Body> {
 fn create_api_router() -> Router<AppState> {
     Router::new()
         .route("/health", get(api_health))
+        .route("/client-error", axum::routing::post(handle_client_error))
         .fallback(any(proxy_api))
 }
 
@@ -598,6 +727,35 @@ struct WsQuery {
     bot_name: Option<String>,
 }
 
+#[derive(Debug, Deserialize)]
+struct ClientError {
+    message: String,
+    stack: Option<String>,
+    source: String,
+    url: String,
+    user_agent: String,
+    timestamp: String,
+}
+
+async fn handle_client_error(Json(error): Json<ClientError>) -> impl IntoResponse {
+    warn!(
+        "CLIENT:{}: {} at {} ({}) - {}", 
+        error.source.to_uppercase(),
+        error.message,
+        error.url,
+        error.timestamp,
+        error.user_agent
+    );
+    
+    if let Some(stack) = &error.stack {
+        if !stack.is_empty() {
+            warn!("CLIENT:STACK: {}", stack);
+        }
+    }
+    
+    StatusCode::OK
+}
+
 #[derive(Debug, Default, Deserialize)]
 struct OptionalWsQuery {
     task_id: Option<String>,
@@ -613,11 +771,14 @@ async fn ws_proxy(
     let path_parts: Vec<&str> = uri.path().split('/').collect();
     let bot_name = params
         .bot_name
+        .filter(|name| name != "ws" && !name.is_empty())
         .or_else(|| {
             // Try to extract from path like /edu or /app/edu
             path_parts
                 .iter()
-                .find(|part| !part.is_empty() && *part != "chat" && *part != "app")
+                .find(|part| {
+                    !part.is_empty() && **part != "chat" && **part != "app" && **part != "ws"
+                })
                 .map(|s| s.to_string())
         })
         .unwrap_or_else(|| "default".to_string());
@@ -996,10 +1157,12 @@ fn add_static_routes(router: Router<AppState>, _suite_path: &Path) -> Router<App
     #[cfg(not(feature = "embed-ui"))]
     {
         let mut r = router;
-        // Serve suite directories ONLY through /suite/{dir} path
-        // This prevents duplicate routes that cause ServeDir to return index.html for file requests
+        // Serve suite directories at BOTH root level and /suite/{dir} path
+        // This allows HTML files to reference js/vendor/file.js directly
         for dir in SUITE_DIRS {
             let path = _suite_path.join(dir);
+            info!("Adding route for /{} -> {:?}", dir, path);
+            r = r.nest_service(&format!("/{dir}"), ServeDir::new(path.clone()));
             info!("Adding route for /suite/{} -> {:?}", dir, path);
             r = r.nest_service(&format!("/suite/{dir}"), ServeDir::new(path.clone()));
         }
@@ -1024,13 +1187,14 @@ pub fn configure_router() -> Router {
         .nest("/ui", create_ui_router())
         .nest("/ws", create_ws_router())
         .nest("/apps", create_apps_router())
-        .route("/", get(index))
-        .route("/minimal", get(serve_minimal))
-        .route("/suite", get(serve_suite))
-        .route("/favicon.ico", get(serve_favicon))
-        .nest_service("/auth", ServeDir::new(suite_path.join("auth")));
+        .route("/favicon.ico", get(serve_favicon));
 
     router = add_static_routes(router, &suite_path);
 
-    router.fallback(get(index)).with_state(state)
+    router
+        .route("/", get(index))
+        .route("/minimal", get(serve_minimal))
+        .route("/suite", get(serve_suite))
+        .fallback(get(index))
+        .with_state(state)
 }
diff --git a/ui/suite/base.html b/ui/suite/base.html
index 2cf0de7..27891a6 100644
--- a/ui/suite/base.html
+++ b/ui/suite/base.html
@@ -10,6 +10,9 @@
         <script src="/js/vendor/htmx-ws.js"></script>
         <script src="/js/vendor/htmx-json-enc.js"></script>
 
+        <!-- ERROR REPORTER - Captures JS errors and sends to server log -->
+        <script src="/js/error-reporter.js"></script>
+
         <!-- i18n -->
         <script src="/js/i18n.js"></script>
 
@@ -116,7 +119,7 @@
                                 href="#tasks"
                                 class="app-item"
                                 role="menuitem"
-                                hx-get="/tasks/tasks.html"
+                                hx-get="/suite/tasks/autotask.html"
                                 hx-target="#main-content"
                                 hx-push-url="true"
                             >
diff --git a/ui/suite/default.gbui b/ui/suite/default.gbui
index 64df14f..e50560a 100644
--- a/ui/suite/default.gbui
+++ b/ui/suite/default.gbui
@@ -156,34 +156,34 @@
         <!-- Application initialization -->
         <script>
             // Initialize application
-            (function initApp() {
-                "use strict";
+        (function initApp() {
+            "use strict";
 
-                // Initialize ThemeManager
-                document.addEventListener("DOMContentLoaded", () => {
-                    console.log("🚀 Initializing General Bots Desktop...");
+            // Initialize ThemeManager
+            document.addEventListener("DOMContentLoaded", () => {
+                console.log("🚀 Initializing General Bots Desktop...");
 
-                    // Initialize theme system
-                    if (window.ThemeManager) {
-                        ThemeManager.init();
-                        console.log("✓ Theme Manager initialized");
-                    } else {
-                        console.warn("⚠ ThemeManager not found");
+                // Initialize theme system
+                if (window.ThemeManager) {
+                    ThemeManager.init();
+                    console.log("✓ Theme Manager initialized");
+                } else {
+                    console.warn("⚠ ThemeManager not found");
+                }
+
+                // Initialize apps menu
+                initAppsMenu();
+
+                // Hide loading overlay after initialization
+                setTimeout(() => {
+                    const loadingOverlay =
+                        document.getElementById("loadingOverlay");
+                    if (loadingOverlay) {
+                        loadingOverlay.classList.add("hidden");
+                        console.log("✓ Application ready");
                     }
-
-                    // Initialize apps menu
-                    initAppsMenu();
-
-                    // Hide loading overlay after initialization
-                    setTimeout(() => {
-                        const loadingOverlay =
-                            document.getElementById("loadingOverlay");
-                        if (loadingOverlay) {
-                            loadingOverlay.classList.add("hidden");
-                            console.log("✓ Application ready");
-                        }
-                    }, 500);
-                });
+                }, 500);
+            });
 
                 // Apps menu functionality
                 function initAppsMenu() {
diff --git a/ui/suite/home.html b/ui/suite/home.html
index 9383d47..b56e6d0 100644
--- a/ui/suite/home.html
+++ b/ui/suite/home.html
@@ -324,7 +324,7 @@
             <a
                 href="#tasks"
                 class="app-card"
-                hx-get="/suite/tasks/tasks.html"
+                hx-get="/suite/tasks/autotask.html"
                 hx-target="#main-content"
                 hx-push-url="/#tasks"
             >
diff --git a/ui/suite/js/auth-service.js b/ui/suite/js/auth-service.js
index ce81597..c82030c 100644
--- a/ui/suite/js/auth-service.js
+++ b/ui/suite/js/auth-service.js
@@ -351,8 +351,8 @@
       this.clearAuth();
       this.emit("tokenExpired");
 
-      const currentPath = window.location.pathname;
-      if (!currentPath.startsWith("/auth/")) {
+      const currentPath = window.location.pathname + window.location.hash;
+      if (!window.location.pathname.startsWith("/auth/")) {
         window.location.href =
           "/auth/login.html?expired=1&redirect=" +
           encodeURIComponent(currentPath);
diff --git a/ui/suite/js/error-reporter.js b/ui/suite/js/error-reporter.js
new file mode 100644
index 0000000..f47db35
--- /dev/null
+++ b/ui/suite/js/error-reporter.js
@@ -0,0 +1,135 @@
+(function() {
+    'use strict';
+
+    const MAX_ERRORS = 50;
+    const REPORT_ENDPOINT = '/api/client-errors';
+    let errorQueue = [];
+    let isReporting = false;
+
+    function formatError(error, context = {}) {
+        return {
+            type: error.name || 'Error',
+            message: error.message || String(error),
+            stack: error.stack,
+            url: window.location.href,
+            userAgent: navigator.userAgent,
+            timestamp: new Date().toISOString(),
+            context: context
+        };
+    }
+
+    async function reportErrors() {
+        if (isReporting || errorQueue.length === 0) return;
+
+        isReporting = true;
+        const errorsToReport = errorQueue.splice(0, MAX_ERRORS);
+        errorQueue = [];
+
+        try {
+            const response = await fetch(REPORT_ENDPOINT, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ errors: errorsToReport })
+            });
+
+            if (!response.ok) {
+                console.warn('[ErrorReporter] Failed to send errors:', response.status);
+            }
+        } catch (e) {
+            console.warn('[ErrorReporter] Failed to send errors:', e.message);
+            errorQueue.unshift(...errorsToReport);
+        } finally {
+            isReporting = false;
+            
+            if (errorQueue.length > 0) {
+                setTimeout(reportErrors, 1000);
+            }
+        }
+    }
+
+    function queueError(errorData) {
+        errorQueue.push(errorData);
+        if (errorQueue.length >= 10) {
+            reportErrors();
+        }
+    }
+
+    window.addEventListener('error', (event) => {
+        const errorData = formatError(event.error || new Error(event.message), {
+            filename: event.filename,
+            lineno: event.lineno,
+            colno: event.colno
+        });
+        queueError(errorData);
+    });
+
+    window.addEventListener('unhandledrejection', (event) => {
+        const errorData = formatError(event.reason || new Error(String(event.reason)), {
+            type: 'unhandledRejection'
+        });
+        queueError(errorData);
+    });
+
+    window.ErrorReporter = {
+        report: function(error, context) {
+            queueError(formatError(error, context));
+        },
+        flush: function() {
+            reportErrors();
+        }
+    };
+
+    if (document.readyState === 'complete') {
+        setTimeout(reportErrors, 1000);
+    } else {
+        window.addEventListener('load', () => {
+            setTimeout(reportErrors, 1000);
+        });
+    }
+
+    console.log('[ErrorReporter] Client-side error reporting initialized');
+
+    window.NavigationLogger = {
+        log: function(from, to, method) {
+            const navEvent = {
+                type: 'navigation',
+                from: from,
+                to: to,
+                method: method,
+                url: window.location.href,
+                timestamp: new Date().toISOString()
+            };
+            
+            queueError({
+                name: 'Navigation',
+                message: `${method}: ${from} -> ${to}`,
+                stack: undefined
+            });
+        }
+    };
+
+    document.body.addEventListener('click', function(e) {
+        const target = e.target.closest('[data-section]');
+        if (target) {
+            const section = target.getAttribute('data-section');
+            const currentHash = window.location.hash.slice(1) || '';
+            if (section !== currentHash) {
+                setTimeout(() => {
+                    window.NavigationLogger.log(currentHash || 'home', section, 'click');
+                }, 100);
+            }
+        }
+    }, true);
+
+    window.addEventListener('hashchange', function(e) {
+        const oldURL = new URL(e.oldURL);
+        const newURL = new URL(e.newURL);
+        const fromHash = oldURL.hash.slice(1) || '';
+        const toHash = newURL.hash.slice(1) || '';
+        window.NavigationLogger.log(fromHash || 'home', toHash, 'hashchange');
+    });
+
+    console.log('[NavigationLogger] Navigation tracking initialized');
+})();
diff --git a/ui/suite/js/htmx-app.js b/ui/suite/js/htmx-app.js
index 6298b97..dade554 100644
--- a/ui/suite/js/htmx-app.js
+++ b/ui/suite/js/htmx-app.js
@@ -203,7 +203,12 @@
 
   // Handle WebSocket messages
   function handleWebSocketMessage(message) {
-    switch (message.type) {
+    const messageType = message.type || message.event;
+    
+    // Debug logging
+    console.log("handleWebSocketMessage called with:", { messageType, message });
+
+    switch (messageType) {
       case "message":
         appendMessage(message);
         break;
@@ -216,8 +221,28 @@
       case "suggestion":
         addSuggestion(message.text);
         break;
+      case "change_theme":
+        console.log("Processing change_theme event, not appending to chat");
+        if (message.data) {
+          ThemeManager.setThemeFromServer(message.data);
+
+          if (message.data.color1 || message.data.color2) {
+            const root = document.documentElement;
+            if (message.data.color1)
+              root.style.setProperty("--color1", message.data.color1);
+            if (message.data.color2)
+              root.style.setProperty("--color2", message.data.color2);
+          }
+        }
+        return; // Don't append theme events to chat
       default:
-        console.log("Unknown message type:", message.type);
+        // Only append unknown message types to chat if they have text content
+        if (message.text || message.content) {
+          console.log("Unknown message type, treating as chat message:", messageType);
+          appendMessage(message);
+        } else {
+          console.log("Unknown message type:", messageType, message);
+        }
     }
   }
 
diff --git a/ui/suite/js/security-bootstrap.js b/ui/suite/js/security-bootstrap.js
index cd0552d..2bb253e 100644
--- a/ui/suite/js/security-bootstrap.js
+++ b/ui/suite/js/security-bootstrap.js
@@ -295,6 +295,12 @@
       });
 
       window.addEventListener("gb:auth:expired", function (event) {
+        // Check if current bot is public - if so, skip redirect
+        if (window.__BOT_IS_PUBLIC__ === true) {
+          console.log("[GBSecurity] Bot is public, skipping auth redirect");
+          return;
+        }
+
         console.log(
           "[GBSecurity] Auth expired, clearing tokens and redirecting",
         );
diff --git a/ui/suite/js/suite_app.js b/ui/suite/js/suite_app.js
index ebd3d76..b7a0ee6 100644
--- a/ui/suite/js/suite_app.js
+++ b/ui/suite/js/suite_app.js
@@ -4,351 +4,329 @@
 // SUITE CORE (Plugin Architecture)
 // ==========================================
 window.Suite = {
-    apps: new Map(),
+  apps: new Map(),
 
-    registerApp(id, config) {
-        console.log(`[Suite] Registering app: ${id}`);
-        this.apps.set(id, {
-            id,
-            icon: "📦",
-            title: id,
-            description: "",
-            actions: [],
-            searchable: true,
-            ...config
-        });
+  registerApp(id, config) {
+    console.log(`[Suite] Registering app: ${id}`);
+    this.apps.set(id, {
+      id,
+      icon: "📦",
+      title: id,
+      description: "",
+      actions: [],
+      searchable: true,
+      ...config,
+    });
 
-        // Trigger UI update if Omnibox is initialized
-        if (typeof Omnibox !== 'undefined' && Omnibox.isActive) {
-            Omnibox.updateActions();
-        }
-    },
-
-    getApp(id) {
-        return this.apps.get(id);
-    },
-
-    getAllApps() {
-        return Array.from(this.apps.values());
-    },
-
-    // Helper to get actions for a specific context
-    getContextActions(contextId) {
-        const app = this.apps.get(contextId);
-        return app ? app.actions : null;
+    // Trigger UI update if Omnibox is initialized
+    if (typeof Omnibox !== "undefined" && Omnibox.isActive) {
+      Omnibox.updateActions();
     }
+  },
+
+  getApp(id) {
+    return this.apps.get(id);
+  },
+
+  getAllApps() {
+    return Array.from(this.apps.values());
+  },
+
+  // Helper to get actions for a specific context
+  getContextActions(contextId) {
+    const app = this.apps.get(contextId);
+    return app ? app.actions : null;
+  },
 };
 
 // ==========================================
 // OMNIBOX (Search + Chat) Functionality
 // ==========================================
 const Omnibox = {
-    isActive: false,
-    isChatMode: false,
-    chatHistory: [],
-    selectedIndex: 0,
+  isActive: false,
+  isChatMode: false,
+  chatHistory: [],
+  selectedIndex: 0,
 
-    init() {
-        this.omnibox = document.getElementById("omnibox");
-        this.input = document.getElementById("omniboxInput");
-        this.panel = document.getElementById("omniboxPanel");
-        this.backdrop = document.getElementById("omniboxBackdrop");
-        this.results = document.getElementById("omniboxResults");
-        this.chat = document.getElementById("omniboxChat");
-        this.chatMessages = document.getElementById(
-            "omniboxChatMessages",
-        );
-        this.chatInput =
-            document.getElementById("omniboxChatInput");
-        this.modeToggle =
-            document.getElementById("omniboxModeToggle");
+  init() {
+    this.omnibox = document.getElementById("omnibox");
+    this.input = document.getElementById("omniboxInput");
+    this.panel = document.getElementById("omniboxPanel");
+    this.backdrop = document.getElementById("omniboxBackdrop");
+    this.results = document.getElementById("omniboxResults");
+    this.chat = document.getElementById("omniboxChat");
+    this.chatMessages = document.getElementById("omniboxChatMessages");
+    this.chatInput = document.getElementById("omniboxChatInput");
+    this.modeToggle = document.getElementById("omniboxModeToggle");
 
-        this.bindEvents();
-    },
+    this.bindEvents();
+  },
 
-    bindEvents() {
-        // Input focus/blur
-        this.input.addEventListener("focus", () => this.open());
-        this.backdrop.addEventListener("click", () => this.close());
+  bindEvents() {
+    // Input focus/blur
+    this.input.addEventListener("focus", () => this.open());
+    this.backdrop.addEventListener("click", () => this.close());
 
-        // Input typing
-        this.input.addEventListener("input", (e) =>
-            this.handleInput(e.target.value),
-        );
+    // Input typing
+    this.input.addEventListener("input", (e) =>
+      this.handleInput(e.target.value),
+    );
 
-        // Keyboard navigation
-        this.input.addEventListener("keydown", (e) =>
-            this.handleKeydown(e),
-        );
-        this.chatInput?.addEventListener("keydown", (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                this.sendMessage();
-            }
-        });
+    // Keyboard navigation
+    this.input.addEventListener("keydown", (e) => this.handleKeydown(e));
+    this.chatInput?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        this.sendMessage();
+      }
+    });
 
-        // Mode toggle
-        this.modeToggle.addEventListener("click", (e) => {
-            e.stopPropagation();
-            this.toggleChatMode();
-        });
+    // Mode toggle
+    this.modeToggle.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleChatMode();
+    });
 
-        // Action buttons
-        document
-            .querySelectorAll(".omnibox-action")
-            .forEach((btn) => {
-                btn.addEventListener("click", () =>
-                    this.handleAction(btn),
-                );
-            });
+    // Action buttons
+    document.querySelectorAll(".omnibox-action").forEach((btn) => {
+      btn.addEventListener("click", () => this.handleAction(btn));
+    });
 
-        // Send button
-        document
-            .getElementById("omniboxSendBtn")
-            ?.addEventListener("click", () => this.sendMessage());
+    // Send button
+    document
+      .getElementById("omniboxSendBtn")
+      ?.addEventListener("click", () => this.sendMessage());
 
-        // Back button
-        document
-            .getElementById("omniboxBackBtn")
-            ?.addEventListener("click", () => this.showResults());
+    // Back button
+    document
+      .getElementById("omniboxBackBtn")
+      ?.addEventListener("click", () => this.showResults());
 
-        // Expand button
-        document
-            .getElementById("omniboxExpandBtn")
-            ?.addEventListener("click", () =>
-                this.expandToFullChat(),
-            );
+    // Expand button
+    document
+      .getElementById("omniboxExpandBtn")
+      ?.addEventListener("click", () => this.expandToFullChat());
 
-        // Global shortcut (Cmd+K / Ctrl+K)
-        document.addEventListener("keydown", (e) => {
-            if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-                e.preventDefault();
-                this.input.focus();
-                this.open();
-            }
-            if (e.key === "Escape" && this.isActive) {
-                this.close();
-            }
-        });
-    },
+    // Global shortcut (Cmd+K / Ctrl+K)
+    document.addEventListener("keydown", (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        this.input.focus();
+        this.open();
+      }
+      if (e.key === "Escape" && this.isActive) {
+        this.close();
+      }
+    });
+  },
 
-    open() {
-        this.isActive = true;
-        this.omnibox.classList.add("active");
-        this.updateActions();
-    },
+  open() {
+    this.isActive = true;
+    this.omnibox.classList.add("active");
+    this.updateActions();
+  },
 
-    close() {
-        this.isActive = false;
-        this.omnibox.classList.remove("active");
-        this.input.blur();
-    },
+  close() {
+    this.isActive = false;
+    this.omnibox.classList.remove("active");
+    this.input.blur();
+  },
 
-    handleInput(value) {
-        if (value.trim()) {
-            this.searchContent(value);
-        } else {
-            this.showDefaultActions();
-        }
-    },
+  handleInput(value) {
+    if (value.trim()) {
+      this.searchContent(value);
+    } else {
+      this.showDefaultActions();
+    }
+  },
 
-    handleKeydown(e) {
-        const actions = document.querySelectorAll(
-            '.omnibox-action:not([style*="display: none"])',
-        );
+  handleKeydown(e) {
+    const actions = document.querySelectorAll(
+      '.omnibox-action:not([style*="display: none"])',
+    );
 
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            this.selectedIndex = Math.min(
-                this.selectedIndex + 1,
-                actions.length - 1,
-            );
-            this.updateSelection(actions);
-        } else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            this.selectedIndex = Math.max(
-                this.selectedIndex - 1,
-                0,
-            );
-            this.updateSelection(actions);
-        } else if (e.key === "Enter") {
-            e.preventDefault();
-            const selected = actions[this.selectedIndex];
-            if (selected) {
-                this.handleAction(selected);
-            } else if (this.input.value.trim()) {
-                // Start chat with the query
-                this.startChatWithQuery(this.input.value);
-            }
-        }
-    },
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.selectedIndex = Math.min(this.selectedIndex + 1, actions.length - 1);
+      this.updateSelection(actions);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+      this.updateSelection(actions);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const selected = actions[this.selectedIndex];
+      if (selected) {
+        this.handleAction(selected);
+      } else if (this.input.value.trim()) {
+        // Start chat with the query
+        this.startChatWithQuery(this.input.value);
+      }
+    }
+  },
 
-    updateSelection(actions) {
-        actions.forEach((a, i) => {
-            a.classList.toggle(
-                "selected",
-                i === this.selectedIndex,
-            );
-        });
-    },
+  updateSelection(actions) {
+    actions.forEach((a, i) => {
+      a.classList.toggle("selected", i === this.selectedIndex);
+    });
+  },
 
-    updateActions() {
-        const currentApp = this.getCurrentApp();
-        const actionsContainer =
-            document.getElementById("omniboxActions");
+  updateActions() {
+    const currentApp = this.getCurrentApp();
+    const actionsContainer = document.getElementById("omniboxActions");
 
-        const contextActions = {
-            chat: [
-                {
-                    icon: "💬",
-                    text: "New conversation",
-                    action: "chat",
-                },
-                {
-                    icon: "📋",
-                    text: "View history",
-                    action: "navigate",
-                    target: "chat",
-                },
-            ],
-            mail: [
-                {
-                    icon: "✉️",
-                    text: "Compose email",
-                    action: "chat",
-                    query: "Help me compose an email",
-                },
-                {
-                    icon: "📥",
-                    text: "Check inbox",
-                    action: "navigate",
-                    target: "mail",
-                },
-            ],
-            tasks: [
-                {
-                    icon: "✅",
-                    text: "Create task",
-                    action: "chat",
-                    query: "Create a new task",
-                },
-                {
-                    icon: "📋",
-                    text: "Show my tasks",
-                    action: "navigate",
-                    target: "tasks",
-                },
-            ],
-            calendar: [
-                {
-                    icon: "📅",
-                    text: "Schedule event",
-                    action: "chat",
-                    query: "Schedule a meeting",
-                },
-                {
-                    icon: "📆",
-                    text: "View calendar",
-                    action: "navigate",
-                    target: "calendar",
-                },
-            ],
-            sheet: [
-                {
-                    icon: "📊",
-                    text: "Analyze data",
-                    action: "chat",
-                    query: "Analyze this data",
-                },
-                {
-                    icon: "📈",
-                    text: "Create chart",
-                    action: "chat",
-                    query: "Create a chart for this data",
-                },
-                {
-                    icon: "💲",
-                    text: "Format currency",
-                    action: "chat",
-                    query: "Format as currency",
-                },
-            ],
-            paper: [
-                {
-                    icon: "📝",
-                    text: "Summarize",
-                    action: "chat",
-                    query: "Summarize this document",
-                },
-                {
-                    icon: "✨",
-                    text: "Fix grammar",
-                    action: "chat",
-                    query: "Fix grammar and spelling",
-                },
-                {
-                    icon: "👔",
-                    text: "Make formal",
-                    action: "chat",
-                    query: "Make the tone more formal",
-                },
-            ],
-            default: [
-                {
-                    icon: "💬",
-                    text: "Chat with Bot",
-                    action: "chat",
-                },
-                {
-                    icon: "🔍",
-                    text: "Search everywhere",
-                    action: "search",
-                },
-            ],
-        };
+    const contextActions = {
+      chat: [
+        {
+          icon: "💬",
+          text: "New conversation",
+          action: "chat",
+        },
+        {
+          icon: "📋",
+          text: "View history",
+          action: "navigate",
+          target: "chat",
+        },
+      ],
+      mail: [
+        {
+          icon: "✉️",
+          text: "Compose email",
+          action: "chat",
+          query: "Help me compose an email",
+        },
+        {
+          icon: "📥",
+          text: "Check inbox",
+          action: "navigate",
+          target: "mail",
+        },
+      ],
+      tasks: [
+        {
+          icon: "✅",
+          text: "Create task",
+          action: "chat",
+          query: "Create a new task",
+        },
+        {
+          icon: "📋",
+          text: "Show my tasks",
+          action: "navigate",
+          target: "tasks",
+        },
+      ],
+      calendar: [
+        {
+          icon: "📅",
+          text: "Schedule event",
+          action: "chat",
+          query: "Schedule a meeting",
+        },
+        {
+          icon: "📆",
+          text: "View calendar",
+          action: "navigate",
+          target: "calendar",
+        },
+      ],
+      sheet: [
+        {
+          icon: "📊",
+          text: "Analyze data",
+          action: "chat",
+          query: "Analyze this data",
+        },
+        {
+          icon: "📈",
+          text: "Create chart",
+          action: "chat",
+          query: "Create a chart for this data",
+        },
+        {
+          icon: "💲",
+          text: "Format currency",
+          action: "chat",
+          query: "Format as currency",
+        },
+      ],
+      paper: [
+        {
+          icon: "📝",
+          text: "Summarize",
+          action: "chat",
+          query: "Summarize this document",
+        },
+        {
+          icon: "✨",
+          text: "Fix grammar",
+          action: "chat",
+          query: "Fix grammar and spelling",
+        },
+        {
+          icon: "👔",
+          text: "Make formal",
+          action: "chat",
+          query: "Make the tone more formal",
+        },
+      ],
+      default: [
+        {
+          icon: "💬",
+          text: "Chat with Bot",
+          action: "chat",
+        },
+        {
+          icon: "🔍",
+          text: "Search everywhere",
+          action: "search",
+        },
+      ],
+    };
 
-        // Check for plugin actions first
-        const pluginActions = window.Suite.getContextActions(currentApp);
+    // Check for plugin actions first
+    const pluginActions = window.Suite.getContextActions(currentApp);
 
-        let actions;
-        if (pluginActions && pluginActions.length > 0) {
-            actions = pluginActions;
-        } else {
-            actions = contextActions[currentApp] || contextActions.default;
-        }
+    let actions;
+    if (pluginActions && pluginActions.length > 0) {
+      actions = pluginActions;
+    } else {
+      actions = contextActions[currentApp] || contextActions.default;
+    }
 
-        // Add navigation shortcuts
-        const navActions = [
-            {
-                icon: "📱",
-                text: "Open Chat",
-                action: "navigate",
-                target: "chat",
-            },
-            {
-                icon: "✉️",
-                text: "Open Mail",
-                action: "navigate",
-                target: "mail",
-            },
-            {
-                icon: "✓",
-                text: "Open Tasks",
-                action: "navigate",
-                target: "tasks",
-            },
-            {
-                icon: "📅",
-                text: "Open Calendar",
-                action: "navigate",
-                target: "calendar",
-            },
-        ];
+    // Add navigation shortcuts
+    const navActions = [
+      {
+        icon: "📱",
+        text: "Open Chat",
+        action: "navigate",
+        target: "chat",
+      },
+      {
+        icon: "✉️",
+        text: "Open Mail",
+        action: "navigate",
+        target: "mail",
+      },
+      {
+        icon: "✓",
+        text: "Open Tasks",
+        action: "navigate",
+        target: "tasks",
+      },
+      {
+        icon: "📅",
+        text: "Open Calendar",
+        action: "navigate",
+        target: "calendar",
+      },
+    ];
 
-        actionsContainer.innerHTML = actions
-            .concat(navActions)
-            .map(
-                (a, i) => `
+    actionsContainer.innerHTML = actions
+      .concat(navActions)
+      .map(
+        (a, i) => `
                         <button class="omnibox-action ${i === 0 ? "selected" : ""}"
                                 data-action="${a.action}"
                                 data-target="${a.target || ""}"
@@ -358,120 +336,106 @@ const Omnibox = {
                             ${i === 0 ? "<kbd>↵</kbd>" : ""}
                         </button>
                     `,
-            )
-            .join("");
+      )
+      .join("");
 
-        // Rebind events
-        actionsContainer
-            .querySelectorAll(".omnibox-action")
-            .forEach((btn) => {
-                btn.addEventListener("click", () =>
-                    this.handleAction(btn),
-                );
-            });
+    // Rebind events
+    actionsContainer.querySelectorAll(".omnibox-action").forEach((btn) => {
+      btn.addEventListener("click", () => this.handleAction(btn));
+    });
 
-        this.selectedIndex = 0;
-    },
+    this.selectedIndex = 0;
+  },
 
-    getCurrentApp() {
-        const hash = window.location.hash.replace("#", "");
-        return hash || "default";
-    },
+  getCurrentApp() {
+    const hash = window.location.hash.replace("#", "");
+    return hash || "default";
+  },
 
-    handleAction(btn) {
-        const action = btn.dataset.action;
-        const target = btn.dataset.target;
-        const query = btn.dataset.query;
+  handleAction(btn) {
+    const action = btn.dataset.action;
+    const target = btn.dataset.target;
+    const query = btn.dataset.query;
 
-        if (action === "chat") {
-            if (query) {
-                this.startChatWithQuery(query);
-            } else {
-                this.showChat();
-            }
-        } else if (action === "navigate" && target) {
-            this.navigateTo(target);
-        } else if (action === "search") {
-            this.input.focus();
-        }
-    },
+    if (action === "chat") {
+      if (query) {
+        this.startChatWithQuery(query);
+      } else {
+        this.showChat();
+      }
+    } else if (action === "navigate" && target) {
+      this.navigateTo(target);
+    } else if (action === "search") {
+      this.input.focus();
+    }
+  },
 
-    navigateTo(target) {
-        this.close();
-        const link = document.querySelector(
-            `a[data-section="${target}"]`,
-        );
-        if (link) {
-            link.click();
-        }
-    },
+  navigateTo(target) {
+    this.close();
+    const link = document.querySelector(`a[data-section="${target}"]`);
+    if (link) {
+      link.click();
+    }
+  },
 
-    toggleChatMode() {
-        this.isChatMode = !this.isChatMode;
-        this.omnibox.classList.toggle("chat-mode", this.isChatMode);
+  toggleChatMode() {
+    this.isChatMode = !this.isChatMode;
+    this.omnibox.classList.toggle("chat-mode", this.isChatMode);
 
-        if (this.isChatMode) {
-            this.input.placeholder = "Ask me anything...";
-            this.showChat();
-        } else {
-            this.input.placeholder = "Search or ask anything...";
-            this.showResults();
-        }
-    },
+    if (this.isChatMode) {
+      this.input.placeholder = "Ask me anything...";
+      this.showChat();
+    } else {
+      this.input.placeholder = "Search or ask anything...";
+      this.showResults();
+    }
+  },
 
-    showChat() {
-        this.results.style.display = "none";
-        this.chat.style.display = "flex";
-        this.isChatMode = true;
-        this.omnibox.classList.add("chat-mode");
-        this.chatInput?.focus();
-    },
+  showChat() {
+    this.results.style.display = "none";
+    this.chat.style.display = "flex";
+    this.isChatMode = true;
+    this.omnibox.classList.add("chat-mode");
+    this.chatInput?.focus();
+  },
 
-    showResults() {
-        this.chat.style.display = "none";
-        this.results.style.display = "block";
-        this.isChatMode = false;
-        this.omnibox.classList.remove("chat-mode");
-        this.input.focus();
-    },
+  showResults() {
+    this.chat.style.display = "none";
+    this.results.style.display = "block";
+    this.isChatMode = false;
+    this.omnibox.classList.remove("chat-mode");
+    this.input.focus();
+  },
 
-    showDefaultActions() {
-        document.getElementById(
-            "searchResultsSection",
-        ).style.display = "none";
-        this.updateActions();
-    },
+  showDefaultActions() {
+    document.getElementById("searchResultsSection").style.display = "none";
+    this.updateActions();
+  },
 
-    searchContent(query) {
-        // Show search results section
-        const resultsSection = document.getElementById(
-            "searchResultsSection",
-        );
-        const resultsList =
-            document.getElementById("searchResultsList");
+  searchContent(query) {
+    // Show search results section
+    const resultsSection = document.getElementById("searchResultsSection");
+    const resultsList = document.getElementById("searchResultsList");
 
-        resultsSection.style.display = "block";
+    resultsSection.style.display = "block";
 
-        // Update first action to be "Ask about: query"
-        const actionsContainer =
-            document.getElementById("omniboxActions");
-        const firstAction =
-            actionsContainer.querySelector(".omnibox-action");
-        if (firstAction) {
-            firstAction.dataset.action = "chat";
-            firstAction.dataset.query = query;
-            firstAction.querySelector(".action-icon").textContent =
-                "💬";
-            firstAction.querySelector(".action-text").textContent =
-                `Ask: "${query.substring(0, 30)}${query.length > 30 ? "..." : ""}"`;
-        }
+    // Update first action to be "Ask about: query"
+    const actionsContainer = document.getElementById("omniboxActions");
+    const firstAction = actionsContainer.querySelector(".omnibox-action");
+    if (firstAction) {
+      firstAction.dataset.action = "chat";
+      firstAction.dataset.query = query;
+      firstAction.querySelector(".action-icon").textContent = "💬";
+      firstAction.querySelector(".action-text").textContent =
+        `Ask: "${query.substring(0, 30)}${query.length > 30 ? "..." : ""}"`;
+    }
 
-        // Simple client-side search of navigation items
-        const searchResults = this.performSearch(query);
-        resultsList.innerHTML =
-            searchResults
-                .map(
-                    (r) => `
+    // Simple client-side search of navigation items
+    const searchResults = this.performSearch(query);
+    resultsList.innerHTML =
+      searchResults
+        .map(
+          (r) => `
                         <button class="omnibox-result" data-action="navigate" data-target="${r.target}">
                             <span class="result-icon">${r.icon}</span>
                             <div class="result-content">
@@ -480,635 +444,626 @@ const Omnibox = {
                             </div>
                         </button>
                     `,
-                )
-                .join("") ||
-            '<div class="no-results">No results found. Try asking the bot!</div>';
+        )
+        .join("") ||
+      '<div class="no-results">No results found. Try asking the bot!</div>';
 
-        // Bind click events
-        resultsList
-            .querySelectorAll(".omnibox-result")
-            .forEach((btn) => {
-                btn.addEventListener("click", () =>
-                    this.navigateTo(btn.dataset.target),
-                );
-            });
-    },
+    // Bind click events
+    resultsList.querySelectorAll(".omnibox-result").forEach((btn) => {
+      btn.addEventListener("click", () => this.navigateTo(btn.dataset.target));
+    });
+  },
 
-    performSearch(query) {
-        const q = query.toLowerCase();
-        const items = [
-            {
-                target: "chat",
-                icon: "💬",
-                title: "Chat",
-                description: "Chat with the bot",
-            },
-            {
-                target: "mail",
-                icon: "✉️",
-                title: "Mail",
-                description: "Email inbox",
-            },
-            {
-                target: "tasks",
-                icon: "✓",
-                title: "Tasks",
-                description: "Task management",
-            },
-            {
-                target: "calendar",
-                icon: "📅",
-                title: "Calendar",
-                description: "Schedule and events",
-            },
-            {
-                target: "drive",
-                icon: "📁",
-                title: "Drive",
-                description: "File storage",
-            },
-            {
-                target: "paper",
-                icon: "📄",
-                title: "Documents",
-                description: "Document editor",
-            },
-            {
-                target: "sheet",
-                icon: "📊",
-                title: "Sheet",
-                description: "Spreadsheets",
-            },
-            {
-                target: "slides",
-                icon: "📽️",
-                title: "Slides",
-                description: "Presentations",
-            },
-            {
-                target: "editor",
-                icon: "📝",
-                title: "Editor",
-                description: "Code & text editor",
-            },
-            {
-                target: "designer",
-                icon: "🔷",
-                title: "Designer",
-                description: "Visual .bas editor",
-            },
-            {
-                target: "meet",
-                icon: "📹",
-                title: "Meet",
-                description: "Video meetings",
-            },
-            {
-                target: "research",
-                icon: "🔍",
-                title: "Research",
-                description: "Research assistant",
-            },
-            {
-                target: "analytics",
-                icon: "📊",
-                title: "Analytics",
-                description: "Data analytics",
-            },
-            {
-                target: "settings",
-                icon: "⚙️",
-                title: "Settings",
-                description: "App settings",
-            },
+  performSearch(query) {
+    const q = query.toLowerCase();
+    const items = [
+      {
+        target: "chat",
+        icon: "💬",
+        title: "Chat",
+        description: "Chat with the bot",
+      },
+      {
+        target: "mail",
+        icon: "✉️",
+        title: "Mail",
+        description: "Email inbox",
+      },
+      {
+        target: "tasks",
+        icon: "✓",
+        title: "Tasks",
+        description: "Task management",
+      },
+      {
+        target: "calendar",
+        icon: "📅",
+        title: "Calendar",
+        description: "Schedule and events",
+      },
+      {
+        target: "drive",
+        icon: "📁",
+        title: "Drive",
+        description: "File storage",
+      },
+      {
+        target: "paper",
+        icon: "📄",
+        title: "Documents",
+        description: "Document editor",
+      },
+      {
+        target: "sheet",
+        icon: "📊",
+        title: "Sheet",
+        description: "Spreadsheets",
+      },
+      {
+        target: "slides",
+        icon: "📽️",
+        title: "Slides",
+        description: "Presentations",
+      },
+      {
+        target: "editor",
+        icon: "📝",
+        title: "Editor",
+        description: "Code & text editor",
+      },
+      {
+        target: "designer",
+        icon: "🔷",
+        title: "Designer",
+        description: "Visual .bas editor",
+      },
+      {
+        target: "meet",
+        icon: "📹",
+        title: "Meet",
+        description: "Video meetings",
+      },
+      {
+        target: "research",
+        icon: "🔍",
+        title: "Research",
+        description: "Research assistant",
+      },
+      {
+        target: "analytics",
+        icon: "📊",
+        title: "Analytics",
+        description: "Data analytics",
+      },
+      {
+        target: "settings",
+        icon: "⚙️",
+        title: "Settings",
+        description: "App settings",
+      },
+    ];
 
-        ];
+    // Add plugin apps
+    const pluginApps = window.Suite.getAllApps()
+      .filter((app) => app.searchable)
+      .map((app) => ({
+        target: app.id,
+        icon: app.icon || "📦",
+        title: app.title || app.id,
+        description: app.description || "App plugin",
+      }));
 
-        // Add plugin apps
-        const pluginApps = window.Suite.getAllApps()
-            .filter(app => app.searchable)
-            .map(app => ({
-                target: app.id,
-                icon: app.icon || "📦",
-                title: app.title || app.id,
-                description: app.description || "App plugin"
-            }));
+    const allItems = items.concat(pluginApps);
 
-        const allItems = items.concat(pluginApps);
+    return allItems.filter(
+      (item) =>
+        item.title.toLowerCase().includes(q) ||
+        item.description.toLowerCase().includes(q),
+    );
+  },
 
-        return allItems.filter(
-            (item) =>
-                item.title.toLowerCase().includes(q) ||
-                item.description.toLowerCase().includes(q),
+  startChatWithQuery(query) {
+    this.showChat();
+    this.input.value = "";
+    setTimeout(() => {
+      this.addMessage(query, "user");
+      this.sendToBot(query);
+    }, 100);
+  },
+
+  async sendMessage() {
+    const message = this.chatInput?.value.trim();
+    if (!message) return;
+
+    this.chatInput.value = "";
+    this.addMessage(message, "user");
+    await this.sendToBot(message);
+  },
+
+  async sendToBot(message) {
+    // Show typing indicator
+    const typingId = this.addTypingIndicator();
+
+    try {
+      // Call the bot API
+      const response = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message,
+          context: this.getCurrentApp(),
+        }),
+      });
+
+      this.removeTypingIndicator(typingId);
+
+      if (response.ok) {
+        const data = await response.json();
+        this.addMessage(
+          data.reply || data.message || "I received your message.",
+          "bot",
         );
-    },
 
-    startChatWithQuery(query) {
-        this.showChat();
-        this.input.value = "";
-        setTimeout(() => {
-            this.addMessage(query, "user");
-            this.sendToBot(query);
-        }, 100);
-    },
-
-    async sendMessage() {
-        const message = this.chatInput?.value.trim();
-        if (!message) return;
-
-        this.chatInput.value = "";
-        this.addMessage(message, "user");
-        await this.sendToBot(message);
-    },
-
-    async sendToBot(message) {
-        // Show typing indicator
-        const typingId = this.addTypingIndicator();
-
-        try {
-            // Call the bot API
-            const response = await fetch("/api/chat", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    message,
-                    context: this.getCurrentApp(),
-                }),
-            });
-
-            this.removeTypingIndicator(typingId);
-
-            if (response.ok) {
-                const data = await response.json();
-                this.addMessage(
-                    data.reply ||
-                    data.message ||
-                    "I received your message.",
-                    "bot",
-                );
-
-                // Handle any actions the bot suggests
-                if (data.action) {
-                    this.handleBotAction(data.action);
-                }
-            } else {
-                this.addMessage(
-                    "Sorry, I encountered an error. Please try again.",
-                    "bot",
-                );
-            }
-        } catch (error) {
-            this.removeTypingIndicator(typingId);
-            // Fallback response when API is not available
-            this.addMessage(
-                this.getFallbackResponse(message),
-                "bot",
-            );
+        // Handle any actions the bot suggests
+        if (data.action) {
+          this.handleBotAction(data.action);
         }
-    },
-
-    getFallbackResponse(message) {
-        const msg = message.toLowerCase();
-        if (msg.includes("help")) {
-            return "I can help you navigate the app, search for content, manage tasks, compose emails, and more. What would you like to do?";
-        } else if (msg.includes("task") || msg.includes("todo")) {
-            return "Would you like me to open Tasks for you? You can create, view, and manage your tasks there.";
-        } else if (msg.includes("email") || msg.includes("mail")) {
-            return "I can help with email! Would you like to compose a new message or check your inbox?";
-        } else if (
-            msg.includes("calendar") ||
-            msg.includes("meeting") ||
-            msg.includes("schedule")
-        ) {
-            return "I can help with scheduling. Would you like to create an event or view your calendar?";
-        }
-        return (
-            "I understand you're asking about: \"" +
-            message +
-            '". How can I assist you further?'
+      } else {
+        this.addMessage(
+          "Sorry, I encountered an error. Please try again.",
+          "bot",
         );
-    },
+      }
+    } catch (error) {
+      this.removeTypingIndicator(typingId);
+      // Fallback response when API is not available
+      this.addMessage(this.getFallbackResponse(message), "bot");
+    }
+  },
 
-    addMessage(text, sender) {
-        const msgDiv = document.createElement("div");
-        msgDiv.className = `omnibox-message ${sender}`;
-        msgDiv.innerHTML = `
+  getFallbackResponse(message) {
+    const msg = message.toLowerCase();
+    if (msg.includes("help")) {
+      return "I can help you navigate the app, search for content, manage tasks, compose emails, and more. What would you like to do?";
+    } else if (msg.includes("task") || msg.includes("todo")) {
+      return "Would you like me to open Tasks for you? You can create, view, and manage your tasks there.";
+    } else if (msg.includes("email") || msg.includes("mail")) {
+      return "I can help with email! Would you like to compose a new message or check your inbox?";
+    } else if (
+      msg.includes("calendar") ||
+      msg.includes("meeting") ||
+      msg.includes("schedule")
+    ) {
+      return "I can help with scheduling. Would you like to create an event or view your calendar?";
+    }
+    return (
+      "I understand you're asking about: \"" +
+      message +
+      '". How can I assist you further?'
+    );
+  },
+
+  addMessage(text, sender) {
+    const msgDiv = document.createElement("div");
+    msgDiv.className = `omnibox-message ${sender}`;
+    msgDiv.innerHTML = `
                         <div class="message-avatar">${sender === "user" ? "👤" : "🤖"}</div>
                         <div class="message-content">${this.escapeHtml(text)}</div>
                     `;
-        this.chatMessages.appendChild(msgDiv);
-        this.chatMessages.scrollTop =
-            this.chatMessages.scrollHeight;
+    this.chatMessages.appendChild(msgDiv);
+    this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
 
-        this.chatHistory.push({ role: sender, content: text });
-    },
+    this.chatHistory.push({ role: sender, content: text });
+  },
 
-    addTypingIndicator() {
-        const id = "typing-" + Date.now();
-        const typingDiv = document.createElement("div");
-        typingDiv.id = id;
-        typingDiv.className = "omnibox-message bot typing";
-        typingDiv.innerHTML = `
+  addTypingIndicator() {
+    const id = "typing-" + Date.now();
+    const typingDiv = document.createElement("div");
+    typingDiv.id = id;
+    typingDiv.className = "omnibox-message bot typing";
+    typingDiv.innerHTML = `
                         <div class="message-avatar">🤖</div>
                         <div class="message-content typing-indicator">
                             <span></span><span></span><span></span>
                         </div>
                     `;
-        this.chatMessages.appendChild(typingDiv);
-        this.chatMessages.scrollTop =
-            this.chatMessages.scrollHeight;
-        return id;
-    },
+    this.chatMessages.appendChild(typingDiv);
+    this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+    return id;
+  },
 
-    removeTypingIndicator(id) {
-        const el = document.getElementById(id);
-        if (el) el.remove();
-    },
+  removeTypingIndicator(id) {
+    const el = document.getElementById(id);
+    if (el) el.remove();
+  },
 
-    handleBotAction(action) {
-        if (action.navigate) {
-            setTimeout(
-                () => this.navigateTo(action.navigate),
-                1000,
-            );
-        }
-    },
+  handleBotAction(action) {
+    if (action.navigate) {
+      setTimeout(() => this.navigateTo(action.navigate), 1000);
+    }
+  },
 
-    expandToFullChat() {
-        this.close();
-        const chatLink = document.querySelector(
-            'a[data-section="chat"]',
-        );
-        if (chatLink) chatLink.click();
-    },
+  expandToFullChat() {
+    this.close();
+    const chatLink = document.querySelector('a[data-section="chat"]');
+    if (chatLink) chatLink.click();
+  },
 
-    escapeHtml(text) {
-        const div = document.createElement("div");
-        div.textContent = text;
-        return div.innerHTML;
-    },
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  },
 };
 
 // Initialize Omnibox when DOM is ready
 document.addEventListener("DOMContentLoaded", () => {
-    Omnibox.init();
-    console.log("🚀 Initializing General Bots with HTMX...");
+  // Detect bot name from pathname (e.g., /edu -> bot_name = "edu")
+  const detectBotFromPath = () => {
+    const pathname = window.location.pathname;
+    // Remove leading/trailing slashes and get first segment
+    const segments = pathname.replace(/^\/|\/$/g, "").split("/");
+    const firstSegment = segments[0];
 
-    // Hide loading overlay
-    setTimeout(() => {
-        const loadingOverlay =
-            document.getElementById("loadingOverlay");
-        if (loadingOverlay) {
-            loadingOverlay.classList.add("hidden");
+    // If first segment is not a known route, treat it as bot name
+    const knownRoutes = ["suite", "auth", "api", "static", "public"];
+    if (firstSegment && !knownRoutes.includes(firstSegment)) {
+      return firstSegment;
+    }
+    return "default";
+  };
+
+  // Set global bot name
+  window.__INITIAL_BOT_NAME__ = detectBotFromPath();
+  console.log(`🤖 Bot detected from path: ${window.__INITIAL_BOT_NAME__}`);
+
+  // Check if bot is public to skip authentication
+  const checkBotPublicStatus = async () => {
+    try {
+      const botName = window.__INITIAL_BOT_NAME__;
+      if (!botName || botName === "default") return;
+
+      const response = await fetch(
+        `/api/bot/config?bot_name=${encodeURIComponent(botName)}`,
+      );
+      if (response.ok) {
+        const config = await response.json();
+        if (config.public === true) {
+          window.__BOT_IS_PUBLIC__ = true;
+          console.log(
+            `✅ Bot '${botName}' is public - authentication not required`,
+          );
         }
-    }, 500);
-
-    // Simple apps menu handling
-    const appsBtn = document.getElementById("appsButton");
-    const appsDropdown = document.getElementById("appsDropdown");
-    const settingsBtn = document.getElementById("settingsBtn");
-    const settingsPanel = document.getElementById("settingsPanel");
-
-    if (appsBtn && appsDropdown) {
-        appsBtn.addEventListener("click", (e) => {
-            e.stopPropagation();
-            const isOpen = appsDropdown.classList.toggle("show");
-            appsBtn.setAttribute("aria-expanded", isOpen);
-            // Close settings panel
-            if (settingsPanel)
-                settingsPanel.classList.remove("show");
-        });
-
-        document.addEventListener("click", (e) => {
-            if (
-                !appsDropdown.contains(e.target) &&
-                !appsBtn.contains(e.target)
-            ) {
-                appsDropdown.classList.remove("show");
-                appsBtn.setAttribute("aria-expanded", "false");
-            }
-        });
+      }
+    } catch (e) {
+      console.warn("Failed to check bot public status:", e);
     }
+  };
 
-    // Settings panel handling
-    if (settingsBtn && settingsPanel) {
-        settingsBtn.addEventListener("click", (e) => {
-            e.stopPropagation();
-            const isOpen = settingsPanel.classList.toggle("show");
-            settingsBtn.setAttribute("aria-expanded", isOpen);
-            // Close apps dropdown
-            if (appsDropdown) appsDropdown.classList.remove("show");
-        });
+  Omnibox.init();
+  console.log("🚀 Initializing General Bots with HTMX...");
 
-        document.addEventListener("click", (e) => {
-            if (
-                !settingsPanel.contains(e.target) &&
-                !settingsBtn.contains(e.target)
-            ) {
-                settingsPanel.classList.remove("show");
-                settingsBtn.setAttribute("aria-expanded", "false");
-            }
-        });
+  // Check bot public status early
+  checkBotPublicStatus();
+
+  // Hide loading overlay
+  setTimeout(() => {
+    const loadingOverlay = document.getElementById("loadingOverlay");
+    if (loadingOverlay) {
+      loadingOverlay.classList.add("hidden");
     }
+  }, 500);
 
-    // Theme selection handling
-    const themeOptions = document.querySelectorAll(".theme-option");
-    const savedTheme =
-        localStorage.getItem("gb-theme") || "sentient";
+  // Simple apps menu handling
+  const appsBtn = document.getElementById("appsButton");
+  const appsDropdown = document.getElementById("appsDropdown");
+  const settingsBtn = document.getElementById("settingsBtn");
+  const settingsPanel = document.getElementById("settingsPanel");
 
-    // Apply saved theme
-    document.body.setAttribute("data-theme", savedTheme);
+  if (appsBtn && appsDropdown) {
+    appsBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isOpen = appsDropdown.classList.toggle("show");
+      appsBtn.setAttribute("aria-expanded", isOpen);
+      // Close settings panel
+      if (settingsPanel) settingsPanel.classList.remove("show");
+    });
+
+    document.addEventListener("click", (e) => {
+      if (!appsDropdown.contains(e.target) && !appsBtn.contains(e.target)) {
+        appsDropdown.classList.remove("show");
+        appsBtn.setAttribute("aria-expanded", "false");
+      }
+    });
+  }
+
+  // Settings panel handling
+  if (settingsBtn && settingsPanel) {
+    settingsBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isOpen = settingsPanel.classList.toggle("show");
+      settingsBtn.setAttribute("aria-expanded", isOpen);
+      // Close apps dropdown
+      if (appsDropdown) appsDropdown.classList.remove("show");
+    });
+
+    document.addEventListener("click", (e) => {
+      if (
+        !settingsPanel.contains(e.target) &&
+        !settingsBtn.contains(e.target)
+      ) {
+        settingsPanel.classList.remove("show");
+        settingsBtn.setAttribute("aria-expanded", "false");
+      }
+    });
+  }
+
+  // Theme selection handling
+  const themeOptions = document.querySelectorAll(".theme-option");
+  const savedTheme = localStorage.getItem("gb-theme") || "sentient";
+
+  // Apply saved theme
+  document.body.setAttribute("data-theme", savedTheme);
+  document
+    .querySelector(`.theme-option[data-theme="${savedTheme}"]`)
+    ?.classList.add("active");
+
+  themeOptions.forEach((option) => {
+    option.addEventListener("click", () => {
+      const theme = option.getAttribute("data-theme");
+      document.body.setAttribute("data-theme", theme);
+      localStorage.setItem("gb-theme", theme);
+      themeOptions.forEach((o) => o.classList.remove("active"));
+      option.classList.add("active");
+
+      // Update theme-color meta tag
+      const themeColors = {
+        dark: "#3b82f6",
+        light: "#3b82f6",
+        purple: "#a855f7",
+        green: "#22c55e",
+        orange: "#f97316",
+        sentient: "#d4f505",
+      };
+      const metaTheme = document.querySelector('meta[name="theme-color"]');
+      if (metaTheme) {
+        metaTheme.setAttribute("content", themeColors[theme] || "#d4f505");
+      }
+    });
+  });
+
+  // List of sections that appear in header tabs
+  const headerTabSections = [
+    "chat",
+    "paper",
+    "sheet",
+    "slides",
+    "mail",
+    "calendar",
+    "drive",
+    "tasks",
+  ];
+
+  // Update active states for navigation (single selection only)
+  function updateNavigationActive(section) {
+    // Remove all active states first
     document
-        .querySelector(`.theme-option[data-theme="${savedTheme}"]`)
-        ?.classList.add("active");
+      .querySelectorAll(".app-tab")
+      .forEach((t) => t.classList.remove("active"));
+    document
+      .querySelectorAll(".app-item")
+      .forEach((i) => i.classList.remove("active"));
+    appsBtn.classList.remove("active");
 
-    themeOptions.forEach((option) => {
-        option.addEventListener("click", () => {
-            const theme = option.getAttribute("data-theme");
-            document.body.setAttribute("data-theme", theme);
-            localStorage.setItem("gb-theme", theme);
-            themeOptions.forEach((o) =>
-                o.classList.remove("active"),
-            );
-            option.classList.add("active");
+    // Check if section is in header tabs
+    const isInHeaderTabs = headerTabSections.includes(section);
 
-            // Update theme-color meta tag
-            const themeColors = {
-                dark: "#3b82f6",
-                light: "#3b82f6",
-                purple: "#a855f7",
-                green: "#22c55e",
-                orange: "#f97316",
-                sentient: "#d4f505",
-            };
-            const metaTheme = document.querySelector(
-                'meta[name="theme-color"]',
-            );
-            if (metaTheme) {
-                metaTheme.setAttribute(
-                    "content",
-                    themeColors[theme] || "#d4f505",
-                );
-            }
-        });
-    });
-
-    // List of sections that appear in header tabs
-    const headerTabSections = [
-        "chat",
-        "paper",
-        "sheet",
-        "slides",
-        "mail",
-        "calendar",
-        "drive",
-        "tasks",
-    ];
-
-    // Update active states for navigation (single selection only)
-    function updateNavigationActive(section) {
-        // Remove all active states first
-        document
-            .querySelectorAll(".app-tab")
-            .forEach((t) => t.classList.remove("active"));
-        document
-            .querySelectorAll(".app-item")
-            .forEach((i) => i.classList.remove("active"));
-        appsBtn.classList.remove("active");
-
-        // Check if section is in header tabs
-        const isInHeaderTabs = headerTabSections.includes(section);
-
-        // Activate the matching app-tab if in header
-        if (isInHeaderTabs) {
-            const headerTab = document.querySelector(
-                `.app-tab[data-section="${section}"]`,
-            );
-            if (headerTab) {
-                headerTab.classList.add("active");
-            }
-        } else {
-            // Section is NOT in header tabs, activate apps button
-            appsBtn.classList.add("active");
-        }
-
-        // Always mark the app-item in dropdown as active
-        const appItem = document.querySelector(
-            `.app-item[data-section="${section}"]`,
-        );
-        if (appItem) {
-            appItem.classList.add("active");
-        }
-    }
-
-    // Handle app item clicks - update active state
-    document.querySelectorAll(".app-item").forEach((item) => {
-        item.addEventListener("click", function () {
-            const section = this.getAttribute("data-section");
-            updateNavigationActive(section);
-            appsDropdown.classList.remove("show");
-            appsBtn.setAttribute("aria-expanded", "false");
-        });
-    });
-
-    // Handle app tab clicks
-    document.querySelectorAll(".app-tab").forEach((tab) => {
-        tab.addEventListener("click", function () {
-            const section = this.getAttribute("data-section");
-            updateNavigationActive(section);
-        });
-    });
-
-    // Track currently loaded section to prevent duplicate loads
-    let currentLoadedSection = null;
-    let isLoadingSection = false;
-    let pendingLoadTimeout = null;
-
-    // Handle hash navigation
-    function handleHashChange(fromHtmxSwap = false) {
-        const hash = window.location.hash.slice(1) || "chat";
-
-        // Skip if already loaded this section or currently loading
-        if (currentLoadedSection === hash || isLoadingSection) {
-            return;
-        }
-
-        // If this was triggered by HTMX swap, just update tracking
-        if (fromHtmxSwap) {
-            currentLoadedSection = hash;
-            return;
-        }
-
-        updateNavigationActive(hash);
-
-        // Abort any pending load timeout
-        if (pendingLoadTimeout) {
-            clearTimeout(pendingLoadTimeout);
-            pendingLoadTimeout = null;
-        }
-
-        // Abort any in-flight HTMX requests for main-content
-        const mainContent = document.getElementById("main-content");
-        if (mainContent) {
-            try {
-                htmx.trigger(mainContent, "htmx:abort");
-            } catch (e) {
-                // Ignore abort errors
-            }
-        }
-
-        // Validate target exists before triggering HTMX load
-        if (!mainContent) {
-            console.warn(
-                "handleHashChange: #main-content not found, skipping load",
-            );
-            return;
-        }
-
-        // Check if main-content is in the DOM
-        if (!document.body.contains(mainContent)) {
-            console.warn(
-                "handleHashChange: #main-content not in DOM, skipping load",
-            );
-            return;
-        }
-
-        // Verify main-content has a valid parent (prevents insertBefore errors)
-        if (!mainContent.parentNode) {
-            console.warn(
-                "handleHashChange: #main-content has no parent, skipping load",
-            );
-            return;
-        }
-
-        // Debounce the load to prevent rapid double-requests
-        pendingLoadTimeout = setTimeout(() => {
-            // Re-check if section changed during debounce
-            const currentHash =
-                window.location.hash.slice(1) || "chat";
-            if (currentLoadedSection === currentHash) {
-                return;
-            }
-
-            // Trigger HTMX load
-            const appItem = document.querySelector(
-                `.app-item[data-section="${currentHash}"]`,
-            );
-            if (appItem) {
-                const hxGet = appItem.getAttribute("hx-get");
-                if (hxGet) {
-                    try {
-                        isLoadingSection = true;
-                        currentLoadedSection = currentHash;
-                        htmx.ajax("GET", hxGet, {
-                            target: "#main-content",
-                            swap: "innerHTML",
-                        });
-                    } catch (e) {
-                        console.warn(
-                            "handleHashChange: HTMX ajax error:",
-                            e,
-                        );
-                        currentLoadedSection = null;
-                        isLoadingSection = false;
-                    }
-                }
-            }
-        }, 50);
-    }
-
-    // Listen for HTMX swaps to track loaded sections and prevent duplicates
-    document.body.addEventListener("htmx:afterSwap", (event) => {
-        if (
-            event.detail.target &&
-            event.detail.target.id === "main-content"
-        ) {
-            const hash = window.location.hash.slice(1) || "chat";
-            currentLoadedSection = hash;
-            isLoadingSection = false;
-        }
-    });
-
-    // Reset tracking on swap errors
-    document.body.addEventListener("htmx:swapError", (event) => {
-        if (
-            event.detail.target &&
-            event.detail.target.id === "main-content"
-        ) {
-            isLoadingSection = false;
-        }
-    });
-
-    // Also listen for response errors
-    document.body.addEventListener(
-        "htmx:responseError",
-        (event) => {
-            if (
-                event.detail.target &&
-                event.detail.target.id === "main-content"
-            ) {
-                isLoadingSection = false;
-                currentLoadedSection = null;
-            }
-        },
-    );
-
-    // Load initial content based on hash or default to chat
-    window.addEventListener("hashchange", handleHashChange);
-
-    // Initial load - wait for HTMX to be ready
-    function initialLoad() {
-        if (typeof htmx !== "undefined" && htmx.ajax) {
-            handleHashChange();
-        } else {
-            setTimeout(initialLoad, 50);
-        }
-    }
-
-    if (document.readyState === "complete") {
-        setTimeout(initialLoad, 50);
+    // Activate the matching app-tab if in header
+    if (isInHeaderTabs) {
+      const headerTab = document.querySelector(
+        `.app-tab[data-section="${section}"]`,
+      );
+      if (headerTab) {
+        headerTab.classList.add("active");
+      }
     } else {
-        window.addEventListener("load", () => {
-            setTimeout(initialLoad, 50);
-        });
+      // Section is NOT in header tabs, activate apps button
+      appsBtn.classList.add("active");
     }
 
-    // ==========================================================================
-    // GBAlerts - Global Notification System
-    // ==========================================================================
-    window.GBAlerts = (function () {
-        const notifications = [];
-        const badge = document.getElementById("notificationsBadge");
-        const list = document.getElementById("notificationsList");
-        const btn = document.getElementById("notificationsBtn");
-        const panel = document.getElementById("notificationsPanel");
-        const clearBtn = document.getElementById(
-            "clearNotificationsBtn",
-        );
+    // Always mark the app-item in dropdown as active
+    const appItem = document.querySelector(
+      `.app-item[data-section="${section}"]`,
+    );
+    if (appItem) {
+      appItem.classList.add("active");
+    }
+  }
 
-        function updateBadge() {
-            if (badge) {
-                if (notifications.length > 0) {
-                    badge.textContent =
-                        notifications.length > 99
-                            ? "99+"
-                            : notifications.length;
-                    badge.style.display = "flex";
-                } else {
-                    badge.style.display = "none";
-                }
-            }
+  // Handle app item clicks - update active state
+  document.querySelectorAll(".app-item").forEach((item) => {
+    item.addEventListener("click", function () {
+      const section = this.getAttribute("data-section");
+      updateNavigationActive(section);
+      appsDropdown.classList.remove("show");
+      appsBtn.setAttribute("aria-expanded", "false");
+    });
+  });
+
+  // Handle app tab clicks
+  document.querySelectorAll(".app-tab").forEach((tab) => {
+    tab.addEventListener("click", function () {
+      const section = this.getAttribute("data-section");
+      updateNavigationActive(section);
+    });
+  });
+
+  // Track currently loaded section to prevent duplicate loads
+  let currentLoadedSection = null;
+  let isLoadingSection = false;
+  let pendingLoadTimeout = null;
+
+  // Handle hash navigation
+  function handleHashChange(fromHtmxSwap = false) {
+    const hash = window.location.hash.slice(1) || "chat";
+
+    // Skip if already loaded this section or currently loading
+    if (currentLoadedSection === hash || isLoadingSection) {
+      return;
+    }
+
+    // If this was triggered by HTMX swap, just update tracking
+    if (fromHtmxSwap) {
+      currentLoadedSection = hash;
+      return;
+    }
+
+    updateNavigationActive(hash);
+
+    // Abort any pending load timeout
+    if (pendingLoadTimeout) {
+      clearTimeout(pendingLoadTimeout);
+      pendingLoadTimeout = null;
+    }
+
+    // Abort any in-flight HTMX requests for main-content
+    const mainContent = document.getElementById("main-content");
+    if (mainContent) {
+      try {
+        htmx.trigger(mainContent, "htmx:abort");
+      } catch (e) {
+        // Ignore abort errors
+      }
+    }
+
+    // Validate target exists before triggering HTMX load
+    if (!mainContent) {
+      console.warn("handleHashChange: #main-content not found, skipping load");
+      return;
+    }
+
+    // Check if main-content is in the DOM
+    if (!document.body.contains(mainContent)) {
+      console.warn("handleHashChange: #main-content not in DOM, skipping load");
+      return;
+    }
+
+    // Verify main-content has a valid parent (prevents insertBefore errors)
+    if (!mainContent.parentNode) {
+      console.warn(
+        "handleHashChange: #main-content has no parent, skipping load",
+      );
+      return;
+    }
+
+    // Debounce the load to prevent rapid double-requests
+    pendingLoadTimeout = setTimeout(() => {
+      // Re-check if section changed during debounce
+      const currentHash = window.location.hash.slice(1) || "chat";
+      if (currentLoadedSection === currentHash) {
+        return;
+      }
+
+      // Trigger HTMX load
+      const appItem = document.querySelector(
+        `.app-item[data-section="${currentHash}"]`,
+      );
+      if (appItem) {
+        const hxGet = appItem.getAttribute("hx-get");
+        if (hxGet) {
+          try {
+            isLoadingSection = true;
+            currentLoadedSection = currentHash;
+            htmx.ajax("GET", hxGet, {
+              target: "#main-content",
+              swap: "innerHTML",
+            });
+          } catch (e) {
+            console.warn("handleHashChange: HTMX ajax error:", e);
+            currentLoadedSection = null;
+            isLoadingSection = false;
+          }
         }
+      }
+    }, 50);
+  }
 
-        function renderList() {
-            if (!list) return;
-            if (notifications.length === 0) {
-                list.innerHTML =
-                    '<div class="notifications-empty"><span>🔔</span><p>No notifications</p></div>';
-            } else {
-                list.innerHTML = notifications
-                    .map(
-                        (n, i) => `
+  // Listen for HTMX swaps to track loaded sections and prevent duplicates
+  document.body.addEventListener("htmx:afterSwap", (event) => {
+    if (event.detail.target && event.detail.target.id === "main-content") {
+      const hash = window.location.hash.slice(1) || "chat";
+      currentLoadedSection = hash;
+      isLoadingSection = false;
+    }
+  });
+
+  // Reset tracking on swap errors
+  document.body.addEventListener("htmx:swapError", (event) => {
+    if (event.detail.target && event.detail.target.id === "main-content") {
+      isLoadingSection = false;
+    }
+  });
+
+  // Also listen for response errors
+  document.body.addEventListener("htmx:responseError", (event) => {
+    if (event.detail.target && event.detail.target.id === "main-content") {
+      isLoadingSection = false;
+      currentLoadedSection = null;
+    }
+  });
+
+  // Load initial content based on hash or default to chat
+  window.addEventListener("hashchange", handleHashChange);
+
+  // Initial load - wait for HTMX to be ready
+  function initialLoad() {
+    if (typeof htmx !== "undefined" && htmx.ajax) {
+      handleHashChange();
+    } else {
+      setTimeout(initialLoad, 50);
+    }
+  }
+
+  if (document.readyState === "complete") {
+    setTimeout(initialLoad, 50);
+  } else {
+    window.addEventListener("load", () => {
+      setTimeout(initialLoad, 50);
+    });
+  }
+
+  // ==========================================================================
+  // GBAlerts - Global Notification System
+  // ==========================================================================
+  window.GBAlerts = (function () {
+    const notifications = [];
+    const badge = document.getElementById("notificationsBadge");
+    const list = document.getElementById("notificationsList");
+    const btn = document.getElementById("notificationsBtn");
+    const panel = document.getElementById("notificationsPanel");
+    const clearBtn = document.getElementById("clearNotificationsBtn");
+
+    function updateBadge() {
+      if (badge) {
+        if (notifications.length > 0) {
+          badge.textContent =
+            notifications.length > 99 ? "99+" : notifications.length;
+          badge.style.display = "flex";
+        } else {
+          badge.style.display = "none";
+        }
+      }
+    }
+
+    function renderList() {
+      if (!list) return;
+      if (notifications.length === 0) {
+        list.innerHTML =
+          '<div class="notifications-empty"><span>🔔</span><p>No notifications</p></div>';
+      } else {
+        list.innerHTML = notifications
+          .map(
+            (n, i) => `
                                 <div class="notification-item notification-${n.type}" data-index="${i}">
                                     <div class="notification-icon">${n.icon || "📢"}</div>
                                     <div class="notification-content">
@@ -1120,268 +1075,300 @@ document.addEventListener("DOMContentLoaded", () => {
                                     <button class="notification-dismiss" onclick="GBAlerts.dismiss(${i})">×</button>
                                 </div>
                             `,
-                    )
-                    .join("");
-            }
+          )
+          .join("");
+      }
+    }
+
+    function add(notification) {
+      notifications.unshift({
+        ...notification,
+        time: new Date().toLocaleTimeString(),
+      });
+      updateBadge();
+      renderList();
+      // Auto-open panel when new notification arrives
+      if (panel) {
+        panel.classList.add("show");
+        if (btn) btn.setAttribute("aria-expanded", "true");
+      }
+    }
+
+    function dismiss(index) {
+      notifications.splice(index, 1);
+      updateBadge();
+      renderList();
+    }
+
+    function clearAll() {
+      notifications.length = 0;
+      updateBadge();
+      renderList();
+    }
+
+    function handleAction(index) {
+      const n = notifications[index];
+      if (n && n.action) {
+        if (typeof n.action === "function") {
+          n.action();
+        } else if (typeof n.action === "string") {
+          window.open(n.action, "_blank");
         }
+      }
+      dismiss(index);
+    }
 
-        function add(notification) {
-            notifications.unshift({
-                ...notification,
-                time: new Date().toLocaleTimeString(),
-            });
-            updateBadge();
-            renderList();
-            // Auto-open panel when new notification arrives
-            if (panel) {
-                panel.classList.add("show");
-                if (btn) btn.setAttribute("aria-expanded", "true");
-            }
+    // Toggle panel
+    if (btn && panel) {
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = panel.classList.toggle("show");
+        btn.setAttribute("aria-expanded", isOpen);
+      });
+
+      document.addEventListener("click", (e) => {
+        if (!panel.contains(e.target) && !btn.contains(e.target)) {
+          panel.classList.remove("show");
+          btn.setAttribute("aria-expanded", "false");
         }
+      });
+    }
 
-        function dismiss(index) {
-            notifications.splice(index, 1);
-            updateBadge();
-            renderList();
+    if (clearBtn) {
+      clearBtn.addEventListener("click", clearAll);
+    }
+
+    // Convenience methods for common notifications
+    return {
+      add,
+      dismiss,
+      clearAll,
+      handleAction,
+      taskCompleted: function (title, url) {
+        add({
+          type: "success",
+          icon: "✅",
+          title: "Task Completed",
+          message: title,
+          action: url,
+          actionText: "Open App",
+        });
+      },
+      taskFailed: function (title, error) {
+        add({
+          type: "error",
+          icon: "❌",
+          title: "Task Failed",
+          message: title + (error ? ": " + error : ""),
+        });
+      },
+      info: function (title, message) {
+        add({
+          type: "info",
+          icon: "ℹ️",
+          title: title,
+          message: message,
+        });
+      },
+      warning: function (title, message) {
+        add({
+          type: "warning",
+          icon: "⚠️",
+          title: title,
+          message: message,
+        });
+      },
+      connectionStatus: function (status, message) {
+        add({
+          type:
+            status === "connected"
+              ? "success"
+              : status === "disconnected"
+                ? "error"
+                : "warning",
+          icon:
+            status === "connected"
+              ? "🟢"
+              : status === "disconnected"
+                ? "🔴"
+                : "🟡",
+          title:
+            "Connection " + status.charAt(0).toUpperCase() + status.slice(1),
+          message: message || "",
+        });
+      },
+    };
+  })();
+
+  // Keyboard shortcuts
+  document.addEventListener("keydown", (e) => {
+    // Alt + number for quick app switching
+    if (e.altKey && !e.ctrlKey && !e.shiftKey) {
+      const num = parseInt(e.key);
+      if (num >= 1 && num <= 9) {
+        const items = document.querySelectorAll(".app-item");
+        if (items[num - 1]) {
+          items[num - 1].click();
+          e.preventDefault();
         }
+      }
+    }
 
-        function clearAll() {
-            notifications.length = 0;
-            updateBadge();
-            renderList();
-        }
-
-        function handleAction(index) {
-            const n = notifications[index];
-            if (n && n.action) {
-                if (typeof n.action === "function") {
-                    n.action();
-                } else if (typeof n.action === "string") {
-                    window.open(n.action, "_blank");
-                }
-            }
-            dismiss(index);
-        }
-
-        // Toggle panel
-        if (btn && panel) {
-            btn.addEventListener("click", (e) => {
-                e.stopPropagation();
-                const isOpen = panel.classList.toggle("show");
-                btn.setAttribute("aria-expanded", isOpen);
-            });
-
-            document.addEventListener("click", (e) => {
-                if (
-                    !panel.contains(e.target) &&
-                    !btn.contains(e.target)
-                ) {
-                    panel.classList.remove("show");
-                    btn.setAttribute("aria-expanded", "false");
-                }
-            });
-        }
-
-        if (clearBtn) {
-            clearBtn.addEventListener("click", clearAll);
-        }
-
-        // Convenience methods for common notifications
-        return {
-            add,
-            dismiss,
-            clearAll,
-            handleAction,
-            taskCompleted: function (title, url) {
-                add({
-                    type: "success",
-                    icon: "✅",
-                    title: "Task Completed",
-                    message: title,
-                    action: url,
-                    actionText: "Open App",
-                });
-            },
-            taskFailed: function (title, error) {
-                add({
-                    type: "error",
-                    icon: "❌",
-                    title: "Task Failed",
-                    message: title + (error ? ": " + error : ""),
-                });
-            },
-            info: function (title, message) {
-                add({
-                    type: "info",
-                    icon: "ℹ️",
-                    title: title,
-                    message: message,
-                });
-            },
-            warning: function (title, message) {
-                add({
-                    type: "warning",
-                    icon: "⚠️",
-                    title: title,
-                    message: message,
-                });
-            },
-            connectionStatus: function (status, message) {
-                add({
-                    type:
-                        status === "connected"
-                            ? "success"
-                            : status === "disconnected"
-                                ? "error"
-                                : "warning",
-                    icon:
-                        status === "connected"
-                            ? "🟢"
-                            : status === "disconnected"
-                                ? "🔴"
-                                : "🟡",
-                    title:
-                        "Connection " +
-                        status.charAt(0).toUpperCase() +
-                        status.slice(1),
-                    message: message || "",
-                });
-            },
-        };
-    })();
-
-    // Keyboard shortcuts
-    document.addEventListener("keydown", (e) => {
-        // Alt + number for quick app switching
-        if (e.altKey && !e.ctrlKey && !e.shiftKey) {
-            const num = parseInt(e.key);
-            if (num >= 1 && num <= 9) {
-                const items =
-                    document.querySelectorAll(".app-item");
-                if (items[num - 1]) {
-                    items[num - 1].click();
-                    e.preventDefault();
-                }
-            }
-        }
-
-        // Alt + A to open apps menu
-        if (e.altKey && e.key.toLowerCase() === "a") {
-            appsBtn.click();
-            e.preventDefault();
-        }
-    });
+    // Alt + A to open apps menu
+    if (e.altKey && e.key.toLowerCase() === "a") {
+      appsBtn.click();
+      e.preventDefault();
+    }
+  });
 });
 
 // User Profile Loading
 (function () {
-    function updateUserUI(user) {
-        if (!user) return;
+  function updateUserUI(user) {
+    if (!user) return;
 
-        const userName = document.getElementById("userName");
-        const userEmail = document.getElementById("userEmail");
-        const userAvatar = document.getElementById("userAvatar");
-        const userAvatarLarge =
-            document.getElementById("userAvatarLarge");
-        const authAction = document.getElementById("authAction");
-        const authText = document.getElementById("authText");
-        const authIcon = document.getElementById("authIcon");
+    const userName = document.getElementById("userName");
+    const userEmail = document.getElementById("userEmail");
+    const userAvatar = document.getElementById("userAvatar");
+    const userAvatarLarge = document.getElementById("userAvatarLarge");
+    const authAction = document.getElementById("authAction");
+    const authText = document.getElementById("authText");
+    const authIcon = document.getElementById("authIcon");
+    const settingsBtn = document.getElementById("settingsBtn");
+    const appsButton = document.getElementById("appsButton");
+    const notificationsBtn = document.getElementById("notificationsBtn");
 
-        const displayName =
-            user.display_name ||
-            user.first_name ||
-            user.username ||
-            "User";
-        const email = user.email || "";
-        const initial = (
-            displayName.charAt(0) || "U"
-        ).toUpperCase();
+    const displayName =
+      user.display_name || user.first_name || user.username || "User";
+    const email = user.email || "";
+    const initial = (displayName.charAt(0) || "U").toUpperCase();
 
-        console.log("Updating user UI:", displayName, email);
+    console.log("Updating user UI:", displayName, email);
 
-        if (userName) userName.textContent = displayName;
-        if (userEmail) userEmail.textContent = email;
-        if (userAvatar) {
-            const avatarSpan = userAvatar.querySelector("span");
-            if (avatarSpan) avatarSpan.textContent = initial;
-        }
-        if (userAvatarLarge) userAvatarLarge.textContent = initial;
+    if (userName) userName.textContent = displayName;
+    if (userEmail) userEmail.textContent = email;
+    if (userAvatar) {
+      const avatarSpan = userAvatar.querySelector("span");
+      if (avatarSpan) avatarSpan.textContent = initial;
+    }
+    if (userAvatarLarge) userAvatarLarge.textContent = initial;
 
-        if (authAction) {
-            authAction.href = "#";
-            authAction.onclick = function (e) {
-                e.preventDefault();
-                fetch("/api/auth/logout", {
-                    method: "POST",
-                }).finally(function () {
-                    localStorage.removeItem("gb-access-token");
-                    localStorage.removeItem("gb-refresh-token");
-                    localStorage.removeItem("gb-user-data");
-                    sessionStorage.removeItem("gb-access-token");
-                    window.location.href = "/auth/login.html";
-                });
-            };
-            authAction.style.color = "var(--error)";
-        }
-        if (authText) authText.textContent = "Sign out";
-        if (authIcon) {
-            authIcon.innerHTML =
-                '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line>';
-        }
+    if (authAction) {
+      authAction.href = "#";
+      authAction.onclick = function (e) {
+        e.preventDefault();
+        fetch("/api/auth/logout", {
+          method: "POST",
+        }).finally(function () {
+          localStorage.removeItem("gb-access-token");
+          localStorage.removeItem("gb-refresh-token");
+          localStorage.removeItem("gb-user-data");
+          sessionStorage.removeItem("gb-access-token");
+          window.location.href = "/auth/login.html";
+        });
+      };
+      authAction.style.color = "var(--error)";
+    }
+    if (authText) authText.textContent = "Sign out";
+    if (authIcon) {
+      authIcon.innerHTML =
+        '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line>';
     }
 
-    function loadUserProfile() {
-        var token =
-            localStorage.getItem("gb-access-token") ||
-            sessionStorage.getItem("gb-access-token");
-        if (!token) {
-            console.log("No auth token found");
-            return;
+    if (settingsBtn) settingsBtn.style.display = "";
+    if (appsButton) appsButton.style.display = "";
+    if (notificationsBtn) notificationsBtn.style.display = "";
+  }
+
+  function loadUserProfile() {
+    var token =
+      localStorage.getItem("gb-access-token") ||
+      sessionStorage.getItem("gb-access-token");
+    
+    if (!token) {
+      console.log("No auth token found - user is signed out");
+      updateSignedOutUI();
+      return;
+    }
+
+    console.log(
+      "Loading user profile with token:",
+      token.substring(0, 10) + "...",
+    );
+
+    fetch("/api/auth/me", {
+      headers: { Authorization: "Bearer " + token },
+    })
+      .then(function (res) {
+        if (!res.ok) {
+          console.log("User not authenticated");
+          updateSignedOutUI();
+          throw new Error("Not authenticated");
         }
+        return res.json();
+      })
+      .then(function (user) {
+        console.log("User profile loaded:", user);
+        updateUserUI(user);
+        localStorage.setItem("gb-user-data", JSON.stringify(user));
+      })
+      .catch(function (err) {
+        console.log("Failed to load user profile:", err);
+        updateSignedOutUI();
+      });
+  }
 
-        console.log(
-            "Loading user profile with token:",
-            token.substring(0, 10) + "...",
-        );
+  function updateSignedOutUI() {
+    const userName = document.getElementById("userName");
+    const userEmail = document.getElementById("userEmail");
+    const userAvatar = document.getElementById("userAvatar");
+    const userAvatarLarge = document.getElementById("userAvatarLarge");
+    const authAction = document.getElementById("authAction");
+    const authText = document.getElementById("authText");
+    const authIcon = document.getElementById("authIcon");
+    const settingsBtn = document.getElementById("settingsBtn");
+    const appsButton = document.getElementById("appsButton");
+    const notificationsBtn = document.getElementById("notificationsBtn");
 
-        fetch("/api/auth/me", {
-            headers: { Authorization: "Bearer " + token },
-        })
-            .then(function (res) {
-                if (!res.ok) throw new Error("Not authenticated");
-                return res.json();
-            })
-            .then(function (user) {
-                console.log("User profile loaded:", user);
-                updateUserUI(user);
-                localStorage.setItem(
-                    "gb-user-data",
-                    JSON.stringify(user),
-                );
-            })
-            .catch(function (err) {
-                console.log("Failed to load user profile:", err);
-            });
+    if (userName) userName.textContent = "User";
+    if (userEmail) userEmail.textContent = "user@example.com";
+    if (userAvatar) {
+      const avatarSpan = userAvatar.querySelector("span");
+      if (avatarSpan) avatarSpan.textContent = "U";
+    }
+    if (userAvatarLarge) userAvatarLarge.textContent = "U";
+
+    if (authAction) {
+      authAction.href = "/auth/login.html";
+      authAction.removeAttribute("onclick");
+      authAction.style.color = "var(--primary)";
+    }
+    if (authText) authText.textContent = "Sign in";
+    if (authIcon) {
+      authIcon.innerHTML =
+        '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 21 12"></polyline><line x1="15" y1="12" x2="3" y2="12"></line>';
     }
 
-    // Try to load cached user first
-    var cachedUser = localStorage.getItem("gb-user-data");
-    if (cachedUser) {
-        try {
-            var user = JSON.parse(cachedUser);
-            if (user && user.email) {
-                updateUserUI(user);
-            }
-        } catch (e) { }
-    }
+    if (settingsBtn) settingsBtn.style.display = "none";
+    if (appsButton) appsButton.style.display = "none";
+    if (notificationsBtn) notificationsBtn.style.display = "none";
+  }
 
-    // Always fetch fresh user data
-    if (document.readyState === "loading") {
-        document.addEventListener(
-            "DOMContentLoaded",
-            loadUserProfile,
-        );
-    } else {
-        loadUserProfile();
-    }
+  // Try to load cached user first
+  var cachedUser = localStorage.getItem("gb-user-data");
+  if (cachedUser) {
+    try {
+      var user = JSON.parse(cachedUser);
+      if (user && user.email) {
+        updateUserUI(user);
+      }
+    } catch (e) {}
+  }
+
+  // Always fetch fresh user data
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", loadUserProfile);
+  } else {
+    loadUserProfile();
+  }
 })();
diff --git a/ui/suite/tasks/autotask.html b/ui/suite/tasks/autotask.html
index 0224919..a7a32ed 100644
--- a/ui/suite/tasks/autotask.html
+++ b/ui/suite/tasks/autotask.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="tasks/autotask.css" />
+<link rel="stylesheet" href="/suite/tasks/autotask.css" />
 
 <div class="autotask-container" data-theme="sentient">
     <!-- Top Navigation Bar -->
@@ -478,6 +478,6 @@ Examples:
 <!-- Toast Container -->
 <div class="toast-container" id="toast-container"></div>
 
-<link rel="stylesheet" href="tasks/progress-panel.css" />
-<script src="tasks/progress-panel.js"></script>
-<script src="tasks/autotask.js"></script>
+<link rel="stylesheet" href="/suite/tasks/progress-panel.css" />
+<script src="/suite/tasks/progress-panel.js"></script>
+<script src="/suite/tasks/autotask.js"></script>
diff --git a/ui/suite/tasks/tasks.js b/ui/suite/tasks/tasks.js
index 86c6773..2a51f1e 100644
--- a/ui/suite/tasks/tasks.js
+++ b/ui/suite/tasks/tasks.js
@@ -213,8 +213,10 @@ function setupIntentInputHandlers() {
 }
 
 // Task polling for async task creation
-let activePollingTaskId = null;
-let pollingInterval = null;
+if (typeof activePollingTaskId === "undefined") {
+  var activePollingTaskId = null;
+  var pollingInterval = null;
+}
 
 function startTaskPolling(taskId) {
   // Stop any existing polling
@@ -629,7 +631,9 @@ function handleWebSocketMessage(data) {
 }
 
 // Store pending manifest updates for tasks whose elements aren't loaded yet
-const pendingManifestUpdates = new Map();
+if (typeof pendingManifestUpdates === "undefined") {
+  var pendingManifestUpdates = new Map();
+}
 
 function renderManifestProgress(
   taskId,
@@ -2759,8 +2763,9 @@ function formatTime(seconds) {
 // GLOBAL STYLES FOR TOAST ANIMATIONS
 // =============================================================================
 
-const style = document.createElement("style");
-style.textContent = `
+if (typeof taskStyleElement === "undefined") {
+  var taskStyleElement = document.createElement("style");
+  taskStyleElement.textContent = `
     @keyframes slideIn {
         from {
             opacity: 0;
@@ -2805,7 +2810,8 @@ style.textContent = `
         }
     }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(taskStyleElement);
+}
 
 // =============================================================================
 // GOALS, PENDING INFO, SCHEDULERS, MONITORS