875 lines
30 KiB
JavaScript
875 lines
30 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function proc
|