2025-12-12 12:33:45 -03:00
< div class = "autotask-container" >
<!-- Header -->
< div class = "autotask-header" >
< div class = "header-content" >
< h1 class = "autotask-title" >
< span class = "autotask-icon" > ⚡< / span >
Auto Tasks
< span class = "beta-badge" > PREMIUM< / span >
< / h1 >
< p class = "autotask-subtitle" > Intelligent self-executing tasks powered by AI< / p >
< / div >
< div class = "header-stats" id = "autotask-stats" >
< span class = "stat-item" >
< span class = "stat-value" id = "stat-running" > 0< / span >
< span class = "stat-label" > Running< / span >
< / span >
< span class = "stat-item" >
< span class = "stat-value" id = "stat-pending" > 0< / span >
< span class = "stat-label" > Pending< / span >
< / span >
< span class = "stat-item" >
< span class = "stat-value" id = "stat-completed" > 0< / span >
< span class = "stat-label" > Completed< / span >
< / span >
< span class = "stat-item highlight" >
< span class = "stat-value" id = "stat-approval" > 0< / span >
< span class = "stat-label" > Need Approval< / span >
< / span >
< / div >
< / div >
<!-- Intent Input Section -->
< div class = "intent-section" >
< div class = "intent-header" >
< span class = "section-icon" > 💡< / span >
< h2 > What would you like to accomplish?< / h2 >
< / div >
2025-12-28 11:50:52 -03:00
< form class = "intent-form" id = "intent-form" hx-post = "/api/autotask/create" hx-ext = "json-enc" hx-target = "#compilation-result" hx-indicator = "#compile-spinner" >
2025-12-12 12:33:45 -03:00
< div class = "intent-input-wrapper" >
< textarea
name="intent"
id="intent-input"
class="intent-input"
placeholder="Describe your task in natural language... Examples: • Make a financial CRM for Deloitte with client management and reporting • Create a website that collects leads and sends them to Salesforce • Build an automated email campaign for product launch • Analyze sales data and generate weekly reports"
rows="4"
required
>< / textarea >
< div class = "intent-actions" >
< select name = "execution_mode" class = "execution-mode-select" >
< option value = "semi-automatic" > Semi-Automatic (Recommended)< / option >
< option value = "supervised" > Supervised (Step-by-step)< / option >
< option value = "fully-automatic" > Fully Automatic< / option >
< option value = "dry-run" > Dry Run (Simulate Only)< / option >
< / select >
< select name = "priority" class = "priority-select" >
< option value = "medium" > Medium Priority< / option >
< option value = "critical" > Critical< / option >
< option value = "high" > High< / option >
< option value = "low" > Low< / option >
< option value = "background" > Background< / option >
< / select >
2025-12-27 22:38:37 -03:00
< button type = "submit" class = "btn-create" >
2025-12-12 12:33:45 -03:00
< span class = "btn-icon" > 🚀< / span >
2025-12-27 22:38:37 -03:00
Create & Execute
2025-12-12 12:33:45 -03:00
< span class = "spinner" id = "compile-spinner" > < / span >
< / button >
< / div >
< / div >
< / form >
<!-- Compilation Result -->
< div id = "compilation-result" class = "compilation-result" > < / div >
< / div >
<!-- Active Tasks Section -->
< div class = "tasks-section" >
< div class = "section-header" >
< div class = "section-title" >
< span class = "section-icon" > 📋< / span >
< h2 > Active Tasks< / h2 >
< / div >
< div class = "section-actions" >
< div class = "filter-tabs" >
< button class = "filter-tab active" data-filter = "all" onclick = "filterTasks('all', this)" >
All < span class = "count" id = "count-all" > 0< / span >
< / button >
< button class = "filter-tab" data-filter = "running" onclick = "filterTasks('running', this)" >
Running < span class = "count" id = "count-running" > 0< / span >
< / button >
< button class = "filter-tab" data-filter = "approval" onclick = "filterTasks('approval', this)" >
Need Approval < span class = "count" id = "count-approval" > 0< / span >
< / button >
< button class = "filter-tab" data-filter = "decision" onclick = "filterTasks('decision', this)" >
Decisions < span class = "count" id = "count-decision" > 0< / span >
< / button >
< / div >
< button class = "btn-refresh" onclick = "refreshTasks()" title = "Refresh" >
< span > 🔄< / span >
< / button >
< / div >
< / div >
<!-- Task List -->
< div class = "task-list" id = "task-list" hx-get = "/api/autotask/list" hx-trigger = "load, every 5s" hx-swap = "innerHTML" >
< div class = "loading-placeholder" >
< div class = "spinner-large" > < / div >
< p > Loading tasks...< / p >
< / div >
< / div >
< / div >
<!-- Pending Decisions Modal -->
< div class = "modal" id = "decision-modal" style = "display: none;" >
< div class = "modal-backdrop" onclick = "closeDecisionModal()" > < / div >
< div class = "modal-content decision-modal-content" >
< div class = "modal-header" >
< h3 > < span class = "modal-icon" > 🤔< / span > Decision Required< / h3 >
< button class = "modal-close" onclick = "closeDecisionModal()" > × < / button >
< / div >
< div class = "modal-body" id = "decision-content" >
<!-- Decision content loaded dynamically -->
< / div >
< / div >
< / div >
<!-- Approval Modal -->
< div class = "modal" id = "approval-modal" style = "display: none;" >
< div class = "modal-backdrop" onclick = "closeApprovalModal()" > < / div >
< div class = "modal-content approval-modal-content" >
< div class = "modal-header" >
< h3 > < span class = "modal-icon" > ✅< / span > Approval Required< / h3 >
< button class = "modal-close" onclick = "closeApprovalModal()" > × < / button >
< / div >
< div class = "modal-body" id = "approval-content" >
<!-- Approval content loaded dynamically -->
< / div >
< / div >
< / div >
<!-- Simulation Preview Modal -->
< div class = "modal" id = "simulation-modal" style = "display: none;" >
< div class = "modal-backdrop" onclick = "closeSimulationModal()" > < / div >
< div class = "modal-content simulation-modal-content" >
< div class = "modal-header" >
< h3 > < span class = "modal-icon" > 🔮< / span > Impact Simulation< / h3 >
< button class = "modal-close" onclick = "closeSimulationModal()" > × < / button >
< / div >
< div class = "modal-body" id = "simulation-content" >
<!-- Simulation content loaded dynamically -->
< / div >
< / div >
< / div >
< / div >
<!-- Task Item Template (for reference, actual rendering done server - side) -->
< template id = "task-item-template" >
< div class = "autotask-item" data-task-id = "${id}" data-status = "${status}" >
< div class = "task-header" >
< div class = "task-info" >
< div class = "task-status-badge status-${status}" > ${status}< / div >
< h4 class = "task-title" > ${title}< / h4 >
< span class = "task-priority priority-${priority}" > ${priority}< / span >
< / div >
< div class = "task-meta" >
< span class = "task-time" title = "Created" > ${created_at}< / span >
< span class = "task-mode" > ${execution_mode}< / span >
< / div >
< / div >
< div class = "task-progress" >
< div class = "progress-bar" >
< div class = "progress-fill" style = "width: ${progress}%" > < / div >
< / div >
< span class = "progress-text" > ${current_step}/${total_steps} steps (${progress}%)< / span >
< / div >
< div class = "task-details" >
< p class = "task-intent" > ${intent}< / p >
<!-- Current Step Info -->
< div class = "current-step" style = "display: ${show_current_step}" >
< div class = "step-indicator" >
< span class = "step-icon" > ▶️< / span >
< span class = "step-name" > Step ${current_step}: ${current_step_name}< / span >
< / div >
< div class = "step-status" > ${current_step_status}< / div >
< / div >
<!-- Pending Decision Alert -->
< div class = "pending-decision-alert" style = "display: ${show_decision}" >
< span class = "alert-icon" > 🤔< / span >
< span class = "alert-text" > ${decision_count} decision(s) pending< / span >
< button class = "btn-view-decisions" onclick = "viewDecisions('${id}')" > View & Decide< / button >
< / div >
<!-- Pending Approval Alert -->
< div class = "pending-approval-alert" style = "display: ${show_approval}" >
< span class = "alert-icon" > ⚠️< / span >
< span class = "alert-text" > ${approval_count} approval(s) required< / span >
< button class = "btn-view-approvals" onclick = "viewApprovals('${id}')" > Review & Approve< / button >
< / div >
<!-- Risk Summary -->
< div class = "risk-summary" style = "display: ${show_risk}" >
< span class = "risk-icon risk-${risk_level}" > ⚡< / span >
< span class = "risk-text" > Risk Level: ${risk_level}< / span >
< / div >
< / div >
< div class = "task-actions" >
< button class = "btn-action btn-view" onclick = "viewTaskDetails('${id}')" title = "View Details" >
< span > 👁️< / span > Details
< / button >
< button class = "btn-action btn-simulate" onclick = "simulateTask('${id}')" title = "Simulate Impact" style = "display: ${show_simulate}" >
< span > 🔮< / span > Simulate
< / button >
< button class = "btn-action btn-pause" onclick = "pauseTask('${id}')" title = "Pause" style = "display: ${show_pause}" >
< span > ⏸️< / span > Pause
< / button >
< button class = "btn-action btn-resume" onclick = "resumeTask('${id}')" title = "Resume" style = "display: ${show_resume}" >
< span > ▶️< / span > Resume
< / button >
< button class = "btn-action btn-cancel" onclick = "cancelTask('${id}')" title = "Cancel" >
< span > ❌< / span > Cancel
< / button >
< / div >
<!-- Execution Log (expandable) -->
< details class = "execution-log" >
< summary > Execution Log (${log_count} entries)< / summary >
< div class = "log-entries" id = "log-${id}" >
<!-- Log entries loaded on expand -->
< / div >
< / details >
< / div >
< / template >
<!-- Compilation Result Template -->
< template id = "compilation-result-template" >
< div class = "compiled-plan" >
< div class = "plan-header" >
< div class = "plan-info" >
< h3 > ${plan_name}< / h3 >
< p > ${plan_description}< / p >
< / div >
< div class = "plan-meta" >
< span class = "confidence-badge confidence-${confidence_level}" >
Confidence: ${confidence}%
< / span >
< span class = "risk-badge risk-${risk_level}" >
Risk: ${risk_level}
< / span >
< span class = "duration-badge" >
Est. Duration: ${estimated_duration}
< / span >
< span class = "cost-badge" >
Est. Cost: $${estimated_cost}
< / span >
< / div >
< / div >
<!-- Alternatives (if ambiguous) -->
< div class = "alternatives-section" style = "display: ${show_alternatives}" >
< h4 > 🔀 Alternative Approaches< / h4 >
< p class = "alternatives-note</h4>" > The intent was ambiguous. Please choose your preferred approach:< / p >
< div class = "alternatives-list" >
${alternatives_html}
< / div >
< / div >
<!-- Execution Plan Steps -->
< div class = "plan-steps" >
< h4 > 📋 Execution Plan (${step_count} steps)< / h4 >
< div class = "steps-list" >
${steps_html}
< / div >
< / div >
<!-- Resource Estimates -->
< div class = "resource-estimates" >
< h4 > 📊 Resource Estimates< / h4 >
< div class = "estimates-grid" >
< div class = "estimate-item" >
< span class = "estimate-icon" > 💻< / span >
< span class = "estimate-label" > Compute< / span >
< span class = "estimate-value" > ${compute_hours} hours< / span >
< / div >
< div class = "estimate-item" >
< span class = "estimate-icon" > 💾< / span >
< span class = "estimate-label" > Storage< / span >
< span class = "estimate-value" > ${storage_gb} GB< / span >
< / div >
< div class = "estimate-item" >
< span class = "estimate-icon" > 🌐< / span >
< span class = "estimate-label" > API Calls< / span >
< span class = "estimate-value" > ${api_calls}< / span >
< / div >
< div class = "estimate-item" >
< span class = "estimate-icon" > 🤖< / span >
< span class = "estimate-label" > LLM Tokens< / span >
< span class = "estimate-value" > ${llm_tokens}< / span >
< / div >
< / div >
< / div >
<!-- MCP Servers & APIs -->
< div class = "integrations-section" style = "display: ${show_integrations}" >
< h4 > < / h4 > 🔌 Integrations Required< / h4 >
< div class = "integrations-list" >
< div class = "mcp-servers" style = "display: ${show_mcp}" >
< h5 > MCP Servers< / h5 >
< div class = "integration-tags" > ${mcp_servers_html}< / div >
< / div >
< div class = "external-apis" style = "display: ${show_apis}" >
< h5 > External APIs< / h5 >
< div class = "integration-tags" > ${external_apis_html}< / div >
< / div >
< / div >
< / div >
<!-- Risk Assessment -->
< div class = "risk-assessment" style = "display: ${show_risks}" >
< h4 > ⚠️ Risk Assessment< / h4 >
< div class = "risks-list" >
${risks_html}
< / div >
< / div >
<!-- Generated BASIC Code (collapsible) -->
< details class = "generated-code" >
< summary > 📝 Generated BASIC Program (${code_lines} lines)< / summary >
< pre class = "code-preview" > < code > ${basic_program}< / code > < / pre >
< button class = "btn-copy-code" onclick = "copyGeneratedCode()" > 📋 Copy Code< / button >
< / details >
<!-- Action Buttons -->
< div class = "plan-actions" >
< button class = "btn-secondary" onclick = "discardPlan()" >
< span > 🗑️< / span > Discard
< / button >
< button class = "btn-secondary" onclick = "editPlan()" >
< span > ✏️< / span > Edit Plan
< / button >
< button class = "btn-secondary" onclick = "simulatePlan('${plan_id}')" >
< span > 🔮< / span > Simulate First
< / button >
< button class = "btn-primary" onclick = "executePlan('${plan_id}')" $ { execute_disabled } >
< span > 🚀< / span > Execute Plan
< / button >
< / div >
< / div >
< / template >
<!-- Decision Option Template -->
< template id = "decision-option-template" >
< div class = "decision-option" data-option-id = "${id}" >
< div class = "option-header" >
< input type = "radio" name = "decision_choice" value = "${id}" id = "option-${id}" >
< label for = "option-${id}" >
< span class = "option-label" > ${label}< / span >
< span class = "recommended-badge" style = "display: ${show_recommended}" > Recommended< / span >
< / label >
< / div >
< p class = "option-description" > ${description}< / p >
< div class = "option-details" >
< div class = "pros" >
< h5 > ✅ Pros< / h5 >
< ul > ${pros_html}< / ul >
< / div >
< div class = "cons" >
< h5 > ❌ Cons< / h5 >
< ul > ${cons_html}< / ul >
< / div >
< / div >
< div class = "option-impact" >
< span class = "impact-item</h5>" > 💰 Cost: ${cost_change}< / span >
< span class = "impact-item" > ⏱️ Time: ${time_change}< / span >
< span class = "impact-item risk-${risk_level}" > ⚠️ Risk: ${risk_level}< / span >
< / div >
< / div >
< / template >
<!-- Approval Request Template -->
< template id = "approval-request-template" >
< div class = "approval-request" data-approval-id = "${id}" >
< div class = "approval-header" >
< span class = "approval-type type-${approval_type}" > ${approval_type}< / span >
< span class = "approval-risk risk-${risk_level}" > ${risk_level} Risk< / span >
< / div >
< h4 > ${title}< / h4 >
< p class = "approval-description" > ${description}< / p >
< div class = "approval-impact" >
< h5 > Impact Summary< / h5 >
< p > ${impact_summary}< / p >
< / div >
< div class = "simulation-preview" style = "display: ${show_simulation}" >
< h5 > Simulation Result< / h5 >
< div class = "simulation-summary" > ${simulation_summary}< / div >
< / div >
< div class = "approval-meta" >
< span class = "meta-item" > Step: ${step_name}< / span >
< span class = "meta-item" > Expires: ${expires_at}< / span >
< span class = "meta-item" > Default: ${default_action}< / span >
< / div >
< div class = "approval-actions" >
< button class = "btn-reject" onclick = "rejectApproval('${id}')" >
< span > ❌< / span > Reject
< / button >
< button class = "btn-defer" onclick = "deferApproval('${id}')" >
< span > ⏸️< / span > Defer
< / button >
< button class = "btn-approve" onclick = "approveApproval('${id}')" >
< span > ✅< / span > Approve
< / button >
< / div >
< / div >
< / template >
<!-- Simulation Result Template -->
< template id = "simulation-result-template" >
< div class = "simulation-result" >
< div class = "simulation-header" >
< div class = "simulation-status status-${success}" >
< span class = "status-icon" > ${status_icon}< / span >
< span class = "status-text" > ${status_text}< / span >
< / div >
< div class = "simulation-confidence" >
Confidence: ${confidence}%
< / div >
< / div >
< div class = "impact-overview" >
< h4 > Impact Assessment< / h4 >
< div class = "impact-grid" >
< div class = "impact-card risk-${data_risk}" >
< span class = "impact-icon" > 💾< / span >
< span class = "impact-label" > Data Impact< / span >
< span class = "impact-value" > ${data_impact_summary}< / span >
< / div >
< div class = "impact-card risk-${cost_risk}" >
< span class = "impact-icon" > 💰< / span >
< span class = "impact-label" > Cost Impact< / span >
< span class = "impact-value" > ${cost_impact_summary}< / span >
< / div >
< div class = "impact-card risk-${time_risk}" >
< span class = "impact-icon" > ⏱️< / span >
< span class = "impact-label" > Time Impact< / span >
< span class = "impact-value" > ${time_impact_summary}< / span >
< / div >
< div class = "impact-card risk-${security_risk}" >
< span class = "impact-icon" > 🔒< / span >
< span class = "impact-label" > Security Impact< / span >
< span class = "impact-value" > ${security_impact_summary}< / span >
< / div >
< / div >
< / div >
< div class = "step-outcomes" >
< h4 > Step-by-Step Predictions< / h4 >
< div class = "outcomes-list" >
${step_outcomes_html}
< / div >
< / div >
< div class = "side-effects" style = "display: ${show_side_effects}" >
< h4 > ⚠️ Potential Side Effects< / h4 >
< div class = "side-effects-list" >
${side_effects_html}
< / div >
< / div >
< div class = "recommendations" style = "display: ${show_recommendations}" >
< h4 > 💡 Recommendations< / h4 >
< div class = "recommendations-list" >
${recommendations_html}
< / div >
< / div >
< div class = "simulation-actions" >
< button class = "btn-secondary" onclick = "closeSimulationModal()" >
< span > ↩️< / span > Back
< / button >
< button class = "btn-primary" onclick = "proceedAfterSimulation('${task_id}')" $ { proceed_disabled } >
< span > 🚀< / span > Proceed with Execution
< / button >
< / div >
< / div >
< / template >
