diff --git a/src/ui_server/mod.rs b/src/ui_server/mod.rs
index efe7913..d791a5a 100644
--- a/src/ui_server/mod.rs
+++ b/src/ui_server/mod.rs
@@ -246,8 +246,6 @@ struct WsQuery {
 
 #[derive(Debug, Default, Deserialize)]
 struct OptionalWsQuery {
-    session_id: Option<String>,
-    user_id: Option<String>,
     task_id: Option<String>,
 }
 
@@ -362,8 +360,23 @@ async fn handle_task_progress_ws_proxy(
         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;
+                    // Log manifest_update messages for debugging
+                    let is_manifest = text.contains("manifest_update");
+                    if is_manifest {
+                        info!("[WS_PROXY] Forwarding manifest_update to client: {}...", &text[..text.len().min(200)]);
+                    } else if text.contains("task_progress") {
+                        debug!("[WS_PROXY] Forwarding task_progress to client");
+                    }
+                    match client_tx.send(AxumMessage::Text(text)).await {
+                        Ok(()) => {
+                            if is_manifest {
+                                info!("[WS_PROXY] manifest_update SENT successfully to client");
+                            }
+                        }
+                        Err(e) => {
+                            error!("[WS_PROXY] Failed to send message to client: {:?}", e);
+                            break;
+                        }
                     }
                 }
                 Ok(TungsteniteMessage::Binary(data)) => {
@@ -529,6 +542,18 @@ fn create_ui_router() -> Router<AppState> {
     Router::new().fallback(any(proxy_api))
 }
 
+async fn serve_favicon() -> impl IntoResponse {
+    let favicon_path = PathBuf::from("./ui/suite/public/favicon.ico");
+    match tokio::fs::read(&favicon_path).await {
+        Ok(bytes) => (
+            StatusCode::OK,
+            [("content-type", "image/x-icon")],
+            bytes,
+        ).into_response(),
+        Err(_) => StatusCode::NOT_FOUND.into_response(),
+    }
+}
+
 fn add_static_routes(router: Router<AppState>, suite_path: &Path) -> Router<AppState> {
     let mut r = router;
 
@@ -554,7 +579,8 @@ pub fn configure_router() -> Router {
         .nest("/apps", create_apps_router())
         .route("/", get(index))
         .route("/minimal", get(serve_minimal))
-        .route("/suite", get(serve_suite));
+        .route("/suite", get(serve_suite))
+        .route("/favicon.ico", get(serve_favicon));
 
     router = add_static_routes(router, &suite_path);
 
diff --git a/ui/suite/index.html b/ui/suite/index.html
index fe93e11..b5a78a5 100644
--- a/ui/suite/index.html
+++ b/ui/suite/index.html
@@ -968,7 +968,7 @@
         <!-- Core scripts -->
         <script src="js/theme-manager.js"></script>
         <script src="js/htmx-app.js"></script>
-        <script src="tasks/tasks.js"></script>
+        <script src="tasks/tasks.js?v=20260102"></script>
 
         <!-- Application initialization -->
         <script>
diff --git a/ui/suite/public/favicon.ico b/ui/suite/public/favicon.ico
new file mode 100644
index 0000000..06c23c8
Binary files /dev/null and b/ui/suite/public/favicon.ico differ
diff --git a/ui/suite/tasks/autotask.js b/ui/suite/tasks/autotask.js
index 8aaa8b9..09950ea 100644
--- a/ui/suite/tasks/autotask.js
+++ b/ui/suite/tasks/autotask.js
@@ -178,40 +178,36 @@ function initWebSocket() {
 }
 
 function initTaskProgressWebSocket() {
-  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  const wsUrl = `${protocol}//${window.location.host}/ws/task-progress`;
+  // Use the singleton WebSocket from tasks.js instead of creating a duplicate connection
+  // This prevents the "2 receivers" problem where manifest_update events go to one
+  // WebSocket while the browser UI is listening on a different one
 
-  try {
-    AutoTaskState.progressWsConnection = new WebSocket(wsUrl);
+  console.log("[AutoTask] Using singleton WebSocket for task progress");
 
-    AutoTaskState.progressWsConnection.onopen = function () {
-      console.log("Task Progress WebSocket connected");
-    };
+  // Create handler for task progress messages
+  const handler = function (data) {
+    handleTaskProgressMessage(data);
+  };
 
-    AutoTaskState.progressWsConnection.onmessage = function (event) {
-      handleTaskProgressMessage(JSON.parse(event.data));
-    };
+  // Store handler reference for cleanup
+  AutoTaskState._progressHandler = handler;
 
-    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");
+  // Register with the global singleton WebSocket from tasks.js
+  if (typeof registerTaskProgressHandler === "function") {
+    registerTaskProgressHandler(handler);
+    console.log("[AutoTask] Registered with singleton WebSocket");
+  } else {
+    // Fallback: wait for tasks.js to load and retry
+    console.log("[AutoTask] Waiting for tasks.js singleton to be available...");
+    setTimeout(initTaskProgressWebSocket, 500);
   }
 }
 
 function handleTaskProgressMessage(data) {
-  // Forward to ProgressPanel if available
-  if (typeof ProgressPanel !== "undefined" && ProgressPanel.manifest) {
-    ProgressPanel.handleProgressUpdate(data);
-  }
+  // Note: ProgressPanel now registers its own handler with the singleton,
+  // so we don't need to forward messages manually here
 
-  console.log("Task progress:", data);
+  console.log("[AutoTask] Task progress:", data.type, data.task_id);
 
   switch (data.type) {
     case "connected":
diff --git a/ui/suite/tasks/progress-panel.js b/ui/suite/tasks/progress-panel.js
index 5aec84a..1412114 100644
--- a/ui/suite/tasks/progress-panel.js
+++ b/ui/suite/tasks/progress-panel.js
@@ -1,197 +1,254 @@
 const ProgressPanel = {
-    manifest: null,
-    wsConnection: null,
-    startTime: null,
-    runtimeInterval: null,
+  manifest: null,
+  wsConnection: null, // Deprecated - now uses singleton from tasks.js
+  startTime: null,
+  runtimeInterval: null,
+  _boundHandler: null, // Store bound handler for cleanup
 
-    init(taskId) {
-        this.taskId = taskId;
-        this.startTime = Date.now();
-        this.startRuntimeCounter();
-        this.connectWebSocket(taskId);
-    },
+  init(taskId) {
+    // Clean up any existing handler before registering a new one
+    // This prevents duplicate handlers if init is called multiple times
+    if (
+      this._boundHandler &&
+      typeof unregisterTaskProgressHandler === "function"
+    ) {
+      unregisterTaskProgressHandler(this._boundHandler);
+      this._boundHandler = null;
+    }
 
-    connectWebSocket(taskId) {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${protocol}//${window.location.host}/ws/task-progress/${taskId}`;
+    this.taskId = taskId;
+    this.startTime = Date.now();
+    this.startRuntimeCounter();
+    this.connectWebSocket(taskId);
+  },
 
-        this.wsConnection = new WebSocket(wsUrl);
+  connectWebSocket(taskId) {
+    // Instead of creating our own WebSocket, register with the singleton from tasks.js
+    // This prevents the "2 receivers" problem where manifest_update goes to one connection
+    // while the browser UI is listening on another
 
-        this.wsConnection.onopen = () => {
-            console.log('Progress panel WebSocket connected');
-        };
+    console.log("[ProgressPanel] Using singleton WebSocket for task:", taskId);
 
-        this.wsConnection.onmessage = (event) => {
-            const data = JSON.parse(event.data);
-            this.handleProgressUpdate(data);
-        };
+    // Create bound handler that filters for our task
+    this._boundHandler = (data) => {
+      // Only process messages for our task
+      if (data.task_id && String(data.task_id) !== String(taskId)) {
+        return;
+      }
+      this.handleProgressUpdate(data);
+    };
 
-        this.wsConnection.onclose = () => {
-            console.log('Progress panel WebSocket closed');
-            setTimeout(() => this.connectWebSocket(taskId), 3000);
-        };
+    // Register with the global singleton WebSocket
+    if (typeof registerTaskProgressHandler === "function") {
+      registerTaskProgressHandler(this._boundHandler);
+      console.log("[ProgressPanel] Registered with singleton WebSocket");
+    } else {
+      // Fallback: wait for tasks.js to load and retry
+      console.log(
+        "[ProgressPanel] Waiting for tasks.js singleton to be available...",
+      );
+      setTimeout(() => this.connectWebSocket(taskId), 500);
+    }
+  },
 
-        this.wsConnection.onerror = (error) => {
-            console.error('Progress panel WebSocket error:', error);
-        };
-    },
+  handleProgressUpdate(data) {
+    // Skip manifest_update - already handled by tasks.js renderManifestProgress()
+    // Processing it here would cause duplicate updates and race conditions
+    if (
+      data.type === "manifest_update" ||
+      data.event_type === "manifest_update"
+    ) {
+      // Don't process here - tasks.js handles this via handleWebSocketMessage()
+      // which calls renderManifestProgress() with proper normalized ID handling
+      return;
+    }
 
-    handleProgressUpdate(data) {
-        if (data.type === 'manifest_update') {
-            this.manifest = data.manifest;
-            this.render();
-        } else if (data.type === 'section_update') {
-            this.updateSection(data.section_id, data.status, data.progress);
-        } else if (data.type === 'item_update') {
-            this.updateItem(data.section_id, data.item_id, data.status, data.duration);
-        } else if (data.type === 'terminal_line') {
-            this.addTerminalLine(data.content, data.line_type);
-        } else if (data.type === 'stats_update') {
-            this.updateStats(data.stats);
-        } else if (data.type === 'task_progress') {
-            this.handleTaskProgress(data);
+    if (data.type === "section_update") {
+      this.updateSection(data.section_id, data.status, data.progress);
+    } else if (data.type === "item_update") {
+      this.updateItem(
+        data.section_id,
+        data.item_id,
+        data.status,
+        data.duration,
+      );
+    } else if (data.type === "terminal_line") {
+      this.addTerminalLine(data.content, data.line_type);
+    } else if (data.type === "stats_update") {
+      this.updateStats(data.stats);
+    } else if (data.type === "task_progress") {
+      this.handleTaskProgress(data);
+    }
+  },
+
+  handleTaskProgress(data) {
+    // Check for manifest in activity
+    if (data.activity && data.activity.manifest) {
+      this.manifest = data.activity.manifest;
+      this.render();
+    }
+
+    // Also check for manifest in details (manifest_update events)
+    if (
+      data.details &&
+      (data.step === "manifest_update" || data.event_type === "manifest_update")
+    ) {
+      try {
+        const parsed =
+          typeof data.details === "string"
+            ? JSON.parse(data.details)
+            : data.details;
+        if (parsed && parsed.sections) {
+          this.manifest = parsed;
+          this.render();
         }
-    },
+      } catch (e) {
+        // Not a manifest JSON, might be terminal output
+        console.debug("Details is not manifest JSON:", e.message);
+      }
+    }
 
-    handleTaskProgress(data) {
-        if (data.activity && data.activity.manifest) {
-            this.manifest = data.activity.manifest;
-            this.render();
-        }
+    if (data.step && data.step !== "manifest_update") {
+      this.updateCurrentAction(data.message || data.step);
+    }
 
-        if (data.step) {
-            this.updateCurrentAction(data.message || data.step);
-        }
+    // Only add non-manifest details as terminal lines
+    if (
+      data.details &&
+      data.step !== "manifest_update" &&
+      data.event_type !== "manifest_update"
+    ) {
+      this.addTerminalLine(data.details, "info");
+    }
+  },
 
-        if (data.details) {
-            this.addTerminalLine(data.details, 'info');
-        }
-    },
+  startRuntimeCounter() {
+    this.runtimeInterval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
+      const runtimeEl = document.getElementById("status-runtime");
+      if (runtimeEl) {
+        runtimeEl.textContent = this.formatDuration(elapsed);
+      }
+    }, 1000);
+  },
 
-    startRuntimeCounter() {
-        this.runtimeInterval = setInterval(() => {
-            const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
-            const runtimeEl = document.getElementById('status-runtime');
-            if (runtimeEl) {
-                runtimeEl.textContent = this.formatDuration(elapsed);
+  stopRuntimeCounter() {
+    if (this.runtimeInterval) {
+      clearInterval(this.runtimeInterval);
+      this.runtimeInterval = null;
+    }
+  },
+
+  formatDuration(seconds) {
+    if (seconds < 60) {
+      return `${seconds} sec`;
+    } else if (seconds < 3600) {
+      const mins = Math.floor(seconds / 60);
+      return `${mins} min`;
+    } else {
+      const hours = Math.floor(seconds / 3600);
+      const mins = Math.floor((seconds % 3600) / 60);
+      return `${hours} hr ${mins} min`;
+    }
+  },
+
+  render() {
+    if (!this.manifest) return;
+
+    this.renderStatus();
+    this.renderProgressLog();
+    this.renderTerminal();
+  },
+
+  renderStatus() {
+    const titleEl = document.getElementById("status-title");
+    if (titleEl) {
+      titleEl.textContent = this.manifest.description || this.manifest.app_name;
+    }
+
+    const estimatedEl = document.getElementById("estimated-time");
+    if (estimatedEl && this.manifest.estimated_seconds) {
+      estimatedEl.textContent = this.formatDuration(
+        this.manifest.estimated_seconds,
+      );
+    }
+
+    const currentAction = this.getCurrentAction();
+    const actionEl = document.getElementById("current-action");
+    if (actionEl && currentAction) {
+      actionEl.textContent = currentAction;
+    }
+
+    this.updateDecisionPoint();
+  },
+
+  getCurrentAction() {
+    if (!this.manifest || !this.manifest.sections) return null;
+
+    for (const section of this.manifest.sections) {
+      if (section.status === "Running") {
+        for (const child of section.children || []) {
+          if (child.status === "Running") {
+            for (const item of child.items || []) {
+              if (item.status === "Running") {
+                return item.name;
+              }
             }
-        }, 1000);
-    },
-
-    stopRuntimeCounter() {
-        if (this.runtimeInterval) {
-            clearInterval(this.runtimeInterval);
-            this.runtimeInterval = null;
+            return child.name;
+          }
         }
-    },
+        return section.name;
+      }
+    }
+    return null;
+  },
 
-    formatDuration(seconds) {
-        if (seconds < 60) {
-            return `${seconds} sec`;
-        } else if (seconds < 3600) {
-            const mins = Math.floor(seconds / 60);
-            return `${mins} min`;
-        } else {
-            const hours = Math.floor(seconds / 3600);
-            const mins = Math.floor((seconds % 3600) / 60);
-            return `${hours} hr ${mins} min`;
-        }
-    },
+  updateCurrentAction(action) {
+    const actionEl = document.getElementById("current-action");
+    if (actionEl) {
+      actionEl.textContent = action;
+    }
+  },
 
-    render() {
-        if (!this.manifest) return;
+  updateDecisionPoint() {
+    const decisionStepEl = document.getElementById("decision-step");
+    const decisionTotalEl = document.getElementById("decision-total");
 
-        this.renderStatus();
-        this.renderProgressLog();
-        this.renderTerminal();
-    },
+    if (decisionStepEl && this.manifest) {
+      decisionStepEl.textContent = this.manifest.completed_steps || 0;
+    }
+    if (decisionTotalEl && this.manifest) {
+      decisionTotalEl.textContent = this.manifest.total_steps || 0;
+    }
+  },
 
-    renderStatus() {
-        const titleEl = document.getElementById('status-title');
-        if (titleEl) {
-            titleEl.textContent = this.manifest.description || this.manifest.app_name;
-        }
+  renderProgressLog() {
+    const container = document.getElementById("progress-log-content");
+    if (!container || !this.manifest || !this.manifest.sections) return;
 
-        const estimatedEl = document.getElementById('estimated-time');
-        if (estimatedEl && this.manifest.estimated_seconds) {
-            estimatedEl.textContent = this.formatDuration(this.manifest.estimated_seconds);
-        }
+    container.innerHTML = "";
 
-        const currentAction = this.getCurrentAction();
-        const actionEl = document.getElementById('current-action');
-        if (actionEl && currentAction) {
-            actionEl.textContent = currentAction;
-        }
+    for (const section of this.manifest.sections) {
+      const sectionEl = this.createSectionElement(section);
+      container.appendChild(sectionEl);
+    }
+  },
 
-        this.updateDecisionPoint();
-    },
+  createSectionElement(section) {
+    const sectionDiv = document.createElement("div");
+    sectionDiv.className = "log-section";
+    sectionDiv.dataset.sectionId = section.id;
 
-    getCurrentAction() {
-        if (!this.manifest || !this.manifest.sections) return null;
+    if (section.status === "Running" || section.status === "Completed") {
+      sectionDiv.classList.add("expanded");
+    }
 
-        for (const section of this.manifest.sections) {
-            if (section.status === 'Running') {
-                for (const child of section.children || []) {
-                    if (child.status === 'Running') {
-                        for (const item of child.items || []) {
-                            if (item.status === 'Running') {
-                                return item.name;
-                            }
-                        }
-                        return child.name;
-                    }
-                }
-                return section.name;
-            }
-        }
-        return null;
-    },
+    const statusClass = section.status.toLowerCase();
+    // Support both direct fields and nested progress object
+    const stepCurrent = section.current_step ?? section.progress?.current ?? 0;
+    const stepTotal = section.total_steps ?? section.progress?.total ?? 0;
 
-    updateCurrentAction(action) {
-        const actionEl = document.getElementById('current-action');
-        if (actionEl) {
-            actionEl.textContent = action;
-        }
-    },
-
-    updateDecisionPoint() {
-        const decisionStepEl = document.getElementById('decision-step');
-        const decisionTotalEl = document.getElementById('decision-total');
-
-        if (decisionStepEl && this.manifest) {
-            decisionStepEl.textContent = this.manifest.completed_steps || 0;
-        }
-        if (decisionTotalEl && this.manifest) {
-            decisionTotalEl.textContent = this.manifest.total_steps || 0;
-        }
-    },
-
-    renderProgressLog() {
-        const container = document.getElementById('progress-log-content');
-        if (!container || !this.manifest || !this.manifest.sections) return;
-
-        container.innerHTML = '';
-
-        for (const section of this.manifest.sections) {
-            const sectionEl = this.createSectionElement(section);
-            container.appendChild(sectionEl);
-        }
-    },
-
-    createSectionElement(section) {
-        const sectionDiv = document.createElement('div');
-        sectionDiv.className = 'log-section';
-        sectionDiv.dataset.sectionId = section.id;
-
-        if (section.status === 'Running' || section.status === 'Completed') {
-            sectionDiv.classList.add('expanded');
-        }
-
-        const statusClass = section.status.toLowerCase();
-        const stepCurrent = section.current_step || 0;
-        const stepTotal = section.total_steps || 0;
-
-        sectionDiv.innerHTML = `
+    sectionDiv.innerHTML = `
             <div class="log-section-header" onclick="ProgressPanel.toggleSection('${section.id}')">
                 <span class="section-indicator ${statusClass}"></span>
                 <span class="section-name">${this.escapeHtml(section.name)}</span>
@@ -205,38 +262,45 @@ const ProgressPanel = {
             </div>
         `;
 
-        const childrenContainer = sectionDiv.querySelector('.log-children');
+    const childrenContainer = sectionDiv.querySelector(".log-children");
 
-        for (const child of section.children || []) {
-            const childEl = this.createChildElement(child, section.id);
-            childrenContainer.appendChild(childEl);
-        }
+    for (const child of section.children || []) {
+      const childEl = this.createChildElement(child, section.id);
+      childrenContainer.appendChild(childEl);
+    }
 
-        if (section.items && section.items.length > 0 && (!section.children || section.children.length === 0)) {
-            for (const item of section.items) {
-                const itemEl = this.createItemElement(item);
-                childrenContainer.appendChild(itemEl);
-            }
-        }
+    if (
+      section.items &&
+      section.items.length > 0 &&
+      (!section.children || section.children.length === 0)
+    ) {
+      for (const item of section.items) {
+        const itemEl = this.createItemElement(item);
+        childrenContainer.appendChild(itemEl);
+      }
+    }
 
-        return sectionDiv;
-    },
+    return sectionDiv;
+  },
 
-    createChildElement(child, parentId) {
-        const childDiv = document.createElement('div');
-        childDiv.className = 'log-child';
-        childDiv.dataset.childId = child.id;
+  createChildElement(child, parentId) {
+    const childDiv = document.createElement("div");
+    childDiv.className = "log-child";
+    childDiv.dataset.childId = child.id;
 
-        if (child.status === 'Running' || child.status === 'Completed') {
-            childDiv.classList.add('expanded');
-        }
+    if (child.status === "Running" || child.status === "Completed") {
+      childDiv.classList.add("expanded");
+    }
 
-        const statusClass = child.status.toLowerCase();
-        const stepCurrent = child.current_step || 0;
-        const stepTotal = child.total_steps || 0;
-        const duration = child.duration_seconds ? this.formatDuration(child.duration_seconds) : '';
+    const statusClass = child.status.toLowerCase();
+    // Support both direct fields and nested progress object
+    const stepCurrent = child.current_step ?? child.progress?.current ?? 0;
+    const stepTotal = child.total_steps ?? child.progress?.total ?? 0;
+    const duration = child.duration_seconds
+      ? this.formatDuration(child.duration_seconds)
+      : "";
 
-        childDiv.innerHTML = `
+    childDiv.innerHTML = `
             <div class="log-child-header" onclick="ProgressPanel.toggleChild('${child.id}')">
                 <span class="child-indent"></span>
                 <span class="child-name">${this.escapeHtml(child.name)}</span>
@@ -250,215 +314,240 @@ const ProgressPanel = {
             </div>
         `;
 
-        const itemsContainer = childDiv.querySelector('.log-items');
+    const itemsContainer = childDiv.querySelector(".log-items");
 
-        for (const item of child.items || []) {
-            const itemEl = this.createItemElement(item);
-            itemsContainer.appendChild(itemEl);
-        }
+    for (const item of child.items || []) {
+      const itemEl = this.createItemElement(item);
+      itemsContainer.appendChild(itemEl);
+    }
 
-        return childDiv;
-    },
+    return childDiv;
+  },
 
-    createItemElement(item) {
-        const itemDiv = document.createElement('div');
-        itemDiv.className = 'log-item';
-        itemDiv.dataset.itemId = item.id;
+  createItemElement(item) {
+    const itemDiv = document.createElement("div");
+    itemDiv.className = "log-item";
+    itemDiv.dataset.itemId = item.id;
 
-        const statusClass = item.status.toLowerCase();
-        const duration = item.duration_seconds ? `Duration: ${this.formatDuration(item.duration_seconds)}` : '';
-        const checkIcon = item.status === 'Completed' ? '✓' : (item.status === 'Running' ? '◎' : '○');
+    const statusClass = item.status.toLowerCase();
+    const duration = item.duration_seconds
+      ? `Duration: ${this.formatDuration(item.duration_seconds)}`
+      : "";
+    const checkIcon =
+      item.status === "Completed" ? "✓" : item.status === "Running" ? "◎" : "○";
 
-        itemDiv.innerHTML = `
+    itemDiv.innerHTML = `
             <span class="item-dot ${statusClass}"></span>
-            <span class="item-name">${this.escapeHtml(item.name)}${item.details ? ` - ${this.escapeHtml(item.details)}` : ''}</span>
+            <span class="item-name">${this.escapeHtml(item.name)}${item.details ? ` - ${this.escapeHtml(item.details)}` : ""}</span>
             <div class="item-info">
                 <span class="item-duration">${duration}</span>
                 <span class="item-check ${statusClass}">${checkIcon}</span>
             </div>
         `;
 
-        return itemDiv;
-    },
+    return itemDiv;
+  },
 
-    renderTerminal() {
-        if (!this.manifest || !this.manifest.terminal_output) return;
+  renderTerminal() {
+    // Support both formats: terminal_output (direct) and terminal.lines (web JSON)
+    const terminalLines =
+      this.manifest?.terminal_output || this.manifest?.terminal?.lines || [];
 
-        const container = document.getElementById('terminal-content');
-        if (!container) return;
+    if (!terminalLines.length) return;
 
-        container.innerHTML = '';
+    const container = document.getElementById("terminal-content");
+    if (!container) return;
 
-        for (const line of this.manifest.terminal_output.slice(-50)) {
-            this.appendTerminalLine(container, line.content, line.line_type || 'info');
-        }
+    container.innerHTML = "";
 
-        container.scrollTop = container.scrollHeight;
-    },
-
-    addTerminalLine(content, lineType) {
-        const container = document.getElementById('terminal-content');
-        if (!container) return;
-
-        this.appendTerminalLine(container, content, lineType);
-        container.scrollTop = container.scrollHeight;
-
-        this.incrementProcessedCount();
-    },
-
-    appendTerminalLine(container, content, lineType) {
-        const lineDiv = document.createElement('div');
-        lineDiv.className = `terminal-line ${lineType || 'info'}`;
-        lineDiv.textContent = content;
-        container.appendChild(lineDiv);
-    },
-
-    incrementProcessedCount() {
-        const processedEl = document.getElementById('terminal-processed');
-        if (processedEl) {
-            const current = parseInt(processedEl.textContent, 10) || 0;
-            processedEl.textContent = current + 1;
-        }
-    },
-
-    updateStats(stats) {
-        const processedEl = document.getElementById('terminal-processed');
-        if (processedEl && stats.data_points_processed !== undefined) {
-            processedEl.textContent = stats.data_points_processed;
-        }
-
-        const speedEl = document.getElementById('terminal-speed');
-        if (speedEl && stats.sources_per_min !== undefined) {
-            speedEl.textContent = `~${stats.sources_per_min.toFixed(1)} sources/min`;
-        }
-
-        const etaEl = document.getElementById('terminal-eta');
-        if (etaEl && stats.estimated_remaining_seconds !== undefined) {
-            etaEl.textContent = this.formatDuration(stats.estimated_remaining_seconds);
-        }
-    },
-
-    updateSection(sectionId, status, progress) {
-        const sectionEl = document.querySelector(`[data-section-id="${sectionId}"]`);
-        if (!sectionEl) return;
-
-        const indicator = sectionEl.querySelector('.section-indicator');
-        const statusBadge = sectionEl.querySelector('.section-status-badge');
-        const stepBadge = sectionEl.querySelector('.section-step-badge');
-
-        if (indicator) {
-            indicator.className = `section-indicator ${status.toLowerCase()}`;
-        }
-
-        if (statusBadge) {
-            statusBadge.className = `section-status-badge ${status.toLowerCase()}`;
-            statusBadge.textContent = status;
-        }
-
-        if (stepBadge && progress) {
-            stepBadge.textContent = `Step ${progress.current}/${progress.total}`;
-        }
-
-        if (status === 'Running' || status === 'Completed') {
-            sectionEl.classList.add('expanded');
-        }
-    },
-
-    updateItem(sectionId, itemId, status, duration) {
-        const itemEl = document.querySelector(`[data-item-id="${itemId}"]`);
-        if (!itemEl) return;
-
-        const dot = itemEl.querySelector('.item-dot');
-        const check = itemEl.querySelector('.item-check');
-        const durationEl = itemEl.querySelector('.item-duration');
-
-        const statusClass = status.toLowerCase();
-
-        if (dot) {
-            dot.className = `item-dot ${statusClass}`;
-        }
-
-        if (check) {
-            check.className = `item-check ${statusClass}`;
-            check.textContent = status === 'Completed' ? '✓' : (status === 'Running' ? '◎' : '○');
-        }
-
-        if (durationEl && duration) {
-            durationEl.textContent = `Duration: ${this.formatDuration(duration)}`;
-        }
-    },
-
-    toggleSection(sectionId) {
-        const sectionEl = document.querySelector(`[data-section-id="${sectionId}"]`);
-        if (sectionEl) {
-            sectionEl.classList.toggle('expanded');
-        }
-    },
-
-    toggleChild(childId) {
-        const childEl = document.querySelector(`[data-child-id="${childId}"]`);
-        if (childEl) {
-            childEl.classList.toggle('expanded');
-        }
-    },
-
-    viewDetails(sectionId) {
-        console.log('View details for section:', sectionId);
-    },
-
-    viewChildDetails(childId) {
-        console.log('View details for child:', childId);
-    },
-
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    },
-
-    loadManifest(taskId) {
-        fetch(`/api/autotask/${taskId}/manifest`)
-            .then(response => response.json())
-            .then(data => {
-                if (data.success && data.manifest) {
-                    this.manifest = data.manifest;
-                    this.render();
-                }
-            })
-            .catch(error => {
-                console.error('Failed to load manifest:', error);
-            });
-    },
-
-    destroy() {
-        this.stopRuntimeCounter();
-        if (this.wsConnection) {
-            this.wsConnection.close();
-            this.wsConnection = null;
-        }
+    for (const line of terminalLines.slice(-50)) {
+      this.appendTerminalLine(
+        container,
+        line.content,
+        line.type || line.line_type || "info",
+      );
     }
+
+    container.scrollTop = container.scrollHeight;
+  },
+
+  addTerminalLine(content, lineType) {
+    const container = document.getElementById("terminal-content");
+    if (!container) return;
+
+    this.appendTerminalLine(container, content, lineType);
+    container.scrollTop = container.scrollHeight;
+
+    this.incrementProcessedCount();
+  },
+
+  appendTerminalLine(container, content, lineType) {
+    const lineDiv = document.createElement("div");
+    lineDiv.className = `terminal-line ${lineType || "info"}`;
+    lineDiv.textContent = content;
+    container.appendChild(lineDiv);
+  },
+
+  incrementProcessedCount() {
+    const processedEl = document.getElementById("terminal-processed");
+    if (processedEl) {
+      const current = parseInt(processedEl.textContent, 10) || 0;
+      processedEl.textContent = current + 1;
+    }
+  },
+
+  updateStats(stats) {
+    const processedEl = document.getElementById("terminal-processed");
+    if (processedEl && stats.data_points_processed !== undefined) {
+      processedEl.textContent = stats.data_points_processed;
+    }
+
+    const speedEl = document.getElementById("terminal-speed");
+    if (speedEl && stats.sources_per_min !== undefined) {
+      speedEl.textContent = `~${stats.sources_per_min.toFixed(1)} sources/min`;
+    }
+
+    const etaEl = document.getElementById("terminal-eta");
+    if (etaEl && stats.estimated_remaining_seconds !== undefined) {
+      etaEl.textContent = this.formatDuration(
+        stats.estimated_remaining_seconds,
+      );
+    }
+  },
+
+  updateSection(sectionId, status, progress) {
+    const sectionEl = document.querySelector(
+      `[data-section-id="${sectionId}"]`,
+    );
+    if (!sectionEl) return;
+
+    const indicator = sectionEl.querySelector(".section-indicator");
+    const statusBadge = sectionEl.querySelector(".section-status-badge");
+    const stepBadge = sectionEl.querySelector(".section-step-badge");
+
+    if (indicator) {
+      indicator.className = `section-indicator ${status.toLowerCase()}`;
+    }
+
+    if (statusBadge) {
+      statusBadge.className = `section-status-badge ${status.toLowerCase()}`;
+      statusBadge.textContent = status;
+    }
+
+    if (stepBadge && progress) {
+      stepBadge.textContent = `Step ${progress.current}/${progress.total}`;
+    }
+
+    if (status === "Running" || status === "Completed") {
+      sectionEl.classList.add("expanded");
+    }
+  },
+
+  updateItem(sectionId, itemId, status, duration) {
+    const itemEl = document.querySelector(`[data-item-id="${itemId}"]`);
+    if (!itemEl) return;
+
+    const dot = itemEl.querySelector(".item-dot");
+    const check = itemEl.querySelector(".item-check");
+    const durationEl = itemEl.querySelector(".item-duration");
+
+    const statusClass = status.toLowerCase();
+
+    if (dot) {
+      dot.className = `item-dot ${statusClass}`;
+    }
+
+    if (check) {
+      check.className = `item-check ${statusClass}`;
+      check.textContent =
+        status === "Completed" ? "✓" : status === "Running" ? "◎" : "○";
+    }
+
+    if (durationEl && duration) {
+      durationEl.textContent = `Duration: ${this.formatDuration(duration)}`;
+    }
+  },
+
+  toggleSection(sectionId) {
+    const sectionEl = document.querySelector(
+      `[data-section-id="${sectionId}"]`,
+    );
+    if (sectionEl) {
+      sectionEl.classList.toggle("expanded");
+    }
+  },
+
+  toggleChild(childId) {
+    const childEl = document.querySelector(`[data-child-id="${childId}"]`);
+    if (childEl) {
+      childEl.classList.toggle("expanded");
+    }
+  },
+
+  viewDetails(sectionId) {
+    console.log("View details for section:", sectionId);
+  },
+
+  viewChildDetails(childId) {
+    console.log("View details for child:", childId);
+  },
+
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  },
+
+  loadManifest(taskId) {
+    fetch(`/api/autotask/${taskId}/manifest`)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.success && data.manifest) {
+          this.manifest = data.manifest;
+          this.render();
+        }
+      })
+      .catch((error) => {
+        console.error("Failed to load manifest:", error);
+      });
+  },
+
+  destroy() {
+    this.stopRuntimeCounter();
+    // Unregister from singleton instead of closing our own connection
+    if (
+      this._boundHandler &&
+      typeof unregisterTaskProgressHandler === "function"
+    ) {
+      unregisterTaskProgressHandler(this._boundHandler);
+      this._boundHandler = null;
+      console.log("[ProgressPanel] Unregistered from singleton WebSocket");
+    }
+    // Don't close the singleton connection - other components may be using it
+    this.wsConnection = null;
+  },
 };
 
 function toggleLogSection(header) {
-    const section = header.closest('.log-section');
-    if (section) {
-        section.classList.toggle('expanded');
-    }
+  const section = header.closest(".log-section");
+  if (section) {
+    section.classList.toggle("expanded");
+  }
 }
 
 function toggleLogChild(header) {
-    const child = header.closest('.log-child');
-    if (child) {
-        child.classList.toggle('expanded');
-    }
+  const child = header.closest(".log-child");
+  if (child) {
+    child.classList.toggle("expanded");
+  }
 }
 
 function viewSectionDetails(sectionId) {
-    ProgressPanel.viewDetails(sectionId);
+  ProgressPanel.viewDetails(sectionId);
 }
 
 function viewChildDetails(childId) {
-    ProgressPanel.viewChildDetails(childId);
+  ProgressPanel.viewChildDetails(childId);
 }
 
 window.ProgressPanel = ProgressPanel;
diff --git a/ui/suite/tasks/taskmd.css b/ui/suite/tasks/taskmd.css
index 7a12963..51f19d4 100644
--- a/ui/suite/tasks/taskmd.css
+++ b/ui/suite/tasks/taskmd.css
@@ -8,6 +8,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    max-height: 100vh;
     min-height: 0;
     overflow: hidden;
 }
@@ -17,6 +18,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    max-height: 100%;
     min-height: 0;
     background: var(--bg, #0a0a0a);
     color: var(--text-secondary, #e0e0e0);
@@ -95,6 +97,31 @@
 /* Section Container */
 .taskmd-section {
     border-bottom: 1px solid var(--border, #1a1a1a);
+    flex-shrink: 0;
+}
+
+/* Status section - compact */
+.taskmd-section-status {
+    flex-shrink: 0;
+}
+
+/* Progress log section - scrollable */
+.taskmd-section-progress {
+    flex: 0 1 auto;
+    min-height: 100px;
+    max-height: 40%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Terminal section - takes remaining space */
+.taskmd-section-terminal {
+    flex: 1 1 auto;
+    min-height: 150px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .taskmd-section-header {
@@ -206,9 +233,9 @@
 /* PROGRESS LOG Section */
 .taskmd-progress-content {
     background: var(--bg, #0a0a0a);
-    flex: 1;
+    flex: 1 1 auto;
     min-height: 0;
-    max-height: 350px;
+    max-height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
 }
@@ -516,11 +543,10 @@
 
 /* TERMINAL Section */
 .taskmd-terminal {
-    flex-shrink: 0;
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     min-height: 120px;
-    max-height: 200px;
     overflow: hidden;
 }
 
@@ -575,7 +601,7 @@
 }
 
 .taskmd-terminal-output {
-    flex: 1;
+    flex: 1 1 auto;
     padding: 16px 24px;
     background: var(--bg, #0a0a0a);
     font-family: "JetBrains Mono", "Fira Code", monospace;
@@ -583,9 +609,118 @@
     line-height: 1.7;
     color: var(--text-secondary, #888);
     overflow-y: auto;
+    overflow-x: hidden;
     min-height: 0;
 }
 
+/* Markdown content in terminal */
+.taskmd-terminal-output .markdown-content {
+    font-family: var(
+        --sentient-font-family,
+        "Inter",
+        -apple-system,
+        sans-serif
+    );
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--text-secondary, #ccc);
+}
+
+.taskmd-terminal-output .markdown-content h1,
+.taskmd-terminal-output .markdown-content h2,
+.taskmd-terminal-output .markdown-content h3 {
+    color: var(--text, #fff);
+    font-weight: 600;
+    margin: 16px 0 8px 0;
+}
+
+.taskmd-terminal-output .markdown-content h1 {
+    font-size: 18px;
+}
+.taskmd-terminal-output .markdown-content h2 {
+    font-size: 16px;
+}
+.taskmd-terminal-output .markdown-content h3 {
+    font-size: 14px;
+}
+
+.taskmd-terminal-output .markdown-content p {
+    margin: 8px 0;
+}
+
+.taskmd-terminal-output .markdown-content ul,
+.taskmd-terminal-output .markdown-content ol {
+    margin: 8px 0;
+    padding-left: 24px;
+}
+
+.taskmd-terminal-output .markdown-content li {
+    margin: 4px 0;
+}
+
+.taskmd-terminal-output .markdown-content pre {
+    background: #151515;
+    border: 1px solid #252525;
+    border-radius: 6px;
+    padding: 12px 16px;
+    margin: 12px 0;
+    overflow-x: auto;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+    font-size: 12px;
+    line-height: 1.5;
+}
+
+.taskmd-terminal-output .markdown-content code {
+    background: #1a1a1a;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+    font-size: 12px;
+    color: var(--accent, #c5f82a);
+}
+
+.taskmd-terminal-output .markdown-content pre code {
+    background: transparent;
+    padding: 0;
+    color: #aaa;
+}
+
+.taskmd-terminal-output .markdown-content blockquote {
+    border-left: 3px solid var(--accent, #c5f82a);
+    padding-left: 16px;
+    margin: 12px 0;
+    color: var(--text-muted, #888);
+    font-style: italic;
+}
+
+.taskmd-terminal-output .markdown-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 12px 0;
+}
+
+.taskmd-terminal-output .markdown-content th,
+.taskmd-terminal-output .markdown-content td {
+    border: 1px solid #252525;
+    padding: 8px 12px;
+    text-align: left;
+}
+
+.taskmd-terminal-output .markdown-content th {
+    background: #151515;
+    font-weight: 600;
+    color: var(--text, #fff);
+}
+
+.taskmd-terminal-output .markdown-content a {
+    color: var(--accent, #c5f82a);
+    text-decoration: none;
+}
+
+.taskmd-terminal-output .markdown-content a:hover {
+    text-decoration: underline;
+}
+
 .taskmd-terminal-output .terminal-line {
     padding: 3px 0;
     white-space: pre-wrap;
@@ -619,12 +754,14 @@
 .taskmd-terminal-output .terminal-code {
     background: #151515;
     border: 1px solid #252525;
-    border-radius: 4px;
-    padding: 8px 12px;
-    margin: 6px 0;
+    border-radius: 6px;
+    padding: 12px 16px;
+    margin: 8px 0;
     font-size: 12px;
     color: #aaa;
     overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
 }
 
 /* Checkmark items */
@@ -660,14 +797,110 @@
     margin-right: 8px;
 }
 
+/* Terminal markdown elements */
+.taskmd-terminal-output .terminal-h1 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text, #fff);
+    margin: 16px 0 8px 0;
+    font-family: var(--sentient-font-family, "Inter", sans-serif);
+}
+
+.taskmd-terminal-output .terminal-h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text, #fff);
+    margin: 14px 0 6px 0;
+    font-family: var(--sentient-font-family, "Inter", sans-serif);
+}
+
+.taskmd-terminal-output .terminal-h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text, #fff);
+    margin: 12px 0 4px 0;
+    font-family: var(--sentient-font-family, "Inter", sans-serif);
+}
+
+.taskmd-terminal-output .terminal-p {
+    margin: 8px 0;
+    line-height: 1.6;
+}
+
+.taskmd-terminal-output .terminal-ul,
+.taskmd-terminal-output .terminal-ol {
+    margin: 8px 0;
+    padding-left: 24px;
+    list-style: none;
+}
+
+.taskmd-terminal-output .terminal-li {
+    margin: 4px 0;
+    position: relative;
+}
+
+.taskmd-terminal-output .terminal-li::before {
+    content: "•";
+    position: absolute;
+    left: -16px;
+    color: var(--accent, #c5f82a);
+}
+
+.taskmd-terminal-output .terminal-oli {
+    margin: 4px 0;
+    list-style: decimal;
+}
+
+.taskmd-terminal-output .terminal-inline-code {
+    background: #1a1a1a;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+    font-size: 12px;
+    color: var(--accent, #c5f82a);
+}
+
+.taskmd-terminal-output .terminal-quote {
+    border-left: 3px solid var(--accent, #c5f82a);
+    padding-left: 16px;
+    margin: 12px 0;
+    color: var(--text-muted, #888);
+    font-style: italic;
+}
+
+.taskmd-terminal-output .terminal-hr {
+    border: none;
+    border-top: 1px solid var(--border, #252525);
+    margin: 16px 0;
+}
+
+.taskmd-terminal-output .check-mark {
+    color: var(--success, #22c55e);
+    font-weight: 600;
+}
+
+.taskmd-terminal-output .check-empty {
+    color: var(--text-muted, #555);
+}
+
+.taskmd-terminal-output a {
+    color: var(--accent, #c5f82a);
+    text-decoration: none;
+}
+
+.taskmd-terminal-output a:hover {
+    text-decoration: underline;
+}
+
 /* Actions */
 .taskmd-actions {
+    flex-shrink: 0;
     display: flex;
+    justify-content: flex-end;
     gap: 12px;
-    padding: 16px 24px;
+    padding: 20px 24px;
     border-top: 1px solid var(--border, #1a1a1a);
     background: var(--bg-secondary, #0d0d0d);
-    flex-shrink: 0;
 }
 
 .taskmd-actions .btn-action-rich {
diff --git a/ui/suite/tasks/tasks.html b/ui/suite/tasks/tasks.html
index 1b16b8c..3f7a04a 100644
--- a/ui/suite/tasks/tasks.html
+++ b/ui/suite/tasks/tasks.html
@@ -124,8 +124,8 @@
                 class="tasks-list-scroll"
                 id="task-list"
                 hx-get="/api/tasks?filter=all"
-                hx-trigger="load, taskCreated from:body"
-                hx-swap="innerHTML"
+                hx-trigger="load, taskCreated from:body throttle:2s"
+                hx-swap="innerHTML transition:false"
             >
                 <!-- Loading state - replaced by HTMX -->
                 <div class="loading-state">
@@ -334,19 +334,12 @@
                                 "quick-intent-input",
                             ).value = "";
 
-                            // Trigger task list refresh
-                            htmx.trigger(document.body, "taskCreated");
-
-                            // After a short delay to let the list reload, select the new task
+                            // Select the task and let tasks.js handle polling
+                            selectTask(response.task_id);
+                            // Hide success message after task is selected
                             setTimeout(function () {
-                                selectTask(response.task_id);
-                                // Start polling for updates
-                                startTaskPolling(response.task_id);
-                                // Hide success message after task is selected
-                                setTimeout(function () {
-                                    intentResult.style.display = "none";
-                                }, 2000);
-                            }, 500);
+                                intentResult.style.display = "none";
+                            }, 2000);
                         } else {
                             intentResult.innerHTML = `<span class="intent-error">✗ ${response.message || "Failed to create task"}</span>`;
                             intentResult.style.display = "block";
@@ -369,55 +362,6 @@
         });
     });
 
-    // Poll for task status updates
-    let taskPollingInterval = null;
-    function startTaskPolling(taskId) {
-        // Clear any existing polling
-        if (taskPollingInterval) {
-            clearInterval(taskPollingInterval);
-        }
-
-        taskPollingInterval = setInterval(function () {
-            fetch(`/api/tasks/${taskId}`, {
-                headers: { Accept: "application/json" },
-            })
-                .then((r) => r.json())
-                .then((task) => {
-                    console.log("[TASK] Poll status:", task.status);
-
-                    // Refresh the detail panel
-                    htmx.ajax("GET", `/api/tasks/${taskId}`, {
-                        target: "#task-detail-content",
-                        swap: "innerHTML",
-                    });
-
-                    // Refresh task list to update status badges
-                    htmx.trigger(document.body, "taskCreated");
-
-                    // Stop polling if task is complete or failed
-                    if (
-                        task.status === "completed" ||
-                        task.status === "failed" ||
-                        task.status === "cancelled"
-                    ) {
-                        clearInterval(taskPollingInterval);
-                        taskPollingInterval = null;
-                        loadTaskStats();
-                    }
-                })
-                .catch((e) => {
-                    console.warn("Failed to poll task:", e);
-                });
-        }, 2000); // Poll every 2 seconds
-    }
-
-    function stopTaskPolling() {
-        if (taskPollingInterval) {
-            clearInterval(taskPollingInterval);
-            taskPollingInterval = null;
-        }
-    }
-
     // Load task statistics
     function loadTaskStats() {
         fetch("/api/tasks/stats/json")
diff --git a/ui/suite/tasks/tasks.js b/ui/suite/tasks/tasks.js
index 63f200d..dc8b23b 100644
--- a/ui/suite/tasks/tasks.js
+++ b/ui/suite/tasks/tasks.js
@@ -16,6 +16,7 @@ if (typeof TasksState === "undefined") {
     wsConnection: null,
     agentLogPaused: false,
     selectedItemType: "task", // task, goal, pending, scheduler, monitor
+    loadingTaskId: null, // Prevent multiple simultaneous loads
   };
 }
 
@@ -61,6 +62,21 @@ function initTasksApp() {
   console.log("[Tasks] Initialized");
 }
 
+// Helper to find pending manifest by normalized ID
+function findPendingManifest(taskId) {
+  if (!taskId) return null;
+  const normalizedId = String(taskId).toLowerCase().trim();
+
+  // Lookup using normalized ID (all storage now uses normalized keys)
+  if (pendingManifestUpdates.has(normalizedId)) {
+    return {
+      key: normalizedId,
+      manifest: pendingManifestUpdates.get(normalizedId),
+    };
+  }
+  return null;
+}
+
 function setupHtmxListeners() {
   // Listen for HTMX content swaps to apply pending manifest updates
   document.body.addEventListener("htmx:afterSwap", function (evt) {
@@ -72,20 +88,29 @@ function setupHtmxListeners() {
     ) {
       console.log(
         "[HTMX] Task detail content loaded, checking for pending manifest updates",
+        "\n  selectedTaskId:",
+        TasksState.selectedTaskId,
+        "\n  pending keys:",
+        Array.from(pendingManifestUpdates.keys()),
       );
       // Check if there's a pending manifest update for the selected task
-      if (
-        TasksState.selectedTaskId &&
-        pendingManifestUpdates.has(TasksState.selectedTaskId)
-      ) {
-        const manifest = pendingManifestUpdates.get(TasksState.selectedTaskId);
+      const pending = findPendingManifest(TasksState.selectedTaskId);
+      if (pending) {
         console.log(
           "[HTMX] Applying pending manifest for task:",
           TasksState.selectedTaskId,
+          "from key:",
+          pending.key,
         );
         setTimeout(() => {
-          renderManifestProgress(TasksState.selectedTaskId, manifest, 0);
+          renderManifestProgress(
+            TasksState.selectedTaskId,
+            pending.manifest,
+            0,
+          );
         }, 50);
+      } else {
+        console.log("[HTMX] No pending manifest found for selected task");
       }
     }
   });
@@ -229,19 +254,31 @@ function startTaskPolling(taskId) {
 
       // Update progress
       const progress = task.progress || 0;
-      const message = task.current_step || task.status || "Processing...";
-      updateFloatingProgressBar(message, progress, task);
+      const currentStep = task.current_step || 0;
+      const totalSteps = task.total_steps || 100;
+      const message = task.status || "Processing...";
+      updateFloatingProgressBar(
+        currentStep,
+        totalSteps,
+        message,
+        "poll",
+        null,
+        null,
+      );
 
       // Check if task is complete
+      // Update the task card in-place without refreshing entire list
+      updateTaskCardFromPoll(taskId, task);
+
       if (task.status === "completed" || task.status === "complete") {
         stopTaskPolling();
         completeFloatingProgress(task);
-        htmx.trigger(document.body, "taskCreated"); // Refresh task list
+        updateFilterCounts(); // Just update counts, not full list
         showToast("Task completed successfully!", "success");
       } else if (task.status === "failed" || task.status === "error") {
         stopTaskPolling();
         errorFloatingProgress(task.error || "Task failed");
-        htmx.trigger(document.body, "taskCreated"); // Refresh task list
+        updateFilterCounts(); // Just update counts, not full list
         showToast(task.error || "Task failed", "error");
       }
     } catch (err) {
@@ -262,14 +299,24 @@ function stopTaskPolling() {
 // WEBSOCKET CONNECTION
 // =============================================================================
 
+// Global singleton WebSocket - shared across all task views
+// This ensures only ONE WebSocket connection exists for task progress
+if (typeof window._taskProgressWsConnection === "undefined") {
+  window._taskProgressWsConnection = null;
+  window._taskProgressWsHandlers = new Set();
+}
+
 function initWebSocket() {
-  // Don't create new connection if one already exists and is open/connecting
-  if (TasksState.wsConnection) {
-    const state = TasksState.wsConnection.readyState;
+  // Use global singleton to prevent multiple connections
+  // Check if global connection already exists and is open/connecting
+  if (window._taskProgressWsConnection) {
+    const state = window._taskProgressWsConnection.readyState;
     if (state === WebSocket.OPEN || state === WebSocket.CONNECTING) {
       console.log(
-        "[Tasks WS] WebSocket already connected/connecting, skipping",
+        "[Tasks WS] Global WebSocket already connected/connecting, reusing",
       );
+      // Just update local reference
+      TasksState.wsConnection = window._taskProgressWsConnection;
       return;
     }
   }
@@ -277,38 +324,51 @@ function initWebSocket() {
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   const wsUrl = `${protocol}//${window.location.host}/ws/task-progress`;
 
-  console.log("[Tasks WS] Attempting connection to:", wsUrl);
+  console.log("[Tasks WS] Creating SINGLETON WebSocket connection to:", wsUrl);
 
   try {
-    TasksState.wsConnection = new WebSocket(wsUrl);
+    const ws = new WebSocket(wsUrl);
+    window._taskProgressWsConnection = ws;
+    TasksState.wsConnection = ws;
 
-    TasksState.wsConnection.onopen = function () {
-      console.log("[Tasks WS] WebSocket connected successfully");
+    ws.onopen = function () {
+      console.log("[Tasks WS] WebSocket connected successfully (singleton)");
       addAgentLog("info", "[SYSTEM] Connected to task orchestrator");
     };
 
-    TasksState.wsConnection.onmessage = function (event) {
+    ws.onmessage = function (event) {
       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);
+
+        // Also forward to any registered handlers (e.g., ProgressPanel)
+        window._taskProgressWsHandlers.forEach((handler) => {
+          try {
+            handler(data);
+          } catch (e) {
+            console.error("[Tasks WS] Handler error:", e);
+          }
+        });
       } catch (e) {
         console.error("[Tasks WS] Failed to parse message:", e, event.data);
       }
     };
 
-    TasksState.wsConnection.onclose = function (event) {
+    ws.onclose = function (event) {
       console.log(
         "[Tasks WS] WebSocket disconnected, code:",
         event.code,
         "reason:",
         event.reason,
       );
+      window._taskProgressWsConnection = null;
+      TasksState.wsConnection = null;
       setTimeout(initWebSocket, 5000);
     };
 
-    TasksState.wsConnection.onerror = function (error) {
+    ws.onerror = function (error) {
       console.error("[Tasks WS] WebSocket error:", error);
     };
   } catch (e) {
@@ -316,6 +376,24 @@ function initWebSocket() {
   }
 }
 
+// Register a handler to receive WebSocket messages (for ProgressPanel etc.)
+function registerTaskProgressHandler(handler) {
+  window._taskProgressWsHandlers.add(handler);
+  console.log(
+    "[Tasks WS] Registered handler, total:",
+    window._taskProgressWsHandlers.size,
+  );
+}
+
+// Unregister a handler
+function unregisterTaskProgressHandler(handler) {
+  window._taskProgressWsHandlers.delete(handler);
+  console.log(
+    "[Tasks WS] Unregistered handler, total:",
+    window._taskProgressWsHandlers.size,
+  );
+}
+
 function handleWebSocketMessage(data) {
   console.log("[Tasks WS] handleWebSocketMessage called with type:", data.type);
 
@@ -330,12 +408,9 @@ function handleWebSocketMessage(data) {
       addAgentLog("accent", `[TASK] Started: ${data.message}`);
       // Update terminal in detail panel
       updateDetailTerminal(data.task_id, data.message, "started");
-      // Refresh task list
-      if (typeof htmx !== "undefined") {
-        htmx.trigger(document.body, "taskCreated");
-      }
-      // Select the task if not already selected
+      // Add new task card to the list without full refresh
       if (data.task_id) {
+        addTaskCardToList(data.task_id, data.message || "New Task", "running");
         selectTask(data.task_id);
       }
       break;
@@ -348,6 +423,20 @@ function handleWebSocketMessage(data) {
         data.message,
       );
       addAgentLog("info", `[${data.step}] ${data.message}`);
+
+      // Auto-select this task if none selected
+      if (data.task_id && !TasksState.selectedTaskId) {
+        console.log(
+          "[Tasks WS] Auto-selecting task from progress:",
+          data.task_id,
+        );
+        TasksState.selectedTaskId = data.task_id;
+        loadTaskDetails(data.task_id);
+      }
+
+      // Update STATUS section with current action
+      updateStatusFromProgress(data.message, data.step);
+
       // Update terminal in detail panel with real data
       updateDetailTerminal(
         data.task_id,
@@ -395,12 +484,16 @@ function handleWebSocketMessage(data) {
       // Play completion sound
       playCompletionSound();
 
-      // Refresh task list and details
-      if (typeof htmx !== "undefined") {
-        htmx.trigger(document.body, "taskCreated");
-      }
+      // Update task card status in-place, then refresh list once
       if (data.task_id) {
-        setTimeout(() => loadTaskDetails(data.task_id), 500);
+        updateTaskCardStatus(data.task_id, "completed");
+        setTimeout(() => {
+          loadTaskDetails(data.task_id);
+          // Trigger list refresh (throttled to 2s so won't flicker)
+          if (typeof htmx !== "undefined") {
+            htmx.trigger(document.body, "taskCreated");
+          }
+        }, 500);
       }
       break;
 
@@ -440,70 +533,176 @@ function handleWebSocketMessage(data) {
       console.log("[Tasks WS] LLM streaming...");
       break;
 
+    case "llm_generating":
+      console.log("[Tasks WS] LLM_GENERATING:", data.message);
+      addAgentLog("info", `[AI] ${data.message}`);
+      // Update STATUS section with AI progress
+      updateStatusFromProgress(data.message, "llm_generating");
+      // Update terminal
+      updateDetailTerminal(data.task_id, data.message, "llm_generating");
+      break;
+
+    case "llm_complete":
+      console.log("[Tasks WS] LLM_COMPLETE:", data.message);
+      addAgentLog("success", `[AI] ${data.message}`);
+      // Update STATUS section
+      updateStatusFromProgress(data.message, "llm_complete");
+      // Update terminal
+      updateDetailTerminal(data.task_id, `✓ ${data.message}`, "success");
+      break;
+
     case "manifest_update":
       console.log(
-        "[Tasks WS] MANIFEST_UPDATE for task:",
+        "[Tasks WS] *** MANIFEST_UPDATE RECEIVED ***",
+        "\n  task_id:",
         data.task_id,
-        "selected:",
+        "\n  selected:",
         TasksState.selectedTaskId,
+        "\n  has details:",
+        !!data.details,
+        "\n  details length:",
+        data.details?.length,
       );
+      // Visual indicator in console
+      console.warn(
+        "[MANIFEST] Processing manifest_update for task:",
+        data.task_id,
+      );
+      // Auto-select task if none selected or if this is a new running task
+      if (data.task_id && !TasksState.selectedTaskId) {
+        console.log("[Tasks WS] Auto-selecting task:", data.task_id);
+        TasksState.selectedTaskId = data.task_id;
+        loadTaskDetails(data.task_id);
+      }
       // Update the progress log section with manifest data
       if (data.details) {
         try {
           const manifestData = JSON.parse(data.details);
-          console.log(
-            "[Tasks WS] Manifest parsed, sections:",
+          console.warn(
+            "[MANIFEST] Parsed successfully:",
+            "\n  sections:",
             manifestData.sections?.length,
-            "status:",
+            "\n  status:",
             manifestData.status,
+            "\n  section names:",
+            manifestData.sections
+              ?.map((s) => s.name + ":" + s.status)
+              .join(", "),
           );
-          renderManifestProgress(data.task_id, manifestData);
+          // Always render for the task, even if not selected (store for later)
+          try {
+            renderManifestProgress(data.task_id, manifestData, 0, true);
+          } catch (renderError) {
+            console.error(
+              "[Tasks WS] Error in renderManifestProgress:",
+              renderError,
+              "\n  stack:",
+              renderError.stack,
+            );
+          }
         } catch (e) {
           console.error(
             "[Tasks WS] Failed to parse manifest:",
             e,
-            data.details?.substring(0, 200),
+            "\n  details preview:",
+            data.details?.substring(0, 500),
           );
         }
       } else {
-        console.warn("[Tasks WS] manifest_update received but no details");
+        console.warn(
+          "[Tasks WS] manifest_update received but no details field",
+        );
       }
       break;
+
+    default:
+      console.log(
+        "[Tasks WS] Unhandled message type:",
+        data.type,
+        "\n  step:",
+        data.step,
+        "\n  message:",
+        data.message,
+      );
+      break;
   }
 }
 
 // Store pending manifest updates for tasks whose elements aren't loaded yet
 const pendingManifestUpdates = new Map();
 
-function renderManifestProgress(taskId, manifest, retryCount = 0) {
-  console.log(
-    "[Manifest] renderManifestProgress called for task:",
+function renderManifestProgress(
+  taskId,
+  manifest,
+  retryCount = 0,
+  forceStore = false,
+) {
+  // Normalize task IDs for comparison (both to lowercase string)
+  const normalizedTaskId = String(taskId).toLowerCase().trim();
+  const normalizedSelectedId = TasksState.selectedTaskId
+    ? String(TasksState.selectedTaskId).toLowerCase().trim()
+    : null;
+
+  console.warn(
+    "[MANIFEST] *** renderManifestProgress ***",
+    "\n  taskId:",
     taskId,
-    "selected:",
+    "\n  selectedTaskId:",
     TasksState.selectedTaskId,
+    "\n  normalized match:",
+    normalizedTaskId === normalizedSelectedId,
+    "\n  sections:",
+    manifest?.sections?.length,
+    "\n  section statuses:",
+    manifest?.sections?.map((s) => `${s.name}:${s.status}`).join(", "),
+    "\n  retryCount:",
+    retryCount,
   );
 
-  // Only update if this is the selected task
-  if (TasksState.selectedTaskId !== taskId) {
-    console.log("[Manifest] Skipping - not selected task");
+  // Always store the manifest for this task (use normalized ID for consistent lookup)
+  pendingManifestUpdates.set(normalizedTaskId, manifest);
+
+  // Only render UI if this is the selected task (use normalized comparison)
+  if (normalizedSelectedId !== normalizedTaskId) {
+    console.log(
+      "[Manifest] Storing manifest but not rendering - not selected task",
+      "\n  taskId:",
+      normalizedTaskId,
+      "\n  selectedId:",
+      normalizedSelectedId,
+    );
     return;
   }
 
   // Try multiple selectors to find the progress log element
   let progressLog = document.getElementById(`progress-log-${taskId}`);
+  console.log(
+    "[MANIFEST] Looking for progress-log-" + taskId + ", found:",
+    !!progressLog,
+  );
   if (!progressLog) {
     progressLog = document.querySelector(".taskmd-progress-content");
+    console.log(
+      "[MANIFEST] Looking for .taskmd-progress-content, found:",
+      !!progressLog,
+    );
   }
 
   if (!progressLog) {
-    console.log("[Manifest] No progress log element found, retry:", retryCount);
+    console.warn(
+      "[MANIFEST] No progress log element found, retry:",
+      retryCount,
+    );
     // If task is selected but element not yet loaded, retry after a delay
     if (retryCount < 5) {
-      pendingManifestUpdates.set(taskId, manifest);
+      pendingManifestUpdates.set(normalizedTaskId, manifest);
       setTimeout(
         () => {
-          const pending = pendingManifestUpdates.get(taskId);
-          if (pending && TasksState.selectedTaskId === taskId) {
+          const pending = pendingManifestUpdates.get(normalizedTaskId);
+          const currentSelectedNormalized = TasksState.selectedTaskId
+            ? String(TasksState.selectedTaskId).toLowerCase().trim()
+            : null;
+          if (pending && currentSelectedNormalized === normalizedTaskId) {
             renderManifestProgress(taskId, pending, retryCount + 1);
           }
         },
@@ -513,39 +712,172 @@ function renderManifestProgress(taskId, manifest, retryCount = 0) {
     return;
   }
 
-  // Clear pending update
-  pendingManifestUpdates.delete(taskId);
+  // Clear pending update (use normalized ID)
+  pendingManifestUpdates.delete(normalizedTaskId);
 
   if (!manifest || !manifest.sections) {
-    console.log("[Manifest] No sections in manifest");
+    console.log("[Manifest] No sections in manifest, skipping render");
     return;
   }
 
   const totalSteps = manifest.progress?.total || 60;
 
+  console.warn(
+    "[MANIFEST] Rendering progress tree:",
+    "\n  totalSteps:",
+    totalSteps,
+    "\n  sections:",
+    manifest.sections.length,
+    "\n  progressLog element:",
+    progressLog?.id || progressLog?.className,
+  );
+
   // Update STATUS section if exists
   updateStatusSection(manifest);
 
   // Check if tree exists - if not, create it; if yes, update incrementally
+  // Clear any "progress-empty" placeholder first
+  const emptyPlaceholder = progressLog.querySelector(".progress-empty");
+  if (emptyPlaceholder) {
+    console.log("[Manifest] Removing progress-empty placeholder");
+    emptyPlaceholder.remove();
+  }
+
   let tree = progressLog.querySelector(".taskmd-tree");
-  if (!tree) {
-    // First render only - create the tree structure
-    progressLog.innerHTML = buildProgressTreeHTML(manifest, totalSteps);
-    // Auto-expand running sections
-    progressLog
-      .querySelectorAll(".tree-section.running, .tree-child.running")
-      .forEach((el) => {
-        el.classList.add("expanded");
-      });
-  } else {
-    // Incremental update - only update what changed (no flicker)
-    updateProgressTreeInPlace(tree, manifest, totalSteps);
+  console.log("[Manifest] Existing tree found:", !!tree);
+
+  // Check if we need to rebuild the tree (structure changed significantly)
+  let shouldRebuild = !tree;
+  if (tree && manifest.sections) {
+    const existingSections = tree.querySelectorAll(".tree-section");
+    const existingChildren = tree.querySelectorAll(".tree-child");
+    const existingItems = tree.querySelectorAll(".tree-item");
+    const newChildCount = manifest.sections.reduce(
+      (sum, s) => sum + (s.children?.length || 0),
+      0,
+    );
+    const newItemCount = manifest.sections.reduce((sum, s) => {
+      let count = (s.items?.length || 0) + (s.item_groups?.length || 0);
+      for (const child of s.children || []) {
+        count += (child.items?.length || 0) + (child.item_groups?.length || 0);
+      }
+      return sum + count;
+    }, 0);
+
+    // Check if section names match (IDs may change but names should be stable)
+    const existingNames = new Set(
+      Array.from(existingSections).map(
+        (el) => el.querySelector(".tree-name")?.textContent,
+      ),
+    );
+    const newNames = new Set(manifest.sections.map((s) => s.name));
+    const namesMatch =
+      existingNames.size === newNames.size &&
+      [...existingNames].every((n) => newNames.has(n));
+
+    // Rebuild if:
+    // - section count changed
+    // - children appeared where there were none
+    // - items appeared where there were none
+    // - section names don't match (structure completely different)
+    if (
+      existingSections.length !== manifest.sections.length ||
+      (existingChildren.length === 0 && newChildCount > 0) ||
+      (existingItems.length === 0 && newItemCount > 0) ||
+      !namesMatch
+    ) {
+      console.log(
+        "[Manifest] Structure changed significantly, REBUILDING tree",
+        "\n  existing sections:",
+        existingSections.length,
+        "-> new:",
+        manifest.sections.length,
+        "\n  existing children:",
+        existingChildren.length,
+        "-> new:",
+        newChildCount,
+        "\n  existing items:",
+        existingItems.length,
+        "-> new:",
+        newItemCount,
+        "\n  names match:",
+        namesMatch,
+      );
+      shouldRebuild = true;
+    }
+  }
+
+  try {
+    if (shouldRebuild) {
+      // Full rebuild - create the tree structure from scratch
+      console.log("[Manifest] === REBUILDING TREE FROM SCRATCH ===");
+      const treeHTML = buildProgressTreeHTML(manifest, totalSteps);
+      console.log(
+        "[Manifest] Tree HTML length:",
+        treeHTML.length,
+        "sections:",
+        manifest.sections.length,
+        "with children:",
+        manifest.sections.filter((s) => s.children?.length > 0).length,
+      );
+      progressLog.innerHTML = treeHTML;
+      // Auto-expand all sections and children for visibility
+      progressLog
+        .querySelectorAll(".tree-section, .tree-child")
+        .forEach((el) => {
+          el.classList.add("expanded");
+        });
+      const expandedCount = progressLog.querySelectorAll(".expanded").length;
+      const childCount = progressLog.querySelectorAll(".tree-child").length;
+      const itemCount = progressLog.querySelectorAll(".tree-item").length;
+      console.log(
+        "[Manifest] Tree rebuilt:",
+        expandedCount,
+        "expanded,",
+        childCount,
+        "children,",
+        itemCount,
+        "items",
+      );
+    } else {
+      // Incremental update - only update what changed (no flicker)
+      console.log("[Manifest] Updating tree in place");
+      updateProgressTreeInPlace(tree, manifest, totalSteps);
+      console.log("[Manifest] Tree updated successfully");
+    }
+  } catch (treeError) {
+    console.error(
+      "[Manifest] Error building/updating tree:",
+      treeError,
+      "\n  stack:",
+      treeError.stack,
+    );
   }
 
   // Update terminal stats
   updateTerminalStats(taskId, manifest);
 }
 
+// Update STATUS section from task_progress messages
+function updateStatusFromProgress(message, step) {
+  const statusContent = document.querySelector(".taskmd-status-content");
+  if (!statusContent) return;
+
+  // Update current action text
+  const actionText = statusContent.querySelector(
+    ".status-current .status-text",
+  );
+  if (actionText && message) {
+    actionText.textContent = message;
+  }
+
+  // Update the status dot to show activity
+  const statusDot = statusContent.querySelector(".status-dot");
+  if (statusDot) {
+    statusDot.classList.add("active");
+  }
+}
+
 function updateStatusSection(manifest) {
   const statusContent = document.querySelector(".taskmd-status-content");
   if (!statusContent) return;
@@ -596,27 +928,59 @@ function updateStatusSection(manifest) {
 }
 
 function buildProgressTreeHTML(manifest, totalSteps) {
+  // Detailed logging to debug children/items
+  const totalChildren = manifest.sections?.reduce(
+    (sum, s) => sum + (s.children?.length || 0),
+    0,
+  );
+  const totalItems = manifest.sections?.reduce((sum, s) => {
+    let count = (s.items?.length || 0) + (s.item_groups?.length || 0);
+    for (const c of s.children || []) {
+      count += (c.items?.length || 0) + (c.item_groups?.length || 0);
+    }
+    return sum + count;
+  }, 0);
+
+  console.warn(
+    "[BUILD_TREE] *** buildProgressTreeHTML ***",
+    "\n  sections:",
+    manifest.sections?.length,
+    "\n  totalChildren:",
+    totalChildren,
+    "\n  totalItems:",
+    totalItems,
+    "\n  totalSteps:",
+    totalSteps,
+  );
+
   let html = '<div class="taskmd-tree">';
 
   for (const section of manifest.sections) {
     // Normalize status - backend sends "Running", "Completed", etc.
     const rawStatus = section.status || "Pending";
     const statusClass = rawStatus.toLowerCase();
-    const isRunning = statusClass === "running";
+    // ALWAYS expand all sections by default for visibility
+    const shouldExpand = true;
     const globalCurrent =
       section.progress?.global_current || section.progress?.current || 0;
 
+    const sectionChildCount = section.children?.length || 0;
+    const sectionItemCount =
+      (section.items?.length || 0) + (section.item_groups?.length || 0);
+
     console.log(
-      "[Manifest] Section:",
+      "[BUILD_TREE] Section:",
       section.name,
-      "status:",
+      "| status:",
       rawStatus,
-      "children:",
-      section.children?.length,
+      "| children:",
+      sectionChildCount,
+      "| items:",
+      sectionItemCount,
     );
 
     html += `
-      <div class="tree-section ${statusClass}${isRunning ? " expanded" : ""}" data-section-id="${section.id}">
+      <div class="tree-section ${statusClass}${shouldExpand ? " expanded" : ""}" data-section-id="${section.id}">
         <div class="tree-row tree-level-0" onclick="this.parentElement.classList.toggle('expanded')">
           <span class="tree-name">${escapeHtml(section.name)}</span>
           <span class="tree-step-badge">Step ${globalCurrent}/${totalSteps}</span>
@@ -627,22 +991,31 @@ function buildProgressTreeHTML(manifest, totalSteps) {
 
     // Children (e.g., "Database Schema Design" under "Database & Models")
     if (section.children && section.children.length > 0) {
+      console.log(
+        "[BUILD_TREE]   -> Adding",
+        section.children.length,
+        "children to section",
+        section.name,
+      );
       for (const child of section.children) {
         const childRawStatus = child.status || "Pending";
         const childStatus = childRawStatus.toLowerCase();
-        const childIsRunning = childStatus === "running";
+        // ALWAYS expand all children by default for visibility
+        const childShouldExpand = true;
 
+        const childItemCount =
+          (child.item_groups?.length || 0) + (child.items?.length || 0);
         console.log(
-          "[Manifest]   Child:",
+          "[BUILD_TREE]     Child:",
           child.name,
-          "status:",
+          "| status:",
           childRawStatus,
-          "items:",
-          (child.item_groups?.length || 0) + (child.items?.length || 0),
+          "| items:",
+          childItemCount,
         );
 
         html += `
-          <div class="tree-child ${childStatus}${childIsRunning ? " expanded" : ""}" data-child-id="${child.id}">
+          <div class="tree-child ${childStatus}${childShouldExpand ? " expanded" : ""}" data-child-id="${child.id}">
             <div class="tree-row tree-level-1" onclick="this.parentElement.classList.toggle('expanded')">
               <span class="tree-item-dot ${childStatus}"></span>
               <span class="tree-name">${escapeHtml(child.name)}</span>
@@ -656,6 +1029,14 @@ function buildProgressTreeHTML(manifest, totalSteps) {
           ...(child.item_groups || []),
           ...(child.items || []),
         ];
+        if (childItems.length > 0) {
+          console.log(
+            "[BUILD_TREE]       -> Adding",
+            childItems.length,
+            "items to child",
+            child.name,
+          );
+        }
         for (const item of childItems) {
           html += buildItemHTML(item);
         }
@@ -677,6 +1058,20 @@ function buildProgressTreeHTML(manifest, totalSteps) {
   }
 
   html += "</div>";
+
+  // Final verification
+  const hasChildren = html.includes("tree-child");
+  const hasItems = html.includes("tree-item");
+  console.warn(
+    "[BUILD_TREE] *** Tree HTML built ***",
+    "\n  length:",
+    html.length,
+    "\n  hasChildren:",
+    hasChildren,
+    "\n  hasItems:",
+    hasItems,
+  );
+
   return html;
 }
 
@@ -702,8 +1097,50 @@ function buildItemHTML(item) {
 // Incremental update - only change what's different (prevents flicker)
 function updateProgressTreeInPlace(tree, manifest, totalSteps) {
   for (const section of manifest.sections) {
-    const sectionEl = tree.querySelector(`[data-section-id="${section.id}"]`);
-    if (!sectionEl) continue;
+    let sectionEl = tree.querySelector(`[data-section-id="${section.id}"]`);
+
+    // If section not found by ID, try to find by name (backend may regenerate IDs)
+    if (!sectionEl) {
+      const allSections = tree.querySelectorAll(".tree-section");
+      for (const el of allSections) {
+        const nameEl = el.querySelector(":scope > .tree-row .tree-name");
+        if (nameEl && nameEl.textContent === section.name) {
+          sectionEl = el;
+          // Update the data-section-id to the new ID for future lookups
+          sectionEl.setAttribute("data-section-id", section.id);
+          console.log(
+            "[Manifest] Found section by name, updated ID:",
+            section.name,
+            "->",
+            section.id,
+          );
+          break;
+        }
+      }
+    }
+
+    // If section still doesn't exist, create it dynamically (new section arrived!)
+    if (!sectionEl) {
+      console.log("[Manifest] Creating new section:", section.name);
+      const rawStatus = section.status || "Pending";
+      const statusClass = rawStatus.toLowerCase();
+      const globalCurrent =
+        section.progress?.global_current || section.progress?.current || 0;
+
+      const sectionHtml = `
+        <div class="tree-section ${statusClass} expanded" data-section-id="${section.id}">
+          <div class="tree-row tree-level-0" onclick="this.parentElement.classList.toggle('expanded')">
+            <span class="tree-name">${escapeHtml(section.name)}</span>
+            <span class="tree-step-badge">Step ${globalCurrent}/${totalSteps}</span>
+            <span class="tree-status ${statusClass}">${rawStatus}</span>
+            <span class="tree-section-dot ${statusClass}"></span>
+          </div>
+          <div class="tree-children"></div>
+        </div>`;
+
+      tree.insertAdjacentHTML("beforeend", sectionHtml);
+      sectionEl = tree.querySelector(`[data-section-id="${section.id}"]`);
+    }
 
     const rawStatus = section.status || "Pending";
     const statusClass = rawStatus.toLowerCase();
@@ -711,8 +1148,9 @@ function updateProgressTreeInPlace(tree, manifest, totalSteps) {
       section.progress?.global_current || section.progress?.current || 0;
     const isExpanded = sectionEl.classList.contains("expanded");
 
-    // Update section classes without removing expanded
-    const newClasses = `tree-section ${statusClass}${statusClass === "running" || isExpanded ? " expanded" : ""}`;
+    // ALWAYS keep sections expanded for visibility
+    const shouldExpand = true;
+    const newClasses = `tree-section ${statusClass}${shouldExpand ? " expanded" : ""}`;
     if (sectionEl.className !== newClasses) {
       sectionEl.className = newClasses;
     }
@@ -768,15 +1206,81 @@ function updateProgressTreeInPlace(tree, manifest, totalSteps) {
 }
 
 function updateChildInPlace(sectionEl, child) {
-  const childEl = sectionEl.querySelector(`[data-child-id="${child.id}"]`);
-  if (!childEl) return;
+  let childEl = sectionEl.querySelector(`[data-child-id="${child.id}"]`);
+
+  // If child not found by ID, try to find by name (backend may regenerate IDs)
+  if (!childEl) {
+    const allChildren = sectionEl.querySelectorAll(".tree-child");
+    for (const el of allChildren) {
+      const nameEl = el.querySelector(":scope > .tree-row .tree-name");
+      if (nameEl && nameEl.textContent === child.name) {
+        childEl = el;
+        // Update the data-child-id to the new ID for future lookups
+        childEl.setAttribute("data-child-id", child.id);
+        console.log(
+          "[Manifest] Found child by name, updated ID:",
+          child.name,
+          "->",
+          child.id,
+        );
+        break;
+      }
+    }
+  }
+
+  // If child still doesn't exist in DOM, create it (and auto-expand new children!)
+  if (!childEl) {
+    const childrenContainer = sectionEl.querySelector(".tree-children");
+    if (!childrenContainer) return;
+
+    const rawStatus = child.status || "Pending";
+    const statusClass = rawStatus.toLowerCase();
+    // NEW: Always expand newly created children so they're visible immediately
+    const childHasItems =
+      (child.item_groups?.length || 0) + (child.items?.length || 0) > 0;
+    const shouldExpand = true; // Always expand new children for visibility
+
+    console.log(
+      "[Manifest] Creating new child:",
+      child.name,
+      "status:",
+      rawStatus,
+      "expanded:",
+      shouldExpand,
+    );
+
+    const childHtml = `
+      <div class="tree-child ${statusClass}${shouldExpand ? " expanded" : ""}" data-child-id="${child.id}">
+        <div class="tree-row tree-level-1" onclick="this.parentElement.classList.toggle('expanded')">
+          <span class="tree-item-dot ${statusClass}"></span>
+          <span class="tree-name">${escapeHtml(child.name)}</span>
+          <span class="tree-step-badge">Step ${child.progress?.current || 0}/${child.progress?.total || 1}</span>
+          <span class="tree-status ${statusClass}">${rawStatus}</span>
+        </div>
+        <div class="tree-items"></div>
+      </div>`;
+
+    childrenContainer.insertAdjacentHTML("beforeend", childHtml);
+    childEl = sectionEl.querySelector(`[data-child-id="${child.id}"]`);
+
+    // Add items to the newly created child
+    const itemsContainer = childEl.querySelector(".tree-items");
+    if (itemsContainer) {
+      const allItems = [...(child.item_groups || []), ...(child.items || [])];
+      for (const item of allItems) {
+        itemsContainer.insertAdjacentHTML("beforeend", buildItemHTML(item));
+      }
+    }
+    return;
+  }
 
   const rawStatus = child.status || "Pending";
   const statusClass = rawStatus.toLowerCase();
   const isExpanded = childEl.classList.contains("expanded");
 
-  // Update child classes
-  const newClasses = `tree-child ${statusClass}${statusClass === "running" || isExpanded ? " expanded" : ""}`;
+  // ALWAYS keep children expanded for visibility
+  const shouldExpand = true;
+  const newClasses = `tree-child ${statusClass}${shouldExpand ? " expanded" : ""}`;
   if (childEl.className !== newClasses) {
     childEl.className = newClasses;
   }
@@ -826,8 +1330,23 @@ function updateItemsInPlace(container, items) {
 
   for (const item of items) {
     const itemId = item.id || item.name || item.display_name;
+    const itemName = item.name || item.display_name;
     let itemEl = container.querySelector(`[data-item-id="${itemId}"]`);
 
+    // If item not found by ID, try to find by name (backend may regenerate IDs)
+    if (!itemEl && itemName) {
+      const allItems = container.querySelectorAll(".tree-item");
+      for (const el of allItems) {
+        const nameEl = el.querySelector(".tree-item-name");
+        if (nameEl && nameEl.textContent === itemName) {
+          itemEl = el;
+          // Update the data-item-id to the new ID for future lookups
+          itemEl.setAttribute("data-item-id", itemId);
+          break;
+        }
+      }
+    }
+
     if (!itemEl) {
       // New item - append it
       container.insertAdjacentHTML("beforeend", buildItemHTML(item));
@@ -980,19 +1499,116 @@ function logFinalStats(activity) {
 
 // Update terminal in the detail panel with real-time data
 function updateDetailTerminal(taskId, message, step, activity) {
-  const terminalOutput = document.getElementById(`terminal-output-${taskId}`);
+  // Try multiple selectors to find the terminal
+  let terminalOutput = document.getElementById(`terminal-output-${taskId}`);
+
+  if (!terminalOutput) {
+    // Try the currently visible terminal output (any task)
+    terminalOutput = document.querySelector(".taskmd-terminal-output");
+  }
+
   if (!terminalOutput) {
     // Try generic terminal output
-    const genericTerminal = document.querySelector(".terminal-output-rich");
-    if (genericTerminal) {
-      addTerminalLine(genericTerminal, message, step);
-    }
+    terminalOutput = document.querySelector(".terminal-output-rich");
+  }
+
+  if (!terminalOutput) {
+    console.log("[Terminal] No terminal element found for task:", taskId);
     return;
   }
-  addTerminalLine(terminalOutput, message, step, activity);
+
+  // Ensure message is a string
+  const messageStr =
+    typeof message === "string" ? message : JSON.stringify(message) || "";
+  console.log(
+    "[Terminal] Adding line to terminal:",
+    messageStr.substring(0, 50),
+  );
+  addTerminalLine(terminalOutput, messageStr, step, activity);
 }
 
-// Format markdown-like text for terminal display
+// Simple markdown parser for terminal/LLM output
+function parseMarkdown(text) {
+  if (!text) return "";
+
+  let html = text;
+
+  // Escape HTML first
+  html = html
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+
+  // Code blocks (```language\ncode```) - must be before other replacements
+  html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (match, lang, code) => {
+    const langClass = lang ? ` data-lang="${lang}"` : "";
+    return `<pre class="terminal-code"${langClass}><code>${code.trim()}</code></pre>`;
+  });
+
+  // Headers (# ## ###)
+  html = html.replace(/^### (.+)$/gm, '<h3 class="terminal-h3">$1</h3>');
+  html = html.replace(/^## (.+)$/gm, '<h2 class="terminal-h2">$1</h2>');
+  html = html.replace(/^# (.+)$/gm, '<h1 class="terminal-h1">$1</h1>');
+
+  // Bold (**text** or __text__)
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
+
+  // Italic (*text* or _text_)
+  html = html.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+  html = html.replace(/_([^_]+)_/g, "<em>$1</em>");
+
+  // Inline code (`code`)
+  html = html.replace(
+    /`([^`]+)`/g,
+    '<code class="terminal-inline-code">$1</code>',
+  );
+
+  // Links [text](url)
+  html = html.replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener">$1</a>',
+  );
+
+  // Unordered lists (- item or * item)
+  html = html.replace(/^[-*]\s+(.+)$/gm, '<li class="terminal-li">$1</li>');
+  // Wrap consecutive li elements in ul
+  html = html.replace(
+    /(<li class="terminal-li">.*<\/li>\n?)+/g,
+    (match) => `<ul class="terminal-ul">${match}</ul>`,
+  );
+
+  // Ordered lists (1. item)
+  html = html.replace(/^\d+\.\s+(.+)$/gm, '<li class="terminal-oli">$1</li>');
+  html = html.replace(
+    /(<li class="terminal-oli">.*<\/li>\n?)+/g,
+    (match) => `<ol class="terminal-ol">${match}</ol>`,
+  );
+
+  // Blockquotes (> text)
+  html = html.replace(
+    /^>\s+(.+)$/gm,
+    '<blockquote class="terminal-quote">$1</blockquote>',
+  );
+
+  // Horizontal rule (--- or ***)
+  html = html.replace(/^[-*]{3,}$/gm, '<hr class="terminal-hr">');
+
+  // Checkmarks
+  html = html.replace(/^✓\s*/gm, '<span class="check-mark">✓</span> ');
+  html = html.replace(/^\[x\]/gim, '<span class="check-mark">✓</span>');
+  html = html.replace(/^\[ \]/g, '<span class="check-empty">○</span>');
+
+  // Line breaks - convert double newlines to paragraphs
+  html = html.replace(/\n\n+/g, '</p><p class="terminal-p">');
+  if (!html.startsWith("<")) {
+    html = '<p class="terminal-p">' + html + "</p>";
+  }
+
+  return html;
+}
+
+// Format markdown-like text for terminal display (simple version for status messages)
 function formatTerminalMarkdown(text) {
   if (!text) return "";
 
@@ -1011,7 +1627,7 @@ function formatTerminalMarkdown(text) {
   // Code blocks (```code```)
   text = text.replace(
     /```([\s\S]*?)```/g,
-    '<div class="terminal-code">$1</div>',
+    '<pre class="terminal-code"><code>$1</code></pre>',
   );
 
   // List items (- item)
@@ -1023,9 +1639,44 @@ function formatTerminalMarkdown(text) {
   return text;
 }
 
+// Render full markdown content (for LLM output)
+function renderMarkdownContent(container, markdown) {
+  if (!container || !markdown) return;
+
+  const content = document.createElement("div");
+  content.className = "markdown-content";
+  content.innerHTML = parseMarkdown(markdown);
+
+  // Clear previous content and add new
+  container.innerHTML = "";
+  container.appendChild(content);
+  container.scrollTop = container.scrollHeight;
+}
+
+// Update terminal with LLM markdown content
+function updateTerminalWithMarkdown(taskId, markdown) {
+  const terminalOutput = document.getElementById(`terminal-output-${taskId}`);
+  if (terminalOutput) {
+    renderMarkdownContent(terminalOutput, markdown);
+  } else {
+    const genericTerminal = document.querySelector(".taskmd-terminal-output");
+    if (genericTerminal) {
+      renderMarkdownContent(genericTerminal, markdown);
+    }
+  }
+}
+
 function addTerminalLine(terminal, message, step, activity) {
   const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false });
   const isLlmStream = step === "llm_stream";
+  const isLlmOutput =
+    step === "llm_output" || (message && message.length > 200);
+
+  // For large LLM output, render as full markdown
+  if (isLlmOutput && message && message.length > 200) {
+    renderMarkdownContent(terminal, message);
+    return;
+  }
 
   // Determine line type based on content
   const isHeader = message && message.startsWith("##");
@@ -1294,6 +1945,21 @@ function selectTask(taskId) {
 
   // Load task details (in real app, this would fetch from API)
   loadTaskDetails(taskId);
+
+  // Check if we have a pending manifest update for this task
+  const pending = findPendingManifest(taskId);
+  if (pending) {
+    console.log(
+      "[selectTask] Found pending manifest for task:",
+      taskId,
+      "from key:",
+      pending.key,
+    );
+    // Wait for detail content to load, then render manifest
+    setTimeout(() => {
+      renderManifestProgress(taskId, pending.manifest, 0, false);
+    }, 300);
+  }
 }
 
 function deselectTask() {
@@ -1367,7 +2033,14 @@ function loadTaskDetails(taskId) {
     return;
   }
 
+  // Prevent multiple simultaneous loads of the same task
+  if (TasksState.loadingTaskId === taskId) {
+    console.log("[LOAD] Already loading task:", taskId);
+    return;
+  }
+
   addAgentLog("info", `[LOAD] Loading task #${taskId} details`);
+  TasksState.loadingTaskId = taskId;
 
   // Show detail panel and hide empty state
   const emptyState = document.getElementById("detail-empty");
@@ -1375,6 +2048,7 @@ function loadTaskDetails(taskId) {
 
   if (!detailContent) {
     console.error("[LOAD] task-detail-content element not found");
+    TasksState.loadingTaskId = null;
     return;
   }
 
@@ -1384,12 +2058,20 @@ function loadTaskDetails(taskId) {
   // Fetch task details from API - use requestAnimationFrame to ensure DOM is ready
   requestAnimationFrame(() => {
     if (typeof htmx !== "undefined" && htmx.ajax) {
-      htmx.ajax("GET", `/api/tasks/${taskId}`, {
-        target: "#task-detail-content",
-        swap: "innerHTML",
-      });
+      htmx
+        .ajax("GET", `/api/tasks/${taskId}`, {
+          target: "#task-detail-content",
+          swap: "innerHTML",
+        })
+        .then(() => {
+          TasksState.loadingTaskId = null;
+        })
+        .catch(() => {
+          TasksState.loadingTaskId = null;
+        });
     } else {
       console.error("[LOAD] HTMX not available");
+      TasksState.loadingTaskId = null;
     }
   });
 }
@@ -1422,6 +2104,122 @@ function updateTaskDetail(task) {
   if (detailTitle) detailTitle.textContent = task.title;
 }
 
+// Update task card from polling without full list refresh
+function updateTaskCardFromPoll(taskId, task) {
+  const card = document.querySelector(`[data-task-id="${taskId}"]`);
+  if (!card) return;
+
+  // Don't update if the list is being swapped by HTMX
+  const taskList = document.getElementById("task-list");
+  if (
+    taskList &&
+    (taskList.classList.contains("htmx-swapping") ||
+      taskList.classList.contains("htmx-settling"))
+  ) {
+    return;
+  }
+
+  // Update progress bar
+  const progressFill = card.querySelector(".task-progress-fill");
+  const progressPercent = card.querySelector(".task-progress-percent");
+  if (progressFill && task.progress !== undefined) {
+    progressFill.style.width = `${task.progress}%`;
+  }
+  if (progressPercent && task.progress !== undefined) {
+    progressPercent.textContent = `${Math.round(task.progress)}%`;
+  }
+
+  // Update status badge
+  const statusBadge = card.querySelector(".task-card-status");
+  if (statusBadge && task.status) {
+    const oldStatus = statusBadge.className
+      .split(" ")
+      .find((c) => c !== "task-card-status");
+    if (oldStatus) statusBadge.classList.remove(oldStatus);
+    statusBadge.classList.add(task.status);
+    statusBadge.textContent = formatStatus(task.status);
+  }
+}
+
+// Add a new task card to the list without full refresh
+function addTaskCardToList(taskId, title, status) {
+  const taskList = document.getElementById("task-list");
+  if (!taskList) return;
+
+  // Check if card already exists
+  if (taskList.querySelector(`[data-task-id="${taskId}"]`)) {
+    return;
+  }
+
+  // Don't insert if task list is currently being swapped by HTMX
+  if (
+    taskList.classList.contains("htmx-swapping") ||
+    taskList.classList.contains("htmx-settling")
+  ) {
+    console.log("[TASK] Skipping card insert - list is being swapped");
+    return;
+  }
+
+  const statusClass = status || "running";
+  const statusText = formatStatus(status) || "Running";
+
+  const cardHtml = `
+    <div class="task-card ${statusClass}" data-task-id="${taskId}" onclick="selectTask('${taskId}')">
+      <div class="task-card-header">
+        <span class="task-card-icon">📋</span>
+        <span class="task-card-title">${escapeHtml(title)}</span>
+      </div>
+      <div class="task-card-meta">
+        <span class="task-card-status ${statusClass}">${statusText}</span>
+        <span class="task-card-priority">normal</span>
+      </div>
+      <div class="task-card-progress">
+        <div class="task-progress-bar">
+          <div class="task-progress-fill" style="width: 0%"></div>
+        </div>
+        <span class="task-progress-percent">0%</span>
+      </div>
+      <div class="task-card-actions">
+        <button class="task-action-btn" title="Star">★</button>
+        <button class="task-action-btn" title="Delete">🗑</button>
+      </div>
+    </div>
+  `;
+
+  // Insert at the top of the list
+  taskList.insertAdjacentHTML("afterbegin", cardHtml);
+}
+
+// Update just the status of a task card
+function updateTaskCardStatus(taskId, status) {
+  const card = document.querySelector(`[data-task-id="${taskId}"]`);
+  if (!card) return;
+
+  // Don't update if the list is being swapped by HTMX
+  const taskList = document.getElementById("task-list");
+  if (
+    taskList &&
+    (taskList.classList.contains("htmx-swapping") ||
+      taskList.classList.contains("htmx-settling"))
+  ) {
+    return;
+  }
+
+  const statusBadge = card.querySelector(".task-card-status");
+  if (statusBadge) {
+    statusBadge.className = `task-card-status ${status}`;
+    statusBadge.textContent = formatStatus(status);
+  }
+
+  // Update progress to 100% for completed
+  if (status === "completed") {
+    const progressFill = card.querySelector(".task-progress-fill");
+    const progressPercent = card.querySelector(".task-progress-percent");
+    if (progressFill) progressFill.style.width = "100%";
+    if (progressPercent) progressPercent.textContent = "100%";
+  }
+}
+
 // =============================================================================
 // DECISION HANDLING
 // =============================================================================