From 4a3eb0cc4fde24be11a1be8ddaeb1a4e52d866c3 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Tue, 30 Dec 2025 22:42:54 -0300
Subject: [PATCH] Fix tasks UI and add WebSocket proxy for task progress

Tasks UI:
- Add proper CSS for task cards with status-based colors
- Add task detail panel CSS for header, progress, sections
- Remove duplicate empty state div
- Add All Tasks filter pill
- Fix updateFilterCounts to use /api/tasks/stats/json
- Remove fake demo agent activity simulation
- Add detailed console logging for WebSocket debugging
- Update floating progress panel with terminal-style metrics

WebSocket proxy:
- Add /ws/task-progress proxy route without required params
- Add handle_task_progress_ws_proxy for task progress WebSocket
- Support optional task_id filtering
---
 src/ui_server/mod.rs         |  146 +-
 ui/suite/drive/drive.css     |  624 +++++++-
 ui/suite/drive/drive.html    |  384 ++---
 ui/suite/drive/drive.js      | 1336 +++++++++++++++--
 ui/suite/drive/index.html    |   11 +-
 ui/suite/index.html          |    2 +-
 ui/suite/tasks/autotask.css  | 2556 +++++++++++++++++++------------
 ui/suite/tasks/autotask.html |  905 ++++++-----
 ui/suite/tasks/autotask.js   |  861 ++++++++++-
 ui/suite/tasks/tasks.css     | 2737 ++++++++++++++++++++--------------
 ui/suite/tasks/tasks.html    | 1286 ++++++----------
 ui/suite/tasks/tasks.js      |  476 +++++-
 12 files changed, 7482 insertions(+), 3842 deletions(-)

diff --git a/src/ui_server/mod.rs b/src/ui_server/mod.rs
index 525e7c5..efe7913 100644
--- a/src/ui_server/mod.rs
+++ b/src/ui_server/mod.rs
@@ -244,6 +244,13 @@ struct WsQuery {
     user_id: String,
 }
 
+#[derive(Debug, Default, Deserialize)]
+struct OptionalWsQuery {
+    session_id: Option<String>,
+    user_id: Option<String>,
+    task_id: Option<String>,
+}
+
 async fn ws_proxy(
     ws: WebSocketUpgrade,
     State(state): State<AppState>,
@@ -252,6 +259,140 @@ async fn ws_proxy(
     ws.on_upgrade(move |socket| handle_ws_proxy(socket, state, params))
 }
 
+async fn ws_task_progress_proxy(
+    ws: WebSocketUpgrade,
+    State(state): State<AppState>,
+    Query(params): Query<OptionalWsQuery>,
+) -> impl IntoResponse {
+    ws.on_upgrade(move |socket| handle_task_progress_ws_proxy(socket, state, params))
+}
+
+async fn handle_task_progress_ws_proxy(
+    client_socket: WebSocket,
+    state: AppState,
+    params: OptionalWsQuery,
+) {
+    let mut backend_url = format!(
+        "{}/ws/task-progress",
+        state
+            .client
+            .base_url()
+            .replace("https://", "wss://")
+            .replace("http://", "ws://"),
+    );
+
+    if let Some(task_id) = &params.task_id {
+        backend_url = format!("{}/{}", backend_url, task_id);
+    }
+
+    info!("Proxying task-progress WebSocket to: {backend_url}");
+
+    let Ok(tls_connector) = native_tls::TlsConnector::builder()
+        .danger_accept_invalid_certs(true)
+        .danger_accept_invalid_hostnames(true)
+        .build()
+    else {
+        error!("Failed to build TLS connector for task-progress");
+        return;
+    };
+
+    let connector = tokio_tungstenite::Connector::NativeTls(tls_connector);
+
+    let backend_result =
+        connect_async_tls_with_config(&backend_url, None, false, Some(connector)).await;
+
+    let backend_socket = match backend_result {
+        Ok((socket, _)) => socket,
+        Err(e) => {
+            error!("Failed to connect to backend task-progress WebSocket: {e}");
+            return;
+        }
+    };
+
+    info!("Connected to backend task-progress WebSocket");
+
+    let (mut client_tx, mut client_rx) = client_socket.split();
+    let (mut backend_tx, mut backend_rx) = backend_socket.split();
+
+    let client_to_backend = async {
+        while let Some(msg) = client_rx.next().await {
+            match msg {
+                Ok(AxumMessage::Text(text)) => {
+                    if backend_tx
+                        .send(TungsteniteMessage::Text(text))
+                        .await
+                        .is_err()
+                    {
+                        break;
+                    }
+                }
+                Ok(AxumMessage::Binary(data)) => {
+                    if backend_tx
+                        .send(TungsteniteMessage::Binary(data))
+                        .await
+                        .is_err()
+                    {
+                        break;
+                    }
+                }
+                Ok(AxumMessage::Ping(data)) => {
+                    if backend_tx
+                        .send(TungsteniteMessage::Ping(data))
+                        .await
+                        .is_err()
+                    {
+                        break;
+                    }
+                }
+                Ok(AxumMessage::Pong(data)) => {
+                    if backend_tx
+                        .send(TungsteniteMessage::Pong(data))
+                        .await
+                        .is_err()
+                    {
+                        break;
+                    }
+                }
+                Ok(AxumMessage::Close(_)) | Err(_) => break,
+            }
+        }
+    };
+
+    let backend_to_client = async {
+        while let Some(msg) = backend_rx.next().await {
+            match msg {
+                Ok(TungsteniteMessage::Text(text)) => {
+                    if client_tx.send(AxumMessage::Text(text)).await.is_err() {
+                        break;
+                    }
+                }
+                Ok(TungsteniteMessage::Binary(data)) => {
+                    if client_tx.send(AxumMessage::Binary(data)).await.is_err() {
+                        break;
+                    }
+                }
+                Ok(TungsteniteMessage::Ping(data)) => {
+                    if client_tx.send(AxumMessage::Ping(data)).await.is_err() {
+                        break;
+                    }
+                }
+                Ok(TungsteniteMessage::Pong(data)) => {
+                    if client_tx.send(AxumMessage::Pong(data)).await.is_err() {
+                        break;
+                    }
+                }
+                Ok(TungsteniteMessage::Close(_)) | Err(_) => break,
+                Ok(_) => {}
+            }
+        }
+    };
+
+    tokio::select! {
+        () = client_to_backend => info!("Task-progress client connection closed"),
+        () = backend_to_client => info!("Task-progress backend connection closed"),
+    }
+}
+
 #[allow(clippy::too_many_lines)]
 async fn handle_ws_proxy(client_socket: WebSocket, state: AppState, params: WsQuery) {
     let backend_url = format!(
@@ -374,7 +515,10 @@ async fn handle_ws_proxy(client_socket: WebSocket, state: AppState, params: WsQu
 }
 
 fn create_ws_router() -> Router<AppState> {
-    Router::new().fallback(any(ws_proxy))
+    Router::new()
+        .route("/task-progress", get(ws_task_progress_proxy))
+        .route("/task-progress/{task_id}", get(ws_task_progress_proxy))
+        .fallback(any(ws_proxy))
 }
 
 fn create_apps_router() -> Router<AppState> {
diff --git a/ui/suite/drive/drive.css b/ui/suite/drive/drive.css
index 78cb916..cd93146 100644
--- a/ui/suite/drive/drive.css
+++ b/ui/suite/drive/drive.css
@@ -1,4 +1,4 @@
-/* Drive Module Styles */
+/* Drive Module Styles v1.0 */
 
 .drive-container {
     display: flex;
@@ -75,6 +75,12 @@
     color: var(--text-secondary);
 }
 
+.storage-detail {
+    font-size: 11px;
+    color: var(--text-secondary);
+    margin-top: 4px;
+}
+
 /* Drive Main */
 .drive-main {
     flex: 1;
@@ -295,7 +301,7 @@
 
 .file-list-header {
     display: grid;
-    grid-template-columns: 1fr 120px 120px 80px;
+    grid-template-columns: 1fr 120px 100px 80px;
     gap: 16px;
     padding: 12px 20px;
     border-bottom: 1px solid var(--border);
@@ -305,31 +311,66 @@
     text-transform: uppercase;
 }
 
-.file-list-item {
+.file-list-header .file-col {
+    display: flex;
+    align-items: center;
+}
+
+.file-list-item,
+.drive-file-item {
     display: grid;
-    grid-template-columns: 1fr 120px 120px 80px;
+    grid-template-columns: 1fr 120px 100px 80px;
     gap: 16px;
     padding: 12px 20px;
     border-bottom: 1px solid var(--border);
     cursor: pointer;
     transition: background 0.15s;
+    align-items: center;
 }
 
-.file-list-item:hover {
+.file-list-item:hover,
+.drive-file-item:hover {
     background: var(--surface-hover);
 }
 
-.file-list-name {
+.file-list-item.selected,
+.drive-file-item.selected {
+    background: var(--primary-light, rgba(99, 102, 241, 0.1));
+}
+
+.file-list-name,
+.file-col.file-name-col {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;
+    min-width: 0;
 }
 
-.file-list-name svg {
+.file-list-name svg,
+.file-col.file-name-col svg {
     flex-shrink: 0;
 }
 
+.file-col.file-name-col span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.file-col.file-modified-col,
+.file-col.file-size-col {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.file-col.file-actions-col {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    justify-content: flex-end;
+}
+
 /* Upload Zone */
 .upload-zone {
     border: 2px dashed var(--border);
@@ -361,39 +402,579 @@
     color: var(--text-secondary);
 }
 
+/* Search Box */
+.drive-toolbar-center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    padding: 0 20px;
+}
+
+.search-box {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+}
+
+.search-box svg {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-secondary);
+}
+
+.search-box input {
+    width: 100%;
+    padding: 8px 12px 8px 40px;
+    border: 1px solid var(--border, #2a2a3a);
+    border-radius: 8px;
+    background: var(--surface, #12121a);
+    color: var(--text, #ffffff);
+    font-size: 14px;
+}
+
+.search-box input:focus {
+    outline: none;
+    border-color: var(--primary, #3b82f6);
+}
+
+.search-box input::placeholder {
+    color: var(--text-secondary, #6b6b80);
+}
+
+/* Selection Bar */
+.selection-bar {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px 20px;
+    background: var(--surface, #12121a);
+    border: 1px solid var(--border, #2a2a3a);
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    z-index: 100;
+}
+
+.selection-count {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text, #ffffff);
+}
+
+.selection-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-secondary, #6b6b80);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.action-btn:hover {
+    background: var(--surface-hover, rgba(255, 255, 255, 0.1));
+    color: var(--text, #ffffff);
+}
+
+.action-btn.danger:hover {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+}
+
+.close-selection {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-secondary, #6b6b80);
+    cursor: pointer;
+    margin-left: 8px;
+}
+
+.close-selection:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+/* Loading State */
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: var(--text-secondary, #6b6b80);
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border, #2a2a3a);
+    border-top-color: var(--primary, #3b82f6);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 16px;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Empty State */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    text-align: center;
+    color: var(--text-secondary, #6b6b80);
+}
+
+.empty-state svg {
+    margin-bottom: 20px;
+    opacity: 0.5;
+}
+
+.empty-state h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text, #ffffff);
+    margin-bottom: 8px;
+}
+
+.empty-state p {
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+.empty-state .btn-primary {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 8px;
+    background: var(--primary, #3b82f6);
+    color: white;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.empty-state .btn-primary:hover {
+    opacity: 0.9;
+}
+
+/* Drop Overlay */
+.drop-overlay {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 200;
+}
+
+.drop-overlay.visible {
+    display: flex;
+}
+
+.drop-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 60px;
+    border: 3px dashed var(--primary, #3b82f6);
+    border-radius: 16px;
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--text, #ffffff);
+}
+
+.drop-zone svg {
+    margin-bottom: 16px;
+    color: var(--primary, #3b82f6);
+}
+
+.drop-zone p {
+    font-size: 16px;
+    font-weight: 500;
+}
+
+/* File Checkbox */
+.file-checkbox {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    cursor: pointer;
+    accent-color: var(--primary, #3b82f6);
+}
+
+/* Button Icon Small */
+.btn-icon-sm {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-secondary, #6b6b80);
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.15s;
+}
+
+.btn-icon-sm:hover {
+    background: var(--surface-hover, rgba(255, 255, 255, 0.1));
+    color: var(--text, #ffffff);
+}
+
+/* Drive Container Position Relative for overlay */
+.drive-container {
+    position: relative;
+}
+
+/* Notification Animation */
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Sidebar Actions */
+.drive-sidebar-actions {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.btn-primary-full,
+.btn-secondary-full {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn-primary-full {
+    background: var(--primary, #3b82f6);
+    color: white;
+}
+
+.btn-primary-full:hover {
+    opacity: 0.9;
+}
+
+.btn-secondary-full {
+    background: var(--surface-hover, rgba(255, 255, 255, 0.1));
+    color: var(--text, #ffffff);
+    border: 1px solid var(--border, #2a2a3a);
+}
+
+.btn-secondary-full:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+/* File Card Info */
+.file-card-info {
+    text-align: center;
+}
+
+.file-card-meta {
+    font-size: 11px;
+    color: var(--text-secondary, #6b6b80);
+    margin-top: 4px;
+    color: var(--text-secondary);
+}
+
 /* Context Menu */
 .context-menu {
     position: fixed;
     background: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-    min-width: 180px;
+    border-radius: 12px;
+    box-shadow:
+        0 12px 40px rgba(0, 0, 0, 0.2),
+        0 4px 12px rgba(0, 0, 0, 0.1);
+    min-width: 200px;
     z-index: 1000;
+    padding: 6px;
+    backdrop-filter: blur(12px);
+    animation: contextMenuIn 0.15s ease-out;
+    transform-origin: top left;
+}
+
+@keyframes contextMenuIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.context-menu.hidden {
+    display: none !important;
 }
 
 .context-menu-item {
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 10px 16px;
+    padding: 10px 14px;
     font-size: 14px;
+    font-weight: 500;
     cursor: pointer;
-    transition: background 0.15s;
+    transition: all 0.15s ease;
+    border-radius: 8px;
+    color: var(--text);
+}
+
+.context-menu-item svg {
+    flex-shrink: 0;
+    opacity: 0.7;
+    transition:
+        opacity 0.15s ease,
+        transform 0.15s ease;
 }
 
 .context-menu-item:hover {
-    background: var(--surface-hover);
+    background: linear-gradient(
+        135deg,
+        var(--primary-light, rgba(99, 102, 241, 0.1)) 0%,
+        var(--surface-hover, rgba(99, 102, 241, 0.05)) 100%
+    );
+    color: var(--primary, #6366f1);
+}
+
+.context-menu-item:hover svg {
+    opacity: 1;
+    transform: scale(1.1);
+    stroke: var(--primary, #6366f1);
+}
+
+.context-menu-item:active {
+    transform: scale(0.98);
 }
 
 .context-menu-item.danger {
-    color: var(--error);
+    color: var(--error, #ef4444);
+}
+
+.context-menu-item.danger svg {
+    stroke: var(--error, #ef4444);
+}
+
+.context-menu-item.danger:hover {
+    background: linear-gradient(
+        135deg,
+        rgba(239, 68, 68, 0.15) 0%,
+        rgba(239, 68, 68, 0.05) 100%
+    );
+    color: var(--error, #ef4444);
+}
+
+.context-menu-item.danger:hover svg {
+    stroke: var(--error, #ef4444);
 }
 
 .context-menu-divider {
     height: 1px;
-    background: var(--border);
-    margin: 4px 0;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--border) 20%,
+        var(--border) 80%,
+        transparent 100%
+    );
+    margin: 6px 8px;
+}
+
+/* Inline Editor Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    padding: 20px;
+}
+
+.modal-content {
+    background: var(--surface, #12121a);
+    border-radius: 12px;
+    border: 1px solid var(--border, #2a2a3a);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    max-width: 100%;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.editor-modal-content {
+    width: 90vw;
+    height: 85vh;
+    max-width: 1200px;
+}
+
+.editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border, #2a2a3a);
+    background: var(--bg-secondary, #0d0d12);
+    border-radius: 12px 12px 0 0;
+}
+
+.editor-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.editor-icon {
+    font-size: 18px;
+}
+
+.editor-filename {
+    color: var(--text, #ffffff);
+}
+
+.editor-status {
+    color: var(--warning, #f59e0b);
+    font-size: 12px;
+    margin-left: 8px;
+}
+
+.editor-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.editor-body {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+}
+
+.editor-textarea {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    border: none;
+    background: var(--bg, #0a0a0f);
+    color: var(--text, #ffffff);
+    font-family: "JetBrains Mono", "Fira Code", "Monaco", "Consolas", monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    resize: none;
+    outline: none;
+    tab-size: 2;
+}
+
+.editor-textarea:focus {
+    outline: none;
+}
+
+.editor-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    border-top: 1px solid var(--border, #2a2a3a);
+    background: var(--bg-secondary, #0d0d12);
+    border-radius: 0 0 12px 12px;
+    font-size: 12px;
+    color: var(--text-secondary, #6b6b80);
+}
+
+.editor-info {
+    display: flex;
+    gap: 16px;
+}
+
+/* Button styles for editor */
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    background: var(--primary, #3b82f6);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.btn-primary:hover {
+    background: var(--primary-hover, #2563eb);
+}
+
+.btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    background: transparent;
+    color: var(--text-secondary, #6b6b80);
+    border: 1px solid var(--border, #2a2a3a);
+    border-radius: 6px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn-secondary:hover {
+    background: var(--surface-hover, #1a1a24);
+    color: var(--text, #ffffff);
 }
 
 /* Responsive */
@@ -407,4 +988,15 @@
         padding: 12px;
         gap: 12px;
     }
+
+    .editor-modal-content {
+        width: 100vw;
+        height: 100vh;
+        border-radius: 0;
+    }
+
+    .editor-header,
+    .editor-footer {
+        border-radius: 0;
+    }
 }
diff --git a/ui/suite/drive/drive.html b/ui/suite/drive/drive.html
index de77dd4..bf7dd4a 100644
--- a/ui/suite/drive/drive.html
+++ b/ui/suite/drive/drive.html
@@ -1,4 +1,4 @@
-<!-- Drive - File Management -->
+<!-- Drive - File Management v1.0 -->
 <link rel="stylesheet" href="drive/drive.css" />
 
 <div class="drive-container" id="drive-app">
@@ -22,11 +22,7 @@
 
         <!-- Quick Actions -->
         <div class="drive-sidebar-actions">
-            <button
-                class="btn-primary-full"
-                id="upload-btn"
-                onclick="uploadFile()"
-            >
+            <button class="btn-primary-full" id="upload-btn">
                 <svg
                     width="16"
                     height="16"
@@ -41,11 +37,7 @@
                 </svg>
                 <span>Upload</span>
             </button>
-            <button
-                class="btn-secondary-full"
-                id="new-folder-btn"
-                onclick="createFolder()"
-            >
+            <button class="btn-secondary-full" id="new-folder-btn">
                 <svg
                     width="16"
                     height="16"
@@ -147,9 +139,14 @@
         <!-- Storage -->
         <div class="drive-storage">
             <div class="storage-bar">
-                <div class="storage-fill" style="width: 62%"></div>
+                <div
+                    class="storage-fill"
+                    id="storage-fill"
+                    style="width: 0%"
+                ></div>
             </div>
-            <div class="storage-text">12.4 GB of 20 GB used</div>
+            <div class="storage-text" id="storage-used">Loading storage...</div>
+            <div class="storage-detail" id="storage-detail"></div>
         </div>
     </aside>
 
@@ -158,15 +155,40 @@
         <!-- Toolbar -->
         <div class="drive-toolbar">
             <div class="drive-toolbar-left">
+                <select
+                    id="bucket-selector"
+                    class="bucket-selector"
+                    style="display: none"
+                >
+                    <!-- Populated by JavaScript -->
+                </select>
                 <div class="drive-breadcrumb">
                     <button
                         class="breadcrumb-item"
-                        onclick="navigateTo('root')"
+                        onclick="DriveModule.loadFiles('')"
                     >
                         My Drive
                     </button>
-                    <span class="breadcrumb-sep">/</span>
-                    <span class="breadcrumb-current">Projects</span>
+                </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-right">
@@ -213,262 +235,130 @@
             </div>
         </div>
 
-        <!-- File List -->
+        <!-- File Content Area - Populated by JavaScript -->
         <div class="drive-content" id="drive-content">
-            <!-- List Header -->
-            <div class="drive-list-header">
-                <div class="file-col file-name-col">Name</div>
-                <div class="file-col file-modified-col">Modified</div>
-                <div class="file-col file-size-col">Size</div>
-                <div class="file-col file-actions-col"></div>
+            <div class="loading-state">
+                <div class="spinner"></div>
+                <p>Loading files...</p>
             </div>
+        </div>
 
-            <!-- Folders -->
-            <div
-                class="drive-file-item folder"
-                data-id="1"
-                onclick="openFolder(this)"
-                hx-get="/api/drive/folder/1"
-                hx-target="#drive-content"
-                hx-swap="innerHTML"
+        <!-- Selection Bar -->
+        <div class="selection-bar" id="selection-bar" style="display: none">
+            <span class="selection-count"
+                ><span id="selected-count">0</span> selected</span
             >
-                <div class="file-col file-name-col">
+            <div class="selection-actions">
+                <button
+                    class="action-btn"
+                    onclick="DriveModule.copySelected()"
+                    title="Copy"
+                >
                     <svg
-                        width="20"
-                        height="20"
+                        width="16"
+                        height="16"
                         viewBox="0 0 24 24"
-                        fill="#5f6368"
-                        stroke="none"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
                     >
+                        <rect
+                            x="9"
+                            y="9"
+                            width="13"
+                            height="13"
+                            rx="2"
+                            ry="2"
+                        ></rect>
                         <path
-                            d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
-                        />
+                            d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+                        ></path>
                     </svg>
-                    <span>Documents</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 15, 2024</div>
-                <div class="file-col file-size-col">—</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
-            </div>
-
-            <div
-                class="drive-file-item folder"
-                data-id="2"
-                onclick="openFolder(this)"
-            >
-                <div class="file-col file-name-col">
+                </button>
+                <button
+                    class="action-btn"
+                    onclick="DriveModule.cutSelected()"
+                    title="Cut"
+                >
                     <svg
-                        width="20"
-                        height="20"
+                        width="16"
+                        height="16"
                         viewBox="0 0 24 24"
-                        fill="#5f6368"
-                        stroke="none"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
                     >
-                        <path
-                            d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
-                        />
+                        <circle cx="6" cy="6" r="3"></circle>
+                        <circle cx="6" cy="18" r="3"></circle>
+                        <line x1="20" y1="4" x2="8.12" y2="15.88"></line>
+                        <line x1="14.47" y1="14.48" x2="20" y2="20"></line>
+                        <line x1="8.12" y1="8.12" x2="12" y2="12"></line>
                     </svg>
-                    <span>Images</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 14, 2024</div>
-                <div class="file-col file-size-col">—</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
-            </div>
-
-            <div
-                class="drive-file-item folder"
-                data-id="3"
-                onclick="openFolder(this)"
-            >
-                <div class="file-col file-name-col">
+                </button>
+                <button
+                    class="action-btn danger"
+                    onclick="DriveModule.deleteSelected()"
+                    title="Delete"
+                >
                     <svg
-                        width="20"
-                        height="20"
+                        width="16"
+                        height="16"
                         viewBox="0 0 24 24"
-                        fill="#5f6368"
-                        stroke="none"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
                     >
+                        <polyline points="3 6 5 6 21 6"></polyline>
                         <path
-                            d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
-                        />
+                            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"
+                        ></path>
                     </svg>
-                    <span>Source Code</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 12, 2024</div>
-                <div class="file-col file-size-col">—</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
-            </div>
-
-            <!-- Files -->
-            <div
-                class="drive-file-item"
-                data-id="10"
-                onclick="selectFile(this)"
-            >
-                <div class="file-col file-name-col">
+                </button>
+                <button
+                    class="close-selection"
+                    onclick="DriveModule.clearSelection()"
+                    title="Clear selection"
+                >
                     <svg
-                        width="20"
-                        height="20"
+                        width="16"
+                        height="16"
                         viewBox="0 0 24 24"
-                        fill="#ea4335"
-                        stroke="none"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
                     >
-                        <path
-                            d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
-                        />
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
                     </svg>
-                    <span>project-report.pdf</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 15, 2024</div>
-                <div class="file-col file-size-col">2.4 MB</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="Download">⬇</button>
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
-            </div>
-
-            <div
-                class="drive-file-item"
-                data-id="11"
-                onclick="selectFile(this)"
-            >
-                <div class="file-col file-name-col">
-                    <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="#4285f4"
-                        stroke="none"
-                    >
-                        <path
-                            d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
-                        />
-                    </svg>
-                    <span>meeting-notes.docx</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 14, 2024</div>
-                <div class="file-col file-size-col">156 KB</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="Download">⬇</button>
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
-            </div>
-
-            <div
-                class="drive-file-item"
-                data-id="12"
-                onclick="selectFile(this)"
-            >
-                <div class="file-col file-name-col">
-                    <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="#0f9d58"
-                        stroke="none"
-                    >
-                        <path
-                            d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
-                        />
-                    </svg>
-                    <span>analytics-2025.xlsx</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 13, 2024</div>
-                <div class="file-col file-size-col">890 KB</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="Download">⬇</button>
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
-            </div>
-
-            <div
-                class="drive-file-item"
-                data-id="13"
-                onclick="selectFile(this)"
-            >
-                <div class="file-col file-name-col">
-                    <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="#fbbc04"
-                        stroke="none"
-                    >
-                        <path
-                            d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z"
-                        />
-                    </svg>
-                    <span>dashboard-mockup.png</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 12, 2024</div>
-                <div class="file-col file-size-col">1.8 MB</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="Download">⬇</button>
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
-            </div>
-
-            <div
-                class="drive-file-item"
-                data-id="14"
-                onclick="selectFile(this)"
-            >
-                <div class="file-col file-name-col">
-                    <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="#ea4335"
-                        stroke="none"
-                    >
-                        <path
-                            d="M18,4L20,8H17L15,4H13L15,8H12L10,4H8L10,8H7L5,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V4H18Z"
-                        />
-                    </svg>
-                    <span>demo-video.mp4</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 10, 2024</div>
-                <div class="file-col file-size-col">125 MB</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="Download">⬇</button>
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
-            </div>
-
-            <div
-                class="drive-file-item"
-                data-id="15"
-                onclick="selectFile(this)"
-            >
-                <div class="file-col file-name-col">
-                    <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="#5f6368"
-                        stroke="none"
-                    >
-                        <path
-                            d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 10H6v-2h8v2zm4-4H6v-2h12v2z"
-                        />
-                    </svg>
-                    <span>release-v2.0.zip</span>
-                </div>
-                <div class="file-col file-modified-col">Dec 8, 2024</div>
-                <div class="file-col file-size-col">45 MB</div>
-                <div class="file-col file-actions-col">
-                    <button class="btn-icon-sm" title="Download">⬇</button>
-                    <button class="btn-icon-sm" title="More options">⋯</button>
-                </div>
+                </button>
             </div>
         </div>
     </main>
+
+    <!-- Drop Overlay for Drag & Drop -->
+    <div class="drop-overlay" id="drop-overlay">
+        <div class="drop-zone">
+            <svg
+                width="48"
+                height="48"
+                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="17 8 12 3 7 8"></polyline>
+                <line x1="12" y1="3" x2="12" y2="15"></line>
+            </svg>
+            <p>Drop files here to upload</p>
+        </div>
+    </div>
 </div>
 
+<!-- Hidden file input for uploads -->
+<input type="file" id="file-input" multiple style="display: none" />
+
+<!-- Context Menu (dynamically populated by JS) -->
+<div id="context-menu" class="context-menu hidden"></div>
+
 <script src="drive/drive.js"></script>
diff --git a/ui/suite/drive/drive.js b/ui/suite/drive/drive.js
index c34b851..9c3b8cb 100644
--- a/ui/suite/drive/drive.js
+++ b/ui/suite/drive/drive.js
@@ -1,195 +1,1277 @@
-/* Drive Module JavaScript */
+/* Drive Module v1.0 - Full API Integration */
 
 (function () {
   "use strict";
 
-  let selectedFiles = [];
-  let currentPath = "/";
-  let viewMode = "grid";
+  const API_BASE = "/api/files";
 
-  // Global function for onclick handlers in HTML
-  window.selectFile = function (element) {
-    const fileId = element.dataset.id;
-    const isSelected = element.classList.contains("selected");
+  let currentBucket = "";
+  let currentPath = "";
+  let availableBuckets = [];
+  let selectedFiles = new Set();
+  let viewMode = "list";
+  let clipboardFiles = [];
+  let clipboardOperation = null;
+  let retryCount = 0;
+  const MAX_RETRIES = 3;
+  const RETRY_DELAYS = [1000, 3000, 10000]; // Exponential backoff: 1s, 3s, 10s
 
-    // If not holding Ctrl/Cmd, deselect all others first
-    if (!event.ctrlKey && !event.metaKey) {
-      document
-        .querySelectorAll(
-          ".drive-file-item.selected, .file-item.selected, .file-card.selected, .file-list-item.selected",
-        )
-        .forEach((f) => f.classList.remove("selected"));
+  function escapeHtml(str) {
+    if (!str) return "";
+    return String(str)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  function escapeJs(str) {
+    if (!str) return "";
+    return String(str)
+      .replace(/\\/g, "\\\\")
+      .replace(/'/g, "\\'")
+      .replace(/"/g, '\\"');
+  }
+
+  function formatFileSize(bytes) {
+    if (!bytes || bytes === 0) return "0 B";
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + " " + units[i];
+  }
+
+  function formatDate(dateStr) {
+    if (!dateStr) return "";
+    const d = new Date(dateStr);
+    return d.toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  }
+
+  function getFileTypeClass(filename) {
+    const ext = (filename || "").split(".").pop().toLowerCase();
+    const types = {
+      document: ["doc", "docx", "pdf", "txt", "rtf", "odt"],
+      image: ["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp"],
+      video: ["mp4", "avi", "mov", "mkv", "webm"],
+      audio: ["mp3", "wav", "ogg", "flac", "aac"],
+      archive: ["zip", "rar", "7z", "tar", "gz"],
+      code: [
+        "js",
+        "ts",
+        "py",
+        "rs",
+        "go",
+        "java",
+        "c",
+        "cpp",
+        "h",
+        "html",
+        "css",
+        "json",
+        "xml",
+      ],
+    };
+    for (const [type, exts] of Object.entries(types)) {
+      if (exts.includes(ext)) return type;
     }
+    return "file";
+  }
 
-    // Toggle selection on clicked element
-    if (isSelected && (event.ctrlKey || event.metaKey)) {
-      element.classList.remove("selected");
-    } else {
-      element.classList.add("selected");
-    }
+  function getFolderIcon() {
+    return '<svg width="20" height="20" viewBox="0 0 24 24" fill="#5f6368" stroke="none"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>';
+  }
 
-    updateSelectedFiles();
-  };
+  function getFileIcon(filename) {
+    const ext = (filename || "").split(".").pop().toLowerCase();
+    const colors = {
+      pdf: "#ea4335",
+      doc: "#4285f4",
+      docx: "#4285f4",
+      xls: "#0f9d58",
+      xlsx: "#0f9d58",
+      ppt: "#fbbc04",
+      pptx: "#fbbc04",
+    };
+    const color = colors[ext] || "#5f6368";
+    return `<svg width="20" height="20" viewBox="0 0 24 24" fill="${color}" stroke="none"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/></svg>`;
+  }
 
-  function init() {
+  function showNotification(message, type) {
+    const existing = document.querySelector(".drive-notification");
+    if (existing) existing.remove();
+
+    const notification = document.createElement("div");
+    notification.className = `drive-notification notification-${type || "info"}`;
+    notification.textContent = message;
+    notification.style.cssText =
+      "position:fixed;bottom:20px;right:20px;padding:12px 20px;border-radius:8px;background:#333;color:#fff;z-index:9999;animation:slideIn 0.3s ease;";
+
+    if (type === "error") notification.style.background = "#ef4444";
+    if (type === "success") notification.style.background = "#22c55e";
+    if (type === "warning") notification.style.background = "#f59e0b";
+
+    document.body.appendChild(notification);
+    setTimeout(() => notification.remove(), 4000);
+  }
+
+  async function init() {
     bindNavigation();
-    bindFileSelection();
+    bindViewToggle();
     bindDragAndDrop();
     bindContextMenu();
     bindKeyboardShortcuts();
+    bindUploadButton();
+    bindNewFolderButton();
+    bindSearchInput();
+
+    await discoverBuckets();
+    loadStorageInfo();
+    loadFiles();
   }
 
-  function bindNavigation() {
-    document.querySelectorAll(".drive-nav-item").forEach((item) => {
-      item.addEventListener("click", function () {
-        document
-          .querySelectorAll(".drive-nav-item")
-          .forEach((i) => i.classList.remove("active"));
-        this.classList.add("active");
+  async function discoverBuckets() {
+    try {
+      const buckets = await apiRequest("/buckets");
+      availableBuckets = buckets || [];
+      retryCount = 0; // Reset on success
+
+      const gbai = availableBuckets.find((b) => b.is_gbai);
+      if (gbai) {
+        currentBucket = gbai.name;
+      } else if (availableBuckets.length > 0) {
+        currentBucket = availableBuckets[0].name;
+      }
+
+      updateBucketSelector();
+
+      if (!currentBucket) {
+        const content =
+          document.getElementById("drive-content") ||
+          document.getElementById("file-grid");
+        if (content) {
+          content.innerHTML = `<div class="empty-state"><svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><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></svg><h3>No drive storage found</h3><p>Please contact your administrator to set up storage.</p></div>`;
+        }
+      }
+    } catch (err) {
+      console.error("Failed to discover buckets:", err);
+      const content =
+        document.getElementById("drive-content") ||
+        document.getElementById("file-grid");
+      if (content) {
+        const canRetry = retryCount < MAX_RETRIES;
+        const retryMsg = canRetry
+          ? `<button class="btn-primary" onclick="DriveModule.retryWithBackoff()">Retry</button>`
+          : `<p class="text-muted">Max retries reached. Please refresh the page.</p>`;
+        content.innerHTML = `<div class="empty-state"><svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><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></svg><h3>Drive connection error</h3><p>${escapeHtml(err.message)}</p>${retryMsg}</div>`;
+      }
+    }
+  }
+
+  async function retryWithBackoff() {
+    if (retryCount >= MAX_RETRIES) {
+      showNotification(
+        "Max retries reached. Please refresh the page.",
+        "error",
+      );
+      return;
+    }
+
+    const delay =
+      RETRY_DELAYS[retryCount] || RETRY_DELAYS[RETRY_DELAYS.length - 1];
+    retryCount++;
+
+    const content =
+      document.getElementById("drive-content") ||
+      document.getElementById("file-grid");
+    if (content) {
+      content.innerHTML = `<div class="empty-state"><div class="spinner"></div><p>Retrying in ${delay / 1000}s... (attempt ${retryCount}/${MAX_RETRIES})</p></div>`;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, delay));
+    await init();
+  }
+
+  function updateBucketSelector() {
+    const selector = document.getElementById("bucket-selector");
+    if (!selector) return;
+
+    if (availableBuckets.length <= 1) {
+      selector.style.display = "none";
+      return;
+    }
+
+    selector.style.display = "block";
+    selector.innerHTML = availableBuckets
+      .map(
+        (b) =>
+          `<option value="${escapeHtml(b.name)}" ${b.name === currentBucket ? "selected" : ""}>${escapeHtml(b.is_gbai ? b.name.replace(".gbai", "") : b.name)}</option>`,
+      )
+      .join("");
+
+    selector.removeEventListener("change", handleBucketChange);
+    selector.addEventListener("change", handleBucketChange);
+  }
+
+  function handleBucketChange(e) {
+    currentBucket = e.target.value;
+    currentPath = "";
+    loadFiles();
+  }
+
+  async function apiRequest(endpoint, options = {}) {
+    const url = `${API_BASE}${endpoint}`;
+    const defaultHeaders = { "Content-Type": "application/json" };
+
+    try {
+      const response = await fetch(url, {
+        headers: { ...defaultHeaders, ...options.headers },
+        ...options,
+      });
+
+      if (!response.ok) {
+        const error = await response
+          .json()
+          .catch(() => ({ error: response.statusText }));
+        throw new Error(error.error || "Request failed");
+      }
+
+      return response.json();
+    } catch (err) {
+      console.error(`API Error [${endpoint}]:`, err);
+      throw err;
+    }
+  }
+
+  async function loadFiles(path, bucket) {
+    if (path !== undefined) currentPath = path;
+    if (bucket !== undefined) currentBucket = bucket;
+
+    if (!currentBucket) {
+      await discoverBuckets();
+      if (!currentBucket) return;
+    }
+
+    const content =
+      document.getElementById("drive-content") ||
+      document.getElementById("file-grid");
+    if (!content) return;
+
+    content.innerHTML =
+      '<div class="loading-state"><div class="spinner"></div><p>Loading files...</p></div>';
+    updateBreadcrumb();
+
+    try {
+      const params = new URLSearchParams();
+      if (currentBucket) params.set("bucket", currentBucket);
+      if (currentPath) params.set("path", currentPath);
+
+      const files = await apiRequest(`/list?${params.toString()}`);
+      renderFiles(files);
+    } catch (err) {
+      content.innerHTML = `<div class="empty-state"><h3>Failed to load files</h3><p>${escapeHtml(err.message)}</p><button class="btn-primary" onclick="DriveModule.loadFiles()">Retry</button></div>`;
+    }
+  }
+
+  async function loadStorageInfo() {
+    try {
+      const quota = await apiRequest("/quota");
+      const usedEl = document.getElementById("storage-used");
+      const fillEl = document.getElementById("storage-fill");
+      const detailEl = document.getElementById("storage-detail");
+
+      if (usedEl)
+        usedEl.textContent = `${formatFileSize(quota.used_bytes)} of ${formatFileSize(quota.total_bytes)}`;
+      if (fillEl) fillEl.style.width = `${quota.percentage_used || 0}%`;
+      if (detailEl)
+        detailEl.textContent = `${formatFileSize(quota.available_bytes)} available`;
+    } catch (err) {
+      // Silently fail - don't retry storage info, it's not critical
+      console.error("Failed to load storage info:", err);
+    }
+  }
+  function renderFiles(files) {
+    const content =
+      document.getElementById("drive-content") ||
+      document.getElementById("file-grid");
+    if (!content) return;
+
+    if (!files || files.length === 0) {
+      content.innerHTML = `<div class="empty-state"><svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><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"></path></svg><h3>This folder is empty</h3><p>Upload files or create a new folder to get started</p></div>`;
+      return;
+    }
+
+    const folders = files
+      .filter((f) => f.is_dir)
+      .sort((a, b) => a.name.localeCompare(b.name));
+    const regularFiles = files
+      .filter((f) => !f.is_dir)
+      .sort((a, b) => a.name.localeCompare(b.name));
+    const sorted = [...folders, ...regularFiles];
+
+    if (viewMode === "grid") {
+      content.innerHTML = `<div class="file-grid">${sorted.map((f) => renderFileCard(f)).join("")}</div>`;
+    } else {
+      content.innerHTML = `<div class="file-list"><div class="file-list-header"><div class="file-col file-name-col">Name</div><div class="file-col file-modified-col">Modified</div><div class="file-col file-size-col">Size</div><div class="file-col file-actions-col"></div></div>${sorted.map((f) => renderFileRow(f)).join("")}</div>`;
+    }
+
+    bindFileEvents();
+    updateSelectionBar();
+  }
+
+  function renderFileCard(file) {
+    const iconClass = file.is_dir ? "folder" : getFileTypeClass(file.name);
+    const iconSvg = file.is_dir ? getFolderIcon() : getFileIcon(file.name);
+    const sizeText = file.is_dir ? "" : formatFileSize(file.size);
+    const checked = selectedFiles.has(file.path) ? "checked" : "";
+    const selected = selectedFiles.has(file.path) ? "selected" : "";
+
+    return `<div class="file-card ${selected}" data-path="${escapeHtml(file.path)}" data-name="${escapeHtml(file.name)}" data-type="${file.is_dir ? "folder" : "file"}" data-size="${file.size || 0}"><input type="checkbox" class="file-checkbox" ${checked} onchange="DriveModule.toggleSelection('${escapeJs(file.path)}')"><div class="file-card-preview ${iconClass}">${iconSvg}</div><div class="file-card-info"><div class="file-card-name" title="${escapeHtml(file.name)}">${escapeHtml(file.name)}</div><div class="file-card-meta">${sizeText}</div></div></div>`;
+  }
+
+  function renderFileRow(file) {
+    const iconSvg = file.is_dir ? getFolderIcon() : getFileIcon(file.name);
+    const sizeText = file.is_dir ? "—" : formatFileSize(file.size);
+    const modifiedText = file.modified ? formatDate(file.modified) : "—";
+    const checked = selectedFiles.has(file.path) ? "checked" : "";
+    const selected = selectedFiles.has(file.path) ? "selected" : "";
+
+    const downloadIcon = `<svg width="14" height="14" 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>`;
+    const moreIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>`;
+
+    const downloadBtn = !file.is_dir
+      ? `<button class="btn-icon-sm" title="Download" onclick="event.stopPropagation(); DriveModule.downloadFile('${escapeJs(file.path)}')">${downloadIcon}</button>`
+      : "";
+
+    return `<div class="drive-file-item ${file.is_dir ? "folder" : ""} ${selected}" data-path="${escapeHtml(file.path)}" data-name="${escapeHtml(file.name)}" data-type="${file.is_dir ? "folder" : "file"}" data-size="${file.size || 0}"><div class="file-col file-name-col"><input type="checkbox" class="file-checkbox" ${checked} onclick="event.stopPropagation()" onchange="DriveModule.toggleSelection('${escapeJs(file.path)}')">${iconSvg}<span>${escapeHtml(file.name)}</span></div><div class="file-col file-modified-col">${modifiedText}</div><div class="file-col file-size-col">${sizeText}</div><div class="file-col file-actions-col">${downloadBtn}<button class="btn-icon-sm" title="More" onclick="event.stopPropagation(); DriveModule.showContextMenuFor(event, '${escapeJs(file.path)}')">${moreIcon}</button></div></div>`;
+  }
+
+  function bindFileEvents() {
+    document.querySelectorAll(".file-card, .drive-file-item").forEach((el) => {
+      el.addEventListener("click", function (e) {
+        if (
+          e.target.closest(".file-checkbox") ||
+          e.target.closest(".btn-icon-sm")
+        )
+          return;
+        const path = this.dataset.path;
+        const type = this.dataset.type;
+
+        if (e.ctrlKey || e.metaKey) {
+          toggleSelection(path);
+        } else {
+          // Single click just selects, doesn't open
+          toggleSelection(path);
+        }
+      });
+
+      el.addEventListener("dblclick", function (e) {
+        if (e.target.closest(".file-checkbox")) return;
+        const path = this.dataset.path;
+        const type = this.dataset.type;
+        if (type === "folder") {
+          loadFiles(path, currentBucket);
+        } else {
+          openInlineEditor(path);
+        }
       });
     });
   }
 
-  function bindFileSelection() {
-    document.querySelectorAll(".file-card, .file-list-item").forEach((file) => {
-      file.addEventListener("click", function (e) {
-        if (e.ctrlKey || e.metaKey) {
-          this.classList.toggle("selected");
-        } else {
-          document
-            .querySelectorAll(".file-card.selected, .file-list-item.selected")
-            .forEach((f) => f.classList.remove("selected"));
-          this.classList.add("selected");
-        }
-        updateSelectedFiles();
-      });
+  function toggleSelection(path) {
+    if (selectedFiles.has(path)) selectedFiles.delete(path);
+    else selectedFiles.add(path);
 
-      file.addEventListener("dblclick", function () {
-        const isFolder = this.dataset.type === "folder";
-        if (isFolder) {
-          navigateToFolder(this.dataset.path);
-        } else {
-          openFile(this.dataset.id);
+    const el = document.querySelector(`[data-path="${CSS.escape(path)}"]`);
+    if (el) {
+      el.classList.toggle("selected", selectedFiles.has(path));
+      const checkbox = el.querySelector(".file-checkbox");
+      if (checkbox) checkbox.checked = selectedFiles.has(path);
+    }
+    updateSelectionBar();
+  }
+
+  function selectAll() {
+    document.querySelectorAll(".file-card, .drive-file-item").forEach((el) => {
+      selectedFiles.add(el.dataset.path);
+      el.classList.add("selected");
+      const checkbox = el.querySelector(".file-checkbox");
+      if (checkbox) checkbox.checked = true;
+    });
+    updateSelectionBar();
+  }
+
+  function clearSelection() {
+    selectedFiles.clear();
+    document
+      .querySelectorAll(".file-card.selected, .drive-file-item.selected")
+      .forEach((el) => {
+        el.classList.remove("selected");
+        const checkbox = el.querySelector(".file-checkbox");
+        if (checkbox) checkbox.checked = false;
+      });
+    updateSelectionBar();
+  }
+
+  function updateSelectionBar() {
+    const bar = document.getElementById("selection-bar");
+    const countEl = document.getElementById("selected-count");
+    if (bar) bar.style.display = selectedFiles.size > 0 ? "flex" : "none";
+    if (countEl) countEl.textContent = selectedFiles.size;
+  }
+
+  function updateBreadcrumb() {
+    const breadcrumb = document.querySelector(".breadcrumb, .drive-breadcrumb");
+    if (!breadcrumb) return;
+
+    const parts = currentPath ? currentPath.split("/").filter(Boolean) : [];
+    let html = `<button class="breadcrumb-item" onclick="DriveModule.loadFiles('', '${currentBucket}')">My Drive</button>`;
+
+    let cumulativePath = "";
+    parts.forEach((part, idx) => {
+      cumulativePath += (cumulativePath ? "/" : "") + part;
+      const isLast = idx === parts.length - 1;
+      html += `<span class="breadcrumb-sep">/</span>`;
+      html += isLast
+        ? `<span class="breadcrumb-current">${escapeHtml(part)}</span>`
+        : `<button class="breadcrumb-item" onclick="DriveModule.loadFiles('${escapeJs(cumulativePath)}', '${currentBucket}')">${escapeHtml(part)}</button>`;
+    });
+
+    breadcrumb.innerHTML = html;
+  }
+  function bindNavigation() {
+    document.querySelectorAll(".drive-nav-item, .nav-item").forEach((item) => {
+      item.addEventListener("click", function () {
+        document
+          .querySelectorAll(".drive-nav-item, .nav-item")
+          .forEach((i) => i.classList.remove("active"));
+        this.classList.add("active");
+
+        const view = this.dataset.view || this.dataset.filter;
+        if (view === "my-drive" || !view) loadFiles("", currentBucket);
+        else if (view === "recent") loadRecentFiles();
+        else if (view === "starred" || view === "favorite") loadStarredFiles();
+        else if (view === "shared") loadSharedFiles();
+        else if (view === "trash") loadTrashFiles();
+      });
+    });
+  }
+
+  async function loadRecentFiles() {
+    const content =
+      document.getElementById("drive-content") ||
+      document.getElementById("file-grid");
+    if (!content) return;
+    content.innerHTML =
+      '<div class="loading-state"><div class="spinner"></div><p>Loading...</p></div>';
+    try {
+      const files = await apiRequest("/recent");
+      renderFiles(files);
+    } catch (err) {
+      content.innerHTML = `<div class="empty-state"><h3>No recent files</h3></div>`;
+    }
+  }
+
+  async function loadStarredFiles() {
+    const content =
+      document.getElementById("drive-content") ||
+      document.getElementById("file-grid");
+    if (!content) return;
+    content.innerHTML =
+      '<div class="loading-state"><div class="spinner"></div><p>Loading...</p></div>';
+    try {
+      const files = await apiRequest("/favorite");
+      renderFiles(files);
+    } catch (err) {
+      content.innerHTML = `<div class="empty-state"><h3>No starred files</h3></div>`;
+    }
+  }
+
+  async function loadSharedFiles() {
+    const content =
+      document.getElementById("drive-content") ||
+      document.getElementById("file-grid");
+    if (!content) return;
+    content.innerHTML =
+      '<div class="loading-state"><div class="spinner"></div><p>Loading...</p></div>';
+    try {
+      const files = await apiRequest("/shared");
+      renderFiles(files);
+    } catch (err) {
+      content.innerHTML = `<div class="empty-state"><h3>No shared files</h3></div>`;
+    }
+  }
+
+  async function loadTrashFiles() {
+    const content =
+      document.getElementById("drive-content") ||
+      document.getElementById("file-grid");
+    if (!content) return;
+    content.innerHTML = `<div class="empty-state"><h3>Trash is empty</h3></div>`;
+  }
+
+  function bindViewToggle() {
+    document.querySelectorAll(".view-toggle, .view-btn").forEach((btn) => {
+      btn.addEventListener("click", function () {
+        const view = this.dataset.view;
+        if (view) {
+          viewMode = view;
+          document
+            .querySelectorAll(".view-toggle, .view-btn")
+            .forEach((b) => b.classList.remove("active"));
+          this.classList.add("active");
+          loadFiles(currentPath, currentBucket);
         }
       });
     });
   }
 
+  function bindUploadButton() {
+    const uploadBtn = document.getElementById("upload-btn");
+    if (uploadBtn) uploadBtn.addEventListener("click", triggerUpload);
+    window.uploadFile = triggerUpload;
+
+    let fileInput = document.getElementById("file-input");
+    if (!fileInput) {
+      fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.id = "file-input";
+      fileInput.multiple = true;
+      fileInput.style.display = "none";
+      document.body.appendChild(fileInput);
+    }
+    fileInput.addEventListener("change", handleFileInputChange);
+  }
+
+  function triggerUpload() {
+    const input = document.getElementById("file-input");
+    if (input) input.click();
+  }
+
+  function handleFileInputChange(e) {
+    const files = e.target.files;
+    if (files && files.length > 0) uploadFiles(Array.from(files));
+    e.target.value = "";
+  }
+
+  async function uploadFiles(files) {
+    showNotification(`Uploading ${files.length} file(s)...`, "info");
+
+    let uploaded = 0;
+    let failed = 0;
+
+    for (const file of files) {
+      try {
+        const content = await readFileAsBase64(file);
+        const filePath = currentPath
+          ? `${currentPath}/${file.name}`
+          : file.name;
+
+        await apiRequest("/write", {
+          method: "POST",
+          body: JSON.stringify({
+            bucket: currentBucket,
+            path: filePath,
+            content: content,
+          }),
+        });
+        uploaded++;
+      } catch (err) {
+        console.error("Upload error:", err);
+        failed++;
+      }
+    }
+
+    if (failed === 0)
+      showNotification(`Uploaded ${uploaded} file(s)`, "success");
+    else showNotification(`Uploaded ${uploaded}, ${failed} failed`, "warning");
+
+    loadFiles(currentPath, currentBucket);
+    loadStorageInfo();
+  }
+
+  function readFileAsBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const base64 = reader.result.split(",")[1] || reader.result;
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
   function bindDragAndDrop() {
-    const uploadZone = document.querySelector(".upload-zone");
-    if (!uploadZone) return;
+    const container = document.querySelector(".drive-container, .drive-main");
+    if (!container) return;
 
-    ["dragenter", "dragover", "dragleave", "drop"].forEach((event) => {
-      uploadZone.addEventListener(event, (e) => {
+    ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
+      container.addEventListener(eventName, (e) => {
         e.preventDefault();
         e.stopPropagation();
       });
     });
 
-    ["dragenter", "dragover"].forEach((event) => {
-      uploadZone.addEventListener(event, () =>
-        uploadZone.classList.add("dragover"),
-      );
+    container.addEventListener("dragenter", () => {
+      container.classList.add("drag-active");
+      const overlay = document.getElementById("drop-overlay");
+      if (overlay) overlay.classList.add("visible");
     });
 
-    ["dragleave", "drop"].forEach((event) => {
-      uploadZone.addEventListener(event, () =>
-        uploadZone.classList.remove("dragover"),
-      );
-    });
-
-    uploadZone.addEventListener("drop", (e) => {
-      const files = e.dataTransfer.files;
-      handleFileUpload(files);
-    });
-  }
-
-  function bindContextMenu() {
-    document.addEventListener("contextmenu", (e) => {
-      const fileCard = e.target.closest(".file-card, .file-list-item");
-      if (fileCard) {
-        e.preventDefault();
-        showContextMenu(e.clientX, e.clientY, fileCard);
+    container.addEventListener("dragleave", (e) => {
+      if (!container.contains(e.relatedTarget)) {
+        container.classList.remove("drag-active");
+        const overlay = document.getElementById("drop-overlay");
+        if (overlay) overlay.classList.remove("visible");
       }
     });
 
-    document.addEventListener("click", hideContextMenu);
+    container.addEventListener("drop", (e) => {
+      container.classList.remove("drag-active");
+      const overlay = document.getElementById("drop-overlay");
+      if (overlay) overlay.classList.remove("visible");
+      const files = e.dataTransfer.files;
+      if (files && files.length > 0) uploadFiles(Array.from(files));
+    });
+  }
+  function bindContextMenu() {
+    document.addEventListener("contextmenu", (e) => {
+      const fileEl = e.target.closest(".file-card, .drive-file-item");
+      if (fileEl) {
+        e.preventDefault();
+        showContextMenu(
+          e.clientX,
+          e.clientY,
+          fileEl.dataset.path,
+          fileEl.dataset.type,
+        );
+      }
+    });
+
+    document.addEventListener("click", (e) => {
+      const menu = document.getElementById("context-menu");
+      if (menu && !menu.contains(e.target)) {
+        menu.classList.add("hidden");
+        menu.style.display = "none";
+      }
+    });
+  }
+
+  function showContextMenu(x, y, path, type) {
+    let menu = document.getElementById("context-menu");
+    if (!menu) {
+      menu = document.createElement("div");
+      menu.id = "context-menu";
+      menu.className = "context-menu";
+      document.body.appendChild(menu);
+    }
+
+    const isFolder = type === "folder";
+    const ep = escapeJs(path);
+    const canEdit = !isFolder && isEditableFile(path);
+
+    const icons = {
+      open: `<svg width="16" height="16" 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"></path></svg>`,
+      download: `<svg width="16" height="16" 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>`,
+      edit: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>`,
+      copy: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`,
+      cut: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>`,
+      rename: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>`,
+      delete: `<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"></polyline><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"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>`,
+    };
+
+    const hideMenu = `document.getElementById('context-menu').style.display='none';`;
+
+    menu.innerHTML = `
+      ${
+        isFolder
+          ? `<div class="context-menu-item" onclick="${hideMenu}DriveModule.loadFiles('${ep}', '${currentBucket}')">${icons.open}<span>Open</span></div>`
+          : `<div class="context-menu-item" onclick="${hideMenu}DriveModule.downloadFile('${ep}')">${icons.download}<span>Download</span></div>`
+      }
+      ${canEdit ? `<div class="context-menu-item" onclick="${hideMenu}DriveModule.openInlineEditor('${ep}')">${icons.edit}<span>Edit</span></div>` : ""}
+      <div class="context-menu-divider"></div>
+      <div class="context-menu-item" onclick="${hideMenu}DriveModule.copyToClipboard('${ep}')">${icons.copy}<span>Copy</span></div>
+      <div class="context-menu-item" onclick="${hideMenu}DriveModule.cutToClipboard('${ep}')">${icons.cut}<span>Cut</span></div>
+      <div class="context-menu-item" onclick="${hideMenu}DriveModule.renameItem('${ep}')">${icons.rename}<span>Rename</span></div>
+      <div class="context-menu-divider"></div>
+      <div class="context-menu-item danger" onclick="${hideMenu}DriveModule.deleteItem('${ep}')">${icons.delete}<span>Delete</span></div>
+    `;
+
+    menu.style.display = "block";
+    menu.classList.remove("hidden");
+
+    const rect = menu.getBoundingClientRect();
+    menu.style.left =
+      (x + rect.width > window.innerWidth ? x - rect.width : x) + "px";
+    menu.style.top =
+      (y + rect.height > window.innerHeight ? y - rect.height : y) + "px";
+  }
+
+  function showContextMenuFor(event, path) {
+    const el = document.querySelector(`[data-path="${CSS.escape(path)}"]`);
+    const type = el ? el.dataset.type : "file";
+    showContextMenu(event.clientX, event.clientY, path, type);
   }
 
   function bindKeyboardShortcuts() {
     document.addEventListener("keydown", (e) => {
-      if (e.key === "Delete" && selectedFiles.length > 0) {
-        deleteSelectedFiles();
-      }
-      if (e.key === "a" && (e.ctrlKey || e.metaKey)) {
+      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")
+        return;
+
+      if (e.key === "Delete" && selectedFiles.size > 0) {
         e.preventDefault();
-        selectAllFiles();
+        deleteSelected();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "a") {
+        e.preventDefault();
+        selectAll();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "c" && selectedFiles.size > 0) {
+        e.preventDefault();
+        copySelected();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "x" && selectedFiles.size > 0) {
+        e.preventDefault();
+        cutSelected();
+      }
+      if (
+        (e.ctrlKey || e.metaKey) &&
+        e.key === "v" &&
+        clipboardFiles.length > 0
+      ) {
+        e.preventDefault();
+        pasteFiles();
       }
       if (e.key === "Escape") {
-        deselectAllFiles();
-        hideContextMenu();
+        clearSelection();
+        const menu = document.getElementById("context-menu");
+        if (menu) menu.style.display = "none";
+      }
+      if (e.key === "Backspace" && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        navigateUp();
+      }
+      if (e.key === "F2" && selectedFiles.size === 1) {
+        e.preventDefault();
+        renameItem(Array.from(selectedFiles)[0]);
       }
     });
   }
 
-  function updateSelectedFiles() {
-    selectedFiles = Array.from(
-      document.querySelectorAll(
-        ".file-card.selected, .file-list-item.selected",
-      ),
-    ).map((f) => f.dataset.id);
+  function navigateUp() {
+    if (!currentPath) return;
+    const parts = currentPath.split("/").filter(Boolean);
+    parts.pop();
+    loadFiles(parts.join("/"), currentBucket);
   }
 
-  function navigateToFolder(path) {
-    currentPath = path;
-    // HTMX handles actual navigation
+  function bindNewFolderButton() {
+    const btn = document.getElementById("new-folder-btn");
+    if (btn) btn.addEventListener("click", createFolder);
+    window.createFolder = createFolder;
   }
 
-  function openFile(fileId) {
-    console.log("Opening file:", fileId);
-  }
+  async function createFolder() {
+    const name = prompt("Enter folder name:");
+    if (!name || !name.trim()) return;
 
-  function handleFileUpload(files) {
-    console.log("Uploading files:", files);
-  }
-
-  function showContextMenu(x, y, fileCard) {
-    hideContextMenu();
-    const menu = document.getElementById("context-menu");
-    if (menu) {
-      menu.style.left = x + "px";
-      menu.style.top = y + "px";
-      menu.classList.remove("hidden");
-      menu.dataset.fileId = fileCard.dataset.id;
+    try {
+      await apiRequest("/createFolder", {
+        method: "POST",
+        body: JSON.stringify({
+          bucket: currentBucket,
+          path: currentPath,
+          name: name.trim(),
+        }),
+      });
+      showNotification(`Folder "${name}" created`, "success");
+      loadFiles(currentPath, currentBucket);
+    } catch (err) {
+      showNotification(`Failed to create folder: ${err.message}`, "error");
     }
   }
 
-  function hideContextMenu() {
-    const menu = document.getElementById("context-menu");
-    if (menu) menu.classList.add("hidden");
+  function bindSearchInput() {
+    const searchInput = document.querySelector(
+      ".search-box input, #search-input",
+    );
+    if (!searchInput) return;
+
+    let debounceTimer;
+    searchInput.addEventListener("input", (e) => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        const query = e.target.value.trim();
+        if (query) searchFiles(query);
+        else loadFiles(currentPath, currentBucket);
+      }, 300);
+    });
   }
 
-  function selectAllFiles() {
-    document
-      .querySelectorAll(".file-card, .file-list-item")
-      .forEach((f) => f.classList.add("selected"));
-    updateSelectedFiles();
-  }
+  async function searchFiles(query) {
+    const content =
+      document.getElementById("drive-content") ||
+      document.getElementById("file-grid");
+    if (!content) return;
+    content.innerHTML =
+      '<div class="loading-state"><div class="spinner"></div><p>Searching...</p></div>';
 
-  function deselectAllFiles() {
-    document
-      .querySelectorAll(".file-card.selected, .file-list-item.selected")
-      .forEach((f) => f.classList.remove("selected"));
-    selectedFiles = [];
+    try {
+      const params = new URLSearchParams();
+      params.set("query", query);
+      if (currentBucket) params.set("bucket", currentBucket);
+      const files = await apiRequest(`/search?${params.toString()}`);
+      renderFiles(files);
+    } catch (err) {
+      content.innerHTML = `<div class="empty-state"><h3>Search failed</h3></div>`;
+    }
   }
+  async function downloadFile(path) {
+    try {
+      const response = await apiRequest("/download", {
+        method: "POST",
+        body: JSON.stringify({ bucket: currentBucket, path: path }),
+      });
 
-  function deleteSelectedFiles() {
-    if (confirm(`Delete ${selectedFiles.length} file(s)?`)) {
-      console.log("Deleting:", selectedFiles);
+      const content = response.content;
+      const fileName = path.split("/").pop() || "download";
+      let blob;
+
+      const isBase64 =
+        /^[A-Za-z0-9+/=]+$/.test(content) && content.length > 100;
+      if (isBase64) {
+        try {
+          const byteCharacters = atob(content);
+          const byteNumbers = new Array(byteCharacters.length);
+          for (let i = 0; i < byteCharacters.length; i++)
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+          blob = new Blob([new Uint8Array(byteNumbers)]);
+        } catch (e) {
+          blob = new Blob([content], { type: "text/plain" });
+        }
+      } else {
+        blob = new Blob([content], { type: "text/plain" });
+      }
+
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      showNotification(`Downloaded ${fileName}`, "success");
+    } catch (err) {
+      showNotification(`Download failed: ${err.message}`, "error");
     }
   }
 
-  window.DriveModule = { init };
+  function isEditableFile(path) {
+    const editableExtensions = [
+      ".txt",
+      ".md",
+      ".json",
+      ".js",
+      ".ts",
+      ".css",
+      ".html",
+      ".htm",
+      ".xml",
+      ".yaml",
+      ".yml",
+      ".csv",
+      ".bas",
+      ".vbs",
+      ".sql",
+      ".sh",
+      ".bat",
+      ".ps1",
+      ".py",
+      ".rb",
+      ".php",
+      ".java",
+      ".c",
+      ".cpp",
+      ".h",
+      ".rs",
+      ".go",
+      ".swift",
+      ".kt",
+      ".scala",
+      ".r",
+      ".lua",
+      ".pl",
+      ".ini",
+      ".conf",
+      ".config",
+      ".env",
+      ".gitignore",
+      ".dockerfile",
+      ".toml",
+      ".lock",
+      ".log",
+      ".markdown",
+      ".rst",
+      ".tex",
+      ".csv",
+    ];
+    const ext = "." + (path.split(".").pop() || "").toLowerCase();
+    return editableExtensions.includes(ext);
+  }
+
+  async function openInlineEditor(path) {
+    const fileName = path.split("/").pop() || "file";
+    console.log("openInlineEditor called with path:", path);
+
+    if (!isEditableFile(path)) {
+      console.log("File not editable, downloading instead");
+      downloadFile(path);
+      return;
+    }
+
+    try {
+      console.log("Fetching file content for:", path);
+      const response = await apiRequest("/read", {
+        method: "POST",
+        body: JSON.stringify({ bucket: currentBucket, path: path }),
+      });
+
+      console.log("API response:", response);
+      const content = response.content || "";
+      console.log("Content length:", content.length);
+      showEditorModal(path, fileName, content);
+    } catch (err) {
+      console.error("Failed to open file:", err);
+      showNotification(`Failed to open file: ${err.message}`, "error");
+    }
+  }
+
+  function showEditorModal(path, fileName, content) {
+    console.log("showEditorModal called:", {
+      path,
+      fileName,
+      contentLength: content?.length,
+    });
+
+    let modal = document.getElementById("editor-modal");
+    if (modal) {
+      console.log("Removing existing modal");
+      modal.remove();
+    }
+
+    const ext = (fileName.split(".").pop() || "txt").toLowerCase();
+
+    modal = document.createElement("div");
+    modal.id = "editor-modal";
+    modal.className = "modal-overlay";
+
+    // Build modal HTML
+    const headerHtml = `
+      <div class="editor-header">
+        <div class="editor-title">
+          <span class="editor-icon">📝</span>
+          <span class="editor-filename">${escapeHtml(fileName)}</span>
+          <span class="editor-status" id="editor-status"></span>
+        </div>
+        <div class="editor-actions">
+          <button class="btn-secondary" onclick="DriveModule.closeEditor()">Cancel</button>
+          <button class="btn-primary" onclick="DriveModule.saveEditorContent()">
+            <span>💾</span> Save
+          </button>
+        </div>
+      </div>
+    `;
+
+    const bodyHtml = `
+      <div class="editor-body">
+        <textarea
+          id="editor-textarea"
+          class="editor-textarea"
+          spellcheck="false"
+          data-path="${escapeHtml(path)}"
+          data-ext="${ext}"
+        ></textarea>
+      </div>
+    `;
+
+    const footerHtml = `
+      <div class="editor-footer">
+        <span class="editor-info">Line: <span id="editor-line">1</span>, Col: <span id="editor-col">1</span></span>
+        <span class="editor-info">${ext.toUpperCase()}</span>
+      </div>
+    `;
+
+    modal.innerHTML = `<div class="modal-content editor-modal-content">${headerHtml}${bodyHtml}${footerHtml}</div>`;
+
+    document.body.appendChild(modal);
+    console.log("Modal appended to body");
+
+    // Set content via value property to avoid HTML escaping issues
+    const textarea = document.getElementById("editor-textarea");
+    if (textarea) {
+      textarea.value = content || "";
+      console.log("Textarea content set, length:", textarea.value.length);
+      textarea.focus();
+    } else {
+      console.error("Textarea not found!");
+      return;
+    }
+
+    textarea.addEventListener("input", () => {
+      document.getElementById("editor-status").textContent = "● Modified";
+    });
+
+    textarea.addEventListener("click", updateEditorCursor);
+    textarea.addEventListener("keyup", updateEditorCursor);
+
+    textarea.addEventListener("keydown", (e) => {
+      if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        saveEditorContent();
+      }
+      if (e.key === "Escape") {
+        closeEditor();
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        textarea.value =
+          textarea.value.substring(0, start) +
+          "  " +
+          textarea.value.substring(end);
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      }
+    });
+
+    modal.addEventListener("click", (e) => {
+      if (e.target === modal) closeEditor();
+    });
+  }
+
+  function updateEditorCursor() {
+    const textarea = document.getElementById("editor-textarea");
+    if (!textarea) return;
+
+    const text = textarea.value.substring(0, textarea.selectionStart);
+    const lines = text.split("\n");
+    const line = lines.length;
+    const col = lines[lines.length - 1].length + 1;
+
+    document.getElementById("editor-line").textContent = line;
+    document.getElementById("editor-col").textContent = col;
+  }
+
+  async function saveEditorContent() {
+    const textarea = document.getElementById("editor-textarea");
+    if (!textarea) return;
+
+    const path = textarea.dataset.path;
+    const content = textarea.value;
+    const statusEl = document.getElementById("editor-status");
+
+    statusEl.textContent = "Saving...";
+
+    try {
+      await apiRequest("/write", {
+        method: "POST",
+        body: JSON.stringify({
+          bucket: currentBucket,
+          path: path,
+          content: content,
+        }),
+      });
+
+      statusEl.textContent = "✓ Saved";
+      showNotification("File saved successfully", "success");
+
+      setTimeout(() => {
+        if (statusEl) statusEl.textContent = "";
+      }, 2000);
+    } catch (err) {
+      statusEl.textContent = "✗ Save failed";
+      showNotification(`Failed to save: ${err.message}`, "error");
+    }
+  }
+
+  function closeEditor() {
+    const modal = document.getElementById("editor-modal");
+    const statusEl = document.getElementById("editor-status");
+
+    if (statusEl && statusEl.textContent.includes("Modified")) {
+      if (!confirm("You have unsaved changes. Close anyway?")) {
+        return;
+      }
+    }
+
+    if (modal) modal.remove();
+  }
+
+  async function deleteItem(path) {
+    const fileName = path.split("/").pop();
+    if (!confirm(`Delete "${fileName}"?`)) return;
+
+    try {
+      await apiRequest("/delete", {
+        method: "POST",
+        body: JSON.stringify({ bucket: currentBucket, path: path }),
+      });
+      showNotification("Item deleted", "success");
+      selectedFiles.delete(path);
+      loadFiles(currentPath, currentBucket);
+      loadStorageInfo();
+    } catch (err) {
+      showNotification(`Delete failed: ${err.message}`, "error");
+    }
+  }
+
+  async function deleteSelected() {
+    if (selectedFiles.size === 0) return;
+    const count = selectedFiles.size;
+    if (!confirm(`Delete ${count} item(s)?`)) return;
+
+    let deleted = 0;
+    for (const path of selectedFiles) {
+      try {
+        await apiRequest("/delete", {
+          method: "POST",
+          body: JSON.stringify({ bucket: currentBucket, path: path }),
+        });
+        deleted++;
+      } catch (err) {
+        console.error(`Failed to delete ${path}:`, err);
+      }
+    }
+
+    showNotification(
+      `Deleted ${deleted} of ${count} item(s)`,
+      deleted === count ? "success" : "warning",
+    );
+    clearSelection();
+    loadFiles(currentPath, currentBucket);
+    loadStorageInfo();
+  }
+
+  async function renameItem(path) {
+    const oldName = path.split("/").pop();
+    const newName = prompt("Enter new name:", oldName);
+    if (!newName || newName === oldName || !newName.trim()) return;
+
+    const parentPath = path.substring(0, path.lastIndexOf("/"));
+    const newPath = parentPath
+      ? `${parentPath}/${newName.trim()}`
+      : newName.trim();
+
+    try {
+      await apiRequest("/move", {
+        method: "POST",
+        body: JSON.stringify({
+          source_bucket: currentBucket,
+          source_path: path,
+          dest_bucket: currentBucket,
+          dest_path: newPath,
+        }),
+      });
+      showNotification(`Renamed to "${newName}"`, "success");
+      loadFiles(currentPath, currentBucket);
+    } catch (err) {
+      showNotification(`Rename failed: ${err.message}`, "error");
+    }
+  }
+
+  function copyToClipboard(path) {
+    clipboardFiles = [path];
+    clipboardOperation = "copy";
+    showNotification("Copied to clipboard", "info");
+  }
+
+  function cutToClipboard(path) {
+    clipboardFiles = [path];
+    clipboardOperation = "cut";
+    showNotification("Cut to clipboard", "info");
+  }
+
+  function copySelected() {
+    clipboardFiles = Array.from(selectedFiles);
+    clipboardOperation = "copy";
+    showNotification(`${clipboardFiles.length} item(s) copied`, "info");
+  }
+
+  function cutSelected() {
+    clipboardFiles = Array.from(selectedFiles);
+    clipboardOperation = "cut";
+    showNotification(`${clipboardFiles.length} item(s) cut`, "info");
+  }
+
+  async function pasteFiles() {
+    if (clipboardFiles.length === 0) return;
+
+    const operation = clipboardOperation;
+    let processed = 0;
+
+    for (const sourcePath of clipboardFiles) {
+      const fileName = sourcePath.split("/").pop();
+      const destPath = currentPath ? `${currentPath}/${fileName}` : fileName;
+
+      try {
+        const endpoint = operation === "copy" ? "/copy" : "/move";
+        await apiRequest(endpoint, {
+          method: "POST",
+          body: JSON.stringify({
+            source_bucket: currentBucket,
+            source_path: sourcePath,
+            dest_bucket: currentBucket,
+            dest_path: destPath,
+          }),
+        });
+        processed++;
+      } catch (err) {
+        console.error(`Failed to ${operation} ${sourcePath}:`, err);
+      }
+    }
+
+    if (operation === "cut") {
+      clipboardFiles = [];
+      clipboardOperation = null;
+    }
+
+    showNotification(
+      `${operation === "copy" ? "Copied" : "Moved"} ${processed} item(s)`,
+      "success",
+    );
+    loadFiles(currentPath, currentBucket);
+  }
+
+  window.DriveModule = {
+    init,
+    loadFiles,
+    loadStorageInfo,
+    discoverBuckets,
+    retryWithBackoff,
+    toggleSelection,
+    selectAll,
+    clearSelection,
+    downloadFile,
+    openInlineEditor,
+    saveEditorContent,
+    closeEditor,
+    deleteItem,
+    deleteSelected,
+    renameItem,
+    createFolder,
+    copyToClipboard,
+    cutToClipboard,
+    copySelected,
+    cutSelected,
+    pasteFiles,
+    showContextMenuFor,
+    navigateUp,
+  };
 
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", init);
diff --git a/ui/suite/drive/index.html b/ui/suite/drive/index.html
index 2ae68e0..27939a1 100644
--- a/ui/suite/drive/index.html
+++ b/ui/suite/drive/index.html
@@ -718,6 +718,13 @@
         </svg>
         Open
     </button>
+    <button class="context-item" data-action="edit" onclick="document.getElementById('context-menu').style.display='none'; if(window.contextTarget) DriveModule.openInlineEditor(window.contextTarget.dataset.path);">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+        </svg>
+        Edit
+    </button>
     <button class="context-item" data-action="preview">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
@@ -1857,13 +1864,13 @@
     }
 
     // Context menu handling
-    let contextTarget = null;
+    window.contextTarget = null;
 
     document.addEventListener('contextmenu', function(e) {
         const fileCard = e.target.closest('.file-card');
         if (fileCard) {
             e.preventDefault();
-            contextTarget = fileCard;
+            window.contextTarget = fileCard;
             const menu = document.getElementById('context-menu');
             menu.style.display = 'block';
             menu.style.left = e.pageX + 'px';
diff --git a/ui/suite/index.html b/ui/suite/index.html
index cb5ff6e..e9ea66e 100644
--- a/ui/suite/index.html
+++ b/ui/suite/index.html
@@ -25,7 +25,7 @@
         <link rel="stylesheet" href="meet/meet.css" />
         <link rel="stylesheet" href="paper/paper.css" />
         <link rel="stylesheet" href="research/research.css" />
-        <link rel="stylesheet" href="tasks/tasks.css" />
+        <link rel="stylesheet" href="tasks/tasks.css?v=20251230" />
         <link rel="stylesheet" href="analytics/analytics.css" />
         <link rel="stylesheet" href="monitoring/monitoring.css" />
 
diff --git a/ui/suite/tasks/autotask.css b/ui/suite/tasks/autotask.css
index 619b795..15af326 100644
--- a/ui/suite/tasks/autotask.css
+++ b/ui/suite/tasks/autotask.css
@@ -1,237 +1,1515 @@
 /* =============================================================================
-   AUTO TASK STYLES - Intelligent Self-Executing Task Interface
-   Premium VIP Mode Styling
+   AUTOTASK - SENTIENT THEME
+   Dark UI with Neon Yellow/Lime Accents (#CDFE00)
+   Pixel-perfect match to Mantis Farm Dashboard
+   ============================================================================= */
+
+/* =============================================================================
+   CSS VARIABLES - SENTIENT PALETTE
+   Inherits from theme system when [data-theme="sentient"] is present
+   ============================================================================= */
+
+.autotask-container {
+    --sentient-bg-primary: var(--bg, #0d0d0d);
+    --sentient-bg-secondary: var(--bg-secondary, #141414);
+    --sentient-bg-tertiary: var(--surface, #1a1a1a);
+    --sentient-bg-card: var(--card-bg, #161616);
+    --sentient-bg-card-hover: var(--surface-hover, #1c1c1c);
+    --sentient-bg-input: var(--input-bg, #0a0a0a);
+
+    --sentient-accent: var(--accent, #cdfe00);
+    --sentient-accent-hover: var(--accent-hover, #d8ff33);
+    --sentient-accent-dim: var(--accent-light, rgba(205, 254, 0, 0.15));
+    --sentient-accent-glow: var(--accent-glow, rgba(205, 254, 0, 0.25));
+
+    --sentient-text-primary: var(--text, #ffffff);
+    --sentient-text-secondary: var(--text-secondary, #a0a0a0);
+    --sentient-text-muted: var(--text-tertiary, #666666);
+    --sentient-text-dark: #000000;
+
+    --sentient-border: var(--border, #2a2a2a);
+    --sentient-border-light: var(--border-light, #333333);
+    --sentient-border-accent: var(--border-accent, rgba(205, 254, 0, 0.3));
+
+    --sentient-success: var(--success, #22c55e);
+    --sentient-warning: var(--warning, #f59e0b);
+    --sentient-error: var(--error, #ef4444);
+    --sentient-info: var(--info, #3b82f6);
+
+    --sentient-radius-sm: 6px;
+    --sentient-radius-md: 8px;
+    --sentient-radius-lg: 12px;
+    --sentient-radius-xl: 16px;
+    --sentient-radius-pill: 50px;
+
+    --sentient-font:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        sans-serif;
+    --sentient-font-mono: "SF Mono", "Fira Code", "Consolas", monospace;
+
+    --sentient-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.4));
+    --sentient-shadow-lg: var(--shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.5));
+}
+
+/* =============================================================================
+   BASE CONTAINER
    ============================================================================= */
 
-/* Container */
 .autotask-container {
     display: flex;
     flex-direction: column;
-    gap: 24px;
-    padding: 24px;
-    max-width: 1400px;
-    margin: 0 auto;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    min-height: 100vh;
+    background: var(--sentient-bg-primary);
+    color: var(--sentient-text-primary);
+    font-family: var(--sentient-font);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.autotask-container * {
+    box-sizing: border-box;
 }
 
 /* =============================================================================
-   HEADER
+   TOP NAVIGATION BAR
    ============================================================================= */
 
-.autotask-header {
+.autotask-topbar {
     display: flex;
+    align-items: center;
     justify-content: space-between;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    gap: 16px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 12px 24px;
+    background: var(--sentient-bg-secondary);
+    border-bottom: 1px solid var(--sentient-border);
 }
 
-.header-content {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.autotask-title {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin: 0;
-    font-size: 28px;
-    font-weight: 700;
-    color: #ffffff;
-}
-
-.autotask-icon {
-    font-size: 32px;
-}
-
-.beta-badge {
-    font-size: 10px;
-    font-weight: 700;
-    padding: 4px 8px;
-    background: #f59e0b;
-    color: #000;
-    border-radius: 4px;
-    letter-spacing: 0.5px;
-}
-
-.autotask-subtitle {
-    margin: 0;
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.6);
-}
-
-.header-stats {
-    display: flex;
-    gap: 20px;
-}
-
-.stat-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 12px 20px;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    min-width: 80px;
-}
-
-.stat-item.highlight {
-    background: rgba(239, 68, 68, 0.1);
-    border-color: rgba(239, 68, 68, 0.3);
-}
-
-.stat-value {
-    font-size: 24px;
-    font-weight: 700;
-    color: #ffffff;
-}
-
-.stat-item.highlight .stat-value {
-    color: #ef4444;
-}
-
-.stat-label {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-/* =============================================================================
-   INTENT INPUT SECTION
-   ============================================================================= */
-
-.intent-section {
-    background: rgba(99, 102, 241, 0.1);
-    border: 1px solid rgba(99, 102, 241, 0.2);
-    border-radius: 16px;
-    padding: 24px;
-}
-
-.intent-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-}
-
-.intent-header h2 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-.section-icon {
-    font-size: 24px;
-}
-
-.intent-form {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.intent-input-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.intent-input {
-    width: 100%;
-    padding: 16px;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    color: #ffffff;
-    font-size: 15px;
-    line-height: 1.6;
-    resize: vertical;
-    transition: all 0.2s ease;
-}
-
-.intent-input::placeholder {
-    color: rgba(255, 255, 255, 0.4);
-}
-
-.intent-input:focus {
-    outline: none;
-    border-color: rgba(99, 102, 241, 0.5);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-}
-
-.intent-actions {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.execution-mode-select,
-.priority-select {
-    padding: 10px 16px;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    color: #ffffff;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.execution-mode-select:hover,
-.priority-select:hover {
-    border-color: rgba(255, 255, 255, 0.2);
-}
-
-.execution-mode-select option,
-.priority-select option {
-    background: #1a1a2e;
-    color: #ffffff;
-}
-
-.btn-compile {
+.topbar-left {
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 12px 24px;
-    background: #6366f1;
+}
+
+.nav-tabs {
+    display: flex;
+    gap: 4px;
+    background: var(--sentient-bg-tertiary);
+    padding: 4px;
+    border-radius: var(--sentient-radius-md);
+}
+
+.nav-tab {
+    padding: 8px 20px;
+    background: transparent;
     border: none;
-    border-radius: 8px;
-    color: #ffffff;
-    font-size: 15px;
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-secondary);
+    font-family: var(--sentient-font);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.nav-tab:hover {
+    color: var(--sentient-text-primary);
+}
+
+.nav-tab.active {
+    background: var(--sentient-bg-card);
+    color: var(--sentient-text-primary);
+}
+
+.topbar-center {
+    flex: 1;
+    max-width: 500px;
+    margin: 0 40px;
+}
+
+.search-container {
+    position: relative;
+    width: 100%;
+}
+
+.search-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--sentient-text-muted);
+    font-size: 14px;
+}
+
+.search-input {
+    width: 100%;
+    padding: 10px 16px 10px 42px;
+    background: var(--sentient-bg-input);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-md);
+    color: var(--sentient-text-primary);
+    font-family: var(--sentient-font);
+    font-size: 14px;
+    outline: none;
+    transition: all 0.2s ease;
+}
+
+.search-input::placeholder {
+    color: var(--sentient-text-muted);
+}
+
+.search-input:focus {
+    border-color: var(--sentient-accent);
+    box-shadow: 0 0 0 3px var(--sentient-accent-dim);
+}
+
+.topbar-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.btn-new-intent {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 20px;
+    background: var(--sentient-accent);
+    border: none;
+    border-radius: var(--sentient-radius-md);
+    color: var(--sentient-text-dark);
+    font-family: var(--sentient-font);
+    font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
-    margin-left: auto;
 }
 
-.btn-compile:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+.btn-new-intent:hover {
+    background: var(--sentient-accent-hover);
+    box-shadow: 0 0 20px var(--sentient-accent-glow);
 }
 
-.btn-compile:active {
-    transform: translateY(0);
+.btn-settings {
+    padding: 10px 20px;
+    background: var(--sentient-bg-tertiary);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-md);
+    color: var(--sentient-text-primary);
+    font-family: var(--sentient-font);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
 
-.btn-icon {
+.btn-settings:hover {
+    background: var(--sentient-bg-card-hover);
+    border-color: var(--sentient-border-light);
+}
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px 6px 8px;
+    background: var(--sentient-bg-tertiary);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-pill);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.user-profile:hover {
+    border-color: var(--sentient-border-light);
+}
+
+.user-avatar {
+    width: 28px;
+    height: 28px;
+    background: var(--sentient-accent-dim);
+    border: 1px solid var(--sentient-accent);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+}
+
+.user-name {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--sentient-text-primary);
+}
+
+.dropdown-arrow {
+    font-size: 10px;
+    color: var(--sentient-text-muted);
+}
+
+.notification-bell {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--sentient-bg-tertiary);
+    border: 1px solid var(--sentient-border);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.notification-bell:hover {
+    border-color: var(--sentient-border-light);
+}
+
+.bell-icon {
     font-size: 18px;
 }
 
-/* Spinner */
+.notification-count {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    background: var(--sentient-accent);
+    border-radius: 10px;
+    color: var(--sentient-text-dark);
+    font-size: 11px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* =============================================================================
+   STATUS FILTER PILLS
+   ============================================================================= */
+
+.status-filters {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 24px;
+    background: var(--sentient-bg-secondary);
+    border-bottom: 1px solid var(--sentient-border);
+    flex-wrap: wrap;
+}
+
+.status-filter {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    border-radius: var(--sentient-radius-pill);
+    color: var(--sentient-text-secondary);
+    font-family: var(--sentient-font);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.status-filter:hover {
+    color: var(--sentient-text-primary);
+}
+
+.status-filter.active {
+    background: var(--sentient-accent-dim);
+    color: var(--sentient-accent);
+}
+
+.filter-icon {
+    font-size: 14px;
+}
+
+.filter-count {
+    padding: 2px 10px;
+    background: var(--sentient-bg-tertiary);
+    border-radius: var(--sentient-radius-pill);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.status-filter.active .filter-count {
+    background: var(--sentient-accent);
+    color: var(--sentient-text-dark);
+}
+
+.time-saved {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+}
+
+.time-label {
+    color: var(--sentient-text-secondary);
+}
+
+.time-value {
+    color: var(--sentient-text-primary);
+    font-weight: 600;
+}
+
+/* =============================================================================
+   MAIN CONTENT LAYOUT
+   ============================================================================= */
+
+.main-content {
+    display: grid;
+    grid-template-columns: 400px 1fr;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* =============================================================================
+   INTENT LIST PANEL (LEFT)
+   ============================================================================= */
+
+.intent-list-panel {
+    background: var(--sentient-bg-secondary);
+    border-right: 1px solid var(--sentient-border);
+    overflow-y: auto;
+    padding: 16px;
+}
+
+.intent-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: var(--sentient-text-muted);
+    gap: 12px;
+}
+
+/* =============================================================================
+   INTENT CARD
+   ============================================================================= */
+
+.intent-card {
+    background: var(--sentient-bg-card);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-lg);
+    padding: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.intent-card:hover {
+    border-color: var(--sentient-border-light);
+    background: var(--sentient-bg-card-hover);
+}
+
+.intent-card.selected {
+    border-color: var(--sentient-accent);
+    box-shadow: 0 0 0 1px var(--sentient-accent);
+}
+
+.intent-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.intent-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--sentient-text-primary);
+    margin: 0;
+    line-height: 1.3;
+}
+
+.intent-status-indicator {
+    width: 4px;
+    height: 40px;
+    border-radius: 2px;
+    flex-shrink: 0;
+    margin-left: 12px;
+}
+
+.intent-status-indicator.active {
+    background: var(--sentient-accent);
+}
+
+.intent-status-indicator.complete {
+    background: var(--sentient-success);
+}
+
+.intent-status-indicator.paused {
+    background: var(--sentient-text-muted);
+}
+
+.intent-status-indicator.blocked {
+    background: var(--sentient-error);
+}
+
+.intent-status-indicator.awaiting {
+    background: var(--sentient-warning);
+}
+
+/* Intent Progress */
+.intent-progress {
+    margin-bottom: 16px;
+}
+
+.progress-bar {
+    height: 6px;
+    background: var(--sentient-bg-tertiary);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 8px;
+}
+
+.progress-bar.large {
+    height: 8px;
+    border-radius: 4px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--sentient-accent);
+    border-radius: inherit;
+    transition: width 0.4s ease;
+}
+
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.progress-steps {
+    font-size: 12px;
+    color: var(--sentient-text-secondary);
+}
+
+.progress-percent {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--sentient-accent);
+    background: var(--sentient-accent-dim);
+    padding: 2px 8px;
+    border-radius: var(--sentient-radius-sm);
+}
+
+/* Intent Status Section */
+.intent-status-section {
+    margin-bottom: 12px;
+}
+
+.status-label,
+.integrity-label {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    color: var(--sentient-text-muted);
+    margin-bottom: 6px;
+}
+
+.status-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.status-icon {
+    font-size: 14px;
+}
+
+.status-text {
+    font-size: 13px;
+    color: var(--sentient-text-primary);
+}
+
+.status-text.active {
+    color: var(--sentient-accent);
+}
+
+/* Intent Current Task */
+.intent-current-task {
+    padding: 10px 12px;
+    background: var(--sentient-bg-tertiary);
+    border-radius: var(--sentient-radius-sm);
+    margin-bottom: 12px;
+}
+
+.current-task-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--sentient-text-primary);
+    margin-bottom: 4px;
+}
+
+.current-task-desc {
+    font-size: 12px;
+    color: var(--sentient-text-muted);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Intent Integrity */
+.intent-integrity {
+    margin-bottom: 12px;
+}
+
+.integrity-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+}
+
+.integrity-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    background: var(--sentient-bg-tertiary);
+    border-radius: var(--sentient-radius-sm);
+    font-size: 11px;
+    color: var(--sentient-text-secondary);
+}
+
+.item-icon {
+    font-size: 12px;
+}
+
+.integrity-badge {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: var(--sentient-radius-sm);
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.integrity-badge.health-good {
+    background: rgba(34, 197, 94, 0.15);
+    color: var(--sentient-success);
+}
+
+.integrity-badge.health-warning {
+    background: rgba(245, 158, 11, 0.15);
+    color: var(--sentient-warning);
+}
+
+.integrity-badge.health-bad {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--sentient-error);
+}
+
+.health-value {
+    font-weight: 700;
+}
+
+/* Detail View Button */
+.btn-detail-view {
+    width: 100%;
+    padding: 10px;
+    background: var(--sentient-accent);
+    border: none;
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-dark);
+    font-family: var(--sentient-font);
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-detail-view:hover {
+    background: var(--sentient-accent-hover);
+}
+
+/* =============================================================================
+   INTENT DETAIL PANEL (RIGHT)
+   ============================================================================= */
+
+.intent-detail-panel {
+    background: var(--sentient-bg-primary);
+    overflow-y: auto;
+    padding: 24px;
+}
+
+.detail-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--sentient-text-muted);
+    gap: 12px;
+}
+
+.placeholder-icon {
+    font-size: 48px;
+    opacity: 0.5;
+}
+
+/* Detail View */
+.detail-view {
+    max-width: 900px;
+}
+
+.detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
+.btn-back {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--sentient-bg-tertiary);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-secondary);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-back:hover {
+    background: var(--sentient-bg-card-hover);
+    color: var(--sentient-text-primary);
+}
+
+.detail-title {
+    flex: 1;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--sentient-text-primary);
+    margin: 0;
+}
+
+.detail-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 14px;
+    background: var(--sentient-bg-tertiary);
+    border-radius: var(--sentient-radius-pill);
+    font-size: 13px;
+    color: var(--sentient-text-secondary);
+}
+
+.detail-status .status-icon {
+    color: var(--sentient-warning);
+}
+
+.btn-pause {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--sentient-accent);
+    border: none;
+    border-radius: var(--sentient-radius-md);
+    color: var(--sentient-text-dark);
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-pause:hover {
+    background: var(--sentient-accent-hover);
+}
+
+/* Detail Progress */
+.detail-progress {
+    margin-bottom: 24px;
+}
+
+.progress-stats {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+}
+
+/* =============================================================================
+   DECISION PANEL
+   ============================================================================= */
+
+.decision-panel {
+    background: var(--sentient-bg-card);
+    border: 1px solid rgba(245, 158, 11, 0.3);
+    border-radius: var(--sentient-radius-lg);
+    margin-bottom: 24px;
+    overflow: hidden;
+}
+
+.decision-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 16px;
+    background: rgba(245, 158, 11, 0.1);
+    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.decision-badge {
+    padding: 4px 10px;
+    background: var(--sentient-warning);
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-dark);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+}
+
+.decision-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--sentient-text-primary);
+}
+
+.decision-body {
+    padding: 16px;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 20px;
+}
+
+.decision-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.btn-decision-primary {
+    padding: 10px 20px;
+    background: var(--sentient-accent);
+    border: none;
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-dark);
+    font-family: var(--sentient-font);
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-decision-primary:hover {
+    background: var(--sentient-accent-hover);
+}
+
+.btn-decision-secondary {
+    padding: 10px 20px;
+    background: var(--sentient-bg-tertiary);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-primary);
+    font-family: var(--sentient-font);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-decision-secondary:hover {
+    background: var(--sentient-bg-card-hover);
+    border-color: var(--sentient-border-light);
+}
+
+.decision-context {
+    padding: 12px;
+    background: var(--sentient-bg-tertiary);
+    border-radius: var(--sentient-radius-sm);
+}
+
+.context-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--sentient-text-primary);
+    margin-bottom: 6px;
+}
+
+.context-text {
+    font-size: 13px;
+    color: var(--sentient-text-secondary);
+    line-height: 1.5;
+    margin: 0;
+}
+
+/* =============================================================================
+   DETAIL SECTIONS
+   ============================================================================= */
+
+.detail-section {
+    background: var(--sentient-bg-card);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-lg);
+    margin-bottom: 16px;
+    overflow: hidden;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px;
+    background: var(--sentient-bg-tertiary);
+    border-bottom: 1px solid var(--sentient-border);
+}
+
+.section-title {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    color: var(--sentient-text-primary);
+}
+
+.section-runtime {
+    font-size: 12px;
+    color: var(--sentient-text-muted);
+}
+
+.status-current-task {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--sentient-border);
+}
+
+.task-name {
+    font-size: 14px;
+    color: var(--sentient-text-primary);
+}
+
+.task-estimate {
+    font-size: 12px;
+    color: var(--sentient-text-muted);
+}
+
+.status-steps-preview {
+    padding: 12px 16px;
+}
+
+.step-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 8px 0;
+}
+
+.step-item:not(:last-child) {
+    border-bottom: 1px solid var(--sentient-border);
+}
+
+.step-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-top: 4px;
+    flex-shrink: 0;
+}
+
+.step-item.active .step-dot {
+    background: var(--sentient-accent);
+    box-shadow: 0 0 8px var(--sentient-accent-glow);
+}
+
+.step-item.pending .step-dot {
+    background: var(--sentient-text-muted);
+}
+
+.step-item.completed .step-dot {
+    background: var(--sentient-success);
+}
+
+.step-name {
+    font-size: 13px;
+    color: var(--sentient-text-primary);
+}
+
+.step-item.pending .step-name {
+    color: var(--sentient-text-secondary);
+}
+
+.step-note {
+    font-size: 12px;
+    color: var(--sentient-text-muted);
+    margin-left: 22px;
+}
+
+/* =============================================================================
+   PROGRESS LOG
+   ============================================================================= */
+
+.progress-log {
+    padding: 8px;
+}
+
+.log-entry {
+    border-radius: var(--sentient-radius-sm);
+    overflow: hidden;
+    margin-bottom: 4px;
+}
+
+.log-entry-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    background: var(--sentient-bg-tertiary);
+    cursor: pointer;
+    transition: background 0.2s ease;
+}
+
+.log-entry-header:hover {
+    background: var(--sentient-bg-card-hover);
+}
+
+.log-icon {
+    font-size: 10px;
+}
+
+.log-icon.complete {
+    color: var(--sentient-success);
+}
+
+.log-icon.active {
+    color: var(--sentient-accent);
+}
+
+.log-icon.pending {
+    color: var(--sentient-text-muted);
+}
+
+.log-title {
+    flex: 1;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--sentient-text-primary);
+}
+
+.log-expand {
+    font-size: 10px;
+    color: var(--sentient-text-muted);
+    transition: transform 0.2s ease;
+}
+
+.log-entry.expanded .log-expand {
+    transform: rotate(90deg);
+}
+
+.log-step-badge {
+    padding: 3px 10px;
+    background: var(--sentient-success);
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-dark);
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.log-entry-body {
+    display: none;
+    padding: 0 12px 12px 34px;
+    background: var(--sentient-bg-tertiary);
+}
+
+.log-entry.expanded .log-entry-body {
+    display: block;
+}
+
+.log-sub-entries {
+    border-left: 2px solid var(--sentient-border);
+    padding-left: 16px;
+}
+
+.log-sub-entry {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--sentient-border);
+}
+
+.log-sub-entry:last-child {
+    border-bottom: none;
+}
+
+.sub-icon {
+    font-size: 8px;
+}
+
+.sub-icon.complete {
+    color: var(--sentient-accent);
+}
+
+.sub-text {
+    flex: 1;
+    font-size: 12px;
+    color: var(--sentient-text-secondary);
+}
+
+.sub-duration {
+    font-size: 11px;
+    color: var(--sentient-text-muted);
+}
+
+.sub-check {
+    color: var(--sentient-success);
+    font-size: 12px;
+}
+
+/* =============================================================================
+   TERMINAL SECTION
+   ============================================================================= */
+
+.terminal-section {
+    background: var(--sentient-bg-primary);
+}
+
+.terminal-section .section-header {
+    background: var(--sentient-bg-card);
+}
+
+.terminal-stats {
+    font-size: 11px;
+    color: var(--sentient-text-muted);
+}
+
+.terminal-stats strong {
+    color: var(--sentient-text-primary);
+}
+
+.terminal-output {
+    padding: 16px;
+    font-family: var(--sentient-font-mono);
+    font-size: 12px;
+    line-height: 1.7;
+    max-height: 150px;
+    overflow-y: auto;
+}
+
+.terminal-line {
+    color: var(--sentient-text-secondary);
+    padding: 2px 0;
+}
+
+.terminal-line.highlight {
+    color: var(--sentient-accent);
+}
+
+.terminal-cursor {
+    display: inline-block;
+    width: 8px;
+    height: 14px;
+    background: var(--sentient-accent);
+    margin-left: 4px;
+    animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}
+
+/* =============================================================================
+   FLOATING PROGRESS PANEL
+   ============================================================================= */
+
+.floating-progress-panel {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: 400px;
+    background: var(--sentient-bg-card);
+    border: 1px solid var(--sentient-border-accent);
+    border-radius: var(--sentient-radius-lg);
+    box-shadow:
+        var(--sentient-shadow-lg),
+        0 0 30px var(--sentient-accent-dim);
+    z-index: 10000;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.floating-progress-panel.minimized {
+    width: 300px;
+}
+
+.floating-progress-panel.minimized .floating-body {
+    display: none;
+}
+
+.floating-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: var(--sentient-bg-tertiary);
+    border-bottom: 1px solid var(--sentient-border);
+}
+
+.floating-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.floating-icon {
+    font-size: 18px;
+    animation: pulse-glow 2s infinite;
+}
+
+@keyframes pulse-glow {
+    0%,
+    100% {
+        filter: drop-shadow(0 0 4px var(--sentient-accent-glow));
+    }
+    50% {
+        filter: drop-shadow(0 0 12px var(--sentient-accent));
+    }
+}
+
+.floating-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--sentient-text-primary);
+}
+
+.floating-controls {
+    display: flex;
+    gap: 6px;
+}
+
+.btn-minimize,
+.btn-close-floating {
+    width: 26px;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--sentient-bg-card);
+    border: none;
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-secondary);
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-minimize:hover,
+.btn-close-floating:hover {
+    background: var(--sentient-bg-card-hover);
+    color: var(--sentient-text-primary);
+}
+
+.floating-body {
+    padding: 16px;
+}
+
+.floating-status {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+#floating-status-text {
+    font-size: 13px;
+    color: var(--sentient-text-primary);
+}
+
+#floating-status-steps {
+    font-size: 12px;
+    color: var(--sentient-text-muted);
+}
+
+.floating-progress-bar {
+    height: 6px;
+    background: var(--sentient-bg-tertiary);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 8px;
+}
+
+.floating-progress-bar .progress-fill {
+    background: var(--sentient-accent);
+    box-shadow: 0 0 10px var(--sentient-accent-glow);
+}
+
+.floating-percentage {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--sentient-accent);
+    text-align: right;
+    margin-bottom: 12px;
+}
+
+.floating-log {
+    max-height: 120px;
+    overflow-y: auto;
+    background: var(--sentient-bg-primary);
+    border-radius: var(--sentient-radius-sm);
+    padding: 10px;
+    margin-bottom: 12px;
+}
+
+.floating-log-entry {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 4px 0;
+    font-size: 11px;
+    border-bottom: 1px solid var(--sentient-border);
+    animation: slide-in 0.3s ease;
+}
+
+.floating-log-entry:last-child {
+    border-bottom: none;
+}
+
+@keyframes slide-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.floating-terminal {
+    background: var(--sentient-bg-primary);
+    border-radius: var(--sentient-radius-sm);
+    padding: 10px;
+    font-family: var(--sentient-font-mono);
+    font-size: 11px;
+    max-height: 100px;
+    overflow-y: auto;
+    color: var(--sentient-text-muted);
+}
+
+.floating-terminal .llm-output {
+    color: var(--sentient-accent);
+}
+
+/* =============================================================================
+   MODAL STYLES
+   ============================================================================= */
+
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001;
+    padding: 24px;
+}
+
+.modal-container {
+    width: 100%;
+    max-width: 500px;
+    background: var(--sentient-bg-card);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-xl);
+    box-shadow: var(--sentient-shadow-lg);
+    overflow: hidden;
+}
+
+.modal-container.modal-lg {
+    max-width: 700px;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    background: var(--sentient-bg-tertiary);
+    border-bottom: 1px solid var(--sentient-border);
+}
+
+.modal-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--sentient-text-primary);
+    margin: 0;
+}
+
+.modal-close {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    border-radius: var(--sentient-radius-sm);
+    color: var(--sentient-text-secondary);
+    font-size: 24px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: var(--sentient-bg-card-hover);
+    color: var(--sentient-text-primary);
+}
+
+.modal-body {
+    padding: 20px;
+}
+
+/* =============================================================================
+   FORM STYLES
+   ============================================================================= */
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--sentient-text-primary);
+    margin-bottom: 8px;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+.intent-textarea {
+    width: 100%;
+    padding: 14px 16px;
+    background: var(--sentient-bg-input);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-md);
+    color: var(--sentient-text-primary);
+    font-family: var(--sentient-font);
+    font-size: 14px;
+    line-height: 1.6;
+    resize: vertical;
+    outline: none;
+    transition: all 0.2s ease;
+}
+
+.intent-textarea::placeholder {
+    color: var(--sentient-text-muted);
+}
+
+.intent-textarea:focus {
+    border-color: var(--sentient-accent);
+    box-shadow: 0 0 0 3px var(--sentient-accent-dim);
+}
+
+.form-select {
+    width: 100%;
+    padding: 10px 14px;
+    background: var(--sentient-bg-input);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-md);
+    color: var(--sentient-text-primary);
+    font-family: var(--sentient-font);
+    font-size: 14px;
+    outline: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.form-select:focus {
+    border-color: var(--sentient-accent);
+}
+
+.form-select option {
+    background: var(--sentient-bg-secondary);
+    color: var(--sentient-text-primary);
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 20px;
+}
+
+.btn-primary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: var(--sentient-accent);
+    border: none;
+    border-radius: var(--sentient-radius-md);
+    color: var(--sentient-text-dark);
+    font-family: var(--sentient-font);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-primary:hover {
+    background: var(--sentient-accent-hover);
+    box-shadow: 0 0 20px var(--sentient-accent-glow);
+}
+
+.btn-secondary {
+    padding: 10px 20px;
+    background: var(--sentient-bg-tertiary);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-md);
+    color: var(--sentient-text-primary);
+    font-family: var(--sentient-font);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-secondary:hover {
+    background: var(--sentient-bg-card-hover);
+    border-color: var(--sentient-border-light);
+}
+
+/* =============================================================================
+   SPINNER
+   ============================================================================= */
+
 .spinner {
     display: none;
     width: 16px;
     height: 16px;
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    border-top-color: #ffffff;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }
@@ -240,15 +1518,6 @@
     display: inline-block;
 }
 
-.spinner-large {
-    width: 40px;
-    height: 40px;
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    border-top-color: #6366f1;
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-}
-
 @keyframes spin {
     to {
         transform: rotate(360deg);
@@ -256,822 +1525,147 @@
 }
 
 /* =============================================================================
-   COMPILATION RESULT
+   TOAST NOTIFICATIONS
    ============================================================================= */
 
-.compilation-result {
-    margin-top: 20px;
-}
-
-.compiled-plan {
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    padding: 24px;
-}
-
-.plan-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    gap: 16px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    margin-bottom: 20px;
-}
-
-.plan-info h3 {
-    margin: 0 0 8px 0;
-    font-size: 20px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-.plan-info p {
-    margin: 0;
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.6);
-}
-
-.plan-meta {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.confidence-badge,
-.risk-badge,
-.duration-badge,
-.cost-badge {
-    padding: 6px 12px;
-    border-radius: 20px;
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.confidence-badge {
-    background: rgba(34, 197, 94, 0.2);
-    color: #22c55e;
-}
-
-.confidence-badge.confidence-low {
-    background: rgba(239, 68, 68, 0.2);
-    color: #ef4444;
-}
-
-.confidence-badge.confidence-medium {
-    background: rgba(245, 158, 11, 0.2);
-    color: #f59e0b;
-}
-
-.risk-badge {
-    background: rgba(239, 68, 68, 0.2);
-    color: #ef4444;
-}
-
-.risk-badge.risk-low,
-.risk-badge.risk-none {
-    background: rgba(34, 197, 94, 0.2);
-    color: #22c55e;
-}
-
-.risk-badge.risk-medium {
-    background: rgba(245, 158, 11, 0.2);
-    color: #f59e0b;
-}
-
-.duration-badge {
-    background: rgba(59, 130, 246, 0.2);
-    color: #3b82f6;
-}
-
-.cost-badge {
-    background: rgba(168, 85, 247, 0.2);
-    color: #a855f7;
-}
-
-/* Alternatives Section */
-.alternatives-section {
-    margin-bottom: 24px;
-    padding: 20px;
-    background: rgba(245, 158, 11, 0.1);
-    border: 1px solid rgba(245, 158, 11, 0.2);
-    border-radius: 12px;
-}
-
-.alternatives-section h4 {
-    margin: 0 0 8px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #f59e0b;
-}
-
-.alternatives-note {
-    margin: 0 0 16px 0;
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.7);
-}
-
-.alternatives-list {
+.toast-container {
+    position: fixed;
+    top: 24px;
+    right: 24px;
     display: flex;
     flex-direction: column;
     gap: 12px;
+    z-index: 10002;
 }
 
-/* Plan Steps */
-.plan-steps {
-    margin-bottom: 24px;
-}
-
-.plan-steps h4 {
-    margin: 0 0 16px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-.steps-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.step-item {
+.toast {
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 12px 16px;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 8px;
-    border-left: 3px solid transparent;
+    padding: 14px 18px;
+    background: var(--sentient-bg-card);
+    border: 1px solid var(--sentient-border);
+    border-radius: var(--sentient-radius-md);
+    box-shadow: var(--sentient-shadow);
+    animation: toast-in 0.3s ease;
 }
 
-.step-item.priority-critical {
-    border-left-color: #ef4444;
+@keyframes toast-in {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
-.step-item.priority-high {
-    border-left-color: #f59e0b;
+.toast.toast-success {
+    border-color: var(--sentient-success);
 }
 
-.step-item.priority-medium {
-    border-left-color: #3b82f6;
+.toast.toast-error {
+    border-color: var(--sentient-error);
 }
 
-.step-item.priority-low {
-    border-left-color: #22c55e;
+.toast.toast-warning {
+    border-color: var(--sentient-warning);
 }
 
-.step-item.priority-optional {
-    border-left-color: rgba(255, 255, 255, 0.3);
-}
-
-.step-number {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    background: rgba(99, 102, 241, 0.2);
-    border-radius: 50%;
-    font-size: 12px;
-    font-weight: 600;
-    color: #6366f1;
-}
-
-.step-name {
-    flex: 1;
-    font-size: 14px;
-    color: #ffffff;
-}
-
-.step-keywords {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-}
-
-.keyword-tag {
-    padding: 2px 8px;
-    background: rgba(99, 102, 241, 0.2);
-    border-radius: 4px;
-    font-size: 10px;
-    font-family: 'Fira Code', monospace;
-    color: #a5b4fc;
-}
-
-.step-risk {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 10px;
-    font-weight: 600;
-}
-
-.step-risk.risk-none,
-.step-risk.risk-low {
-    background: rgba(34, 197, 94, 0.2);
-    color: #22c55e;
-}
-
-.step-risk.risk-medium {
-    background: rgba(245, 158, 11, 0.2);
-    color: #f59e0b;
-}
-
-.step-risk.risk-high,
-.step-risk.risk-critical {
-    background: rgba(239, 68, 68, 0.2);
-    color: #ef4444;
-}
-
-/* Resource Estimates */
-.resource-estimates {
-    margin-bottom: 24px;
-}
-
-.resource-estimates h4 {
-    margin: 0 0 16px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-.estimates-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 12px;
-}
-
-.estimate-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    padding: 16px;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 8px;
-    text-align: center;
-}
-
-.estimate-icon {
-    font-size: 24px;
-}
-
-.estimate-label {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.estimate-value {
-    font-size: 16px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-/* Integrations Section */
-.integrations-section {
-    margin-bottom: 24px;
-}
-
-.integrations-section h4 {
-    margin: 0 0 16px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-.integrations-list {
-    display: flex;
-    gap: 24px;
-    flex-wrap: wrap;
-}
-
-.integrations-list h5 {
-    margin: 0 0 8px 0;
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.5);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.integration-tags {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-
-.integration-tag {
-    padding: 6px 12px;
-    background: rgba(99, 102, 241, 0.2);
-    border-radius: 20px;
-    font-size: 12px;
-    color: #a5b4fc;
-}
-
-.integration-tag.api-tag {
-    background: rgba(168, 85, 247, 0.2);
-    color: #c4b5fd;
-}
-
-/* Risk Assessment */
-.risk-assessment {
-    margin-bottom: 24px;
-    padding: 16px;
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.2);
-    border-radius: 12px;
-}
-
-.risk-assessment h4 {
-    margin: 0 0 12px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #ef4444;
-}
-
-.risks-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.risk-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
-}
-
-.risk-icon {
-    font-size: 18px;
-}
-
-.risk-description {
-    flex: 1;
+.toast-message {
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--sentient-text-primary);
 }
 
-.risk-probability {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-/* Generated Code */
-.generated-code {
-    margin-bottom: 24px;
-}
-
-.generated-code summary {
-    padding: 12px 16px;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.8);
-    transition: background 0.2s ease;
-}
-
-.generated-code summary:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.generated-code[open] summary {
-    border-radius: 8px 8px 0 0;
-}
-
-.code-preview {
-    margin: 0;
-    padding: 16px;
-    background: #0d1117;
-    border-radius: 0 0 8px 8px;
-    overflow-x: auto;
-    font-size: 12px;
-    line-height: 1.6;
-}
-
-.code-preview code {
-    font-family: 'Fira Code', 'Consolas', monospace;
-    color: #c9d1d9;
-}
-
-.btn-copy-code {
-    margin-top: 8px;
-    padding: 8px 16px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-copy-code:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #ffffff;
-}
-
-/* Plan Actions */
-.plan-actions {
-    display: flex;
-    gap: 12px;
-    justify-content: flex-end;
-    padding-top: 20px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.btn-primary,
-.btn-secondary {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 20px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-primary {
-    background: #22c55e;
+.toast-close {
+    background: transparent;
     border: none;
-    color: #ffffff;
+    color: var(--sentient-text-muted);
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
 }
 
-.btn-primary:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
-}
-
-.btn-primary:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.btn-secondary {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
-}
-
-.btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.2);
+.toast-close:hover {
+    color: var(--sentient-text-primary);
 }
 
 /* =============================================================================
-   TASKS SECTION
+   SCROLLBAR STYLES
    ============================================================================= */
 
-.tasks-section {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 16px;
-    padding: 24px;
-}
-
-.section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-bottom: 20px;
-}
-
-.section-title {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.section-title h2 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-.section-actions {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-}
-
-.filter-tabs {
-    display: flex;
-    gap: 4px;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 4px;
-    border-radius: 8px;
-}
-
-.filter-tab {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 16px;
-    background: transparent;
-    border: none;
-    border-radius: 6px;
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 13px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.filter-tab:hover {
-    color: rgba(255, 255, 255, 0.9);
-}
-
-.filter-tab.active {
-    background: rgba(99, 102, 241, 0.2);
-    color: #a5b4fc;
-}
-
-.filter-tab .count {
-    padding: 2px 6px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    font-size: 11px;
-}
-
-.filter-tab.active .count {
-    background: rgba(99, 102, 241, 0.3);
-}
-
-.btn-refresh {
-    padding: 8px 12px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
-    color: rgba(255, 255, 255, 0.7);
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-refresh:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #ffffff;
-}
-
-/* Task List */
-.task-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.loading-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    padding: 60px 20px;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-/* Task Item */
-.autotask-item {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    padding: 20px;
-    transition: all 0.2s ease;
-}
-
-.autotask-item:hover {
-    border-color: rgba(99, 102, 241, 0.3);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-}
-
-.autotask-item[data-status="running"] {
-    border-left: 3px solid #3b82f6;
-}
-
-.autotask-item[data-status="pending-approval"],
-.autotask-item[data-status="waiting-decision"] {
-    border-left: 3px solid #f59e0b;
-}
-
-.autotask-item[data-status="completed"] {
-    border-left: 3px solid #22c55e;
-}
-
-.autotask-item[data-status="failed"] {
-    border-left: 3px solid #ef4444;
-}
-
-.task-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 16px;
-    margin-bottom: 12px;
-}
-
-.task-info {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.task-status-badge {
-    padding: 4px 10px;
-    border-radius: 20px;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.task-status-badge.status-draft {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.6);
-}
-
-.task-status-badge.status-compiling {
-    background: rgba(168, 85, 247, 0.2);
-    color: #a855f7;
-}
-
-.task-status-badge.status-ready {
-    background: rgba(59, 130, 246, 0.2);
-    color: #3b82f6;
-}
-
-.task-status-badge.status-running {
-    background: rgba(59, 130, 246, 0.2);
-    color: #3b82f6;
-    animation: pulse 2s infinite;
-}
-
-.task-status-badge.status-paused {
-    background: rgba(245, 158, 11, 0.2);
-    color: #f59e0b;
-}
-
-.task-status-badge.status-pending-approval,
-.task-status-badge.status-waiting-decision {
-    background: rgba(245, 158, 11, 0.2);
-    color: #f59e0b;
-}
-
-.task-status-badge.status-completed {
-    background: rgba(34, 197, 94, 0.2);
-    color: #22c55e;
-}
-
-.task-status-badge.status-failed {
-    background: rgba(239, 68, 68, 0.2);
-    color: #ef4444;
-}
-
-.task-status-badge.status-cancelled {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.5);
-}
-
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.6;
-    }
-}
-
-.task-title {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-.task-priority {
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.task-priority.priority-critical {
-    background: rgba(239, 68, 68, 0.2);
-    color: #ef4444;
-}
-
-.task-priority.priority-high {
-    background: rgba(245, 158, 11, 0.2);
-    color: #f59e0b;
-}
-
-.task-priority.priority-medium {
-    background: rgba(59, 130, 246, 0.2);
-    color: #3b82f6;
-}
-
-.task-priority.priority-low {
-    background: rgba(34, 197, 94, 0.2);
-    color: #22c55e;
-}
-
-.task-priority.priority-background {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.task-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-/* Progress Bar */
-.task-progress {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 12px;
-}
-
-.progress-bar {
-    flex: 1;
+.autotask-container ::-webkit-scrollbar {
+    width: 6px;
     height: 6px;
-    background: rgba(255, 255, 255, 0.1);
+}
+
+.autotask-container ::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.autotask-container ::-webkit-scrollbar-thumb {
+    background: var(--sentient-border);
     border-radius: 3px;
-    overflow: hidden;
 }
 
-.progress-fill {
-    height: 100%;
-    background: #6366f1;
-    border-radius: 3px;
-    transition: width 0.3s ease;
+.autotask-container ::-webkit-scrollbar-thumb:hover {
+    background: var(--sentient-border-light);
 }
 
-.progress-text {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.6);
-    white-space: nowrap;
+/* =============================================================================
+   RESPONSIVE
+   ============================================================================= */
+
+@media (max-width: 1200px) {
+    .main-content {
+        grid-template-columns: 350px 1fr;
+    }
 }
 
-/* Task Details */
-.task-details {
-    margin-bottom: 16px;
+@media (max-width: 992px) {
+    .main-content {
+        grid-template-columns: 1fr;
+    }
+
+    .intent-list-panel {
+        border-right: none;
+        border-bottom: 1px solid var(--sentient-border);
+        max-height: 400px;
+    }
+
+    .topbar-center {
+        display: none;
+    }
 }
 
-.task-intent {
-    margin: 0 0 12px 0;
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.7);
-    line-height: 1.5;
-}
+@media (max-width: 768px) {
+    .autotask-topbar {
+        flex-wrap: wrap;
+        gap: 12px;
+        padding: 12px 16px;
+    }
 
-.current-step {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 12px;
-    background: rgba(59, 130, 246, 0.1);
-    border-radius: 8px;
-    margin-bottom: 12px;
-}
+    .topbar-left,
+    .topbar-right {
+        width: 100%;
+        justify-content: space-between;
+    }
 
-.step-indicator {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 13px;
-    color: #3b82f6;
-}
+    .status-filters {
+        padding: 12px 16px;
+        gap: 8px;
+    }
 
-.step-status {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.5);
-}
+    .status-filter .filter-label {
+        display: none;
+    }
 
-/* Alerts */
-.pending-decision-alert,
-.pending-approval-alert {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    border-radius: 8px;
-    margin-bottom: 12px;
+    .floating-progress-panel {
+        left: 12px;
+        right: 12px;
+        width: auto;
+        bottom: 12px;
+    }
 }
-
-.pending-decision-alert {
-    background: rgba(168, 85, 247, 0.1);
-    border: 1px solid rgba(168, 85, 247, 0.2);
-}
-
-.pending-
diff --git a/ui/suite/tasks/autotask.html b/ui/suite/tasks/autotask.html
index 027def1..562e0f9 100644
--- a/ui/suite/tasks/autotask.html
+++ b/ui/suite/tasks/autotask.html
@@ -1,492 +1,479 @@
-<div class="autotask-container">
-    <!-- Header -->
-    <div class="autotask-header">
-        <div class="header-content">
-            <h1 class="autotask-title">
-                <span class="autotask-icon">⚡</span>
-                Auto Tasks
-                <span class="beta-badge">PREMIUM</span>
-            </h1>
-            <p class="autotask-subtitle">Intelligent self-executing tasks powered by AI</p>
+<div class="autotask-container" data-theme="sentient">
+    <!-- Top Navigation Bar -->
+    <div class="autotask-topbar">
+        <div class="topbar-left">
+            <div class="nav-tabs">
+                <button class="nav-tab active">Dashboard</button>
+                <button class="nav-tab">Analytics</button>
+            </div>
         </div>
-        <div class="header-stats" id="autotask-stats">
-            <span class="stat-item">
-                <span class="stat-value" id="stat-running">0</span>
-                <span class="stat-label">Running</span>
-            </span>
-            <span class="stat-item">
-                <span class="stat-value" id="stat-pending">0</span>
-                <span class="stat-label">Pending</span>
-            </span>
-            <span class="stat-item">
-                <span class="stat-value" id="stat-completed">0</span>
-                <span class="stat-label">Completed</span>
-            </span>
-            <span class="stat-item highlight">
-                <span class="stat-value" id="stat-approval">0</span>
-                <span class="stat-label">Need Approval</span>
-            </span>
+        <div class="topbar-center">
+            <div class="search-container">
+                <span class="search-icon">🔍</span>
+                <input
+                    type="text"
+                    class="search-input"
+                    placeholder="Search Intents"
+                    id="intent-search"
+                />
+            </div>
+        </div>
+        <div class="topbar-right">
+            <button class="btn-new-intent" onclick="showNewIntentModal()">
+                <span>New Intent</span>
+            </button>
+            <button class="btn-settings">Settings</button>
+            <div class="user-profile">
+                <div class="user-avatar">👤</div>
+                <span class="user-name">Profile 1</span>
+                <span class="dropdown-arrow">▼</span>
+            </div>
+            <div class="notification-bell">
+                <span class="bell-icon">🔔</span>
+                <span class="notification-count" id="notification-count"
+                    >3</span
+                >
+            </div>
         </div>
     </div>
 
-    <!-- Intent Input Section -->
-    <div class="intent-section">
-        <div class="intent-header">
-            <span class="section-icon">💡</span>
-            <h2>What would you like to accomplish?</h2>
+    <!-- Status Filter Pills -->
+    <div class="status-filters">
+        <button
+            class="status-filter"
+            data-filter="complete"
+            onclick="filterByStatus('complete', this)"
+        >
+            <span class="filter-icon">✓</span>
+            <span class="filter-label">Complete</span>
+            <span class="filter-count" id="count-complete">8</span>
+        </button>
+        <button
+            class="status-filter active"
+            data-filter="active"
+            onclick="filterByStatus('active', this)"
+        >
+            <span class="filter-icon">⚡</span>
+            <span class="filter-label">Active Intents</span>
+            <span class="filter-count" id="count-active">12</span>
+        </button>
+        <button
+            class="status-filter"
+            data-filter="awaiting"
+            onclick="filterByStatus('awaiting', this)"
+        >
+            <span class="filter-icon">⏳</span>
+            <span class="filter-label">Awaiting Decision</span>
+            <span class="filter-count" id="count-awaiting">5</span>
+        </button>
+        <button
+            class="status-filter"
+            data-filter="paused"
+            onclick="filterByStatus('paused', this)"
+        >
+            <span class="filter-icon">⏸</span>
+            <span class="filter-label">Paused</span>
+            <span class="filter-count" id="count-paused">2</span>
+        </button>
+        <button
+            class="status-filter"
+            data-filter="blocked"
+            onclick="filterByStatus('blocked', this)"
+        >
+            <span class="filter-icon">⚠</span>
+            <span class="filter-label">Blocked/Issues</span>
+            <span class="filter-count" id="count-blocked">1</span>
+        </button>
+        <div class="time-saved">
+            <span class="time-label">Active Time Saved:</span>
+            <span class="time-value" id="time-saved">23.5 hrs this week</span>
         </div>
-        <form class="intent-form" id="intent-form" hx-post="/api/autotask/create" hx-ext="json-enc" hx-target="#compilation-result" hx-indicator="#compile-spinner">
-            <div class="intent-input-wrapper">
-                <textarea
-                    name="intent"
-                    id="intent-input"
-                    class="intent-input"
-                    placeholder="Describe your task in natural language...&#10;&#10;Examples:&#10;• Make a financial CRM for Deloitte with client management and reporting&#10;• Create a website that collects leads and sends them to Salesforce&#10;• Build an automated email campaign for product launch&#10;• Analyze sales data and generate weekly reports"
-                    rows="4"
-                    required
-                ></textarea>
-                <div class="intent-actions">
-                    <select name="execution_mode" class="execution-mode-select">
-                        <option value="semi-automatic">Semi-Automatic (Recommended)</option>
-                        <option value="supervised">Supervised (Step-by-step)</option>
-                        <option value="fully-automatic">Fully Automatic</option>
-                        <option value="dry-run">Dry Run (Simulate Only)</option>
-                    </select>
-                    <select name="priority" class="priority-select">
-                        <option value="medium">Medium Priority</option>
-                        <option value="critical">Critical</option>
-                        <option value="high">High</option>
-                        <option value="low">Low</option>
-                        <option value="background">Background</option>
-                    </select>
-                    <button type="submit" class="btn-create">
-                        <span class="btn-icon">🚀</span>
-                        Create & Execute
-                        <span class="spinner" id="compile-spinner"></span>
-                    </button>
-                </div>
-            </div>
-        </form>
-
-        <!-- Compilation Result -->
-        <div id="compilation-result" class="compilation-result"></div>
     </div>
 
-    <!-- Active Tasks Section -->
-    <div class="tasks-section">
-        <div class="section-header">
-            <div class="section-title">
-                <span class="section-icon">📋</span>
-                <h2>Active Tasks</h2>
-            </div>
-            <div class="section-actions">
-                <div class="filter-tabs">
-                    <button class="filter-tab active" data-filter="all" onclick="filterTasks('all', this)">
-                        All <span class="count" id="count-all">0</span>
-                    </button>
-                    <button class="filter-tab" data-filter="running" onclick="filterTasks('running', this)">
-                        Running <span class="count" id="count-running">0</span>
-                    </button>
-                    <button class="filter-tab" data-filter="approval" onclick="filterTasks('approval', this)">
-                        Need Approval <span class="count" id="count-approval">0</span>
-                    </button>
-                    <button class="filter-tab" data-filter="decision" onclick="filterTasks('decision', this)">
-                        Decisions <span class="count" id="count-decision">0</span>
-                    </button>
+    <!-- Main Content Area -->
+    <div class="main-content">
+        <!-- Left Panel: Intent List -->
+        <div class="intent-list-panel">
+            <div
+                class="intent-list"
+                id="intent-list"
+                hx-get="/api/autotask/list"
+                hx-trigger="load, every 10s"
+                hx-swap="innerHTML"
+            >
+                <!-- Intent cards will be loaded here -->
+                <div class="loading-state">
+                    <div class="spinner"></div>
+                    <span>Loading intents...</span>
                 </div>
-                <button class="btn-refresh" onclick="refreshTasks()" title="Refresh">
-                    <span>🔄</span>
+            </div>
+        </div>
+
+        <!-- Right Panel: Intent Detail -->
+        <div class="intent-detail-panel" id="intent-detail-panel">
+            <div class="detail-placeholder">
+                <span class="placeholder-icon">📋</span>
+                <p>Select an intent to view details</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- New Intent Modal -->
+    <div class="modal-overlay" id="new-intent-modal" style="display: none">
+        <div class="modal-container">
+            <div class="modal-header">
+                <h2>New Intent</h2>
+                <button class="modal-close" onclick="closeNewIntentModal()">
+                    ×
                 </button>
             </div>
-        </div>
+            <div class="modal-body">
+                <form
+                    id="new-intent-form"
+                    hx-post="/api/autotask/create"
+                    hx-ext="json-enc"
+                    hx-target="#intent-list"
+                    hx-swap="afterbegin"
+                >
+                    <div class="form-group">
+                        <label for="intent-input"
+                            >What would you like to accomplish?</label
+                        >
+                        <textarea
+                            id="intent-input"
+                            name="intent"
+                            class="intent-textarea"
+                            placeholder="Describe your task in natural language...
 
-        <!-- Task List -->
-        <div class="task-list" id="task-list" hx-get="/api/autotask/list" hx-trigger="load, every 5s" hx-swap="innerHTML">
-            <div class="loading-placeholder">
-                <div class="spinner-large"></div>
-                <p>Loading tasks...</p>
+Examples:
+• Make a financial CRM for Deloitte
+• Create a website that collects leads
+• Build an automated email campaign
+• Analyze sales data and generate reports"
+                            rows="6"
+                            required
+                        ></textarea>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Execution Mode</label>
+                            <select name="execution_mode" class="form-select">
+                                <option value="semi-automatic">
+                                    Semi-Automatic
+                                </option>
+                                <option value="supervised">Supervised</option>
+                                <option value="fully-automatic">
+                                    Fully Automatic
+                                </option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>Priority</label>
+                            <select name="priority" class="form-select">
+                                <option value="medium">Medium</option>
+                                <option value="high">High</option>
+                                <option value="low">Low</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-actions">
+                        <button
+                            type="button"
+                            class="btn-secondary"
+                            onclick="closeNewIntentModal()"
+                        >
+                            Cancel
+                        </button>
+                        <button type="submit" class="btn-primary">
+                            <span>Create Intent</span>
+                            <span class="spinner" id="create-spinner"></span>
+                        </button>
+                    </div>
+                </form>
             </div>
         </div>
     </div>
 
-    <!-- Pending Decisions Modal -->
-    <div class="modal" id="decision-modal" style="display: none;">
-        <div class="modal-backdrop" onclick="closeDecisionModal()"></div>
-        <div class="modal-content decision-modal-content">
+    <!-- Decision Modal -->
+    <div class="modal-overlay" id="decision-modal" style="display: none">
+        <div class="modal-container modal-lg">
             <div class="modal-header">
-                <h3><span class="modal-icon">🤔</span> Decision Required</h3>
-                <button class="modal-close" onclick="closeDecisionModal()">×</button>
+                <h2>Decision Required</h2>
+                <button class="modal-close" onclick="closeDecisionModal()">
+                    ×
+                </button>
             </div>
             <div class="modal-body" id="decision-content">
                 <!-- Decision content loaded dynamically -->
             </div>
         </div>
     </div>
+</div>
 
-    <!-- Approval Modal -->
-    <div class="modal" id="approval-modal" style="display: none;">
-        <div class="modal-backdrop" onclick="closeApprovalModal()"></div>
-        <div class="modal-content approval-modal-content">
-            <div class="modal-header">
-                <h3><span class="modal-icon">✅</span> Approval Required</h3>
-                <button class="modal-close" onclick="closeApprovalModal()">×</button>
+<!-- Intent Card Template -->
+<template id="intent-card-template">
+    <div
+        class="intent-card"
+        data-intent-id="${id}"
+        data-status="${status}"
+        onclick="selectIntent('${id}')"
+    >
+        <div class="intent-card-header">
+            <h3 class="intent-title">${title}</h3>
+            <div class="intent-status-indicator ${status_class}"></div>
+        </div>
+
+        <div class="intent-progress">
+            <div class="progress-bar">
+                <div class="progress-fill" style="width: ${progress}%"></div>
             </div>
-            <div class="modal-body" id="approval-content">
-                <!-- Approval content loaded dynamically -->
+            <div class="progress-info">
+                <span class="progress-steps"
+                    >${current_step}/${total_steps} Steps</span
+                >
+                <span class="progress-percent">${progress}%</span>
+            </div>
+        </div>
+
+        <div class="intent-status-section">
+            <div class="status-label">STATUS</div>
+            <div class="status-row">
+                <span class="status-icon">${status_icon}</span>
+                <span class="status-text">${status_display}</span>
+            </div>
+        </div>
+
+        <div class="intent-current-task">
+            <div class="current-task-label">${current_task_name}</div>
+            <div class="current-task-desc">${current_task_description}</div>
+        </div>
+
+        <div class="intent-integrity">
+            <div class="integrity-label">INTEGRITY</div>
+            <div class="integrity-items">
+                <span class="integrity-item">
+                    <span class="item-icon">🕐</span>
+                    Started ${started_ago}
+                </span>
+                <span class="integrity-item">
+                    <span class="item-icon">📅</span>
+                    Due ${due_date}
+                </span>
+                <span class="integrity-badge health-${health_level}">
+                    Intent Health
+                    <span class="health-value">${health_percent}%</span>
+                </span>
+            </div>
+        </div>
+
+        <button
+            class="btn-detail-view"
+            onclick="event.stopPropagation(); viewDetailedIntent('${id}')"
+        >
+            ${action_button_text}
+        </button>
+    </div>
+</template>
+
+<!-- Intent Detail Template -->
+<template id="intent-detail-template">
+    <div class="detail-view">
+        <!-- Header -->
+        <div class="detail-header">
+            <button class="btn-back" onclick="closeDetailPanel()">
+                <span>◀</span>
+            </button>
+            <h2 class="detail-title">${title}</h2>
+            <div class="detail-status">
+                <span class="status-icon">${status_icon}</span>
+                <span class="status-label">${status_display}</span>
+            </div>
+            <button class="btn-pause" onclick="togglePause('${id}')">
+                <span class="pause-icon">⏸</span>
+            </button>
+        </div>
+
+        <!-- Progress Bar -->
+        <div class="detail-progress">
+            <div class="progress-bar large">
+                <div class="progress-fill" style="width: ${progress}%"></div>
+            </div>
+            <div class="progress-stats">
+                <span class="progress-steps"
+                    >${current_step}/${total_steps} Steps</span
+                >
+                <span class="progress-percent">${progress}%</span>
+            </div>
+        </div>
+
+        <!-- Decision Required Panel -->
+        <div
+            class="decision-panel"
+            id="decision-panel-${id}"
+            style="display: ${show_decision}"
+        >
+            <div class="decision-header">
+                <span class="decision-badge">DECISION REQUIRED</span>
+                <span class="decision-title">${decision_title}</span>
+            </div>
+            <div class="decision-body">
+                <div class="decision-actions">
+                    <button
+                        class="btn-decision-primary"
+                        onclick="openDecisionModal('${id}')"
+                    >
+                        Make Decision
+                    </button>
+                    <button
+                        class="btn-decision-secondary"
+                        onclick="viewDecisionContext('${id}')"
+                    >
+                        View Context Details
+                    </button>
+                </div>
+                <div class="decision-context">
+                    <div class="context-label">Context:</div>
+                    <p class="context-text">${decision_context}</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Status Section -->
+        <div class="detail-section">
+            <div class="section-header">
+                <span class="section-title">STATUS</span>
+                <span class="section-runtime">Runtime: ${runtime}</span>
+            </div>
+            <div class="status-current-task">
+                <span class="task-name">${current_task_name}</span>
+                <span class="task-estimate">Estimated: ${estimated_time}</span>
+            </div>
+            <div class="status-steps-preview">
+                <div class="step-item active">
+                    <span class="step-dot"></span>
+                    <span class="step-name">${next_step_name}</span>
+                </div>
+                <div class="step-item pending">
+                    <span class="step-dot"></span>
+                    <span class="step-name"
+                        >Decision Point Coming (Step ${decision_step})</span
+                    >
+                    <span class="step-note">${decision_note}</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Progress Log Section -->
+        <div class="detail-section">
+            <div class="section-header">
+                <span class="section-title">PROGRESS LOG</span>
+            </div>
+            <div class="progress-log" id="progress-log-${id}">
+                <!-- Log entries will be populated here -->
+            </div>
+        </div>
+
+        <!-- Terminal Activity Section -->
+        <div class="detail-section terminal-section">
+            <div class="section-header">
+                <span class="section-title"
+                    >TERMINAL (LIVE AGENT ACTIVITY)</span
+                >
+                <span class="terminal-stats">
+                    Processed: <strong>${processed_count}</strong> data points /
+                    Processing speed: <strong>${processing_speed}</strong> /
+                    Estimated completion:
+                    <strong>${estimated_completion}</strong>
+                </span>
+            </div>
+            <div class="terminal-output" id="terminal-${id}">
+                <div class="terminal-line">
+                    Synthesizing competitive insights...
+                </div>
+                <div class="terminal-line">
+                    Cross-referencing pricing data...
+                </div>
+                <!-- More terminal lines will stream here -->
+            </div>
+            <div class="terminal-cursor"></div>
+        </div>
+    </div>
+</template>
+
+<!-- Progress Log Entry Template -->
+<template id="progress-log-entry-template">
+    <div class="log-entry ${expanded_class}">
+        <div class="log-entry-header" onclick="toggleLogEntry(this)">
+            <span class="log-icon ${status_class}">●</span>
+            <span class="log-title">${title}</span>
+            <span class="log-expand">▶</span>
+            <span class="log-step-badge">${step_label}</span>
+        </div>
+        <div class="log-entry-body">
+            <div class="log-sub-entries">
+                <!-- Sub entries -->
             </div>
         </div>
     </div>
+</template>
 
-    <!-- Simulation Preview Modal -->
-    <div class="modal" id="simulation-modal" style="display: none;">
-        <div class="modal-backdrop" onclick="closeSimulationModal()"></div>
-        <div class="modal-content simulation-modal-content">
-            <div class="modal-header">
-                <h3><span class="modal-icon">🔮</span> Impact Simulation</h3>
-                <button class="modal-close" onclick="closeSimulationModal()">×</button>
-            </div>
-            <div class="modal-body" id="simulation-content">
-                <!-- Simulation content loaded dynamically -->
-            </div>
+<!-- Progress Log Sub-Entry Template -->
+<template id="progress-log-subentry-template">
+    <div class="log-sub-entry">
+        <span class="sub-icon ${status_class}">●</span>
+        <span class="sub-text">${text}</span>
+        <span class="sub-duration">Duration: ${duration}</span>
+        <span class="sub-check">${check_icon}</span>
+    </div>
+</template>
+
+<!-- Floating Progress Panel (for active task) -->
+<div
+    class="floating-progress-panel"
+    id="floating-progress"
+    style="display: none"
+>
+    <div class="floating-header">
+        <div class="floating-title">
+            <span class="floating-icon">⚡</span>
+            <span class="floating-name" id="floating-task-name"
+                >Processing...</span
+            >
+        </div>
+        <div class="floating-controls">
+            <button class="btn-minimize" onclick="minimizeFloatingPanel()">
+                −
+            </button>
+            <button class="btn-close-floating" onclick="closeFloatingPanel()">
+                ×
+            </button>
+        </div>
+    </div>
+    <div class="floating-body">
+        <div class="floating-status">
+            <span class="status-text" id="floating-status-text"
+                >Initializing...</span
+            >
+            <span class="status-steps" id="floating-status-steps">0/0</span>
+        </div>
+        <div class="floating-progress-bar">
+            <div
+                class="progress-fill"
+                id="floating-progress-fill"
+                style="width: 0%"
+            ></div>
+        </div>
+        <div class="floating-percentage" id="floating-percentage">0%</div>
+        <div class="floating-log" id="floating-log">
+            <!-- Real-time log entries -->
+        </div>
+        <div class="floating-terminal" id="floating-terminal">
+            <!-- LLM output streaming -->
         </div>
     </div>
 </div>
 
-<!-- Task Item Template (for reference, actual rendering done server-side) -->
-<template id="task-item-template">
-    <div class="autotask-item" data-task-id="${id}" data-status="${status}">
-        <div class="task-header">
-            <div class="task-info">
-                <div class="task-status-badge status-${status}">${status}</div>
-                <h4 class="task-title">${title}</h4>
-                <span class="task-priority priority-${priority}">${priority}</span>
-            </div>
-            <div class="task-meta">
-                <span class="task-time" title="Created">${created_at}</span>
-                <span class="task-mode">${execution_mode}</span>
-            </div>
-        </div>
+<!-- Toast Container -->
+<div class="toast-container" id="toast-container"></div>
 
-        <div class="task-progress">
-            <div class="progress-bar">
-                <div class="progress-fill" style="width: ${progress}%"></div>
-            </div>
-            <span class="progress-text">${current_step}/${total_steps} steps (${progress}%)</span>
-        </div>
-
-        <div class="task-details">
-            <p class="task-intent">${intent}</p>
-
-            <!-- Current Step Info -->
-            <div class="current-step" style="display: ${show_current_step}">
-                <div class="step-indicator">
-                    <span class="step-icon">▶️</span>
-                    <span class="step-name">Step ${current_step}: ${current_step_name}</span>
-                </div>
-                <div class="step-status">${current_step_status}</div>
-            </div>
-
-            <!-- Pending Decision Alert -->
-            <div class="pending-decision-alert" style="display: ${show_decision}">
-                <span class="alert-icon">🤔</span>
-                <span class="alert-text">${decision_count} decision(s) pending</span>
-                <button class="btn-view-decisions" onclick="viewDecisions('${id}')">View & Decide</button>
-            </div>
-
-            <!-- Pending Approval Alert -->
-            <div class="pending-approval-alert" style="display: ${show_approval}">
-                <span class="alert-icon">⚠️</span>
-                <span class="alert-text">${approval_count} approval(s) required</span>
-                <button class="btn-view-approvals" onclick="viewApprovals('${id}')">Review & Approve</button>
-            </div>
-
-            <!-- Risk Summary -->
-            <div class="risk-summary" style="display: ${show_risk}">
-                <span class="risk-icon risk-${risk_level}">⚡</span>
-                <span class="risk-text">Risk Level: ${risk_level}</span>
-            </div>
-        </div>
-
-        <div class="task-actions">
-            <button class="btn-action btn-view" onclick="viewTaskDetails('${id}')" title="View Details">
-                <span>👁️</span> Details
-            </button>
-            <button class="btn-action btn-simulate" onclick="simulateTask('${id}')" title="Simulate Impact" style="display: ${show_simulate}">
-                <span>🔮</span> Simulate
-            </button>
-            <button class="btn-action btn-pause" onclick="pauseTask('${id}')" title="Pause" style="display: ${show_pause}">
-                <span>⏸️</span> Pause
-            </button>
-            <button class="btn-action btn-resume" onclick="resumeTask('${id}')" title="Resume" style="display: ${show_resume}">
-                <span>▶️</span> Resume
-            </button>
-            <button class="btn-action btn-cancel" onclick="cancelTask('${id}')" title="Cancel">
-                <span>❌</span> Cancel
-            </button>
-        </div>
-
-        <!-- Execution Log (expandable) -->
-        <details class="execution-log">
-            <summary>Execution Log (${log_count} entries)</summary>
-            <div class="log-entries" id="log-${id}">
-                <!-- Log entries loaded on expand -->
-            </div>
-        </details>
-    </div>
-</template>
-
-<!-- Compilation Result Template -->
-<template id="compilation-result-template">
-    <div class="compiled-plan">
-        <div class="plan-header">
-            <div class="plan-info">
-                <h3>${plan_name}</h3>
-                <p>${plan_description}</p>
-            </div>
-            <div class="plan-meta">
-                <span class="confidence-badge confidence-${confidence_level}">
-                    Confidence: ${confidence}%
-                </span>
-                <span class="risk-badge risk-${risk_level}">
-                    Risk: ${risk_level}
-                </span>
-                <span class="duration-badge">
-                    Est. Duration: ${estimated_duration}
-                </span>
-                <span class="cost-badge">
-                    Est. Cost: $${estimated_cost}
-                </span>
-            </div>
-        </div>
-
-        <!-- Alternatives (if ambiguous) -->
-        <div class="alternatives-section" style="display: ${show_alternatives}">
-            <h4>🔀 Alternative Approaches</h4>
-            <p class="alternatives-note</h4>">The intent was ambiguous. Please choose your preferred approach:</p>
-            <div class="alternatives-list">
-                ${alternatives_html}
-            </div>
-        </div>
-
-        <!-- Execution Plan Steps -->
-        <div class="plan-steps">
-            <h4>📋 Execution Plan (${step_count} steps)</h4>
-            <div class="steps-list">
-                ${steps_html}
-            </div>
-        </div>
-
-        <!-- Resource Estimates -->
-        <div class="resource-estimates">
-            <h4>📊 Resource Estimates</h4>
-            <div class="estimates-grid">
-                <div class="estimate-item">
-                    <span class="estimate-icon">💻</span>
-                    <span class="estimate-label">Compute</span>
-                    <span class="estimate-value">${compute_hours} hours</span>
-                </div>
-                <div class="estimate-item">
-                    <span class="estimate-icon">💾</span>
-                    <span class="estimate-label">Storage</span>
-                    <span class="estimate-value">${storage_gb} GB</span>
-                </div>
-                <div class="estimate-item">
-                    <span class="estimate-icon">🌐</span>
-                    <span class="estimate-label">API Calls</span>
-                    <span class="estimate-value">${api_calls}</span>
-                </div>
-                <div class="estimate-item">
-                    <span class="estimate-icon">🤖</span>
-                    <span class="estimate-label">LLM Tokens</span>
-                    <span class="estimate-value">${llm_tokens}</span>
-                </div>
-            </div>
-        </div>
-
-        <!-- MCP Servers & APIs -->
-        <div class="integrations-section" style="display: ${show_integrations}">
-            <h4></h4>🔌 Integrations Required</h4>
-            <div class="integrations-list">
-                <div class="mcp-servers" style="display: ${show_mcp}">
-                    <h5>MCP Servers</h5>
-                    <div class="integration-tags">${mcp_servers_html}</div>
-                </div>
-                <div class="external-apis" style="display: ${show_apis}">
-                    <h5>External APIs</h5>
-                    <div class="integration-tags">${external_apis_html}</div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Risk Assessment -->
-        <div class="risk-assessment" style="display: ${show_risks}">
-            <h4>⚠️ Risk Assessment</h4>
-            <div class="risks-list">
-                ${risks_html}
-            </div>
-        </div>
-
-        <!-- Generated BASIC Code (collapsible) -->
-        <details class="generated-code">
-            <summary>📝 Generated BASIC Program (${code_lines} lines)</summary>
-            <pre class="code-preview"><code>${basic_program}</code></pre>
-            <button class="btn-copy-code" onclick="copyGeneratedCode()">📋 Copy Code</button>
-        </details>
-
-        <!-- Action Buttons -->
-        <div class="plan-actions">
-            <button class="btn-secondary" onclick="discardPlan()">
-                <span>🗑️</span> Discard
-            </button>
-            <button class="btn-secondary" onclick="editPlan()">
-                <span>✏️</span> Edit Plan
-            </button>
-            <button class="btn-secondary" onclick="simulatePlan('${plan_id}')">
-                <span>🔮</span> Simulate First
-            </button>
-            <button class="btn-primary" onclick="executePlan('${plan_id}')" ${execute_disabled}>
-                <span>🚀</span> Execute Plan
-            </button>
-        </div>
-    </div>
-</template>
-
-<!-- Decision Option Template -->
-<template id="decision-option-template">
-    <div class="decision-option" data-option-id="${id}">
-        <div class="option-header">
-            <input type="radio" name="decision_choice" value="${id}" id="option-${id}">
-            <label for="option-${id}">
-                <span class="option-label">${label}</span>
-                <span class="recommended-badge" style="display: ${show_recommended}">Recommended</span>
-            </label>
-        </div>
-        <p class="option-description">${description}</p>
-        <div class="option-details">
-            <div class="pros">
-                <h5>✅ Pros</h5>
-                <ul>${pros_html}</ul>
-            </div>
-            <div class="cons">
-                <h5>❌ Cons</h5>
-                <ul>${cons_html}</ul>
-            </div>
-        </div>
-        <div class="option-impact">
-            <span class="impact-item</h5>">💰 Cost: ${cost_change}</span>
-            <span class="impact-item">⏱️ Time: ${time_change}</span>
-            <span class="impact-item risk-${risk_level}">⚠️ Risk: ${risk_level}</span>
-        </div>
-    </div>
-</template>
-
-<!-- Approval Request Template -->
-<template id="approval-request-template">
-    <div class="approval-request" data-approval-id="${id}">
-        <div class="approval-header">
-            <span class="approval-type type-${approval_type}">${approval_type}</span>
-            <span class="approval-risk risk-${risk_level}">${risk_level} Risk</span>
-        </div>
-        <h4>${title}</h4>
-        <p class="approval-description">${description}</p>
-
-        <div class="approval-impact">
-            <h5>Impact Summary</h5>
-            <p>${impact_summary}</p>
-        </div>
-
-        <div class="simulation-preview" style="display: ${show_simulation}">
-            <h5>Simulation Result</h5>
-            <div class="simulation-summary">${simulation_summary}</div>
-        </div>
-
-        <div class="approval-meta">
-            <span class="meta-item">Step: ${step_name}</span>
-            <span class="meta-item">Expires: ${expires_at}</span>
-            <span class="meta-item">Default: ${default_action}</span>
-        </div>
-
-        <div class="approval-actions">
-            <button class="btn-reject" onclick="rejectApproval('${id}')">
-                <span>❌</span> Reject
-            </button>
-            <button class="btn-defer" onclick="deferApproval('${id}')">
-                <span>⏸️</span> Defer
-            </button>
-            <button class="btn-approve" onclick="approveApproval('${id}')">
-                <span>✅</span> Approve
-            </button>
-        </div>
-    </div>
-</template>
-
-<!-- Simulation Result Template -->
-<template id="simulation-result-template">
-    <div class="simulation-result">
-        <div class="simulation-header">
-            <div class="simulation-status status-${success}">
-                <span class="status-icon">${status_icon}</span>
-                <span class="status-text">${status_text}</span>
-            </div>
-            <div class="simulation-confidence">
-                Confidence: ${confidence}%
-            </div>
-        </div>
-
-        <div class="impact-overview">
-            <h4>Impact Assessment</h4>
-            <div class="impact-grid">
-                <div class="impact-card risk-${data_risk}">
-                    <span class="impact-icon">💾</span>
-                    <span class="impact-label">Data Impact</span>
-                    <span class="impact-value">${data_impact_summary}</span>
-                </div>
-                <div class="impact-card risk-${cost_risk}">
-                    <span class="impact-icon">💰</span>
-                    <span class="impact-label">Cost Impact</span>
-                    <span class="impact-value">${cost_impact_summary}</span>
-                </div>
-                <div class="impact-card risk-${time_risk}">
-                    <span class="impact-icon">⏱️</span>
-                    <span class="impact-label">Time Impact</span>
-                    <span class="impact-value">${time_impact_summary}</span>
-                </div>
-                <div class="impact-card risk-${security_risk}">
-                    <span class="impact-icon">🔒</span>
-                    <span class="impact-label">Security Impact</span>
-                    <span class="impact-value">${security_impact_summary}</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="step-outcomes">
-            <h4>Step-by-Step Predictions</h4>
-            <div class="outcomes-list">
-                ${step_outcomes_html}
-            </div>
-        </div>
-
-        <div class="side-effects" style="display: ${show_side_effects}">
-            <h4>⚠️ Potential Side Effects</h4>
-            <div class="side-effects-list">
-                ${side_effects_html}
-            </div>
-        </div>
-
-        <div class="recommendations" style="display: ${show_recommendations}">
-            <h4>💡 Recommendations</h4>
-            <div class="recommendations-list">
-                ${recommendations_html}
-            </div>
-        </div>
-
-        <div class="simulation-actions">
-            <button class="btn-secondary" onclick="closeSimulationModal()">
-                <span>↩️</span> Back
-            </button>
-            <button class="btn-primary" onclick="proceedAfterSimulation('${task_id}')" ${proceed_disabled}>
-                <span>🚀</span> Proceed with Execution
-            </button>
-        </div>
-    </div>
-</template>
+<script src="autotask.js"></script>
diff --git a/ui/suite/tasks/autotask.js b/ui/suite/tasks/autotask.js
index ae7d229..02361cc 100644
--- a/ui/suite/tasks/autotask.js
+++ b/ui/suite/tasks/autotask.js
@@ -1,6 +1,6 @@
 /* =============================================================================
-   AUTO TASK JAVASCRIPT - Intelligent Self-Executing Task Interface
-   Premium VIP Mode Functionality
+   AUTO TASK JAVASCRIPT - Sentient Theme
+   Intelligent Self-Executing Task Interface
    ============================================================================= */
 
 // =============================================================================
@@ -8,13 +8,17 @@
 // =============================================================================
 
 const AutoTaskState = {
-  currentFilter: "all",
-  tasks: [],
+  currentFilter: "active",
+  selectedIntentId: null,
+  intents: [],
   compiledPlan: null,
   pendingDecisions: [],
   pendingApprovals: [],
   refreshInterval: null,
   wsConnection: null,
+  progressWsConnection: null,
+  activeTaskProgress: {},
+  llmOutputStream: [],
 };
 
 // =============================================================================
@@ -29,6 +33,9 @@ function initAutoTask() {
   // Initialize WebSocket for real-time updates
   initWebSocket();
 
+  // Initialize task progress WebSocket
+  initTaskProgressWebSocket();
+
   // Start auto-refresh
   startAutoRefresh();
 
@@ -41,7 +48,101 @@ function initAutoTask() {
   // Setup keyboard shortcuts
   setupKeyboardShortcuts();
 
-  console.log("AutoTask initialized");
+  // Initialize floating panel (hidden by default)
+  initFloatingPanel();
+
+  console.log("AutoTask Sentient initialized");
+}
+
+// =============================================================================
+// FLOATING PANEL
+// =============================================================================
+
+function initFloatingPanel() {
+  const panel = document.getElementById("floating-progress");
+  if (panel) {
+    panel.style.display = "none";
+  }
+}
+
+function showFloatingPanel(taskId, taskName) {
+  const panel = document.getElementById("floating-progress");
+  if (!panel) return;
+
+  panel.style.display = "block";
+  panel.dataset.taskId = taskId;
+
+  const nameEl = document.getElementById("floating-task-name");
+  if (nameEl) nameEl.textContent = taskName || "Processing...";
+
+  updateFloatingProgress(0, 0, 0, "Initializing...");
+}
+
+function updateFloatingProgress(progress, current, total, statusText) {
+  const fill = document.getElementById("floating-progress-fill");
+  const pct = document.getElementById("floating-percentage");
+  const steps = document.getElementById("floating-status-steps");
+  const status = document.getElementById("floating-status-text");
+
+  if (fill) fill.style.width = `${progress}%`;
+  if (pct) pct.textContent = `${progress}%`;
+  if (steps) steps.textContent = `${current}/${total}`;
+  if (status) status.textContent = statusText;
+}
+
+function addFloatingLog(icon, message, type = "info") {
+  const log = document.getElementById("floating-log");
+  if (!log) return;
+
+  const entry = document.createElement("div");
+  entry.className = `floating-log-entry ${type}`;
+  entry.innerHTML = `
+    <span class="log-icon">${icon}</span>
+    <span class="log-message">${escapeHtml(message)}</span>
+    <span class="log-time">${formatTime(new Date())}</span>
+  `;
+  log.appendChild(entry);
+  log.scrollTop = log.scrollHeight;
+}
+
+function addFloatingTerminalOutput(text) {
+  const terminal = document.getElementById("floating-terminal");
+  if (!terminal) return;
+
+  const line = document.createElement("div");
+  line.className = "llm-output";
+  line.textContent = text;
+  terminal.appendChild(line);
+  terminal.scrollTop = terminal.scrollHeight;
+
+  // Keep only last 50 lines
+  while (terminal.children.length > 50) {
+    terminal.removeChild(terminal.firstChild);
+  }
+}
+
+function minimizeFloatingPanel() {
+  const panel = document.getElementById("floating-progress");
+  if (panel) {
+    panel.classList.toggle("minimized");
+  }
+}
+
+function closeFloatingPanel() {
+  const panel = document.getElementById("floating-progress");
+  if (panel) {
+    panel.style.display = "none";
+  }
+}
+
+function completeFloatingPanel(message) {
+  updateFloatingProgress(100, 0, 0, message || "Complete!");
+  addFloatingLog("✅", message || "Task completed successfully", "success");
+
+  // Auto-hide after delay
+  setTimeout(() => {
+    closeFloatingPanel();
+  }, 5000);
 }
 
 // =============================================================================
@@ -76,10 +177,485 @@ function initWebSocket() {
   }
 }
 
+function initTaskProgressWebSocket() {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const wsUrl = `${protocol}//${window.location.host}/ws/task-progress`;
+
+  try {
+    AutoTaskState.progressWsConnection = new WebSocket(wsUrl);
+
+    AutoTaskState.progressWsConnection.onopen = function () {
+      console.log("Task Progress WebSocket connected");
+    };
+
+    AutoTaskState.progressWsConnection.onmessage = function (event) {
+      handleTaskProgressMessage(JSON.parse(event.data));
+    };
+
+    AutoTaskState.progressWsConnection.onclose = function () {
+      console.log("Task Progress WebSocket disconnected, reconnecting...");
+      setTimeout(initTaskProgressWebSocket, 3000);
+    };
+
+    AutoTaskState.progressWsConnection.onerror = function (error) {
+      console.error("Task Progress WebSocket error:", error);
+    };
+  } catch (e) {
+    console.warn("Task Progress WebSocket not available");
+  }
+}
+
+function handleTaskProgressMessage(data) {
+  console.log("Task progress:", data);
+
+  switch (data.type) {
+    case "connected":
+      console.log("Connected to task progress stream");
+      break;
+    case "task_started":
+      onTaskStarted(data);
+      break;
+    case "task_progress":
+      onTaskProgress(data);
+      break;
+    case "task_completed":
+      onTaskProgressCompleted(data);
+      break;
+    case "task_error":
+      onTaskProgressError(data);
+      break;
+    case "llm_stream":
+      onLLMStream(data);
+      break;
+    default:
+      console.log("Unknown progress event:", data.type);
+  }
+}
+
+function onTaskStarted(data) {
+  AutoTaskState.activeTaskProgress[data.task_id] = {
+    started: new Date(),
+    totalSteps: data.total_steps,
+    currentStep: 0,
+    progress: 0,
+    logs: [],
+  };
+
+  // Show floating panel
+  showFloatingPanel(data.task_id, data.message);
+  addFloatingLog("🚀", data.message, "started");
+
+  // Also update detail panel if viewing this intent
+  if (AutoTaskState.selectedIntentId === data.task_id) {
+    updateDetailPanelProgress(data);
+  }
+}
+
+function onTaskProgress(data) {
+  const taskProgress = AutoTaskState.activeTaskProgress[data.task_id];
+  if (taskProgress) {
+    taskProgress.currentStep = data.current_step;
+    taskProgress.progress = data.progress;
+    taskProgress.logs.push({
+      time: new Date(),
+      step: data.step,
+      message: data.message,
+      details: data.details,
+    });
+  }
+
+  // Update floating panel
+  updateFloatingProgress(
+    data.progress,
+    data.current_step,
+    data.total_steps,
+    data.message,
+  );
+
+  const stepIcons = {
+    llm_request: "🤖",
+    llm_response: "✨",
+    parse_structure: "📋",
+    create_tables: "🗄️",
+    tables_synced: "✅",
+    write_files: "📝",
+    write_file: "📄",
+    write_designer: "🎨",
+    write_tools: "🔧",
+    sync_site: "🔄",
+  };
+  const icon = stepIcons[data.step] || "📌";
+  addFloatingLog(icon, data.message, "progress");
+
+  // Update detail panel if viewing this intent
+  if (AutoTaskState.selectedIntentId === data.task_id) {
+    updateDetailPanelProgress(data);
+    addTerminalLine(data.message);
+  }
+}
+
+function onTaskProgressCompleted(data) {
+  const taskProgress = AutoTaskState.activeTaskProgress[data.task_id];
+  if (taskProgress) {
+    taskProgress.progress = 100;
+    taskProgress.completed = new Date();
+  }
+
+  completeFloatingPanel(data.message);
+
+  // Refresh intent list
+  setTimeout(() => {
+    refreshIntents();
+    updateStats();
+  }, 1000);
+}
+
+function onTaskProgressError(data) {
+  addFloatingLog("❌", data.error, "error");
+  updateFloatingProgress(
+    AutoTaskState.activeTaskProgress[data.task_id]?.progress || 0,
+    0,
+    0,
+    `Error: ${data.error}`,
+  );
+}
+
+function onLLMStream(data) {
+  // Stream LLM output to terminal
+  addFloatingTerminalOutput(data.text);
+  if (AutoTaskState.selectedIntentId === data.task_id) {
+    addTerminalLine(data.text, true);
+  }
+}
+
+function addTerminalLine(text, isLLM = false) {
+  const terminal = document.querySelector(
+    `#terminal-${AutoTaskState.selectedIntentId}`,
+  );
+  if (!terminal) return;
+
+  const line = document.createElement("div");
+  line.className = `terminal-line${isLLM ? " highlight" : ""}`;
+  line.textContent = text;
+  terminal.appendChild(line);
+  terminal.scrollTop = terminal.scrollHeight;
+}
+
+function updateDetailPanelProgress(data) {
+  // Update progress bar in detail panel
+  const progressFill = document.querySelector(
+    ".detail-progress .progress-fill",
+  );
+  const progressSteps = document.querySelector(
+    ".detail-progress .progress-steps",
+  );
+  const progressPct = document.querySelector(
+    ".detail-progress .progress-percent",
+  );
+
+  if (progressFill) progressFill.style.width = `${data.progress}%`;
+  if (progressSteps)
+    progressSteps.textContent = `${data.current_step}/${data.total_steps} Steps`;
+  if (progressPct) progressPct.textContent = `${data.progress}%`;
+}
+
+// =============================================================================
+// INTENT SELECTION & DETAIL PANEL
+// =============================================================================
+
+function selectIntent(intentId) {
+  // Update selected state
+  document.querySelectorAll(".intent-card").forEach((card) => {
+    card.classList.remove("selected");
+  });
+
+  const selectedCard = document.querySelector(
+    `.intent-card[data-intent-id="${intentId}"]`,
+  );
+  if (selectedCard) {
+    selectedCard.classList.add("selected");
+  }
+
+  AutoTaskState.selectedIntentId = intentId;
+
+  // Load detail panel
+  loadIntentDetail(intentId);
+}
+
+function loadIntentDetail(intentId) {
+  const panel = document.getElementById("intent-detail-panel");
+  if (!panel) return;
+
+  // Show loading state
+  panel.innerHTML = `
+    <div class="loading-state">
+      <div class="spinner"></div>
+      <span>Loading intent details...</span>
+    </div>
+  `;
+
+  // Fetch intent details
+  fetch(`/api/autotask/${intentId}`)
+    .then((response) => response.json())
+    .then((data) => {
+      renderIntentDetail(data);
+    })
+    .catch((error) => {
+      console.error("Failed to load intent detail:", error);
+      panel.innerHTML = `
+        <div class="detail-placeholder">
+          <span class="placeholder-icon">⚠️</span>
+          <p>Failed to load intent details</p>
+        </div>
+      `;
+    });
+}
+
+function renderIntentDetail(intent) {
+  const panel = document.getElementById("intent-detail-panel");
+  if (!panel) return;
+
+  const statusIcons = {
+    active: "⚡",
+    complete: "✓",
+    paused: "⏸",
+    blocked: "⚠",
+    awaiting: "⏳",
+  };
+
+  const healthClass =
+    intent.health >= 80 ? "good" : intent.health >= 50 ? "warning" : "bad";
+
+  panel.innerHTML = `
+    <div class="detail-view">
+      <!-- Header -->
+      <div class="detail-header">
+        <button class="btn-back" onclick="closeDetailPanel()">
+          <span>◀</span>
+        </button>
+        <h2 class="detail-title">${escapeHtml(intent.title || intent.intent)}</h2>
+        <div class="detail-status">
+          <span class="status-icon">${statusIcons[intent.status] || "⚡"}</span>
+          <span class="status-label">${intent.status_display || intent.status}</span>
+        </div>
+        <button class="btn-pause" onclick="togglePause('${intent.id}')">
+          <span class="pause-icon">${intent.status === "paused" ? "▶" : "⏸"}</span>
+        </button>
+      </div>
+
+      <!-- Progress Bar -->
+      <div class="detail-progress">
+        <div class="progress-bar large">
+          <div class="progress-fill" style="width: ${intent.progress || 0}%"></div>
+        </div>
+        <div class="progress-stats">
+          <span class="progress-steps">${intent.current_step || 0}/${intent.total_steps || 0} Steps</span>
+          <span class="progress-percent">${intent.progress || 0}%</span>
+        </div>
+      </div>
+
+      ${
+        intent.decision_required
+          ? `
+      <!-- Decision Required Panel -->
+      <div class="decision-panel">
+        <div class="decision-header">
+          <span class="decision-badge">DECISION REQUIRED</span>
+          <span class="decision-title">${escapeHtml(intent.decision_title || "Decision needed")}</span>
+        </div>
+        <div class="decision-body">
+          <div class="decision-actions">
+            <button class="btn-decision-primary" onclick="openDecisionModal('${intent.id}')">
+              Make Decision
+            </button>
+            <button class="btn-decision-secondary" onclick="viewDecisionContext('${intent.id}')">
+              View Context Details
+            </button>
+          </div>
+          <div class="decision-context">
+            <div class="context-label">Context:</div>
+            <p class="context-text">${escapeHtml(intent.decision_context || "")}</p>
+          </div>
+        </div>
+      </div>
+      `
+          : ""
+      }
+
+      <!-- Status Section -->
+      <div class="detail-section">
+        <div class="section-header">
+          <span class="section-title">STATUS</span>
+          <span class="section-runtime">Runtime: ${intent.runtime || "0 min"}</span>
+        </div>
+        <div class="status-current-task">
+          <span class="task-name">${escapeHtml(intent.current_task_name || "Processing...")}</span>
+          <span class="task-estimate">Estimated: ${intent.estimated_time || "calculating..."}</span>
+        </div>
+        <div class="status-steps-preview">
+          ${renderStepsPreview(intent.steps || [])}
+        </div>
+      </div>
+
+      <!-- Progress Log Section -->
+      <div class="detail-section">
+        <div class="section-header">
+          <span class="section-title">PROGRESS LOG</span>
+        </div>
+        <div class="progress-log" id="progress-log-${intent.id}">
+          ${renderProgressLog(intent.logs || [])}
+        </div>
+      </div>
+
+      <!-- Terminal Activity Section -->
+      <div class="detail-section terminal-section">
+        <div class="section-header">
+          <span class="section-title">TERMINAL (LIVE AGENT ACTIVITY)</span>
+          <span class="terminal-stats">
+            Processed: <strong>${intent.processed_count || 0}</strong> data points /
+            Processing speed: <strong>${intent.processing_speed || "~8 sources/s"}</strong> /
+            Estimated completion: <strong>${intent.estimated_completion || "calculating"}</strong>
+          </span>
+        </div>
+        <div class="terminal-output" id="terminal-${intent.id}">
+          <div class="terminal-line">Initializing agent...</div>
+        </div>
+        <div class="terminal-cursor"></div>
+      </div>
+    </div>
+  `;
+}
+
+function renderStepsPreview(steps) {
+  if (!steps || steps.length === 0) {
+    return '<div class="step-item pending"><span class="step-dot"></span><span class="step-name">No steps yet</span></div>';
+  }
+
+  return steps
+    .slice(0, 3)
+    .map(
+      (step) => `
+    <div class="step-item ${step.status || "pending"}">
+      <span class="step-dot"></span>
+      <span class="step-name">${escapeHtml(step.name)}</span>
+      ${step.note ? `<span class="step-note">${escapeHtml(step.note)}</span>` : ""}
+    </div>
+  `,
+    )
+    .join("");
+}
+
+function renderProgressLog(logs) {
+  if (!logs || logs.length === 0) {
+    return '<div class="log-entry"><div class="log-entry-header"><span class="log-icon pending">●</span><span class="log-title">Waiting for activity...</span></div></div>';
+  }
+
+  return logs
+    .map(
+      (log) => `
+    <div class="log-entry ${log.expanded ? "expanded" : ""}">
+      <div class="log-entry-header" onclick="toggleLogEntry(this)">
+        <span class="log-icon ${log.status || "pending"}">●</span>
+        <span class="log-title">${escapeHtml(log.title)}</span>
+        <span class="log-expand">▶</span>
+        ${log.step_label ? `<span class="log-step-badge">${escapeHtml(log.step_label)}</span>` : ""}
+      </div>
+      <div class="log-entry-body">
+        <div class="log-sub-entries">
+          ${(log.sub_entries || [])
+            .map(
+              (sub) => `
+            <div class="log-sub-entry">
+              <span class="sub-icon ${sub.status || "complete"}">●</span>
+              <span class="sub-text">${escapeHtml(sub.text)}</span>
+              <span class="sub-duration">Duration: ${sub.duration || "< 1 min"}</span>
+              <span class="sub-check">${sub.status === "complete" ? "✓" : ""}</span>
+            </div>
+          `,
+            )
+            .join("")}
+        </div>
+      </div>
+    </div>
+  `,
+    )
+    .join("");
+}
+
+function toggleLogEntry(header) {
+  const entry = header.closest(".log-entry");
+  if (entry) {
+    entry.classList.toggle("expanded");
+  }
+}
+
+function closeDetailPanel() {
+  AutoTaskState.selectedIntentId = null;
+
+  document.querySelectorAll(".intent-card").forEach((card) => {
+    card.classList.remove("selected");
+  });
+
+  const panel = document.getElementById("intent-detail-panel");
+  if (panel) {
+    panel.innerHTML = `
+      <div class="detail-placeholder">
+        <span class="placeholder-icon">📋</span>
+        <p>Select an intent to view details</p>
+      </div>
+    `;
+  }
+}
+
+function viewDetailedIntent(intentId) {
+  selectIntent(intentId);
+}
+
+function togglePause(intentId) {
+  const intent = AutoTaskState.intents.find((i) => i.id === intentId);
+  if (!intent) return;
+
+  const action = intent.status === "paused" ? "resume" : "pause";
+
+  fetch(`/api/autotask/${intentId}/${action}`, { method: "POST" })
+    .then((response) => response.json())
+    .then((result) => {
+      if (result.success) {
+        showToast(`Intent ${action}d`, "success");
+        refreshIntents();
+        if (AutoTaskState.selectedIntentId === intentId) {
+          loadIntentDetail(intentId);
+        }
+      } else {
+        showToast(`Failed to ${action} intent`, "error");
+      }
+    })
+    .catch((error) => {
+      console.error(`Failed to ${action} intent:`, error);
+      showToast(`Failed to ${action} intent`, "error");
+    });
+}
+
+function formatTime(date) {
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+}
+
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
 function handleWebSocketMessage(data) {
   switch (data.type) {
     case "task_update":
-      updateTaskInList(data.task);
+    case "intent_update":
+      updateIntentInList(data.task || data.intent);
       break;
     case "step_progress":
       updateStepProgress(data.taskId, data.step, data.progress);
@@ -91,10 +667,12 @@ function handleWebSocketMessage(data) {
       showApprovalNotification(data.approval);
       break;
     case "task_completed":
-      onTaskCompleted(data.task);
+    case "intent_completed":
+      onIntentCompleted(data.task || data.intent);
       break;
     case "task_failed":
-      onTaskFailed(data.task, data.error);
+    case "intent_failed":
+      onIntentFailed(data.task || data.intent, data.error);
       break;
     case "stats_update":
       updateStatsFromData(data.stats);
@@ -102,6 +680,41 @@ function handleWebSocketMessage(data) {
   }
 }
 
+function updateIntentInList(intent) {
+  const card = document.querySelector(
+    `.intent-card[data-intent-id="${intent.id}"]`,
+  );
+  if (card) {
+    // Update progress
+    const progressFill = card.querySelector(".progress-fill");
+    const progressSteps = card.querySelector(".progress-steps");
+    const progressPct = card.querySelector(".progress-percent");
+
+    if (progressFill) progressFill.style.width = `${intent.progress}%`;
+    if (progressSteps)
+      progressSteps.textContent = `${intent.current_step}/${intent.total_steps} Steps`;
+    if (progressPct) progressPct.textContent = `${intent.progress}%`;
+
+    // Update status indicator
+    const statusIndicator = card.querySelector(".intent-status-indicator");
+    if (statusIndicator) {
+      statusIndicator.className = `intent-status-indicator ${intent.status}`;
+    }
+  }
+}
+
+function onIntentCompleted(intent) {
+  showToast(`Intent completed: ${intent.title || intent.id}`, "success");
+  updateIntentInList(intent);
+  updateStats();
+}
+
+function onIntentFailed(intent, error) {
+  showToast(`Intent failed: ${intent.title || intent.id} - ${error}`, "error");
+  updateIntentInList(intent);
+  updateStats();
+}
+
 // =============================================================================
 // EVENT LISTENERS
 // =============================================================================
@@ -212,28 +825,33 @@ function updateStats() {
 }
 
 function updateStatsFromData(stats) {
-  // Header stats
-  document.getElementById("stat-running").textContent = stats.running || 0;
-  document.getElementById("stat-pending").textContent = stats.pending || 0;
-  document.getElementById("stat-completed").textContent = stats.completed || 0;
-  document.getElementById("stat-approval").textContent =
-    stats.pending_approval || 0;
+  // Sentient filter counts
+  const countComplete = document.getElementById("count-complete");
+  const countActive = document.getElementById("count-active");
+  const countAwaiting = document.getElementById("count-awaiting");
+  const countPaused = document.getElementById("count-paused");
+  const countBlocked = document.getElementById("count-blocked");
+  const timeSaved = document.getElementById("time-saved");
 
-  // Filter counts
-  document.getElementById("count-all").textContent = stats.total || 0;
-  document.getElementById("count-running").textContent = stats.running || 0;
-  document.getElementById("count-approval").textContent =
-    stats.pending_approval || 0;
-  document.getElementById("count-decision").textContent =
-    stats.pending_decision || 0;
+  if (countComplete) countComplete.textContent = stats.completed || 0;
+  if (countActive) countActive.textContent = stats.running || stats.active || 0;
+  if (countAwaiting)
+    countAwaiting.textContent = stats.pending_decision || stats.awaiting || 0;
+  if (countPaused) countPaused.textContent = stats.paused || 0;
+  if (countBlocked)
+    countBlocked.textContent = stats.blocked || stats.failed || 0;
+  if (timeSaved) timeSaved.textContent = stats.time_saved || "0 hrs this week";
 
-  // Highlight if approvals needed
-  const approvalStat = document.querySelector(".stat-item.highlight");
-  if (approvalStat && stats.pending_approval > 0) {
-    approvalStat.classList.add("attention");
-  } else if (approvalStat) {
-    approvalStat.classList.remove("attention");
-  }
+  // Legacy support
+  const statRunning = document.getElementById("stat-running");
+  const statPending = document.getElementById("stat-pending");
+  const statCompleted = document.getElementById("stat-completed");
+  const statApproval = document.getElementById("stat-approval");
+
+  if (statRunning) statRunning.textContent = stats.running || 0;
+  if (statPending) statPending.textContent = stats.pending || 0;
+  if (statCompleted) statCompleted.textContent = stats.completed || 0;
+  if (statApproval) statApproval.textContent = stats.pending_approval || 0;
 }
 
 // =============================================================================
@@ -256,6 +874,23 @@ function filterTasks(filter, button) {
   });
 }
 
+// Sentient status filter
+function filterByStatus(status, button) {
+  AutoTaskState.currentFilter = status;
+
+  // Update active filter
+  document.querySelectorAll(".status-filter").forEach((filter) => {
+    filter.classList.remove("active");
+  });
+  button.classList.add("active");
+
+  // Trigger HTMX request for intent list
+  htmx.ajax("GET", `/api/autotask/list?status=${status}`, {
+    target: "#intent-list",
+    swap: "innerHTML",
+  });
+}
+
 function refreshTasks() {
   const filter = AutoTaskState.currentFilter;
   htmx.ajax("GET", `/api/autotask/list?filter=${filter}`, {
@@ -265,6 +900,176 @@ function refreshTasks() {
   updateStats();
 }
 
+function refreshIntents() {
+  const status = AutoTaskState.currentFilter;
+  htmx.ajax("GET", `/api/autotask/list?status=${status}`, {
+    target: "#intent-list",
+    swap: "innerHTML",
+  });
+  updateStats();
+}
+
+// =============================================================================
+// MODAL FUNCTIONS - SENTIENT
+// =============================================================================
+
+function showNewIntentModal() {
+  const modal = document.getElementById("new-intent-modal");
+  if (modal) {
+    modal.style.display = "flex";
+    document.body.classList.add("modal-open");
+    setTimeout(() => {
+      document.getElementById("intent-input")?.focus();
+    }, 100);
+  }
+}
+
+function closeNewIntentModal() {
+  const modal = document.getElementById("new-intent-modal");
+  if (modal) {
+    modal.style.display = "none";
+    document.body.classList.remove("modal-open");
+  }
+}
+
+function openDecisionModal(intentId) {
+  const modal = document.getElementById("decision-modal");
+  if (!modal) return;
+
+  modal.style.display = "flex";
+  document.body.classList.add("modal-open");
+
+  const content = document.getElementById("decision-content");
+  if (content) {
+    content.innerHTML = `
+      <div class="loading-state">
+        <div class="spinner"></div>
+        <span>Loading decision options...</span>
+      </div>
+    `;
+  }
+
+  // Fetch decision details
+  fetch(`/api/autotask/${intentId}/decisions`)
+    .then((response) => response.json())
+    .then((decisions) => {
+      renderDecisionContent(intentId, decisions);
+    })
+    .catch((error) => {
+      console.error("Failed to load decisions:", error);
+      if (content) {
+        content.innerHTML = `
+          <div class="detail-placeholder">
+            <span class="placeholder-icon">⚠️</span>
+            <p>Failed to load decision options</p>
+          </div>
+        `;
+      }
+    });
+}
+
+function renderDecisionContent(intentId, decisions) {
+  const content = document.getElementById("decision-content");
+  if (!content || !decisions || decisions.length === 0) {
+    if (content) {
+      content.innerHTML = `
+        <div class="detail-placeholder">
+          <span class="placeholder-icon">✓</span>
+          <p>No pending decisions</p>
+        </div>
+      `;
+    }
+    return;
+  }
+
+  const decision = decisions[0];
+  content.innerHTML = `
+    <div class="decision-detail">
+      <h3>${escapeHtml(decision.title)}</h3>
+      <p class="decision-desc">${escapeHtml(decision.description)}</p>
+
+      <div class="decision-options-list">
+        ${decision.options
+          .map(
+            (opt, idx) => `
+          <label class="decision-option-item ${opt.recommended ? "recommended" : ""}">
+            <input type="radio" name="decision_option" value="${opt.id}" ${idx === 0 ? "checked" : ""}>
+            <div class="option-content">
+              <span class="option-label">${escapeHtml(opt.label)}</span>
+              ${opt.recommended ? '<span class="recommended-tag">Recommended</span>' : ""}
+              <p class="option-desc">${escapeHtml(opt.description || "")}</p>
+            </div>
+          </label>
+        `,
+          )
+          .join("")}
+      </div>
+
+      <div class="form-actions">
+        <button class="btn-secondary" onclick="closeDecisionModal()">Cancel</button>
+        <button class="btn-primary" onclick="submitDecisionFromModal('${intentId}', '${decision.id}')">
+          Submit Decision
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+function submitDecisionFromModal(intentId, decisionId) {
+  const selectedOption = document.querySelector(
+    'input[name="decision_option"]:checked',
+  )?.value;
+
+  if (!selectedOption) {
+    showToast("Please select an option", "warning");
+    return;
+  }
+
+  fetch(`/api/autotask/${intentId}/decide`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      decision_id: decisionId,
+      option_id: selectedOption,
+    }),
+  })
+    .then((response) => response.json())
+    .then((result) => {
+      if (result.success) {
+        showToast("Decision submitted", "success");
+        closeDecisionModal();
+        refreshIntents();
+        if (AutoTaskState.selectedIntentId === intentId) {
+          loadIntentDetail(intentId);
+        }
+      } else {
+        showToast(`Failed: ${result.error || "Unknown error"}`, "error");
+      }
+    })
+    .catch((error) => {
+      console.error("Failed to submit decision:", error);
+      showToast("Failed to submit decision", "error");
+    });
+}
+
+function closeDecisionModal() {
+  const modal = document.getElementById("decision-modal");
+  if (modal) {
+    modal.style.display = "none";
+    document.body.classList.remove("modal-open");
+  }
+}
+
+function viewDecisionContext(intentId) {
+  openDecisionModal(intentId);
+}
+
+function closeAllModals() {
+  closeNewIntentModal();
+  closeDecisionModal();
+  document.body.classList.remove("modal-open");
+}
+
 // =============================================================================
 // COMPILATION HANDLING
 // =============================================================================
diff --git a/ui/suite/tasks/tasks.css b/ui/suite/tasks/tasks.css
index de154a1..3063099 100644
--- a/ui/suite/tasks/tasks.css
+++ b/ui/suite/tasks/tasks.css
@@ -1,88 +1,179 @@
 /* =============================================================================
    TASKS APP
-   Automated Intelligent Task Management Interface
+   Autonomous Task Management Interface
+   Uses CSS variables from theme manager (--bg, --surface, --primary, etc.)
    ============================================================================= */
 
 /* =============================================================================
-   INTENT INPUT SECTION
+   BASE APP CONTAINER
    ============================================================================= */
 
-.intent-input-section {
-    padding: 24px;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
+.tasks-app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    background: var(--bg, #0a0a0a);
+    color: var(--text, #ffffff);
+    font-family: var(--font-family, system-ui, -apple-system, sans-serif);
 }
 
-.intent-input-container {
-    max-width: 900px;
-    margin: 0 auto;
+.tasks-app *,
+.tasks-app *::before,
+.tasks-app *::after {
+    box-sizing: border-box;
+}
+
+/* =============================================================================
+   STATUS FILTER ROW
+   ============================================================================= */
+
+.status-filter-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 24px;
+    background: var(--surface, #111);
+    border-bottom: 1px solid var(--border, #2a2a2a);
+    flex-wrap: wrap;
+}
+
+.filter-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    border-radius: 20px;
+    color: var(--text-secondary, #a1a1a1);
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.filter-pill:hover {
+    color: var(--text, #fff);
+}
+
+.filter-pill.active {
+    background: var(--primary-light, rgba(197, 248, 42, 0.15));
+    color: var(--primary, #c5f82a);
+}
+
+.filter-pill .pill-icon {
+    font-size: 14px;
+}
+
+.filter-pill .pill-count {
+    padding: 2px 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.filter-pill.active .pill-count {
+    background: var(--primary-light, rgba(197, 248, 42, 0.2));
+    color: var(--primary, #c5f82a);
+}
+
+.time-saved-badge {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+}
+
+.time-saved-badge .time-label {
+    color: var(--text-secondary, #6b6b6b);
+}
+
+.time-saved-badge .time-value {
+    color: var(--primary, #c5f82a);
+    font-weight: 600;
+}
+
+/* =============================================================================
+   QUICK INTENT BAR
+   ============================================================================= */
+
+.quick-intent-bar {
+    padding: 16px 24px;
+    background: var(--bg, #0a0a0a);
+    border-bottom: 1px solid var(--border, #2a2a2a);
 }
 
 .intent-input-wrapper {
     display: flex;
     gap: 12px;
-    align-items: stretch;
+    max-width: 900px;
+    margin: 0 auto;
 }
 
 .quick-intent-input {
     flex: 1;
-    padding: 16px 20px;
-    font-size: 16px;
-    border: none;
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.95);
-    color: #333;
-    outline: none;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-    transition: box-shadow 0.2s ease;
+    padding: 14px 20px;
+    background: var(--surface, #111);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 10px;
+    color: var(--text, #fff);
+    font-family: inherit;
+    font-size: 15px;
+    transition: all 0.2s ease;
 }
 
 .quick-intent-input::placeholder {
-    color: #888;
+    color: var(--text-secondary, #6b6b6b);
 }
 
 .quick-intent-input:focus {
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
+    outline: none;
+    border-color: var(--primary, #c5f82a);
+    box-shadow: 0 0 0 3px var(--primary-light, rgba(197, 248, 42, 0.15));
 }
 
 .btn-create-run {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 8px;
-    padding: 16px 28px;
-    background: #fff;
-    color: var(--primary);
+    padding: 14px 28px;
+    background: var(--primary, #c5f82a);
     border: none;
-    border-radius: 12px;
-    font-size: 16px;
+    border-radius: 10px;
+    color: #000;
+    font-family: inherit;
+    font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     white-space: nowrap;
 }
 
 .btn-create-run:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
+    background: var(--primary-hover, #d4ff4a);
+    box-shadow: 0 0 20px var(--primary-light, rgba(197, 248, 42, 0.3));
 }
 
 .btn-create-run:active {
-    transform: translateY(0);
+    transform: scale(0.98);
 }
 
 .btn-create-run .spinner {
     display: none;
-    width: 18px;
-    height: 18px;
-    border: 2px solid var(--primary);
-    border-top-color: transparent;
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    border-top-color: #000;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }
 
 .btn-create-run.htmx-request .btn-text {
-    opacity: 0.5;
+    opacity: 0.6;
 }
 
 .btn-create-run.htmx-request .spinner {
@@ -96,10 +187,10 @@
 }
 
 .intent-result {
-    margin-top: 16px;
-    padding: 0;
-    border-radius: 12px;
-    overflow: hidden;
+    margin-top: 12px;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .intent-result:empty {
@@ -107,1155 +198,1444 @@
 }
 
 .intent-result .result-card {
-    background: rgba(255, 255, 255, 0.95);
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.intent-result .result-success {
-    color: #059669;
-}
-
-.intent-result .result-error {
-    color: #dc2626;
+    background: var(--surface-hover, #141414);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 10px;
+    padding: 16px 20px;
 }
 
 .intent-result .result-message {
-    font-size: 15px;
+    font-size: 14px;
+    color: var(--text, #fff);
     margin-bottom: 12px;
-    color: #333;
 }
 
-.intent-result .result-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 20px;
-    background: var(--primary);
-    color: #fff;
-    text-decoration: none;
-    border-radius: 8px;
-    font-weight: 500;
-    transition: background 0.2s;
+.intent-result .result-success {
+    color: var(--success, #22c55e);
 }
 
-.intent-result .result-link:hover {
-    background: #5b21b6;
+.intent-result .result-error {
+    color: var(--error, #ef4444);
 }
 
 .intent-result .result-progress {
-    margin-top: 12px;
     height: 6px;
-    background: #e5e7eb;
+    background: var(--surface, #1a1a1a);
     border-radius: 3px;
     overflow: hidden;
 }
 
 .intent-result .result-progress-bar {
     height: 100%;
-    background: var(--primary);
+    background: var(--primary, #c5f82a);
     border-radius: 3px;
     transition: width 0.3s ease;
-    animation: progress-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes progress-pulse {
-    0%,
-    100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.7;
-    }
 }
 
 /* =============================================================================
-   LAYOUT STRUCTURE
-   ============================================================================= */
-
-.tasks-app {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-    background: var(--bg);
-    color: var(--text);
-    font-family: var(--font-family, system-ui, -apple-system, sans-serif);
-}
-
-/* =============================================================================
-   TOP HEADER BAR
-   ============================================================================= */
-
-.tasks-topbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 24px;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
-}
-
-/* New Intent Button */
-.btn-new-intent {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 20px;
-    background: var(--primary);
-    color: var(--accent-foreground, #000000);
-    border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    margin-left: auto;
-}
-
-.btn-new-intent:hover {
-    background: var(--primary-hover);
-    box-shadow: 0 0 20px var(--primary-light);
-}
-
-.btn-new-intent svg {
-    width: 16px;
-    height: 16px;
-}
-
-.topbar-left {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-}
-
-.topbar-logo {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--text);
-}
-
-/* Tasks List Title Row */
-.tasks-list-title {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    flex-wrap: wrap;
-}
-
-.tasks-list-title h1 {
-    margin: 0;
-}
-
-.topbar-logo-icon {
-    width: 32px;
-    height: 32px;
-    background: var(--primary);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #000;
-    font-size: 16px;
-}
-
-.topbar-nav {
-    display: flex;
-    gap: 4px;
-}
-
-.topbar-nav-item {
-    padding: 8px 16px;
-    background: transparent;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-secondary);
-    font-family:
-        system-ui,
-        -apple-system,
-        sans-serif;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.topbar-nav-item:hover {
-    background: var(--surface-hover);
-    color: var(--text);
-}
-
-.topbar-nav-item.active {
-    background: var(--surface-hover);
-    color: var(--primary);
-}
-
-.topbar-center {
-    flex: 1;
-    max-width: 480px;
-    margin: 0 24px;
-}
-
-.topbar-search {
-    position: relative;
-    width: 100%;
-}
-
-.topbar-search-icon {
-    position: absolute;
-    left: 14px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--text-secondary);
-    font-size: 16px;
-    pointer-events: none;
-}
-
-.topbar-search-input {
-    width: 100%;
-    padding: 10px 16px 10px 44px;
-    background: var(--surface-hover);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    color: var(--text);
-    font-size: 14px;
-    transition: all 0.2s ease;
-}
-
-.topbar-search-input::placeholder {
-    color: var(--text-secondary);
-}
-
-.topbar-search-input:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px var(--primary-light);
-}
-
-.topbar-right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.topbar-icon-btn {
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    color: var(--text-secondary);
-    font-size: 18px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
-}
-
-.topbar-icon-btn:hover {
-    background: var(--surface-hover);
-    color: var(--text);
-}
-
-.topbar-icon-btn .notification-dot {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 8px;
-    height: 8px;
-    background: var(--error);
-    border-radius: 50%;
-}
-
-.topbar-profile {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 6px 12px 6px 6px;
-    background: var(--surface-hover);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.topbar-profile:hover {
-    border-color: var(--border);
-}
-
-.topbar-avatar {
-    width: 28px;
-    height: 28px;
-    background: var(--primary);
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #000;
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.topbar-profile-name {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--text);
-}
-
-.topbar-profile-arrow {
-    color: var(--text-secondary);
-    font-size: 12px;
-}
-
-/* =============================================================================
-   MAIN CONTENT AREA
+   MAIN LAYOUT - TWO COLUMNS
    ============================================================================= */
 
 .tasks-main {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 480px;
     flex: 1;
     overflow: hidden;
-    min-height: 0;
 }
 
 /* =============================================================================
-   TASK LIST PANEL (LEFT)
+   LEFT PANEL - TASK CARDS LIST
    ============================================================================= */
 
 .tasks-list-panel {
-    flex: 1;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--border);
     overflow: hidden;
-    min-height: 0;
+    border-right: 1px solid var(--border, #2a2a2a);
 }
 
-.tasks-list-header {
-    padding: 20px 24px;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    position: relative;
-    z-index: 1;
-}
-
-.tasks-list-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
-}
-
-.tasks-list-title h1 {
-    font-size: 24px;
-    font-weight: 700;
-    color: var(--text);
-    margin: 0;
-}
-
-.tasks-count {
-    font-size: 14px;
-    color: var(--text-secondary);
-}
-
-/* Status Filter Pills */
-.status-filters {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    position: relative;
-    z-index: 1;
-}
-
-.status-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 14px;
-    background: var(--surface-hover);
-    border: 1px solid var(--border);
-    border-radius: 20px;
-    color: var(--text-secondary);
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.status-pill:hover {
-    border-color: var(--border);
-    color: var(--text);
-}
-
-.status-pill.active {
-    background: var(--primary-light);
-    border-color: var(--primary);
-    color: var(--primary);
-}
-
-.status-pill.complete.active {
-    background: rgba(34, 197, 94, 0.15);
-    border-color: var(--success);
-    color: var(--success);
-}
-
-.status-pill.active-intents.active {
-    background: rgba(59, 130, 246, 0.15);
-    border-color: var(--info);
-    color: var(--info);
-}
-
-.status-pill.awaiting.active {
-    background: rgba(245, 158, 11, 0.15);
-    border-color: var(--warning);
-    color: var(--warning);
-}
-
-.status-pill.paused.active {
-    background: rgba(139, 92, 246, 0.15);
-    border-color: var(--warning);
-    color: var(--warning);
-}
-
-.status-pill.blocked.active {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: var(--error);
-    color: var(--error);
-}
-
-.status-pill .pill-count {
-    padding: 2px 8px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    font-size: 11px;
-    font-weight: 600;
-}
-
-.status-pill.active .pill-count {
-    background: rgba(255, 255, 255, 0.15);
-}
-
-/* Task List Scroll Container */
 .tasks-list-scroll {
     flex: 1;
     overflow-y: auto;
-    padding: 16px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 }
 
-/* Task Card */
+/* =============================================================================
+   TASK CARDS
+   ============================================================================= */
+
 .task-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
+    background: var(--surface-hover, #141414);
+    border: 1px solid var(--border, #2a2a2a);
     border-radius: 12px;
     padding: 16px;
-    margin-bottom: 12px;
     cursor: pointer;
     transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.task-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--text-secondary, #666);
+    transition: background 0.2s ease;
+}
+
+.task-card.status-running::before {
+    background: var(--primary, #c5f82a);
+}
+
+.task-card.status-awaiting::before {
+    background: var(--warning, #f59e0b);
+}
+
+.task-card.status-paused::before {
+    background: var(--info, #8b5cf6);
+}
+
+.task-card.status-complete::before {
+    background: var(--success, #22c55e);
+}
+
+.task-card.status-error::before {
+    background: var(--error, #ef4444);
+}
+
+.task-card.status-pending::before {
+    background: var(--text-secondary, #666);
 }
 
 .task-card:hover {
-    border-color: var(--border);
-    transform: translateX(4px);
+    border-color: var(--border-hover, #3a3a3a);
+    background: var(--surface, #1f1f1f);
 }
 
 .task-card.selected {
-    border-color: var(--primary);
-    background: var(--primary-light);
+    border-color: var(--primary, #c5f82a);
+    box-shadow: 0 0 0 1px var(--primary, #c5f82a);
 }
 
 .task-card-header {
     display: flex;
-    align-items: flex-start;
     justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
     margin-bottom: 12px;
 }
 
 .task-card-title {
-    font-size: 15px;
+    font-size: 14px;
     font-weight: 600;
-    color: var(--text);
-    margin: 0 0 4px 0;
+    color: var(--text, #fff);
+    margin: 0;
     line-height: 1.4;
-}
-
-.task-card-subtitle {
-    font-size: 13px;
-    color: var(--text-secondary);
+    flex: 1;
+    word-break: break-word;
 }
 
 .task-card-status {
-    padding: 4px 10px;
-    border-radius: 12px;
     font-size: 11px;
     font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 4px;
     text-transform: uppercase;
-    letter-spacing: 0.3px;
+    white-space: nowrap;
+    background: var(--surface, #1a1a1a);
+    color: var(--text-secondary, #888);
 }
 
-.task-card-status.running {
-    background: rgba(59, 130, 246, 0.15);
-    color: var(--info);
+.task-card-status.status-running {
+    background: rgba(197, 248, 42, 0.15);
+    color: var(--primary, #c5f82a);
 }
 
-.task-card-status.complete {
+.task-card-status.status-complete {
     background: rgba(34, 197, 94, 0.15);
-    color: var(--success);
+    color: var(--success, #22c55e);
 }
 
-.task-card-status.awaiting {
-    background: rgba(245, 158, 11, 0.15);
-    color: var(--warning);
-}
-
-.task-card-status.paused {
-    background: rgba(139, 92, 246, 0.15);
-    color: var(--warning);
-}
-
-.task-card-status.blocked {
+.task-card-status.status-error {
     background: rgba(239, 68, 68, 0.15);
-    color: var(--error);
+    color: var(--error, #ef4444);
 }
 
-/* Task Progress */
-.task-card-progress {
+.task-card-status.status-awaiting {
+    background: rgba(245, 158, 11, 0.15);
+    color: var(--warning, #f59e0b);
+}
+
+.task-card-status.status-paused {
+    background: rgba(139, 92, 246, 0.15);
+    color: var(--info, #8b5cf6);
+}
+
+.task-card-body {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     margin-bottom: 12px;
 }
 
-.task-progress-bar {
-    height: 6px;
-    background: var(--surface-hover);
-    border-radius: 3px;
-    overflow: hidden;
-    margin-bottom: 6px;
+.task-card-priority {
+    display: flex;
+    align-items: center;
 }
 
-.task-progress-fill {
+.priority-badge {
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: var(--surface, #1a1a1a);
+    color: var(--text-secondary, #888);
+}
+
+.priority-badge.priority-high,
+.priority-badge.priority-urgent {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--error, #ef4444);
+}
+
+.priority-badge.priority-normal {
+    background: var(--surface, #1a1a1a);
+    color: var(--text-secondary, #888);
+}
+
+.priority-badge.priority-low {
+    background: rgba(34, 197, 94, 0.15);
+    color: var(--success, #22c55e);
+}
+
+.task-card-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border, #2a2a2a);
+}
+
+.task-action-btn {
+    background: transparent;
+    border: none;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 14px;
+    opacity: 0.5;
+    transition: opacity 0.2s ease;
+}
+
+.task-action-btn:hover {
+    opacity: 1;
+}
+
+/* Task Card Progress */
+.task-card-progress {
+    margin-bottom: 16px;
+}
+
+.progress-bar {
+    height: 8px;
+    background: var(--surface, #1a1a1a);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 8px;
+}
+
+.progress-fill {
     height: 100%;
-    background: var(--primary);
-    border-radius: 3px;
+    background: var(--primary, #c5f82a);
+    border-radius: 4px;
     transition: width 0.3s ease;
 }
 
-.task-progress-fill.success {
-    background: var(--success);
+.task-card.awaiting .progress-fill {
+    background: var(--warning, #f59e0b);
 }
 
-.task-progress-info {
+.progress-info {
     display: flex;
     justify-content: space-between;
-    font-size: 12px;
+    align-items: center;
 }
 
-.task-progress-percent {
-    color: var(--primary);
+.progress-steps {
+    font-size: 13px;
+    color: var(--text-secondary, #a1a1a1);
+}
+
+.progress-percent {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--primary, #c5f82a);
+    background: var(--primary-light, rgba(197, 248, 42, 0.15));
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.task-card.awaiting .progress-percent {
+    color: var(--warning, #f59e0b);
+    background: rgba(245, 158, 11, 0.15);
+}
+
+/* Task Card Status */
+.task-card-status {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.status-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-secondary, #6b6b6b);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.status-value {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.status-value.status-active {
+    color: var(--primary, #c5f82a);
+}
+
+.status-value.status-awaiting {
+    color: var(--warning, #f59e0b);
+}
+
+.status-value.status-paused {
+    color: var(--info, #8b5cf6);
+}
+
+.status-value.status-complete {
+    color: var(--success, #22c55e);
+}
+
+/* Task Card Detail */
+.task-card-detail {
+    background: var(--surface, #1a1a1a);
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 12px;
+}
+
+.detail-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text, #fff);
+    margin-bottom: 4px;
+}
+
+.detail-sub {
+    font-size: 12px;
+    color: var(--text-secondary, #6b6b6b);
+    margin-bottom: 8px;
+}
+
+.detail-time {
+    font-size: 11px;
+    color: var(--text-secondary, #6b6b6b);
+    text-align: right;
+}
+
+/* Task Card Integrity */
+.task-card-integrity {
+    margin-bottom: 16px;
+}
+
+.integrity-label {
+    display: block;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-secondary, #6b6b6b);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+}
+
+.integrity-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.integrity-badge {
+    padding: 6px 12px;
+    background: var(--surface, #1a1a1a);
+    border-radius: 20px;
+    font-size: 12px;
+    color: var(--text-secondary, #a1a1a1);
+}
+
+.integrity-badge.health {
+    background: var(--primary-light, rgba(197, 248, 42, 0.15));
+    color: var(--primary, #c5f82a);
+}
+
+.integrity-badge .health-value {
     font-weight: 600;
 }
 
-.task-progress-steps {
-    color: var(--text-secondary);
-}
-
-/* Task Card Meta */
-.task-card-meta {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 12px;
-    color: var(--text-secondary);
-}
-
-.task-card-meta-item {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
 /* =============================================================================
-   TASK DETAIL PANEL (RIGHT)
+   TASK DETAIL PANEL CONTENT
    ============================================================================= */
 
-.task-detail-panel {
-    width: 480px;
-    display: flex;
-    flex-direction: column;
-    background: var(--surface);
-    overflow: hidden;
-}
-
 .task-detail-header {
-    padding: 20px 24px;
-    border-bottom: 1px solid var(--border);
-}
-
-.task-detail-title-row {
     display: flex;
-    align-items: flex-start;
     justify-content: space-between;
-    margin-bottom: 12px;
+    align-items: flex-start;
+    gap: 16px;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--border, #2a2a2a);
 }
 
 .task-detail-title {
     font-size: 18px;
     font-weight: 600;
-    color: var(--text);
+    color: var(--text, #fff);
     margin: 0;
     line-height: 1.4;
 }
 
-.task-detail-actions {
-    display: flex;
-    gap: 8px;
-}
-
-.task-detail-action-btn {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--surface-hover);
-    border: 1px solid var(--border);
+.task-detail-header .task-status {
+    font-size: 11px;
+    font-weight: 600;
+    padding: 6px 12px;
     border-radius: 6px;
-    color: var(--text-secondary);
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.2s ease;
+    text-transform: uppercase;
+    white-space: nowrap;
 }
 
-.task-detail-action-btn:hover {
-    background: var(--surface-hover);
-    color: var(--text);
+.task-status.task-status-running,
+.task-status.task-status-pending {
+    background: rgba(197, 248, 42, 0.15);
+    color: var(--primary, #c5f82a);
+}
+
+.task-status.task-status-completed,
+.task-status.task-status-done {
+    background: rgba(34, 197, 94, 0.15);
+    color: var(--success, #22c55e);
+}
+
+.task-status.task-status-error,
+.task-status.task-status-failed {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--error, #ef4444);
 }
 
 .task-detail-meta {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-}
-
-.task-detail-meta-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 13px;
-    color: var(--text-secondary);
-}
-
-.task-detail-meta-item .icon {
-    color: var(--text-secondary);
-}
-
-/* Task Detail Scroll */
-.task-detail-scroll {
-    flex: 1;
-    overflow-y: auto;
-    padding: 20px 24px;
-}
-
-/* Decision Required Section */
-.decision-required-section {
-    background: rgba(245, 158, 11, 0.08);
-    border: 1px solid rgba(245, 158, 11, 0.25);
-    border-radius: 12px;
-    padding: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
     margin-bottom: 20px;
 }
 
-.decision-required-header {
+.meta-item {
     display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
+    flex-direction: column;
+    gap: 4px;
 }
 
-.decision-required-icon {
-    width: 28px;
-    height: 28px;
-    background: rgba(245, 158, 11, 0.2);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--warning);
-    font-size: 14px;
-}
-
-.decision-required-title {
-    font-size: 14px;
+.meta-label {
+    font-size: 11px;
     font-weight: 600;
-    color: var(--warning);
+    color: var(--text-secondary, #666);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
-.decision-required-description {
+.meta-value {
     font-size: 14px;
-    color: var(--text-secondary);
-    margin-bottom: 16px;
-    line-height: 1.5;
+    color: var(--text, #fff);
 }
 
-.decision-options {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.decision-option {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 14px;
-    background: var(--surface-hover);
-    border: 1px solid var(--border);
+.task-detail-progress {
+    margin-bottom: 20px;
+    padding: 16px;
+    background: var(--surface, #1a1a1a);
     border-radius: 8px;
+}
+
+.task-detail-progress .progress-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text, #fff);
+    margin-bottom: 8px;
+}
+
+.task-detail-progress .progress-bar-container {
+    height: 8px;
+    background: var(--bg, #0a0a0a);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.task-detail-progress .progress-bar-fill {
+    height: 100%;
+    background: var(--primary, #c5f82a);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+.task-detail-section {
+    margin-bottom: 20px;
+    padding: 16px;
+    background: var(--surface, #1a1a1a);
+    border-radius: 8px;
+}
+
+.task-detail-section h3 {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-secondary, #888);
+    margin: 0 0 12px 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.task-detail-section .intent-text {
+    font-size: 14px;
+    color: var(--text, #fff);
+    line-height: 1.6;
+    margin: 0;
+}
+
+.task-detail-section.error-section {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.task-detail-section .error-text {
+    font-size: 13px;
+    color: var(--error, #ef4444);
+    line-height: 1.5;
+    margin: 0;
+    font-family: monospace;
+}
+
+/* Task Card Buttons */
+.btn-detailed-view,
+.btn-review-decision {
+    width: 100%;
+    padding: 12px;
+    background: var(--surface-hover, #1a1a1a);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 6px;
+    color: var(--text-secondary, #a1a1a1);
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
 }
 
-.decision-option:hover {
-    border-color: var(--primary);
-    background: var(--primary-light);
+.btn-detailed-view:hover,
+.btn-review-decision:hover {
+    background: var(--surface-hover, #1f1f1f);
+    color: var(--text, #fff);
 }
 
-.decision-option.selected {
-    border-color: var(--primary);
-    background: var(--primary-light);
+.btn-review-decision {
+    background: var(--primary, #c5f82a);
+    border-color: var(--primary, #c5f82a);
+    color: #000;
 }
 
-.decision-option-radio {
-    width: 18px;
-    height: 18px;
-    border: 2px solid var(--border);
-    border-radius: 50%;
+.btn-review-decision:hover {
+    background: #d4ff4a;
+    color: #000;
+}
+
+/* =============================================================================
+   RIGHT PANEL - TASK DETAIL
+   ============================================================================= */
+
+.task-detail-panel {
+    display: flex;
+    flex-direction: column;
+    background: var(--surface, #111);
+    overflow: hidden;
+}
+
+/* Detail Header */
+.detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border, #2a2a2a);
+}
+
+.btn-back {
+    width: 36px;
+    height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0;
+    background: var(--surface-hover, #1a1a1a);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 6px;
+    color: var(--text-secondary, #a1a1a1);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
 
-.decision-option.selected .decision-option-radio {
-    border-color: var(--primary);
+.btn-back:hover {
+    background: var(--surface-hover, #1f1f1f);
+    color: var(--text, #fff);
 }
 
-.decision-option.selected .decision-option-radio::after {
-    content: "";
-    width: 8px;
-    height: 8px;
-    background: var(--primary);
-    border-radius: 50%;
+.detail-title {
+    flex: 1;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text, #fff);
+    margin: 0;
 }
 
-.decision-option-content {
+.detail-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.status-badge {
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.status-badge.awaiting {
+    background: rgba(245, 158, 11, 0.15);
+    color: var(--warning, #f59e0b);
+}
+
+.status-badge.active {
+    background: var(--primary-light, rgba(197, 248, 42, 0.15));
+    color: var(--primary, #c5f82a);
+}
+
+.btn-pause {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--primary, #c5f82a);
+    border: none;
+    border-radius: 6px;
+    color: #000;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-pause:hover {
+    background: #d4ff4a;
+}
+
+/* Detail Progress */
+.detail-progress {
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--border, #2a2a2a);
+}
+
+.detail-progress .progress-bar {
+    height: 10px;
+    margin-bottom: 10px;
+}
+
+/* Decision Alert */
+.decision-alert {
+    margin: 20px 24px;
+    background: rgba(245, 158, 11, 0.08);
+    border: 1px solid rgba(245, 158, 11, 0.25);
+    border-radius: 16px;
+    padding: 20px;
+}
+
+.decision-header {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+.decision-icon {
+    font-size: 24px;
+}
+
+.decision-info {
     flex: 1;
 }
 
-.decision-option-label {
+.decision-title {
     font-size: 14px;
-    font-weight: 500;
-    color: var(--text);
-    margin-bottom: 2px;
+    font-weight: 600;
+    color: var(--warning, #f59e0b);
+    margin: 0 0 4px 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
-.decision-option-desc {
-    font-size: 12px;
-    color: var(--text-secondary);
+.decision-description {
+    font-size: 14px;
+    color: var(--text, #fff);
+    margin: 0;
+}
+
+.decision-context {
+    font-size: 13px;
+    color: var(--text-secondary, #a1a1a1);
+    line-height: 1.6;
+    margin-bottom: 16px;
+    padding: 12px;
+    background: var(--surface-hover, #1a1a1a);
+    border-radius: 6px;
+}
+
+.decision-context strong {
+    color: var(--text, #fff);
 }
 
 .decision-actions {
     display: flex;
-    gap: 10px;
-    margin-top: 16px;
+    gap: 12px;
 }
 
-.decision-btn {
-    flex: 1;
-    padding: 10px 16px;
-    border-radius: 8px;
-    font-size: 13px;
+.btn-primary {
+    padding: 10px 20px;
+    background: var(--primary, #c5f82a);
+    border: none;
+    border-radius: 6px;
+    color: #000;
+    font-family: inherit;
+    font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
 }
 
-.decision-btn-primary {
-    background: var(--primary);
-    border: none;
-    color: #000;
-}
-
-.decision-btn-primary:hover {
+.btn-primary:hover {
     background: #d4ff4a;
-    box-shadow: 0 0 20px var(--primary-light);
+    box-shadow: 0 0 20px var(--primary-light, rgba(197, 248, 42, 0.2));
 }
 
-.decision-btn-secondary {
-    background: transparent;
-    border: 1px solid var(--border);
-    color: var(--text-secondary);
+.btn-secondary {
+    padding: 10px 20px;
+    background: var(--surface-hover, #1a1a1a);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 6px;
+    color: var(--text, #fff);
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
 
-.decision-btn-secondary:hover {
-    background: var(--surface-hover);
-    color: var(--text);
+.btn-secondary:hover {
+    background: var(--surface-hover, #1f1f1f);
 }
 
-/* Progress Log Section */
-.progress-log-section {
-    margin-bottom: 20px;
+/* Detail Scroll Content */
+.detail-scroll {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 24px 24px;
 }
 
-.progress-log-header {
+/* Detail Sections */
+.detail-section {
+    margin-bottom: 24px;
+}
+
+.section-header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 12px;
 }
 
-.progress-log-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--text);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.progress-log-toggle {
-    background: none;
-    border: none;
-    color: var(--text-secondary);
-    font-size: 12px;
-    cursor: pointer;
-    transition: color 0.2s ease;
-}
-
-.progress-log-toggle:hover {
-    color: var(--text);
-}
-
-/* Step Items */
-.step-list {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.step-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    padding: 12px 14px;
-    background: var(--surface-hover);
-    border-radius: 6px;
-    transition: all 0.2s ease;
-}
-
-.step-item:first-child {
-    border-radius: 8px 8px 6px 6px;
-}
-
-.step-item:last-child {
-    border-radius: 6px 6px 8px 8px;
-}
-
-.step-item:only-child {
-    border-radius: 8px;
-}
-
-.step-icon {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    font-size: 12px;
-    flex-shrink: 0;
-}
-
-.step-item.completed .step-icon {
-    background: var(--success);
-    color: #000;
-}
-
-.step-item.active .step-icon {
-    background: var(--primary);
-    color: #000;
-    animation: pulse 2s infinite;
-}
-
-.step-item.pending .step-icon {
-    background: var(--surface-hover);
-    color: var(--text-secondary);
-}
-
-.step-item.error .step-icon {
-    background: var(--error);
-    color: #fff;
-}
-
-.step-content {
-    flex: 1;
-    min-width: 0;
-}
-
-.step-name {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--text);
-    margin-bottom: 2px;
-}
-
-.step-item.pending .step-name {
-    color: var(--text-secondary);
-}
-
-.step-detail {
-    font-size: 12px;
-    color: var(--text-secondary);
-}
-
-.step-time {
-    font-size: 11px;
-    color: var(--text-secondary);
-    flex-shrink: 0;
-}
-
-/* =============================================================================
-   LIVE AGENT ACTIVITY (TERMINAL)
-   ============================================================================= */
-
-.agent-activity-section {
-    border-top: 1px solid var(--border);
-    background: var(--bg);
-}
-
-.agent-activity-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 24px;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
-}
-
-.agent-activity-title {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.section-title {
     font-size: 12px;
     font-weight: 600;
-    color: var(--text-secondary);
+    color: var(--text-secondary, #6b6b6b);
     text-transform: uppercase;
     letter-spacing: 0.5px;
-}
-
-.agent-status-dot {
-    width: 8px;
-    height: 8px;
-    background: var(--primary);
-    border-radius: 50%;
-    animation: pulse 2s infinite;
-}
-
-.agent-activity-actions {
+    margin: 0;
     display: flex;
+    align-items: center;
     gap: 8px;
 }
 
-.agent-activity-btn {
-    padding: 4px 8px;
+.btn-collapse {
     background: transparent;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    color: var(--text-secondary);
-    font-size: 11px;
+    border: none;
+    color: var(--text-secondary, #6b6b6b);
+    font-size: 12px;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: transform 0.2s ease;
 }
 
-.agent-activity-btn:hover {
-    background: var(--surface-hover);
-    color: var(--text);
+.btn-collapse:hover {
+    color: var(--text, #fff);
 }
 
-.agent-activity-log {
-    padding: 16px 24px;
-    max-height: 180px;
+/* Status Section */
+.status-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: var(--surface-hover, #1a1a1a);
+    border-radius: 6px;
+    margin-bottom: 8px;
+}
+
+.status-name {
+    font-size: 14px;
+    color: var(--text, #fff);
+}
+
+.status-time {
+    font-size: 12px;
+    color: var(--text-secondary, #6b6b6b);
+}
+
+.status-substep {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 16px 10px 32px;
+    font-size: 13px;
+}
+
+.substep-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.substep-dot.active {
+    background: var(--primary, #c5f82a);
+}
+
+.substep-dot.pending {
+    background: var(--text-secondary, #6b6b6b);
+}
+
+.substep-name {
+    flex: 1;
+    color: var(--text-secondary, #a1a1a1);
+}
+
+.substep-time,
+.substep-note {
+    font-size: 12px;
+    color: var(--text-secondary, #6b6b6b);
+}
+
+/* Progress Log */
+.progress-log {
+    background: var(--surface-hover, #1a1a1a);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.progress-log.collapsed {
+    display: none;
+}
+
+.log-group {
+    border-bottom: 1px solid var(--border, #2a2a2a);
+}
+
+.log-group:last-child {
+    border-bottom: none;
+}
+
+.log-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background: var(--surface, #111);
+}
+
+.log-name {
+    flex: 1;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text, #fff);
+}
+
+.log-badge {
+    font-size: 12px;
+    color: var(--text-secondary, #6b6b6b);
+    cursor: pointer;
+}
+
+.log-badge:hover {
+    color: var(--primary, #c5f82a);
+}
+
+.log-step {
+    padding: 4px 8px;
+    background: var(--primary-light, rgba(197, 248, 42, 0.15));
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--primary, #c5f82a);
+}
+
+.log-step.completed {
+    background: rgba(34, 197, 94, 0.15);
+    color: var(--success, #22c55e);
+}
+
+.log-status {
+    font-size: 12px;
+    color: var(--success, #22c55e);
+}
+
+.log-subitems {
+    padding: 8px 16px 8px 32px;
+}
+
+.log-subitem {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 0;
+    font-size: 13px;
+}
+
+.log-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.log-dot.completed {
+    background: var(--success, #22c55e);
+}
+
+.log-subname {
+    flex: 1;
+    color: var(--text-secondary, #a1a1a1);
+}
+
+.log-substep,
+.log-substatus,
+.log-duration {
+    font-size: 11px;
+    color: var(--text-secondary, #6b6b6b);
+}
+
+/* Terminal Section */
+.terminal-section {
+    background: var(--bg, #0a0a0a);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 16px;
+    margin-top: 24px;
+}
+
+.terminal-section .section-header {
+    padding: 12px 16px;
+    background: var(--surface, #111);
+    border-bottom: 1px solid var(--border, #2a2a2a);
+    border-radius: 16px 16px 0 0;
+    margin-bottom: 0;
+}
+
+.terminal-section .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.terminal-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--primary, #c5f82a);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.4;
+    }
+}
+
+.terminal-stats {
+    display: flex;
+    gap: 16px;
+    font-size: 11px;
+    color: var(--text-secondary, #6b6b6b);
+}
+
+.terminal-output {
+    padding: 16px;
+    max-height: 150px;
     overflow-y: auto;
     font-family: monospace;
     font-size: 12px;
     line-height: 1.6;
 }
 
-.activity-line {
+.terminal-line {
+    padding: 2px 0;
+    color: var(--text-secondary, #a1a1a1);
+}
+
+.terminal-actions {
     display: flex;
-    gap: 12px;
-    padding: 3px 0;
+    gap: 8px;
+    padding: 12px 16px;
+    border-top: 1px solid var(--border, #2a2a2a);
 }
 
-.activity-timestamp {
-    color: var(--text-secondary);
-    min-width: 65px;
-    flex-shrink: 0;
+.btn-terminal {
+    padding: 6px 12px;
+    background: var(--surface-hover, #1a1a1a);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 6px;
+    color: var(--text-secondary, #a1a1a1);
+    font-family: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
 
-.activity-message {
-    color: var(--text-secondary);
+.btn-terminal:hover {
+    background: var(--surface-hover, #1f1f1f);
+    color: var(--text, #fff);
 }
 
-.activity-line.success .activity-message {
-    color: var(--success);
-}
-
-.activity-line.warning .activity-message {
-    color: var(--warning);
-}
-
-.activity-line.error .activity-message {
-    color: var(--error);
-}
-
-.activity-line.accent .activity-message {
-    color: var(--primary);
-}
-
-.activity-line.info .activity-message {
-    color: var(--info);
-}
-
-/* =============================================================================
-   EMPTY STATE
-   ============================================================================= */
-
-.empty-state {
+/* Empty States */
+.empty-state,
+.detail-empty {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 60px 40px;
+    padding: 60px 24px;
     text-align: center;
 }
 
-.empty-state-icon {
+.empty-icon {
     font-size: 48px;
     margin-bottom: 16px;
-    opacity: 0.5;
+    opacity: 0.4;
 }
 
-.empty-state-title {
+.empty-title {
     font-size: 18px;
     font-weight: 600;
-    color: var(--text);
+    color: var(--text, #fff);
+    margin: 0 0 8px 0;
+}
+
+.empty-description {
+    font-size: 14px;
+    color: var(--text-secondary, #6b6b6b);
+    margin: 0 0 24px 0;
+}
+
+.empty-info {
+    font-size: 13px;
+    color: var(--text-secondary, #a1a1a1);
+    text-align: left;
+    padding: 16px;
+    background: var(--surface-hover, #1a1a1a);
+    border-radius: 10px;
+}
+
+.empty-info p {
+    margin: 0 0 8px 0;
+}
+
+.empty-info p:last-child {
+    margin: 0;
+}
+
+/* Modals */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.modal-content {
+    position: relative;
+    width: 90%;
+    max-width: 500px;
+    background: var(--surface, #111);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+}
+
+.modal-content.modal-lg {
+    max-width: 600px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border, #2a2a2a);
+}
+
+.modal-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text, #fff);
+    margin: 0;
+}
+
+.btn-close {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary, #6b6b6b);
+    font-size: 24px;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.btn-close:hover {
+    color: var(--text, #fff);
+}
+
+.modal-body {
+    padding: 24px;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 24px;
+    border-top: 1px solid var(--border, #2a2a2a);
+}
+
+/* Form Elements */
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary, #a1a1a1);
     margin-bottom: 8px;
 }
 
-.empty-state-description {
+.form-group textarea,
+.form-group select,
+.form-group input {
+    width: 100%;
+    padding: 12px 16px;
+    background: var(--surface-hover, #1a1a1a);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 6px;
+    color: var(--text, #fff);
+    font-family: inherit;
     font-size: 14px;
-    color: var(--text-secondary);
-    max-width: 280px;
+    transition: all 0.2s ease;
 }
 
-/* =============================================================================
-   LOADING STATE
-   ============================================================================= */
+.form-group textarea:focus,
+.form-group select:focus,
+.form-group input:focus {
+    outline: none;
+    border-color: var(--primary, #c5f82a);
+    box-shadow: 0 0 0 3px var(--primary-light, rgba(197, 248, 42, 0.15));
+}
 
-.loading-state {
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+/* Decision Options in Modal */
+.decision-question h4 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text, #fff);
+    margin: 0 0 8px 0;
+}
+
+.decision-question p {
+    font-size: 14px;
+    color: var(--text-secondary, #a1a1a1);
+    margin: 0 0 20px 0;
+}
+
+.decision-options {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 60px 40px;
+    gap: 10px;
 }
 
-.loading-spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid var(--surface-hover);
-    border-top-color: var(--primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-    margin-bottom: 16px;
+.decision-option {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
+    background: var(--surface-hover, #1a1a1a);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
 
-@keyframes spin {
+.decision-option:hover {
+    border-color: var(--border-hover, #3a3a3a);
+}
+
+.decision-option:has(input:checked) {
+    border-color: var(--primary, #c5f82a);
+    background: var(--primary-light, rgba(197, 248, 42, 0.15));
+}
+
+.decision-option input[type="radio"] {
+    width: 18px;
+    height: 18px;
+    margin-top: 2px;
+    accent-color: var(--primary, #c5f82a);
+}
+
+.option-content {
+    flex: 1;
+}
+
+.option-title {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text, #fff);
+    margin-bottom: 4px;
+}
+
+.option-desc {
+    display: block;
+    font-size: 12px;
+    color: var(--text-secondary, #6b6b6b);
+}
+
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: 2000;
+}
+
+.toast {
+    padding: 12px 20px;
+    background: var(--surface, #111);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 10px;
+    color: var(--text, #fff);
+    font-size: 14px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+    animation: slideIn 0.3s ease;
+}
+
+.toast.success {
+    border-color: var(--success, #22c55e);
+}
+
+.toast.error {
+    border-color: var(--error, #ef4444);
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(100px);
+    }
     to {
-        transform: rotate(360deg);
+        opacity: 1;
+        transform: translateX(0);
     }
 }
 
-.loading-text {
-    font-size: 14px;
-    color: var(--text-secondary);
+/* Scrollbar Styles */
+.tasks-app ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-/* =============================================================================
-   RESPONSIVE
-   ============================================================================= */
+.tasks-app ::-webkit-scrollbar-track {
+    background: var(--surface, #111);
+}
+
+.tasks-app ::-webkit-scrollbar-thumb {
+    background: var(--surface-hover, #1a1a1a);
+    border-radius: 4px;
+}
+
+.tasks-app ::-webkit-scrollbar-thumb:hover {
+    background: var(--border-hover, #3a3a3a);
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .tasks-main {
+        grid-template-columns: 1fr 400px;
+    }
+
+    .terminal-stats {
+        display: none;
+    }
+}
 
 @media (max-width: 1024px) {
-    .task-detail-panel {
-        width: 380px;
-    }
-}
-
-@media (max-width: 768px) {
     .tasks-main {
-        flex-direction: column;
-    }
-
-    .tasks-list-panel {
-        border-right: none;
-        border-bottom: 1px solid var(--border);
-        max-height: 50vh;
+        grid-template-columns: 1fr;
     }
 
     .task-detail-panel {
-        width: 100%;
-        flex: 1;
+        display: none;
+    }
+
+    .task-detail-panel.active {
+        display: flex;
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 450px;
+        z-index: 100;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
     }
 
     .topbar-center {
         display: none;
     }
+}
 
-    .topbar-nav {
+@media (max-width: 768px) {
+    .tasks-topbar {
+        flex-wrap: wrap;
+        gap: 12px;
+    }
+
+    .topbar-right {
+        order: -1;
+        width: 100%;
+        justify-content: flex-end;
+    }
+
+    .status-filter-row {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+        gap: 8px;
+        padding: 12px 16px;
+    }
+
+    .filter-pill {
+        flex-shrink: 0;
+    }
+
+    .time-saved-badge {
         display: none;
     }
+
+    .quick-intent-bar {
+        padding: 12px 16px;
+    }
+
+    .intent-input-wrapper {
+        flex-direction: column;
+    }
+
+    .btn-create-run {
+        width: 100%;
+    }
+
+    .task-detail-panel.active {
+        width: 100%;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
 }
 
-/* =============================================================================
-   HTMX LOADING STATES
-   ============================================================================= */
-
+/* HTMX Loading States */
 .htmx-request .task-card {
     opacity: 0.6;
-}
-
-.htmx-request .status-pill {
     pointer-events: none;
-    opacity: 0.7;
 }
 
-/* =============================================================================
-   ANIMATIONS
-   ============================================================================= */
+.htmx-request .btn-create-run .btn-text {
+    opacity: 0.5;
+}
 
+.htmx-request .btn-create-run .spinner {
+    display: block;
+}
+
+/* Animation for task cards */
 .task-card {
-    animation: fadeIn 0.3s ease;
+    animation: fadeInUp 0.3s ease;
 }
 
-@keyframes fadeIn {
+@keyframes fadeInUp {
     from {
         opacity: 0;
-        transform: translateY(8px);
+        transform: translateY(10px);
     }
     to {
         opacity: 1;
@@ -1264,216 +1644,377 @@
 }
 
 /* =============================================================================
-   PENDING INFO, GOALS, SCHEDULERS, MONITORS
+   FLOATING PROGRESS PANEL
    ============================================================================= */
 
-/* Status pill variants */
-.status-pill.pending-info {
-    background: var(--warning-light, #fef3c7);
-    color: var(--warning-dark, #92400e);
-}
-
-.status-pill.goals {
-    background: var(--primary-light, #dbeafe);
-    color: var(--primary-dark, #1e40af);
-}
-
-.status-pill.schedulers {
-    background: var(--info-light, #e0e7ff);
-    color: var(--info-dark, #3730a3);
-}
-
-.status-pill.monitors {
-    background: var(--success-light, #d1fae5);
-    color: var(--success-dark, #065f46);
-}
-
-/* Goal Progress Section */
-.goal-progress-section {
-    padding: 16px;
-    background: var(--surface-hover);
-    border-radius: 8px;
-    margin-bottom: 16px;
-}
-
-.goal-progress-bar {
-    height: 12px;
-    background: var(--border);
-    border-radius: 6px;
-    overflow: hidden;
-    margin-bottom: 8px;
-}
-
-.goal-progress-fill {
-    height: 100%;
-    background: var(--primary);
-    border-radius: 6px;
-    transition: width 0.5s ease;
-}
-
-.goal-progress-stats {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--text);
-    margin-bottom: 8px;
-}
-
-.goal-last-action {
-    font-size: 12px;
-    color: var(--text-secondary);
-}
-
-/* Pending Info Fill Section */
-.pending-fill-section {
-    padding: 16px;
-    background: var(--warning-light, #fef3c7);
-    border-radius: 8px;
-    margin-bottom: 16px;
-    border: 1px solid var(--warning, #f59e0b);
-}
-
-.pending-reason {
-    font-size: 13px;
-    color: var(--warning-dark, #92400e);
-    margin-bottom: 12px;
-}
-
-.pending-fill-form .form-group {
-    margin-bottom: 12px;
-}
-
-.pending-fill-form label {
-    display: block;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text-secondary);
-    margin-bottom: 4px;
-}
-
-.pending-fill-form .form-input {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    font-size: 14px;
-}
-
-/* Scheduler Info Section */
-.scheduler-info-section {
-    padding: 16px;
-    background: var(--info-light, #e0e7ff);
-    border-radius: 8px;
-    margin-bottom: 16px;
-}
-
-.scheduler-cron {
-    font-family: monospace;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--info-dark, #3730a3);
-    margin-bottom: 8px;
-}
-
-.scheduler-next,
-.scheduler-file {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-bottom: 4px;
-}
-
-/* Monitor Info Section */
-.monitor-info-section {
-    padding: 16px;
-    background: var(--success-light, #d1fae5);
-    border-radius: 8px;
-    margin-bottom: 16px;
-}
-
-.monitor-target {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--success-dark, #065f46);
-    margin-bottom: 8px;
-    word-break: break-all;
-}
-
-.monitor-interval,
-.monitor-last-check,
-.monitor-last-value {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-bottom: 4px;
-}
-
-/* Pending Summary Panel */
-.pending-summary-panel {
+.floating-progress-panel {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
-    max-width: 320px;
-    background: var(--surface);
-    border: 1px solid var(--warning, #f59e0b);
-    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-    z-index: 100;
+    bottom: 24px;
+    right: 24px;
+    width: 400px;
+    background: var(--surface, #111);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+    z-index: 1000;
     overflow: hidden;
+    animation: slideInRight 0.3s ease;
 }
 
-.pending-summary-panel:empty {
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(100px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.floating-progress-panel.minimized {
+    width: 300px;
+}
+
+.floating-progress-panel.minimized .floating-progress-body {
     display: none;
 }
 
-.pending-summary-header {
+.floating-progress-header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
     padding: 12px 16px;
-    background: var(--warning-light, #fef3c7);
-    border-bottom: 1px solid var(--warning, #f59e0b);
+    background: var(--surface-hover, #1a1a1a);
+    border-bottom: 1px solid var(--border, #2a2a2a);
 }
 
-.pending-summary-header h4 {
-    margin: 0;
+.floating-progress-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
     font-size: 14px;
     font-weight: 600;
-    color: var(--warning-dark, #92400e);
+    color: var(--text, #fff);
 }
 
-.pending-summary-list {
-    max-height: 200px;
-    overflow-y: auto;
-    padding: 8px 0;
+.floating-progress-title .progress-dot {
+    width: 10px;
+    height: 10px;
+    background: var(--primary, #c5f82a);
+    border-radius: 50%;
+    animation: pulse 1.5s infinite;
 }
 
-.pending-summary-item {
+.floating-progress-title .progress-dot.completed {
+    background: var(--success, #22c55e);
+    animation: none;
+}
+
+.floating-progress-title .progress-dot.error {
+    background: var(--error, #ef4444);
+    animation: none;
+}
+
+.floating-progress-actions {
+    display: flex;
+    gap: 4px;
+}
+
+.floating-progress-actions button {
+    width: 24px;
+    height: 24px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    font-size: 13px;
-    color: var(--text);
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary, #6b6b6b);
+    font-size: 16px;
     cursor: pointer;
-    transition: background 0.2s ease;
+    border-radius: 4px;
+    transition: all 0.2s ease;
 }
 
-.pending-summary-item:hover {
-    background: var(--surface-hover);
+.floating-progress-actions button:hover {
+    background: var(--surface-hover, #1f1f1f);
+    color: var(--text, #fff);
 }
 
-.pending-summary-item .pending-app {
+.floating-progress-body {
+    padding: 16px;
+}
+
+.floating-progress-bar {
+    height: 8px;
+    background: var(--surface-hover, #1a1a1a);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 12px;
+}
+
+.floating-progress-fill {
+    height: 100%;
+    background: var(--primary, #c5f82a);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+.floating-progress-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.floating-progress-info #floating-progress-step {
+    font-size: 13px;
+    color: var(--text-secondary, #a1a1a1);
+}
+
+.floating-progress-info #floating-progress-percent {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--primary, #c5f82a);
+    background: var(--primary-light, rgba(197, 248, 42, 0.15));
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.floating-progress-log {
+    max-height: 150px;
+    overflow-y: auto;
+    background: var(--bg, #0a0a0a);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 6px;
+    padding: 8px;
+    font-family: monospace;
+    font-size: 11px;
+}
+
+.floating-progress-log .log-entry {
+    padding: 4px 0;
+    color: var(--text-secondary, #a1a1a1);
+    border-bottom: 1px solid var(--border, #2a2a2a);
+}
+
+.floating-progress-log .log-entry:last-child {
+    border-bottom: none;
+}
+
+.floating-progress-log .log-step {
+    color: var(--primary, #c5f82a);
+    font-weight: 600;
+}
+
+.floating-progress-log .log-details {
+    color: var(--text-secondary, #6b6b6b);
+    font-size: 10px;
+}
+
+/* =============================================================================
+   ACTIVITY METRICS PANEL
+   ============================================================================= */
+
+.floating-activity-metrics {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+    margin-bottom: 12px;
+    padding: 12px;
+    background: var(--surface-hover, #1a1a1a);
+    border-radius: 8px;
+    border: 1px solid var(--border, #2a2a2a);
+}
+
+.metric-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 11px;
+}
+
+.metric-row.current-item {
+    grid-column: 1 / -1;
+    background: var(--primary-light, rgba(197, 248, 42, 0.1));
+    padding: 6px 8px;
+    border-radius: 4px;
+    margin-top: 4px;
+}
+
+.metric-label {
+    color: var(--text-secondary, #6b6b6b);
     font-weight: 500;
 }
 
-.pending-summary-item .pending-field {
-    font-size: 12px;
-    color: var(--text-secondary);
+.metric-value {
+    color: var(--text, #fff);
+    font-weight: 600;
+    font-family: monospace;
 }
 
-.pending-summary-item .pending-action {
-    padding: 4px 8px;
-    background: var(--primary);
-    color: var(--accent-foreground, #000);
-    border-radius: 4px;
-    font-size: 11px;
-    font-weight: 600;
+.metric-value.phase-analyzing {
+    color: var(--warning, #f59e0b);
+}
+
+.metric-value.phase-parsing {
+    color: var(--info, #3b82f6);
+}
+
+.metric-value.phase-database {
+    color: var(--accent, #8b5cf6);
+}
+
+.metric-value.phase-writing {
+    color: var(--primary, #c5f82a);
+}
+
+.metric-value.phase-configuring {
+    color: var(--info, #3b82f6);
+}
+
+.metric-value.phase-tools {
+    color: var(--warning, #f59e0b);
+}
+
+.metric-value.phase-schedulers {
+    color: var(--accent, #8b5cf6);
+}
+
+.metric-value.phase-syncing {
+    color: var(--success, #22c55e);
+}
+
+.metric-value.phase-completed {
+    color: var(--success, #22c55e);
+}
+
+/* =============================================================================
+   TERMINAL-STYLE LOG PANEL
+   ============================================================================= */
+
+.floating-progress-terminal {
+    background: #0d1117;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.terminal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #161b22;
+    border-bottom: 1px solid #30363d;
+}
+
+.terminal-title {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: #8b949e;
+    font-family: monospace;
+}
+
+.terminal-status {
+    font-size: 8px;
+    color: #6b6b6b;
+    transition: color 0.3s ease;
+}
+
+.terminal-status.active {
+    color: var(--primary, #c5f82a);
+    animation: pulse 1s infinite;
+}
+
+.terminal-status.completed {
+    color: var(--success, #22c55e);
+    animation: none;
+}
+
+.terminal-content {
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 12px;
+    font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
+    font-size: 11px;
+    line-height: 1.6;
+}
+
+.terminal-content .log-entry {
+    padding: 2px 0;
+    color: #c9d1d9;
+    border-bottom: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.terminal-content .log-time {
+    color: #484f58;
+    margin-right: 8px;
+}
+
+.terminal-content .log-step {
+    color: var(--primary, #c5f82a);
+    font-weight: 600;
+    margin-right: 8px;
+}
+
+.terminal-content .log-current {
+    color: #58a6ff;
+}
+
+.terminal-content .log-progress {
+    color: #8b949e;
+    margin-left: 4px;
+}
+
+.terminal-content .log-bytes {
+    color: #7ee787;
+    margin-left: 4px;
+}
+
+.terminal-content .log-details {
+    color: #8b949e;
+}
+
+.terminal-content .log-summary {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid #30363d;
+}
+
+.terminal-content .summary-pre {
+    margin: 0;
+    color: #7ee787;
+    white-space: pre-wrap;
+    font-family: inherit;
+}
+
+/* Scrollbar styling for terminal */
+.terminal-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.terminal-content::-webkit-scrollbar-track {
+    background: #0d1117;
+}
+
+.terminal-content::-webkit-scrollbar-thumb {
+    background: #30363d;
+    border-radius: 3px;
+}
+
+.terminal-content::-webkit-scrollbar-thumb:hover {
+    background: #484f58;
+}
+
+@media (max-width: 480px) {
+    .floating-progress-panel {
+        width: calc(100% - 32px);
+        left: 16px;
+        right: 16px;
+    }
 }
diff --git a/ui/suite/tasks/tasks.html b/ui/suite/tasks/tasks.html
index 084c7dd..7acc3b1 100644
--- a/ui/suite/tasks/tasks.html
+++ b/ui/suite/tasks/tasks.html
@@ -1,158 +1,123 @@
 <!-- =============================================================================
      TASKS APP - Autonomous Task Management
-     Bot Database Architecture with Shared Resources
+     Respects Theme Manager - No hardcoded theme
      ============================================================================= -->
 
 <div class="tasks-app">
-    <section class="intent-input-section">
-        <div class="intent-input-container">
-            <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'"
-                    autocomplete="off"
-                />
-                <button
-                    id="quick-intent-btn"
-                    class="btn-create-run"
-                    hx-post="/api/autotask/create"
-                    hx-ext="json-enc"
-                    hx-include="#quick-intent-input"
-                    hx-target="#intent-result"
-                    hx-swap="innerHTML"
-                    hx-indicator="#intent-spinner"
-                >
-                    <span class="btn-text">Create & Run</span>
-                    <span class="spinner" id="intent-spinner"></span>
-                </button>
-            </div>
-            <div id="intent-result" class="intent-result"></div>
+    <!-- Hidden element to load stats on page load -->
+    <div
+        hx-get="/api/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/tasks?filter=complete"
+            hx-target="#task-list"
+            hx-swap="innerHTML"
+        >
+            <span class="pill-icon">✓</span>
+            <span class="pill-label">Complete</span>
+            <span class="pill-count" id="count-complete">-</span>
+        </button>
+        <button
+            class="filter-pill active"
+            data-filter="all"
+            hx-get="/api/tasks?filter=all"
+            hx-target="#task-list"
+            hx-swap="innerHTML"
+        >
+            <span class="pill-icon">📋</span>
+            <span class="pill-label">All Tasks</span>
+            <span class="pill-count" id="count-all">-</span>
+        </button>
+        <button
+            class="filter-pill"
+            data-filter="active"
+            hx-get="/api/tasks?filter=active"
+            hx-target="#task-list"
+            hx-swap="innerHTML"
+        >
+            <span class="pill-icon">⚡</span>
+            <span class="pill-label">Active Intents</span>
+            <span class="pill-count" id="count-active">-</span>
+        </button>
+        <button
+            class="filter-pill"
+            data-filter="awaiting"
+            hx-get="/api/tasks?filter=awaiting"
+            hx-target="#task-list"
+            hx-swap="innerHTML"
+        >
+            <span class="pill-icon">⏳</span>
+            <span class="pill-label">Awaiting Decision</span>
+            <span class="pill-count" id="count-awaiting">-</span>
+        </button>
+        <button
+            class="filter-pill"
+            data-filter="paused"
+            hx-get="/api/tasks?filter=paused"
+            hx-target="#task-list"
+            hx-swap="innerHTML"
+        >
+            <span class="pill-icon">⏸</span>
+            <span class="pill-label">Paused</span>
+            <span class="pill-count" id="count-paused">-</span>
+        </button>
+        <button
+            class="filter-pill"
+            data-filter="blocked"
+            hx-get="/api/tasks?filter=blocked"
+            hx-target="#task-list"
+            hx-swap="innerHTML"
+        >
+            <span class="pill-icon">⚠</span>
+            <span class="pill-label">Blocked/Issues</span>
+            <span class="pill-count" id="count-blocked">-</span>
+        </button>
+        <div class="time-saved-badge">
+            <span class="time-label">Active Time Saved:</span>
+            <span class="time-value" id="time-saved-value">-</span>
         </div>
-    </section>
+    </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'"
+                autocomplete="off"
+            />
+            <button
+                id="quick-intent-btn"
+                class="btn-create-run"
+                hx-post="/api/autotask/create"
+                hx-ext="json-enc"
+                hx-include="#quick-intent-input"
+                hx-target="#intent-result"
+                hx-swap="innerHTML"
+                hx-indicator="#intent-spinner"
+            >
+                <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>
+
+    <!-- Main Two-Column Layout -->
     <main class="tasks-main">
+        <!-- Left Panel: Task Cards List -->
         <section class="tasks-list-panel">
-            <div class="tasks-list-header">
-                <div class="tasks-list-title">
-                    <h1>Autonomous Tasks</h1>
-                    <span
-                        class="tasks-count"
-                        id="tasks-total-count"
-                        hx-get="/api/tasks/stats"
-                        hx-trigger="load, taskCreated from:body"
-                        hx-swap="innerHTML"
-                        >Loading...</span
-                    ></h1>
-                </div>
-
-                <!-- Status Filter Pills -->
-                <div class="status-filters" id="status-filters">
-                    <button
-                        class="status-pill complete active"
-                        data-filter="all"
-                        hx-get="/api/tasks?filter=all"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        All <span class="pill-count" id="count-all">-</span>
-                    </button>
-                    <button
-                        class="status-pill active-intents"
-                        data-filter="active"
-                        hx-get="/api/tasks?filter=active"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        Active
-                        <span class="pill-count" id="count-active">-</span>
-                    </button>
-                    <button
-                        class="status-pill complete"
-                        data-filter="completed"
-                        hx-get="/api/tasks?filter=completed"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        Completed
-                        <span class="pill-count" id="count-completed">-</span>
-                    </button>
-                    <button
-                        class="status-pill blocked"
-                        data-filter="priority"
-                        hx-get="/api/tasks?filter=priority"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        High Priority
-                        <span class="pill-count" id="count-priority">-</span>
-                    </button>
-                    <button
-                        class="status-pill pending-info"
-                        data-filter="pending"
-                        hx-get="/api/pending-info"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        🔑 Pending Info
-                        <span class="pill-count" id="count-pending">-</span>
-                    </button>
-                    <button
-                        class="status-pill goals"
-                        data-filter="goals"
-                        hx-get="/api/goals"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        🎯 Goals
-                        <span class="pill-count" id="count-goals">-</span>
-                    </button>
-                    <button
-                        class="status-pill schedulers"
-                        data-filter="schedulers"
-                        hx-get="/api/schedulers"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        ⏰ Schedulers
-                        <span class="pill-count" id="count-schedulers">-</span>
-                    </button>
-                    <button
-                        class="status-pill monitors"
-                        data-filter="monitors"
-                        hx-get="/api/monitors"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        👁️ Monitors
-                        <span class="pill-count" id="count-monitors">-</span>
-                    </button>
-                    <button
-                        class="status-pill tables"
-                        data-filter="tables"
-                        hx-get="/api/tables"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        🗃️ Tables
-                        <span class="pill-count" id="count-tables">-</span>
-                    </button>
-                    <button
-                        class="status-pill apps"
-                        data-filter="apps"
-                        hx-get="/api/apps"
-                        hx-target="#task-list"
-                        hx-swap="innerHTML"
-                    >
-                        📱 Apps
-                        <span class="pill-count" id="count-apps">-</span>
-                    </button>
-                </div>
-            </div>
-
-            <!-- Task List -->
             <div
                 class="tasks-list-scroll"
                 id="task-list"
@@ -160,7 +125,7 @@
                 hx-trigger="load, taskCreated from:body"
                 hx-swap="innerHTML"
             >
-                <!-- Loading indicator - will be replaced by HTMX -->
+                <!-- Loading state - replaced by HTMX -->
                 <div class="loading-state">
                     <div class="loading-spinner"></div>
                     <p>Loading tasks...</p>
@@ -168,728 +133,381 @@
             </div>
         </section>
 
-        <!-- Task Detail Panel (Right) -->
+        <!-- Right Panel: Task Detail -->
         <aside class="task-detail-panel" id="task-detail-panel">
-            <!-- Empty state shown when no task selected -->
-            <div class="task-detail-empty" id="task-detail-empty">
-                <div class="empty-state">
-                    <svg
-                        width="64"
-                        height="64"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                    >
-                        <path
-                            d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"
-                        />
-                        <rect x="9" y="3" width="6" height="4" rx="2" />
-                        <path d="M9 12h6" />
-                        <path d="M9 16h6" />
-                    </svg>
-                    <h3>Select a task</h3>
-                    <p>Click on a task from the list to view details</p>
-                    <div class="empty-state-info">
-                        <p class="info-text">
-                            <strong>Bot Database:</strong> All apps share the same database tables.<br>
-                            <strong>Shared Resources:</strong> Schedulers, tools, and monitors work across all apps.
-                        </p>
-                    </div>
+            <!-- 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 task detail content loaded via HTMX -->
-            <div id="task-detail-content" style="display: none">
-                <div class="task-detail-header">
-                    <div class="task-detail-title-row">
-                        <h2 class="task-detail-title" id="detail-title">-</h2>
-                        <div class="task-detail-actions">
-                            <button
-                                class="task-detail-action-btn"
-                                title="Edit"
-                                onclick="editSelectedTask()"
-                            >
-                                ✏️
-                            </button>
-                            <button
-                                class="task-detail-action-btn"
-                                title="Delete"
-                                onclick="deleteSelectedTask()"
-                            >
-                                🗑️
-                            </button>
-                            <button class="task-detail-action-btn" title="More">
-                                ⋯
-                            </button>
-                        </div>
-                    </div>
-                    <div class="task-detail-meta">
-                        <span class="task-detail-meta-item" id="detail-status">
-                            <span class="icon">📊</span>
-                            <span id="detail-status-text">-</span>
-                        </span>
-                        <span
-                            class="task-detail-meta-item"
-                            id="detail-priority"
-                        >
-                            <span class="icon">🎯</span>
-                            <span id="detail-priority-text">-</span>
-                        </span>
-                        <span
-                            class="task-detail-meta-item"
-                            id="detail-due-date"
-                        >
-                            <span class="icon">📅</span>
-                            <span id="detail-due-date-text">-</span>
-                        </span>
-                    </div>
-                </div>
-
-                <div class="task-detail-scroll">
-                    <!-- Task Description Section -->
-                    <section class="task-description-section">
-                        <div class="section-header">
-                            <span class="section-title">Description</span>
-                        </div>
-                        <p class="task-description" id="detail-description">
-                            No description provided.
-                        </p>
-                    </section>
-
-                    <!-- Task Actions Section -->
-                    <section class="task-actions-section">
-                        <div class="section-header">
-                            <span class="section-title">Quick Actions</span>
-                        </div>
-                        <div class="task-action-buttons">
-                            <button
-                                class="task-action-btn"
-                                onclick="updateTaskStatus('in_progress')"
-                            >
-                                ▶️ Start
-                            </button>
-                            <button
-                                class="task-action-btn"
-                                onclick="updateTaskStatus('done')"
-                            >
-                                ✓ Complete
-                            </button>
-                            <button
-                                class="task-action-btn"
-                                onclick="updateTaskStatus('blocked')"
-                            >
-                                ⏸️ Block
-                            </button>
-                        </div>
-                    </section>
-
-                    <!-- Task Activity Log -->
-                    <section class="progress-log-section">
-                        <div class="progress-log-header">
-                            <span class="progress-log-title">Activity</span>
-                        </div>
-                        <div class="step-list" id="detail-activity">
-                            <div class="step-item completed">
-                                <div class="step-icon">✓</div>
-                                <div class="step-content">
-                                    <div class="step-name">Task created</div>
-                                    <div
-                                        class="step-detail"
-                                        id="detail-created-at"
-                                    >
-                                        -
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </section>
-
-                    <!-- Goal Progress (shown for GOAL type) -->
-                    <section
-                        class="goal-progress-section"
-                        id="goal-progress-section"
-                        style="display: none"
-                    >
-                        <div class="section-header">
-                            <span class="section-title">🎯 Goal Progress</span>
-                        </div>
-                        <div class="goal-progress-content">
-                            <div class="goal-progress-bar">
-                                <div
-                                    class="goal-progress-fill"
-                                    id="goal-progress-fill"
-                                    style="width: 0%"
-                                ></div>
-                            </div>
-                            <div class="goal-progress-stats">
-                                <span id="goal-current-value">0</span> /
-                                <span id="goal-target-value">0</span> (<span
-                                    id="goal-percent"
-                                    >0</span
-                                >%)
-                            </div>
-                            <div class="goal-last-action" id="goal-last-action">
-                                Last action: -
-                            </div>
-                        </div>
-                    </section>
-
-                    <!-- Pending Info Fill Form (shown for PENDING type) -->
-                    <section
-                        class="pending-fill-section"
-                        id="pending-fill-section"
-                        style="display: none"
-                    >
-                        <div class="section-header">
-                            <span class="section-title"
-                                >🔑 Fill Information</span
-                            >
-                        </div>
-                        <div class="pending-fill-content">
-                            <p class="pending-reason" id="pending-reason">-</p>
-                            <form
-                                id="pending-fill-form"
-                                hx-post="/api/pending-info/fill"
-                                hx-swap="none"
-                            >
-                                <input
-                                    type="hidden"
-                                    name="id"
-                                    id="pending-fill-id"
-                                />
-                                <div class="form-group">
-                                    <label id="pending-fill-label">Value</label>
-                                    <input
-                                        type="password"
-                                        class="form-input"
-                                        name="value"
-                                        id="pending-fill-value"
-                                        required
-                                    />
-                                </div>
-                                <button type="submit" class="task-action-btn">
-                                    Save to Bot Config
-                                </button>
-                            </form>
-                        </div>
-                    </section>
-
-                    <!-- Scheduler Info (shown for SCHEDULER type) -->
-                    <section
-                        class="scheduler-info-section"
-                        id="scheduler-info-section"
-                        style="display: none"
-                    >
-                        <div class="section-header">
-                            <span class="section-title">⏰ Schedule (Shared)</span>
-                        </div>
-                        <div class="scheduler-info-content">
-                            <div class="scheduler-cron" id="scheduler-cron">
-                                Cron: -
-                            </div>
-                            <div class="scheduler-next" id="scheduler-next">
-                                Next run: -
-                            </div>
-                            <div class="scheduler-file" id="scheduler-file">
-                                File: .gbdialog/schedulers/-
-                            </div>
-                            <p class="shared-resource-note">
-                                ℹ️ This scheduler runs for all apps in this bot
-                            </p>
-                        </div>
-                    </section>
-
-                    <!-- Monitor Info (shown for MONITOR type) -->
-                    <section
-                        class="monitor-info-section"
-                        id="monitor-info-section"
-                        style="display: none"
-                    >
-                        <div class="section-header">
-                            <span class="section-title">👁️ Monitor (Shared)</span>
-                        </div>
-                        <div class="monitor-info-content">
-                            <div class="monitor-target" id="monitor-target">
-                                Target: -
-                            </div>
-                            <div class="monitor-interval" id="monitor-interval">
-                                Interval: -
-                            </div>
-                            <div
-                                class="monitor-last-check"
-                                id="monitor-last-check"
-                            >
-                                Last check: -
-                            </div>
-                            <div
-                                class="monitor-last-value"
-                                id="monitor-last-value"
-                            >
-                                Last value: -
-                            </div>
-                            <p class="shared-resource-note">
-                                ℹ️ This monitor triggers for all apps in this bot
-                            </p>
-                        </div>
-                    </section>
-
-                    <!-- Table Info (shown for TABLE type) -->
-                    <section
-                        class="table-info-section"
-                        id="table-info-section"
-                        style="display: none"
-                    >
-                        <div class="section-header">
-                            <span class="section-title">🗃️ Table (Shared)</span>
-                        </div>
-                        <div class="table-info-content">
-                            <div class="table-name" id="table-name">
-                                Table: -
-                            </div>
-                            <div class="table-fields" id="table-fields">
-                                Fields: -
-                            </div>
-                            <div class="table-records" id="table-records">
-                                Records: -
-                            </div>
-                            <div class="table-source">
-                                Defined in: <code>.gbdialog/tables.bas</code>
-                            </div>
-                            <p class="shared-resource-note">
-                                ℹ️ All apps in this bot access this table via FIND keyword
-                            </p>
-                            <div class="table-query-example">
-                                <strong>Example:</strong>
-                                <code id="table-query-example">FIND * IN table_name</code>
-                            </div>
-                        </div>
-                    </section>
-
-                    <!-- App Info (shown for APP type) -->
-                    <section
-                        class="app-info-section"
-                        id="app-info-section"
-                        style="display: none"
-                    >
-                        <div class="section-header">
-                            <span class="section-title">📱 App</span>
-                        </div>
-                        <div class="app-info-content">
-                            <div class="app-name" id="app-name">
-                                App: -
-                            </div>
-                            <div class="app-url" id="app-url">
-                                URL: /apps/-
-                            </div>
-                            <div class="app-tables" id="app-tables">
-                                Uses tables: -
-                            </div>
-                            <p class="shared-resource-note">
-                                ℹ️ This app uses the bot's shared database
-                            </p>
-                            <div class="app-actions">
-                                <button class="task-action-btn" onclick="openApp()">
-                                    🚀 Open App
-                                </button>
-                                <button class="task-action-btn" onclick="editAppTables()">
-                                    🗃️ Edit Tables
-                                </button>
-                            </div>
-                        </div>
-                    </section>
-                </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>
 
-<!-- Bot Database Summary Panel -->
+<!-- Floating Progress Panel - Shows live task generation progress -->
 <div
-    class="bot-db-summary-panel"
-    id="bot-db-summary-panel"
-    hx-get="/api/bot/database/summary"
-    hx-trigger="load"
-    hx-swap="innerHTML"
+    class="floating-progress-panel"
+    id="floating-progress"
+    style="display: none"
 >
-    <div class="bot-db-loading">Loading bot database info...</div>
-</div>
-
-<!-- Pending Info Summary Panel -->
-<div
-    class="pending-summary-panel"
-    id="pending-summary-panel"
-    hx-get="/api/pending-info/summary"
-    hx-trigger="load"
-    hx-swap="innerHTML"
-></div>
-
-<!-- New Intent Modal -->
-<!-- Edit Tables Modal -->
-<div class="modal-overlay" id="editTablesModal">
-    <div class="modal modal-large">
-        <div class="modal-header">
-            <h3>🗃️ Edit Tables (tables.bas)</h3>
-            <button class="modal-close" onclick="closeEditTablesModal()">
-                <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <line x1="18" y1="6" x2="6" y2="18" />
-                    <line x1="6" y1="6" x2="18" y2="18" /></h3>
-                </svg>
+    <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 class="modal-body">
-            <p class="modal-description">
-                Define tables using the TABLE keyword. Changes auto-sync to the bot database.
-            </p>
+    </div>
+    <div class="floating-progress-body">
+        <div class="floating-progress-bar">
             <div
-                id="tables-editor"
-                hx-get="/api/tables/source"
-                hx-trigger="load"
-                hx-swap="innerHTML"
-            >
-                <div class="loading-state">Loading tables.bas...</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>
+</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="normal">Normal</option>
+                            <option value="high">High</option>
+                            <option value="low">Low</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">
-            <button
-                class="decision-btn decision-btn-secondary"
-                onclick="closeEditTablesModal()"
-            >
+            <button class="btn-secondary" onclick="closeDecisionModal()">
                 Cancel
             </button>
-            <button
-                class="decision-btn decision-btn-primary"
-                onclick="saveTablesFile()"
-            >
-                Save & Sync
+            <button class="btn-secondary" onclick="skipDecision()">
+                Skip for Now
+            </button>
+            <button class="btn-primary" onclick="submitDecision()">
+                Confirm Decision
             </button>
         </div>
     </div>
 </div>
 
 <script>
-    // Conditionally load tasks.js only if not already loaded
-    if (typeof TasksState === "undefined") {
-        const script = document.createElement("script");
-        script.src = "tasks/tasks.js";
-        document.head.appendChild(script);
-    }
-</script>
-<script>
-    // Edit Tables Modal functions
-    function showEditTablesModal() {
-        document.getElementById("editTablesModal").classList.add("show");
-        htmx.trigger(document.getElementById("tables-editor"), "load");
-    }
-
-    function closeEditTablesModal() {
-        document.getElementById("editTablesModal").classList.remove("show");
-    }
-
-    function editAppTables() {
-        showEditTablesModal();
-    }
-
-    function saveTablesFile() {
-        const editor = document.getElementById("tables-editor-content");
-        if (!editor) return;
-
-        fetch("/api/tables/source", {
-            method: "PUT",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ content: editor.value }),
-        })
-            .then((response) => {
-                if (response.ok) {
-                    closeEditTablesModal();
-                    htmx.trigger(document.body, "taskCreated");
-                    showToast("Tables saved and synced to database", "success");
-                } else {
-                    showToast("Failed to save tables", "error");
-                }
-            })
-            .catch((err) => {
-                console.error("Failed to save tables:", err);
-                showToast("Failed to save tables", "error");
-            });
-    }
-
-    function showToast(message, type) {
-        // Simple toast notification
-        const toast = document.createElement("div");
-        toast.className = `toast toast-${type}`;
-        toast.textContent = message;
-        document.body.appendChild(toast);
-        setTimeout(() => toast.remove(), 3000);
-    }
-
-    // Transform form data before sending to API - using global listener
-    document.body.addEventListener("htmx:configRequest", function (event) {
-        const form = event.detail.elt;
-        if (form.id !== "newIntentForm") return;
-
-        const formData = event.detail.parameters;
-
-        // Convert due_date to ISO 8601 format if present
-        if (formData.due_date && formData.due_date.trim() !== "") {
-            const date = new Date(formData.due_date);
-            formData.due_date = date.toISOString();
-        } else {
-            delete formData.due_date;
-        }
-
-        // Remove empty optional fields
-        if (!formData.description || formData.description.trim() === "") {
-            delete formData.description;
-        }
-
-        // Handle auto-detect intent type
-        if (formData.intent_type === "auto") {
-            delete formData.intent_type;
+    // Initialize on load
+    document.addEventListener("DOMContentLoaded", function () {
+        if (typeof initTasksApp === "function") {
+            initTasksApp();
         }
+        // Load stats
+        loadTaskStats();
     });
 
-    // Currently selected task
-    window.selectedTaskId = null;
-    window.selectedTaskType = null;
+    // Load task statistics
+    function loadTaskStats() {
+        fetch("/api/tasks/stats")
+            .then((r) => r.json())
+            .then((stats) => {
+                if (stats.complete !== undefined)
+                    document.getElementById("count-complete").textContent =
+                        stats.complete;
+                if (stats.active !== undefined)
+                    document.getElementById("count-active").textContent =
+                        stats.active;
+                if (stats.awaiting !== undefined)
+                    document.getElementById("count-awaiting").textContent =
+                        stats.awaiting;
+                if (stats.paused !== undefined)
+                    document.getElementById("count-paused").textContent =
+                        stats.paused;
+                if (stats.blocked !== undefined)
+                    document.getElementById("count-blocked").textContent =
+                        stats.blocked;
+                if (stats.time_saved !== undefined)
+                    document.getElementById("time-saved-value").textContent =
+                        stats.time_saved;
+            })
+            .catch((e) => console.warn("Failed to load stats:", e));
+    }
 
-    // Select a task and load its details (global for HTMX onclick)
-    window.selectTask = function (taskId, taskType) {
-        window.selectedTaskId = taskId;
-        window.selectedTaskType = taskType || "task";
-
-        // Update UI selection state
-        document.querySelectorAll(".task-item, .task-card").forEach((el) => {
-            el.classList.remove("selected");
+    // Filter pill click handler
+    document.querySelectorAll(".filter-pill").forEach((pill) => {
+        pill.addEventListener("click", function () {
+            document
+                .querySelectorAll(".filter-pill")
+                .forEach((p) => p.classList.remove("active"));
+            this.classList.add("active");
         });
-        const selectedEl = document.querySelector(`[data-task-id="${taskId}"]`);
-        if (selectedEl) {
-            selectedEl.classList.add("selected");
-        }
-
-        // Show detail panel content
-        document.getElementById("task-detail-empty").style.display = "none";
-        document.getElementById("task-detail-content").style.display = "block";
-
-        // Hide all type-specific sections
-        document.getElementById("goal-progress-section").style.display = "none";
-        document.getElementById("pending-fill-section").style.display = "none";
-        document.getElementById("scheduler-info-section").style.display = "none";
-        document.getElementById("monitor-info-section").style.display = "none";
-        document.getElementById("table-info-section").style.display = "none";
-        document.getElementById("app-info-section").style.display = "none";
-
-        // Load details based on type
-        const endpoint = getEndpointForType(taskType, taskId);
-        fetch(endpoint)
-            .then((response) => response.json())
-            .then((data) => {
-                populateDetails(data, taskType);
-            })
-            .catch((err) => {
-                console.error("Failed to load details:", err);
-            });
-    };
-
-    function getEndpointForType(type, id) {
-        switch (type) {
-            case "goal":
-                return `/api/goals/${id}`;
-            case "pending":
-                return `/api/pending-info/${id}`;
-            case "scheduler":
-                return `/api/schedulers/${id}`;
-            case "monitor":
-                return `/api/monitors/${id}`;
-            case "table":
-                return `/api/tables/${id}`;
-            case "app":
-                return `/api/apps/${id}`;
-            default:
-                return `/api/tasks/${id}`;
-        }
-    }
-
-    function populateDetails(data, type) {
-        document.getElementById("detail-title").textContent =
-            data.title || data.name || "Untitled";
-        document.getElementById("detail-status-text").textContent =
-            data.status || "unknown";
-        document.getElementById("detail-priority-text").textContent =
-            data.priority || "normal";
-        document.getElementById("detail-description").textContent =
-            data.description || "No description provided.";
-
-        const dueDateText = data.due_date
-            ? new Date(data.due_date).toLocaleDateString()
-            : "No due date";
-        document.getElementById("detail-due-date-text").textContent = dueDateText;
-
-        const createdText = data.created_at
-            ? new Date(data.created_at).toLocaleString()
-            : "-";
-        document.getElementById("detail-created-at").textContent = createdText;
-
-        // Show type-specific sections
-        switch (type) {
-            case "goal":
-                document.getElementById("goal-progress-section").style.display = "block";
-                document.getElementById("goal-current-value").textContent = data.current_value || 0;
-                document.getElementById("goal-target-value").textContent = data.target_value || 0;
-                const percent = data.target_value ? Math.round((data.current_value / data.target_value) * 100) : 0;
-                document.getElementById("goal-percent").textContent = percent;
-                document.getElementById("goal-progress-fill").style.width = percent + "%";
-                document.getElementById("goal-last-action").textContent = "Last action: " + (data.last_action || "-");
-                break;
-
-            case "pending":
-                document.getElementById("pending-fill-section").style.display = "block";
-                document.getElementById("pending-fill-id").value = data.id;
-                document.getElementById("pending-fill-label").textContent = data.field_label || "Value";
-                document.getElementById("pending-reason").textContent = data.reason || "Required for app functionality";
-                break;
-
-            case "scheduler":
-                document.getElementById("scheduler-info-section").style.display = "block";
-                document.getElementById("scheduler-cron").textContent = "Cron: " + (data.cron || "-");
-                document.getElementById("scheduler-next").textContent = "Next run: " + (data.next_run || "-");
-                document.getElementById("scheduler-file").textContent = "File: .gbdialog/schedulers/" + (data.file || "-");
-                break;
-
-            case "monitor":
-                document.getElementById("monitor-info-section").style.display = "block";
-                document.getElementById("monitor-target").textContent = "Target: " + (data.target || "-");
-                document.getElementById("monitor-interval").textContent = "Interval: " + (data.interval || "-");
-                document.getElementById("monitor-last-check").textContent = "Last check: " + (data.last_check || "-");
-                document.getElementById("monitor-last-value").textContent = "Last value: " + (data.last_value || "-");
-                break;
-
-            case "table":
-                document.getElementById("table-info-section").style.display = "block";
-                document.getElementById("table-name").textContent = "Table: " + (data.name || "-");
-                document.getElementById("table-fields").textContent = "Fields: " + (data.fields?.join(", ") || "-");
-                document.getElementById("table-records").textContent = "Records: " + (data.record_count || 0);
-                document.getElementById("table-query-example").textContent = "FIND * IN " + (data.name || "table_name");
-                break;
-
-            case "app":
-                document.getElementById("app-info-section").style.display = "block";
-                document.getElementById("app-name").textContent = "App: " + (data.name || "-");
-                document.getElementById("app-url").textContent = "URL: /apps/" + (data.name || "-");
-                document.getElementById("app-tables").textContent = "Uses tables: " + (data.tables?.join(", ") || "-");
-                break;
-        }
-    }
-
-    // Update task status (global for onclick)
-    window.updateTaskStatus = function (newStatus) {
-        if (!window.selectedTaskId) return;
-
-        fetch(`/api/tasks/${window.selectedTaskId}/status`, {
-            method: "PUT",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ status: newStatus }),
-        })
-            .then((response) => {
-                if (response.ok) {
-                    htmx.trigger(document.body, "taskCreated");
-                    window.selectTask(window.selectedTaskId, window.selectedTaskType);
-                }
-            })
-            .catch((err) => console.error("Failed to update status:", err));
-    };
-
-    // Delete selected task (global for onclick)
-    window.deleteSelectedTask = function () {
-        if (!window.selectedTaskId) return;
-        if (!confirm("Are you sure you want to delete this?")) return;
-
-        const endpoint = getEndpointForType(window.selectedTaskType, window.selectedTaskId);
-        fetch(endpoint, { method: "DELETE" })
-            .then((response) => {
-                if (response.ok) {
-                    window.selectedTaskId = null;
-                    window.selectedTaskType = null;
-                    document.getElementById("task-detail-empty").style.display = "flex";
-                    document.getElementById("task-detail-content").style.display = "none";
-                    htmx.trigger(document.body, "taskCreated");
-                    showToast("Deleted successfully", "success");
-                }
-            })
-            .catch((err) => console.error("Failed to delete:", err));
-    };
-
-    // Edit selected task (global for onclick)
-    window.editSelectedTask = function () {
-        if (!window.selectedTaskId) return;
-
-        if (window.selectedTaskType === "table") {
-            showEditTablesModal();
-        } else {
-            alert("Edit functionality for " + window.selectedTaskType + ": " + window.selectedTaskId);
-        }
-    };
-
-    // Open app in new tab
-    window.openApp = function () {
-        if (window.selectedTaskType === "app" && window.selectedTaskId) {
-            window.open("/apps/" + window.selectedTaskId, "_blank");
-        }
-    };
-
-    // Close modal on escape key
-    document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
-            closeNewIntentModal();
-            closeEditTablesModal();
-        }
     });
 
-    // Close modal when clicking overlay
-    document.querySelectorAll(".modal-overlay").forEach((overlay) => {
-        overlay.addEventListener("click", (e) => {
-            if (e.target.classList.contains("modal-overlay")) {
-                closeNewIntentModal();
-                closeEditTablesModal();
+    // Modal functions
+    function showNewIntentModal() {
+        document.getElementById("new-intent-modal").style.display = "flex";
+    }
+
+    function closeNewIntentModal() {
+        document.getElementById("new-intent-modal").style.display = "none";
+    }
+
+    function showDecisionModal(decision) {
+        if (decision) {
+            document.getElementById("decision-question").innerHTML = `
+                <h4>${decision.title || "Decision Required"}</h4>
+                <p>${decision.description || ""}</p>
+            `;
+        }
+        document.getElementById("decision-modal").style.display = "flex";
+    }
+
+    function closeDecisionModal() {
+        document.getElementById("decision-modal").style.display = "none";
+    }
+
+    function submitNewIntent() {
+        const form = document.getElementById("new-intent-form");
+        const intent = form.querySelector('[name="intent"]').value;
+        if (intent.trim()) {
+            document.getElementById("quick-intent-input").value = intent;
+            htmx.trigger(document.getElementById("quick-intent-btn"), "click");
+            closeNewIntentModal();
+        }
+    }
+
+    function submitDecision() {
+        // Implementation for submitting decision
+        closeDecisionModal();
+        htmx.trigger(document.body, "taskCreated");
+    }
+
+    function skipDecision() {
+        closeDecisionModal();
+    }
+
+    // Task selection
+    function selectTask(taskId) {
+        // Update selection UI
+        document.querySelectorAll(".task-card").forEach((card) => {
+            card.classList.remove("selected");
+        });
+        const selectedCard = document.querySelector(
+            `[data-task-id="${taskId}"]`,
+        );
+        if (selectedCard) {
+            selectedCard.classList.add("selected");
+        }
+
+        // Show detail panel
+        document.getElementById("detail-empty").style.display = "none";
+        const detailContent = document.getElementById("task-detail-content");
+        detailContent.style.display = "block";
+
+        // Load task details
+        htmx.ajax("GET", `/api/tasks/${taskId}`, {
+            target: "#task-detail-content",
+            swap: "innerHTML",
+        });
+    }
+
+    function deselectTask() {
+        document.querySelectorAll(".task-card").forEach((card) => {
+            card.classList.remove("selected");
+        });
+        document.getElementById("detail-empty").style.display = "flex";
+        document.getElementById("task-detail-content").style.display = "none";
+    }
+
+    // Floating Progress Panel Functions
+    function showFloatingProgress(taskName) {
+        let panel = document.getElementById("floating-progress");
+        document.getElementById("floating-task-name").textContent =
+            taskName || "Processing...";
+        document.getElementById("floating-progress-fill").style.width = "0%";
+        document.getElementById("floating-progress-step").textContent =
+            "Starting...";
+        document.getElementById("floating-progress-percent").textContent = "0%";
+        document.getElementById("floating-progress-log").innerHTML = "";
+        const dot = panel.querySelector(".progress-dot");
+        if (dot) dot.classList.remove("completed", "error");
+        panel.style.display = "block";
+        panel.classList.remove("minimized");
+    }
+
+    function updateFloatingProgress(step, message, current, total, details) {
+        const panel = document.getElementById("floating-progress");
+        if (panel.style.display === "none") {
+            showFloatingProgress(message);
+        }
+
+        const percent = total > 0 ? Math.round((current / total) * 100) : 0;
+        document.getElementById("floating-progress-fill").style.width =
+            percent + "%";
+        document.getElementById("floating-progress-step").textContent = message;
+        document.getElementById("floating-progress-percent").textContent =
+            percent + "%";
+
+        // Add log entry
+        if (step) {
+            const log = document.getElementById("floating-progress-log");
+            const entry = document.createElement("div");
+            entry.className = "log-entry";
+            const time = new Date().toLocaleTimeString();
+            entry.innerHTML = `<span class="log-time">${time}</span> <span class="log-step">[${step}]</span> ${message}`;
+            if (details) {
+                entry.innerHTML += `<br><span class="log-details">→ ${details}</span>`;
             }
-        });
-    });
-
-    // Close modal after successful form submission
-    document.body.addEventListener("htmx:afterRequest", (e) => {
-        if (e.detail.elt.id === "newIntentForm" && e.detail.successful) {
-            closeNewIntentModal();
-            showToast("Intent created successfully", "success");
+            log.appendChild(entry);
+            log.scrollTop = log.scrollHeight;
         }
-    });
+    }
 
-    // Update stats counts on load
-    document.body.addEventListener("htmx:afterSwap", (e) => {
-        if (e.detail.target.id === "tasks-total-count") {
-            // Stats loaded, update pill counts
-            try {
-                const stats = JSON.parse(e.detail.target.textContent);
-                if (stats.total !== undefined) {
-                    document.getElementById("count-all").textContent = stats.total;
-                    document.getElementById("count-active").textContent = stats.running || 0;
-                    document.getElementById("count-completed").textContent = stats.completed || 0;
-                    document.getElementById("count-pending").textContent = stats.pending_count || 0;
-                    document.getElementById("count-goals").textContent = stats.goals_count || 0;
-                    document.getElementById("count-schedulers").textContent = stats.schedulers_count || 0;
-                    document.getElementById("count-monitors").textContent = stats.monitors_count || 0;
-                    document.getElementById("count-tables").textContent = stats.tables_count || 0;
-                    document.getElementById("count-apps").textContent = stats.apps_count || 0;
-                    e.detail.target.textContent = stats.total + " items";
-                }
-            } catch (err) {
-                // Not JSON, leave as is
+    function completeFloatingProgress(message) {
+        document.getElementById("floating-progress-fill").style.width = "100%";
+        document.getElementById("floating-progress-step").textContent =
+            message || "Completed!";
+        document.getElementById("floating-progress-percent").textContent =
+            "100%";
+        const panel = document.getElementById("floating-progress");
+        const dot = panel.querySelector(".progress-dot");
+        if (dot) dot.classList.add("completed");
+
+        // Refresh task list
+        htmx.trigger(document.body, "taskCreated");
+        loadTaskStats();
+
+        // Auto-hide after 5 seconds
+        setTimeout(closeFloatingProgress, 5000);
+    }
+
+    function errorFloatingProgress(errorMessage) {
+        document.getElementById("floating-progress-step").textContent =
+            "Error: " + errorMessage;
+        const panel = document.getElementById("floating-progress");
+        const dot = panel.querySelector(".progress-dot");
+        if (dot) dot.classList.add("error");
+    }
+
+    function minimizeFloatingProgress() {
+        document
+            .getElementById("floating-progress")
+            .classList.toggle("minimized");
+    }
+
+    function closeFloatingProgress() {
+        const panel = document.getElementById("floating-progress");
+        panel.style.display = "none";
+        const dot = panel.querySelector(".progress-dot");
+        if (dot) dot.classList.remove("completed", "error");
+    }
+
+    // Listen for HTMX events to refresh stats
+    document.body.addEventListener("htmx:afterSwap", function (e) {
+        if (e.detail.target.id === "task-list") {
+            loadTaskStats();
+            // Show empty state if no tasks
+            const taskList = document.getElementById("task-list");
+            const emptyState = document.getElementById("empty-state");
+            if (taskList && emptyState) {
+                const hasTasks = taskList.querySelector(".task-card");
+                emptyState.style.display = hasTasks ? "none" : "flex";
             }
         }
     });
diff --git a/ui/suite/tasks/tasks.js b/ui/suite/tasks/tasks.js
index 13fd105..385c319 100644
--- a/ui/suite/tasks/tasks.js
+++ b/ui/suite/tasks/tasks.js
@@ -40,10 +40,11 @@ function setupIntentInputHandlers() {
   const input = document.getElementById("quick-intent-input");
   const btn = document.getElementById("quick-intent-btn");
 
-  if (input) {
+  if (input && btn) {
     input.addEventListener("keypress", function (e) {
       if (e.key === "Enter" && input.value.trim()) {
-        btn.click();
+        e.preventDefault();
+        htmx.trigger(btn, "click");
       }
     });
   }
@@ -106,56 +107,441 @@ function setupIntentInputHandlers() {
 
 function initWebSocket() {
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  const wsUrl = `${protocol}//${window.location.host}/ws/tasks`;
+  const wsUrl = `${protocol}//${window.location.host}/ws/task-progress`;
+
+  console.log("[Tasks WS] Attempting connection to:", wsUrl);
 
   try {
     TasksState.wsConnection = new WebSocket(wsUrl);
 
     TasksState.wsConnection.onopen = function () {
-      console.log("[Sentient Tasks] WebSocket connected");
+      console.log("[Tasks WS] WebSocket connected successfully");
       addAgentLog("info", "[SYSTEM] Connected to task orchestrator");
     };
 
     TasksState.wsConnection.onmessage = function (event) {
-      handleWebSocketMessage(JSON.parse(event.data));
+      console.log("[Tasks WS] Raw message received:", event.data);
+      try {
+        const data = JSON.parse(event.data);
+        console.log("[Tasks WS] Parsed message:", data.type, data);
+        handleWebSocketMessage(data);
+      } catch (e) {
+        console.error("[Tasks WS] Failed to parse message:", e, event.data);
+      }
     };
 
-    TasksState.wsConnection.onclose = function () {
-      console.log("[Sentient Tasks] WebSocket disconnected, reconnecting...");
+    TasksState.wsConnection.onclose = function (event) {
+      console.log(
+        "[Tasks WS] WebSocket disconnected, code:",
+        event.code,
+        "reason:",
+        event.reason,
+      );
       setTimeout(initWebSocket, 5000);
     };
 
     TasksState.wsConnection.onerror = function (error) {
-      console.error("[Sentient Tasks] WebSocket error:", error);
+      console.error("[Tasks WS] WebSocket error:", error);
     };
   } catch (e) {
-    console.warn("[Sentient Tasks] WebSocket not available");
+    console.error("[Tasks WS] Failed to create WebSocket:", e);
   }
 }
 
 function handleWebSocketMessage(data) {
+  console.log("[Tasks WS] handleWebSocketMessage called with type:", data.type);
+
   switch (data.type) {
+    case "connected":
+      console.log("[Tasks WS] Connected to task progress stream");
+      addAgentLog("info", "[SYSTEM] Task progress stream connected");
+      break;
+
+    case "task_started":
+      console.log(
+        "[Tasks WS] TASK_STARTED - showing floating progress:",
+        data.message,
+      );
+      addAgentLog("accent", `[TASK] Started: ${data.message}`);
+      showFloatingProgress(data.message);
+      updateFloatingProgressBar(0, data.total_steps, data.message);
+      updateActivityMetrics(data.activity);
+      updateProgressUI(data);
+      break;
+
+    case "task_progress":
+      console.log(
+        "[Tasks WS] TASK_PROGRESS - step:",
+        data.step,
+        "message:",
+        data.message,
+      );
+      addAgentLog("info", `[${data.step}] ${data.message}`);
+      if (data.activity) {
+        updateActivityMetrics(data.activity);
+        if (data.activity.current_item) {
+          addAgentLog("info", `  → Processing: ${data.activity.current_item}`);
+        }
+      } else if (data.details) {
+        addAgentLog("info", `  → ${data.details}`);
+      }
+      updateFloatingProgressBar(
+        data.current_step,
+        data.total_steps,
+        data.message,
+        data.step,
+        data.details,
+        data.activity,
+      );
+      updateProgressUI(data);
+      break;
+
+    case "task_completed":
+      console.log("[Tasks WS] TASK_COMPLETED:", data.message);
+      addAgentLog("success", `[COMPLETE] ${data.message}`);
+      if (data.activity) {
+        updateActivityMetrics(data.activity);
+        logFinalStats(data.activity);
+      }
+      completeFloatingProgress(data.message, data.activity);
+      updateProgressUI(data);
+      onTaskCompleted(data);
+      if (typeof htmx !== "undefined") {
+        htmx.trigger(document.body, "taskCreated");
+      }
+      break;
+
+    case "task_error":
+      console.log("[Tasks WS] TASK_ERROR:", data.error || data.message);
+      addAgentLog("error", `[ERROR] ${data.error || data.message}`);
+      errorFloatingProgress(data.error || data.message);
+      onTaskFailed(data, data.error);
+      break;
+
     case "task_update":
       updateTaskCard(data.task);
-      if (data.task.id === TasksState.selectedTaskId) {
+      if (data.task && data.task.id === TasksState.selectedTaskId) {
         updateTaskDetail(data.task);
       }
       break;
+
     case "step_progress":
       updateStepProgress(data.taskId, data.step);
       break;
+
     case "agent_log":
       addAgentLog(data.level, data.message);
       break;
+
     case "decision_required":
       showDecisionRequired(data.decision);
       break;
-    case "task_completed":
-      onTaskCompleted(data.task);
-      break;
-    case "task_failed":
-      onTaskFailed(data.task, data.error);
-      break;
+  }
+}
+
+function updateActivityMetrics(activity) {
+  if (!activity) return;
+
+  const metricsEl = document.getElementById("floating-activity-metrics");
+  if (!metricsEl) return;
+
+  let html = "";
+
+  if (activity.phase) {
+    html += `<div class="metric-row"><span class="metric-label">Phase:</span> <span class="metric-value phase-${activity.phase}">${activity.phase.toUpperCase()}</span></div>`;
+  }
+
+  if (activity.items_processed !== undefined) {
+    const total = activity.items_total ? `/${activity.items_total}` : "";
+    html += `<div class="metric-row"><span class="metric-label">Processed:</span> <span class="metric-value">${activity.items_processed}${total} items</span></div>`;
+  }
+
+  if (activity.speed_per_min) {
+    html += `<div class="metric-row"><span class="metric-label">Speed:</span> <span class="metric-value">~${activity.speed_per_min.toFixed(1)} items/min</span></div>`;
+  }
+
+  if (activity.eta_seconds) {
+    const mins = Math.floor(activity.eta_seconds / 60);
+    const secs = activity.eta_seconds % 60;
+    const eta = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+    html += `<div class="metric-row"><span class="metric-label">ETA:</span> <span class="metric-value">${eta}</span></div>`;
+  }
+
+  if (activity.bytes_processed) {
+    const kb = (activity.bytes_processed / 1024).toFixed(1);
+    html += `<div class="metric-row"><span class="metric-label">Generated:</span> <span class="metric-value">${kb} KB</span></div>`;
+  }
+
+  if (activity.tokens_used) {
+    html += `<div class="metric-row"><span class="metric-label">Tokens:</span> <span class="metric-value">${activity.tokens_used.toLocaleString()}</span></div>`;
+  }
+
+  if (activity.files_created && activity.files_created.length > 0) {
+    html += `<div class="metric-row"><span class="metric-label">Files:</span> <span class="metric-value">${activity.files_created.length} created</span></div>`;
+  }
+
+  if (activity.tables_created && activity.tables_created.length > 0) {
+    html += `<div class="metric-row"><span class="metric-label">Tables:</span> <span class="metric-value">${activity.tables_created.length} synced</span></div>`;
+  }
+
+  if (activity.current_item) {
+    html += `<div class="metric-row current-item"><span class="metric-label">Current:</span> <span class="metric-value">${activity.current_item}</span></div>`;
+  }
+
+  metricsEl.innerHTML = html;
+}
+
+function logFinalStats(activity) {
+  if (!activity) return;
+
+  addAgentLog("info", "─────────────────────────────────");
+  addAgentLog("info", "GENERATION COMPLETE");
+
+  if (activity.files_created && activity.files_created.length > 0) {
+    addAgentLog("success", `Files created: ${activity.files_created.length}`);
+    activity.files_created.forEach((f) => addAgentLog("info", `  • ${f}`));
+  }
+
+  if (activity.tables_created && activity.tables_created.length > 0) {
+    addAgentLog("success", `Tables synced: ${activity.tables_created.length}`);
+    activity.tables_created.forEach((t) => addAgentLog("info", `  • ${t}`));
+  }
+
+  if (activity.bytes_processed) {
+    const kb = (activity.bytes_processed / 1024).toFixed(1);
+    addAgentLog("info", `Total size: ${kb} KB`);
+  }
+
+  addAgentLog("info", "─────────────────────────────────");
+}
+
+// =============================================================================
+// FLOATING PROGRESS PANEL
+// =============================================================================
+
+function showFloatingProgress(taskName) {
+  let panel = document.getElementById("floating-progress");
+  if (!panel) {
+    panel = document.createElement("div");
+    panel.id = "floating-progress";
+    panel.className = "floating-progress-panel";
+    panel.innerHTML = `
+      <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-activity-metrics" id="floating-activity-metrics"></div>
+        <div class="floating-progress-terminal" id="floating-progress-terminal">
+          <div class="terminal-header">
+            <span class="terminal-title">LIVE AGENT ACTIVITY</span>
+            <span class="terminal-status" id="terminal-status">●</span>
+          </div>
+          <div class="terminal-content" id="floating-progress-log"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(panel);
+  }
+
+  const taskNameEl = document.getElementById("floating-task-name");
+  if (taskNameEl) taskNameEl.textContent = taskName || "Processing...";
+
+  const fillEl = document.getElementById("floating-progress-fill");
+  if (fillEl) fillEl.style.width = "0%";
+
+  const stepEl = document.getElementById("floating-progress-step");
+  if (stepEl) stepEl.textContent = "Starting...";
+
+  const percentEl = document.getElementById("floating-progress-percent");
+  if (percentEl) percentEl.textContent = "0%";
+
+  const logEl = document.getElementById("floating-progress-log");
+  if (logEl) logEl.innerHTML = "";
+
+  const dotEl = panel.querySelector(".progress-dot");
+  if (dotEl) {
+    dotEl.classList.remove("completed", "error");
+  }
+
+  panel.style.display = "block";
+  panel.classList.remove("minimized");
+}
+
+function updateFloatingProgressBar(
+  current,
+  total,
+  message,
+  step,
+  details,
+  activity,
+) {
+  const panel = document.getElementById("floating-progress");
+  if (!panel || panel.style.display === "none") {
+    showFloatingProgress(message);
+  }
+
+  const percent = total > 0 ? Math.round((current / total) * 100) : 0;
+
+  const fillEl = document.getElementById("floating-progress-fill");
+  if (fillEl) fillEl.style.width = percent + "%";
+
+  const stepEl = document.getElementById("floating-progress-step");
+  if (stepEl) stepEl.textContent = message;
+
+  const percentEl = document.getElementById("floating-progress-percent");
+  if (percentEl) percentEl.textContent = percent + "%";
+
+  const statusEl = document.getElementById("terminal-status");
+  if (statusEl) statusEl.classList.add("active");
+
+  if (step) {
+    const logEl = document.getElementById("floating-progress-log");
+    if (logEl) {
+      const entry = document.createElement("div");
+      entry.className = "log-entry";
+      const timestamp = new Date().toLocaleTimeString("en-US", {
+        hour12: false,
+      });
+
+      let logContent = `<span class="log-time">${timestamp}</span> <span class="log-step">[${step.toUpperCase()}]</span> ${message}`;
+
+      if (activity) {
+        if (activity.current_item) {
+          logContent += `<span class="log-current"> → ${activity.current_item}</span>`;
+        }
+        if (activity.items_processed !== undefined && activity.items_total) {
+          logContent += `<span class="log-progress"> (${activity.items_processed}/${activity.items_total})</span>`;
+        }
+        if (activity.bytes_processed) {
+          const kb = (activity.bytes_processed / 1024).toFixed(1);
+          logContent += `<span class="log-bytes"> [${kb} KB]</span>`;
+        }
+      } else if (details) {
+        logContent += `<span class="log-details"> → ${details}</span>`;
+      }
+
+      entry.innerHTML = logContent;
+      logEl.appendChild(entry);
+      logEl.scrollTop = logEl.scrollHeight;
+    }
+  }
+
+  if (activity) {
+    updateActivityMetrics(activity);
+  }
+}
+
+function completeFloatingProgress(message, activity) {
+  const fillEl = document.getElementById("floating-progress-fill");
+  if (fillEl) fillEl.style.width = "100%";
+
+  const stepEl = document.getElementById("floating-progress-step");
+  if (stepEl) stepEl.textContent = message || "Completed!";
+
+  const percentEl = document.getElementById("floating-progress-percent");
+  if (percentEl) percentEl.textContent = "100%";
+
+  const panel = document.getElementById("floating-progress");
+  if (panel) {
+    const dotEl = panel.querySelector(".progress-dot");
+    if (dotEl) dotEl.classList.add("completed");
+  }
+
+  const statusEl = document.getElementById("terminal-status");
+  if (statusEl) {
+    statusEl.classList.remove("active");
+    statusEl.classList.add("completed");
+  }
+
+  if (activity) {
+    const logEl = document.getElementById("floating-progress-log");
+    if (logEl) {
+      const summary = document.createElement("div");
+      summary.className = "log-entry log-summary";
+      let summaryText = "═══════════════════════════════════\n";
+      summaryText += "✓ GENERATION COMPLETE\n";
+      if (activity.files_created) {
+        summaryText += `  Files: ${activity.files_created.length} created\n`;
+      }
+      if (activity.tables_created) {
+        summaryText += `  Tables: ${activity.tables_created.length} synced\n`;
+      }
+      if (activity.bytes_processed) {
+        summaryText += `  Size: ${(activity.bytes_processed / 1024).toFixed(1)} KB\n`;
+      }
+      summaryText += "═══════════════════════════════════";
+      summary.innerHTML = `<pre class="summary-pre">${summaryText}</pre>`;
+      logEl.appendChild(summary);
+      logEl.scrollTop = logEl.scrollHeight;
+    }
+  }
+
+  setTimeout(closeFloatingProgress, 8000);
+}
+
+function errorFloatingProgress(errorMessage) {
+  const stepEl = document.getElementById("floating-progress-step");
+  if (stepEl) stepEl.textContent = "Error: " + errorMessage;
+
+  const panel = document.getElementById("floating-progress");
+  if (panel) {
+    const dotEl = panel.querySelector(".progress-dot");
+    if (dotEl) dotEl.classList.add("error");
+  }
+}
+
+function minimizeFloatingProgress() {
+  const panel = document.getElementById("floating-progress");
+  if (panel) panel.classList.toggle("minimized");
+}
+
+function closeFloatingProgress() {
+  const panel = document.getElementById("floating-progress");
+  if (panel) {
+    panel.style.display = "none";
+    const dotEl = panel.querySelector(".progress-dot");
+    if (dotEl) dotEl.classList.remove("completed", "error");
+  }
+}
+
+function updateProgressUI(data) {
+  const progressBar = document.querySelector(".result-progress-bar");
+  const resultDiv = document.getElementById("intent-result");
+
+  if (data.total_steps && data.current_step) {
+    const percent = Math.round((data.current_step / data.total_steps) * 100);
+
+    if (progressBar) {
+      progressBar.style.width = `${percent}%`;
+    }
+
+    if (resultDiv && data.message) {
+      resultDiv.innerHTML = `
+        <div class="result-card">
+          <div class="result-message">${data.message}</div>
+          <div class="result-progress">
+            <div class="result-progress-bar" style="width: ${percent}%"></div>
+          </div>
+          <div style="margin-top:8px;font-size:12px;color:var(--sentient-text-muted);">
+            Step ${data.current_step}/${data.total_steps} (${percent}%)
+          </div>
+        </div>
+      `;
+    }
   }
 }
 
@@ -904,47 +1290,41 @@ document.addEventListener("htmx:afterRequest", function (event) {
 
 // Update counts for new filters
 function updateFilterCounts() {
-  fetch("/api/tasks/stats")
+  fetch("/api/tasks/stats/json")
     .then((response) => response.json())
     .then((stats) => {
-      if (stats.pending_count !== undefined) {
-        document.getElementById("count-pending").textContent =
-          stats.pending_count;
+      if (stats.total !== undefined) {
+        const el = document.getElementById("count-all");
+        if (el) el.textContent = stats.total;
       }
-      if (stats.goals_count !== undefined) {
-        document.getElementById("count-goals").textContent = stats.goals_count;
+      if (stats.completed !== undefined) {
+        const el = document.getElementById("count-complete");
+        if (el) el.textContent = stats.completed;
       }
-      if (stats.schedulers_count !== undefined) {
-        document.getElementById("count-schedulers").textContent =
-          stats.schedulers_count;
+      if (stats.active !== undefined) {
+        const el = document.getElementById("count-active");
+        if (el) el.textContent = stats.active;
       }
-      if (stats.monitors_count !== undefined) {
-        document.getElementById("count-monitors").textContent =
-          stats.monitors_count;
+      if (stats.awaiting !== undefined) {
+        const el = document.getElementById("count-awaiting");
+        if (el) el.textContent = stats.awaiting;
+      }
+      if (stats.paused !== undefined) {
+        const el = document.getElementById("count-paused");
+        if (el) el.textContent = stats.paused;
+      }
+      if (stats.blocked !== undefined) {
+        const el = document.getElementById("count-blocked");
+        if (el) el.textContent = stats.blocked;
+      }
+      if (stats.time_saved !== undefined) {
+        const el = document.getElementById("time-saved-value");
+        if (el) el.textContent = stats.time_saved;
       }
     })
-    .catch(() => {});
+    .catch((e) => console.warn("Failed to load task stats:", e));
 }
 
 // Call updateFilterCounts on load
 document.addEventListener("DOMContentLoaded", updateFilterCounts);
 document.body.addEventListener("taskCreated", updateFilterCounts);
-
-// =============================================================================
-// DEMO: Simulate real-time activity
-// =============================================================================
-
-// Simulate agent activity for demo
-setInterval(() => {
-  if (Math.random() > 0.7) {
-    const messages = [
-      { level: "info", msg: "[SCAN] Monitoring task queues..." },
-      { level: "info", msg: "[AGENT] Processing next batch..." },
-      { level: "success", msg: "[OK] Checkpoint saved" },
-      { level: "info", msg: "[SYNC] Synchronizing state..." },
-    ];
-    const { level, msg } =
-      messages[Math.floor(Math.random() * messages.length)];
-    addAgentLog(level, msg);
-  }
-}, 5000);