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
This commit is contained in:
parent
4499bcda7a
commit
b51c542afa
8 changed files with 1659 additions and 573 deletions
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
BIN
ui/suite/public/favicon.ico
Normal file
BIN
ui/suite/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -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":
|
||||
|
|
|
|||
|
|
@ -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:';
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws/task-progress/${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 = new WebSocket(wsUrl);
|
||||
console.log("[ProgressPanel] Using singleton WebSocket for task:", taskId);
|
||||
|
||||
this.wsConnection.onopen = () => {
|
||||
console.log('Progress panel WebSocket connected');
|
||||
};
|
||||
|
||||
this.wsConnection.onmessage = (event) => {
|
||||
const data = JSON.parse(event.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);
|
||||
};
|
||||
|
||||
this.wsConnection.onerror = (error) => {
|
||||
console.error('Progress panel WebSocket error:', error);
|
||||
};
|
||||
// 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);
|
||||
}
|
||||
},
|
||||
|
||||
handleProgressUpdate(data) {
|
||||
if (data.type === 'manifest_update') {
|
||||
this.manifest = data.manifest;
|
||||
this.render();
|
||||
} else if (data.type === 'section_update') {
|
||||
// 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;
|
||||
}
|
||||
|
||||
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') {
|
||||
} 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') {
|
||||
} 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) {
|
||||
this.addTerminalLine(data.details, 'info');
|
||||
// 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");
|
||||
}
|
||||
},
|
||||
|
||||
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 decisionTotalEl = document.getElementById('decision-total');
|
||||
const decisionStepEl = document.getElementById("decision-step");
|
||||
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');
|
||||
sectionDiv.className = 'log-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');
|
||||
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;
|
||||
// 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;
|
||||
|
||||
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');
|
||||
childDiv.className = 'log-child';
|
||||
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) : '';
|
||||
// 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 = `
|
||||
<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');
|
||||
itemDiv.className = 'log-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 duration = item.duration_seconds
|
||||
? `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)) {
|
||||
this.appendTerminalLine(container, line.content, line.line_type || 'info');
|
||||
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');
|
||||
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');
|
||||
lineDiv.className = `terminal-line ${lineType || 'info'}`;
|
||||
const lineDiv = document.createElement("div");
|
||||
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 statusBadge = sectionEl.querySelector('.section-status-badge');
|
||||
const stepBadge = sectionEl.querySelector('.section-step-badge');
|
||||
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()}`;
|
||||
|
|
@ -359,8 +438,8 @@ const ProgressPanel = {
|
|||
stepBadge.textContent = `Step ${progress.current}/${progress.total}`;
|
||||
}
|
||||
|
||||
if (status === 'Running' || status === 'Completed') {
|
||||
sectionEl.classList.add('expanded');
|
||||
if (status === "Running" || status === "Completed") {
|
||||
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 check = itemEl.querySelector('.item-check');
|
||||
const durationEl = itemEl.querySelector('.item-duration');
|
||||
const dot = itemEl.querySelector(".item-dot");
|
||||
const check = itemEl.querySelector(".item-check");
|
||||
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(data => {
|
||||
.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);
|
||||
.catch((error) => {
|
||||
console.error("Failed to load manifest:", error);
|
||||
});
|
||||
},
|
||||
|
||||
destroy() {
|
||||
this.stopRuntimeCounter();
|
||||
if (this.wsConnection) {
|
||||
this.wsConnection.close();
|
||||
// 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');
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
setTimeout(function () {
|
||||
// Select the task and let tasks.js handle polling
|
||||
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")
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue