{% extends "base.html" %}
{% block title %}Task Board - ICDEV™ Dashboard{% endblock %}
{% block content %}
<!-- EDITED_BY_CLAUDE_V3 -->
<div class="page-header">
    <h1>Task Board</h1>
    <p class="subtitle">Manage scheduled and planned tasks — drag across columns or use arrow buttons to move.</p>
</div>

<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
    <input type="text" id="kanban-filter-input" placeholder="Filter by title, id, priority..." aria-label="Filter tasks"
           style="flex:1; max-width:420px; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
    <span id="kanban-filter-count" style="font-size:12px; color:var(--text-dim);"></span>
    <div style="margin-left:auto; display:flex; gap:8px; align-items:center;">
        <label style="font-size:12px; color:var(--text-dim); white-space:nowrap;">Executor:</label>
        <select id="kanban-executor-chain" onchange="setExecutorChain(this.value)" title="Global executor fallback chain (affects scheduler dispatch)"
                style="padding:6px 8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px; cursor:pointer;">
            <option value="claude_cli,gitlab,ollama_local">🤖 Claude CLI → GitLab → Ollama</option>
            <option value="gitlab,ollama_local">🦊 GitLab → Ollama (air-gap)</option>
            <option value="github_actions,ollama_local">⚙️ GitHub Actions → Ollama (air-gap)</option>
            <option value="ollama_local">🦙 Ollama Local only</option>
        </select>
        <button class="btn" onclick="openDepMapModal()" title="View dependency graph">🔗 Dep Map</button>
        <button class="btn" onclick="openTagManagerModal()" title="Manage tags">🏷 Tags</button>
        <button class="btn btn-primary" onclick="openAddTaskModal()">+ Add Task</button>
    </div>
</div>

<div class="kanban-board" id="kanban-board">
    {% set columns = [
        ("suggested", "Suggested"),
        ("backlog", "Backlog"),
        ("scheduled", "Scheduled"),
        ("in_progress", "In Progress"),
        ("done", "Done")
    ] %}
    {% for status_key, status_label in columns %}
    <div class="kanban-column" data-status="{{ status_key }}">
        <div class="kanban-column-header">
            <h3>{{ status_label }}</h3>
            <span class="kanban-column-count">0</span>
            {% if status_key == "suggested" %}
            <select id="promote-all-gate" style="margin-left:auto; font-size:11px; padding:3px 6px; background:var(--bg-code); border:1px solid var(--border); border-radius:4px; color:var(--text-primary); cursor:pointer;">
                <option value="">All suggested</option>
                <option value="value10" selected>Value ≥ 1.0</option>
                <option value="value08">Value ≥ 0.8</option>
                <option value="conf95">Confidence ≥ 90%</option>
                <option value="conf70">Confidence ≥ 70%</option>
            </select>
            <button class="btn btn-sm" id="btn-promote-all" onclick="promoteAllSuggested()" title="Promote filtered suggested cards to backlog" style="padding:4px 12px; font-size:12px; font-weight:600; background:#22c55e; color:#fff; border:none; border-radius:4px; cursor:pointer; display:none; letter-spacing:0.3px;">↑ Promote</button>
            {% endif %}
        </div>
        <div class="kanban-column-body">
            <div class="kanban-empty">Loading...</div>
        </div>
    </div>
    {% endfor %}
</div>


<!-- Add/Edit Task Modal -->
<div id="task-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card, #1e293b); border-radius:12px; width:90%; max-width:500px; border:1px solid var(--border);">
        <div style="display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border);">
            <h3 id="task-modal-title" style="margin:0;">Add Task</h3>
            <button class="btn btn-sm" onclick="closeTaskModal()">&times;</button>
        </div>
        <div style="padding:20px;">
            <input type="hidden" id="task-edit-id">
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Title *</label>
                <input type="text" id="task-title" style="width:100%; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);" placeholder="e.g. Build notification system">
            </div>
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Description</label>
                <textarea id="task-desc" rows="3" style="width:100%; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); resize:vertical;" placeholder="Optional details..."></textarea>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Type</label>
                    <select id="task-type" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="build">Build</option>
                        <option value="run">Run</option>
                        <option value="fix">Fix</option>
                        <option value="research">Research</option>
                        <option value="deploy">Deploy</option>
                        <option value="test">Test</option>
                        <option value="chore">Chore</option>
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Priority</label>
                    <select id="task-priority" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="low">Low</option>
                        <option value="medium" selected>Medium</option>
                        <option value="high">High</option>
                        <option value="critical">Critical</option>
                    </select>
                </div>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Status</label>
                    <select id="task-status" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="suggested">Suggested</option>
                        <option value="backlog">Backlog</option>
                        <option value="scheduled">Scheduled</option>
                        <option value="in_progress">In Progress</option>
                        <option value="done">Done</option>
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Scheduled For</label>
                    <input type="datetime-local" id="task-scheduled-at" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Start Date</label>
                    <input type="date" id="task-start-date" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Target Date</label>
                    <input type="date" id="task-target-date" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
            </div>
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Executor</label>
                <select id="task-executor-type" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                    <option value="claude_cli">&#129502; Claude CLI</option>
                    <option value="gitlab">&#129418; GitLab CI</option>
                    <option value="github_actions">&#9881;&#65039; GitHub Actions</option>
                </select>
            </div>
        </div>
        <!-- Tags section (only shown when editing an existing task) -->
        <div id="task-tags-section" style="display:none; margin-top:4px; border-top:1px solid var(--border); padding-top:12px;">
            <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px;">Tags</label>
            <div id="task-tags-assigned" style="display:flex; flex-wrap:wrap; gap:4px; min-height:24px; margin-bottom:8px;"></div>
            <div style="display:flex; gap:8px; align-items:center;">
                <select id="task-tag-picker" style="flex:1; padding:6px 8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px;">
                    <option value="">— assign tag —</option>
                </select>
                <button class="btn btn-sm btn-primary" onclick="assignTag()">Add</button>
            </div>
        </div>

        <!-- Comments section (only shown when editing an existing task) -->
        <div id="task-comments-section" style="display:none; margin-top:4px; border-top:1px solid var(--border); padding-top:12px;">
            <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px;">Comments</label>
            <div id="task-comments-list" style="max-height:140px; overflow-y:auto; margin-bottom:8px; display:flex; flex-direction:column; gap:6px;"></div>
            <div style="display:flex; gap:8px;">
                <input type="text" id="task-comment-input" placeholder="Add a comment..." style="flex:1; padding:6px 10px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px;">
                <button class="btn btn-sm btn-primary" onclick="postComment()" style="white-space:nowrap;">Post</button>
            </div>
        </div>
        <div style="padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:12px; justify-content:flex-end;">
            <button class="btn" onclick="closeTaskModal()">Cancel</button>
            <button class="btn btn-primary" onclick="saveTask()">Save</button>
        </div>
    </div>
</div>

<!-- OPT-62: mid-run message injection modal -->
<div id="kanban-message-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1200; align-items:center; justify-content:center;">
    <div style="background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; width:min(480px, 92vw); max-height:90vh; overflow:auto;">
        <div style="padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:16px;">&#128172; Send message to running task</h3>
            <button class="kanban-move-btn" onclick="closeMessageModal()" title="Close">&#10005;</button>
        </div>
        <div style="padding:16px 20px;">
            <div style="font-size:12px; color:var(--text-dim); margin-bottom:8px;" id="kanban-msg-target">Task: —</div>
            <textarea id="kanban-msg-text" placeholder="e.g. also please run ruff and bandit before finishing" rows="5" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-family:inherit; resize:vertical;"></textarea>
            <div style="font-size:11px; color:var(--text-dim); margin-top:8px;">The message is queued and delivered at the next LLM call boundary (max 10 iterations per task).</div>
            <div id="kanban-msg-status" style="font-size:12px; margin-top:8px; min-height:1em;"></div>
        </div>
        <div style="padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:12px; justify-content:flex-end;">
            <button class="btn" onclick="closeMessageModal()">Cancel</button>
            <button class="btn btn-primary" id="kanban-msg-send" onclick="submitMessage()">Send</button>
        </div>
    </div>
</div>

<!-- Dependency DAG Modal -->
<div id="depmap-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1300; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card,#1e293b); border:1px solid var(--border); border-radius:12px; width:min(860px,96vw); max-height:92vh; display:flex; flex-direction:column;">
        <div style="padding:14px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:16px;">🔗 Dependency Map</h3>
            <button class="kanban-move-btn" onclick="closeDepMapModal()">✕</button>
        </div>
        <div style="padding:16px 20px; overflow:auto; flex:1;">
            <div id="depmap-mermaid" style="min-height:200px; text-align:center; color:var(--text-dim);">Loading…</div>
        </div>
        <div style="padding:10px 20px; border-top:1px solid var(--border); font-size:11px; color:var(--text-dim);">
            🟢 done &nbsp; 🔵 in_progress &nbsp; ⬜ backlog/scheduled &nbsp; 🔴 token_exhausted/suggested
        </div>
    </div>
</div>

<!-- Tag Manager Modal -->
<div id="tagmgr-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1300; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card,#1e293b); border:1px solid var(--border); border-radius:12px; width:min(420px,96vw); max-height:80vh; display:flex; flex-direction:column;">
        <div style="padding:14px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:16px;">🏷 Tag Manager</h3>
            <button class="kanban-move-btn" onclick="closeTagManagerModal()">✕</button>
        </div>
        <div style="padding:16px 20px; overflow:auto; flex:1;">
            <div id="tagmgr-list" style="display:flex; flex-direction:column; gap:6px; margin-bottom:16px;"></div>
            <div style="display:flex; gap:8px; flex-wrap:wrap;">
                <input type="text" id="tagmgr-name" placeholder="Tag name" maxlength="64"
                       style="flex:1; min-width:100px; padding:6px 10px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px;">
                <input type="color" id="tagmgr-color" value="#6b7280" title="Tag color"
                       style="width:36px; height:34px; padding:2px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; cursor:pointer;">
                <button class="btn btn-primary btn-sm" onclick="createTag()">Create</button>
            </div>
            <div id="tagmgr-status" style="font-size:12px; margin-top:8px; min-height:1em; color:var(--text-dim);"></div>
        </div>
    </div>
</div>

<script>
console.log('VERSION_2026_05_31_v3');
// Suggested-lane state (mirrors index.html triage UX)
var _suggestedSort = (function() {
    try { return localStorage.getItem('icdev.kanban.suggestedSort') || 'value'; }
    catch (e) { return 'value'; }
})();
var _selectedTaskIds = new Set();
var _allTasks = [];

function _isoToLocal(iso) {
    // Convert ISO/UTC string to local datetime-local input value
    if (!iso) return '';
    var d = new Date(iso);
    if (isNaN(d.getTime())) return '';
    var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
    return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate())
        + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
}

function _localToIso(localVal) {
    // Convert datetime-local value to ISO UTC string
    if (!localVal) return null;
    return new Date(localVal).toISOString();
}

function _formatSchedule(iso) {
    // Human-readable schedule time (e.g. "Mar 24, 5:00 PM")
    if (!iso) return '';
    var d = new Date(iso);
    if (isNaN(d.getTime())) return '';
    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
        + ' ' + d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
}

function openAddTaskModal() {
    document.getElementById('task-modal-title').textContent = 'Add Task';
    document.getElementById('task-edit-id').value = '';
    document.getElementById('task-title').value = '';
    document.getElementById('task-desc').value = '';
    document.getElementById('task-type').value = 'build';
    document.getElementById('task-priority').value = 'medium';
    document.getElementById('task-status').value = 'backlog';
    document.getElementById('task-scheduled-at').value = '';
    document.getElementById('task-start-date').value = '';
    document.getElementById('task-target-date').value = '';
    document.getElementById('task-executor-type').value = 'claude_cli';
    document.getElementById('task-comments-section').style.display = 'none';
    document.getElementById('task-tags-section').style.display = 'none';
    document.getElementById('task-modal').style.display = 'flex';
}

function openEditTaskModal(task) {
    document.getElementById('task-modal-title').textContent = 'Edit Task';
    document.getElementById('task-edit-id').value = task.id;
    document.getElementById('task-title').value = task.title;
    document.getElementById('task-desc').value = task.description || '';
    document.getElementById('task-type').value = task.task_type;
    document.getElementById('task-priority').value = task.priority;
    document.getElementById('task-status').value = task.status;
    document.getElementById('task-scheduled-at').value = _isoToLocal(task.scheduled_at);
    document.getElementById('task-start-date').value = task.start_date || '';
    document.getElementById('task-target-date').value = task.target_date || '';
    document.getElementById('task-executor-type').value = task.executor_type || 'claude_cli';
    document.getElementById('task-tags-section').style.display = 'block';
    _loadTaskTags(task.id, task.tags || []);
    document.getElementById('task-comments-section').style.display = 'block';
    _loadComments(task.id);
    document.getElementById('task-modal').style.display = 'flex';
}

function closeTaskModal() {
    document.getElementById('task-modal').style.display = 'none';
}

function saveTask() {
    var editId = document.getElementById('task-edit-id').value;
    var payload = {
        title: document.getElementById('task-title').value,
        description: document.getElementById('task-desc').value,
        task_type: document.getElementById('task-type').value,
        priority: document.getElementById('task-priority').value,
        status: document.getElementById('task-status').value,
        scheduled_at: _localToIso(document.getElementById('task-scheduled-at').value),
        executor_type: document.getElementById('task-executor-type').value,
        start_date: document.getElementById('task-start-date').value || null,
        target_date: document.getElementById('task-target-date').value || null
    };
    if (!payload.title.trim()) { alert('Title is required'); return; }

    var url = editId ? '/api/kanban/tasks/' + editId : '/api/kanban/tasks';
    var method = editId ? 'PATCH' : 'POST';

    fetch(url, { method: method, headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) })
        .then(function(r) { return r.json(); })
        .then(function() { closeTaskModal(); refreshKanbanTasks(); })
        .catch(function(e) { alert('Error: ' + e); });
}

// OPT-68: optimistic move — reflect the change immediately, rollback on failure
function moveTask(taskId, newStatus) {
    var card = document.querySelector('[data-task-id="' + taskId + '"]');
    var originalStatus = null;
    var originalParent = null;
    if (card) {
        originalParent = card.parentElement;
        originalStatus = card.getAttribute('data-status');
        var newColBody = document.querySelector('.kanban-column[data-status="' + newStatus + '"] .kanban-column-body');
        if (newColBody) {
            var empty = newColBody.querySelector('.kanban-empty');
            if (empty) empty.remove();
            newColBody.insertBefore(card, newColBody.firstChild);
            card.setAttribute('data-status', newStatus);
        }
    }

    fetch('/api/kanban/tasks/' + taskId + '/move', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ status: newStatus })
    })
    .then(function(r) {
        if (!r.ok) throw new Error('HTTP ' + r.status);
        return r.json();
    })
    .then(function() {
        // OPT-68 Pattern 3: undo toast for a reversible move
        if (window.ICDEV && ICDEV.undoToast && originalStatus && originalStatus !== newStatus) {
            ICDEV.undoToast.show({
                message: 'Task moved to ' + newStatus,
                undoCallback: function () {
                    return fetch('/api/kanban/tasks/' + taskId + '/move', {
                        method: 'POST', headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({ status: originalStatus })
                    }).then(function() { refreshKanbanTasks(); });
                },
                durationMs: 5000
            });
        }
    })
    .catch(function(err) {
        // Rollback optimistic update
        if (card && originalParent && originalStatus) {
            originalParent.insertBefore(card, originalParent.firstChild);
            card.setAttribute('data-status', originalStatus);
        }
        alert('Move failed: ' + err + '. Reverted.');
    });
}

function deleteTask(taskId) {
    if (!confirm('Delete this task?')) return;
    // Capture task snapshot BEFORE deletion so we can offer undo
    var card = document.querySelector('[data-task-id="' + taskId + '"]');
    var snapshot = null;
    if (card && card.dataset.snapshot) {
        try { snapshot = JSON.parse(card.dataset.snapshot); } catch (e) { snapshot = null; }
    }
    fetch('/api/kanban/tasks/' + taskId, { method: 'DELETE' })
        .then(function(r) { return r.json(); })
        .then(function() {
            refreshKanbanTasks();
            if (window.ICDEV && ICDEV.undoToast && snapshot) {
                ICDEV.undoToast.show({
                    message: 'Task deleted',
                    undoCallback: function () {
                        return fetch('/api/kanban/tasks', {
                            method: 'POST', headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify(snapshot)
                        }).then(function() { refreshKanbanTasks(); });
                    },
                    durationMs: 5000
                });
            }
        });
}

function refreshKanbanTasks() {
    var url = '/api/kanban/tasks?sort=' + encodeURIComponent(_suggestedSort);
    fetch(url)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            _allTasks = data.tasks || [];
            renderTaskKanban(_allTasks);
        });
}

function promoteAllSuggested() {
    var gate = document.getElementById('promote-all-gate');
    var preset = gate ? gate.value : '';
    var payload = {};
    var label = 'all suggested';
    switch (preset) {
        case 'value10': payload.min_value = 1.0; label = 'value ≥ 1.0'; break;
        case 'value08': payload.min_value = 0.8; label = 'value ≥ 0.8'; break;
        case 'conf95':  payload.min_confidence = 0.95; label = 'confidence ≥ 90%'; break;
        case 'conf70':  payload.min_confidence = 0.70; label = 'confidence ≥ 70%'; break;
    }
    if (!confirm('Promote ' + label + ' cards to backlog?')) return;
    var btn = document.getElementById('btn-promote-all');
    if (btn) { btn.disabled = true; btn.textContent = 'Promoting...'; }
    fetch('/api/kanban/tasks/promote-all', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (btn) { btn.disabled = false; btn.textContent = '↑ Promote'; }
            if (data.error) { alert('Error: ' + data.error); return; }
            var msg = 'Promoted ' + (data.promoted || 0) + ' cards';
            if (data.filtered) msg += ' (' + data.filtered + ' filtered by gate)';
            alert(msg);
            refreshKanbanTasks();
        })
        .catch(function() {
            if (btn) { btn.disabled = false; btn.textContent = '↑ Promote'; }
            alert('Promote failed');
        });
}

// Sort dropdown handler — persists to localStorage + refetches so
// the server-side sort applies (value and confidence are computed
// post-fetch in Python, but the API still returns tasks pre-sorted).
function onSuggestedSortChange(val) {
    if (!val) return;
    _suggestedSort = val;
    try { localStorage.setItem('icdev.kanban.suggestedSort', val); } catch (e) {}
    refreshKanbanTasks();
}

// Bulk select preset — clears current selection and reselects rows
// matching the named threshold.
function applySuggestedSelectPreset(preset) {
    _selectedTaskIds.clear();
    if (preset === 'none' || !preset) {
        renderTaskKanban(_allTasks);
        return;
    }
    var suggestedItems = _allTasks.filter(function(t) { return t.status === 'suggested'; });

    // Rule-based preset — format: "rule::<oracle_lens>"
    if (preset.indexOf('rule::') === 0) {
        var targetRule = preset.slice(6);
        suggestedItems.forEach(function(t) {
            if ((t.oracle_lens || '') === targetRule) {
                _selectedTaskIds.add(t.id);
            }
        });
        renderTaskKanban(_allTasks);
        return;
    }

    suggestedItems.forEach(function(t) {
        var conf = t.oracle_confidence || 0;
        var val = t.oracle_value || 0;
        var prio = (t.priority || '').toLowerCase();
        var match = false;
        switch (preset) {
            case 'all':       match = true; break;
            case 'conf95':    match = conf >= 0.95; break;
            case 'conf90':    match = conf >= 0.90; break;
            case 'value10':   match = val >= 1.0; break;
            case 'value08':   match = val >= 0.8; break;
            case 'value_lo':  match = val < 0.6; break;
            case 'pri_crit':  match = prio === 'critical'; break;
            case 'pri_high':  match = prio === 'high'; break;
            case 'pri_med':   match = prio === 'medium'; break;
            case 'pri_low':   match = prio === 'low'; break;
        }
        if (match) _selectedTaskIds.add(t.id);
    });
    renderTaskKanban(_allTasks);
}

function toggleTaskSelected(taskId, ev) {
    if (ev) ev.stopPropagation();
    if (_selectedTaskIds.has(taskId)) _selectedTaskIds.delete(taskId);
    else _selectedTaskIds.add(taskId);
    var countEls = document.querySelectorAll('[data-bulk-count]');
    for (var i = 0; i < countEls.length; i++) {
        countEls[i].textContent = _selectedTaskIds.size;
    }
}

function bulkMoveSuggested(newStatus, actionLabel) {
    var ids = Array.from(_selectedTaskIds);
    if (!ids.length) {
        alert('No tasks selected. Use the "Select" dropdown to pick a threshold.');
        return;
    }
    if (!confirm(actionLabel + ' ' + ids.length + ' suggested task(s)?')) return;
    fetch('/api/kanban/tasks/bulk-move', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ task_ids: ids, status: newStatus })
    })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            _selectedTaskIds.clear();
            refreshKanbanTasks();
            if (data && data.failed && data.failed.length) {
                console.warn('bulk-move partial failures:', data.failed);
            }
        })
        .catch(function(e) { alert('Bulk move failed: ' + e); });
}

function bulkPromoteSuggested() { bulkMoveSuggested('backlog', 'Promote to backlog'); }
function bulkDismissSuggested() { bulkMoveSuggested('done',    'Dismiss'); }

// kv-viz-02: live counters for in_progress cards
var _kvIntervals = {};
function _clearKvIntervals() {
    Object.keys(_kvIntervals).forEach(function(id) { clearInterval(_kvIntervals[id]); });
    _kvIntervals = {};
}
function _setupKvCounters(boardEl) {
    boardEl.querySelectorAll('[data-kv-started]').forEach(function(sentinel) {
        var taskId = sentinel.getAttribute('data-kv-task-id');
        var startedAt = sentinel.getAttribute('data-kv-started');
        var barEl = document.getElementById('kv-bar-' + taskId);
        var textEl = document.getElementById('kv-tif-' + taskId);
        if (!textEl || !startedAt) return;
        var startMs = new Date(startedAt).getTime();
        function tick() {
            var elapsed = (Date.now() - startMs) / 1000;
            var mins = Math.floor(elapsed / 60);
            var secs = Math.floor(elapsed % 60);
            textEl.textContent = 'Running ' + mins + 'm ' + secs + 's';
            if (barEl) {
                var pct = Math.min(100, (elapsed / 900) * 100);
                barEl.style.width = pct + '%';
                barEl.style.background = pct >= 85 ? '#ef4444' : pct >= 60 ? '#f59e0b' : '#22c55e';
            }
        }
        tick();
        _kvIntervals[taskId] = setInterval(tick, 1000);
    });
}

function renderTaskKanban(tasks) {
    var board = document.getElementById('kanban-board');
    if (!board) return;
    _clearKvIntervals();

    var columns = { suggested: [], backlog: [], scheduled: [], in_progress: [], done: [] };
    tasks.forEach(function(t) {
        var s = t.status || 'backlog';
        // 'decomposed' and 'needs_decomposition' are internal scheduler states —
        // decomposed = parent split into children (auto-closes when children done);
        // needs_decomposition = queued for LLM decomposer next cycle.
        // Both belong in Done visually (work is handed off); never bucket as Backlog.
        if (s === 'decomposed' || s === 'needs_decomposition') s = 'done';
        if (columns[s]) columns[s].push(t); else columns.backlog.push(t);
    });

    var priorityColors = { critical: '#ef4444', high: '#f97316', medium: '#3b82f6', low: '#6b7280' };
    var typeIcons = { build: '\u{1F528}', run: '\u25B6', fix: '\u{1F41B}', research: '\u{1F50D}', deploy: '\u{1F680}', test: '\u2705', chore: '\u{1F9F9}' };
    var nextStatus = { suggested: 'backlog', backlog: 'scheduled', scheduled: 'in_progress', in_progress: 'done' };
    var prevStatus = { backlog: 'suggested', scheduled: 'backlog', in_progress: 'scheduled', done: 'in_progress' };
    var executorLabels = {
        claude_cli:     { icon: '\uD83E\uDD16', label: 'Claude',     color: '#7c3aed' },
        ollama_local:   { icon: '\uD83D\uDCBB', label: 'Local',      color: '#0891b2' },
        gitlab:         { icon: '\uD83E\uDD8A', label: 'GitLab',     color: '#e24304' },
        github_actions: { icon: '\u2699\uFE0F', label: 'GH Actions', color: '#2ea043' }
    };
    var llmModeIcons = { claude: '\uD83E\uDDE0', ollama: '\uD83D\uDCBB', none: '\u2699\uFE0F' };
    var llmModeTitles = { claude: 'LLM: Claude', ollama: 'LLM: Ollama (local)', none: 'No LLM' };

    board.querySelectorAll('.kanban-column').forEach(function(colEl) {
        var status = colEl.getAttribute('data-status');
        if (!columns[status]) return;
        var items = columns[status];

        var countEl = colEl.querySelector('.kanban-column-count');
        if (countEl) countEl.textContent = items.length;

        // Show/hide the Promote All button based on suggested card count
        if (status === 'suggested') {
            var promBtn = document.getElementById('btn-promote-all');
            if (promBtn) promBtn.style.display = items.length > 0 ? 'inline-block' : 'none';
        }

        var bodyEl = colEl.querySelector('.kanban-column-body');
        if (!bodyEl) return;

        if (items.length === 0) {
            bodyEl.innerHTML = '<div class="kanban-empty">No tasks</div>';
            return;
        }

        var esc = window.ICDEV && ICDEV.escapeHTML ? ICDEV.escapeHTML : function(s) { return String(s || ''); };
        var cardsHtml = items.map(function(t) {
            var icon = typeIcons[t.task_type] || '';
            var pColor = priorityColors[t.priority] || '#6b7280';
            var isSuggested = status === 'suggested';
            var arrows = '';
            if (!isSuggested && prevStatus[status]) arrows += '<button class="kanban-move-btn" onclick="event.stopPropagation(); moveTask(\'' + t.id + '\',\'' + prevStatus[status] + '\')" title="Move left">◀</button>';
            if (!isSuggested && nextStatus[status]) arrows += '<button class="kanban-move-btn" onclick="event.stopPropagation(); moveTask(\'' + t.id + '\',\'' + nextStatus[status] + '\')" title="Move right">▶</button>';

            var schedLine = t.scheduled_at ? '<div style="font-size:11px; color:var(--text-dim); margin-top:4px;">📅 ' + _formatSchedule(t.scheduled_at) + '</div>' : '';

            // Target date line with overdue warning
            var targetLine = '';
            if (t.target_date) {
                var today = new Date(); today.setHours(0,0,0,0);
                var td = new Date(t.target_date + 'T00:00:00');
                var overdue = td < today && t.status !== 'done';
                targetLine = '<div style="font-size:11px; color:' + (overdue ? '#ef4444' : 'var(--text-dim)') + '; margin-top:3px;" title="Target: ' + esc(t.target_date) + '">'
                    + (overdue ? '🔴' : '🎯') + ' ' + esc(t.target_date) + (overdue ? ' <strong>OVERDUE</strong>' : '') + '</div>';
            }

            // Phantom completion risk badge
            var phantomBadge = '';
            if (t.phantom_ratio && t.phantom_ratio > 0.5) {
                var pr = Math.round(t.phantom_ratio * 100);
                phantomBadge = '<span class="badge" style="background:#f97316; color:#fff; font-size:10px;" title="Phantom completion risk: output/claim ratio ' + pr + '%">⚠️ ' + pr + '% phantom</span>';
            }

            // Change metrics + branch badge (done cards only)
            var changeMetrics = '';
            if (t.status === 'done' && (t.files_changed || t.lines_added || t.lines_removed)) {
                var fc = t.files_changed || 0;
                var la = t.lines_added || 0;
                var lr = t.lines_removed || 0;
                changeMetrics = '<div style="font-size:10px; color:var(--text-dim); margin-top:3px;" title="' + fc + ' files changed">'
                    + fc + ' file' + (fc !== 1 ? 's' : '')
                    + ' <span style="color:#22c55e;">+' + la + '</span>'
                    + ' <span style="color:#ef4444;">-' + lr + '</span>'
                    + '</div>';
            }
            if (t.status === 'done' && t.branch_name) {
                changeMetrics += '<div style="font-size:10px; color:var(--text-dim); margin-top:2px;" title="' + esc(t.commit_summary || '') + '">⑃ ' + esc(t.branch_name) + '</div>';
            }

            // Tag chips
            var tagChips = '';
            if (t.tags && t.tags.length) {
                tagChips = '<div style="display:flex; flex-wrap:wrap; gap:3px; margin-top:4px;">'
                    + t.tags.map(function(tg) {
                        return '<span style="background:' + esc(tg.color) + '33; color:' + esc(tg.color) + '; font-size:10px; padding:1px 5px; border-radius:3px; font-weight:600;">' + esc(tg.name) + '</span>';
                    }).join('')
                    + '</div>';
            }

            // Executor badge
            var execInfo = executorLabels[t.executor_type] || executorLabels['claude_cli'];
            var execBadge = '<span class="badge" style="background:' + execInfo.color + '20;color:' + execInfo.color + ';font-size:10px;" title="Executor: ' + execInfo.label + '">'
                + execInfo.icon + ' ' + execInfo.label + '</span>';

            // Execution ID as clickable link (GitLab pipeline URL) or plain text
            var execIdLine = '';
            if (t.execution_id) {
                var execUrl = t.executor_url || null;
                if (execUrl) {
                    execIdLine = '<div style="font-size:10px; color:var(--text-dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">'
                        + '🔗 <a href="' + esc(execUrl) + '" target="_blank" rel="noopener" onclick="event.stopPropagation();" style="color:var(--text-dim);text-decoration:underline;">' + esc(t.execution_id) + '</a></div>';
                } else {
                    execIdLine = '<div style="font-size:10px; color:var(--text-dim); margin-top:3px;">🆔 ' + esc(t.execution_id) + '</div>';
                }
            }

            // LLM mode indicator — inferred from executor_type
            var llmMode = (t.executor_type === 'claude_cli') ? 'claude' : (t.executor_type === 'ollama_local' ? 'ollama' : 'none');
            var llmIcon = llmModeIcons[llmMode] || '';
            var llmTitle = llmModeTitles[llmMode] || '';
            var llmBadge = '<span title="' + llmTitle + '" style="font-size:11px; cursor:default;">' + llmIcon + '</span>';

            // OPT-62: mid-run message injection button (in_progress only)
            var msgBtn = '';
            if (status === 'in_progress') {
                msgBtn = `<button class="kanban-move-btn" onclick="event.stopPropagation(); openMessageModal('${t.id}', ${JSON.stringify(t.title || '').replace(/"/g, '&quot;')})" title="Send message to running task">💬</button>`;
            }

            // kv-viz-02: in_progress visibility elements
            var attemptBadge = '';
            var reaperBar = '';
            var tifLine = '';
            var lastKilledLine = '';
            if (status === 'in_progress') {
                var ac = t.attempt_count || 0;
                if (ac > 1) {
                    var abColor = ac >= 4 ? '#ef4444' : '#f59e0b';
                    attemptBadge = '<span class="badge" style="background:' + abColor + '20;color:' + abColor + ';font-size:10px;" title="Dispatched ' + ac + ' times">Attempt ' + ac + '</span>';
                }
                if (t.current_attempt_started_at) {
                    reaperBar = '<div style="margin:4px 0 2px 0;background:var(--bg-code);border-radius:2px;height:3px;overflow:hidden;" title="Reaper kills at 15m with no subprocess heartbeat">'
                        + '<div id="kv-bar-' + esc(t.id) + '" style="height:100%;width:0%;background:#22c55e;"></div></div>';
                    tifLine = '<div id="kv-tif-' + esc(t.id) + '" style="font-size:11px;color:var(--text-dim);margin-top:2px;">Running 0m 0s</div>'
                        + '<span data-kv-started="' + esc(t.current_attempt_started_at) + '" data-kv-task-id="' + esc(t.id) + '" style="display:none;"></span>';
                }
                if (t.last_reaped_reason) {
                    var reason = String(t.last_reaped_reason);
                    var shortReason = reason.length > 80 ? reason.substring(0, 80) + '…' : reason;
                    lastKilledLine = '<div style="font-size:10px;color:var(--text-dim);margin-top:2px;font-style:italic;" title="' + esc(reason) + '">Last killed: ' + esc(shortReason) + '</div>';
                }
            }

            // Dependency badge — show on any status where dep is unmet
            var depLine = '';
            if (t.depends_on_task_id) {
                if (t.is_blocked) {
                    var depLabel = t.depends_on_title ? esc(t.depends_on_title) : esc(t.depends_on_task_id);
                    var depStatus = t.depends_on_status ? ' [' + esc(t.depends_on_status) + ']' : '';
                    depLine = '<div style="font-size:11px; color:#f97316; margin-top:4px;" title="Waiting for: ' + depLabel + depStatus + '">'
                        + '⛔ Blocked by: <span style="font-weight:600;">' + depLabel + '</span>' + depStatus + '</div>';
                } else {
                    // Dep is done — show a subtle unblocked indicator
                    var unblockLabel = t.depends_on_title ? esc(t.depends_on_title) : esc(t.depends_on_task_id);
                    depLine = '<div style="font-size:11px; color:#22c55e; margin-top:4px;" title="Dependency met: ' + unblockLabel + '">'
                        + '✓ After: <span style="opacity:0.8;">' + unblockLabel + '</span></div>';
                }
            }

            // Suggested-column extras: checkbox, oracle badges, inline actions
            var checkBox = '';
            var oracleBadges = '';
            var inlineActions = '';
            if (isSuggested) {
                var checked = _selectedTaskIds.has(t.id) ? ' checked' : '';
                checkBox = `<input type="checkbox" class="suggested-checkbox"${checked} onclick="toggleTaskSelected('${t.id}', event)" style="position:absolute; top:8px; right:8px; cursor:pointer;">`;
                var conf = t.oracle_confidence;
                var val = t.oracle_value;
                var dup = t.dedup_count || 0;
                var lens = t.oracle_lens || '';
                var confLabel = conf ? 'conf ' + Math.round(conf * 100) + '%' : '';
                var valueLabel = val ? ' · val ' + val.toFixed(2) : '';
                var dupLabel = dup > 1 ? ' · ' + dup + '× dup' : '';
                var lensLabel = lens ? ' · ' + esc(lens) : '';
                oracleBadges = '<div style="display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:4px;">'
                    + '<span style="font-size:10px; background:#8b5cf620; color:#8b5cf6; border-radius:3px; padding:1px 5px; font-weight:600;">🔮 Oracle</span>'
                    + (confLabel ? '<span style="font-size:10px; color:var(--text-dim);">' + confLabel + valueLabel + dupLabel + lensLabel + '</span>' : '')
                    + '</div>';
                inlineActions = '<div style="display:flex; gap:6px; margin-top:6px;">'
                    + `<button class="btn btn-sm" style="flex:1; font-size:11px; padding:3px 8px; background:#22c55e; color:#fff; border:none; border-radius:4px; cursor:pointer;" onclick="event.stopPropagation(); moveTask('${t.id}', 'backlog')" title="Promote to Backlog">↑ Promote</button>`
                    + `<button class="btn btn-sm" style="flex:1; font-size:11px; padding:3px 8px; background:transparent; color:#6b7280; border:1px solid var(--border); border-radius:4px; cursor:pointer;" onclick="event.stopPropagation(); moveTask('${t.id}', 'done')" title="Dismiss">✕ Dismiss</button>`
                    + '</div>';
            }

            var bottomRow = '';
            if (isSuggested) {
                bottomRow = inlineActions;
            } else {
                bottomRow = '<div style="display:flex; justify-content:space-between; align-items:center; margin-top:6px;">'
                    + '<div style="display:flex; gap:4px;">' + arrows + msgBtn + '</div>'
                    + '<button class="kanban-move-btn" onclick="event.stopPropagation(); deleteTask(\'' + t.id + '\')" title="Delete" style="color:#ef4444;">✕</button>'
                    + '</div>';
            }

            var snapAttr = JSON.stringify(t).replace(/"/g, '&quot;');
            return '<div class="kanban-card" data-task-id="' + esc(t.id) + '" data-status="' + esc(status) + '" data-snapshot="' + snapAttr + '" style="border-left:3px solid ' + pColor + '; cursor:pointer; position:relative;" onclick="openEditTaskModal(' + snapAttr + ')">'
                + checkBox
                + oracleBadges
                + '<div class="kanban-card-title" title="' + esc(t.title) + '">' + icon + ' ' + esc(t.title) + '</div>'
                + reaperBar
                + '<div class="kanban-card-meta">'
                + '<span class="badge badge-info">' + esc(t.task_type) + '</span>'
                + '<span class="badge" style="background:' + pColor + '20; color:' + pColor + ';">' + esc(t.priority) + '</span>'
                + execBadge
                + llmBadge
                + attemptBadge
                + phantomBadge
                + '</div>'
                + depLine
                + tifLine
                + lastKilledLine
                + schedLine
                + targetLine
                + changeMetrics
                + tagChips
                + execIdLine
                + bottomRow
                + '</div>';
        }).join('');

        if (status === 'suggested') {
            var sortOpts = [
                { v: 'value',       l: 'Sort: Value ▼' },
                { v: 'confidence',  l: 'Sort: Confidence ▼' },
                { v: 'priority',    l: 'Sort: Priority ▲' },
                { v: 'created_at',  l: 'Sort: Newest first' }
            ];
            var sortSelect = '<select onchange="onSuggestedSortChange(this.value)" style="font-size:11px; padding:3px 6px; background:var(--bg-code); border:1px solid var(--border); border-radius:4px; color:var(--text-primary); cursor:pointer;">'
                + sortOpts.map(function(o) {
                    return '<option value="' + o.v + '"' + (_suggestedSort === o.v ? ' selected' : '') + '>' + o.l + '</option>';
                }).join('')
                + '</select>';
            var toolbar = '<div class="suggested-toolbar" style="padding:6px 8px; background:var(--bg-code); border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px;">'
                + sortSelect
                + '<select onchange="applySuggestedSelectPreset(this.value); this.value=\'\';" style="font-size:11px; padding:3px 6px; background:var(--bg-code); border:1px solid var(--border); border-radius:4px; color:var(--text-primary); cursor:pointer;">'
                + '<option value="">Select…</option>'
                + '<option value="all">All</option>'
                + '<option value="conf95">Confidence ≥ 95%</option>'
                + '<option value="conf90">Confidence ≥ 90%</option>'
                + '<option value="value10">Value ≥ 1.0</option>'
                + '<option value="value08">Value ≥ 0.8</option>'
                + '<option value="value_lo">Value &lt; 0.6</option>'
                + '<option value="pri_crit">Priority: Critical</option>'
                + '<option value="pri_high">Priority: High</option>'
                + '<option value="pri_med">Priority: Medium</option>'
                + '<option value="pri_low">Priority: Low</option>'
                + '</select>'
                + '<button class="btn btn-sm" onclick="bulkPromoteSuggested()" style="font-size:11px; padding:3px 8px; background:#22c55e; color:#fff; border:none; border-radius:4px; cursor:pointer;">↑ Promote <span data-bulk-count>0</span></button>'
                + '<button class="btn btn-sm" onclick="bulkDismissSuggested()" style="font-size:11px; padding:3px 8px; background:transparent; color:#6b7280; border:1px solid var(--border); border-radius:4px; cursor:pointer;">✕ Dismiss <span data-bulk-count>0</span></button>'
                + '</div>';
            bodyEl.innerHTML = toolbar + cardsHtml;
        } else {
            bodyEl.innerHTML = cardsHtml;
        }
    });
    _setupKvCounters(board);
}

// OPT-62: mid-run message injection
var _kanbanMsgTargetId = null;
function openMessageModal(taskId, title) {
    _kanbanMsgTargetId = taskId;
    document.getElementById('kanban-msg-target').textContent = 'Task: ' + (title || taskId);
    document.getElementById('kanban-msg-text').value = '';
    document.getElementById('kanban-msg-status').textContent = '';
    document.getElementById('kanban-msg-status').style.color = 'var(--text-dim)';
    document.getElementById('kanban-message-modal').style.display = 'flex';
    setTimeout(function() { document.getElementById('kanban-msg-text').focus(); }, 50);
}

function closeMessageModal() {
    document.getElementById('kanban-message-modal').style.display = 'none';
    _kanbanMsgTargetId = null;
}

function submitMessage() {
    if (!_kanbanMsgTargetId) return;
    var text = document.getElementById('kanban-msg-text').value.trim();
    if (!text) {
        document.getElementById('kanban-msg-status').textContent = 'Message cannot be empty.';
        document.getElementById('kanban-msg-status').style.color = '#ef4444';
        return;
    }
    var btn = document.getElementById('kanban-msg-send');
    btn.disabled = true;
    document.getElementById('kanban-msg-status').textContent = 'Sending…';
    document.getElementById('kanban-msg-status').style.color = 'var(--text-dim)';
    fetch('/api/kanban/tasks/' + _kanbanMsgTargetId + '/message', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ message: text, sender: 'dashboard' })
    }).then(function(r) { return r.json().then(function(body) { return { ok: r.ok, status: r.status, body: body }; }); })
    .then(function(res) {
        btn.disabled = false;
        if (res.ok) {
            document.getElementById('kanban-msg-status').textContent = '\uD83D\uDC40 Queued — will be delivered at next LLM call.';
            document.getElementById('kanban-msg-status').style.color = '#10b981';
            setTimeout(closeMessageModal, 1200);
        } else {
            document.getElementById('kanban-msg-status').textContent = 'Failed: ' + (res.body && res.body.error ? res.body.error : ('HTTP ' + res.status));
            document.getElementById('kanban-msg-status').style.color = '#ef4444';
        }
    }).catch(function(e) {
        btn.disabled = false;
        document.getElementById('kanban-msg-status').textContent = 'Error: ' + e;
        document.getElementById('kanban-msg-status').style.color = '#ef4444';
    });
}

// ── Tier 2: Dependency DAG ────────────────────────────────────────────────
function openDepMapModal() {
    document.getElementById('depmap-modal').style.display = 'flex';
    var el = document.getElementById('depmap-mermaid');
    el.innerHTML = 'Loading…';
    fetch('/api/kanban/deps-graph')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var nodes = data.nodes || [];
            var edges = data.edges || [];
            if (!nodes.length && !edges.length) {
                el.innerHTML = '<div style="color:var(--text-dim); padding:40px;">No dependencies defined yet. Set <code>depends_on_task_id</code> on tasks to see the graph.</div>';
                return;
            }
            var statusColor = {
                done: '#22c55e', in_progress: '#3b82f6',
                token_exhausted: '#ef4444', suggested: '#f97316',
                backlog: '#6b7280', scheduled: '#a78bfa'
            };
            var nodeMap = {};
            nodes.forEach(function(n) { nodeMap[n.id] = n; });

            var lines = ['graph TD'];
            nodes.forEach(function(n) {
                var safeId = n.id.replace(/[^a-zA-Z0-9_]/g, '_');
                var label = (n.title || n.id).substring(0, 32).replace(/"/g, "'");
                var color = statusColor[n.status] || '#6b7280';
                lines.push('  ' + safeId + '["' + label + '"]');
                lines.push('  style ' + safeId + ' fill:' + color + '33,stroke:' + color + ',color:#e0e0e0');
            });
            edges.forEach(function(e) {
                var fromId = e.from.replace(/[^a-zA-Z0-9_]/g, '_');
                var toId = e.to.replace(/[^a-zA-Z0-9_]/g, '_');
                lines.push('  ' + fromId + ' --> ' + toId);
            });
            var def = lines.join('\n');

            el.innerHTML = '<div class="mermaid">' + def + '</div>';
            if (window.ICDEV && ICDEV.mermaid && ICDEV.mermaid.renderAll) {
                ICDEV.mermaid.renderAll();
            } else if (window.mermaid) {
                mermaid.init(undefined, el.querySelector('.mermaid'));
            }
        })
        .catch(function(e) {
            document.getElementById('depmap-mermaid').innerHTML = '<div style="color:#ef4444;">Failed to load graph: ' + e + '</div>';
        });
}
function closeDepMapModal() { document.getElementById('depmap-modal').style.display = 'none'; }

// ── Tier 2: Tag Manager ───────────────────────────────────────────────────
var _allTags = [];

function _loadAllTags(cb) {
    fetch('/api/kanban/tags')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            _allTags = data.tags || [];
            if (cb) cb(_allTags);
        })
        .catch(function() { _allTags = []; if (cb) cb([]); });
}

function openTagManagerModal() {
    document.getElementById('tagmgr-modal').style.display = 'flex';
    document.getElementById('tagmgr-name').value = '';
    document.getElementById('tagmgr-status').textContent = '';
    _refreshTagManagerList();
}
function closeTagManagerModal() { document.getElementById('tagmgr-modal').style.display = 'none'; }

function _refreshTagManagerList() {
    _loadAllTags(function(tags) {
        var esc = window.ICDEV && ICDEV.escapeHTML ? ICDEV.escapeHTML : function(s) { return String(s || ''); };
        var el = document.getElementById('tagmgr-list');
        if (!el) return;
        if (!tags.length) { el.innerHTML = '<div style="font-size:12px; color:var(--text-dim); font-style:italic;">No tags yet.</div>'; return; }
        el.innerHTML = tags.map(function(t) {
            return '<div style="display:flex; align-items:center; gap:8px; background:var(--bg-code); border-radius:4px; padding:5px 8px;">'
                + '<span style="display:inline-block; width:12px; height:12px; border-radius:2px; background:' + esc(t.color) + ';"></span>'
                + '<span style="flex:1; font-size:13px;">' + esc(t.name) + '</span>'
                + '<button class="kanban-move-btn" style="color:#ef4444;" onclick="deleteTag(\'' + esc(t.id) + '\')">✕</button>'
                + '</div>';
        }).join('');
    });
}

function createTag() {
    var name = (document.getElementById('tagmgr-name').value || '').trim();
    var color = document.getElementById('tagmgr-color').value || '#6b7280';
    if (!name) return;
    var st = document.getElementById('tagmgr-status');
    st.textContent = 'Creating…'; st.style.color = 'var(--text-dim)';
    fetch('/api/kanban/tags', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ name: name, color: color })
    }).then(function(r) { return r.json().then(function(b) { return {ok: r.ok, body: b}; }); })
    .then(function(res) {
        if (res.ok) {
            document.getElementById('tagmgr-name').value = '';
            st.textContent = 'Created!'; st.style.color = '#22c55e';
            _refreshTagManagerList();
            _refreshTagPicker();
        } else {
            st.textContent = res.body.error || 'Error'; st.style.color = '#ef4444';
        }
    });
}

function deleteTag(tagId) {
    if (!confirm('Delete this tag? It will be removed from all tasks.')) return;
    fetch('/api/kanban/tags/' + tagId, { method: 'DELETE' })
        .then(function() { _refreshTagManagerList(); _refreshTagPicker(); refreshKanbanTasks(); });
}

// ── Tier 2: Task Tag Picker ───────────────────────────────────────────────
var _tagPickerTaskId = null;

function _refreshTagPicker() {
    _loadAllTags(function(tags) {
        var sel = document.getElementById('task-tag-picker');
        if (!sel) return;
        var current = sel.value;
        sel.innerHTML = '<option value="">— assign tag —</option>'
            + tags.map(function(t) {
                return '<option value="' + t.id + '"' + (t.id === current ? ' selected' : '') + '>' + (t.name) + '</option>';
            }).join('');
    });
}

function _loadTaskTags(taskId, existingTags) {
    _tagPickerTaskId = taskId;
    var esc = window.ICDEV && ICDEV.escapeHTML ? ICDEV.escapeHTML : function(s) { return String(s || ''); };
    var el = document.getElementById('task-tags-assigned');
    if (!el) return;
    function renderAssigned(tags) {
        el.innerHTML = tags.length
            ? tags.map(function(t) {
                return '<span style="background:' + esc(t.color) + '33; color:' + esc(t.color) + '; font-size:11px; padding:2px 7px; border-radius:4px; cursor:pointer;" '
                    + 'title="Remove tag" onclick="removeTaskTag(\'' + esc(t.id) + '\')">'
                    + esc(t.name) + ' ✕</span>';
            }).join('')
            : '<span style="font-size:11px; color:var(--text-dim); font-style:italic;">None</span>';
    }
    renderAssigned(existingTags || []);
    _refreshTagPicker();
}

function assignTag() {
    if (!_tagPickerTaskId) return;
    var tagId = document.getElementById('task-tag-picker').value;
    if (!tagId) return;
    fetch('/api/kanban/tasks/' + _tagPickerTaskId + '/tags', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ tag_id: tagId })
    }).then(function() {
        fetch('/api/kanban/tasks/' + _tagPickerTaskId + '/tags')
            .then(function(r) { return r.json(); })
            .then(function(data) { _loadTaskTags(_tagPickerTaskId, data.tags || []); refreshKanbanTasks(); });
    });
}

function removeTaskTag(tagId) {
    if (!_tagPickerTaskId) return;
    fetch('/api/kanban/tasks/' + _tagPickerTaskId + '/tags/' + tagId, { method: 'DELETE' })
        .then(function() {
            fetch('/api/kanban/tasks/' + _tagPickerTaskId + '/tags')
                .then(function(r) { return r.json(); })
                .then(function(data) { _loadTaskTags(_tagPickerTaskId, data.tags || []); refreshKanbanTasks(); });
        });
}

// Comments
var _commentsTaskId = null;
function _loadComments(taskId) {
    _commentsTaskId = taskId;
    var listEl = document.getElementById('task-comments-list');
    if (!listEl) return;
    listEl.innerHTML = '<div style="font-size:11px; color:var(--text-dim);">Loading…</div>';
    fetch('/api/kanban/tasks/' + taskId + '/comments')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var comments = data.comments || [];
            if (comments.length === 0) {
                listEl.innerHTML = '<div style="font-size:11px; color:var(--text-dim); font-style:italic;">No comments yet.</div>';
                return;
            }
            var esc = window.ICDEV && ICDEV.escapeHTML ? ICDEV.escapeHTML : function(s) { return String(s || ''); };
            listEl.innerHTML = comments.map(function(c) {
                var ts = c.created_at ? new Date(c.created_at).toLocaleString() : '';
                return '<div style="background:var(--bg-code); border-radius:4px; padding:6px 8px; font-size:12px;">'
                    + '<span style="font-weight:600; color:var(--text-primary);">' + esc(c.author) + '</span>'
                    + '<span style="color:var(--text-dim); margin-left:6px; font-size:10px;">' + ts + '</span>'
                    + '<div style="margin-top:3px; white-space:pre-wrap; word-break:break-word;">' + esc(c.body) + '</div>'
                    + '</div>';
            }).join('');
            listEl.scrollTop = listEl.scrollHeight;
        })
        .catch(function() {
            listEl.innerHTML = '<div style="font-size:11px; color:#ef4444;">Failed to load comments.</div>';
        });
}

function postComment() {
    if (!_commentsTaskId) return;
    var input = document.getElementById('task-comment-input');
    var body = (input.value || '').trim();
    if (!body) return;
    fetch('/api/kanban/tasks/' + _commentsTaskId + '/comments', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ body: body, author: 'dashboard' })
    }).then(function(r) {
        if (r.ok) {
            input.value = '';
            _loadComments(_commentsTaskId);
        }
    });
}

// OPT-68 Pattern 1: filter-as-you-type across all visible kanban cards
function applyKanbanFilter(query) {
    var q = (query || '').trim().toLowerCase();
    var matched = 0;
    document.querySelectorAll('.kanban-card').forEach(function(card) {
        var text = (card.textContent || '').toLowerCase();
        var tid = (card.getAttribute('data-task-id') || '').toLowerCase();
        var show = !q || text.indexOf(q) !== -1 || tid.indexOf(q) !== -1;
        card.style.display = show ? '' : 'none';
        if (show) matched++;
    });
    var countEl = document.getElementById('kanban-filter-count');
    if (countEl) countEl.textContent = q ? matched + ' match' + (matched === 1 ? '' : 'es') : '';
}

function setExecutorChain(value) {
    fetch('/api/kanban/settings/executor-chain', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({chain: value.split(',')}),
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.error) {
            alert('Executor chain update failed: ' + data.error);
        } else {
            // Best-effort toast instead of alert
            var el = document.getElementById('kanban-filter-count');
            if (el) {
                var old = el.textContent;
                el.textContent = 'Executor chain updated ✓';
                setTimeout(function() { el.textContent = old; }, 2000);
            }
        }
    })
    .catch(function(err) {
        console.error('setExecutorChain failed:', err);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    refreshKanbanTasks();

    // Load current executor chain setting into the header toggle
    fetch('/api/kanban/settings/executor-chain')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.chain) {
            var sel = document.getElementById('kanban-executor-chain');
            var wanted = data.chain.join(',');
            for (var i = 0; i < sel.options.length; i++) {
                if (sel.options[i].value === wanted) {
                    sel.selectedIndex = i;
                    break;
                }
            }
        }
    })
    .catch(function(err) {
        console.error('Failed to load executor chain setting:', err);
    });

    // Wire filter input once debounce_filter.js is ready
    var input = document.getElementById('kanban-filter-input');
    if (input && window.ICDEV && ICDEV.debounceFilter) {
        ICDEV.debounceFilter.bind(input, {
            delayMs: 200,
            onFilter: applyKanbanFilter,
        });
    } else if (input) {
        // Fallback: plain listener (no debounce)
        input.addEventListener('input', function() { applyKanbanFilter(input.value); });
    }
});
</script>
<script src="{{ url_for('static', filename='js/debounce_filter.js') }}"></script>
<script src="{{ url_for('static', filename='js/undo_toast.js') }}"></script>
<script src="{{ url_for('static', filename='js/mermaid-icdev.js') }}"></script>

<style>
.kanban-move-btn {
    background: transparent; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 4px; padding: 2px 6px; font-size: 10px; cursor: pointer; line-height: 1;
}
.kanban-move-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
</style>

{% set iqe_canvas = "kanban" %}
{% set iqe_api_route = "/api/kanban/iqe-query" %}
{% set iqe_title = "Query Task Board" %}
{% set iqe_examples = [
    {"label": "In-progress tasks", "query": "foreach t in kanban.tasks where t.status == \"in_progress\" select t.id, t.title, t.priority, t.executor_type"},
    {"label": "High priority backlog", "query": "foreach t in kanban.tasks where t.priority == \"high\" where t.status == \"backlog\" select t.id, t.title, t.task_type, t.created_at"},
    {"label": "Failed tasks", "query": "foreach t in kanban.tasks where t.failure_count > 0 select t.id, t.title, t.failure_count, t.last_failure_reason"},
    {"label": "Epic summary", "query": "foreach e in kanban.epics select e.epic_key, e.task_count, e.done_count, e.in_progress_count"}
] %}
{% include "includes/iqe_query_widget.html" %}
{% endblock %}