botui/ui/suite/tasks/tasks.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>