From b4c49314a6a8813ef44811c1dc97bfa953e438bf Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Sat, 3 Jan 2026 17:19:17 -0300
Subject: [PATCH] Fix apps dropdown menu positioning near the grid button

- Changed apps-dropdown right position from 60px to 0 in app.css
- Wrapped apps button and dropdown in a container with position:relative
- Moved dropdown to be a sibling of the button inside the container
- Removed duplicate dropdown from header-right section
---
 ui/suite/analytics/analytics.html       |   26 +-
 ui/suite/analytics/analytics.js         |    2 +-
 ui/suite/calendar/calendar.html         |   16 +-
 ui/suite/chat/chat.css                  |  225 +++-
 ui/suite/chat/chat.html                 |  513 +++++----
 ui/suite/css/app.css                    |  241 ++++-
 ui/suite/css/base.css                   |   27 +
 ui/suite/css/theme-sentient.css         |   34 +-
 ui/suite/drive/drive.html               |   21 +-
 ui/suite/index.html                     | 1317 +++++++++++++----------
 ui/suite/js/base.js                     |    6 +-
 ui/suite/js/htmx-app.js                 |  106 +-
 ui/suite/mail/mail.html                 |   30 +-
 ui/suite/monitoring/alerts.html         |   10 +-
 ui/suite/monitoring/alerts.js           |    2 +-
 ui/suite/monitoring/health.html         |   18 +-
 ui/suite/monitoring/home-dashboard.html |   18 +-
 ui/suite/monitoring/index.html          |  447 ++++++--
 ui/suite/monitoring/logs.html           |    2 +-
 ui/suite/monitoring/metrics.html        |   14 +-
 ui/suite/monitoring/monitoring.html     |   28 +-
 ui/suite/monitoring/resources.html      |   20 +-
 ui/suite/paper/paper.html               |   44 +-
 ui/suite/paper/paper.js                 |    4 +-
 ui/suite/research/research.html         |   18 +-
 ui/suite/research/research.js           |    6 +-
 ui/suite/settings/index.html            |   35 +-
 ui/suite/sources/accounts.html          |    2 +-
 ui/suite/sources/index.html             | 1044 +++++++++++-------
 ui/suite/sources/sources.js             |   52 +-
 ui/suite/tasks/autotask.html            |    4 +-
 ui/suite/tasks/taskmd.css               |   64 +-
 ui/suite/tasks/tasks.css                |   10 +-
 ui/suite/tasks/tasks.html               |   23 +-
 ui/suite/tasks/tasks.js                 |    2 +-
 35 files changed, 2800 insertions(+), 1631 deletions(-)

diff --git a/ui/suite/analytics/analytics.html b/ui/suite/analytics/analytics.html
index 98b0dae..f709e07 100644
--- a/ui/suite/analytics/analytics.html
+++ b/ui/suite/analytics/analytics.html
@@ -67,7 +67,7 @@
         <aside class="metrics-sidebar">
             <div
                 class="metric-card"
-                hx-get="/api/analytics/messages/count"
+                hx-get="/api/ui/analytics/messages/count"
                 hx-trigger="load, every 30s"
                 hx-swap="innerHTML"
             >
@@ -90,7 +90,7 @@
 
             <div
                 class="metric-card"
-                hx-get="/api/analytics/sessions/active"
+                hx-get="/api/ui/analytics/sessions/active"
                 hx-trigger="load, every 10s"
                 hx-swap="innerHTML"
             >
@@ -127,7 +127,7 @@
 
             <div
                 class="metric-card"
-                hx-get="/api/analytics/response/avg"
+                hx-get="/api/ui/analytics/response/avg"
                 hx-trigger="load, every 30s"
                 hx-swap="innerHTML"
             >
@@ -150,7 +150,7 @@
 
             <div
                 class="metric-card"
-                hx-get="/api/analytics/llm/tokens"
+                hx-get="/api/ui/analytics/llm/tokens"
                 hx-trigger="load, every 60s"
                 hx-swap="innerHTML"
             >
@@ -187,7 +187,7 @@
 
             <div
                 class="metric-card"
-                hx-get="/api/analytics/storage/usage"
+                hx-get="/api/ui/analytics/storage/usage"
                 hx-trigger="load, every 120s"
                 hx-swap="innerHTML"
             >
@@ -221,7 +221,7 @@
 
             <div
                 class="metric-card"
-                hx-get="/api/analytics/errors/count"
+                hx-get="/api/ui/analytics/errors/count"
                 hx-trigger="load, every 30s"
                 hx-swap="innerHTML"
             >
@@ -289,7 +289,7 @@
                     <div
                         class="chart-container"
                         id="messagesChart"
-                        hx-get="/api/analytics/timeseries/messages"
+                        hx-get="/api/ui/analytics/timeseries/messages"
                         hx-trigger="load, every 60s"
                         hx-swap="innerHTML"
                     >
@@ -324,7 +324,7 @@
                     <div
                         class="chart-container"
                         id="responseChart"
-                        hx-get="/api/analytics/timeseries/response_time"
+                        hx-get="/api/ui/analytics/timeseries/response_time"
                         hx-trigger="load, every 60s"
                         hx-swap="innerHTML"
                     >
@@ -343,7 +343,7 @@
                     <div
                         class="chart-container"
                         id="channelChart"
-                        hx-get="/api/analytics/channels/distribution"
+                        hx-get="/api/ui/analytics/channels/distribution"
                         hx-trigger="load, every 120s"
                         hx-swap="innerHTML"
                     >
@@ -362,7 +362,7 @@
                     <div
                         class="chart-container"
                         id="botChart"
-                        hx-get="/api/analytics/bots/performance"
+                        hx-get="/api/ui/analytics/bots/performance"
                         hx-trigger="load, every 60s"
                         hx-swap="innerHTML"
                     >
@@ -504,7 +504,7 @@
             <div
                 class="activity-feed"
                 id="activityFeed"
-                hx-get="/api/analytics/activity/recent"
+                hx-get="/api/ui/analytics/activity/recent"
                 hx-trigger="load, every 15s"
                 hx-swap="innerHTML"
             >
@@ -514,7 +514,7 @@
             <h3 class="mt-4">Top Queries</h3>
             <div
                 class="top-queries"
-                hx-get="/api/analytics/queries/top"
+                hx-get="/api/ui/analytics/queries/top"
                 hx-trigger="load, every 60s"
                 hx-swap="innerHTML"
             >
@@ -598,7 +598,7 @@
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
 
             try {
-                const response = await fetch("/api/analytics/query", {
+                const response = await fetch("/api/ui/analytics/chat", {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
diff --git a/ui/suite/analytics/analytics.js b/ui/suite/analytics/analytics.js
index ea704a4..36c72e1 100644
--- a/ui/suite/analytics/analytics.js
+++ b/ui/suite/analytics/analytics.js
@@ -73,7 +73,7 @@ async function sendAnalyticsQuery() {
     messagesContainer.scrollTop = messagesContainer.scrollHeight;
 
     try {
-        const response = await fetch("/api/analytics/query", {
+        const response = await fetch("/api/ui/analytics/chat", {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
diff --git a/ui/suite/calendar/calendar.html b/ui/suite/calendar/calendar.html
index 9156a27..93bb5c0 100644
--- a/ui/suite/calendar/calendar.html
+++ b/ui/suite/calendar/calendar.html
@@ -14,7 +14,7 @@
         <!-- Quick Actions -->
         <div class="sidebar-actions">
             <button class="btn-primary-full" id="new-event-btn"
-                    hx-get="/ui/calendar/event/new"
+                    hx-get="/api/ui/calendar/events/new"
                     hx-target="#event-modal-content"
                     hx-swap="innerHTML">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -55,7 +55,7 @@
             <div class="section-header">
                 <h3>My Calendars</h3>
                 <button class="btn-icon-sm" title="Add Calendar"
-                        hx-get="/ui/calendar/new"
+                        hx-get="/api/ui/calendar/calendars/new"
                         hx-target="#calendar-modal-content">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <line x1="12" y1="5" x2="12" y2="19"></line>
@@ -64,7 +64,7 @@
                 </button>
             </div>
             <div class="calendars-list" id="calendars-list"
-                 hx-get="/ui/calendar/list"
+                 hx-get="/api/ui/calendar/calendars"
                  hx-trigger="load"
                  hx-swap="innerHTML">
                 <!-- Calendars loaded here -->
@@ -75,7 +75,7 @@
         <div class="sidebar-section">
             <h3>Upcoming</h3>
             <div class="upcoming-events" id="upcoming-events"
-                 hx-get="/ui/calendar/upcoming"
+                 hx-get="/api/ui/calendar/events/upcoming"
                  hx-trigger="load"
                  hx-swap="innerHTML">
                 <!-- Upcoming events loaded here -->
@@ -137,12 +137,6 @@
                     <button class="view-btn active" data-view="week">Week</button>
                     <button class="view-btn" data-view="month">Month</button>
                 </div>
-                <button class="btn-icon" id="calendar-settings" title="Settings">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <circle cx="12" cy="12" r="3"></circle>
-                        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"></path>
-                    </svg>
-                </button>
             </div>
         </div>
 
@@ -423,7 +417,7 @@
                 <div class="form-group">
                     <label>Import to calendar</label>
                     <select name="calendar_id"
-                            hx-get="/ui/calendar/list"
+                            hx-get="/api/ui/calendar/calendars"
                             hx-trigger="load"
                             hx-swap="innerHTML">
                         <option value="">Default Calendar</option>
diff --git a/ui/suite/chat/chat.css b/ui/suite/chat/chat.css
index 8039c24..52b7f68 100644
--- a/ui/suite/chat/chat.css
+++ b/ui/suite/chat/chat.css
@@ -1,5 +1,84 @@
 /* Chat module styles - including chat layout and projector component */
 
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    top: 80px;
+    right: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    z-index: 10002;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 18px;
+    background: var(--surface, #1a1a24);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+    animation: toast-in 0.3s ease;
+}
+
+.toast-success {
+    border-color: var(--success, #22c55e);
+}
+
+.toast-error {
+    border-color: var(--error, #ef4444);
+}
+
+.toast-warning {
+    border-color: var(--warning, #f59e0b);
+}
+
+.toast-info {
+    border-color: var(--accent, #3b82f6);
+}
+
+.toast-icon {
+    font-size: 16px;
+}
+
+.toast-message {
+    font-size: 13px;
+    color: #ffffff;
+}
+
+.toast-close {
+    background: transparent;
+    border: none;
+    color: #888888;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+}
+
+.toast-close:hover {
+    color: #ffffff;
+}
+
+.toast-fade-out {
+    opacity: 0;
+    transform: translateX(20px);
+    transition: all 0.3s ease;
+}
+
+@keyframes toast-in {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
 /* Chat Layout */
 .chat-layout {
     display: flex;
@@ -15,30 +94,7 @@
     box-sizing: border-box;
 }
 
-/* Connection Status */
-.connection-status {
-    position: fixed;
-    top: 80px;
-    right: 20px;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    z-index: 1000;
-    transition: all 0.3s;
-}
-
-.connection-status.connecting {
-    background: #f59e0b;
-    animation: pulse 1.5s infinite;
-}
-
-.connection-status.connected {
-    background: #10b981;
-}
-
-.connection-status.disconnected {
-    background: #ef4444;
-}
+/* Connection Status - use shared styles from app.css */
 
 @keyframes pulse {
     0%,
@@ -96,21 +152,95 @@
 }
 
 .user-message {
-    background: var(--accent-color, #3b82f6);
-    color: white;
+    background: var(--accent, var(--primary, #3b82f6));
+    color: #ffffff !important;
     border-bottom-right-radius: 4px;
 }
 
+/* Light accent themes need dark text on user messages */
+[data-theme="sentient"] .user-message,
+[data-theme="y2kglow"] .user-message,
+[data-theme="arcadeflash"] .user-message,
+[data-theme="green"] .user-message,
+[data-theme="jazzage"] .user-message,
+[data-theme="mellowgold"] .user-message,
+[data-theme="polaroidmemories"] .user-message,
+[data-theme="seasidepostcard"] .user-message,
+[data-theme="saturdaycartoons"] .user-message,
+[data-theme="light"] .user-message,
+[data-theme="typewriter"] .user-message,
+[data-theme="3dbevel"] .user-message {
+    color: #000000 !important;
+}
+
 .bot-message {
-    background: var(--secondary-bg, #f3f4f6);
-    color: var(--text-primary, #1f2937);
+    background: var(--surface, var(--card, #2a2a2a));
+    color: #ffffff !important;
     border-bottom-left-radius: 4px;
 }
 
-/* Dark theme adjustments */
-[data-theme="dark"] .bot-message {
-    background: #374151;
-    color: #f9fafb;
+.bot-message,
+.bot-message p,
+.bot-message span,
+.bot-message li,
+.bot-message a,
+.bot-message strong,
+.bot-message em,
+.bot-message h1,
+.bot-message h2,
+.bot-message h3,
+.bot-message h4 {
+    color: #ffffff !important;
+}
+
+/* Light background themes need dark bot message text */
+[data-theme="light"] .bot-message,
+[data-theme="light"] .bot-message p,
+[data-theme="light"] .bot-message span,
+[data-theme="light"] .bot-message li,
+[data-theme="light"] .bot-message a,
+[data-theme="light"] .bot-message strong,
+[data-theme="light"] .bot-message em,
+[data-theme="light"] .bot-message h1,
+[data-theme="light"] .bot-message h2,
+[data-theme="light"] .bot-message h3,
+[data-theme="light"] .bot-message h4,
+[data-theme="polaroidmemories"] .bot-message,
+[data-theme="polaroidmemories"] .bot-message p,
+[data-theme="polaroidmemories"] .bot-message span,
+[data-theme="polaroidmemories"] .bot-message li,
+[data-theme="polaroidmemories"] .bot-message a,
+[data-theme="polaroidmemories"] .bot-message h1,
+[data-theme="polaroidmemories"] .bot-message h2,
+[data-theme="seasidepostcard"] .bot-message,
+[data-theme="seasidepostcard"] .bot-message p,
+[data-theme="seasidepostcard"] .bot-message span,
+[data-theme="seasidepostcard"] .bot-message li,
+[data-theme="seasidepostcard"] .bot-message a,
+[data-theme="seasidepostcard"] .bot-message h1,
+[data-theme="seasidepostcard"] .bot-message h2,
+[data-theme="saturdaycartoons"] .bot-message,
+[data-theme="saturdaycartoons"] .bot-message p,
+[data-theme="saturdaycartoons"] .bot-message span,
+[data-theme="saturdaycartoons"] .bot-message li,
+[data-theme="saturdaycartoons"] .bot-message a,
+[data-theme="saturdaycartoons"] .bot-message h1,
+[data-theme="saturdaycartoons"] .bot-message h2,
+[data-theme="typewriter"] .bot-message,
+[data-theme="typewriter"] .bot-message p,
+[data-theme="typewriter"] .bot-message span,
+[data-theme="typewriter"] .bot-message li,
+[data-theme="typewriter"] .bot-message a,
+[data-theme="typewriter"] .bot-message h1,
+[data-theme="typewriter"] .bot-message h2,
+[data-theme="3dbevel"] .bot-message,
+[data-theme="3dbevel"] .bot-message p,
+[data-theme="3dbevel"] .bot-message span,
+[data-theme="3dbevel"] .bot-message li,
+[data-theme="3dbevel"] .bot-message a,
+[data-theme="3dbevel"] .bot-message h1,
+[data-theme="3dbevel"] .bot-message h2 {
+    color: #000000 !important;
 }
 
 /* Markdown content in bot messages */
@@ -123,7 +253,7 @@
 }
 
 .bot-message code {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.1);
     padding: 2px 6px;
     border-radius: 4px;
     font-family: "Monaco", "Menlo", monospace;
@@ -131,7 +261,7 @@
 }
 
 .bot-message pre {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.2);
     padding: 12px;
     border-radius: 8px;
     overflow-x: auto;
@@ -146,8 +276,8 @@
 /* Footer */
 footer {
     padding: 16px 0;
-    border-top: 1px solid var(--border-color, #e5e7eb);
-    background: var(--primary-bg, #ffffff);
+    border-top: 1px solid var(--border, var(--border-color, #2a2a2a));
+    background: transparent;
 }
 
 /* Suggestions */
@@ -176,20 +306,16 @@ footer {
 }
 
 /* Input Container */
-.input-container {
+.input-container,
+form.input-container {
     display: flex;
     gap: 12px;
     align-items: center;
     padding: 8px 12px;
-    background: var(--surface, var(--secondary-bg, #f9fafb));
-    border: 1px solid var(--border, var(--border-color, #e5e7eb));
+    background: var(--surface, var(--card, #1a1a24));
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
     border-radius: 28px;
-}
-
-[data-theme="dark"] .input-container,
-[data-theme="sentient"] .input-container {
-    background: var(--surface, #1a1a24);
-    border-color: var(--border, #2a2a3a);
+    margin: 0;
 }
 
 .input-container:focus-within {
@@ -203,23 +329,18 @@ footer {
     border-radius: 20px;
     border: none;
     background: transparent;
-    color: var(--text-primary, #1f2937);
+    color: #ffffff;
     font-size: 15px;
     outline: none;
     transition: all 0.2s;
 }
 
-[data-theme="dark"] #messageInput,
-[data-theme="sentient"] #messageInput {
-    color: var(--text-primary, #ffffff);
-}
-
 #messageInput:focus {
     outline: none;
 }
 
 #messageInput::placeholder {
-    color: var(--text-muted, #9ca3af);
+    color: #888888;
 }
 
 #voiceBtn,
diff --git a/ui/suite/chat/chat.html b/ui/suite/chat/chat.html
index 680e650..15c8468 100644
--- a/ui/suite/chat/chat.html
+++ b/ui/suite/chat/chat.html
@@ -1,227 +1,11 @@
 <link rel="stylesheet" href="chat/chat.css" />
-<script>
-    // WebSocket URL - use relative path to go through botui proxy
-    const WS_BASE_URL =
-        window.location.protocol === "https:" ? "wss://" : "ws://";
-    const WS_URL = `${WS_BASE_URL}${window.location.host}`;
-
-    // Message Type Constants
-    const MessageType = {
-        EXTERNAL: 0,
-        USER: 1,
-        BOT_RESPONSE: 2,
-        CONTINUE: 3,
-        SUGGESTION: 4,
-        CONTEXT_CHANGE: 5,
-    };
-
-    // State
-    let ws = null,
-        currentSessionId = null,
-        currentUserId = null,
-        currentBotId = "default";
-    let isStreaming = false,
-        streamingMessageId = null,
-        currentStreamingContent = "";
-    let reconnectAttempts = 0;
-    const maxReconnectAttempts = 5;
-
-    // Initialize auth and WebSocket
-    async function initChat() {
-        try {
-            updateConnectionStatus("connecting");
-            const botName = "default";
-            // Use the botui proxy for auth (handles SSL cert issues)
-            const response = await fetch(
-                `/api/auth?bot_name=${encodeURIComponent(botName)}`,
-            );
-            const auth = await response.json();
-            currentUserId = auth.user_id;
-            currentSessionId = auth.session_id;
-            currentBotId = auth.bot_id || "default";
-            console.log("Auth:", {
-                currentUserId,
-                currentSessionId,
-                currentBotId,
-            });
-            connectWebSocket();
-        } catch (e) {
-            console.error("Auth failed:", e);
-            updateConnectionStatus("disconnected");
-            setTimeout(initChat, 3000);
-        }
-    }
-
-    function connectWebSocket() {
-        if (ws) ws.close();
-        // Use the botui proxy for WebSocket (handles SSL cert issues)
-        const url = `${WS_URL}/ws?session_id=${currentSessionId}&user_id=${currentUserId}`;
-        ws = new WebSocket(url);
-
-        ws.onopen = () => {
-            console.log("WebSocket connected");
-            updateConnectionStatus("connected");
-            reconnectAttempts = 0;
-        };
-
-        ws.onmessage = (event) => {
-            try {
-                const data = JSON.parse(event.data);
-                if (data.type === "connected") return;
-                if (data.message_type === MessageType.BOT_RESPONSE) {
-                    processMessage(data);
-                }
-            } catch (e) {
-                console.error("WS message error:", e);
-            }
-        };
-
-        ws.onclose = () => {
-            updateConnectionStatus("disconnected");
-            if (reconnectAttempts < maxReconnectAttempts) {
-                reconnectAttempts++;
-                setTimeout(connectWebSocket, 1000 * reconnectAttempts);
-            }
-        };
-
-        ws.onerror = (e) => console.error("WebSocket error:", e);
-    }
-
-    function processMessage(data) {
-        if (data.is_complete) {
-            if (isStreaming) {
-                finalizeStreaming();
-            } else {
-                addMessage("bot", data.content);
-            }
-            isStreaming = false;
-        } else {
-            if (!isStreaming) {
-                isStreaming = true;
-                streamingMessageId = "streaming-" + Date.now();
-                currentStreamingContent = data.content || "";
-                addMessage("bot", currentStreamingContent, streamingMessageId);
-            } else {
-                currentStreamingContent += data.content || "";
-                updateStreaming(currentStreamingContent);
-            }
-        }
-    }
-
-    function addMessage(sender, content, msgId = null) {
-        const messages = document.getElementById("messages");
-        const div = document.createElement("div");
-        div.className = `message ${sender}`;
-        if (msgId) div.id = msgId;
-
-        if (sender === "user") {
-            div.innerHTML = `<div class="message-content user-message">${escapeHtml(content)}</div>`;
-        } else {
-            div.innerHTML = `<div class="message-content bot-message">${marked.parse(content)}</div>`;
-        }
-        messages.appendChild(div);
-        messages.scrollTop = messages.scrollHeight;
-    }
-
-    function updateStreaming(content) {
-        const el = document.getElementById(streamingMessageId);
-        if (el)
-            el.querySelector(".message-content").innerHTML =
-                marked.parse(content);
-    }
-
-    function finalizeStreaming() {
-        const el = document.getElementById(streamingMessageId);
-        if (el) {
-            el.querySelector(".message-content").innerHTML = marked.parse(
-                currentStreamingContent,
-            );
-            el.removeAttribute("id");
-        }
-        streamingMessageId = null;
-        currentStreamingContent = "";
-    }
-
-    function sendMessage() {
-        const input = document.getElementById("messageInput");
-        const content = input.value.trim();
-        if (!content || !ws || ws.readyState !== WebSocket.OPEN) return;
-
-        addMessage("user", content);
-
-        ws.send(
-            JSON.stringify({
-                bot_id: currentBotId,
-                user_id: currentUserId,
-                session_id: currentSessionId,
-                channel: "web",
-                content: content,
-                message_type: MessageType.USER,
-                timestamp: new Date().toISOString(),
-            }),
-        );
-
-        input.value = "";
-        input.focus();
-    }
-
-    function updateConnectionStatus(status) {
-        const el = document.getElementById("connectionStatus");
-        if (el) el.className = `connection-status ${status}`;
-    }
-
-    function escapeHtml(text) {
-        const div = document.createElement("div");
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
-    // Initialize chat - runs immediately when script is executed
-    // (works both on full page load and HTMX partial load)
-    function setupChat() {
-        const input = document.getElementById("messageInput");
-        const sendBtn = document.getElementById("sendBtn");
-
-        if (sendBtn) sendBtn.onclick = sendMessage;
-        if (input) {
-            input.addEventListener("keypress", (e) => {
-                if (e.key === "Enter") sendMessage();
-            });
-        }
-
-        initChat();
-    }
-
-    // Initialize after a micro-delay to ensure DOM is ready
-    // This works for both full page loads and HTMX partial loads
-    setTimeout(() => {
-        if (
-            document.getElementById("messageInput") &&
-            !window.chatInitialized
-        ) {
-            window.chatInitialized = true;
-            setupChat();
-        }
-    }, 0);
-
-    // Fallback for full page load
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", () => {
-            if (!window.chatInitialized) {
-                window.chatInitialized = true;
-                setupChat();
-            }
-        });
-    }
-</script>
 
 <div class="chat-layout" id="chat-app">
-    <div id="connectionStatus" class="connection-status disconnected"></div>
     <main id="messages"></main>
 
     <footer>
         <div class="suggestions-container" id="suggestions"></div>
-        <div class="input-container">
+        <form class="input-container" id="chatForm">
             <input
                 name="content"
                 id="messageInput"
@@ -230,8 +14,299 @@
                 autofocus
             />
             <button type="button" id="voiceBtn" title="Voice">🎤</button>
-            <button type="button" id="sendBtn" title="Send">↑</button>
-        </div>
+            <button type="submit" id="sendBtn" title="Send">↑</button>
+        </form>
     </footer>
     <button class="scroll-to-bottom" id="scrollToBottom">↓</button>
 </div>
+
+<script>
+    (function () {
+        "use strict";
+
+        // ==========================================================================
+        // NOTIFICATION HELPER - Uses GBAlerts bell system
+        // ==========================================================================
+        function notify(message, type) {
+            type = type || "info";
+            if (window.GBAlerts) {
+                if (type === "success") {
+                    window.GBAlerts.info("Chat", message);
+                } else if (type === "error") {
+                    window.GBAlerts.warning("Chat", message);
+                } else {
+                    window.GBAlerts.info("Chat", message);
+                }
+            }
+        }
+
+        // ==========================================================================
+        // CONFIGURATION
+        // ==========================================================================
+        var WS_BASE_URL =
+            window.location.protocol === "https:" ? "wss://" : "ws://";
+        var WS_URL = WS_BASE_URL + window.location.host;
+
+        var MessageType = {
+            EXTERNAL: 0,
+            USER: 1,
+            BOT_RESPONSE: 2,
+            CONTINUE: 3,
+            SUGGESTION: 4,
+            CONTEXT_CHANGE: 5,
+        };
+
+        // ==========================================================================
+        // STATE
+        // ==========================================================================
+        var ws = null;
+        var currentSessionId = null;
+        var currentUserId = null;
+        var currentBotId = "default";
+        var isStreaming = false;
+        var streamingMessageId = null;
+        var currentStreamingContent = "";
+        var reconnectAttempts = 0;
+        var maxReconnectAttempts = 5;
+
+        // ==========================================================================
+        // MESSAGE FUNCTIONS
+        // ==========================================================================
+        function escapeHtml(text) {
+            var div = document.createElement("div");
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function addMessage(sender, content, msgId) {
+            var messages = document.getElementById("messages");
+            if (!messages) return;
+
+            var div = document.createElement("div");
+            div.className = "message " + sender;
+            if (msgId) div.id = msgId;
+
+            if (sender === "user") {
+                div.innerHTML =
+                    '<div class="message-content user-message">' +
+                    escapeHtml(content) +
+                    "</div>";
+            } else {
+                var parsed =
+                    typeof marked !== "undefined" && marked.parse
+                        ? marked.parse(content)
+                        : escapeHtml(content);
+                div.innerHTML =
+                    '<div class="message-content bot-message">' +
+                    parsed +
+                    "</div>";
+            }
+
+            messages.appendChild(div);
+            messages.scrollTop = messages.scrollHeight;
+        }
+
+        function updateStreaming(content) {
+            var el = document.getElementById(streamingMessageId);
+            if (el) {
+                var parsed =
+                    typeof marked !== "undefined" && marked.parse
+                        ? marked.parse(content)
+                        : escapeHtml(content);
+                el.querySelector(".message-content").innerHTML = parsed;
+            }
+        }
+
+        function finalizeStreaming() {
+            var el = document.getElementById(streamingMessageId);
+            if (el) {
+                var parsed =
+                    typeof marked !== "undefined" && marked.parse
+                        ? marked.parse(currentStreamingContent)
+                        : escapeHtml(currentStreamingContent);
+                el.querySelector(".message-content").innerHTML = parsed;
+                el.removeAttribute("id");
+            }
+            streamingMessageId = null;
+            currentStreamingContent = "";
+        }
+
+        function processMessage(data) {
+            if (data.is_complete) {
+                if (isStreaming) {
+                    finalizeStreaming();
+                } else {
+                    addMessage("bot", data.content);
+                }
+                isStreaming = false;
+            } else {
+                if (!isStreaming) {
+                    isStreaming = true;
+                    streamingMessageId = "streaming-" + Date.now();
+                    currentStreamingContent = data.content || "";
+                    addMessage(
+                        "bot",
+                        currentStreamingContent,
+                        streamingMessageId,
+                    );
+                } else {
+                    currentStreamingContent += data.content || "";
+                    updateStreaming(currentStreamingContent);
+                }
+            }
+        }
+
+        // ==========================================================================
+        // SEND MESSAGE - GLOBAL FUNCTION
+        // ==========================================================================
+        function sendMessage() {
+            var input = document.getElementById("messageInput");
+            if (!input) {
+                console.error("Chat input not found");
+                return;
+            }
+
+            var content = input.value.trim();
+            if (!content) {
+                return;
+            }
+
+            // Always show user message locally
+            addMessage("user", content);
+            input.value = "";
+            input.focus();
+
+            // Try to send via WebSocket if connected
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(
+                    JSON.stringify({
+                        bot_id: currentBotId,
+                        user_id: currentUserId,
+                        session_id: currentSessionId,
+                        channel: "web",
+                        content: content,
+                        message_type: MessageType.USER,
+                        timestamp: new Date().toISOString(),
+                    }),
+                );
+            } else {
+                notify("Not connected to server. Message not sent.", "warning");
+            }
+        }
+
+        // Make sendMessage globally available immediately
+        window.sendMessage = sendMessage;
+
+        // ==========================================================================
+        // WEBSOCKET CONNECTION
+        // ==========================================================================
+        function connectWebSocket() {
+            if (ws) {
+                ws.close();
+            }
+
+            var url =
+                WS_URL +
+                "/ws?session_id=" +
+                currentSessionId +
+                "&user_id=" +
+                currentUserId;
+            ws = new WebSocket(url);
+
+            ws.onopen = function () {
+                console.log("WebSocket connected");
+                reconnectAttempts = 0;
+            };
+
+            ws.onmessage = function (event) {
+                try {
+                    var data = JSON.parse(event.data);
+                    if (data.type === "connected") return;
+                    if (data.message_type === MessageType.BOT_RESPONSE) {
+                        processMessage(data);
+                    }
+                } catch (e) {
+                    console.error("WS message error:", e);
+                }
+            };
+
+            ws.onclose = function () {
+                notify("Disconnected from chat server", "error");
+                if (reconnectAttempts < maxReconnectAttempts) {
+                    reconnectAttempts++;
+                    setTimeout(connectWebSocket, 1000 * reconnectAttempts);
+                }
+            };
+
+            ws.onerror = function (e) {
+                console.error("WebSocket error:", e);
+            };
+        }
+
+        // ==========================================================================
+        // INITIALIZATION
+        // ==========================================================================
+        function initChat() {
+            var botName = "default";
+            fetch("/api/auth?bot_name=" + encodeURIComponent(botName))
+                .then(function (response) {
+                    return response.json();
+                })
+                .then(function (auth) {
+                    currentUserId = auth.user_id;
+                    currentSessionId = auth.session_id;
+                    currentBotId = auth.bot_id || "default";
+                    console.log("Auth:", {
+                        currentUserId: currentUserId,
+                        currentSessionId: currentSessionId,
+                        currentBotId: currentBotId,
+                    });
+                    connectWebSocket();
+                })
+                .catch(function (e) {
+                    console.error("Auth failed:", e);
+                    notify("Failed to connect to chat server", "error");
+                    setTimeout(initChat, 3000);
+                });
+        }
+
+        function setupEventHandlers() {
+            var form = document.getElementById("chatForm");
+            var input = document.getElementById("messageInput");
+            var sendBtn = document.getElementById("sendBtn");
+
+            if (form) {
+                form.onsubmit = function (e) {
+                    e.preventDefault();
+                    sendMessage();
+                    return false;
+                };
+            }
+
+            if (input) {
+                input.onkeydown = function (e) {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        sendMessage();
+                    }
+                };
+            }
+
+            if (sendBtn) {
+                sendBtn.onclick = function (e) {
+                    e.preventDefault();
+                    sendMessage();
+                };
+            }
+        }
+
+        // Run setup immediately
+        setupEventHandlers();
+        initChat();
+
+        console.log(
+            "Chat module initialized, sendMessage is:",
+            typeof window.sendMessage,
+        );
+    })();
+</script>
diff --git a/ui/suite/css/app.css b/ui/suite/css/app.css
index 6b9a923..bc8d4f4 100644
--- a/ui/suite/css/app.css
+++ b/ui/suite/css/app.css
@@ -126,7 +126,7 @@
     /* Header */
     --header-bg: hsla(var(--background) / 0.8);
     --header-border: hsla(var(--border) / 0.8);
-    --header-height: 64px;
+    --header-height: 40px;
 
     /* Input Fields */
     --input-bg: hsl(var(--input));
@@ -296,11 +296,11 @@ body {
 /* LAYOUT STRUCTURE                             */
 /* ============================================ */
 #main-content {
-    height: calc(100vh - 64px);
+    height: calc(100vh - var(--header-height));
     width: 100%;
     overflow: hidden;
     position: relative;
-    margin-top: 64px;
+    margin-top: var(--header-height);
 }
 
 .section {
@@ -323,14 +323,14 @@ body {
     left: 0;
     right: 0;
     height: var(--header-height);
-    background: var(--header-bg);
+    background: var(--bg, var(--surface, #0a0a0a));
     backdrop-filter: blur(20px) saturate(180%);
     -webkit-backdrop-filter: blur(20px) saturate(180%);
-    border-bottom: 1px solid var(--header-border);
+    border-bottom: 1px solid var(--border, var(--border-color, #2a2a2a));
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 var(--space-lg);
+    padding: 0 var(--space-md);
     z-index: var(--z-sticky);
     box-shadow: var(--shadow-sm);
     transition: all var(--transition-smooth);
@@ -370,29 +370,31 @@ body {
 .app-tab {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
+    gap: 4px;
+    padding: 6px 10px;
     border-radius: var(--radius-md);
-    color: var(--text-secondary);
+    color: var(--text-secondary, #888888);
     text-decoration: none;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 500;
     transition: all var(--transition-fast);
     border: 1px solid transparent;
 }
 
 .app-tab:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
+    background: var(--surface-hover, var(--bg-hover, rgba(255, 255, 255, 0.1)));
+    color: var(--text, var(--text-primary, #ffffff));
 }
 
 .app-tab.active {
-    background: var(--accent-light);
-    color: var(--accent-color);
-    border-color: var(--accent-color);
+    background: var(--primary-light, rgba(212, 245, 5, 0.15));
+    color: var(--primary, var(--accent-color, #d4f505));
+    border-color: var(--primary, var(--accent-color, #d4f505));
 }
 
 .app-tab svg {
+    width: 14px;
+    height: 14px;
     opacity: 0.7;
 }
 
@@ -406,10 +408,11 @@ body {
 .header-search {
     display: flex;
     align-items: center;
-    gap: var(--space-sm);
-    padding: 8px 14px;
-    background: var(--glass-bg);
-    border: 1px solid var(--border-color);
+    gap: var(--space-xs);
+    padding: 4px 12px;
+    height: 28px;
+    background: var(--surface, var(--glass-bg, rgba(255, 255, 255, 0.05)));
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
     border-radius: var(--radius-full);
     width: 100%;
     transition: all var(--transition-fast);
@@ -430,7 +433,7 @@ body {
     border: none;
     background: transparent;
     color: var(--text-primary);
-    font-size: 14px;
+    font-size: 12px;
     outline: none;
 }
 
@@ -439,11 +442,11 @@ body {
 }
 
 .search-shortcut {
-    padding: 2px 6px;
+    padding: 2px 5px;
     background: var(--bg-hover);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 11px;
+    border-radius: 3px;
+    font-size: 10px;
     color: var(--text-secondary);
     font-family: inherit;
 }
@@ -475,13 +478,13 @@ body {
 .logo-wrapper {
     display: flex;
     align-items: center;
-    gap: var(--space-sm);
+    gap: var(--space-xs);
     cursor: pointer;
-    padding: var(--space-sm);
-    border-radius: var(--radius-md);
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
-    background: var(--glass-bg);
-    border: 1px solid var(--glass-border);
+    background: transparent;
+    border: none;
 }
 
 .logo-wrapper:hover {
@@ -491,11 +494,10 @@ body {
 }
 
 .logo-icon {
-    width: 36px;
-    height: 36px;
-    background: url("https://pragmatismo.com.br/icons/general-bots.svg")
-        center/contain no-repeat;
-    border-radius: var(--radius-sm);
+    width: 32px;
+    height: 20px;
+    color: var(--text, var(--text-primary, #ffffff));
+    flex-shrink: 0;
 }
 
 .logo-text {
@@ -509,16 +511,16 @@ body {
 /* ICON BUTTONS (Apps, Theme, User)            */
 /* ============================================ */
 .icon-button {
-    width: 40px;
-    height: 40px;
+    width: 28px;
+    height: 28px;
     border-radius: var(--radius-full);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border: 1px solid var(--border-color);
-    background: var(--glass-bg);
-    color: var(--text-primary);
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
+    background: var(--surface, var(--glass-bg, rgba(255, 255, 255, 0.05)));
+    color: var(--text, var(--text-primary, #ffffff));
     transition: all var(--transition-fast);
     backdrop-filter: blur(10px);
 }
@@ -534,9 +536,15 @@ body {
     transform: translateY(0);
 }
 
+.icon-button.active {
+    background: var(--accent-dim, rgba(212, 245, 5, 0.15));
+    border-color: var(--accent, var(--accent-color, #d4f505));
+    color: var(--accent, var(--accent-color, #d4f505));
+}
+
 .icon-button svg {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
 }
 
 /* ============================================ */
@@ -579,12 +587,12 @@ body {
 .apps-dropdown {
     position: absolute;
     top: calc(100% + 8px);
-    right: 60px;
+    right: 0;
     width: 280px;
-    background: var(--glass-bg);
+    background: var(--surface, var(--bg, #0a0a0a));
     backdrop-filter: blur(20px) saturate(180%);
     -webkit-backdrop-filter: blur(20px) saturate(180%);
-    border: 1px solid var(--glass-border);
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-xl);
     padding: var(--space-md);
@@ -625,21 +633,21 @@ body {
     padding: var(--space-md);
     border-radius: var(--radius-lg);
     text-decoration: none;
-    color: var(--text-primary);
+    color: var(--text, var(--text-primary, #ffffff));
     transition: all var(--transition-fast);
     cursor: pointer;
     border: 1px solid transparent;
 }
 
 .app-item:hover {
-    background: var(--bg-hover);
-    border-color: var(--border-color);
+    background: var(--surface-hover, var(--bg-hover, rgba(255, 255, 255, 0.1)));
+    border-color: var(--border, var(--border-color, #2a2a2a));
     transform: translateY(-2px);
 }
 
 .app-item.active {
-    background: var(--accent-light);
-    border-color: var(--accent-color);
+    background: var(--primary-light, rgba(212, 245, 5, 0.15));
+    border-color: var(--primary, var(--accent-color, #d4f505));
 }
 
 .app-icon {
@@ -650,15 +658,53 @@ body {
 .app-item span {
     font-size: 13px;
     font-weight: 500;
-    color: var(--text-primary);
+    color: var(--text, var(--text-primary, #ffffff));
+}
+
+/* ============================================ */
+/* SETTINGS LINK                                */
+/* ============================================ */
+.settings-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: var(--space-md);
+    padding: var(--space-sm) var(--space-md);
+    border-top: 1px solid var(--border, var(--border-color, #2a2a2a));
+    color: var(--text, var(--text-primary, #ffffff));
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: var(--radius-md);
+    transition: background var(--transition-fast);
+}
+
+.settings-link:hover {
+    background: var(--surface-hover, var(--bg-hover, rgba(255, 255, 255, 0.1)));
+}
+
+.settings-link svg {
+    opacity: 0.7;
+}
+
+.settings-link:hover svg {
+    opacity: 1;
+}
+
+/* ============================================ */
+/* SETTINGS PANEL THEME FIX                     */
+/* ============================================ */
+.settings-panel {
+    background: var(--surface, var(--bg, #0a0a0a)) !important;
+    border-color: var(--border, var(--border-color, #2a2a2a)) !important;
 }
 
 /* ============================================ */
 /* USER AVATAR                                  */
 /* ============================================ */
 .user-avatar {
-    width: 40px;
-    height: 40px;
+    width: 28px;
+    height: 28px;
     border-radius: var(--radius-full);
     background: var(--accent-gradient);
     display: flex;
@@ -666,7 +712,7 @@ body {
     justify-content: center;
     color: white;
     font-weight: 700;
-    font-size: 16px;
+    font-size: 12px;
     cursor: pointer;
     transition: all var(--transition-fast);
     box-shadow: var(--shadow-sm);
@@ -1032,16 +1078,107 @@ body {
     border-bottom: 1px solid var(--border, #2a2a2a);
     cursor: pointer;
     transition: background 0.2s;
+    position: relative;
 }
 
 .notification-item:hover {
     background: var(--surface-hover, #1e1e1e);
 }
 
+.notification-item:last-child {
+    border-bottom: none;
+}
+
 .notification-item.unread {
     background: rgba(197, 248, 42, 0.05);
 }
 
+.notification-icon {
+    font-size: 20px;
+    flex-shrink: 0;
+    width: 24px;
+    text-align: center;
+}
+
+.notification-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.notification-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text, #fff);
+    margin-bottom: 2px;
+}
+
+.notification-message {
+    font-size: 12px;
+    color: var(--text-secondary, #888);
+    margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.notification-time {
+    font-size: 11px;
+    color: var(--text-muted, #666);
+}
+
+.notification-action {
+    background: var(--primary, #c5f82a);
+    color: #000;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 0.2s;
+}
+
+.notification-action:hover {
+    background: var(--primary-hover, #b5e520);
+}
+
+.notification-dismiss {
+    background: transparent;
+    border: none;
+    color: var(--text-muted, #666);
+    font-size: 16px;
+    cursor: pointer;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: color 0.2s;
+}
+
+.notification-dismiss:hover {
+    color: var(--text, #fff);
+}
+
+.notification-item.notification-success {
+    border-left: 3px solid var(--success, #22c55e);
+}
+
+.notification-item.notification-error {
+    border-left: 3px solid var(--error, #ef4444);
+}
+
+.notification-item.notification-warning {
+    border-left: 3px solid var(--warning, #f59e0b);
+}
+
+.notification-item.notification-info {
+    border-left: 3px solid var(--primary, #c5f82a);
+}
+
 .notification-item.success .notification-item-icon {
     color: var(--success, #22c55e);
 }
diff --git a/ui/suite/css/base.css b/ui/suite/css/base.css
index fabbd35..9a617fb 100644
--- a/ui/suite/css/base.css
+++ b/ui/suite/css/base.css
@@ -1093,6 +1093,33 @@ body {
     margin-bottom: 12px;
 }
 
+.settings-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+    padding: 12px;
+    border-top: 1px solid var(--border, #2a2a2a);
+    color: var(--text-primary, #ffffff);
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 8px;
+    transition: background 0.2s ease;
+}
+
+.settings-link:hover {
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+}
+
+.settings-link svg {
+    opacity: 0.7;
+}
+
+.settings-link:hover svg {
+    opacity: 1;
+}
+
 /* ============================================ */
 /* SETTINGS SHORTCUTS                           */
 /* ============================================ */
diff --git a/ui/suite/css/theme-sentient.css b/ui/suite/css/theme-sentient.css
index 970c656..0001183 100644
--- a/ui/suite/css/theme-sentient.css
+++ b/ui/suite/css/theme-sentient.css
@@ -154,6 +154,12 @@
     border-color: var(--border);
 }
 
+[data-theme="sentient"] .icon-button.active {
+    color: var(--accent);
+    background: var(--accent-dim);
+    border-color: var(--accent);
+}
+
 /* Notification Badge */
 [data-theme="sentient"] .notification-badge {
     background: var(--accent);
@@ -756,22 +762,48 @@
 }
 
 [data-theme="sentient"] .app-item {
-    color: var(--text-secondary);
+    color: var(--text);
     padding: 12px;
     border-radius: 8px;
     transition: all 0.2s ease;
 }
 
+[data-theme="sentient"] .app-item span {
+    color: var(--text);
+}
+
+[data-theme="sentient"] .app-item .app-icon {
+    color: var(--text);
+}
+
+[data-theme="sentient"] .app-item .app-icon svg {
+    stroke: var(--text);
+}
+
 [data-theme="sentient"] .app-item:hover {
     background: var(--surface-hover);
     color: var(--text);
 }
 
+[data-theme="sentient"] .app-item:hover span,
+[data-theme="sentient"] .app-item:hover .app-icon {
+    color: var(--text);
+}
+
 [data-theme="sentient"] .app-item.active {
     background: var(--accent-light);
     color: var(--accent);
 }
 
+[data-theme="sentient"] .app-item.active span,
+[data-theme="sentient"] .app-item.active .app-icon {
+    color: var(--accent);
+}
+
+[data-theme="sentient"] .app-item.active .app-icon svg {
+    stroke: var(--accent);
+}
+
 /* ============================================ */
 /* FORMS & INPUTS                              */
 /* ============================================ */
diff --git a/ui/suite/drive/drive.html b/ui/suite/drive/drive.html
index bf7dd4a..9c93538 100644
--- a/ui/suite/drive/drive.html
+++ b/ui/suite/drive/drive.html
@@ -171,26 +171,7 @@
                     </button>
                 </div>
             </div>
-            <div class="drive-toolbar-center">
-                <div class="search-box">
-                    <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <circle cx="11" cy="11" r="8"></circle>
-                        <path d="m21 21-4.3-4.3"></path>
-                    </svg>
-                    <input
-                        type="text"
-                        id="search-input"
-                        placeholder="Search in Drive"
-                    />
-                </div>
-            </div>
+            <div class="drive-toolbar-center"></div>
             <div class="drive-toolbar-right">
                 <button
                     class="btn-icon view-toggle"
diff --git a/ui/suite/index.html b/ui/suite/index.html
index b5a78a5..626bc92 100644
--- a/ui/suite/index.html
+++ b/ui/suite/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>General Bots</title>
+        <title>Chat - General Bots</title>
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta
             name="description"
@@ -60,11 +60,50 @@
                     title="General Bots"
                     aria-label="General Bots - Home"
                 >
-                    <div
+                    <svg
                         class="logo-icon"
-                        role="img"
-                        aria-label="General Bots logo"
-                    ></div>
+                        width="32"
+                        height="20"
+                        viewBox="0 0 140 80"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <!-- Left antenna -->
+                        <line x1="5" y1="40" x2="25" y2="40" />
+                        <line x1="25" y1="28" x2="25" y2="52" />
+                        <!-- Left gear (outer) -->
+                        <circle cx="50" cy="40" r="16" />
+                        <!-- Left gear (inner) -->
+                        <circle cx="50" cy="40" r="6" />
+                        <!-- Left gear teeth -->
+                        <line x1="50" y1="20" x2="50" y2="26" />
+                        <line x1="50" y1="54" x2="50" y2="60" />
+                        <line x1="30" y1="40" x2="36" y2="40" />
+                        <line x1="64" y1="40" x2="70" y2="40" />
+                        <line x1="38" y1="28" x2="42" y2="32" />
+                        <line x1="58" y1="48" x2="62" y2="52" />
+                        <line x1="38" y1="52" x2="42" y2="48" />
+                        <line x1="58" y1="32" x2="62" y2="28" />
+                        <!-- Right gear (outer) -->
+                        <circle cx="90" cy="40" r="16" />
+                        <!-- Right gear (inner) -->
+                        <circle cx="90" cy="40" r="6" />
+                        <!-- Right gear teeth -->
+                        <line x1="90" y1="20" x2="90" y2="26" />
+                        <line x1="90" y1="54" x2="90" y2="60" />
+                        <line x1="70" y1="40" x2="76" y2="40" />
+                        <line x1="104" y1="40" x2="110" y2="40" />
+                        <line x1="78" y1="28" x2="82" y2="32" />
+                        <line x1="98" y1="48" x2="102" y2="52" />
+                        <line x1="78" y1="52" x2="82" y2="48" />
+                        <line x1="98" y1="32" x2="102" y2="28" />
+                        <!-- Right antenna -->
+                        <line x1="115" y1="40" x2="135" y2="40" />
+                        <line x1="115" y1="28" x2="115" y2="52" />
+                    </svg>
                 </button>
 
                 <!-- Main App Tabs -->
@@ -72,6 +111,7 @@
                     <a
                         class="app-tab active"
                         href="#chat"
+                        data-section="chat"
                         hx-get="/suite/chat/chat.html"
                         hx-target="#main-content"
                         hx-push-url="/#chat"
@@ -90,9 +130,35 @@
                         </svg>
                         <span>Chat</span>
                     </a>
+                    <a
+                        class="app-tab"
+                        href="#paper"
+                        data-section="paper"
+                        hx-get="/suite/paper/paper.html"
+                        hx-target="#main-content"
+                        hx-push-url="/#paper"
+                    >
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <path
+                                d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                            />
+                            <polyline points="14 2 14 8 20 8" />
+                            <line x1="16" y1="13" x2="8" y2="13" />
+                            <line x1="16" y1="17" x2="8" y2="17" />
+                        </svg>
+                        <span>Paper</span>
+                    </a>
                     <a
                         class="app-tab"
                         href="#mail"
+                        data-section="mail"
                         hx-get="/suite/mail/mail.html"
                         hx-target="#main-content"
                         hx-push-url="/#mail"
@@ -110,11 +176,12 @@
                             />
                             <polyline points="22,6 12,13 2,6" />
                         </svg>
-                        <span>Email</span>
+                        <span>Mail</span>
                     </a>
                     <a
                         class="app-tab"
                         href="#calendar"
+                        data-section="calendar"
                         hx-get="/suite/calendar/calendar.html"
                         hx-target="#main-content"
                         hx-push-url="/#calendar"
@@ -141,9 +208,32 @@
                         </svg>
                         <span>Calendar</span>
                     </a>
+                    <a
+                        class="app-tab"
+                        href="#drive"
+                        data-section="drive"
+                        hx-get="/suite/drive/drive.html"
+                        hx-target="#main-content"
+                        hx-push-url="/#drive"
+                    >
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <path
+                                d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+                            />
+                        </svg>
+                        <span>Drive</span>
+                    </a>
                     <a
                         class="app-tab"
                         href="#tasks"
+                        data-section="tasks"
                         hx-get="/suite/tasks/tasks.html"
                         hx-target="#main-content"
                         hx-push-url="/#tasks"
@@ -165,33 +255,347 @@
                     </a>
                 </nav>
 
-                <!-- Apps menu button (launcher for all apps) -->
-                <button
-                    class="icon-button apps-button"
-                    id="appsButton"
-                    title="All Applications"
-                    aria-label="Open applications menu"
-                    aria-expanded="false"
-                    aria-haspopup="true"
-                >
-                    <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                        aria-hidden="true"
+                <!-- Apps menu container (button + dropdown) -->
+                <div class="apps-menu-container" style="position: relative">
+                    <button
+                        class="icon-button apps-button"
+                        id="appsButton"
+                        title="All Applications"
+                        aria-label="Open applications menu"
+                        aria-expanded="false"
+                        aria-haspopup="true"
                     >
-                        <circle cx="5" cy="5" r="2"></circle>
-                        <circle cx="12" cy="5" r="2"></circle>
-                        <circle cx="19" cy="5" r="2"></circle>
-                        <circle cx="5" cy="12" r="2"></circle>
-                        <circle cx="12" cy="12" r="2"></circle>
-                        <circle cx="19" cy="12" r="2"></circle>
-                        <circle cx="5" cy="19" r="2"></circle>
-                        <circle cx="12" cy="19" r="2"></circle>
-                        <circle cx="19" cy="19" r="2"></circle>
-                    </svg>
-                </button>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                            aria-hidden="true"
+                        >
+                            <circle cx="5" cy="5" r="2"></circle>
+                            <circle cx="12" cy="5" r="2"></circle>
+                            <circle cx="19" cy="5" r="2"></circle>
+                            <circle cx="5" cy="12" r="2"></circle>
+                            <circle cx="12" cy="12" r="2"></circle>
+                            <circle cx="19" cy="12" r="2"></circle>
+                            <circle cx="5" cy="19" r="2"></circle>
+                            <circle cx="12" cy="19" r="2"></circle>
+                            <circle cx="19" cy="19" r="2"></circle>
+                        </svg>
+                    </button>
+
+                    <!-- Apps dropdown menu -->
+                    <nav
+                        class="apps-dropdown"
+                        id="appsDropdown"
+                        role="menu"
+                        aria-label="Applications"
+                    >
+                        <div class="apps-dropdown-title">All Applications</div>
+                        <div class="app-grid" role="group">
+                            <!-- Chat -->
+                            <a
+                                class="app-item active"
+                                href="#chat"
+                                data-section="chat"
+                                role="menuitem"
+                                aria-label="Chat application"
+                                hx-get="/suite/chat/chat.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#chat"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+                                        />
+                                    </svg>
+                                </div>
+                                <span>Chat</span>
+                            </a>
+
+                            <!-- Research -->
+                            <a
+                                class="app-item"
+                                href="#research"
+                                data-section="research"
+                                role="menuitem"
+                                aria-label="Research application"
+                                hx-get="/suite/research/research.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#research"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="11" cy="11" r="8" />
+                                        <path d="m21 21-4.35-4.35" />
+                                        <path d="M11 8v6M8 11h6" />
+                                    </svg>
+                                </div>
+                                <span>Research</span>
+                            </a>
+
+                            <!-- Paper -->
+                            <a
+                                class="app-item"
+                                href="#paper"
+                                data-section="paper"
+                                role="menuitem"
+                                aria-label="Paper - Notes & Writing"
+                                hx-get="/suite/paper/paper.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#paper"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                                        />
+                                        <polyline points="14 2 14 8 20 8" />
+                                        <line x1="16" y1="13" x2="8" y2="13" />
+                                        <line x1="16" y1="17" x2="8" y2="17" />
+                                    </svg>
+                                </div>
+                                <span>Paper</span>
+                            </a>
+
+                            <!-- Drive -->
+                            <a
+                                class="app-item"
+                                href="#drive"
+                                data-section="drive"
+                                role="menuitem"
+                                aria-label="Drive application"
+                                hx-get="/suite/drive/drive.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#drive"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+                                        />
+                                    </svg>
+                                </div>
+                                <span>Drive</span>
+                            </a>
+
+                            <!-- Calendar -->
+                            <a
+                                class="app-item"
+                                href="#calendar"
+                                data-section="calendar"
+                                role="menuitem"
+                                aria-label="Calendar application"
+                                hx-get="/suite/calendar/calendar.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#calendar"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <rect
+                                            x="3"
+                                            y="4"
+                                            width="18"
+                                            height="18"
+                                            rx="2"
+                                            ry="2"
+                                        />
+                                        <line x1="16" y1="2" x2="16" y2="6" />
+                                        <line x1="8" y1="2" x2="8" y2="6" />
+                                        <line x1="3" y1="10" x2="21" y2="10" />
+                                    </svg>
+                                </div>
+                                <span>Calendar</span>
+                            </a>
+
+                            <!-- Tasks -->
+                            <a
+                                class="app-item"
+                                href="#tasks"
+                                data-section="tasks"
+                                role="menuitem"
+                                aria-label="Tasks application"
+                                hx-get="/suite/tasks/tasks.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#tasks"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path d="M9 11l3 3L22 4" />
+                                        <path
+                                            d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
+                                        />
+                                    </svg>
+                                </div>
+                                <span>Tasks</span>
+                            </a>
+
+                            <!-- Mail -->
+                            <a
+                                class="app-item"
+                                href="#mail"
+                                data-section="mail"
+                                role="menuitem"
+                                aria-label="Mail application"
+                                hx-get="/suite/mail/mail.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#mail"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+                                        />
+                                        <polyline points="22,6 12,13 2,6" />
+                                    </svg>
+                                </div>
+                                <span>Mail</span>
+                            </a>
+
+                            <!-- Meet -->
+                            <a
+                                class="app-item"
+                                href="#meet"
+                                data-section="meet"
+                                role="menuitem"
+                                aria-label="Meet application"
+                                hx-get="/suite/meet/meet.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#meet"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <polygon
+                                            points="23 7 16 12 23 17 23 7"
+                                        />
+                                        <rect
+                                            x="1"
+                                            y="5"
+                                            width="15"
+                                            height="14"
+                                            rx="2"
+                                            ry="2"
+                                        />
+                                    </svg>
+                                </div>
+                                <span>Meet</span>
+                            </a>
+
+                            <!-- Analytics -->
+                            <a
+                                class="app-item"
+                                href="#analytics"
+                                data-section="analytics"
+                                role="menuitem"
+                                aria-label="Analytics Dashboard"
+                                hx-get="/suite/analytics/analytics.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#analytics"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <line x1="18" y1="20" x2="18" y2="10" />
+                                        <line x1="12" y1="20" x2="12" y2="4" />
+                                        <line x1="6" y1="20" x2="6" y2="14" />
+                                    </svg>
+                                </div>
+                                <span>Analytics</span>
+                            </a>
+
+                            <!-- Monitoring -->
+                            <a
+                                class="app-item"
+                                href="#monitoring"
+                                data-section="monitoring"
+                                role="menuitem"
+                                aria-label="System Monitoring"
+                                hx-get="/suite/monitoring/monitoring.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#monitoring"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10" />
+                                        <circle cx="12" cy="12" r="6" />
+                                        <circle cx="12" cy="12" r="2" />
+                                    </svg>
+                                </div>
+                                <span>Monitoring</span>
+                            </a>
+                        </div>
+                    </nav>
+                </div>
             </div>
 
             <!-- Center: Search -->
@@ -220,20 +624,54 @@
 
             <!-- Right: Notifications + User -->
             <div class="header-right">
-                <button class="icon-button" title="Notifications">
-                    <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
+                <!-- Notifications Bell -->
+                <div class="notifications-menu">
+                    <button
+                        class="icon-button"
+                        id="notificationsBtn"
+                        title="Notifications"
+                        aria-expanded="false"
                     >
-                        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
-                        <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-                    </svg>
-                    <span class="notification-badge">3</span>
-                </button>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <path
+                                d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"
+                            />
+                            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+                        </svg>
+                        <span
+                            class="notifications-badge"
+                            id="notificationsBadge"
+                            style="display: none"
+                            >0</span
+                        >
+                    </button>
+                    <div class="notifications-panel" id="notificationsPanel">
+                        <div class="notifications-panel-header">
+                            <span class="notifications-panel-title"
+                                >Notifications</span
+                            >
+                            <button
+                                class="notifications-clear-btn"
+                                id="clearNotificationsBtn"
+                            >
+                                Clear all
+                            </button>
+                        </div>
+                        <div class="notifications-list" id="notificationsList">
+                            <div class="notifications-empty">
+                                <span>🔔</span>
+                                <p>No notifications</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <button
                     class="icon-button"
                     id="settingsBtn"
@@ -636,318 +1074,30 @@
                             <span class="theme-option-name">📁 XTree Gold</span>
                         </button>
                     </div>
+                    <a
+                        class="settings-link"
+                        href="#settings"
+                        hx-get="/suite/settings/index.html"
+                        hx-target="#main-content"
+                        hx-push-url="/#settings"
+                    >
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <circle cx="12" cy="12" r="3" />
+                            <path
+                                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+                            />
+                        </svg>
+                        <span>Settings</span>
+                    </a>
                 </div>
 
-                <!-- Apps dropdown menu -->
-                <nav
-                    class="apps-dropdown"
-                    id="appsDropdown"
-                    role="menu"
-                    aria-label="Applications"
-                >
-                    <div class="apps-dropdown-title">All Applications</div>
-                    <div class="app-grid" role="group">
-                        <!-- Chat -->
-                        <a
-                            class="app-item active"
-                            href="#chat"
-                            data-section="chat"
-                            role="menuitem"
-                            aria-label="Chat application"
-                            hx-get="/suite/chat/chat.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#chat"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <path
-                                        d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
-                                    />
-                                </svg>
-                            </div>
-                            <span>Chat</span>
-                        </a>
-
-                        <!-- Research</span> -->
-                        <a
-                            class="app-item"
-                            href="#research"
-                            data-section="research"
-                            role="menuitem"
-                            aria-label="Research application"
-                            hx-get="/suite/research/research.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#research"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <circle cx="11" cy="11" r="8" />
-                                    <path d="m21 21-4.35-4.35" />
-                                    <path d="M11 8v6M8 11h6" />
-                                </svg>
-                            </div>
-                            <span>Research</span>
-                        </a>
-
-                        <!-- Paper -->
-                        <a
-                            class="app-item"
-                            href="#paper"
-                            data-section="paper"
-                            role="menuitem"
-                            aria-label="Paper - Notes & Writing"
-                            hx-get="/suite/paper/paper.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#paper"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <path
-                                        d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
-                                    />
-                                    <polyline points="14 2 14 8 20 8" />
-                                    <line x1="16" y1="13" x2="8" y2="13" />
-                                    <line x1="16" y1="17" x2="8" y2="17" />
-                                </svg>
-                            </div>
-                            <span>Paper</span>
-                        </a>
-
-                        <!-- Drive -->
-                        <a
-                            class="app-item"
-                            href="#drive"
-                            data-section="drive"
-                            role="menuitem"
-                            aria-label="Drive application"
-                            hx-get="/suite/drive/drive.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#drive"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <path
-                                        d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
-                                    />
-                                </svg>
-                            </div>
-                            <span>Drive</span>
-                        </a>
-
-                        <!-- Calendar -->
-                        <a
-                            class="app-item"
-                            href="#calendar"
-                            data-section="calendar"
-                            role="menuitem"
-                            aria-label="Calendar application"
-                            hx-get="/suite/calendar/calendar.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#calendar"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <rect
-                                        x="3"
-                                        y="4"
-                                        width="18"
-                                        height="18"
-                                        rx="2"
-                                        ry="2"
-                                    />
-                                    <line x1="16" y1="2" x2="16" y2="6" />
-                                    <line x1="8" y1="2" x2="8" y2="6" />
-                                    <line x1="3" y1="10" x2="21" y2="10" />
-                                </svg>
-                            </div>
-                            <span>Calendar</span>
-                        </a>
-
-                        <!-- Tasks -->
-                        <a
-                            class="app-item"
-                            href="#tasks"
-                            data-section="tasks"
-                            role="menuitem"
-                            aria-label="Tasks application"
-                            hx-get="/suite/tasks/tasks.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#tasks"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <path d="M9 11l3 3L22 4" />
-                                    <path
-                                        d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
-                                    />
-                                </svg>
-                            </div>
-                            <span>Tasks</span>
-                        </a>
-
-                        <!-- Mail -->
-                        <a
-                            class="app-item"
-                            href="#mail"
-                            data-section="mail"
-                            role="menuitem"
-                            aria-label="Mail application"
-                            hx-get="/suite/mail/mail.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#mail"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <path
-                                        d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
-                                    />
-                                    <polyline points="22,6 12,13 2,6" />
-                                </svg>
-                            </div>
-                            <span>Mail</span>
-                        </a>
-
-                        <!-- Meet -->
-                        <a
-                            class="app-item"
-                            href="#meet"
-                            data-section="meet"
-                            role="menuitem"
-                            aria-label="Meet application"
-                            hx-get="/suite/meet/meet.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#meet"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <polygon points="23 7 16 12 23 17 23 7" />
-                                    <rect
-                                        x="1"
-                                        y="5"
-                                        width="15"
-                                        height="14"
-                                        rx="2"
-                                        ry="2"
-                                    />
-                                </svg>
-                            </div>
-                            <span>Meet</span>
-                        </a>
-
-                        <!-- Analytics -->
-                        <a
-                            class="app-item"
-                            href="#analytics"
-                            data-section="analytics"
-                            role="menuitem"
-                            aria-label="Analytics Dashboard"
-                            hx-get="/suite/analytics/analytics.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#analytics"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <line x1="18" y1="20" x2="18" y2="10" />
-                                    <line x1="12" y1="20" x2="12" y2="4" />
-                                    <line x1="6" y1="20" x2="6" y2="14" />
-                                </svg>
-                            </div>
-                            <span>Analytics</span>
-                        </a>
-
-                        <!-- Monitoring -->
-                        <a
-                            class="app-item"
-                            href="#monitoring"
-                            data-section="monitoring"
-                            role="menuitem"
-                            aria-label="System Monitoring"
-                            hx-get="/suite/monitoring/monitoring.html"
-                            hx-target="#main-content"
-                            hx-push-url="/#monitoring"
-                        >
-                            <div class="app-icon" aria-hidden="true">
-                                <svg
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                >
-                                    <circle cx="12" cy="12" r="10" />
-                                    <circle cx="12" cy="12" r="6" />
-                                    <circle cx="12" cy="12" r="2" />
-                                </svg>
-                            </div>
-                            <span>Monitoring</span>
-                        </a>
-                    </div>
-                </nav>
-
                 <!-- User avatar -->
                 <button
                     class="user-avatar"
@@ -972,215 +1122,8 @@
 
         <!-- Application initialization -->
         <script>
-            // Chat initialization function (called after HTMX loads chat content)
-            function initChatModule() {
-                if (window.chatModuleInitialized) return;
-                const messageInput = document.getElementById("messageInput");
-                const sendBtn = document.getElementById("sendBtn");
-                if (!messageInput || !sendBtn) return;
-
-                window.chatModuleInitialized = true;
-                console.log("Initializing chat module...");
-
-                // WebSocket URL
-                const WS_BASE_URL =
-                    window.location.protocol === "https:" ? "wss://" : "ws://";
-                const WS_URL = `${WS_BASE_URL}${window.location.host}`;
-
-                // Message Type Constants
-                const MessageType = {
-                    EXTERNAL: 0,
-                    USER: 1,
-                    BOT_RESPONSE: 2,
-                    CONTINUE: 3,
-                    SUGGESTION: 4,
-                    CONTEXT_CHANGE: 5,
-                };
-
-                // State
-                let ws = null,
-                    currentSessionId = null,
-                    currentUserId = null,
-                    currentBotId = "default";
-                let isStreaming = false,
-                    streamingMessageId = null,
-                    currentStreamingContent = "";
-                let reconnectAttempts = 0;
-                const maxReconnectAttempts = 5;
-
-                // Initialize auth and WebSocket
-                async function initChat() {
-                    try {
-                        updateConnectionStatus("connecting");
-                        const response = await fetch(
-                            `/api/auth?bot_name=default`,
-                        );
-                        const auth = await response.json();
-                        currentUserId = auth.user_id;
-                        currentSessionId = auth.session_id;
-                        currentBotId = auth.bot_id || "default";
-                        console.log("Auth:", {
-                            currentUserId,
-                            currentSessionId,
-                            currentBotId,
-                        });
-                        connectWebSocket();
-                    } catch (e) {
-                        console.error("Auth failed:", e);
-                        updateConnectionStatus("disconnected");
-                        setTimeout(initChat, 3000);
-                    }
-                }
-
-                function connectWebSocket() {
-                    if (ws) ws.close();
-                    const url = `${WS_URL}/ws?session_id=${currentSessionId}&user_id=${currentUserId}`;
-                    ws = new WebSocket(url);
-
-                    ws.onopen = () => {
-                        console.log("WebSocket connected");
-                        updateConnectionStatus("connected");
-                        reconnectAttempts = 0;
-                    };
-
-                    ws.onmessage = (event) => {
-                        try {
-                            const data = JSON.parse(event.data);
-                            if (data.type === "connected") return;
-                            if (
-                                data.message_type === MessageType.BOT_RESPONSE
-                            ) {
-                                processMessage(data);
-                            }
-                        } catch (e) {
-                            console.error("WS message error:", e);
-                        }
-                    };
-
-                    ws.onclose = () => {
-                        updateConnectionStatus("disconnected");
-                        if (reconnectAttempts < maxReconnectAttempts) {
-                            reconnectAttempts++;
-                            setTimeout(
-                                connectWebSocket,
-                                1000 * reconnectAttempts,
-                            );
-                        }
-                    };
-
-                    ws.onerror = (e) => console.error("WebSocket error:", e);
-                }
-
-                function processMessage(data) {
-                    if (data.is_complete) {
-                        if (isStreaming) finalizeStreaming();
-                        else addMessage("bot", data.content);
-                        isStreaming = false;
-                    } else {
-                        if (!isStreaming) {
-                            isStreaming = true;
-                            streamingMessageId = "streaming-" + Date.now();
-                            currentStreamingContent = data.content || "";
-                            addMessage(
-                                "bot",
-                                currentStreamingContent,
-                                streamingMessageId,
-                            );
-                        } else {
-                            currentStreamingContent += data.content || "";
-                            updateStreaming(currentStreamingContent);
-                        }
-                    }
-                }
-
-                function addMessage(sender, content, msgId = null) {
-                    const messages = document.getElementById("messages");
-                    if (!messages) return;
-                    const div = document.createElement("div");
-                    div.className = `message ${sender}`;
-                    if (msgId) div.id = msgId;
-
-                    if (sender === "user") {
-                        div.innerHTML = `<div class="message-content user-message">${escapeHtml(content)}</div>`;
-                    } else {
-                        div.innerHTML = `<div class="message-content bot-message">${marked.parse(content)}</div>`;
-                    }
-                    messages.appendChild(div);
-                    messages.scrollTop = messages.scrollHeight;
-                }
-
-                function updateStreaming(content) {
-                    const el = document.getElementById(streamingMessageId);
-                    if (el)
-                        el.querySelector(".message-content").innerHTML =
-                            marked.parse(content);
-                }
-
-                function finalizeStreaming() {
-                    const el = document.getElementById(streamingMessageId);
-                    if (el) {
-                        el.querySelector(".message-content").innerHTML =
-                            marked.parse(currentStreamingContent);
-                        el.removeAttribute("id");
-                    }
-                    streamingMessageId = null;
-                    currentStreamingContent = "";
-                }
-
-                function sendMessage() {
-                    const input = document.getElementById("messageInput");
-                    const content = input.value.trim();
-                    if (!content || !ws || ws.readyState !== WebSocket.OPEN)
-                        return;
-
-                    addMessage("user", content);
-
-                    ws.send(
-                        JSON.stringify({
-                            bot_id: currentBotId,
-                            user_id: currentUserId,
-                            session_id: currentSessionId,
-                            channel: "web",
-                            content: content,
-                            message_type: MessageType.USER,
-                            timestamp: new Date().toISOString(),
-                        }),
-                    );
-
-                    input.value = "";
-                    input.focus();
-                }
-
-                function updateConnectionStatus(status) {
-                    const el = document.getElementById("connectionStatus");
-                    if (el) el.className = `connection-status ${status}`;
-                }
-
-                function escapeHtml(text) {
-                    const div = document.createElement("div");
-                    div.textContent = text;
-                    return div.innerHTML;
-                }
-
-                // Setup event handlers
-                sendBtn.onclick = sendMessage;
-                messageInput.addEventListener("keypress", (e) => {
-                    if (e.key === "Enter") sendMessage();
-                });
-
-                // Start chat
-                initChat();
-            }
-
-            // Listen for HTMX content swaps to initialize chat
-            document.addEventListener("htmx:afterSettle", (e) => {
-                if (document.getElementById("messageInput")) {
-                    window.chatModuleInitialized = false; // Reset flag for reinitialization
-                    initChatModule();
-                }
-            });
-
             // Simple initialization for HTMX app
+            // Note: Chat module is self-contained in chat.html
             document.addEventListener("DOMContentLoaded", () => {
                 console.log("🚀 Initializing General Bots with HTMX...");
 
@@ -1283,31 +1226,80 @@
                     });
                 });
 
+                // List of sections that appear in header tabs
+                const headerTabSections = [
+                    "chat",
+                    "paper",
+                    "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 () {
-                        document
-                            .querySelectorAll(".app-item")
-                            .forEach((i) => i.classList.remove("active"));
-                        this.classList.add("active");
+                        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);
+                    });
+                });
+
                 // Handle hash navigation
                 function handleHashChange() {
                     const hash = window.location.hash.slice(1) || "chat";
+                    updateNavigationActive(hash);
+
+                    // Trigger HTMX load if not already loaded
                     const appItem = document.querySelector(
-                        `[data-section="${hash}"]`,
+                        `.app-item[data-section="${hash}"]`,
                     );
                     if (appItem) {
-                        document
-                            .querySelectorAll(".app-item")
-                            .forEach((i) => i.classList.remove("active"));
-                        appItem.classList.add("active");
-
-                        // Trigger HTMX load if not already loaded
                         const hxGet = appItem.getAttribute("hx-get");
                         if (hxGet) {
                             htmx.ajax("GET", hxGet, {
@@ -1325,6 +1317,183 @@
                     handleHashChange();
                 }, 100);
 
+                // ==========================================================================
+                // 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">
+                                        <div class="notification-title">${n.title}</div>
+                                        <div class="notification-message">${n.message || ""}</div>
+                                        <div class="notification-time">${n.time}</div>
+                                    </div>
+                                    ${n.action ? `<button class="notification-action" onclick="GBAlerts.handleAction(${i})">${n.actionText || "Open"}</button>` : ""}
+                                    <button class="notification-dismiss" onclick="GBAlerts.dismiss(${i})">×</button>
+                                </div>
+                            `,
+                                )
+                                .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);
+                    }
+
+                    // 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
diff --git a/ui/suite/js/base.js b/ui/suite/js/base.js
index 2315de7..f7324c9 100644
--- a/ui/suite/js/base.js
+++ b/ui/suite/js/base.js
@@ -85,11 +85,9 @@ document.addEventListener("keydown", (e) => {
 
 document.body.addEventListener("htmx:afterSwap", (e) => {
   if (e.detail.target.id === "main-content") {
-    const hash = window.location.hash || "#chat";
-    document.querySelectorAll(".app-item").forEach((item) => {
-      item.classList.toggle("active", item.getAttribute("href") === hash);
-    });
+    // Close settings panel on navigation
     if (settingsPanel) settingsPanel.classList.remove("show");
+    // Note: Active class handling is done in htmx-app.js updateActiveNav()
   }
 });
 
diff --git a/ui/suite/js/htmx-app.js b/ui/suite/js/htmx-app.js
index 4a095d1..1a3942e 100644
--- a/ui/suite/js/htmx-app.js
+++ b/ui/suite/js/htmx-app.js
@@ -214,22 +214,112 @@
       updateActiveNav(path);
     });
 
+    // Also listen for htmx:afterSwap to catch all navigation
+    document.addEventListener("htmx:afterSwap", (event) => {
+      setTimeout(() => {
+        const path = window.location.hash || window.location.pathname;
+        updateActiveNav(path);
+      }, 10);
+    });
+
+    // Handle hash change
+    window.addEventListener("hashchange", (event) => {
+      updateActiveNav(window.location.hash);
+    });
+
     // Handle browser back/forward
     window.addEventListener("popstate", (event) => {
-      updateActiveNav(window.location.pathname);
+      updateActiveNav(window.location.hash || window.location.pathname);
+    });
+
+    // Handle direct clicks on app tabs and app items
+    document.addEventListener("click", (event) => {
+      const appTab = event.target.closest(".app-tab");
+      const appItem = event.target.closest(".app-item");
+
+      if (appTab || appItem) {
+        const element = appTab || appItem;
+        const href = element.getAttribute("href");
+        if (href) {
+          // Immediately update active state on click
+          updateActiveNav(href);
+        }
+      }
     });
   }
 
-  // Update active navigation item
+  // Get current section from URL
+  function getCurrentSection() {
+    const hash = window.location.hash;
+    if (hash && hash.length > 1) {
+      // Handle both #section and /#section formats
+      return hash.replace(/^#\/?/, "").split("/")[0].split("?")[0];
+    }
+    return "chat";
+  }
+
+  // Update active navigation item and page title
   function updateActiveNav(path) {
-    document.querySelectorAll(".nav-item, .app-item").forEach((item) => {
+    // Extract section name from path
+    // Handles: "/#chat", "#chat", "/chat", "chat", "/#paper", "#paper"
+    let section;
+    if (path && path.length > 0) {
+      // Remove leading /, #, or /# combinations
+      section = path
+        .replace(/^[/#]+/, "")
+        .split("/")[0]
+        .split("?")[0];
+    }
+
+    // Fallback to current URL hash if section is empty
+    if (!section) {
+      section = getCurrentSection();
+    }
+
+    // First, remove ALL active classes from all tabs, items, and apps button
+    document.querySelectorAll(".app-tab.active").forEach((item) => {
+      item.classList.remove("active");
+    });
+    document.querySelectorAll(".app-item.active").forEach((item) => {
+      item.classList.remove("active");
+    });
+
+    // Remove active from apps button
+    const appsButton = document.getElementById("appsButton");
+    if (appsButton) {
+      appsButton.classList.remove("active");
+    }
+
+    // Check if section exists in the main header tabs
+    let foundInHeaderTabs = false;
+    document.querySelectorAll(".app-tab").forEach((item) => {
+      const dataSection = item.getAttribute("data-section");
       const href = item.getAttribute("href");
-      if (href === path || (path === "/" && href === "/chat")) {
+      const itemSection = dataSection || (href ? href.replace(/^#/, "") : "");
+      if (itemSection === section) {
         item.classList.add("active");
-      } else {
-        item.classList.remove("active");
+        foundInHeaderTabs = true;
       }
     });
+
+    // Update app items in launcher dropdown (always mark the current section)
+    document.querySelectorAll(".app-item").forEach((item) => {
+      const href = item.getAttribute("href");
+      const dataSection = item.getAttribute("data-section");
+      const itemSection = dataSection || (href ? href.replace(/^#/, "") : "");
+      if (itemSection === section) {
+        item.classList.add("active");
+      }
+    });
+
+    // If section is NOT in header tabs, select the apps button instead
+    if (!foundInHeaderTabs && appsButton) {
+      appsButton.classList.add("active");
+    }
+
+    // Update page title
+    const sectionName = section.charAt(0).toUpperCase() + section.slice(1);
+    document.title = sectionName + " - General Bots";
   }
 
   // Initialize keyboard shortcuts
@@ -314,8 +404,8 @@
     // Initialize theme
     initTheme();
 
-    // Set initial active nav
-    updateActiveNav(window.location.pathname);
+    // Set initial active nav based on hash or default to chat
+    updateActiveNav(window.location.hash || "#chat");
 
     console.log("HTMX application initialized");
   }
diff --git a/ui/suite/mail/mail.html b/ui/suite/mail/mail.html
index 70d5f0c..4006e9c 100644
--- a/ui/suite/mail/mail.html
+++ b/ui/suite/mail/mail.html
@@ -12,7 +12,7 @@
 
         <!-- Folder List -->
         <div class="folders-section">
-            <div class="nav-item active" data-folder="inbox" hx-get="/ui/email/list?folder=inbox" hx-target="#mail-list" hx-swap="innerHTML">
+            <div class="nav-item active" data-folder="inbox" hx-get="/api/ui/email/list?folder=inbox" hx-target="#mail-list" hx-swap="innerHTML">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
                     <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
@@ -20,20 +20,20 @@
                 <span>Inbox</span>
                 <span class="folder-badge unread" id="inbox-count">0</span>
             </div>
-            <div class="nav-item" data-folder="starred" hx-get="/ui/email/list?folder=starred" hx-target="#mail-list" hx-swap="innerHTML">
+            <div class="nav-item" data-folder="starred" hx-get="/api/ui/email/list?folder=starred" hx-target="#mail-list" hx-swap="innerHTML">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                 </svg>
                 <span>Starred</span>
             </div>
-            <div class="nav-item" data-folder="sent" hx-get="/ui/email/list?folder=sent" hx-target="#mail-list" hx-swap="innerHTML">
+            <div class="nav-item" data-folder="sent" hx-get="/api/ui/email/list?folder=sent" hx-target="#mail-list" hx-swap="innerHTML">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <line x1="22" y1="2" x2="11" y2="13"/>
                     <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                 </svg>
                 <span>Sent</span>
             </div>
-            <div class="nav-item" data-folder="scheduled" hx-get="/ui/email/list?folder=scheduled" hx-target="#mail-list" hx-swap="innerHTML">
+            <div class="nav-item" data-folder="scheduled" hx-get="/api/ui/email/list?folder=scheduled" hx-target="#mail-list" hx-swap="innerHTML">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <circle cx="12" cy="12" r="10"/>
                     <polyline points="12 6 12 12 16 14"/>
@@ -41,7 +41,7 @@
                 <span>Scheduled</span>
                 <span class="folder-badge" id="scheduled-count">0</span>
             </div>
-            <div class="nav-item" data-folder="drafts" hx-get="/ui/email/list?folder=drafts" hx-target="#mail-list" hx-swap="innerHTML">
+            <div class="nav-item" data-folder="drafts" hx-get="/api/ui/email/list?folder=drafts" hx-target="#mail-list" hx-swap="innerHTML">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                     <polyline points="14 2 14 8 20 8"/>
@@ -58,7 +58,7 @@
                 </svg>
                 <span>Tracking</span>
             </div>
-            <div class="nav-item" data-folder="spam" hx-get="/ui/email/list?folder=spam" hx-target="#mail-list" hx-swap="innerHTML">
+            <div class="nav-item" data-folder="spam" hx-get="/api/ui/email/list?folder=spam" hx-target="#mail-list" hx-swap="innerHTML">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                     <line x1="12" y1="9" x2="12" y2="13"/>
@@ -66,7 +66,7 @@
                 </svg>
                 <span>Spam</span>
             </div>
-            <div class="nav-item" data-folder="trash" hx-get="/ui/email/list?folder=trash" hx-target="#mail-list" hx-swap="innerHTML">
+            <div class="nav-item" data-folder="trash" hx-get="/api/ui/email/list?folder=trash" hx-target="#mail-list" hx-swap="innerHTML">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <polyline points="3 6 5 6 21 6"/>
                     <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
@@ -87,7 +87,7 @@
                 </button>
             </div>
             <div id="accounts-list"
-                 hx-get="/ui/email/accounts"
+                 hx-get="/api/ui/email/accounts"
                  hx-trigger="load"
                  hx-swap="innerHTML">
                 <!-- Accounts loaded here -->
@@ -105,7 +105,7 @@
                     </svg>
                 </button>
             </div>
-            <div id="labels-list" hx-get="/ui/email/labels" hx-trigger="load" hx-swap="innerHTML">
+            <div id="labels-list" hx-get="/api/ui/email/labels" hx-trigger="load" hx-swap="innerHTML">
                 <div class="label-item" style="--label-color: #ef4444;">
                     <span class="label-dot"></span>
                     <span>Important</span>
@@ -169,7 +169,7 @@
                         <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                     </svg>
                     <input type="text" placeholder="Search emails..." id="email-search"
-                           hx-get="/ui/email/search" hx-trigger="keyup changed delay:300ms"
+                           hx-get="/api/ui/email/search" hx-trigger="keyup changed delay:300ms"
                            hx-target="#mail-list" hx-include="this" name="q"/>
                 </div>
                 <button class="icon-btn" onclick="refreshMailList()" title="Refresh">
@@ -212,7 +212,7 @@
             </button>
         </div>
 
-        <div id="mail-list" hx-get="/ui/email/list?folder=inbox" hx-trigger="load" hx-swap="innerHTML">
+        <div id="mail-list" hx-get="/api/ui/email/list?folder=inbox" hx-trigger="load" hx-swap="innerHTML">
             <div class="loading-state">
                 <div class="spinner"></div>
                 <p>Loading emails...</p>
@@ -421,7 +421,7 @@
                 </svg>
             </button>
         </div>
-        <div class="templates-list" id="templates-list" hx-get="/ui/email/templates" hx-trigger="load" hx-swap="innerHTML">
+        <div class="templates-list" id="templates-list" hx-get="/api/ui/email/templates" hx-trigger="load" hx-swap="innerHTML">
             <div class="loading-state"><div class="spinner"></div></div>
         </div>
         <div class="modal-footer">
@@ -443,7 +443,7 @@
                 </svg>
             </button>
         </div>
-        <div class="signatures-list" id="signatures-list" hx-get="/ui/email/signatures" hx-trigger="load" hx-swap="innerHTML">
+        <div class="signatures-list" id="signatures-list" hx-get="/api/ui/email/signatures" hx-trigger="load" hx-swap="innerHTML">
             <div class="loading-state"><div class="spinner"></div></div>
         </div>
         <div class="modal-footer">
@@ -465,7 +465,7 @@
                 </svg>
             </button>
         </div>
-        <div class="rules-list" id="rules-list" hx-get="/ui/email/rules" hx-trigger="load" hx-swap="innerHTML">
+        <div class="rules-list" id="rules-list" hx-get="/api/ui/email/rules" hx-trigger="load" hx-swap="innerHTML">
             <div class="loading-state"><div class="spinner"></div></div>
         </div>
         <div class="modal-footer">
@@ -487,7 +487,7 @@
                 </svg>
             </button>
         </div>
-        <form id="autoresponder-form" hx-post="/ui/email/auto-responder" hx-swap="none">
+        <form id="autoresponder-form" hx-post="/api/ui/email/auto-responder" hx-swap="none">
             <div class="form-group">
                 <label class="toggle-label">
                     <input type="checkbox" name="enabled" id="autoresponder-enabled"/>
diff --git a/ui/suite/monitoring/alerts.html b/ui/suite/monitoring/alerts.html
index 85fd21b..9acd259 100644
--- a/ui/suite/monitoring/alerts.html
+++ b/ui/suite/monitoring/alerts.html
@@ -12,7 +12,7 @@
                 Alert Configuration
             </h2>
             <span class="alert-summary"
-                  hx-get="/api/monitoring/alerts/summary"
+                  hx-get="/api/ui/monitoring/alerts/summary"
                   hx-trigger="load, every 30s"
                   hx-swap="innerHTML">
                 <span class="summary-item critical">0 Critical</span>
@@ -95,7 +95,7 @@
         </div>
 
         <div class="alerts-list" id="alerts-list"
-             hx-get="/api/monitoring/alerts/active"
+             hx-get="/api/ui/monitoring/alerts/active"
              hx-trigger="load, every 30s"
              hx-swap="innerHTML">
             <div class="alert-placeholder">
@@ -137,7 +137,7 @@
         </div>
 
         <div class="rules-grid" id="rules-grid"
-             hx-get="/api/monitoring/alerts/rules"
+             hx-get="/api/ui/monitoring/alerts/rules"
              hx-trigger="load"
              hx-swap="innerHTML">
             <div class="rule-card skeleton">
@@ -178,7 +178,7 @@
         </div>
 
         <div class="history-list" id="history-list"
-             hx-get="/api/monitoring/alerts/history"
+             hx-get="/api/ui/monitoring/alerts/history"
              hx-trigger="load"
              hx-swap="innerHTML">
             <div class="loading-state">
@@ -210,7 +210,7 @@
             </button>
         </div>
         <form id="create-alert-form"
-              hx-post="/api/monitoring/alerts/rules"
+              hx-post="/api/ui/monitoring/alerts/rules"
               hx-target="#rules-grid"
               hx-swap="innerHTML"
               hx-on::after-request="closeCreateAlertModal()">
diff --git a/ui/suite/monitoring/alerts.js b/ui/suite/monitoring/alerts.js
index 5c692d6..ac9a49b 100644
--- a/ui/suite/monitoring/alerts.js
+++ b/ui/suite/monitoring/alerts.js
@@ -97,7 +97,7 @@ function acknowledgeAlert(alertId) {
 
 function acknowledgeAllAlerts() {
     if (confirm('Are you sure you want to acknowledge all active alerts?')) {
-        htmx.ajax('POST', '/api/monitoring/alerts/acknowledge-all', {
+        htmx.ajax('POST', '/api/ui/monitoring/alerts/acknowledge-all', {
             swap: 'none'
         }).then(() => {
             htmx.trigger('#alerts-list', 'refresh');
diff --git a/ui/suite/monitoring/health.html b/ui/suite/monitoring/health.html
index b0410aa..b657b3b 100644
--- a/ui/suite/monitoring/health.html
+++ b/ui/suite/monitoring/health.html
@@ -3,7 +3,7 @@
 <div class="health-container">
     <!-- Health Overview -->
     <div class="health-overview"
-         hx-get="/api/monitoring/health/overview"
+         hx-get="/api/ui/monitoring/health/overview"
          hx-trigger="load, every 10s"
          hx-swap="innerHTML">
         <div class="health-status healthy">
@@ -24,7 +24,7 @@
     <!-- Uptime Stats -->
     <div class="uptime-stats">
         <div class="stat-card"
-             hx-get="/api/monitoring/health/uptime"
+             hx-get="/api/ui/monitoring/health/uptime"
              hx-trigger="load, every 60s"
              hx-swap="innerHTML">
             <div class="stat-icon">
@@ -39,7 +39,7 @@
             </div>
         </div>
         <div class="stat-card"
-             hx-get="/api/monitoring/health/uptime-percent"
+             hx-get="/api/ui/monitoring/health/uptime-percent"
              hx-trigger="load, every 60s"
              hx-swap="innerHTML">
             <div class="stat-icon success">
@@ -53,7 +53,7 @@
             </div>
         </div>
         <div class="stat-card"
-             hx-get="/api/monitoring/health/last-incident"
+             hx-get="/api/ui/monitoring/health/last-incident"
              hx-trigger="load, every 60s"
              hx-swap="innerHTML">
             <div class="stat-icon warning">
@@ -69,7 +69,7 @@
             </div>
         </div>
         <div class="stat-card"
-             hx-get="/api/monitoring/health/response-time"
+             hx-get="/api/ui/monitoring/health/response-time"
              hx-trigger="load, every 30s"
              hx-swap="innerHTML">
             <div class="stat-icon info">
@@ -113,7 +113,7 @@
         </div>
 
         <div class="health-checks-grid" id="health-checks"
-             hx-get="/api/monitoring/health/checks"
+             hx-get="/api/ui/monitoring/health/checks"
              hx-trigger="load, every 10s"
              hx-swap="innerHTML">
             <div class="health-check-card">
@@ -200,7 +200,7 @@
         </div>
 
         <div class="dependencies-list" id="dependencies"
-             hx-get="/api/monitoring/health/dependencies"
+             hx-get="/api/ui/monitoring/health/dependencies"
              hx-trigger="load, every 30s"
              hx-swap="innerHTML">
             <div class="dependency-row">
@@ -277,7 +277,7 @@
         </div>
 
         <div class="uptime-chart" id="uptime-chart"
-             hx-get="/api/monitoring/health/uptime-history"
+             hx-get="/api/ui/monitoring/health/uptime-history"
              hx-trigger="load"
              hx-swap="innerHTML">
             <div class="uptime-bars">
@@ -319,7 +319,7 @@
         </div>
 
         <div class="incidents-list" id="incidents"
-             hx-get="/api/monitoring/health/incidents"
+             hx-get="/api/ui/monitoring/health/incidents"
              hx-trigger="load"
              hx-swap="innerHTML">
             <div class="incident-placeholder">
diff --git a/ui/suite/monitoring/home-dashboard.html b/ui/suite/monitoring/home-dashboard.html
index 7146325..913dd45 100644
--- a/ui/suite/monitoring/home-dashboard.html
+++ b/ui/suite/monitoring/home-dashboard.html
@@ -246,11 +246,11 @@
                 <rect x="0" y="0" width="160" height="85" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
                 <text x="12" y="24" fill="#64748b" font-family="system-ui" font-size="10" font-weight="500">ACTIVE SESSIONS</text>
                 <text x="12" y="58" fill="#f8fafc" font-family="system-ui" font-size="32" font-weight="700"
-                      hx-get="/api/monitoring/metric/sessions"
+                      hx-get="/api/ui/monitoring/metric/sessions"
                       hx-trigger="load, every 5s"
                       hx-swap="innerHTML">--</text>
                 <text x="148" y="70" fill="#10b981" font-family="system-ui" font-size="11" text-anchor="end"
-                      hx-get="/api/monitoring/trend/sessions"
+                      hx-get="/api/ui/monitoring/trend/sessions"
                       hx-trigger="load, every 5s"
                       hx-swap="innerHTML">↑ 0%</text>
             </g>
@@ -260,11 +260,11 @@
                 <rect x="0" y="0" width="160" height="85" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
                 <text x="12" y="24" fill="#64748b" font-family="system-ui" font-size="10" font-weight="500">MESSAGES TODAY</text>
                 <text x="12" y="58" fill="#f8fafc" font-family="system-ui" font-size="32" font-weight="700"
-                      hx-get="/api/monitoring/metric/messages"
+                      hx-get="/api/ui/monitoring/metric/messages"
                       hx-trigger="load, every 10s"
                       hx-swap="innerHTML">--</text>
                 <text x="148" y="70" fill="#94a3b8" font-family="system-ui" font-size="11" text-anchor="end"
-                      hx-get="/api/monitoring/rate/messages"
+                      hx-get="/api/ui/monitoring/rate/messages"
                       hx-trigger="load, every 10s"
                       hx-swap="innerHTML">0/hr</text>
             </g>
@@ -274,7 +274,7 @@
                 <rect x="0" y="0" width="160" height="85" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
                 <text x="12" y="24" fill="#64748b" font-family="system-ui" font-size="10" font-weight="500">AVG RESPONSE</text>
                 <text x="12" y="58" fill="#f8fafc" font-family="system-ui" font-size="32" font-weight="700"
-                      hx-get="/api/monitoring/metric/response_time"
+                      hx-get="/api/ui/monitoring/metric/response_time"
                       hx-trigger="load, every 10s"
                       hx-swap="innerHTML">--</text>
                 <text x="148" y="70" fill="#94a3b8" font-family="system-ui" font-size="11" text-anchor="end">ms</text>
@@ -283,7 +283,7 @@
             <!-- ==================== RESOURCE BARS ==================== -->
 
             <g transform="translate(320, 580)" class="resource-bars"
-               hx-get="/api/monitoring/resources/bars"
+               hx-get="/api/ui/monitoring/resources/bars"
                hx-trigger="load, every 15s"
                hx-swap="innerHTML">
                 <!-- CPU -->
@@ -325,7 +325,7 @@
                 <rect x="0" y="0" width="520" height="40" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
                 <circle cx="18" cy="20" r="5" fill="#10b981" class="pulse-dot"/>
                 <text x="34" y="25" fill="#94a3b8" font-family="system-ui" font-size="12"
-                      hx-get="/api/monitoring/activity/latest"
+                      hx-get="/api/ui/monitoring/activity/latest"
                       hx-trigger="load, every 5s"
                       hx-swap="innerHTML">System monitoring active...</text>
             </g>
@@ -335,7 +335,7 @@
             <g transform="translate(600, 45)">
                 <text text-anchor="middle" fill="#f8fafc" font-family="system-ui" font-size="22" font-weight="600">Live System Monitor</text>
                 <text y="24" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="12"
-                      hx-get="/api/monitoring/timestamp"
+                      hx-get="/api/ui/monitoring/timestamp"
                       hx-trigger="load, every 5s"
                       hx-swap="innerHTML">Last updated: --</text>
             </g>
@@ -361,7 +361,7 @@
 
     <!-- Hidden service status updater -->
     <div id="service-status-container" style="display: none;"
-         hx-get="/api/monitoring/services"
+         hx-get="/api/ui/monitoring/services"
          hx-trigger="load, every 30s"
          hx-swap="innerHTML">
     </div>
diff --git a/ui/suite/monitoring/index.html b/ui/suite/monitoring/index.html
index 330adf1..eba823b 100644
--- a/ui/suite/monitoring/index.html
+++ b/ui/suite/monitoring/index.html
@@ -2,10 +2,23 @@
     <!-- Sidebar Navigation -->
     <aside class="monitoring-sidebar">
         <div class="monitoring-header">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
                 <circle cx="12" cy="12" r="10" opacity="0.3"></circle>
                 <circle cx="12" cy="12" r="6.5" opacity="0.6"></circle>
-                <circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"></circle>
+                <circle
+                    cx="12"
+                    cy="12"
+                    r="2"
+                    fill="currentColor"
+                    stroke="none"
+                ></circle>
                 <line x1="12" y1="2" x2="12" y2="5"></line>
                 <line x1="12" y1="19" x2="12" y2="22"></line>
                 <line x1="2" y1="12" x2="5" y2="12"></line>
@@ -15,13 +28,23 @@
         </div>
 
         <nav class="monitoring-nav">
-            <a href="#dashboard" class="nav-item active"
-               hx-get="/api/monitoring/dashboard"
-               hx-target="#monitoring-content"
-               hx-swap="innerHTML"
-               hx-push-url="false"
-               onclick="setActiveNav(this)">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <a
+                href="#dashboard"
+                class="nav-item active"
+                hx-get="/api/ui/monitoring/dashboard"
+                hx-target="#monitoring-content"
+                hx-swap="innerHTML"
+                hx-push-url="false"
+                onclick="setActiveNav(this)"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
                     <rect x="3" y="3" width="7" height="9"></rect>
                     <rect x="14" y="3" width="7" height="5"></rect>
                     <rect x="14" y="12" width="7" height="9"></rect>
@@ -29,27 +52,61 @@
                 </svg>
                 <span>Dashboard</span>
             </a>
-            <a href="#services" class="nav-item"
-               hx-get="/api/monitoring/services"
-               hx-target="#monitoring-content"
-               hx-swap="innerHTML"
-               hx-push-url="false"
-               onclick="setActiveNav(this)">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
-                    <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+            <a
+                href="#services"
+                class="nav-item"
+                hx-get="/api/ui/monitoring/services"
+                hx-target="#monitoring-content"
+                hx-swap="innerHTML"
+                hx-push-url="false"
+                onclick="setActiveNav(this)"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <rect
+                        x="2"
+                        y="2"
+                        width="20"
+                        height="8"
+                        rx="2"
+                        ry="2"
+                    ></rect>
+                    <rect
+                        x="2"
+                        y="14"
+                        width="20"
+                        height="8"
+                        rx="2"
+                        ry="2"
+                    ></rect>
                     <line x1="6" y1="6" x2="6.01" y2="6"></line>
                     <line x1="6" y1="18" x2="6.01" y2="18"></line>
                 </svg>
                 <span>Services</span>
             </a>
-            <a href="#resources" class="nav-item"
-               hx-get="/api/monitoring/resources"
-               hx-target="#monitoring-content"
-               hx-swap="innerHTML"
-               hx-push-url="false"
-               onclick="setActiveNav(this)">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <a
+                href="#resources"
+                class="nav-item"
+                hx-get="/api/ui/monitoring/resources"
+                hx-target="#monitoring-content"
+                hx-swap="innerHTML"
+                hx-push-url="false"
+                onclick="setActiveNav(this)"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
                     <rect x="4" y="4" width="16" height="16" rx="2"></rect>
                     <rect x="9" y="9" width="6" height="6"></rect>
                     <line x1="9" y1="1" x2="9" y2="4"></line>
@@ -63,14 +120,26 @@
                 </svg>
                 <span>Resources</span>
             </a>
-            <a href="#logs" class="nav-item"
-               hx-get="/api/monitoring/logs"
-               hx-target="#monitoring-content"
-               hx-swap="innerHTML"
-               hx-push-url="false"
-               onclick="setActiveNav(this)">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+            <a
+                href="#logs"
+                class="nav-item"
+                hx-get="/api/ui/monitoring/logs"
+                hx-target="#monitoring-content"
+                hx-swap="innerHTML"
+                hx-push-url="false"
+                onclick="setActiveNav(this)"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path
+                        d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                    ></path>
                     <polyline points="14 2 14 8 20 8"></polyline>
                     <line x1="16" y1="13" x2="8" y2="13"></line>
                     <line x1="16" y1="17" x2="8" y2="17"></line>
@@ -78,55 +147,100 @@
                 </svg>
                 <span>Logs</span>
             </a>
-            <a href="#metrics" class="nav-item"
-               hx-get="/api/monitoring/metrics"
-               hx-target="#monitoring-content"
-               hx-swap="innerHTML"
-               hx-push-url="false"
-               onclick="setActiveNav(this)">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <a
+                href="#metrics"
+                class="nav-item"
+                hx-get="/api/ui/monitoring/metrics"
+                hx-target="#monitoring-content"
+                hx-swap="innerHTML"
+                hx-push-url="false"
+                onclick="setActiveNav(this)"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
                     <line x1="18" y1="20" x2="18" y2="10"></line>
                     <line x1="12" y1="20" x2="12" y2="4"></line>
                     <line x1="6" y1="20" x2="6" y2="14"></line>
                 </svg>
                 <span>Metrics</span>
             </a>
-            <a href="#alerts" class="nav-item"
-               hx-get="/api/monitoring/alerts"
-               hx-target="#monitoring-content"
-               hx-swap="innerHTML"
-               hx-push-url="false"
-               onclick="setActiveNav(this)">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+            <a
+                href="#alerts"
+                class="nav-item"
+                hx-get="/api/ui/monitoring/alerts"
+                hx-target="#monitoring-content"
+                hx-swap="innerHTML"
+                hx-push-url="false"
+                onclick="setActiveNav(this)"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path
+                        d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"
+                    ></path>
                     <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                 </svg>
                 <span>Alerts</span>
-                <span class="alert-badge" id="alert-count"
-                      hx-get="/api/monitoring/alerts/count"
-                      hx-trigger="load, every 30s"
-                      hx-swap="innerHTML">0</span>
+                <span
+                    class="alert-badge"
+                    id="alert-count"
+                    hx-get="/api/ui/monitoring/alerts/count"
+                    hx-trigger="load, every 30s"
+                    hx-swap="innerHTML"
+                    >0</span
+                >
             </a>
-            <a href="#health" class="nav-item"
-               hx-get="/api/monitoring/health"
-               hx-target="#monitoring-content"
-               hx-swap="innerHTML"
-               hx-push-url="false"
-               onclick="setActiveNav(this)">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <a
+                href="#health"
+                class="nav-item"
+                hx-get="/api/ui/monitoring/health"
+                hx-target="#monitoring-content"
+                hx-swap="innerHTML"
+                hx-push-url="false"
+                onclick="setActiveNav(this)"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
                     <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                 </svg>
                 <span>Health</span>
-                <span class="health-indicator"
-                      hx-get="/api/monitoring/health/status"
-                      hx-trigger="load, every 10s"
-                      hx-swap="outerHTML"></span>
+                <span
+                    class="health-indicator"
+                    hx-get="/api/ui/monitoring/health/status"
+                    hx-trigger="load, every 10s"
+                    hx-swap="outerHTML"
+                ></span>
             </a>
         </nav>
 
         <div class="monitoring-footer">
             <a href="/suite" class="back-link">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
                     <line x1="19" y1="12" x2="5" y2="12"></line>
                     <polyline points="12 19 5 12 12 5"></polyline>
                 </svg>
@@ -134,10 +248,13 @@
             </a>
             <div class="system-status">
                 <span class="status-indicator running"></span>
-                <span class="status-text"
-                      hx-get="/api/monitoring/system/status"
-                      hx-trigger="load, every 15s"
-                      hx-swap="innerHTML">All Systems Operational</span>
+                <span
+                    class="status-text"
+                    hx-get="/api/ui/monitoring/system/status"
+                    hx-trigger="load, every 15s"
+                    hx-swap="innerHTML"
+                    >All Systems Operational</span
+                >
             </div>
         </div>
     </aside>
@@ -147,14 +264,20 @@
         <div class="monitoring-toolbar">
             <div class="toolbar-left">
                 <h1 id="page-title">Dashboard</h1>
-                <span class="last-updated"
-                      hx-get="/api/monitoring/timestamp"
-                      hx-trigger="load, every 5s"
-                      hx-swap="innerHTML">--</span>
+                <span
+                    class="last-updated"
+                    hx-get="/api/ui/monitoring/timestamp"
+                    hx-trigger="load, every 5s"
+                    hx-swap="innerHTML"
+                    >--</span
+                >
             </div>
             <div class="toolbar-right">
                 <div class="time-range-selector">
-                    <select id="time-range" onchange="updateTimeRange(this.value)">
+                    <select
+                        id="time-range"
+                        onchange="updateTimeRange(this.value)"
+                    >
                         <option value="15m">Last 15 minutes</option>
                         <option value="1h" selected>Last 1 hour</option>
                         <option value="6h">Last 6 hours</option>
@@ -163,28 +286,78 @@
                         <option value="30d">Last 30 days</option>
                     </select>
                 </div>
-                <button class="toolbar-btn" onclick="refreshMonitoring()" title="Refresh">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <button
+                    class="toolbar-btn"
+                    onclick="refreshMonitoring()"
+                    title="Refresh"
+                >
+                    <svg
+                        width="18"
+                        height="18"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
                         <polyline points="23 4 23 10 17 10"></polyline>
                         <polyline points="1 20 1 14 7 14"></polyline>
-                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                        <path
+                            d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"
+                        ></path>
                     </svg>
                 </button>
-                <button class="toolbar-btn" onclick="toggleAutoRefresh()" id="auto-refresh-btn" title="Auto Refresh">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <button
+                    class="toolbar-btn"
+                    onclick="toggleAutoRefresh()"
+                    id="auto-refresh-btn"
+                    title="Auto Refresh"
+                >
+                    <svg
+                        width="18"
+                        height="18"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
                         <circle cx="12" cy="12" r="10"></circle>
                         <polyline points="12 6 12 12 16 14"></polyline>
                     </svg>
                 </button>
-                <button class="toolbar-btn" onclick="exportData()" title="Export">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <button
+                    class="toolbar-btn"
+                    onclick="exportData()"
+                    title="Export"
+                >
+                    <svg
+                        width="18"
+                        height="18"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path
+                            d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+                        ></path>
                         <polyline points="7 10 12 15 17 10"></polyline>
                         <line x1="12" y1="15" x2="12" y2="3"></line>
                     </svg>
                 </button>
-                <a href="/metrics" target="_blank" class="toolbar-btn" title="Prometheus Metrics">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <a
+                    href="/metrics"
+                    target="_blank"
+                    class="toolbar-btn"
+                    title="Prometheus Metrics"
+                >
+                    <svg
+                        width="18"
+                        height="18"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
                         <circle cx="12" cy="12" r="10"></circle>
                         <line x1="12" y1="8" x2="12" y2="12"></line>
                         <line x1="12" y1="16" x2="12.01" y2="16"></line>
@@ -193,10 +366,13 @@
             </div>
         </div>
 
-        <div class="monitoring-content" id="monitoring-content"
-             hx-get="/api/monitoring/dashboard"
-             hx-trigger="load"
-             hx-swap="innerHTML">
+        <div
+            class="monitoring-content"
+            id="monitoring-content"
+            hx-get="/api/ui/monitoring/dashboard"
+            hx-trigger="load"
+            hx-swap="innerHTML"
+        >
             <!-- Dashboard content loaded via HTMX -->
             <div class="loading-state">
                 <div class="spinner"></div>
@@ -208,22 +384,40 @@
 
 <!-- Quick Stats Bar (always visible) -->
 <div class="quick-stats-bar">
-    <div class="quick-stat"
-         hx-get="/api/monitoring/quick/cpu"
-         hx-trigger="load, every 5s"
-         hx-swap="innerHTML">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <div
+        class="quick-stat"
+        hx-get="/api/ui/monitoring/quick/cpu"
+        hx-trigger="load, every 5s"
+        hx-swap="innerHTML"
+    >
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+        >
             <rect x="4" y="4" width="16" height="16" rx="2"></rect>
             <rect x="9" y="9" width="6" height="6"></rect>
         </svg>
         <span class="stat-label">CPU</span>
         <span class="stat-value">--%</span>
     </div>
-    <div class="quick-stat"
-         hx-get="/api/monitoring/quick/memory"
-         hx-trigger="load, every 5s"
-         hx-swap="innerHTML">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <div
+        class="quick-stat"
+        hx-get="/api/ui/monitoring/quick/memory"
+        hx-trigger="load, every 5s"
+        hx-swap="innerHTML"
+    >
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+        >
             <rect x="2" y="6" width="20" height="12" rx="2"></rect>
             <line x1="6" y1="12" x2="6" y2="12"></line>
             <line x1="10" y1="12" x2="10" y2="12"></line>
@@ -233,11 +427,20 @@
         <span class="stat-label">Memory</span>
         <span class="stat-value">--%</span>
     </div>
-    <div class="quick-stat"
-         hx-get="/api/monitoring/quick/disk"
-         hx-trigger="load, every 30s"
-         hx-swap="innerHTML">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <div
+        class="quick-stat"
+        hx-get="/api/ui/monitoring/quick/disk"
+        hx-trigger="load, every 30s"
+        hx-swap="innerHTML"
+    >
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+        >
             <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
             <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
             <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
@@ -245,11 +448,20 @@
         <span class="stat-label">Disk</span>
         <span class="stat-value">--%</span>
     </div>
-    <div class="quick-stat"
-         hx-get="/api/monitoring/quick/network"
-         hx-trigger="load, every 5s"
-         hx-swap="innerHTML">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <div
+        class="quick-stat"
+        hx-get="/api/ui/monitoring/quick/network"
+        hx-trigger="load, every 5s"
+        hx-swap="innerHTML"
+    >
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+        >
             <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
             <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
             <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
@@ -258,11 +470,20 @@
         <span class="stat-label">Network</span>
         <span class="stat-value">-- MB/s</span>
     </div>
-    <div class="quick-stat"
-         hx-get="/api/monitoring/quick/requests"
-         hx-trigger="load, every 5s"
-         hx-swap="innerHTML">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <div
+        class="quick-stat"
+        hx-get="/api/ui/monitoring/quick/requests"
+        hx-trigger="load, every 5s"
+        hx-swap="innerHTML"
+    >
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+        >
             <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
         </svg>
         <span class="stat-label">Requests</span>
@@ -270,5 +491,5 @@
     </div>
 </div>
 
-<link rel="stylesheet" href="/static/suite/monitoring/monitoring.css">
+<link rel="stylesheet" href="/static/suite/monitoring/monitoring.css" />
 <script src="/static/suite/monitoring/monitoring.js"></script>
diff --git a/ui/suite/monitoring/logs.html b/ui/suite/monitoring/logs.html
index 20be91a..6fc9bf1 100644
--- a/ui/suite/monitoring/logs.html
+++ b/ui/suite/monitoring/logs.html
@@ -18,7 +18,7 @@
             <div class="filter-group">
                 <label for="service-filter">Service</label>
                 <select id="service-filter" onchange="applyLogFilters()"
-                        hx-get="/api/monitoring/logs/services"
+                        hx-get="/api/ui/monitoring/logs/services"
                         hx-trigger="load"
                         hx-swap="innerHTML">
                     <option value="all">All Services</option>
diff --git a/ui/suite/monitoring/metrics.html b/ui/suite/monitoring/metrics.html
index f77c8ad..b8d3faf 100644
--- a/ui/suite/monitoring/metrics.html
+++ b/ui/suite/monitoring/metrics.html
@@ -13,7 +13,7 @@
                 Metrics Dashboard
             </h2>
             <span class="last-sync"
-                  hx-get="/api/monitoring/metrics/last-sync"
+                  hx-get="/api/ui/monitoring/metrics/last-sync"
                   hx-trigger="load, every 30s"
                   hx-swap="innerHTML">Last sync: --</span>
         </div>
@@ -45,7 +45,7 @@
 
     <!-- Key Metrics Overview -->
     <div class="key-metrics"
-         hx-get="/api/analytics/dashboard"
+         hx-get="/api/ui/analytics/dashboard"
          hx-trigger="load, every 30s"
          hx-swap="innerHTML">
         <div class="metric-card">
@@ -168,7 +168,7 @@
                 </div>
             </div>
             <div class="chart-body" id="requests-chart"
-                 hx-get="/api/analytics/metric?name=requests"
+                 hx-get="/api/ui/analytics/metric?name=requests"
                  hx-trigger="load, every 30s"
                  hx-swap="innerHTML">
                 <svg viewBox="0 0 600 200" class="chart-svg">
@@ -207,7 +207,7 @@
                 </div>
             </div>
             <div class="chart-body" id="latency-chart"
-                 hx-get="/api/analytics/metric?name=latency"
+                 hx-get="/api/ui/analytics/metric?name=latency"
                  hx-trigger="load, every 30s"
                  hx-swap="innerHTML">
                 <svg viewBox="0 0 600 200" class="chart-svg">
@@ -247,7 +247,7 @@
                 </div>
             </div>
             <div class="chart-body" id="errors-chart"
-                 hx-get="/api/analytics/metric?name=errors"
+                 hx-get="/api/ui/analytics/metric?name=errors"
                  hx-trigger="load, every 30s"
                  hx-swap="innerHTML">
                 <svg viewBox="0 0 600 200" class="chart-svg">
@@ -289,7 +289,7 @@
                 </div>
             </div>
             <div class="chart-body" id="throughput-chart"
-                 hx-get="/api/analytics/metric?name=throughput"
+                 hx-get="/api/ui/analytics/metric?name=throughput"
                  hx-trigger="load, every 30s"
                  hx-swap="innerHTML">
                 <svg viewBox="0 0 600 200" class="chart-svg">
@@ -356,7 +356,7 @@
         </div>
         <div class="metrics-table-container">
             <table class="metrics-table" id="metrics-table"
-                   hx-get="/api/analytics/metrics/list"
+                   hx-get="/api/ui/analytics/metrics/list"
                    hx-trigger="load"
                    hx-swap="innerHTML">
                 <thead>
diff --git a/ui/suite/monitoring/monitoring.html b/ui/suite/monitoring/monitoring.html
index b246b29..2078732 100644
--- a/ui/suite/monitoring/monitoring.html
+++ b/ui/suite/monitoring/monitoring.html
@@ -80,7 +80,7 @@
             </button>
             <span
                 class="last-updated"
-                hx-get="/api/monitoring/timestamp"
+                hx-get="/api/ui/monitoring/timestamp"
                 hx-trigger="load, every 5s"
                 hx-swap="innerHTML"
                 >--</span
@@ -778,7 +778,7 @@
                     font-family="system-ui"
                     font-size="28"
                     font-weight="700"
-                    hx-get="/api/monitoring/metric/sessions"
+                    hx-get="/api/ui/monitoring/metric/sessions"
                     hx-trigger="load, every 5s"
                     hx-swap="innerHTML"
                 >
@@ -791,7 +791,7 @@
                     font-family="system-ui"
                     font-size="10"
                     text-anchor="end"
-                    hx-get="/api/monitoring/trend/sessions"
+                    hx-get="/api/ui/monitoring/trend/sessions"
                     hx-trigger="load, every 5s"
                     hx-swap="innerHTML"
                 >
@@ -828,7 +828,7 @@
                     font-family="system-ui"
                     font-size="28"
                     font-weight="700"
-                    hx-get="/api/monitoring/metric/messages"
+                    hx-get="/api/ui/monitoring/metric/messages"
                     hx-trigger="load, every 10s"
                     hx-swap="innerHTML"
                 >
@@ -841,7 +841,7 @@
                     font-family="system-ui"
                     font-size="10"
                     text-anchor="end"
-                    hx-get="/api/monitoring/rate/messages"
+                    hx-get="/api/ui/monitoring/rate/messages"
                     hx-trigger="load, every 10s"
                     hx-swap="innerHTML"
                 >
@@ -878,7 +878,7 @@
                     font-family="system-ui"
                     font-size="28"
                     font-weight="700"
-                    hx-get="/api/monitoring/metric/response_time"
+                    hx-get="/api/ui/monitoring/metric/response_time"
                     hx-trigger="load, every 10s"
                     hx-swap="innerHTML"
                 >
@@ -900,7 +900,7 @@
 
             <g
                 transform="translate(330, 545)"
-                hx-get="/api/monitoring/resources/bars"
+                hx-get="/api/ui/monitoring/resources/bars"
                 hx-trigger="load, every 15s"
                 hx-swap="innerHTML"
             >
@@ -1095,7 +1095,7 @@
                     fill="#94a3b8"
                     font-family="system-ui"
                     font-size="11"
-                    hx-get="/api/monitoring/activity/latest"
+                    hx-get="/api/ui/monitoring/activity/latest"
                     hx-trigger="load, every 5s"
                     hx-swap="innerHTML"
                 >
@@ -1151,7 +1151,7 @@
         <!-- Sessions Panel -->
         <div
             class="monitor-panel"
-            hx-get="/api/monitoring/sessions"
+            hx-get="/api/ui/monitoring/sessions"
             hx-trigger="load, every 5s"
             hx-swap="innerHTML"
         >
@@ -1189,7 +1189,7 @@
         <!-- Messages Panel -->
         <div
             class="monitor-panel"
-            hx-get="/api/monitoring/messages"
+            hx-get="/api/ui/monitoring/messages"
             hx-trigger="load, every 10s"
             hx-swap="innerHTML"
         >
@@ -1220,7 +1220,7 @@
         <!-- Resources Panel -->
         <div
             class="monitor-panel resources-panel"
-            hx-get="/api/monitoring/resources"
+            hx-get="/api/ui/monitoring/resources"
             hx-trigger="load, every 15s"
             hx-swap="innerHTML"
         >
@@ -1271,7 +1271,7 @@
         <!-- Services Panel -->
         <div
             class="monitor-panel services-panel"
-            hx-get="/api/monitoring/services"
+            hx-get="/api/ui/monitoring/services"
             hx-trigger="load, every 30s"
             hx-swap="innerHTML"
         >
@@ -1324,7 +1324,7 @@
         <!-- Bots Panel -->
         <div
             class="monitor-panel bots-panel"
-            hx-get="/api/monitoring/bots"
+            hx-get="/api/ui/monitoring/bots"
             hx-trigger="load, every 30s"
             hx-swap="innerHTML"
         >
@@ -1369,7 +1369,7 @@
     <div
         id="service-status-container"
         style="display: none"
-        hx-get="/api/monitoring/services/status"
+        hx-get="/api/ui/monitoring/services/status"
         hx-trigger="load, every 30s"
         hx-swap="innerHTML"
     ></div>
diff --git a/ui/suite/monitoring/resources.html b/ui/suite/monitoring/resources.html
index dc33a1e..0057c0a 100644
--- a/ui/suite/monitoring/resources.html
+++ b/ui/suite/monitoring/resources.html
@@ -5,7 +5,7 @@
     <div class="resource-cards">
         <!-- CPU Card -->
         <div class="resource-card cpu-card"
-             hx-get="/api/monitoring/resources/cpu"
+             hx-get="/api/ui/monitoring/resources/cpu"
              hx-trigger="load, every 5s"
              hx-swap="innerHTML">
             <div class="card-icon">
@@ -34,7 +34,7 @@
 
         <!-- Memory Card -->
         <div class="resource-card memory-card"
-             hx-get="/api/monitoring/resources/memory"
+             hx-get="/api/ui/monitoring/resources/memory"
              hx-trigger="load, every 5s"
              hx-swap="innerHTML">
             <div class="card-icon">
@@ -58,7 +58,7 @@
 
         <!-- Disk Card -->
         <div class="resource-card disk-card"
-             hx-get="/api/monitoring/resources/disk"
+             hx-get="/api/ui/monitoring/resources/disk"
              hx-trigger="load, every 30s"
              hx-swap="innerHTML">
             <div class="card-icon">
@@ -80,7 +80,7 @@
 
         <!-- Network Card -->
         <div class="resource-card network-card"
-             hx-get="/api/monitoring/resources/network"
+             hx-get="/api/ui/monitoring/resources/network"
              hx-trigger="load, every 5s"
              hx-swap="innerHTML">
             <div class="card-icon">
@@ -132,7 +132,7 @@
                 </div>
             </div>
             <div class="chart-container" id="cpu-chart"
-                 hx-get="/api/monitoring/charts/cpu"
+                 hx-get="/api/ui/monitoring/charts/cpu"
                  hx-trigger="load, every 10s"
                  hx-swap="innerHTML">
                 <div class="chart-placeholder">
@@ -173,7 +173,7 @@
                 </div>
             </div>
             <div class="chart-container" id="memory-chart"
-                 hx-get="/api/monitoring/charts/memory"
+                 hx-get="/api/ui/monitoring/charts/memory"
                  hx-trigger="load, every 10s"
                  hx-swap="innerHTML">
                 <div class="chart-placeholder">
@@ -217,7 +217,7 @@
                 </button>
             </div>
             <div class="detail-content" id="disk-partitions"
-                 hx-get="/api/monitoring/resources/disk/partitions"
+                 hx-get="/api/ui/monitoring/resources/disk/partitions"
                  hx-trigger="load, every 60s"
                  hx-swap="innerHTML">
                 <div class="partition-row">
@@ -259,7 +259,7 @@
                 </select>
             </div>
             <div class="detail-content" id="process-list"
-                 hx-get="/api/monitoring/resources/processes"
+                 hx-get="/api/ui/monitoring/resources/processes"
                  hx-trigger="load, every 5s"
                  hx-swap="innerHTML">
                 <table class="process-table">
@@ -295,7 +295,7 @@
                 </h3>
             </div>
             <div class="detail-content" id="network-interfaces"
-                 hx-get="/api/monitoring/resources/network/interfaces"
+                 hx-get="/api/ui/monitoring/resources/network/interfaces"
                  hx-trigger="load, every 10s"
                  hx-swap="innerHTML">
                 <div class="interface-row">
@@ -334,7 +334,7 @@
                 </h3>
             </div>
             <div class="detail-content system-info"
-                 hx-get="/api/monitoring/resources/system"
+                 hx-get="/api/ui/monitoring/resources/system"
                  hx-trigger="load"
                  hx-swap="innerHTML">
                 <div class="info-row">
diff --git a/ui/suite/paper/paper.html b/ui/suite/paper/paper.html
index aacffb3..3fa21aa 100644
--- a/ui/suite/paper/paper.html
+++ b/ui/suite/paper/paper.html
@@ -5,7 +5,7 @@
         <div class="sidebar-header">
             <h2>Paper</h2>
             <button class="btn-icon" title="New Note"
-                    hx-post="/api/paper/new"
+                    hx-post="/api/ui/paper/new"
                     hx-target="#paper-list"
                     hx-swap="afterbegin">
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -20,7 +20,7 @@
             <input type="text"
                    placeholder="Search notes..."
                    name="q"
-                   hx-get="/api/paper/search"
+                   hx-get="/api/ui/paper/search"
                    hx-trigger="keyup changed delay:300ms"
                    hx-target="#paper-list">
             <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -31,7 +31,7 @@
 
         <!-- Notes List -->
         <div class="paper-list" id="paper-list"
-             hx-get="/api/paper/list"
+             hx-get="/api/ui/paper/list"
              hx-trigger="load"
              hx-swap="innerHTML">
             <!-- Notes loaded here -->
@@ -41,19 +41,19 @@
         <div class="sidebar-section">
             <h3>Quick Start</h3>
             <div class="template-grid">
-                <button class="template-btn" hx-post="/api/paper/template/blank" hx-target="#editor-content">
+                <button class="template-btn" hx-post="/api/ui/paper/template/blank" hx-target="#editor-content">
                     <span class="template-icon">📄</span>
                     <span>Blank</span>
                 </button>
-                <button class="template-btn" hx-post="/api/paper/template/meeting" hx-target="#editor-content">
+                <button class="template-btn" hx-post="/api/ui/paper/template/meeting" hx-target="#editor-content">
                     <span class="template-icon">📋</span>
                     <span>Meeting</span>
                 </button>
-                <button class="template-btn" hx-post="/api/paper/template/todo" hx-target="#editor-content">
+                <button class="template-btn" hx-post="/api/ui/paper/template/todo" hx-target="#editor-content">
                     <span class="template-icon">✓</span>
                     <span>To-Do</span>
                 </button>
-                <button class="template-btn" hx-post="/api/paper/template/research" hx-target="#editor-content">
+                <button class="template-btn" hx-post="/api/ui/paper/template/research" hx-target="#editor-content">
                     <span class="template-icon">🔬</span>
                     <span>Research</span>
                 </button>
@@ -239,7 +239,7 @@
                     </svg>
                     <span>AI</span>
                 </button>
-                <button class="btn-icon" hx-post="/api/paper/save" hx-include="#editor-content" title="Save">
+                <button class="btn-icon" hx-post="/api/ui/paper/save" hx-include="#editor-content" title="Save">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"></path>
                         <polyline points="17 21 17 13 7 13 7 21"></polyline>
@@ -270,7 +270,7 @@
                      id="editor-content"
                      contenteditable="true"
                      data-placeholder="Start writing, or type / for commands..."
-                     hx-post="/api/paper/autosave"
+                     hx-post="/api/ui/paper/autosave"
                      hx-trigger="keyup changed delay:2000ms"
                      hx-swap="none"></div>
             </div>
@@ -426,16 +426,16 @@
             <div class="ai-panel-content">
                 <!-- Quick Actions -->
                 <div class="ai-quick-actions">
-                    <button class="ai-action-btn" hx-post="/api/paper/ai/summarize" hx-include="[name='selected-text']">
+                    <button class="ai-action-btn" hx-post="/api/ui/paper/ai/summarize" hx-include="[name='selected-text']">
                         <span>📝</span> Summarize
                     </button>
-                    <button class="ai-action-btn" hx-post="/api/paper/ai/expand" hx-include="[name='selected-text']">
+                    <button class="ai-action-btn" hx-post="/api/ui/paper/ai/expand" hx-include="[name='selected-text']">
                         <span>📖</span> Expand
                     </button>
-                    <button class="ai-action-btn" hx-post="/api/paper/ai/improve" hx-include="[name='selected-text']">
+                    <button class="ai-action-btn" hx-post="/api/ui/paper/ai/improve" hx-include="[name='selected-text']">
                         <span>✏️</span> Improve
                     </button>
-                    <button class="ai-action-btn" hx-post="/api/paper/ai/simplify" hx-include="[name='selected-text']">
+                    <button class="ai-action-btn" hx-post="/api/ui/paper/ai/simplify" hx-include="[name='selected-text']">
                         <span>🎯</span> Simplify
                     </button>
                 </div>
@@ -463,7 +463,7 @@
                         <option value="zh">Chinese</option>
                         <option value="ja">Japanese</option>
                     </select>
-                    <button class="ai-action-btn" hx-post="/api/paper/ai/translate" hx-include="#translate-lang, [name='selected-text']">
+                    <button class="ai-action-btn" hx-post="/api/ui/paper/ai/translate" hx-include="#translate-lang, [name='selected-text']">
                         Translate
                     </button>
                 </div>
@@ -472,7 +472,7 @@
                 <div class="ai-custom-section">
                     <label>Custom</label> AI Command</label>
                     <textarea id="ai-custom-prompt" placeholder="Tell AI what to do with selected text..."></textarea>
-                    <button class="btn-primary" hx-post="/api/paper/ai/custom" hx-include="#ai-custom-prompt, [name='selected-text']">
+                    <button class="btn-primary" hx-post="/api/ui/paper/ai/custom" hx-include="#ai-custom-prompt, [name='selected-text']">
                         Run Command
                     </button>
                 </div>
@@ -543,23 +543,23 @@
             </div>
             <div class="modal-body">
                 <div class="export-options">
-                    <button class="export-option" hx-get="/api/paper/export/pdf" hx-swap="none">
+                    <button class="export-option" hx-get="/api/ui/paper/export/pdf" hx-swap="none">
                         <span class="export-icon">📄</span>
                         <span class="export-label">PDF</span>
                     </button>
-                    <button class="export-option" hx-get="/api/paper/export/docx" hx-swap="none">
+                    <button class="export-option" hx-get="/api/ui/paper/export/docx" hx-swap="none">
                         <span class="export-icon">📝</span>
                         <span class="export-label">Word (.docx)</span>
                     </button>
-                    <button class="export-option" hx-get="/api/paper/export/md" hx-swap="none">
+                    <button class="export-option" hx-get="/api/ui/paper/export/md" hx-swap="none">
                         <span class="export-icon">📑</span>
                         <span class="export-label">Markdown</span>
                     </button>
-                    <button class="export-option" hx-get="/api/paper/export/html" hx-swap="none">
+                    <button class="export-option" hx-get="/api/ui/paper/export/html" hx-swap="none">
                         <span class="export-icon">🌐</span>
                         <span class="export-label">HTML</span>
                     </button>
-                    <button class="export-option" hx-get="/api/paper/export/txt" hx-swap="none">
+                    <button class="export-option" hx-get="/api/ui/paper/export/txt" hx-swap="none">
                         <span class="export-icon">📋</span>
                         <span class="export-label">Plain Text</span>
                     </button>
@@ -1534,7 +1534,7 @@
         status.textContent = 'Saving...';
         status.className = 'status-item save-status saving';
 
-        htmx.ajax('POST', '/api/paper/save', {
+        htmx.ajax('POST', '/api/ui/paper/save', {
             target: 'none',
             values: {
                 title: title.innerText,
@@ -1681,7 +1681,7 @@
             const tone = this.dataset.tone;
             const selectedText = document.getElementById('selected-text-input').value;
 
-            htmx.ajax('POST', '/api/paper/ai/tone', {
+            htmx.ajax('POST', '/api/ui/paper/ai/tone', {
                 target: '#ai-response-content',
                 values: {
                     tone: tone,
diff --git a/ui/suite/paper/paper.js b/ui/suite/paper/paper.js
index eb363f4..59ee114 100644
--- a/ui/suite/paper/paper.js
+++ b/ui/suite/paper/paper.js
@@ -473,7 +473,7 @@
                 const selectedText = document.getElementById('selected-text-input')?.value || '';
 
                 if (typeof htmx !== 'undefined') {
-                    htmx.ajax('POST', '/api/paper/ai/tone', {
+                    htmx.ajax('POST', '/api/ui/paper/ai/tone', {
                         target: '#ai-response-content',
                         values: { tone, text: selectedText }
                     }).then(() => {
@@ -609,7 +609,7 @@
         const content = elements.editor?.innerHTML || '';
 
         if (typeof htmx !== 'undefined') {
-            htmx.ajax('POST', '/api/paper/save', {
+            htmx.ajax('POST', '/api/ui/paper/save', {
                 swap: 'none',
                 values: { title, content }
             }).then(() => {
diff --git a/ui/suite/research/research.html b/ui/suite/research/research.html
index 1095628..69c1530 100644
--- a/ui/suite/research/research.html
+++ b/ui/suite/research/research.html
@@ -50,7 +50,7 @@
             <div class="section-header">
                 <h3>Collections</h3>
                 <button class="btn-icon-sm" title="New Collection"
-                        hx-post="/api/research/collections/new"
+                        hx-post="/api/ui/research/collections/new"
                         hx-target="#collections-list"
                         hx-swap="afterbegin">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -60,7 +60,7 @@
                 </button>
             </div>
             <div class="collections-list" id="collections-list"
-                 hx-get="/api/research/collections"
+                 hx-get="/api/ui/research/collections"
                  hx-trigger="load"
                  hx-swap="innerHTML">
                 <!-- Collections loaded here -->
@@ -71,7 +71,7 @@
         <div class="sidebar-section">
             <h3>Recent</h3>
             <div class="recent-list" id="recent-searches"
-                 hx-get="/api/research/recent"
+                 hx-get="/api/ui/research/recent"
                  hx-trigger="load"
                  hx-swap="innerHTML">
                 <!-- Recent searches loaded here -->
@@ -83,7 +83,7 @@
             <div class="section-header">
                 <h3>Prompts</h3>
                 <button class="btn-icon-sm" title="Browse All"
-                        hx-get="/api/research/prompts"
+                        hx-get="/api/ui/research/prompts"
                         hx-target="#main-results">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <polyline points="9 18 15 12 9 6"></polyline>
@@ -133,7 +133,7 @@
         <!-- Search Header -->
         <div class="search-header">
             <form class="search-form" id="research-form"
-                  hx-post="/api/research/search"
+                  hx-post="/api/ui/research/search"
                   hx-target="#main-results"
                   hx-indicator="#search-indicator">
                 <div class="search-input-wrapper">
@@ -217,7 +217,7 @@
             <div class="trending-section">
                 <h3>Trending</h3>
                 <div class="trending-tags" id="trending-tags"
-                     hx-get="/api/research/trending"
+                     hx-get="/api/ui/research/trending"
                      hx-trigger="load"
                      hx-swap="innerHTML">
                     <!-- Trending tags loaded here -->
@@ -237,7 +237,7 @@
             <h3>Sources</h3>
             <div class="sources-actions">
                 <button class="btn-icon-sm" title="Export Citations"
-                        hx-get="/api/research/export-citations"
+                        hx-get="/api/ui/research/export-citations"
                         hx-swap="none">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path>
@@ -1386,7 +1386,7 @@
             const content = document.getElementById('answer-content');
             if (content) {
                 // Send to Paper via HTMX
-                htmx.ajax('POST', '/api/paper/import', {
+                htmx.ajax('POST', '/api/ui/paper/import', {
                     values: {
                         content: content.innerHTML,
                         title: searchInput.value
@@ -1422,7 +1422,7 @@
     function updateSourceCounts() {
         // This would typically come from the API response
         // For now, we'll use placeholder logic
-        htmx.ajax('GET', '/api/research/source-counts', {
+        htmx.ajax('GET', '/api/ui/research/source-counts', {
             swap: 'none'
         }).then(response => {
             // Update counts in sidebar
diff --git a/ui/suite/research/research.js b/ui/suite/research/research.js
index ccf6aca..9fd75e3 100644
--- a/ui/suite/research/research.js
+++ b/ui/suite/research/research.js
@@ -257,7 +257,7 @@
             if (exportBtn) {
                 const content = document.getElementById('answer-content');
                 if (content && typeof htmx !== 'undefined') {
-                    htmx.ajax('POST', '/api/paper/import', {
+                    htmx.ajax('POST', '/api/ui/paper/import', {
                         values: {
                             content: content.innerHTML,
                             title: elements.searchInput?.value || 'Research Export'
@@ -287,7 +287,7 @@
      */
     function updateSourceCounts() {
         if (typeof htmx !== 'undefined') {
-            htmx.ajax('GET', '/api/research/source-counts', {
+            htmx.ajax('GET', '/api/ui/research/source-counts', {
                 swap: 'none'
             }).then(response => {
                 // Update counts in sidebar if response contains them
@@ -304,7 +304,7 @@
         const collectionName = prompt('Enter collection name:');
         if (collectionName && typeof htmx !== 'undefined') {
             const content = document.getElementById('answer-content');
-            htmx.ajax('POST', '/api/research/collections/save', {
+            htmx.ajax('POST', '/api/ui/research/collections/save', {
                 values: {
                     collection: collectionName,
                     content: content?.innerHTML || '',
diff --git a/ui/suite/settings/index.html b/ui/suite/settings/index.html
index b710abc..c2e2f3e 100644
--- a/ui/suite/settings/index.html
+++ b/ui/suite/settings/index.html
@@ -10,7 +10,7 @@
         </div>
 
         <nav class="settings-nav">
-            <a href="#profile" class="nav</span>-item active" onclick="showSection('profile', this)">
+            <a href="#profile" class="nav-item active" onclick="showSection('profile', this)">
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                     <circle cx="12" cy="7" r="4"></circle>
@@ -683,7 +683,7 @@
             <div class="setting-card">
                 <div class="card-header">
                     <h2>Webhooks</h2>
-                    <button class="btn-primary btn-sm" onclick="document.getElementById('create-webhook-modal').showModal()">
+                    <button class="btn-primary btn-sm" onclick="document.getElementById('add-webhook-modal').showModal()">
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <line x1="12" y1="5" x2="12" y2="19"></line>
                             <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -1701,22 +1701,43 @@
 
     /* Modal Styles */
     .modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
         background: transparent;
         border: none;
         padding: 0;
-        max-width: 500px;
-        width: 90%;
+        margin: 0;
+        z-index: 10000;
+        display: none;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .modal[open] {
+        display: flex;
     }
 
     .modal::backdrop {
-        background: rgba(0, 0, 0, 0.5);
+        background: rgba(0, 0, 0, 0.7);
     }
 
     .modal-content {
-        background: var(--surface);
+        background: var(--surface, #1a1a24);
         border-radius: 16px;
-        border: 1px solid var(--border);
+        border: 1px solid var(--border, #2a2a2a);
         overflow: hidden;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        max-width: 500px;
+        width: 90%;
+        max-height: 90vh;
+        overflow-y: auto;
     }
 
     .modal-header {
diff --git a/ui/suite/sources/accounts.html b/ui/suite/sources/accounts.html
index 91f653d..c07e4cf 100644
--- a/ui/suite/sources/accounts.html
+++ b/ui/suite/sources/accounts.html
@@ -13,7 +13,7 @@
         </div>
     </div>
 
-    <div class="accounts-grid" id="accounts-list" hx-get="/api/sources/accounts/list" hx-trigger="load" hx-swap="innerHTML">
+    <div class="accounts-grid" id="accounts-list" hx-get="/api/ui/sources/accounts/list" hx-trigger="load" hx-swap="innerHTML">
         <div class="loading-spinner">
             <div class="spinner"></div>
             <p>Loading accounts...</p>
diff --git a/ui/suite/sources/index.html b/ui/suite/sources/index.html
index 444e896..e52bdb9 100644
--- a/ui/suite/sources/index.html
+++ b/ui/suite/sources/index.html
@@ -1,54 +1,80 @@
-{% extends "suite/base.html" %}
-
-{% block title %}Sources - General Bots Suite{% endblock %}
-
-{% block content %}
 <div class="sources-container">
     <!-- Header -->
     <header class="sources-header">
         <div class="header-left">
             <h1>Sources</h1>
-            <p class="header-subtitle">Repositories, Apps, Prompts, Templates & MCP Servers</p>
+            <p class="header-subtitle">
+                Repositories, Apps, Prompts, Templates & MCP Servers
+            </p>
         </div>
         <div class="header-right">
             <div class="search-box">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
                     <circle cx="11" cy="11" r="8"></circle>
                     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                 </svg>
-                <input type="text"
-                       placeholder="Search sources..."
-                       name="q"
-                       hx-get="/api/sources/search"
-                       hx-trigger="keyup changed delay:300ms"
-                       hx-target="#content-area"
-                       hx-swap="innerHTML">
+                <input
+                    type="text"
+                    placeholder="Search sources..."
+                    name="q"
+                    hx-get="/api/ui/sources/search"
+                    hx-trigger="keyup changed delay:300ms"
+                    hx-target="#content-area"
+                    hx-swap="innerHTML"
+                />
             </div>
         </div>
     </header>
 
     <!-- Tab Navigation -->
     <nav class="tab-nav" role="tablist">
-        <button class="tab-btn active"
-                role="tab"
-                aria-selected="true"
-                hx-get="/api/sources/repositories"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+        <button
+            class="tab-btn active"
+            role="tab"
+            aria-selected="true"
+            hx-get="/api/ui/sources/repositories"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path
+                    d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+                ></path>
             </svg>
             Repositories
         </button>
-        <button class="tab-btn"
-                role="tab"
-                aria-selected="false"
-                hx-get="/api/sources/apps"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="false"
+            hx-get="/api/ui/sources/apps"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
                 <rect x="3" y="3" width="7" height="7"></rect>
                 <rect x="14" y="3" width="7" height="7"></rect>
                 <rect x="14" y="14" width="7" height="7"></rect>
@@ -56,27 +82,49 @@
             </svg>
             Apps
         </button>
-        <button class="tab-btn"
-                role="tab"
-                aria-selected="false"
-                hx-get="/api/sources/prompts"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+        <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="false"
+            hx-get="/api/ui/sources/prompts"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path
+                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+                ></path>
             </svg>
             Prompts
         </button>
-        <button class="tab-btn"
-                role="tab"
-                aria-selected="false"
-                hx-get="/api/sources/templates"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+        <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="false"
+            hx-get="/api/ui/sources/templates"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path
+                    d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                ></path>
                 <polyline points="14 2 14 8 20 8"></polyline>
                 <line x1="16" y1="13" x2="8" y2="13"></line>
                 <line x1="16" y1="17" x2="8" y2="17"></line>
@@ -84,26 +132,46 @@
             </svg>
             Templates
         </button>
-        <button class="tab-btn"
-                role="tab"
-                aria-selected="false"
-                hx-get="/api/sources/news"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"></path>
+        <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="false"
+            hx-get="/api/ui/sources/news"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path
+                    d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"
+                ></path>
             </svg>
             News
         </button>
-        <button class="tab-btn"
-                role="tab"
-                aria-selected="false"
-                hx-get="/api/sources/mcp-servers"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="false"
+            hx-get="/api/ui/sources/mcp-servers"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
                 <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
                 <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
                 <line x1="6" y1="6" x2="6.01" y2="6"></line>
@@ -111,26 +179,46 @@
             </svg>
             MCP Servers
         </button>
-        <button class="tab-btn"
-                role="tab"
-                aria-selected="false"
-                hx-get="/api/sources/llm-tools"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+        <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="false"
+            hx-get="/api/ui/sources/llm-tools"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path
+                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+                ></path>
             </svg>
             LLM Tools
         </button>
-        <button class="tab-btn"
-                role="tab"
-                aria-selected="false"
-                hx-get="/api/sources/models"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="false"
+            hx-get="/api/ui/sources/models"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
                 <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
                 <rect x="9" y="9" width="6" height="6"></rect>
                 <line x1="9" y1="1" x2="9" y2="4"></line>
@@ -144,15 +232,26 @@
             </svg>
             Models
         </button>
-        <button class="tab-btn"
-                role="tab"
-                aria-selected="false"
-                hx-get="/api/sources/accounts"
-                hx-target="#content-area"
-                hx-swap="innerHTML"
-                onclick="setActiveTab(this)">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+        <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="false"
+            hx-get="/api/ui/sources/accounts"
+            hx-target="#content-area"
+            hx-swap="innerHTML"
+            onclick="setActiveTab(this)"
+        >
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path
+                    d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+                ></path>
                 <polyline points="22,6 12,13 2,6"></polyline>
             </svg>
             Accounts
@@ -160,7 +259,13 @@
     </nav>
 
     <!-- Main Content Area -->
-    <main class="content-area" id="content-area" hx-get="/api/sources/repositories" hx-trigger="load" hx-swap="innerHTML">
+    <main
+        class="content-area"
+        id="content-area"
+        hx-get="/api/ui/sources/repositories"
+        hx-trigger="load"
+        hx-swap="innerHTML"
+    >
         <!-- Content loaded via HTMX -->
         <div class="loading-spinner">
             <div class="spinner"></div>
@@ -169,64 +274,6 @@
     </main>
 </div>
 
-<!-- Prompts Panel Template (loaded via HTMX) -->
-<template id="prompts-template">
-    <div class="panel-layout">
-        <!-- Categories Sidebar -->
-        <aside class="categories-sidebar">
-            <h3>Categories</h3>
-            <div class="category-list">
-                <button class="category-item active"
-                        hx-get="/api/sources/prompts?category=all"
-                        hx-target="#prompts-grid"
-                        hx-swap="innerHTML">
-                    <span class="category-icon" style="background: var(--primary);">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <rect x="3" y="3" width="7" height="7"></rect>
-                            <rect x="14" y="3" width="7" height="7"></rect>
-                            <rect x="14" y="14" width="7" height="7"></rect>
-                            <rect x="3" y="14" width="7" height="7"></rect>
-                        </svg>
-                    </span>
-                    <span class="category-name">All Prompts</span>
-                    <span class="category-count">42</span>
-                </button>
-                <!-- Categories loaded dynamically -->
-            </div>
-        </aside>
-
-        <!-- Prompts Grid -->
-        <section class="prompts-section">
-            <div class="section-header">
-                <h2>Featured Prompts</h2>
-                <div class="view-controls">
-                    <button class="view-btn active" title="Grid view">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <rect x="3" y="3" width="7" height="7"></rect>
-                            <rect x="14" y="3" width="7" height="7"></rect>
-                            <rect x="14" y="14" width="7" height="7"></rect>
-                            <rect x="3" y="14" width="7" height="7"></rect>
-                        </svg>
-                    </button>
-                    <button class="view-btn" title="List view">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <line x1="8" y1="6" x2="21" y2="6"></line>
-                            <line x1="8" y1="12" x2="21" y2="12"></line>
-                            <line x1="8" y1="18" x2="21" y2="18"></line>
-                            <line x1="3" y1="6" x2="3.01" y2="6"></line>
-                            <line x1="3" y1="12" x2="3.01" y2="12"></line>
-                            <line x1="3" y1="18" x2="3.01" y2="18"></line>
-                        </svg>
-                    </button>
-                </div>
-            </div>
-            <div class="prompts-grid" id="prompts-grid">
-                <!-- Prompts loaded dynamically -->
-            </div>
-        </section>
-    </div>
-</template>
-
 <style>
     .sources-container {
         display: flex;
@@ -248,45 +295,48 @@
 
     .sources-header h1 {
         font-size: 24px;
-        font-weight: 700;
+        font-weight: 600;
+        color: var(--text);
         margin: 0;
     }
 
     .header-subtitle {
         font-size: 14px;
         color: var(--text-secondary);
-        margin: 4px 0 0 0;
+        margin-top: 4px;
     }
 
     .search-box {
+        position: relative;
         display: flex;
         align-items: center;
-        gap: 10px;
-        background: var(--surface-hover);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 10px 16px;
-        min-width: 300px;
     }
 
     .search-box svg {
+        position: absolute;
+        left: 12px;
         color: var(--text-secondary);
-        flex-shrink: 0;
     }
 
     .search-box input {
-        flex: 1;
-        background: transparent;
-        border: none;
-        outline: none;
+        padding: 10px 16px 10px 40px;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        background: var(--surface);
         color: var(--text);
         font-size: 14px;
+        width: 280px;
     }
 
     .search-box input::placeholder {
         color: var(--text-secondary);
     }
 
+    .search-box input:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
     /* Tab Navigation */
     .tab-nav {
         display: flex;
@@ -302,25 +352,25 @@
         align-items: center;
         gap: 8px;
         padding: 10px 16px;
-        background: transparent;
         border: none;
-        border-radius: 8px;
+        background: transparent;
         color: var(--text-secondary);
         font-size: 14px;
         font-weight: 500;
+        border-radius: 8px;
         cursor: pointer;
-        transition: all 0.15s;
+        transition: all 0.2s;
         white-space: nowrap;
     }
 
     .tab-btn:hover {
-        background: var(--surface-hover);
+        background: var(--hover);
         color: var(--text);
     }
 
     .tab-btn.active {
         background: var(--primary);
-        color: white;
+        color: var(--primary-text, #000);
     }
 
     .tab-btn svg {
@@ -337,7 +387,7 @@
     /* Panel Layout */
     .panel-layout {
         display: grid;
-        grid-template-columns: 260px 1fr;
+        grid-template-columns: 240px 1fr;
         gap: 24px;
         height: 100%;
     }
@@ -345,20 +395,19 @@
     /* Categories Sidebar */
     .categories-sidebar {
         background: var(--surface);
+        border: 1px solid var(--border);
         border-radius: 12px;
         padding: 16px;
         height: fit-content;
-        position: sticky;
-        top: 0;
     }
 
     .categories-sidebar h3 {
         font-size: 12px;
         font-weight: 600;
-        text-transform: uppercase;
         color: var(--text-secondary);
         margin: 0 0 12px 0;
-        padding: 0 8px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
     }
 
     .category-list {
@@ -371,24 +420,24 @@
         display: flex;
         align-items: center;
         gap: 12px;
-        width: 100%;
         padding: 10px 12px;
-        background: transparent;
         border: none;
+        background: transparent;
         border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-align: left;
+        width: 100%;
         color: var(--text);
         font-size: 14px;
-        text-align: left;
-        cursor: pointer;
-        transition: all 0.15s;
     }
 
     .category-item:hover {
-        background: var(--surface-hover);
+        background: var(--hover);
     }
 
     .category-item.active {
-        background: var(--primary-light);
+        background: var(--primary-light, rgba(212, 245, 5, 0.1));
     }
 
     .category-icon {
@@ -398,11 +447,12 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        flex-shrink: 0;
+        background: var(--surface-alt, var(--hover));
+        font-size: 16px;
     }
 
     .category-icon svg {
-        color: white;
+        color: var(--text);
     }
 
     .category-name {
@@ -412,9 +462,9 @@
     .category-count {
         font-size: 12px;
         color: var(--text-secondary);
-        background: var(--surface-hover);
+        background: var(--hover);
         padding: 2px 8px;
-        border-radius: 10px;
+        border-radius: 12px;
     }
 
     /* Section Header */
@@ -422,12 +472,13 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-bottom: 20px;
+        margin-bottom: 16px;
     }
 
     .section-header h2 {
         font-size: 18px;
         font-weight: 600;
+        color: var(--text);
         margin: 0;
     }
 
@@ -435,59 +486,185 @@
         display: flex;
         gap: 4px;
         background: var(--surface);
-        border-radius: 8px;
         padding: 4px;
+        border-radius: 8px;
     }
 
     .view-btn {
-        width: 32px;
-        height: 32px;
+        padding: 8px;
         border: none;
-        border-radius: 6px;
         background: transparent;
-        color: var(--text-secondary);
+        border-radius: 6px;
         cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.15s;
+        color: var(--text-secondary);
+        transition: all 0.2s;
     }
 
     .view-btn:hover {
-        color: var(--text);
+        background: var(--hover);
     }
 
     .view-btn.active {
-        background: var(--surface-hover);
+        background: var(--primary);
+        color: var(--primary-text, #000);
+    }
+
+    /* Grid Layouts */
+    .repos-grid,
+    .apps-grid,
+    .prompts-grid,
+    .templates-grid,
+    .servers-grid,
+    .models-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 16px;
+    }
+
+    /* Repository Card */
+    .repo-card {
+        background: var(--surface);
+        border-radius: 12px;
+        padding: 20px;
+        border: 1px solid var(--border);
+        transition: all 0.2s;
+    }
+
+    .repo-card:hover {
+        border-color: var(--primary);
+        transform: translateY(-2px);
+    }
+
+    .repo-header {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    .repo-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--primary-light, rgba(212, 245, 5, 0.1));
+    }
+
+    .repo-icon svg {
+        color: var(--primary);
+    }
+
+    .repo-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .repo-name {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--text);
+        margin: 0;
+    }
+
+    .repo-owner {
+        font-size: 12px;
+        color: var(--text-secondary);
+    }
+
+    .repo-description {
+        font-size: 14px;
+        color: var(--text-secondary);
+        margin: 12px 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .repo-meta {
+        display: flex;
+        gap: 16px;
+        font-size: 12px;
+        color: var(--text-secondary);
+    }
+
+    .repo-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .repo-status {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+    }
+
+    .repo-status.connected {
+        background: rgba(76, 175, 80, 0.1);
+        color: #4caf50;
+    }
+
+    .repo-status.disconnected {
+        background: rgba(158, 158, 158, 0.1);
+        color: #9e9e9e;
+    }
+
+    .repo-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 16px;
+    }
+
+    .repo-actions button {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .btn-connect {
+        background: var(--primary);
+        color: var(--primary-text, #000);
+    }
+
+    .btn-disconnect {
+        background: var(--hover);
         color: var(--text);
     }
 
-    /* Prompts Grid */
-    .prompts-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-        gap: 16px;
+    .btn-browse {
+        background: transparent;
+        border: 1px solid var(--border) !important;
+        color: var(--text);
     }
 
     /* Prompt Card */
     .prompt-card {
         background: var(--surface);
-        border: 1px solid var(--border);
         border-radius: 12px;
         padding: 20px;
-        cursor: pointer;
+        border: 1px solid var(--border);
         transition: all 0.2s;
     }
 
     .prompt-card:hover {
         border-color: var(--primary);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
 
-    .prompt-card-header {
+    .prompt-header {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         gap: 12px;
         margin-bottom: 12px;
     }
@@ -499,11 +676,12 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        flex-shrink: 0;
+        background: var(--primary-light, rgba(212, 245, 5, 0.1));
+        font-size: 20px;
     }
 
     .prompt-icon svg {
-        color: white;
+        color: var(--primary);
     }
 
     .prompt-info {
@@ -512,12 +690,13 @@
     }
 
     .prompt-name {
-        font-size: 15px;
+        font-size: 16px;
         font-weight: 600;
+        color: var(--text);
         margin: 0 0 4px 0;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .prompt-category {
@@ -526,10 +705,10 @@
     }
 
     .prompt-description {
-        font-size: 13px;
+        font-size: 14px;
         color: var(--text-secondary);
         line-height: 1.5;
-        margin-bottom: 16px;
+        margin: 0;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
@@ -540,19 +719,22 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        margin-top: 16px;
     }
 
     .prompt-rating {
         display: flex;
         align-items: center;
         gap: 4px;
-        font-size: 13px;
         color: var(--text-secondary);
+        font-size: 14px;
     }
 
     .prompt-rating svg {
-        color: #eab308;
-        fill: #eab308;
+        width: 16px;
+        height: 16px;
+        color: #ffc107;
+        fill: #ffc107;
     }
 
     .prompt-actions {
@@ -561,30 +743,27 @@
     }
 
     .prompt-action-btn {
-        width: 32px;
-        height: 32px;
+        padding: 6px 12px;
         border: none;
+        background: var(--hover);
         border-radius: 6px;
-        background: var(--surface-hover);
-        color: var(--text-secondary);
         cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.15s;
+        font-size: 12px;
+        color: var(--text);
+        transition: all 0.2s;
     }
 
     .prompt-action-btn:hover {
         background: var(--primary);
-        color: white;
+        color: var(--primary-text, #000);
     }
 
-    /* MCP Server Card */
+    /* Server Card */
     .server-card {
         background: var(--surface);
-        border: 1px solid var(--border);
         border-radius: 12px;
         padding: 20px;
+        border: 1px solid var(--border);
         transition: all 0.2s;
     }
 
@@ -594,19 +773,19 @@
 
     .server-header {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         gap: 12px;
         margin-bottom: 12px;
     }
 
     .server-icon {
-        width: 44px;
-        height: 44px;
+        width: 40px;
+        height: 40px;
         border-radius: 10px;
-        background: var(--surface-hover);
         display: flex;
         align-items: center;
         justify-content: center;
+        background: var(--primary-light, rgba(212, 245, 5, 0.1));
     }
 
     .server-icon svg {
@@ -618,33 +797,29 @@
     }
 
     .server-name {
-        font-size: 15px;
+        font-size: 16px;
         font-weight: 600;
-        margin: 0 0 4px 0;
+        color: var(--text);
     }
 
     .server-type {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
+        font-size: 12px;
+        color: var(--text-secondary);
         padding: 2px 8px;
-        background: var(--primary-light);
-        color: var(--primary);
-        font-size: 11px;
-        font-weight: 500;
+        background: var(--hover);
         border-radius: 4px;
+        display: inline-block;
+        margin-top: 4px;
     }
 
     .server-description {
-        font-size: 13px;
+        font-size: 14px;
         color: var(--text-secondary);
-        line-height: 1.5;
-        margin-bottom: 12px;
+        margin: 12px 0;
     }
 
     .server-meta {
         display: flex;
-        align-items: center;
         gap: 16px;
         font-size: 12px;
         color: var(--text-secondary);
@@ -659,9 +834,9 @@
     /* Model Card */
     .model-card {
         background: var(--surface);
-        border: 1px solid var(--border);
         border-radius: 12px;
         padding: 20px;
+        border: 1px solid var(--border);
         transition: all 0.2s;
     }
 
@@ -673,55 +848,219 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-bottom: 12px;
+        margin-bottom: 8px;
     }
 
     .model-name {
         font-size: 16px;
         font-weight: 600;
+        color: var(--text);
     }
 
     .model-status {
-        padding: 4px 10px;
-        border-radius: 12px;
         font-size: 11px;
-        font-weight: 500;
+        padding: 4px 8px;
+        border-radius: 4px;
     }
 
     .model-status.active {
-        background: rgba(34, 197, 94, 0.1);
-        color: #22c55e;
+        background: rgba(76, 175, 80, 0.1);
+        color: #4caf50;
     }
 
     .model-status.coming-soon {
-        background: rgba(234, 179, 8, 0.1);
-        color: #eab308;
+        background: rgba(255, 152, 0, 0.1);
+        color: #ff9800;
     }
 
     .model-provider {
         font-size: 12px;
         color: var(--text-secondary);
-        margin-bottom: 8px;
+        margin-bottom: 12px;
     }
 
     .model-description {
-        font-size: 13px;
+        font-size: 14px;
         color: var(--text-secondary);
-        line-height: 1.5;
-        margin-bottom: 16px;
+        margin-bottom: 12px;
     }
 
     .model-tags {
         display: flex;
         flex-wrap: wrap;
-        gap: 6px;
+        gap: 8px;
     }
 
     .model-tag {
-        padding: 4px 10px;
-        background: var(--surface-hover);
-        border-radius: 6px;
         font-size: 11px;
+        padding: 4px 8px;
+        background: var(--hover);
+        border-radius: 4px;
+        color: var(--text-secondary);
+    }
+
+    /* App Card */
+    .app-card {
+        background: var(--surface);
+        border-radius: 12px;
+        padding: 20px;
+        border: 1px solid var(--border);
+        transition: all 0.2s;
+    }
+
+    .app-card:hover {
+        border-color: var(--primary);
+        transform: translateY(-2px);
+    }
+
+    .app-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    .app-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--primary-light, rgba(212, 245, 5, 0.1));
+        font-size: 24px;
+    }
+
+    .app-name {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .app-type {
+        font-size: 12px;
+        color: var(--text-secondary);
+    }
+
+    .app-description {
+        font-size: 14px;
+        color: var(--text-secondary);
+        margin-bottom: 16px;
+    }
+
+    .app-actions {
+        display: flex;
+        gap: 8px;
+    }
+
+    .app-actions button {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .btn-open {
+        background: var(--primary);
+        color: var(--primary-text, #000);
+    }
+
+    .btn-edit {
+        background: var(--hover);
+        color: var(--text);
+    }
+
+    /* Template Card */
+    .template-card {
+        background: var(--surface);
+        border-radius: 12px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        transition: all 0.2s;
+    }
+
+    .template-card:hover {
+        border-color: var(--primary);
+    }
+
+    .template-preview {
+        height: 120px;
+        background: var(--hover);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .template-preview svg {
+        width: 48px;
+        height: 48px;
+        color: var(--text-secondary);
+        opacity: 0.5;
+    }
+
+    .template-content {
+        padding: 16px;
+    }
+
+    .template-name {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 4px;
+    }
+
+    .template-meta {
+        font-size: 12px;
+        color: var(--text-secondary);
+    }
+
+    /* News Card */
+    .news-card {
+        background: var(--surface);
+        border-radius: 12px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        transition: all 0.2s;
+    }
+
+    .news-card:hover {
+        border-color: var(--primary);
+    }
+
+    .news-image {
+        height: 160px;
+        background: var(--hover);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .news-content {
+        padding: 16px;
+    }
+
+    .news-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 8px;
+    }
+
+    .news-excerpt {
+        font-size: 14px;
+        color: var(--text-secondary);
+        margin-bottom: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .news-meta {
+        font-size: 12px;
         color: var(--text-secondary);
     }
 
@@ -741,12 +1080,14 @@
         border: 3px solid var(--border);
         border-top-color: var(--primary);
         border-radius: 50%;
-        animation: spin 1s linear infinite;
+        animation: spin 0.8s linear infinite;
         margin-bottom: 16px;
     }
 
     @keyframes spin {
-        to { transform: rotate(360deg); }
+        to {
+            transform: rotate(360deg);
+        }
     }
 
     /* Empty State */
@@ -770,107 +1111,16 @@
     .empty-state h3 {
         font-size: 18px;
         font-weight: 600;
+        color: var(--text);
         margin: 0 0 8px 0;
     }
 
     .empty-state p {
+        font-size: 14px;
         color: var(--text-secondary);
         margin: 0;
     }
 
-    /* Template Card */
-    .template-card {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        overflow: hidden;
-        transition: all 0.2s;
-    }
-
-    .template-card:hover {
-        border-color: var(--primary);
-        transform: translateY(-2px);
-    }
-
-    .template-preview {
-        height: 120px;
-        background: var(--surface-hover);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .template-preview svg {
-        width: 48px;
-        height: 48px;
-        color: var(--text-secondary);
-        opacity: 0.5;
-    }
-
-    .template-content {
-        padding: 16px;
-    }
-
-    .template-name {
-        font-size: 14px;
-        font-weight: 600;
-        margin: 0 0 4px 0;
-    }
-
-    .template-meta {
-        font-size: 12px;
-        color: var(--text-secondary);
-    }
-
-    /* News Card */
-    .news-card {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 20px;
-        display: flex;
-        gap: 16px;
-        transition: all 0.2s;
-    }
-
-    .news-card:hover {
-        border-color: var(--primary);
-    }
-
-    .news-image {
-        width: 100px;
-        height: 80px;
-        border-radius: 8px;
-        background: var(--surface-hover);
-        flex-shrink: 0;
-    }
-
-    .news-content {
-        flex: 1;
-    }
-
-    .news-title {
-        font-size: 15px;
-        font-weight: 600;
-        margin: 0 0 8px 0;
-        line-height: 1.4;
-    }
-
-    .news-excerpt {
-        font-size: 13px;
-        color: var(--text-secondary);
-        line-height: 1.5;
-        margin-bottom: 8px;
-    }
-
-    .news-meta {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        font-size: 12px;
-        color: var(--text-secondary);
-    }
-
     /* Responsive */
     @media (max-width: 1024px) {
         .panel-layout {
@@ -890,11 +1140,16 @@
         }
 
         .search-box {
-            min-width: auto;
+            width: 100%;
+        }
+
+        .search-box input {
+            width: 100%;
         }
 
         .tab-nav {
             padding: 12px 16px;
+            overflow-x: auto;
         }
 
         .tab-btn span:not(.tab-icon) {
@@ -905,7 +1160,12 @@
             padding: 16px;
         }
 
-        .prompts-grid {
+        .repos-grid,
+        .apps-grid,
+        .prompts-grid,
+        .templates-grid,
+        .servers-grid,
+        .models-grid {
             grid-template-columns: 1fr;
         }
     }
@@ -914,63 +1174,52 @@
 <script>
     // Tab switching
     function setActiveTab(btn) {
-        document.querySelectorAll('.tab-btn').forEach(t => {
-            t.classList.remove('active');
-            t.setAttribute('aria-selected', 'false');
+        document.querySelectorAll(".tab-btn").forEach((t) => {
+            t.classList.remove("active");
+            t.setAttribute("aria-selected", "false");
         });
-        btn.classList.add('active');
-        btn.setAttribute('aria-selected', 'true');
+        btn.classList.add("active");
+        btn.setAttribute("aria-selected", "true");
     }
 
-    // Category switching</script>
-    document.addEventListener('click', function(e) {
-        const categoryItem = e.target.closest('.category-item');
+    // Category switching
+    document.addEventListener("click", function (e) {
+        const categoryItem = e.target.closest(".category-item");
         if (categoryItem) {
-            document.querySelectorAll('.category-item').forEach(c => c.classList.remove('active'));
-            categoryItem.classList.add('active');
+            document
+                .querySelectorAll(".category-item")
+                .forEach((c) => c.classList.remove("active"));
+            categoryItem.classList.add("active");
         }
     });
 
     // View toggle
-    document.addEventListener('click', function(e) {
-        const viewBtn = e.target.closest('.view-btn');
+    document.addEventListener("click", function (e) {
+        const viewBtn = e.target.closest(".view-btn");
         if (viewBtn) {
-            const controls = viewBtn.closest('.view-controls');
-            controls.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
-            viewBtn.classList.add('active');
-
-            const grid = document.querySelector('.prompts-grid, .templates-grid, .servers-grid, .models-grid');
-            if (grid) {
-                if (viewBtn.title === 'List view') {
-                    grid.classList.add('list-view');
-                } else {
-                    grid.classList.remove('list-view');
-                }
-            }
+            const controls = viewBtn.closest(".view-controls");
+            controls
+                .querySelectorAll(".view-btn")
+                .forEach((b) => b.classList.remove("active"));
+            viewBtn.classList.add("active");
         }
     });
 
     // Keyboard shortcuts
-    document.addEventListener('keydown', function(e) {
+    document.addEventListener("keydown", function (e) {
         // Ctrl+K to focus search
-        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        if ((e.ctrlKey || e.metaKey) && e.key === "k") {
             e.preventDefault();
-            document.querySelector('.search-box input').focus();
-        }
-
-        // Tab navigation with number keys
-        if (!e.ctrlKey && !e.metaKey && !e.altKey) {
-            const tabs = document.querySelectorAll('.tab-btn');
-            const num = parseInt(e.key);
-            if (num >= 1 && num <= tabs.length) {
-                tabs[num - 1].click();
-            }
+            const searchInput = document.querySelector(
+                ".sources-container .search-box input",
+            );
+            if (searchInput) searchInput.focus();
         }
     });
 
-    // HTMX events
-    document.body.addEventListener('htmx:beforeRequest', function(e) {
-        if (e.detail.target.id === 'content-area') {
+    // HTMX loading indicator
+    document.body.addEventListener("htmx:beforeRequest", function (e) {
+        if (e.detail.target.id === "content-area") {
             e.detail.target.innerHTML = `
                 <div class="loading-spinner">
                     <div class="spinner"></div>
@@ -980,4 +1229,3 @@
         }
     });
 </script>
-{% endblock %}
diff --git a/ui/suite/sources/sources.js b/ui/suite/sources/sources.js
index 6ffc240..1af68fc 100644
--- a/ui/suite/sources/sources.js
+++ b/ui/suite/sources/sources.js
@@ -271,7 +271,7 @@
     const collectionName = prompt("Enter collection name:");
     if (collectionName && typeof htmx !== "undefined") {
       htmx
-        .ajax("POST", "/api/sources/prompts/save", {
+        .ajax("POST", "/api/ui/sources/prompts/save", {
           values: {
             promptId,
             collection: collectionName,
@@ -652,7 +652,7 @@
         .then(() => {
           showToast("Repository connected");
           // Refresh the repo card
-          htmx.ajax("GET", "/api/sources/repositories", {
+          htmx.ajax("GET", "/api/ui/sources/repositories", {
             target: "#content-area",
             swap: "innerHTML",
           });
@@ -672,7 +672,7 @@
           })
           .then(() => {
             showToast("Repository disconnected");
-            htmx.ajax("GET", "/api/sources/repositories", {
+            htmx.ajax("GET", "/api/ui/sources/repositories", {
               target: "#content-area",
               swap: "innerHTML",
             });
@@ -779,6 +779,46 @@
     });
   }
 
+  /**
+   * Filter MCP catalog by category
+   */
+  function filterMcpCategory(btn, category) {
+    document
+      .querySelectorAll("#mcp-category-filter .category-btn")
+      .forEach((b) => {
+        b.classList.remove("active");
+        b.style.background = "#f5f5f5";
+        b.style.color = "#333";
+      });
+    btn.classList.add("active");
+    btn.style.background = "#2196F3";
+    btn.style.color = "white";
+
+    document.querySelectorAll(".server-card").forEach((card) => {
+      if (category === "all" || card.dataset.category === category) {
+        card.style.display = "";
+      } else {
+        card.style.display = "none";
+      }
+    });
+  }
+
+  /**
+   * Add MCP server from catalog
+   */
+  function addCatalogServer(id, name) {
+    if (confirm('Add "' + name + '" to your MCP configuration?')) {
+      if (typeof htmx !== "undefined") {
+        htmx.ajax("POST", "/api/ui/sources/mcp/add-from-catalog", {
+          values: { server_id: id },
+          target: "#mcp-grid",
+          swap: "innerHTML",
+        });
+        showToast('Server "' + name + '" added to configuration');
+      }
+    }
+  }
+
   /**
    * Show toast notification
    */
@@ -823,7 +863,13 @@
     openApp,
     editApp,
     insertMention,
+    filterMcpCategory,
+    addCatalogServer,
     getTaskContext: window.getTaskContext,
     clearTaskContext: window.clearTaskContext,
   };
+
+  // Expose globally for inline onclick handlers
+  window.filterMcpCategory = filterMcpCategory;
+  window.addCatalogServer = addCatalogServer;
 })();
diff --git a/ui/suite/tasks/autotask.html b/ui/suite/tasks/autotask.html
index aaefb0e..d36e28f 100644
--- a/ui/suite/tasks/autotask.html
+++ b/ui/suite/tasks/autotask.html
@@ -97,7 +97,7 @@
             <div
                 class="intent-list"
                 id="intent-list"
-                hx-get="/api/autotask/list"
+                hx-get="/api/ui/autotask/list"
                 hx-trigger="load, every 10s"
                 hx-swap="innerHTML"
             >
@@ -130,7 +130,7 @@
             <div class="modal-body">
                 <form
                     id="new-intent-form"
-                    hx-post="/api/autotask/create"
+                    hx-post="/api/ui/autotask/create"
                     hx-ext="json-enc"
                     hx-target="#intent-list"
                     hx-swap="afterbegin"
diff --git a/ui/suite/tasks/taskmd.css b/ui/suite/tasks/taskmd.css
index c0c071f..0968184 100644
--- a/ui/suite/tasks/taskmd.css
+++ b/ui/suite/tasks/taskmd.css
@@ -134,10 +134,11 @@
     flex-shrink: 0;
 }
 
-/* Status section - compact, single line */
+/* Status section - slightly taller */
 .taskmd-section-status {
     flex: 0 0 auto;
-    max-height: 60px;
+    min-height: 80px;
+    max-height: 100px;
     overflow: hidden !important;
 }
 
@@ -150,12 +151,12 @@
     overflow: hidden !important;
 }
 
-/* Terminal section - fixed at bottom, compact */
+/* Terminal section - fixed at bottom, taller */
 .taskmd-section-terminal {
-    flex: 0 0 100px;
-    height: 100px;
-    min-height: 100px;
-    max-height: 100px;
+    flex: 0 0 150px;
+    height: 150px;
+    min-height: 150px;
+    max-height: 200px;
     display: flex;
     flex-direction: column;
     overflow: hidden !important;
@@ -173,10 +174,11 @@
     flex-shrink: 0;
 }
 
-/* STATUS Section - single line */
+/* STATUS Section - better spacing */
 .taskmd-status-content {
-    padding: 12px 24px;
+    padding: 16px 24px;
     background: var(--surface, #111);
+    min-height: 50px;
 }
 
 .status-row {
@@ -993,8 +995,8 @@
     flex-shrink: 0;
     display: flex;
     justify-content: flex-end;
-    gap: 12px;
-    padding: 20px 24px;
+    gap: 10px;
+    padding: 10px 20px;
     border-top: 1px solid var(--border, #1a1a1a);
     background: var(--bg-secondary, #0d0d0d);
 }
@@ -1002,11 +1004,11 @@
 .taskmd-actions .btn-action-rich {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
-    padding: 12px 24px;
+    gap: 6px;
+    padding: 8px 16px;
     border: none;
-    border-radius: 8px;
-    font-size: 14px;
+    border-radius: 6px;
+    font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
@@ -1017,14 +1019,14 @@
     background: var(--success, #22c55e);
     color: #fff;
     font-weight: 600;
-    padding: 12px 24px;
-    font-size: 15px;
-    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
+    padding: 8px 18px;
+    font-size: 13px;
+    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
 }
 
 .taskmd-actions .btn-open-app:hover {
     background: #16a34a;
-    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
+    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
     transform: translateY(-1px);
 }
 
@@ -1032,6 +1034,8 @@
     background: transparent;
     border: 1px solid var(--border, #333);
     color: var(--text-secondary, #888);
+    padding: 6px 14px;
+    font-size: 12px;
 }
 
 .taskmd-actions .btn-cancel:hover {
@@ -1071,24 +1075,28 @@
 
 /* Scrollbar */
 .task-detail-rich::-webkit-scrollbar,
-.taskmd-terminal-output::-webkit-scrollbar {
-    width: 6px;
+.taskmd-terminal-output::-webkit-scrollbar,
+.taskmd-progress-content::-webkit-scrollbar {
+    width: 8px;
 }
 
 .task-detail-rich::-webkit-scrollbar-track,
-.taskmd-terminal-output::-webkit-scrollbar-track {
-    background: #0a0a0a;
+.taskmd-terminal-output::-webkit-scrollbar-track,
+.taskmd-progress-content::-webkit-scrollbar-track {
+    background: var(--surface, #1a1a1a);
 }
 
 .task-detail-rich::-webkit-scrollbar-thumb,
-.taskmd-terminal-output::-webkit-scrollbar-thumb {
-    background: #222;
-    border-radius: 3px;
+.taskmd-terminal-output::-webkit-scrollbar-thumb,
+.taskmd-progress-content::-webkit-scrollbar-thumb {
+    background: var(--primary, #c5f82a);
+    border-radius: 4px;
 }
 
 .task-detail-rich::-webkit-scrollbar-thumb:hover,
-.taskmd-terminal-output::-webkit-scrollbar-thumb:hover {
-    background: #333;
+.taskmd-terminal-output::-webkit-scrollbar-thumb:hover,
+.taskmd-progress-content::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-hover, #d4ff4a);
 }
 
 /* =============================================================================
diff --git a/ui/suite/tasks/tasks.css b/ui/suite/tasks/tasks.css
index f915a06..3959944 100644
--- a/ui/suite/tasks/tasks.css
+++ b/ui/suite/tasks/tasks.css
@@ -555,7 +555,7 @@ body:has(.tasks-app) {
     color: var(--error, #ef4444);
 }
 
-.priority-badge.priority-normal {
+.priority-badge.priority-medium {
     background: var(--surface, #1a1a1a);
     color: var(--text-secondary, #888);
 }
@@ -1973,7 +1973,7 @@ body:has(.tasks-app) {
 .floating-progress-log {
     max-height: 150px;
     overflow-y: auto;
-    background: var(--bg, #0a0a0a);
+    background: transparent;
     border: 1px solid var(--border, #2a2a2a);
     border-radius: 6px;
     padding: 8px;
@@ -2008,7 +2008,7 @@ body:has(.tasks-app) {
 .floating-llm-terminal {
     max-height: 120px;
     overflow-y: auto;
-    background: var(--bg, #0a0a0a);
+    background: transparent;
     border: 1px solid var(--border, #2a2a2a);
     border-radius: 6px;
     padding: 8px;
@@ -2703,7 +2703,7 @@ body:has(.tasks-app) {
 
 /* Terminal Section Rich */
 .terminal-section-rich {
-    background: #0a0a0a;
+    background: var(--bg, var(--surface, #0a0a0a));
     border: 2px solid var(--border, #2a2a2a);
     border-radius: 12px;
 }
@@ -2747,7 +2747,7 @@ body:has(.tasks-app) {
 }
 
 .terminal-output-rich {
-    background: #000;
+    background: transparent;
     border-radius: 10px;
     padding: 16px 20px;
     font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
diff --git a/ui/suite/tasks/tasks.html b/ui/suite/tasks/tasks.html
index 39df325..d82026b 100644
--- a/ui/suite/tasks/tasks.html
+++ b/ui/suite/tasks/tasks.html
@@ -6,7 +6,7 @@
 <div class="tasks-app">
     <!-- Hidden element to load stats on page load -->
     <div
-        hx-get="/api/tasks/stats"
+        hx-get="/api/ui/tasks/stats"
         hx-trigger="load, taskCreated from:body"
         hx-swap="innerHTML"
         style="display: none"
@@ -17,7 +17,7 @@
         <button
             class="filter-pill"
             data-filter="complete"
-            hx-get="/api/tasks?filter=complete"
+            hx-get="/api/ui/tasks?filter=complete"
             hx-target="#task-list"
             hx-swap="innerHTML"
         >
@@ -28,7 +28,7 @@
         <button
             class="filter-pill active"
             data-filter="all"
-            hx-get="/api/tasks?filter=all"
+            hx-get="/api/ui/tasks?filter=all"
             hx-target="#task-list"
             hx-swap="innerHTML"
         >
@@ -39,7 +39,7 @@
         <button
             class="filter-pill"
             data-filter="active"
-            hx-get="/api/tasks?filter=active"
+            hx-get="/api/ui/tasks?filter=active"
             hx-target="#task-list"
             hx-swap="innerHTML"
         >
@@ -50,7 +50,7 @@
         <button
             class="filter-pill"
             data-filter="awaiting"
-            hx-get="/api/tasks?filter=awaiting"
+            hx-get="/api/ui/tasks?filter=awaiting"
             hx-target="#task-list"
             hx-swap="innerHTML"
         >
@@ -61,7 +61,7 @@
         <button
             class="filter-pill"
             data-filter="paused"
-            hx-get="/api/tasks?filter=paused"
+            hx-get="/api/ui/tasks?filter=paused"
             hx-target="#task-list"
             hx-swap="innerHTML"
         >
@@ -72,7 +72,7 @@
         <button
             class="filter-pill"
             data-filter="blocked"
-            hx-get="/api/tasks?filter=blocked"
+            hx-get="/api/ui/tasks?filter=blocked"
             hx-target="#task-list"
             hx-swap="innerHTML"
         >
@@ -100,7 +100,7 @@
             <button
                 id="quick-intent-btn"
                 class="btn-create-run"
-                hx-post="/api/autotask/create"
+                hx-post="/api/ui/autotask/create"
                 hx-ext="json-enc"
                 hx-include="#quick-intent-input"
                 hx-target="#intent-result-hidden"
@@ -123,7 +123,7 @@
             <div
                 class="tasks-list-scroll"
                 id="task-list"
-                hx-get="/api/tasks?filter=all"
+                hx-get="/api/ui/tasks?filter=all"
                 hx-trigger="load, taskCreated from:body throttle:2s"
                 hx-swap="innerHTML transition:false"
             >
@@ -242,9 +242,10 @@
                     <div class="form-group">
                         <label for="intent-priority">Priority</label>
                         <select id="intent-priority" name="priority">
-                            <option value="normal">Normal</option>
-                            <option value="high">High</option>
                             <option value="low">Low</option>
+                            <option value="medium" selected>Medium</option>
+                            <option value="high">High</option>
+                            <option value="urgent">Urgent</option>
                         </select>
                     </div>
                     <div class="form-group">
diff --git a/ui/suite/tasks/tasks.js b/ui/suite/tasks/tasks.js
index 976ac49..5ae9078 100644
--- a/ui/suite/tasks/tasks.js
+++ b/ui/suite/tasks/tasks.js
@@ -2196,7 +2196,7 @@ function addTaskCardToList(taskId, title, status) {
       </div>
       <div class="task-card-meta">
         <span class="task-card-status ${statusClass}">${statusText}</span>
-        <span class="task-card-priority">normal</span>
+        <span class="task-card-priority">medium</span>
       </div>
       <div class="task-card-progress">
         <div class="task-progress-bar">