1263 lines
38 KiB
JavaScript
1263 lines
38 KiB
JavaScript
/* =============================================================================
|
||
AUTO TASK JAVASCRIPT - Intelligent Self-Executing Task Interface
|
||
Premium VIP Mode Functionality
|
||
============================================================================= */
|
||
|
||
// =============================================================================
|
||
// STATE MANAGEMENT
|
||
// =============================================================================
|
||
|
||
const AutoTaskState = {
|
||
currentFilter: "all",
|
||
tasks: [],
|
||
compiledPlan: null,
|
||
pendingDecisions: [],
|
||
pendingApprovals: [],
|
||
refreshInterval: null,
|
||
wsConnection: null,
|
||
};
|
||
|
||
// =============================================================================
|
||
// INITIALIZATION
|
||
// =============================================================================
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
initAutoTask();
|
||
});
|
||
|
||
function initAutoTask() {
|
||
// Initialize WebSocket for real-time updates
|
||
initWebSocket();
|
||
|
||
// Start auto-refresh
|
||
startAutoRefresh();
|
||
|
||
// Setup event listeners
|
||
setupEventListeners();
|
||
|
||
// Load initial stats
|
||
updateStats();
|
||
|
||
// Setup keyboard shortcuts
|
||
setupKeyboardShortcuts();
|
||
|
||
console.log("AutoTask initialized");
|
||
}
|
||
|
||
// =============================================================================
|
||
// WEBSOCKET CONNECTION
|
||
// =============================================================================
|
||
|
||
function initWebSocket() {
|
||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||
const wsUrl = `${protocol}//${window.location.host}/ws/autotask`;
|
||
|
||
try {
|
||
AutoTaskState.wsConnection = new WebSocket(wsUrl);
|
||
|
||
AutoTaskState.wsConnection.onopen = function () {
|
||
console.log("AutoTask WebSocket connected");
|
||
};
|
||
|
||
AutoTaskState.wsConnection.onmessage = function (event) {
|
||
handleWebSocketMessage(JSON.parse(event.data));
|
||
};
|
||
|
||
AutoTaskState.wsConnection.onclose = function () {
|
||
console.log("AutoTask WebSocket disconnected, reconnecting...");
|
||
setTimeout(initWebSocket, 5000);
|
||
};
|
||
|
||
AutoTaskState.wsConnection.onerror = function (error) {
|
||
console.error("AutoTask WebSocket error:", error);
|
||
};
|
||
} catch (e) {
|
||
console.warn("WebSocket not available, using polling");
|
||
}
|
||
}
|
||
|
||
function handleWebSocketMessage(data) {
|
||
switch (data.type) {
|
||
case "task_update":
|
||
updateTaskInList(data.task);
|
||
break;
|
||
case "step_progress":
|
||
updateStepProgress(data.taskId, data.step, data.progress);
|
||
break;
|
||
case "decision_required":
|
||
showDecisionNotification(data.decision);
|
||
break;
|
||
case "approval_required":
|
||
showApprovalNotification(data.approval);
|
||
break;
|
||
case "task_completed":
|
||
onTaskCompleted(data.task);
|
||
break;
|
||
case "task_failed":
|
||
onTaskFailed(data.task, data.error);
|
||
break;
|
||
case "stats_update":
|
||
updateStatsFromData(data.stats);
|
||
break;
|
||
}
|
||
}
|
||
|
||
// =============================================================================
|
||
// EVENT LISTENERS
|
||
// =============================================================================
|
||
|
||
function setupEventListeners() {
|
||
// Intent form submission
|
||
const intentForm = document.getElementById("intent-form");
|
||
if (intentForm) {
|
||
intentForm.addEventListener("htmx:afterSwap", function (event) {
|
||
if (event.detail.target.id === "compilation-result") {
|
||
onCompilationComplete(event);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Task list updates
|
||
const taskList = document.getElementById("task-list");
|
||
if (taskList) {
|
||
taskList.addEventListener("htmx:afterSwap", function () {
|
||
updateStats();
|
||
highlightPendingItems();
|
||
});
|
||
}
|
||
|
||
// Expand log entries on details open
|
||
document.addEventListener(
|
||
"toggle",
|
||
function (event) {
|
||
if (
|
||
event.target.classList.contains("execution-log") &&
|
||
event.target.open
|
||
) {
|
||
const taskId = event.target.closest(".autotask-item")?.dataset.taskId;
|
||
if (taskId) {
|
||
loadExecutionLogs(taskId);
|
||
}
|
||
}
|
||
},
|
||
true,
|
||
);
|
||
}
|
||
|
||
function setupKeyboardShortcuts() {
|
||
document.addEventListener("keydown", function (e) {
|
||
// Alt + N: Focus on intent input
|
||
if (e.altKey && e.key === "n") {
|
||
e.preventDefault();
|
||
document.getElementById("intent-input")?.focus();
|
||
}
|
||
|
||
// Alt + R: Refresh tasks
|
||
if (e.altKey && e.key === "r") {
|
||
e.preventDefault();
|
||
refreshTasks();
|
||
}
|
||
|
||
// Escape: Close any open modal
|
||
if (e.key === "Escape") {
|
||
closeAllModals();
|
||
}
|
||
|
||
// Alt + 1-4: Switch filters
|
||
if (e.altKey && e.key >= "1" && e.key <= "4") {
|
||
e.preventDefault();
|
||
const filters = ["all", "running", "approval", "decision"];
|
||
const index = parseInt(e.key) - 1;
|
||
const tabs = document.querySelectorAll(".filter-tab");
|
||
if (tabs[index]) {
|
||
tabs[index].click();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// =============================================================================
|
||
// AUTO REFRESH
|
||
// =============================================================================
|
||
|
||
function startAutoRefresh() {
|
||
// Refresh every 5 seconds
|
||
AutoTaskState.refreshInterval = setInterval(function () {
|
||
if (!document.hidden) {
|
||
updateStats();
|
||
}
|
||
}, 5000);
|
||
}
|
||
|
||
function stopAutoRefresh() {
|
||
if (AutoTaskState.refreshInterval) {
|
||
clearInterval(AutoTaskState.refreshInterval);
|
||
AutoTaskState.refreshInterval = null;
|
||
}
|
||
}
|
||
|
||
// =============================================================================
|
||
// STATS MANAGEMENT
|
||
// =============================================================================
|
||
|
||
function updateStats() {
|
||
fetch("/api/autotask/stats")
|
||
.then((response) => response.json())
|
||
.then((stats) => {
|
||
updateStatsFromData(stats);
|
||
})
|
||
.catch((error) => {
|
||
console.error("Failed to fetch stats:", error);
|
||
});
|
||
}
|
||
|
||
function updateStatsFromData(stats) {
|
||
// Header stats
|
||
document.getElementById("stat-running").textContent = stats.running || 0;
|
||
document.getElementById("stat-pending").textContent = stats.pending || 0;
|
||
document.getElementById("stat-completed").textContent = stats.completed || 0;
|
||
document.getElementById("stat-approval").textContent =
|
||
stats.pending_approval || 0;
|
||
|
||
// Filter counts
|
||
document.getElementById("count-all").textContent = stats.total || 0;
|
||
document.getElementById("count-running").textContent = stats.running || 0;
|
||
document.getElementById("count-approval").textContent =
|
||
stats.pending_approval || 0;
|
||
document.getElementById("count-decision").textContent =
|
||
stats.pending_decision || 0;
|
||
|
||
// Highlight if approvals needed
|
||
const approvalStat = document.querySelector(".stat-item.highlight");
|
||
if (approvalStat && stats.pending_approval > 0) {
|
||
approvalStat.classList.add("attention");
|
||
} else if (approvalStat) {
|
||
approvalStat.classList.remove("attention");
|
||
}
|
||
}
|
||
|
||
// =============================================================================
|
||
// TASK FILTERING
|
||
// =============================================================================
|
||
|
||
function filterTasks(filter, button) {
|
||
AutoTaskState.currentFilter = filter;
|
||
|
||
// Update active tab
|
||
document.querySelectorAll(".filter-tab").forEach((tab) => {
|
||
tab.classList.remove("active");
|
||
});
|
||
button.classList.add("active");
|
||
|
||
// Trigger HTMX request
|
||
htmx.ajax("GET", `/api/autotask/list?filter=${filter}`, {
|
||
target: "#task-list",
|
||
swap: "innerHTML",
|
||
});
|
||
}
|
||
|
||
function refreshTasks() {
|
||
const filter = AutoTaskState.currentFilter;
|
||
htmx.ajax("GET", `/api/autotask/list?filter=${filter}`, {
|
||
target: "#task-list",
|
||
swap: "innerHTML",
|
||
});
|
||
updateStats();
|
||
}
|
||
|
||
// =============================================================================
|
||
// COMPILATION HANDLING
|
||
// =============================================================================
|
||
|
||
function onCompilationComplete(event) {
|
||
const result = event.detail.target.querySelector(".compiled-plan");
|
||
if (result) {
|
||
// Scroll to result
|
||
result.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
|
||
// Store compiled plan
|
||
const planId = result.dataset?.planId;
|
||
if (planId) {
|
||
AutoTaskState.compiledPlan = planId;
|
||
}
|
||
|
||
// Syntax highlight the code
|
||
highlightBasicCode();
|
||
}
|
||
}
|
||
|
||
function highlightBasicCode() {
|
||
const codeBlocks = document.querySelectorAll(".code-preview code");
|
||
codeBlocks.forEach((block) => {
|
||
// Basic syntax highlighting for BASIC keywords
|
||
let html = block.innerHTML;
|
||
|
||
// Keywords
|
||
const keywords = [
|
||
"PLAN_START",
|
||
"PLAN_END",
|
||
"STEP",
|
||
"SET",
|
||
"GET",
|
||
"IF",
|
||
"THEN",
|
||
"ELSE",
|
||
"END IF",
|
||
"FOR EACH",
|
||
"NEXT",
|
||
"WHILE",
|
||
"WEND",
|
||
"TALK",
|
||
"HEAR",
|
||
"LLM",
|
||
"CREATE_TASK",
|
||
"RUN_PYTHON",
|
||
"RUN_JAVASCRIPT",
|
||
"RUN_BASH",
|
||
"USE_MCP",
|
||
"POST",
|
||
"GET",
|
||
"PUT",
|
||
"PATCH",
|
||
"DELETE HTTP",
|
||
"REQUIRE_APPROVAL",
|
||
"SIMULATE_IMPACT",
|
||
"AUDIT_LOG",
|
||
"SEND_MAIL",
|
||
"SAVE",
|
||
"UPDATE",
|
||
"INSERT",
|
||
"DELETE",
|
||
"FIND",
|
||
];
|
||
|
||
keywords.forEach((keyword) => {
|
||
const regex = new RegExp(`\\b${keyword}\\b`, "g");
|
||
html = html.replace(regex, `<span class="keyword">${keyword}</span>`);
|
||
});
|
||
|
||
// Comments
|
||
html = html.replace(/(\'[^\n]*)/g, '<span class="comment">$1</span>');
|
||
|
||
// Strings
|
||
html = html.replace(/("[^"]*")/g, '<span class="string">$1</span>');
|
||
|
||
// Numbers
|
||
html = html.replace(/\b(\d+)\b/g, '<span class="number">$1</span>');
|
||
|
||
block.innerHTML = html;
|
||
});
|
||
}
|
||
|
||
function copyGeneratedCode() {
|
||
const code = document.querySelector(".code-preview code")?.textContent;
|
||
if (code) {
|
||
navigator.clipboard
|
||
.writeText(code)
|
||
.then(() => {
|
||
showToast("Code copied to clipboard", "success");
|
||
})
|
||
.catch(() => {
|
||
showToast("Failed to copy code", "error");
|
||
});
|
||
}
|
||
}
|
||
|
||
function discardPlan() {
|
||
if (confirm("Are you sure you want to discard this plan?")) {
|
||
document.getElementById("compilation-result").innerHTML = "";
|
||
AutoTaskState.compiledPlan = null;
|
||
document.getElementById("intent-input").value = "";
|
||
document.getElementById("intent-input").focus();
|
||
}
|
||
}
|
||
|
||
function editPlan() {
|
||
// TODO: Implement plan editor
|
||
showToast("Plan editor coming soon!", "info");
|
||
}
|
||
|
||
// =============================================================================
|
||
// PLAN EXECUTION
|
||
// =============================================================================
|
||
|
||
function simulatePlan(planId) {
|
||
showSimulationModal();
|
||
|
||
fetch(`/api/autotask/simulate/${planId}`, {
|
||
method: "POST",
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
renderSimulationResult(result);
|
||
})
|
||
.catch((error) => {
|
||
document.getElementById("simulation-content").innerHTML = `
|
||
<div class="error-message">
|
||
<span class="error-icon">❌</span>
|
||
<p>Failed to simulate plan: ${error.message}</p>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
function executePlan(planId) {
|
||
const executionMode =
|
||
document.querySelector('[name="execution_mode"]')?.value ||
|
||
"semi-automatic";
|
||
const priority =
|
||
document.querySelector('[name="priority"]')?.value || "medium";
|
||
|
||
if (!confirm("Are you sure you want to execute this plan?")) {
|
||
return;
|
||
}
|
||
|
||
fetch("/api/autotask/execute", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
plan_id: planId,
|
||
execution_mode: executionMode,
|
||
priority: priority,
|
||
}),
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
showToast("Task execution started!", "success");
|
||
document.getElementById("compilation-result").innerHTML = "";
|
||
document.getElementById("intent-input").value = "";
|
||
refreshTasks();
|
||
} else {
|
||
showToast(`Failed to start execution: ${result.error}`, "error");
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
showToast(`Failed to execute plan: ${error.message}`, "error");
|
||
});
|
||
}
|
||
|
||
// =============================================================================
|
||
// TASK ACTIONS
|
||
// =============================================================================
|
||
|
||
function viewTaskDetails(taskId) {
|
||
window.location.href = `/suite/tasks/detail/${taskId}`;
|
||
}
|
||
|
||
function simulateTask(taskId) {
|
||
showSimulationModal();
|
||
|
||
fetch(`/api/autotask/${taskId}/simulate`, {
|
||
method: "POST",
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
result.task_id = taskId;
|
||
renderSimulationResult(result);
|
||
})
|
||
.catch((error) => {
|
||
document.getElementById("simulation-content").innerHTML = `
|
||
<div class="error-message">
|
||
<span class="error-icon">❌</span>
|
||
<p>Failed to simulate task: ${error.message}</p>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
function pauseTask(taskId) {
|
||
fetch(`/api/autotask/${taskId}/pause`, {
|
||
method: "POST",
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
showToast("Task paused", "success");
|
||
refreshTasks();
|
||
} else {
|
||
showToast(`Failed to pause task: ${result.error}`, "error");
|
||
}
|
||
});
|
||
}
|
||
|
||
function resumeTask(taskId) {
|
||
fetch(`/api/autotask/${taskId}/resume`, {
|
||
method: "POST",
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
showToast("Task resumed", "success");
|
||
refreshTasks();
|
||
} else {
|
||
showToast(`Failed to resume task: ${result.error}`, "error");
|
||
}
|
||
});
|
||
}
|
||
|
||
function cancelTask(taskId) {
|
||
if (
|
||
!confirm(
|
||
"Are you sure you want to cancel this task? This may not be reversible.",
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
|
||
fetch(`/api/autotask/${taskId}/cancel`, {
|
||
method: "POST",
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
showToast("Task cancelled", "success");
|
||
refreshTasks();
|
||
} else {
|
||
showToast(`Failed to cancel task: ${result.error}`, "error");
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateTaskInList(task) {
|
||
const taskElement = document.querySelector(`[data-task-id="${task.id}"]`);
|
||
if (taskElement) {
|
||
// Update status badge
|
||
const statusBadge = taskElement.querySelector(".task-status-badge");
|
||
if (statusBadge) {
|
||
statusBadge.className = `task-status-badge status-${task.status}`;
|
||
statusBadge.textContent = task.status.replace(/-/g, " ");
|
||
}
|
||
|
||
// Update progress
|
||
const progressFill = taskElement.querySelector(".progress-fill");
|
||
const progressText = taskElement.querySelector(".progress-text");
|
||
if (progressFill && progressText) {
|
||
progressFill.style.width = `${task.progress}%`;
|
||
progressText.textContent = `${task.current_step}/${task.total_steps} steps (${Math.round(task.progress)}%)`;
|
||
}
|
||
|
||
// Update data attribute
|
||
taskElement.dataset.status = task.status;
|
||
}
|
||
}
|
||
|
||
function updateStepProgress(taskId, step, progress) {
|
||
const taskElement = document.querySelector(`[data-task-id="${taskId}"]`);
|
||
if (taskElement) {
|
||
const currentStep = taskElement.querySelector(".current-step");
|
||
if (currentStep) {
|
||
currentStep.querySelector(".step-name").textContent =
|
||
`Step ${step.order}: ${step.name}`;
|
||
currentStep.querySelector(".step-status").textContent =
|
||
`${Math.round(progress)}%`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// =============================================================================
|
||
// DECISIONS
|
||
// =============================================================================
|
||
|
||
function viewDecisions(taskId) {
|
||
showDecisionModal();
|
||
|
||
fetch(`/api/autotask/${taskId}/decisions`)
|
||
.then((response) => response.json())
|
||
.then((decisions) => {
|
||
renderDecisions(taskId, decisions);
|
||
})
|
||
.catch((error) => {
|
||
document.getElementById("decision-content").innerHTML = `
|
||
<div class="error-message">
|
||
<span class="error-icon">❌</span>
|
||
<p>Failed to load decisions: ${error.message}</p>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
function renderDecisions(taskId, decisions) {
|
||
const container = document.getElementById("decision-content");
|
||
|
||
if (!decisions || decisions.length === 0) {
|
||
container.innerHTML = '<p class="no-decisions">No pending decisions.</p>';
|
||
return;
|
||
}
|
||
|
||
let html = '<div class="decisions-list">';
|
||
|
||
decisions.forEach((decision) => {
|
||
html += `
|
||
<div class="decision-item" data-decision-id="${decision.id}">
|
||
<h4>${decision.title}</h4>
|
||
<p class="decision-description">${decision.description}</p>
|
||
|
||
<div class="decision-options">
|
||
${decision.options
|
||
.map(
|
||
(opt) => `
|
||
<div class="decision-option ${opt.recommended ? "recommended" : ""}" data-option-id="${opt.id}">
|
||
<div class="option-header">
|
||
<input type="radio" name="decision_${decision.id}" value="${opt.id}" id="opt_${opt.id}" ${opt.recommended ? "checked" : ""}>
|
||
<label for="opt_${opt.id}">
|
||
<span class="option-label">${opt.label}</span>
|
||
${opt.recommended ? '<span class="recommended-badge">Recommended</span>' : ""}
|
||
</label>
|
||
</div>
|
||
<p class="option-description">${opt.description}</p>
|
||
<div class="option-impact">
|
||
<span class="impact-cost">💰 ${opt.estimated_impact.cost_change >= 0 ? "+" : ""}$${opt.estimated_impact.cost_change}</span>
|
||
<span class="impact-time">⏱️ ${opt.estimated_impact.time_change_minutes >= 0 ? "+" : ""}${opt.estimated_impact.time_change_minutes}m</span>
|
||
<span class="impact-risk risk-${opt.risk_level.toLowerCase()}">⚠️ ${opt.risk_level}</span>
|
||
</div>
|
||
</div>
|
||
`,
|
||
)
|
||
.join("")}
|
||
</div>
|
||
|
||
<div class="decision-actions">
|
||
<button class="btn-secondary" onclick="skipDecision('${taskId}', '${decision.id}')">Skip</button>
|
||
<button class="btn-primary" onclick="submitDecision('${taskId}', '${decision.id}')">Submit Decision</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
html += "</div>";
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
function submitDecision(taskId, decisionId) {
|
||
const selectedOption = document.querySelector(
|
||
`input[name="decision_${decisionId}"]:checked`,
|
||
)?.value;
|
||
|
||
if (!selectedOption) {
|
||
showToast("Please select an option", "warning");
|
||
return;
|
||
}
|
||
|
||
fetch(`/api/autotask/${taskId}/decide`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
decision_id: decisionId,
|
||
option_id: selectedOption,
|
||
}),
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
showToast("Decision submitted", "success");
|
||
closeDecisionModal();
|
||
refreshTasks();
|
||
} else {
|
||
showToast(`Failed to submit decision: ${result.error}`, "error");
|
||
}
|
||
});
|
||
}
|
||
|
||
function skipDecision(taskId, decisionId) {
|
||
if (
|
||
!confirm(
|
||
"Are you sure you want to skip this decision? The default option will be used.",
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
|
||
fetch(`/api/autotask/${taskId}/decide`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
decision_id: decisionId,
|
||
skip: true,
|
||
}),
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
showToast("Decision skipped", "info");
|
||
closeDecisionModal();
|
||
refreshTasks();
|
||
} else {
|
||
showToast(`Failed to skip decision: ${result.error}`, "error");
|
||
}
|
||
});
|
||
}
|
||
|
||
function showDecisionNotification(decision) {
|
||
showToast(`Decision required: ${decision.title}`, "warning", 10000);
|
||
updateStats();
|
||
}
|
||
|
||
// =============================================================================
|
||
// APPROVALS
|
||
// =============================================================================
|
||
|
||
function viewApprovals(taskId) {
|
||
showApprovalModal();
|
||
|
||
fetch(`/api/autotask/${taskId}/approvals`)
|
||
.then((response) => response.json())
|
||
.then((approvals) => {
|
||
renderApprovals(taskId, approvals);
|
||
})
|
||
.catch((error) => {
|
||
document.getElementById("approval-content").innerHTML = `
|
||
<div class="error-message">
|
||
<span class="error-icon">❌</span>
|
||
<p>Failed to load approvals: ${error.message}</p>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
function renderApprovals(taskId, approvals) {
|
||
const container = document.getElementById("approval-content");
|
||
|
||
if (!approvals || approvals.length === 0) {
|
||
container.innerHTML = '<p class="no-approvals">No pending approvals.</p>';
|
||
return;
|
||
}
|
||
|
||
let html = '<div class="approvals-list">';
|
||
|
||
approvals.forEach((approval) => {
|
||
html += `
|
||
<div class="approval-item" data-approval-id="${approval.id}">
|
||
<div class="approval-header">
|
||
<span class="approval-type type-${approval.approval_type.toLowerCase().replace(/_/g, "-")}">${approval.approval_type.replace(/_/g, " ")}</span>
|
||
<span class="approval-risk risk-${approval.risk_level.toLowerCase()}">${approval.risk_level} Risk</span>
|
||
</div>
|
||
|
||
<h4>${approval.title}</h4>
|
||
<p class="approval-description">${approval.description}</p>
|
||
|
||
<div class="approval-impact">
|
||
<h5>Impact Summary</h5>
|
||
<p>${approval.impact_summary}</p>
|
||
</div>
|
||
|
||
${
|
||
approval.simulation_result
|
||
? `
|
||
<div class="simulation-preview">
|
||
<h5>Simulation Result</h5>
|
||
<div class="simulation-summary">
|
||
<span class="sim-risk risk-${approval.simulation_result.risk_level.toLowerCase()}">Risk: ${approval.simulation_result.risk_level}</span>
|
||
<span class="sim-confidence">Confidence: ${Math.round(approval.simulation_result.confidence * 100)}%</span>
|
||
</div>
|
||
</div>
|
||
`
|
||
: ""
|
||
}
|
||
|
||
<div class="approval-meta">
|
||
<span>Step: ${approval.step_name || "N/A"}</span>
|
||
<span>Expires: ${formatRelativeTime(approval.expires_at)}</span>
|
||
<span>Default: ${approval.default_action}</span>
|
||
</div>
|
||
|
||
<div class="approval-actions">
|
||
<button class="btn-reject" onclick="rejectApproval('${taskId}', '${approval.id}')">
|
||
<span>❌</span> Reject
|
||
</button>
|
||
<button class="btn-defer" onclick="deferApproval('${taskId}', '${approval.id}')">
|
||
<span>⏸️</span> Defer
|
||
</button>
|
||
<button class="btn-approve" onclick="approveApproval('${taskId}', '${approval.id}')">
|
||
<span>✅</span> Approve
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
html += "</div>";
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
function approveApproval(taskId, approvalId) {
|
||
submitApprovalDecision(taskId, approvalId, "approve");
|
||
}
|
||
|
||
function rejectApproval(taskId, approvalId) {
|
||
if (!confirm("Are you sure you want to reject this action?")) {
|
||
return;
|
||
}
|
||
submitApprovalDecision(taskId, approvalId, "reject");
|
||
}
|
||
|
||
function deferApproval(taskId, approvalId) {
|
||
submitApprovalDecision(taskId, approvalId, "defer");
|
||
}
|
||
|
||
function submitApprovalDecision(taskId, approvalId, action) {
|
||
fetch(`/api/autotask/${taskId}/approve`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
approval_id: approvalId,
|
||
action: action,
|
||
}),
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
const messages = {
|
||
approve: "Approval granted",
|
||
reject: "Approval rejected",
|
||
defer: "Approval deferred",
|
||
};
|
||
showToast(messages[action], "success");
|
||
closeApprovalModal();
|
||
refreshTasks();
|
||
} else {
|
||
showToast(`Failed to ${action}: ${result.error}`, "error");
|
||
}
|
||
});
|
||
}
|
||
|
||
function showApprovalNotification(approval) {
|
||
showToast(`Approval required: ${approval.title}`, "warning", 10000);
|
||
updateStats();
|
||
}
|
||
|
||
// =============================================================================
|
||
// SIMULATION
|
||
// =============================================================================
|
||
|
||
function renderSimulationResult(result) {
|
||
const container = document.getElementById("simulation-content");
|
||
|
||
const statusIcon = result.success ? "✅" : "⚠️";
|
||
const statusText = result.success
|
||
? "Simulation Successful"
|
||
: "Simulation Found Issues";
|
||
|
||
let html = `
|
||
<div class="simulation-result">
|
||
<div class="simulation-header">
|
||
<div class="simulation-status status-${result.success}">
|
||
<span class="status-icon">${statusIcon}</span>
|
||
<span class="status-text">${statusText}</span>
|
||
</div>
|
||
<div class="simulation-confidence">
|
||
Confidence: ${Math.round(result.confidence * 100)}%
|
||
</div>
|
||
</div>
|
||
|
||
<div class="impact-overview">
|
||
<h4>Impact Assessment</h4>
|
||
<div class="impact-grid">
|
||
<div class="impact-card">
|
||
<span class="impact-icon">💾</span>
|
||
<span class="impact-label">Data Impact</span>
|
||
<span class="impact-value">${result.impact.data_impact.records_modified} records modified</span>
|
||
</div>
|
||
<div class="impact-card">
|
||
<span class="impact-icon">💰</span>
|
||
<span class="impact-label">Cost Impact</span>
|
||
<span class="impact-value">$${result.impact.cost_impact.total_estimated_cost.toFixed(2)}</span>
|
||
</div>
|
||
<div class="impact-card">
|
||
<span class="impact-icon">⏱️</span>
|
||
<span class="impact-label">Time Impact</span>
|
||
<span class="impact-value">${formatDuration(result.impact.time_impact.estimated_duration_seconds)}</span>
|
||
</div>
|
||
<div class="impact-card risk-${result.impact.security_impact.risk_level.toLowerCase()}">
|
||
<span class="impact-icon">🔒</span>
|
||
<span class="impact-label">Security Impact</span>
|
||
<span class="impact-value">${result.impact.security_impact.risk_level}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-outcomes">
|
||
<h4>Step-by-Step Predictions</h4>
|
||
<div class="outcomes-list">
|
||
${result.step_outcomes
|
||
.map(
|
||
(step) => `
|
||
<div class="outcome-item ${step.would_succeed ? "success" : "warning"}">
|
||
<span class="outcome-icon">${step.would_succeed ? "✅" : "⚠️"}</span>
|
||
<span class="outcome-name">${step.step_name}</span>
|
||
<span class="outcome-probability">${Math.round(step.success_probability * 100)}% success</span>
|
||
</div>
|
||
`,
|
||
)
|
||
.join("")}
|
||
</div>
|
||
</div>
|
||
|
||
${
|
||
result.side_effects.length > 0
|
||
? `
|
||
<div class="side-effects">
|
||
<h4>⚠️ Potential Side Effects</h4>
|
||
<div class="side-effects-list">
|
||
${result.side_effects
|
||
.map(
|
||
(effect) => `
|
||
<div class="side-effect-item severity-${effect.severity.toLowerCase()}">
|
||
<span class="effect-description">${effect.description}</span>
|
||
${effect.mitigation ? `<span class="effect-mitigation">Mitigation: ${effect.mitigation}</span>` : ""}
|
||
</div>
|
||
`,
|
||
)
|
||
.join("")}
|
||
</div>
|
||
</div>
|
||
`
|
||
: ""
|
||
}
|
||
|
||
${
|
||
result.recommendations.length > 0
|
||
? `
|
||
<div class="recommendations">
|
||
<h4>💡 Recommendations</h4>
|
||
<div class="recommendations-list">
|
||
${result.recommendations
|
||
.map(
|
||
(rec) => `
|
||
<div class="recommendation-item">
|
||
<span class="rec-description">${rec.description}</span>
|
||
${rec.action ? `<button class="btn-apply-rec" onclick="applyRecommendation('${rec.id}')">${rec.action}</button>` : ""}
|
||
</div>
|
||
`,
|
||
)
|
||
.join("")}
|
||
</div>
|
||
</div>
|
||
`
|
||
: ""
|
||
}
|
||
|
||
<div class="simulation-actions">
|
||
<button class="btn-secondary" onclick="closeSimulationModal()">
|
||
<span>↩️</span> Back
|
||
</button>
|
||
<button class="btn-primary" onclick="proceedAfterSimulation('${result.task_id}')" ${result.impact.risk_score > 0.8 ? "disabled" : ""}>
|
||
<span>🚀</span> Proceed with Execution
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
// =============================================================================
|
||
// MODAL FUNCTIONS
|
||
// =============================================================================
|
||
|
||
function showSimulationModal() {
|
||
const modal = document.getElementById("simulation-modal");
|
||
if (modal) {
|
||
modal.style.display = "flex";
|
||
document.body.classList.add("modal-open");
|
||
// Show loading state
|
||
document.getElementById("simulation-content").innerHTML = `
|
||
<div class="loading-state">
|
||
<div class="spinner"></div>
|
||
<p>Running impact simulation...</p>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
function closeSimulationModal() {
|
||
const modal = document.getElementById("simulation-modal");
|
||
if (modal) {
|
||
modal.style.display = "none";
|
||
document.body.classList.remove("modal-open");
|
||
}
|
||
}
|
||
|
||
function showDecisionModal() {
|
||
const modal = document.getElementById("decision-modal");
|
||
if (modal) {
|
||
modal.style.display = "flex";
|
||
document.body.classList.add("modal-open");
|
||
// Show loading state
|
||
document.getElementById("decision-content").innerHTML = `
|
||
<div class="loading-state">
|
||
<div class="spinner"></div>
|
||
<p>Loading decisions...</p>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
function closeDecisionModal() {
|
||
const modal = document.getElementById("decision-modal");
|
||
if (modal) {
|
||
modal.style.display = "none";
|
||
document.body.classList.remove("modal-open");
|
||
}
|
||
}
|
||
|
||
function showApprovalModal() {
|
||
const modal = document.getElementById("approval-modal");
|
||
if (modal) {
|
||
modal.style.display = "flex";
|
||
document.body.classList.add("modal-open");
|
||
// Show loading state
|
||
document.getElementById("approval-content").innerHTML = `
|
||
<div class="loading-state">
|
||
<div class="spinner"></div>
|
||
<p>Loading approvals...</p>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
function closeApprovalModal() {
|
||
const modal = document.getElementById("approval-modal");
|
||
if (modal) {
|
||
modal.style.display = "none";
|
||
document.body.classList.remove("modal-open");
|
||
}
|
||
}
|
||
|
||
function closeAllModals() {
|
||
closeSimulationModal();
|
||
closeDecisionModal();
|
||
closeApprovalModal();
|
||
}
|
||
|
||
// =============================================================================
|
||
// SIMULATION ACTIONS
|
||
// =============================================================================
|
||
|
||
function proceedAfterSimulation(taskId) {
|
||
closeSimulationModal();
|
||
|
||
if (!taskId) {
|
||
showToast("No task ID provided", "error");
|
||
return;
|
||
}
|
||
|
||
fetch(`/api/autotask/${taskId}/execute`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
confirmed: true,
|
||
}),
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
showToast("Task execution started!", "success");
|
||
refreshTasks();
|
||
} else {
|
||
showToast(result.error || "Failed to start execution", "error");
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.error("Failed to proceed after simulation:", error);
|
||
showToast("Failed to start execution", "error");
|
||
});
|
||
}
|
||
|
||
function applyRecommendation(recId) {
|
||
fetch(`/api/autotask/recommendations/${recId}/apply`, {
|
||
method: "POST",
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
if (result.success) {
|
||
showToast("Recommendation applied", "success");
|
||
// Re-run simulation to show updated results
|
||
const taskId =
|
||
document.querySelector(".simulation-result")?.dataset?.taskId;
|
||
if (taskId) {
|
||
simulateTask(taskId);
|
||
}
|
||
} else {
|
||
showToast(result.error || "Failed to apply recommendation", "error");
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.error("Failed to apply recommendation:", error);
|
||
showToast("Failed to apply recommendation", "error");
|
||
});
|
||
}
|
||
|
||
// =============================================================================
|
||
// TOAST NOTIFICATIONS
|
||
// =============================================================================
|
||
|
||
function showToast(message, type = "info") {
|
||
// Get or create toast container
|
||
let container = document.getElementById("toast-container");
|
||
if (!container) {
|
||
container = document.createElement("div");
|
||
container.id = "toast-container";
|
||
container.className = "toast-container";
|
||
document.body.appendChild(container);
|
||
}
|
||
|
||
// Create toast element
|
||
const toast = document.createElement("div");
|
||
toast.className = `toast toast-${type}`;
|
||
|
||
const icons = {
|
||
success: "✅",
|
||
error: "❌",
|
||
warning: "⚠️",
|
||
info: "ℹ️",
|
||
};
|
||
|
||
toast.innerHTML = `
|
||
<span class="toast-icon">${icons[type] || icons.info}</span>
|
||
<span class="toast-message">${message}</span>
|
||
<button class="toast-close" onclick="this.parentElement.remove()">×</button>
|
||
`;
|
||
|
||
container.appendChild(toast);
|
||
|
||
// Auto-remove after 5 seconds
|
||
setTimeout(() => {
|
||
toast.classList.add("toast-fade-out");
|
||
setTimeout(() => {
|
||
toast.remove();
|
||
}, 300);
|
||
}, 5000);
|
||
}
|
||
|
||
// =============================================================================
|
||
// UTILITY FUNCTIONS
|
||
// =============================================================================
|
||
|
||
function formatDuration(seconds) {
|
||
if (seconds < 60) {
|
||
return `${Math.round(seconds)}s`;
|
||
} else if (seconds < 3600) {
|
||
const minutes = Math.floor(seconds / 60);
|
||
const secs = Math.round(seconds % 60);
|
||
return `${minutes}m ${secs}s`;
|
||
} else {
|
||
const hours = Math.floor(seconds / 3600);
|
||
const minutes = Math.floor((seconds % 3600) / 60);
|
||
return `${hours}h ${minutes}m`;
|
||
}
|
||
}
|
||
|
||
function formatRelativeTime(dateString) {
|
||
if (!dateString) return "N/A";
|
||
|
||
const date = new Date(dateString);
|
||
const now = new Date();
|
||
const diffMs = date - now;
|
||
const diffSeconds = Math.floor(diffMs / 1000);
|
||
const diffMinutes = Math.floor(diffSeconds / 60);
|
||
const diffHours = Math.floor(diffMinutes / 60);
|
||
const diffDays = Math.floor(diffHours / 24);
|
||
|
||
if (diffMs < 0) {
|
||
// Past
|
||
const absDays = Math.abs(diffDays);
|
||
const absHours = Math.abs(diffHours);
|
||
const absMinutes = Math.abs(diffMinutes);
|
||
|
||
if (absDays > 0) return `${absDays}d ago`;
|
||
if (absHours > 0) return `${absHours}h ago`;
|
||
if (absMinutes > 0) return `${absMinutes}m ago`;
|
||
return "just now";
|
||
} else {
|
||
// Future
|
||
if (diffDays > 0) return `in ${diffDays}d`;
|
||
if (diffHours > 0) return `in ${diffHours}h`;
|
||
if (diffMinutes > 0) return `in ${diffMinutes}m`;
|
||
return "soon";
|
||
}
|
||
}
|
||
|
||
// =============================================================================
|
||
// TASK LIFECYCLE HANDLERS
|
||
// =============================================================================
|
||
|
||
function onTaskCompleted(task) {
|
||
showToast(`Task completed: ${task.title || task.id}`, "success");
|
||
updateTaskInList(task);
|
||
updateStats();
|
||
}
|
||
|
||
function onTaskFailed(task, error) {
|
||
showToast(`Task failed: ${task.title || task.id} - ${error}`, "error");
|
||
updateTaskInList(task);
|
||
updateStats();
|
||
}
|
||
|
||
function highlightPendingItems() {
|
||
// Highlight tasks requiring attention
|
||
document.querySelectorAll(".autotask-item").forEach((item) => {
|
||
const status = item.dataset.status;
|
||
if (status === "pending-approval" || status === "pending-decision") {
|
||
item.classList.add("attention-required");
|
||
} else {
|
||
item.classList.remove("attention-required");
|
||
}
|
||
});
|
||
}
|
||
|
||
function loadExecutionLogs(taskId) {
|
||
const logContainer = document.querySelector(
|
||
`[data-task-id="${taskId}"] .log-entries`,
|
||
);
|
||
if (!logContainer || logContainer.dataset.loaded === "true") {
|
||
return;
|
||
}
|
||
|
||
logContainer.innerHTML = `
|
||
<div class="loading-state">
|
||
<div class="spinner"></div>
|
||
<p>Loading logs...</p>
|
||
</div>
|
||
`;
|
||
|
||
fetch(`/api/autotask/${taskId}/logs`)
|
||
.then((response) => response.json())
|
||
.then((logs) => {
|
||
if (!logs || logs.length === 0) {
|
||
logContainer.innerHTML =
|
||
"<p class='no-logs'>No execution logs yet.</p>";
|
||
} else {
|
||
logContainer.innerHTML = logs
|
||
.map(
|
||
(log) => `
|
||
<div class="log-entry log-${log.level.toLowerCase()}">
|
||
<span class="log-time">${new Date(log.timestamp).toLocaleTimeString()}</span>
|
||
<span class="log-level">${log.level}</span>
|
||
<span class="log-message">${log.message}</span>
|
||
</div>
|
||
`,
|
||
)
|
||
.join("");
|
||
}
|
||
logContainer.dataset.loaded = "true";
|
||
})
|
||
.catch((error) => {
|
||
logContainer.innerHTML = `
|
||
<div class="error-message">
|
||
<span class="error-icon">❌</span>
|
||
<p>Failed to load logs: ${error.message}</p>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|