678 lines
29 KiB
HTML
678 lines
29 KiB
HTML
<!-- =============================================================================
|
|
TASKS APP
|
|
Automated Intelligent Task Management Interface
|
|
============================================================================= -->
|
|
|
|
<div class="tasks-app">
|
|
<!-- Main Content Area -->
|
|
<main class="tasks-main">
|
|
<!-- Task List Panel (Left) -->
|
|
<section class="tasks-list-panel">
|
|
<div class="tasks-list-header">
|
|
<div class="tasks-list-title">
|
|
<h1>Automated Tasks</h1>
|
|
<span class="tasks-count" id="tasks-total-count"
|
|
>24 tasks</span
|
|
>
|
|
<button
|
|
class="btn-new-intent"
|
|
onclick="showNewIntentModal()"
|
|
title="Create new intent"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</svg>
|
|
New Intent
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Status Filter Pills -->
|
|
<div class="status-filters" id="status-filters">
|
|
<button
|
|
class="status-pill complete active"
|
|
data-filter="complete"
|
|
hx-get="/api/tasks?status=complete"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
>
|
|
Complete <span class="pill-count">12</span>
|
|
</button>
|
|
<button
|
|
class="status-pill active-intents"
|
|
data-filter="active"
|
|
hx-get="/api/tasks?status=active"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
>
|
|
Active Intents <span class="pill-count">5</span>
|
|
</button>
|
|
<button
|
|
class="status-pill awaiting"
|
|
data-filter="awaiting"
|
|
hx-get="/api/tasks?status=awaiting"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
>
|
|
Awaiting Decision <span class="pill-count">3</span>
|
|
</button>
|
|
<button
|
|
class="status-pill paused"
|
|
data-filter="paused"
|
|
hx-get="/api/tasks?status=paused"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
>
|
|
Paused <span class="pill-count">2</span>
|
|
</button>
|
|
<button
|
|
class="status-pill blocked"
|
|
data-filter="blocked"
|
|
hx-get="/api/tasks?status=blocked"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
>
|
|
Blocked/Issues <span class="pill-count">2</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task List -->
|
|
<div
|
|
class="tasks-list-scroll"
|
|
id="task-list"
|
|
hx-get="/api/tasks"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML"
|
|
>
|
|
<!-- Task Card - Complete -->
|
|
<article
|
|
class="task-card"
|
|
data-task-id="1"
|
|
onclick="selectTask(1)"
|
|
>
|
|
<div class="task-card-header">
|
|
<div>
|
|
<h3 class="task-card-title">
|
|
Generate Q4 Financial Report
|
|
</h3>
|
|
<p class="task-card-subtitle">
|
|
Automated data aggregation and formatting
|
|
</p>
|
|
</div>
|
|
<span class="task-card-status complete">Complete</span>
|
|
</div>
|
|
<div class="task-card-progress">
|
|
<div class="task-progress-bar">
|
|
<div
|
|
class="task-progress-fill success"
|
|
style="width: 100%"
|
|
></div>
|
|
</div>
|
|
<div class="task-progress-info">
|
|
<span class="task-progress-percent">100%</span>
|
|
<span class="task-progress-steps">8/8 steps</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
<span class="task-card-meta-item">⏱️ 2h 34m</span>
|
|
<span class="task-card-meta-item"
|
|
>📅 Completed today</span
|
|
>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Task Card - Active with Decision -->
|
|
<article
|
|
class="task-card selected"
|
|
data-task-id="2"
|
|
onclick="selectTask(2)"
|
|
>
|
|
<div class="task-card-header">
|
|
<div>
|
|
<h3 class="task-card-title">
|
|
Customer Data Migration
|
|
</h3>
|
|
<p class="task-card-subtitle">
|
|
Migrating 50,000 customer records
|
|
</p>
|
|
</div>
|
|
<span class="task-card-status awaiting">Awaiting</span>
|
|
</div>
|
|
<div class="task-card-progress">
|
|
<div class="task-progress-bar">
|
|
<div
|
|
class="task-progress-fill"
|
|
style="width: 67%"
|
|
></div>
|
|
</div>
|
|
<div class="task-progress-info">
|
|
<span class="task-progress-percent">67%</span>
|
|
<span class="task-progress-steps">4/6 steps</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
<span class="task-card-meta-item"
|
|
>⚠️ Decision required</span
|
|
>
|
|
<span class="task-card-meta-item">⏱️ Running 45m</span>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Task Card - Active Running -->
|
|
<article
|
|
class="task-card"
|
|
data-task-id="3"
|
|
onclick="selectTask(3)"
|
|
>
|
|
<div class="task-card-header">
|
|
<div>
|
|
<h3 class="task-card-title">
|
|
API Integration Testing
|
|
</h3>
|
|
<p class="task-card-subtitle">
|
|
Running automated test suite
|
|
</p>
|
|
</div>
|
|
<span class="task-card-status running">Running</span>
|
|
</div>
|
|
<div class="task-card-progress">
|
|
<div class="task-progress-bar">
|
|
<div
|
|
class="task-progress-fill"
|
|
style="width: 45%"
|
|
></div>
|
|
</div>
|
|
<div class="task-progress-info">
|
|
<span class="task-progress-percent">45%</span>
|
|
<span class="task-progress-steps">9/20 tests</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
<span class="task-card-meta-item">⏱️ Running 12m</span>
|
|
<span class="task-card-meta-item"
|
|
>🔄 Auto-retry enabled</span
|
|
>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Task Card - Paused -->
|
|
<article
|
|
class="task-card"
|
|
data-task-id="4"
|
|
onclick="selectTask(4)"
|
|
>
|
|
<div class="task-card-header">
|
|
<div>
|
|
<h3 class="task-card-title">
|
|
Email Campaign Deployment
|
|
</h3>
|
|
<p class="task-card-subtitle">
|
|
Scheduled marketing campaign
|
|
</p>
|
|
</div>
|
|
<span class="task-card-status paused">Paused</span>
|
|
</div>
|
|
<div class="task-card-progress">
|
|
<div class="task-progress-bar">
|
|
<div
|
|
class="task-progress-fill"
|
|
style="width: 30%"
|
|
></div>
|
|
</div>
|
|
<div class="task-progress-info">
|
|
<span class="task-progress-percent">30%</span>
|
|
<span class="task-progress-steps">3/10 steps</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
<span class="task-card-meta-item"
|
|
>⏸️ Paused by user</span
|
|
>
|
|
<span class="task-card-meta-item"
|
|
>📅 Resume: Tomorrow 9am</span
|
|
>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Task Card - Blocked -->
|
|
<article
|
|
class="task-card"
|
|
data-task-id="5"
|
|
onclick="selectTask(5)"
|
|
>
|
|
<div class="task-card-header">
|
|
<div>
|
|
<h3 class="task-card-title">Database Backup</h3>
|
|
<p class="task-card-subtitle">
|
|
Automated nightly backup
|
|
</p>
|
|
</div>
|
|
<span class="task-card-status blocked">Blocked</span>
|
|
</div>
|
|
<div class="task-card-progress">
|
|
<div class="task-progress-bar">
|
|
<div
|
|
class="task-progress-fill"
|
|
style="width: 15%"
|
|
></div>
|
|
</div>
|
|
<div class="task-progress-info">
|
|
<span class="task-progress-percent">15%</span>
|
|
<span class="task-progress-steps">1/7 steps</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
<span class="task-card-meta-item"
|
|
>❌ Storage quota exceeded</span
|
|
>
|
|
<span class="task-card-meta-item"
|
|
>🔧 Action required</span
|
|
>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Task Detail Panel (Right) -->
|
|
<aside class="task-detail-panel" id="task-detail-panel">
|
|
<div class="task-detail-header">
|
|
<div class="task-detail-title-row">
|
|
<h2 class="task-detail-title">Customer Data Migration</h2>
|
|
<div class="task-detail-actions">
|
|
<button class="task-detail-action-btn" title="Pause">
|
|
⏸️
|
|
</button>
|
|
<button class="task-detail-action-btn" title="Cancel">
|
|
✖️
|
|
</button>
|
|
<button class="task-detail-action-btn" title="More">
|
|
⋯
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="task-detail-meta">
|
|
<span class="task-detail-meta-item"
|
|
><span class="icon">📊</span> 67% complete</span
|
|
>
|
|
<span class="task-detail-meta-item"
|
|
><span class="icon">⏱️</span> 45m elapsed</span
|
|
>
|
|
<span class="task-detail-meta-item"
|
|
><span class="icon">📅</span> Started 2:15 PM</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="task-detail-scroll">
|
|
<!-- Decision Required Section -->
|
|
<section class="decision-required-section">
|
|
<div class="decision-required-header">
|
|
<div class="decision-required-icon">⚠️</div>
|
|
<span class="decision-required-title"
|
|
>Decision Required</span
|
|
>
|
|
</div>
|
|
<p class="decision-required-description">
|
|
Found 234 duplicate customer records. How would you like
|
|
to proceed with the migration?
|
|
</p>
|
|
<div class="decision-options">
|
|
<div
|
|
class="decision-option selected"
|
|
onclick="selectDecision(this, 'merge')"
|
|
>
|
|
<div class="decision-option-radio"></div>
|
|
<div class="decision-option-content">
|
|
<div class="decision-option-label">
|
|
Merge duplicates
|
|
</div>
|
|
<div class="decision-option-desc">
|
|
Combine records, keeping most recent data
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="decision-option"
|
|
onclick="selectDecision(this, 'skip')"
|
|
>
|
|
<div class="decision-option-radio"></div>
|
|
<div class="decision-option-content">
|
|
<div class="decision-option-label">
|
|
Skip duplicates
|
|
</div>
|
|
<div class="decision-option-desc">
|
|
Only migrate unique records
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="decision-option"
|
|
onclick="selectDecision(this, 'keep-all')"
|
|
>
|
|
<div class="decision-option-radio"></div>
|
|
<div class="decision-option-content">
|
|
<div class="decision-option-label">
|
|
Keep all records
|
|
</div>
|
|
<div class="decision-option-desc">
|
|
Migrate everything, handle duplicates later
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="decision-actions">
|
|
<button class="decision-btn decision-btn-secondary">
|
|
Skip for now
|
|
</button>
|
|
<button
|
|
class="decision-btn decision-btn-primary"
|
|
onclick="submitDecision()"
|
|
>
|
|
Apply Decision
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Progress Log Section -->
|
|
<section class="progress-log-section">
|
|
<div class="progress-log-header">
|
|
<span class="progress-log-title">Progress Log</span>
|
|
<button class="progress-log-toggle">Collapse</button>
|
|
</div>
|
|
<div class="step-list">
|
|
<div class="step-item completed">
|
|
<div class="step-icon">✓</div>
|
|
<div class="step-content">
|
|
<div class="step-name">
|
|
Initialize connection
|
|
</div>
|
|
<div class="step-detail">
|
|
Connected to source database
|
|
</div>
|
|
</div>
|
|
<span class="step-time">2:15 PM</span>
|
|
</div>
|
|
<div class="step-item completed">
|
|
<div class="step-icon">✓</div>
|
|
<div class="step-content">
|
|
<div class="step-name">Validate schema</div>
|
|
<div class="step-detail">
|
|
Schema compatibility verified
|
|
</div>
|
|
</div>
|
|
<span class="step-time">2:16 PM</span>
|
|
</div>
|
|
<div class="step-item completed">
|
|
<div class="step-icon">✓</div>
|
|
<div class="step-content">
|
|
<div class="step-name">
|
|
Export customer records
|
|
</div>
|
|
<div class="step-detail">
|
|
50,000 records exported successfully
|
|
</div>
|
|
</div>
|
|
<span class="step-time">2:32 PM</span>
|
|
</div>
|
|
<div class="step-item active">
|
|
<div class="step-icon">●</div>
|
|
<div class="step-content">
|
|
<div class="step-name">
|
|
Process and transform
|
|
</div>
|
|
<div class="step-detail">
|
|
Awaiting decision on duplicates...
|
|
</div>
|
|
</div>
|
|
<span class="step-time">Now</span>
|
|
</div>
|
|
<div class="step-item pending">
|
|
<div class="step-icon">○</div>
|
|
<div class="step-content">
|
|
<div class="step-name">
|
|
Import to destination
|
|
</div>
|
|
<div class="step-detail">Pending</div>
|
|
</div>
|
|
<span class="step-time">—</span>
|
|
</div>
|
|
<div class="step-item pending">
|
|
<div class="step-icon">○</div>
|
|
<div class="step-content">
|
|
<div class="step-name">Verify and finalize</div>
|
|
<div class="step-detail">Pending</div>
|
|
</div>
|
|
<span class="step-time">—</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Live Agent Activity -->
|
|
<section class="agent-activity-section">
|
|
<div class="agent-activity-header">
|
|
<div class="agent-activity-title">
|
|
<span class="agent-status-dot"></span>
|
|
Live Agent Activity
|
|
</div>
|
|
<div class="agent-activity-actions">
|
|
<button class="agent-activity-btn">Clear</button>
|
|
<button class="agent-activity-btn">Pause</button>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity-log" id="agent-log">
|
|
<div class="activity-line accent">
|
|
<span class="activity-timestamp">15:00:23</span>
|
|
<span class="activity-message"
|
|
>[AGENT] Analyzing duplicate records...</span
|
|
>
|
|
</div>
|
|
<div class="activity-line">
|
|
<span class="activity-timestamp">15:00:21</span>
|
|
<span class="activity-message"
|
|
>[SCAN] Found 234 potential duplicates</span
|
|
>
|
|
</div>
|
|
<div class="activity-line warning">
|
|
<span class="activity-timestamp">15:00:20</span>
|
|
<span class="activity-message"
|
|
>[ALERT] User decision required for duplicates</span
|
|
>
|
|
</div>
|
|
<div class="activity-line success">
|
|
<span class="activity-timestamp">14:58:45</span>
|
|
<span class="activity-message"
|
|
>[OK] Export completed: 50,000 records</span
|
|
>
|
|
</div>
|
|
<div class="activity-line">
|
|
<span class="activity-timestamp">14:45:12</span>
|
|
<span class="activity-message"
|
|
>[EXPORT] Processing batch 500/500...</span
|
|
>
|
|
</div>
|
|
<div class="activity-line">
|
|
<span class="activity-timestamp">14:32:08</span>
|
|
<span class="activity-message"
|
|
>[EXPORT] Processing batch 250/500...</span
|
|
>
|
|
</div>
|
|
<div class="activity-line success">
|
|
<span class="activity-timestamp">14:16:33</span>
|
|
<span class="activity-message"
|
|
>[OK] Schema validation passed</span
|
|
>
|
|
</div>
|
|
<div class="activity-line info">
|
|
<span class="activity-timestamp">14:15:01</span>
|
|
<span class="activity-message"
|
|
>[INIT] Connected to source: prod-db-main</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- New Intent Modal -->
|
|
<div class="modal-overlay" id="newIntentModal">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3>Create New Intent</h3>
|
|
<button class="modal-close" onclick="closeNewIntentModal()">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form
|
|
id="newIntentForm"
|
|
hx-post="/api/tasks"
|
|
hx-target="#task-list"
|
|
hx-swap="afterbegin"
|
|
>
|
|
<div class="form-group">
|
|
<label class="form-label" for="intentTitle"
|
|
>Intent Title</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
id="intentTitle"
|
|
name="title"
|
|
placeholder="e.g., Launch Q4 Campaign for Verse"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="intentDescription"
|
|
>Description</label
|
|
>
|
|
<textarea
|
|
class="form-input"
|
|
id="intentDescription"
|
|
name="description"
|
|
rows="3"
|
|
placeholder="Describe what this intent should accomplish..."
|
|
></textarea>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" for="intentDueDate"
|
|
>Due Date</label
|
|
>
|
|
<input
|
|
type="date"
|
|
class="form-input"
|
|
id="intentDueDate"
|
|
name="due_date"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="intentPriority"
|
|
>Priority</label
|
|
>
|
|
<select
|
|
class="form-input"
|
|
id="intentPriority"
|
|
name="priority"
|
|
>
|
|
<option value="normal">Normal</option>
|
|
<option value="high">High</option>
|
|
<option value="urgent">Urgent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="intentGoal"
|
|
>Goal / Success Criteria</label
|
|
>
|
|
<textarea
|
|
class="form-input"
|
|
id="intentGoal"
|
|
name="goal"
|
|
rows="2"
|
|
placeholder="How will you know when this intent is complete?"
|
|
></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
class="decision-btn decision-btn-secondary"
|
|
onclick="closeNewIntentModal()"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="decision-btn decision-btn-primary"
|
|
type="submit"
|
|
form="newIntentForm"
|
|
>
|
|
Create Intent
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Conditionally load tasks.js only if not already loaded
|
|
if (typeof TasksState === "undefined") {
|
|
const script = document.createElement("script");
|
|
script.src = "tasks/tasks.js";
|
|
document.head.appendChild(script);
|
|
}
|
|
</script>
|
|
<script>
|
|
// New Intent Modal functions
|
|
function showNewIntentModal() {
|
|
document.getElementById("newIntentModal").classList.add("show");
|
|
document.getElementById("intentTitle").focus();
|
|
}
|
|
|
|
function closeNewIntentModal() {
|
|
document.getElementById("newIntentModal").classList.remove("show");
|
|
document.getElementById("newIntentForm").reset();
|
|
}
|
|
|
|
// Close modal on escape key
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") {
|
|
closeNewIntentModal();
|
|
}
|
|
});
|
|
|
|
// Close modal when clicking overlay
|
|
document
|
|
.getElementById("newIntentModal")
|
|
?.addEventListener("click", (e) => {
|
|
if (e.target.classList.contains("modal-overlay")) {
|
|
closeNewIntentModal();
|
|
}
|
|
});
|
|
|
|
// Close modal after successful form submission
|
|
document.body.addEventListener("htmx:afterRequest", (e) => {
|
|
if (e.detail.elt.id === "newIntentForm" && e.detail.successful) {
|
|
closeNewIntentModal();
|
|
}
|
|
});
|
|
</script>
|