${escapeHtml(section.name)}
View Details ›
Step ${globalCurrent}/${totalSteps}
${statusText}
- ${
- showProgress
- ? `
-
`
- : ""
- }
`;
- // Render children if present
- if (section.children && section.children.length > 0) {
+ // Children
+ if (section.children?.length > 0) {
for (const child of section.children) {
- const childStatus = child.status
- ? child.status.toLowerCase()
- : "pending";
- const childStepCurrent = child.progress?.current || 0;
- const childStepTotal = child.progress?.total || 1;
- const childStatusText = child.status || "Pending";
-
+ const childStatus = child.status?.toLowerCase() || "pending";
+ const childIsRunning = childStatus === "running";
html += `
-
-
+
+
${escapeHtml(child.name)}
View Details ›
- Step ${childStepCurrent}/${childStepTotal}
- ${childStatusText}
+ Step ${child.progress?.current || 0}/${child.progress?.total || 1}
+ ${child.status || "Pending"}
`;
- // Render item_groups first (grouped fields like "email, password_hash, email_verified")
- if (child.item_groups && child.item_groups.length > 0) {
- for (const group of child.item_groups) {
- const groupStatus = group.status
- ? group.status.toLowerCase()
- : "pending";
- const checkIcon = groupStatus === "completed" ? "✓" : "";
- const duration = group.duration_seconds
- ? group.duration_seconds >= 60
- ? `Duration: ${Math.floor(group.duration_seconds / 60)} min`
- : `Duration: ${group.duration_seconds} sec`
- : "";
-
- html += `
-
-
- ${escapeHtml(group.name)}
- ${duration}
- ${checkIcon}
-
`;
- }
- }
-
- // Then render individual items
- if (child.items && child.items.length > 0) {
- for (const item of child.items) {
- const itemStatus = item.status
- ? item.status.toLowerCase()
- : "pending";
- const checkIcon = itemStatus === "completed" ? "✓" : "";
- const duration = item.duration_seconds
- ? item.duration_seconds >= 60
- ? `Duration: ${Math.floor(item.duration_seconds / 60)} min`
- : `Duration: ${item.duration_seconds} sec`
- : "";
-
- html += `
-
-
- ${escapeHtml(item.name)}
- ${duration}
- ${checkIcon}
-
`;
- }
+ // Items
+ const items = [...(child.item_groups || []), ...(child.items || [])];
+ for (const item of items) {
+ html += buildItemHTML(item);
}
html += `
`;
}
}
- // Render section-level item_groups
- if (section.item_groups && section.item_groups.length > 0) {
- for (const group of section.item_groups) {
- const groupStatus = group.status
- ? group.status.toLowerCase()
- : "pending";
- const checkIcon = groupStatus === "completed" ? "✓" : "";
- const duration = group.duration_seconds
- ? group.duration_seconds >= 60
- ? `Duration: ${Math.floor(group.duration_seconds / 60)} min`
- : `Duration: ${group.duration_seconds} sec`
- : "";
-
- html += `
-
-
- ${escapeHtml(group.name)}
- ${duration}
- ${checkIcon}
-
`;
- }
- }
-
- // Render section-level items
- if (section.items && section.items.length > 0) {
- for (const item of section.items) {
- const itemStatus = item.status ? item.status.toLowerCase() : "pending";
- const checkIcon = itemStatus === "completed" ? "✓" : "";
- const duration = item.duration_seconds
- ? item.duration_seconds >= 60
- ? `Duration: ${Math.floor(item.duration_seconds / 60)} min`
- : `Duration: ${item.duration_seconds} sec`
- : "";
-
- html += `
-
-
- ${escapeHtml(item.name)}
- ${duration}
- ${checkIcon}
-
`;
- }
+ // Section-level items
+ const sectionItems = [
+ ...(section.item_groups || []),
+ ...(section.items || []),
+ ];
+ for (const item of sectionItems) {
+ html += buildItemHTML(item);
}
html += `
`;
}
html += "
";
+ return html;
+}
- progressLog.innerHTML = html;
+function buildItemHTML(item) {
+ const status = item.status?.toLowerCase() || "pending";
+ const checkIcon = status === "completed" ? "✓" : "";
+ const duration = item.duration_seconds
+ ? item.duration_seconds >= 60
+ ? `Duration: ${Math.floor(item.duration_seconds / 60)} min`
+ : `Duration: ${item.duration_seconds} sec`
+ : "";
+ const name = item.name || item.display_name || "";
- // Also update the STATUS section if it exists
- const statusSection = document.querySelector(".taskmd-status-content");
- if (statusSection && manifest.status) {
- const runtime = manifest.status.runtime_display || "calculating...";
- const estimated = manifest.status.estimated_display || "calculating...";
- const currentAction = manifest.status.current_action || "Processing...";
+ return `
+
+
+ ${escapeHtml(name)}
+ ${duration}
+ ${checkIcon}
+
`;
+}
- statusSection.innerHTML = `
-
- ${escapeHtml(manifest.status.title || manifest.app_name || "")}
- Runtime: ${runtime}
-
-
-
- ${escapeHtml(currentAction)}
- Estimated: ${estimated}
-
- `;
+function updateProgressTree(tree, manifest, totalSteps) {
+ for (const section of manifest.sections) {
+ const sectionEl = tree.querySelector(`[data-section-id="${section.id}"]`);
+ if (!sectionEl) continue;
+
+ const statusClass = section.status?.toLowerCase() || "pending";
+ const globalCurrent =
+ section.progress?.global_current || section.progress?.current || 0;
+
+ // Update section class
+ sectionEl.className = `tree-section ${statusClass}${statusClass === "running" ? " expanded" : sectionEl.classList.contains("expanded") ? " expanded" : ""}`;
+
+ // Update step badge
+ const stepBadge = sectionEl.querySelector(
+ ":scope > .tree-row .tree-step-badge",
+ );
+ if (stepBadge)
+ stepBadge.textContent = `Step ${globalCurrent}/${totalSteps}`;
+
+ // Update status text
+ const statusEl = sectionEl.querySelector(":scope > .tree-row .tree-status");
+ if (statusEl) {
+ statusEl.className = `tree-status ${statusClass}`;
+ statusEl.textContent = section.status || "Pending";
+ }
+
+ // Update children
+ if (section.children) {
+ for (const child of section.children) {
+ const childEl = sectionEl.querySelector(
+ `[data-child-id="${child.id}"]`,
+ );
+ if (!childEl) continue;
+
+ const childStatus = child.status?.toLowerCase() || "pending";
+ childEl.className = `tree-child ${childStatus}${childStatus === "running" ? " expanded" : childEl.classList.contains("expanded") ? " expanded" : ""}`;
+
+ const childStepBadge = childEl.querySelector(
+ ":scope > .tree-row .tree-step-badge",
+ );
+ if (childStepBadge)
+ childStepBadge.textContent = `Step ${child.progress?.current || 0}/${child.progress?.total || 1}`;
+
+ const childStatusEl = childEl.querySelector(
+ ":scope > .tree-row .tree-status",
+ );
+ if (childStatusEl) {
+ childStatusEl.className = `tree-status ${childStatus}`;
+ childStatusEl.textContent = child.status || "Pending";
+ }
+
+ // Update items
+ updateItems(childEl.querySelector(".tree-items"), [
+ ...(child.item_groups || []),
+ ...(child.items || []),
+ ]);
+ }
+ }
+
+ // Update section-level items
+ updateItems(sectionEl.querySelector(".tree-children"), [
+ ...(section.item_groups || []),
+ ...(section.items || []),
+ ]);
}
+}
- // Update terminal stats if they exist
+function updateItems(container, items) {
+ if (!container || !items) return;
+
+ for (const item of items) {
+ const itemId = item.id || item.name || item.display_name;
+ const itemEl = container.querySelector(`[data-item-id="${itemId}"]`);
+ if (!itemEl) {
+ // New item - append it
+ container.insertAdjacentHTML("beforeend", buildItemHTML(item));
+ continue;
+ }
+
+ const status = item.status?.toLowerCase() || "pending";
+ itemEl.className = `tree-item ${status}`;
+
+ const dot = itemEl.querySelector(".tree-item-dot");
+ if (dot) dot.className = `tree-item-dot ${status}`;
+
+ const check = itemEl.querySelector(".tree-item-check");
+ if (check) {
+ check.className = `tree-item-check ${status}`;
+ check.textContent = status === "completed" ? "✓" : "";
+ }
+
+ const durationEl = itemEl.querySelector(".tree-item-duration");
+ if (durationEl && item.duration_seconds) {
+ durationEl.textContent =
+ item.duration_seconds >= 60
+ ? `Duration: ${Math.floor(item.duration_seconds / 60)} min`
+ : `Duration: ${item.duration_seconds} sec`;
+ }
+ }
+}
+
+function updateTerminalStats(taskId, manifest) {
const processedEl = document.getElementById(`terminal-processed-${taskId}`);
- if (processedEl && manifest.terminal?.stats) {
- processedEl.textContent = manifest.terminal.stats.processed || "0";
+ if (processedEl && manifest.terminal?.stats?.processed) {
+ processedEl.textContent = manifest.terminal.stats.processed;
}
- console.log(
- "[Manifest] Rendered progress for task:",
- taskId,
- "completed:",
- manifest.progress?.current,
- "/",
- manifest.progress?.total,
- );
+ const etaEl = document.getElementById(`terminal-eta-${taskId}`);
+ if (etaEl && manifest.terminal?.stats?.eta) {
+ etaEl.textContent = manifest.terminal.stats.eta;
+ }
}
function escapeHtml(text) {