botui/ui/suite/tasks/tasks.html

550 lines
24 KiB
HTML
Raw Normal View History

<!-- =============================================================================
TASKS APP
Automated Intelligent Task Management Interface
============================================================================= -->
<link rel="stylesheet" href="/themes/sentient/sentient.css" />
<link rel="stylesheet" href="/suite/tasks/tasks.css" />
<div class="tasks-app sentient-theme">
<!-- Top Header Bar -->
<header class="tasks-topbar">
<div class="topbar-left">
<div class="topbar-logo">
<div class="topbar-logo-icon"></div>
<span>Sentient</span>
2025-12-03 18:42:22 -03:00
</div>
<nav class="topbar-nav">
<button class="topbar-nav-item active">Dashboard</button>
<button class="topbar-nav-item">Analytics</button>
</nav>
2025-12-03 18:42:22 -03:00
</div>
<div class="topbar-center">
<div class="topbar-search">
<span class="topbar-search-icon">🔍</span>
<input
type="text"
class="topbar-search-input"
placeholder="Search tasks, intents, logs..."
/>
2025-12-03 18:42:22 -03:00
</div>
</div>
<div class="topbar-right">
<button class="topbar-icon-btn" title="Notifications">
🔔
<span class="notification-dot"></span>
</button>
<button class="topbar-icon-btn" title="Settings">⚙️</button>
<div class="topbar-profile">
<div class="topbar-avatar">JD</div>
<span class="topbar-profile-name">John Doe</span>
<span class="topbar-profile-arrow"></span>
</div>
2025-12-03 18:42:22 -03:00
</div>
</header>
<!-- 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
>
</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"
2025-12-03 18:42:22 -03:00
hx-swap="innerHTML"
>
<!-- Task Card - Complete -->
<article
class="task-card"
data-task-id="1"
onclick="selectTask(1)"
2025-12-03 18:42:22 -03:00
>
<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>
2025-12-03 18:42:22 -03:00
<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>
2025-12-03 18:42:22 -03:00
<!-- 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>
2025-12-03 18:42:22 -03:00
<script src="/suite/tasks/tasks-sentient.js"></script>