diff --git a/ui/suite/desktop.html b/ui/suite/desktop.html
index cc6caf0..a5bc768 100644
--- a/ui/suite/desktop.html
+++ b/ui/suite/desktop.html
@@ -156,21 +156,21 @@
                 <div class="panel-section">
                     <div class="desktop-icons-container">
                         
-                        <div class="desktop-icon" data-app-id="vibe" data-app-title="Mantis (Vibe)" hx-get="/suite/chat/chat.html" hx-swap="none">
+                        <div class="desktop-icon" data-app-id="vibe" data-app-title="Vibe" hx-get="/suite/partials/vibe.html" hx-swap="none">
                             <div class="app-icon">
                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                             </div>
-                            <span class="desktop-icon-label">Mantis</span>
+                            <span class="desktop-icon-label">Vibe</span>
                         </div>
 
-                        <div class="desktop-icon" data-app-id="tasks" data-app-title="Tasks" hx-get="/suite/tasks/tasks.html" hx-swap="none">
+                        <div class="desktop-icon" data-app-id="tasks" data-app-title="Tasks" hx-get="/suite/partials/tasks.html" hx-swap="none">
                             <div class="app-icon">
                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="desktop-icon-label">Tasks</span>
                         </div>
                         
-                        <div class="desktop-icon" data-app-id="chat" data-app-title="Chat" hx-get="/suite/chat/chat.html" hx-swap="none">
+                        <div class="desktop-icon" data-app-id="chat" data-app-title="Chat" hx-get="/suite/partials/chat.html" hx-swap="none">
                             <div class="app-icon">
                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
diff --git a/ui/suite/tasks/tasks.html b/ui/suite/tasks/tasks.html
index e7538ae..816720a 100644
--- a/ui/suite/tasks/tasks.html
+++ b/ui/suite/tasks/tasks.html
@@ -1,4 +1,305 @@
-<div class="modal-footer">
+<link rel="stylesheet" href="/suite/tasks/tasks-scoped.css" />
+<script src="/suite/tasks/tasks-scoped.js"></script>
+
+<!-- =============================================================================
+     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:div"
+        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="closest .window-body #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="closest .window-body #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="closest .window-body #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="closest .window-body #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="closest .window-body #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="closest .window-body #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="closest .window-body #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:div 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:div"
+                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-div">
+        <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-div">
+            <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-div">
+            <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">
             <button class="btn-secondary" onclick="closeDecisionModal()">
                 Cancel
             </button>
@@ -12,4 +313,5 @@
     </div>
 </div>
 
-<script src="/suite/tasks/tasks.js"></script>
+<link rel="stylesheet" href="/suite/tasks/tasks-scoped.css" />
+<script src="/suite/tasks/tasks-scoped.js"></script>