Fix duplicate WS progress bug - rebuild tree on structure change

- Normalize task ID comparison in retry logic for consistent lookups
- Use normalized keys in pendingManifestUpdates Map
- Skip manifest_update in ProgressPanel (already handled by tasks.js)
- Clean up existing handler before registering new one in ProgressPanel.init
- Add name-based fallback lookups for sections/children/items when IDs change
- Detect structure changes (section count, children, items, names) and rebuild tree
- Clear progress-empty placeholder before rendering tree
- Add detailed BUILD_TREE logging for debugging
- Add cache-busting version to tasks.js script tag

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,10 +360,25 @@ 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() {
+                    // 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)) => {
                     if client_tx.send(AxumMessage::Binary(data)).await.is_err() {
                         break;
@@ -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);
 

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>

ui/suite/tasks/autotask.js

@@ -178,40 +178,36 @@ function initWebSocket() {
 }
 
 function initTaskProgressWebSocket() {
-  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  // Use the singleton WebSocket from tasks.js instead of creating a duplicate connection
-  const wsUrl = `${protocol}//${window.location.host}/ws/task-progress`;
+  // 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 {
+  console.log("[AutoTask] Using singleton WebSocket for task progress");
-    AutoTaskState.progressWsConnection = new WebSocket(wsUrl);
 
-    AutoTaskState.progressWsConnection.onopen = function () {
+  // Create handler for task progress messages
-      console.log("Task Progress WebSocket connected");
+  const handler = function (data) {
+    handleTaskProgressMessage(data);
   };
 
-    AutoTaskState.progressWsConnection.onmessage = function (event) {
+  // Store handler reference for cleanup
-      handleTaskProgressMessage(JSON.parse(event.data));
+  AutoTaskState._progressHandler = handler;
-    };
 
-    AutoTaskState.progressWsConnection.onclose = function () {
+  // Register with the global singleton WebSocket from tasks.js
-      console.log("Task Progress WebSocket disconnected, reconnecting...");
+  if (typeof registerTaskProgressHandler === "function") {
-      setTimeout(initTaskProgressWebSocket, 3000);
+    registerTaskProgressHandler(handler);
-    };
+    console.log("[AutoTask] Registered with singleton WebSocket");
-
+  } else {
-    AutoTaskState.progressWsConnection.onerror = function (error) {
+    // Fallback: wait for tasks.js to load and retry
-      console.error("Task Progress WebSocket error:", error);
+    console.log("[AutoTask] Waiting for tasks.js singleton to be available...");
-    };
+    setTimeout(initTaskProgressWebSocket, 500);
-  } catch (e) {
-    console.warn("Task Progress WebSocket not available");
   }
 }
 
 function handleTaskProgressMessage(data) {
-  // Forward to ProgressPanel if available
+  // Note: ProgressPanel now registers its own handler with the singleton,
-  if (typeof ProgressPanel !== "undefined" && ProgressPanel.manifest) {
+  // so we don't need to forward messages manually here
-    ProgressPanel.handleProgressUpdate(data);
-  }
 
-  console.log("Task progress:", data);
+  console.log("[AutoTask] Task progress:", data.type, data.task_id);
 
   switch (data.type) {
     case "connected":

ui/suite/tasks/progress-panel.js

@@ -1,10 +1,21 @@
 const ProgressPanel = {
   manifest: null,
-    wsConnection: null,
+  wsConnection: null, // Deprecated - now uses singleton from tasks.js
   startTime: null,
   runtimeInterval: null,
+  _boundHandler: null, // Store bound handler for cleanup
 
   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;
+    }
+
     this.taskId = taskId;
     this.startTime = Date.now();
     this.startRuntimeCounter();
@@ -12,66 +23,109 @@ const ProgressPanel = {
   },
 
   connectWebSocket(taskId) {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    // Instead of creating our own WebSocket, register with the singleton from tasks.js
-        const wsUrl = `${protocol}//${window.location.host}/ws/task-progress/${taskId}`;
+    // This prevents the "2 receivers" problem where manifest_update goes to one connection
+    // while the browser UI is listening on another
 
-        this.wsConnection = new WebSocket(wsUrl);
+    console.log("[ProgressPanel] Using singleton WebSocket for task:", taskId);
 
-        this.wsConnection.onopen = () => {
+    // Create bound handler that filters for our task
-            console.log('Progress panel WebSocket connected');
+    this._boundHandler = (data) => {
-        };
+      // Only process messages for our task
-
+      if (data.task_id && String(data.task_id) !== String(taskId)) {
-        this.wsConnection.onmessage = (event) => {
+        return;
-            const data = JSON.parse(event.data);
+      }
       this.handleProgressUpdate(data);
     };
 
-        this.wsConnection.onclose = () => {
+    // Register with the global singleton WebSocket
-            console.log('Progress panel WebSocket closed');
+    if (typeof registerTaskProgressHandler === "function") {
-            setTimeout(() => this.connectWebSocket(taskId), 3000);
+      registerTaskProgressHandler(this._boundHandler);
-        };
+      console.log("[ProgressPanel] Registered with singleton WebSocket");
-
+    } else {
-        this.wsConnection.onerror = (error) => {
+      // Fallback: wait for tasks.js to load and retry
-            console.error('Progress panel WebSocket error:', error);
+      console.log(
-        };
+        "[ProgressPanel] Waiting for tasks.js singleton to be available...",
+      );
+      setTimeout(() => this.connectWebSocket(taskId), 500);
+    }
   },
 
   handleProgressUpdate(data) {
-        if (data.type === 'manifest_update') {
+    // Skip manifest_update - already handled by tasks.js renderManifestProgress()
-            this.manifest = data.manifest;
+    // Processing it here would cause duplicate updates and race conditions
-            this.render();
+    if (
-        } else if (data.type === 'section_update') {
+      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;
+    }
+
+    if (data.type === "section_update") {
       this.updateSection(data.section_id, data.status, data.progress);
-        } else if (data.type === 'item_update') {
+    } else if (data.type === "item_update") {
-            this.updateItem(data.section_id, data.item_id, data.status, data.duration);
+      this.updateItem(
-        } else if (data.type === 'terminal_line') {
+        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') {
+    } else if (data.type === "stats_update") {
       this.updateStats(data.stats);
-        } else if (data.type === 'task_progress') {
+    } 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();
     }
 
-        if (data.step) {
+    // 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);
+      }
+    }
+
+    if (data.step && data.step !== "manifest_update") {
       this.updateCurrentAction(data.message || data.step);
     }
 
-        if (data.details) {
+    // Only add non-manifest details as terminal lines
-            this.addTerminalLine(data.details, 'info');
+    if (
+      data.details &&
+      data.step !== "manifest_update" &&
+      data.event_type !== "manifest_update"
+    ) {
+      this.addTerminalLine(data.details, "info");
     }
   },
 
   startRuntimeCounter() {
     this.runtimeInterval = setInterval(() => {
       const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
-            const runtimeEl = document.getElementById('status-runtime');
+      const runtimeEl = document.getElementById("status-runtime");
       if (runtimeEl) {
         runtimeEl.textContent = this.formatDuration(elapsed);
       }
@@ -107,18 +161,20 @@ const ProgressPanel = {
   },
 
   renderStatus() {
-        const titleEl = document.getElementById('status-title');
+    const titleEl = document.getElementById("status-title");
     if (titleEl) {
       titleEl.textContent = this.manifest.description || this.manifest.app_name;
     }
 
-        const estimatedEl = document.getElementById('estimated-time');
+    const estimatedEl = document.getElementById("estimated-time");
     if (estimatedEl && this.manifest.estimated_seconds) {
-            estimatedEl.textContent = this.formatDuration(this.manifest.estimated_seconds);
+      estimatedEl.textContent = this.formatDuration(
+        this.manifest.estimated_seconds,
+      );
     }
 
     const currentAction = this.getCurrentAction();
-        const actionEl = document.getElementById('current-action');
+    const actionEl = document.getElementById("current-action");
     if (actionEl && currentAction) {
       actionEl.textContent = currentAction;
     }
@@ -130,11 +186,11 @@ const ProgressPanel = {
     if (!this.manifest || !this.manifest.sections) return null;
 
     for (const section of this.manifest.sections) {
-            if (section.status === 'Running') {
+      if (section.status === "Running") {
         for (const child of section.children || []) {
-                    if (child.status === 'Running') {
+          if (child.status === "Running") {
             for (const item of child.items || []) {
-                            if (item.status === 'Running') {
+              if (item.status === "Running") {
                 return item.name;
               }
             }
@@ -148,15 +204,15 @@ const ProgressPanel = {
   },
 
   updateCurrentAction(action) {
-        const actionEl = document.getElementById('current-action');
+    const actionEl = document.getElementById("current-action");
     if (actionEl) {
       actionEl.textContent = action;
     }
   },
 
   updateDecisionPoint() {
-        const decisionStepEl = document.getElementById('decision-step');
+    const decisionStepEl = document.getElementById("decision-step");
-        const decisionTotalEl = document.getElementById('decision-total');
+    const decisionTotalEl = document.getElementById("decision-total");
 
     if (decisionStepEl && this.manifest) {
       decisionStepEl.textContent = this.manifest.completed_steps || 0;
@@ -167,10 +223,10 @@ const ProgressPanel = {
   },
 
   renderProgressLog() {
-        const container = document.getElementById('progress-log-content');
+    const container = document.getElementById("progress-log-content");
     if (!container || !this.manifest || !this.manifest.sections) return;
 
-        container.innerHTML = '';
+    container.innerHTML = "";
 
     for (const section of this.manifest.sections) {
       const sectionEl = this.createSectionElement(section);
@@ -179,17 +235,18 @@ const ProgressPanel = {
   },
 
   createSectionElement(section) {
-        const sectionDiv = document.createElement('div');
+    const sectionDiv = document.createElement("div");
-        sectionDiv.className = 'log-section';
+    sectionDiv.className = "log-section";
     sectionDiv.dataset.sectionId = section.id;
 
-        if (section.status === 'Running' || section.status === 'Completed') {
+    if (section.status === "Running" || section.status === "Completed") {
-            sectionDiv.classList.add('expanded');
+      sectionDiv.classList.add("expanded");
     }
 
     const statusClass = section.status.toLowerCase();
-        const stepCurrent = section.current_step || 0;
+    // Support both direct fields and nested progress object
-        const stepTotal = section.total_steps || 0;
+    const stepCurrent = section.current_step ?? section.progress?.current ?? 0;
+    const stepTotal = section.total_steps ?? section.progress?.total ?? 0;
 
     sectionDiv.innerHTML = `
             <div class="log-section-header" onclick="ProgressPanel.toggleSection('${section.id}')">
@@ -205,14 +262,18 @@ 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);
     }
 
-        if (section.items && section.items.length > 0 && (!section.children || section.children.length === 0)) {
+    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);
@@ -223,18 +284,21 @@ const ProgressPanel = {
   },
 
   createChildElement(child, parentId) {
-        const childDiv = document.createElement('div');
+    const childDiv = document.createElement("div");
-        childDiv.className = 'log-child';
+    childDiv.className = "log-child";
     childDiv.dataset.childId = child.id;
 
-        if (child.status === 'Running' || child.status === 'Completed') {
+    if (child.status === "Running" || child.status === "Completed") {
-            childDiv.classList.add('expanded');
+      childDiv.classList.add("expanded");
     }
 
     const statusClass = child.status.toLowerCase();
-        const stepCurrent = child.current_step || 0;
+    // Support both direct fields and nested progress object
-        const stepTotal = child.total_steps || 0;
+    const stepCurrent = child.current_step ?? child.progress?.current ?? 0;
-        const duration = child.duration_seconds ? this.formatDuration(child.duration_seconds) : '';
+    const stepTotal = child.total_steps ?? child.progress?.total ?? 0;
+    const duration = child.duration_seconds
+      ? this.formatDuration(child.duration_seconds)
+      : "";
 
     childDiv.innerHTML = `
             <div class="log-child-header" onclick="ProgressPanel.toggleChild('${child.id}')">
@@ -250,7 +314,7 @@ 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);
@@ -261,17 +325,20 @@ const ProgressPanel = {
   },
 
   createItemElement(item) {
-        const itemDiv = document.createElement('div');
+    const itemDiv = document.createElement("div");
-        itemDiv.className = 'log-item';
+    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 duration = item.duration_seconds
-        const checkIcon = item.status === 'Completed' ? '✓' : (item.status === 'Running' ? '◎' : '○');
+      ? `Duration: ${this.formatDuration(item.duration_seconds)}`
+      : "";
+    const checkIcon =
+      item.status === "Completed" ? "✓" : item.status === "Running" ? "◎" : "○";
 
     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>
@@ -282,22 +349,30 @@ const ProgressPanel = {
   },
 
   renderTerminal() {
-        if (!this.manifest || !this.manifest.terminal_output) return;
+    // 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 (!terminalLines.length) return;
+
+    const container = document.getElementById("terminal-content");
     if (!container) return;
 
-        container.innerHTML = '';
+    container.innerHTML = "";
 
-        for (const line of this.manifest.terminal_output.slice(-50)) {
+    for (const line of terminalLines.slice(-50)) {
-            this.appendTerminalLine(container, line.content, line.line_type || 'info');
+      this.appendTerminalLine(
+        container,
+        line.content,
+        line.type || line.line_type || "info",
+      );
     }
 
     container.scrollTop = container.scrollHeight;
   },
 
   addTerminalLine(content, lineType) {
-        const container = document.getElementById('terminal-content');
+    const container = document.getElementById("terminal-content");
     if (!container) return;
 
     this.appendTerminalLine(container, content, lineType);
@@ -307,14 +382,14 @@ const ProgressPanel = {
   },
 
   appendTerminalLine(container, content, lineType) {
-        const lineDiv = document.createElement('div');
+    const lineDiv = document.createElement("div");
-        lineDiv.className = `terminal-line ${lineType || 'info'}`;
+    lineDiv.className = `terminal-line ${lineType || "info"}`;
     lineDiv.textContent = content;
     container.appendChild(lineDiv);
   },
 
   incrementProcessedCount() {
-        const processedEl = document.getElementById('terminal-processed');
+    const processedEl = document.getElementById("terminal-processed");
     if (processedEl) {
       const current = parseInt(processedEl.textContent, 10) || 0;
       processedEl.textContent = current + 1;
@@ -322,29 +397,33 @@ const ProgressPanel = {
   },
 
   updateStats(stats) {
-        const processedEl = document.getElementById('terminal-processed');
+    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');
+    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');
+    const etaEl = document.getElementById("terminal-eta");
     if (etaEl && stats.estimated_remaining_seconds !== undefined) {
-            etaEl.textContent = this.formatDuration(stats.estimated_remaining_seconds);
+      etaEl.textContent = this.formatDuration(
+        stats.estimated_remaining_seconds,
+      );
     }
   },
 
   updateSection(sectionId, status, progress) {
-        const sectionEl = document.querySelector(`[data-section-id="${sectionId}"]`);
+    const sectionEl = document.querySelector(
+      `[data-section-id="${sectionId}"]`,
+    );
     if (!sectionEl) return;
 
-        const indicator = sectionEl.querySelector('.section-indicator');
+    const indicator = sectionEl.querySelector(".section-indicator");
-        const statusBadge = sectionEl.querySelector('.section-status-badge');
+    const statusBadge = sectionEl.querySelector(".section-status-badge");
-        const stepBadge = sectionEl.querySelector('.section-step-badge');
+    const stepBadge = sectionEl.querySelector(".section-step-badge");
 
     if (indicator) {
       indicator.className = `section-indicator ${status.toLowerCase()}`;
@@ -359,8 +438,8 @@ const ProgressPanel = {
       stepBadge.textContent = `Step ${progress.current}/${progress.total}`;
     }
 
-        if (status === 'Running' || status === 'Completed') {
+    if (status === "Running" || status === "Completed") {
-            sectionEl.classList.add('expanded');
+      sectionEl.classList.add("expanded");
     }
   },
 
@@ -368,9 +447,9 @@ const ProgressPanel = {
     const itemEl = document.querySelector(`[data-item-id="${itemId}"]`);
     if (!itemEl) return;
 
-        const dot = itemEl.querySelector('.item-dot');
+    const dot = itemEl.querySelector(".item-dot");
-        const check = itemEl.querySelector('.item-check');
+    const check = itemEl.querySelector(".item-check");
-        const durationEl = itemEl.querySelector('.item-duration');
+    const durationEl = itemEl.querySelector(".item-duration");
 
     const statusClass = status.toLowerCase();
 
@@ -380,7 +459,8 @@ const ProgressPanel = {
 
     if (check) {
       check.className = `item-check ${statusClass}`;
-            check.textContent = status === 'Completed' ? '✓' : (status === 'Running' ? '◎' : '○');
+      check.textContent =
+        status === "Completed" ? "✓" : status === "Running" ? "◎" : "○";
     }
 
     if (durationEl && duration) {
@@ -389,67 +469,76 @@ const ProgressPanel = {
   },
 
   toggleSection(sectionId) {
-        const sectionEl = document.querySelector(`[data-section-id="${sectionId}"]`);
+    const sectionEl = document.querySelector(
+      `[data-section-id="${sectionId}"]`,
+    );
     if (sectionEl) {
-            sectionEl.classList.toggle('expanded');
+      sectionEl.classList.toggle("expanded");
     }
   },
 
   toggleChild(childId) {
     const childEl = document.querySelector(`[data-child-id="${childId}"]`);
     if (childEl) {
-            childEl.classList.toggle('expanded');
+      childEl.classList.toggle("expanded");
     }
   },
 
   viewDetails(sectionId) {
-        console.log('View details for section:', sectionId);
+    console.log("View details for section:", sectionId);
   },
 
   viewChildDetails(childId) {
-        console.log('View details for child:', childId);
+    console.log("View details for child:", childId);
   },
 
   escapeHtml(text) {
-        const div = document.createElement('div');
+    const div = document.createElement("div");
     div.textContent = text;
     return div.innerHTML;
   },
 
   loadManifest(taskId) {
     fetch(`/api/autotask/${taskId}/manifest`)
-            .then(response => response.json())
+      .then((response) => response.json())
-            .then(data => {
+      .then((data) => {
         if (data.success && data.manifest) {
           this.manifest = data.manifest;
           this.render();
         }
       })
-            .catch(error => {
+      .catch((error) => {
-                console.error('Failed to load manifest:', error);
+        console.error("Failed to load manifest:", error);
       });
   },
 
   destroy() {
     this.stopRuntimeCounter();
-        if (this.wsConnection) {
+    // Unregister from singleton instead of closing our own connection
-            this.wsConnection.close();
+    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');
+  const section = header.closest(".log-section");
   if (section) {
-        section.classList.toggle('expanded');
+    section.classList.toggle("expanded");
   }
 }
 
 function toggleLogChild(header) {
-    const child = header.closest('.log-child');
+  const child = header.closest(".log-child");
   if (child) {
-        child.classList.toggle('expanded');
+    child.classList.toggle("expanded");
   }
 }
 

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;
+    border-radius: 6px;
-    padding: 8px 12px;
+    padding: 12px 16px;
-    margin: 6px 0;
+    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 {

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-trigger="load, taskCreated from:body throttle:2s"
-                hx-swap="innerHTML"
+                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
+                            // Select the task and let tasks.js handle polling
-                            htmx.trigger(document.body, "taskCreated");
-
-                            // After a short delay to let the list reload, select the new task
-                            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);
                         } 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")