Rodrigo Rodriguez (Pragmatismo)
a63d0bdd34
- autotask.html: Auto Task interface with intent input, plan preview, decisions - autotask.css: Premium styling for Auto Task system - autotask.js: Client-side logic, WebSocket handling, approval workflow
492 lines
21 KiB
HTML
492 lines
21 KiB
HTML
<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>
|
||
<form class="intent-form" id="intent-form" hx-post="/api/autotask/compile" hx-target="#compilation-result" hx-indicator="#compile-spinner">
|
||
<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>
|
||
<button type="submit" class="btn-compile">
|
||
<span class="btn-icon">🚀</span>
|
||
Compile & Plan
|
||
<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>
|