diff --git a/ui/suite/calendar/calendar.html b/ui/suite/calendar/calendar.html
index 5200867..b241b11 100644
--- a/ui/suite/calendar/calendar.html
+++ b/ui/suite/calendar/calendar.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="calendar/calendar.css" />
+<link rel="stylesheet" href="/suite/calendar/calendar.css" />
 
 <!-- Calendar - Event Management -->
 <div class="calendar-container" id="calendar-app">
diff --git a/ui/suite/chat/chat.html b/ui/suite/chat/chat.html
index 6334dfa..ce232ee 100644
--- a/ui/suite/chat/chat.html
+++ b/ui/suite/chat/chat.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="chat/chat.css" />
+<link rel="stylesheet" href="/suite/chat/chat.css" />
 
 <div class="chat-layout" id="chat-app">
     <main id="messages"></main>
diff --git a/ui/suite/drive/drive.html b/ui/suite/drive/drive.html
index 1543a91..57c1a47 100644
--- a/ui/suite/drive/drive.html
+++ b/ui/suite/drive/drive.html
@@ -1,5 +1,5 @@
 <!-- Drive - File Management v1.0 -->
-<link rel="stylesheet" href="drive/drive.css" />
+<link rel="stylesheet" href="/suite/drive/drive.css" />
 
 <div class="drive-container" id="drive-app">
     <!-- Sidebar -->
@@ -348,4 +348,4 @@
 <!-- Context Menu (dynamically populated by JS) -->
 <div id="context-menu" class="context-menu hidden"></div>
 
-<script src="drive/drive.js"></script>
+<script src="/suite/drive/drive.js"></script>
diff --git a/ui/suite/mail/mail.html b/ui/suite/mail/mail.html
index 3e226b1..968d7e6 100644
--- a/ui/suite/mail/mail.html
+++ b/ui/suite/mail/mail.html
@@ -1343,5 +1343,5 @@
     </div>
 </dialog>
 
-<link rel="stylesheet" href="mail/mail.css" />
-<script src="mail/mail.js"></script>
+<link rel="stylesheet" href="/suite/mail/mail.css" />
+<script src="/suite/mail/mail.js"></script>
diff --git a/ui/suite/tasks/tasks.html b/ui/suite/tasks/tasks.html
index 2ca707f..e7538ae 100644
--- a/ui/suite/tasks/tasks.html
+++ b/ui/suite/tasks/tasks.html
@@ -1,304 +1,4 @@
-<link rel="stylesheet" href="tasks/tasks.css" />
-
-<!-- =============================================================================
-     TASKS APP - Autonomous Task Management
-     Respects Theme Manager - No hardcoded theme
-     ============================================================================= -->
-
-<div class="tasks-app">
-    <!-- Hidden element to load stats on page load -->
-    <div
-        hx-get="/api/ui/tasks/stats"
-        hx-trigger="load, taskCreated from:body"
-        hx-swap="innerHTML"
-        style="display: none"
-    ></div>
-
-    <!-- Status Filter Pills Row -->
-    <div class="status-filter-row">
-        <button
-            class="filter-pill"
-            data-filter="complete"
-            hx-get="/api/ui/tasks?filter=complete"
-            hx-target="#task-list"
-            hx-swap="innerHTML"
-        >
-            <span class="pill-icon">✓</span>
-            <span class="pill-label" data-i18n="tasks-completed">Complete</span>
-            <span class="pill-count" id="count-complete">-</span>
-        </button>
-        <button
-            class="filter-pill active"
-            data-filter="all"
-            hx-get="/api/ui/tasks?filter=all"
-            hx-target="#task-list"
-            hx-swap="innerHTML"
-        >
-            <span class="pill-icon">📋</span>
-            <span class="pill-label" data-i18n="tasks-all">All Tasks</span>
-            <span class="pill-count" id="count-all">-</span>
-        </button>
-        <button
-            class="filter-pill"
-            data-filter="active"
-            hx-get="/api/ui/tasks?filter=active"
-            hx-target="#task-list"
-            hx-swap="innerHTML"
-        >
-            <span class="pill-icon">⚡</span>
-            <span class="pill-label" data-i18n="tasks-active"
-                >Active Intents</span
-            >
-            <span class="pill-count" id="count-active">-</span>
-        </button>
-        <button
-            class="filter-pill"
-            data-filter="awaiting"
-            hx-get="/api/ui/tasks?filter=awaiting"
-            hx-target="#task-list"
-            hx-swap="innerHTML"
-        >
-            <span class="pill-icon">⏳</span>
-            <span class="pill-label" data-i18n="tasks-awaiting"
-                >Awaiting Decision</span
-            >
-            <span class="pill-count" id="count-awaiting">-</span>
-        </button>
-        <button
-            class="filter-pill"
-            data-filter="paused"
-            hx-get="/api/ui/tasks?filter=paused"
-            hx-target="#task-list"
-            hx-swap="innerHTML"
-        >
-            <span class="pill-icon">⏸</span>
-            <span class="pill-label" data-i18n="tasks-paused">Paused</span>
-            <span class="pill-count" id="count-paused">-</span>
-        </button>
-        <button
-            class="filter-pill"
-            data-filter="blocked"
-            hx-get="/api/ui/tasks?filter=blocked"
-            hx-target="#task-list"
-            hx-swap="innerHTML"
-        >
-            <span class="pill-icon">⚠</span>
-            <span class="pill-label" data-i18n="tasks-blocked"
-                >Blocked/Issues</span
-            >
-            <span class="pill-count" id="count-blocked">-</span>
-        </button>
-        <div class="time-saved-badge">
-            <span class="time-label" data-i18n="tasks-time-saved"
-                >Active Time Saved:</span
-            >
-            <span class="time-value" id="time-saved-value">-</span>
-        </div>
-    </div>
-
-    <!-- Quick Intent Input -->
-    <div class="quick-intent-bar">
-        <div class="intent-input-wrapper">
-            <input
-                type="text"
-                id="quick-intent-input"
-                name="intent"
-                class="quick-intent-input"
-                placeholder="What would you like to do? e.g., 'create a CRM app' or 'remind me to call John tomorrow'"
-                data-i18n-placeholder="tasks-input-placeholder"
-                autocomplete="off"
-            />
-            <button
-                id="quick-intent-btn"
-                class="btn-create-run"
-                hx-post="/api/ui/autotask/create"
-                hx-ext="json-enc"
-                hx-include="#quick-intent-input"
-                hx-target="#intent-result-hidden"
-                hx-swap="none"
-                hx-indicator="#intent-spinner"
-                hx-timeout="300000"
-            >
-                <span class="btn-text">Create & Run</span>
-                <span class="spinner" id="intent-spinner"></span>
-            </button>
-        </div>
-        <div id="intent-result" class="intent-result"></div>
-        <div id="intent-result-hidden" style="display: none"></div>
-    </div>
-
-    <!-- Main Two-Column Layout with Splitter -->
-    <main class="tasks-main">
-        <!-- Left Panel: Task Cards List -->
-        <section class="tasks-list-panel">
-            <div
-                class="tasks-list-scroll"
-                id="task-list"
-                hx-get="/api/ui/tasks?filter=all"
-                hx-trigger="load, taskCreated from:body throttle:2s"
-                hx-swap="innerHTML transition:false"
-            >
-                <!-- Loading state - replaced by HTMX -->
-                <div class="loading-state">
-                    <div class="loading-spinner"></div>
-                    <p>Loading tasks...</p>
-                </div>
-            </div>
-        </section>
-
-        <!-- Splitter -->
-        <div class="tasks-splitter" id="tasks-splitter"></div>
-
-        <!-- Right Panel: Task Detail -->
-        <aside class="task-detail-panel" id="task-detail-panel">
-            <!-- Detail content loaded dynamically -->
-            <div class="detail-empty" id="detail-empty">
-                <div class="empty-icon">📋</div>
-                <h3 class="empty-title">Select a task</h3>
-                <p class="empty-description">
-                    Click on a task from the list to view details
-                </p>
-                <div class="empty-info">
-                    <p>
-                        <strong>Bot Database:</strong> All apps share the same
-                        database tables.
-                    </p>
-                    <p>
-                        <strong>Shared Resources:</strong> Schedulers, tools,
-                        and monitors work across all apps.
-                    </p>
-                </div>
-            </div>
-
-            <!-- Dynamic detail content -->
-            <div
-                id="task-detail-content"
-                style="display: none"
-                hx-get=""
-                hx-trigger="taskSelected from:body"
-                hx-swap="innerHTML"
-            >
-                <!-- Loaded via HTMX when task selected -->
-            </div>
-        </aside>
-    </main>
-</div>
-
-<!-- Floating Progress Panel - Shows live task generation progress -->
-<div
-    class="floating-progress-panel"
-    id="floating-progress"
-    style="display: none"
->
-    <div class="floating-progress-header">
-        <div class="floating-progress-title">
-            <span class="progress-dot"></span>
-            <span id="floating-task-name">Processing...</span>
-        </div>
-        <div class="floating-progress-actions">
-            <button class="btn-minimize" onclick="minimizeFloatingProgress()">
-                —
-            </button>
-            <button class="btn-close-float" onclick="closeFloatingProgress()">
-                ×
-            </button>
-        </div>
-    </div>
-    <div class="floating-progress-body">
-        <div class="floating-progress-bar">
-            <div
-                class="floating-progress-fill"
-                id="floating-progress-fill"
-                style="width: 0%"
-            ></div>
-        </div>
-        <div class="floating-progress-info">
-            <span id="floating-progress-step">Starting...</span>
-            <span id="floating-progress-percent">0%</span>
-        </div>
-        <div class="floating-progress-log" id="floating-progress-log">
-            <!-- Live log entries appear here -->
-        </div>
-        <div class="floating-llm-terminal" id="floating-llm-terminal">
-            <!-- LLM streaming output appears here -->
-        </div>
-    </div>
-</div>
-
-<!-- Toast Container -->
-<div class="toast-container" id="toast-container"></div>
-
-<!-- New Intent Modal -->
-<div class="modal" id="new-intent-modal" style="display: none">
-    <div class="modal-backdrop" onclick="closeNewIntentModal()"></div>
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3>Create New Intent</h3>
-            <button class="btn-close" onclick="closeNewIntentModal()">×</button>
-        </div>
-        <div class="modal-body">
-            <form id="new-intent-form">
-                <div class="form-group">
-                    <label for="intent-text"
-                        >What would you like to accomplish?</label
-                    >
-                    <textarea
-                        id="intent-text"
-                        name="intent"
-                        rows="4"
-                        placeholder="Describe what you want to create or automate..."
-                    ></textarea>
-                </div>
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="intent-priority">Priority</label>
-                        <select id="intent-priority" name="priority">
-                            <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">
-                        <label for="intent-mode">Execution Mode</label>
-                        <select id="intent-mode" name="mode">
-                            <option value="auto">Automatic</option>
-                            <option value="supervised">Supervised</option>
-                            <option value="manual">Manual Approval</option>
-                        </select>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div class="modal-footer">
-            <button class="btn-secondary" onclick="closeNewIntentModal()">
-                Cancel
-            </button>
-            <button class="btn-primary" onclick="submitNewIntent()">
-                Create & Run
-            </button>
-        </div>
-    </div>
-</div>
-
-<!-- Decision Modal -->
-<div class="modal" id="decision-modal" style="display: none">
-    <div class="modal-backdrop" onclick="closeDecisionModal()"></div>
-    <div class="modal-content modal-lg">
-        <div class="modal-header">
-            <h3>Make Decision</h3>
-            <button class="btn-close" onclick="closeDecisionModal()">×</button>
-        </div>
-        <div class="modal-body">
-            <div class="decision-question" id="decision-question">
-                <h4>Decision Required</h4>
-                <p>Loading decision details...</p>
-            </div>
-            <div class="decision-options" id="decision-options">
-                <!-- Options loaded dynamically -->
-            </div>
-        </div>
-        <div class="modal-footer">
+<div class="modal-footer">
             <button class="btn-secondary" onclick="closeDecisionModal()">
                 Cancel
             </button>
@@ -312,4 +12,4 @@
     </div>
 </div>
 
-<link rel="stylesheet" href="tasks/tasks.css" />
+<script src="/suite/tasks/tasks.js"></script>