{% extends "base.html" %}

{% block title %}AO Issue Board{% endblock %}

{% block body %}
<div id="board-wrapper">
{% include '_board_partial.html' %}
</div>
<div id="issueModal" class="fixed inset-0 bg-crust/80 backdrop-blur-sm hidden items-center justify-center z-50" onclick="closeIssueModal()">
    <div class="bg-base rounded-lg w-full max-w-4xl mx-4 border border-surface0 max-h-[90vh] flex flex-col transition-all duration-200" id="issueDialog" onclick="event.stopPropagation()">
        <div class="flex justify-between items-center p-6 pb-4 border-b border-surface0">
            <h2 class="text-xl font-bold text-text" id="modalTitle">New Issue</h2>
            <div class="flex items-center gap-2">
                <button onclick="toggleModalMaximize()" id="maximizeBtn" title="Maximize" class="text-subtext0 hover:text-text">
                    <svg id="maximizeIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4"></path></svg>
                    <svg id="restoreIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4H4v5h5zm6 0h5V4h-5v5zm0 6h5v5h-5v-5zm-6 0H4v5h5v-5z"></path></svg>
                </button>
                <button onclick="closeIssueModal()" class="text-subtext0 hover:text-text">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
        </div>
        <form id="issueForm" onsubmit="submitIssue(event)" class="flex-1 flex flex-col overflow-hidden">
            <div id="issueFormBody" class="overflow-y-auto flex-1 p-6">
            <input type="hidden" name="issue_id" id="fIssueId">

            <!-- Row 1: Title -->
            <div class="mb-5">
                <label class="block text-sm font-medium mb-1 text-text">Title <span class="text-red">*</span></label>
                <input type="text" name="title" id="fTitle" required class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue" placeholder="Issue title">
            </div>

            <!-- Row 2: Type, Status, Priority -->
            <div class="mb-5 grid grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium mb-1 text-text">Type</label>
                    <select name="type" id="fType" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue">
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-text">Status</label>
                    <select name="status" id="fStatus" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue">
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-text">Priority</label>
                    <select name="priority" id="fPriority" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue">
                    </select>
                </div>
            </div>

            <!-- Row 3: Confidence, Owner, Epic -->
            <div class="mb-5 grid grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium mb-1 text-text">Confidence</label>
                    <select name="confidence" id="fConfidence" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue">
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-text">Owner / Worker</label>
                    <select name="owner" id="fOwner" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue">
                        <option value="agent">agent</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-text">Epic</label>
                    <input type="text" name="epic" id="fEpic" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue" placeholder="Epic name">
                </div>
            </div>

            <!-- Row 4: Workflow expectation -->
            <div class="mb-5">
                <label class="block text-sm font-medium mb-1 text-text">Workflow</label>
                <select name="workflow_expectation" id="fWorkflowExpectation" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue">
                    <option value="none">No special workflow requirements</option>
                    <option value="worktree">Separate worktree required</option>
                    <option value="stacked">Stacked diffs preferred</option>
                    <option value="stacked_worktree">Stacked diffs + separate worktree</option>
                </select>
                <p id="fWorkflowHelp" class="mt-1 text-xs text-subtext0">No specific branching/worktree flow is required for this issue.</p>
            </div>

            <!-- Row 5: Version -->
            <div class="mb-5">
                <label class="block text-sm font-medium mb-1 text-text">Version</label>
                <input type="text" name="version" id="fVersion" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue" placeholder="Defaults from project .version when omitted">
            </div>

            <!-- Row 6: External Ref -->
            <div class="mb-5">
                <label class="block text-sm font-medium mb-1 text-text">External Ref</label>
                <input type="text" name="external_ref" id="fExternalRef" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue" placeholder="JIRA-123, GitHub URL, etc.">
            </div>

            <!-- Row 7: Notes -->
            <div class="mb-5" id="notesFieldRow">
                <label class="block text-sm font-medium mb-1 text-text">Notes</label>
                <p class="text-xs text-subtext0 mb-1">Supports Markdown.</p>
                <textarea name="notes" id="fNotes" rows="4" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 focus:outline-none focus:border-blue resize-y min-h-[8rem] transition-all duration-200" placeholder="Additional notes... (Markdown supported)"></textarea>
            </div>

            <!-- Read-only metadata (shown only in edit mode) -->
            <div id="metadataSection" class="mb-5 hidden">
                <div class="border-t border-surface0 pt-4 mt-2">
                    <h3 class="text-sm font-semibold text-subtext0 mb-3 uppercase tracking-wide">Metadata</h3>
                    <div class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
                        <div class="flex justify-between"><span class="text-subtext0">ID</span><span class="text-text font-mono" id="metaId">-</span></div>
                        <div class="flex justify-between"><span class="text-subtext0">Created</span><span class="text-text" id="metaCreated">-</span></div>
                        <div class="flex justify-between"><span class="text-subtext0">Updated</span><span class="text-text" id="metaUpdated">-</span></div>
                        <div class="flex justify-between"><span class="text-subtext0">Started</span><span class="text-text" id="metaStarted">-</span></div>
                        <div class="flex justify-between"><span class="text-subtext0">Completed</span><span class="text-text" id="metaCompleted">-</span></div>
                        <div class="flex justify-between"><span class="text-subtext0">Duration</span><span class="text-text" id="metaDuration">-</span></div>
                    </div>
                </div>
            </div>

            <!-- Read-only sections (shown only in edit mode when data exists) -->
            <div id="extraSections" class="hidden">
                <div id="requirementsSection" class="mb-5 hidden">
                    <div class="border-t border-surface0 pt-4 mt-2">
                        <h3 class="text-sm font-semibold text-subtext0 mb-2 uppercase tracking-wide">Requirements</h3>
                        <ul class="list-disc list-inside text-sm text-text space-y-1" id="metaRequirements"></ul>
                    </div>
                </div>
                <div id="acceptanceSection" class="mb-5 hidden">
                    <div class="border-t border-surface0 pt-4 mt-2">
                        <h3 class="text-sm font-semibold text-subtext0 mb-2 uppercase tracking-wide">Acceptance Criteria</h3>
                        <ul class="space-y-1 text-sm" id="metaAcceptance"></ul>
                    </div>
                </div>
                <div id="depsSection" class="mb-5 hidden">
                    <div class="border-t border-surface0 pt-4 mt-2">
                        <h3 class="text-sm font-semibold text-subtext0 mb-2 uppercase tracking-wide">Dependencies</h3>
                        <div class="text-sm text-text" id="metaDeps"></div>
                    </div>
                </div>
                <div id="logSection" class="mb-5 hidden">
                    <div class="border-t border-surface0 pt-4 mt-2">
                        <h3 class="text-sm font-semibold text-subtext0 mb-2 uppercase tracking-wide">Log</h3>
                        <div class="space-y-2 text-sm max-h-40 overflow-y-auto" id="metaLog"></div>
                    </div>
                </div>
                <div id="lessonsSection" class="mb-5 hidden">
                    <div class="border-t border-surface0 pt-4 mt-2">
                        <h3 class="text-sm font-semibold text-subtext0 mb-2 uppercase tracking-wide">Lessons Learned</h3>
                        <div class="space-y-2 text-sm max-h-40 overflow-y-auto" id="metaLessons"></div>
                    </div>
                </div>
                <div id="filesSection" class="mb-5 hidden">
                    <div class="border-t border-surface0 pt-4 mt-2">
                        <h3 class="text-sm font-semibold text-subtext0 mb-2 uppercase tracking-wide">Attached Files</h3>
                        <ul class="space-y-1 text-sm" id="metaFiles"></ul>
                    </div>
                </div>
            </div>

            <!-- Upload section (available in both create and edit) -->
            <div id="uploadSection" class="mb-5">
                <div class="border-t border-surface0 pt-4 mt-2">
                    <h3 class="text-sm font-semibold text-subtext0 mb-2 uppercase tracking-wide">Upload Files</h3>
                    <ul class="space-y-1 text-sm mb-2" id="pendingFiles"></ul>
                    <div id="fileDropZone" class="mt-2 border-2 border-dashed border-surface0 rounded p-3 text-center text-subtext0 text-xs cursor-pointer hover:border-blue transition-colors">
                        Drop files here or <label for="fileInput" class="text-blue cursor-pointer underline">browse</label>
                        <input type="file" id="fileInput" multiple class="hidden">
                    </div>
                </div>
            </div>
            </div>

            <!-- Footer buttons -->
            <div id="issueFormFooter" class="flex justify-end gap-2 p-4 border-t border-surface0 bg-base shrink-0">
                <button type="button" onclick="closeIssueModal()" class="px-4 py-2 border border-surface0 rounded hover:bg-surface0 text-text">Cancel</button>
                <button type="submit" id="modalSubmitBtn" class="px-4 py-2 bg-blue text-base rounded hover:bg-blue/80">Create</button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-crust/80 backdrop-blur-sm hidden items-center justify-center z-50" onclick="closeDeleteModal()">
    <div class="bg-base rounded-lg p-6 w-full max-w-sm mx-4 border border-surface0" onclick="event.stopPropagation()">
        <h2 class="text-xl font-bold mb-4 text-text">Delete Issue?</h2>
        <p class="text-subtext1 mb-6">Are you sure you want to delete issue <span id="deleteIssueId" class="font-mono"></span>? This cannot be undone.</p>
        <div class="flex justify-end gap-2">
            <button onclick="closeDeleteModal()" class="px-4 py-2 border border-surface0 rounded hover:bg-surface0 text-text">Cancel</button>
            <button onclick="executeDelete()" class="px-4 py-2 bg-red text-base rounded hover:bg-red/80">Delete</button>
        </div>
    </div>
</div>

<!-- Side Panel -->
<div id="sidePanel" class="fixed right-0 top-0 h-full w-[min(96vw,64rem)] bg-base border-l border-surface0 shadow-xl z-40 transform translate-x-full transition-transform duration-200 flex flex-col">
    <div class="flex justify-between items-center px-4 py-3 border-b border-surface0 flex-shrink-0">
        <span class="text-xs font-mono text-subtext0" id="panelIssueId"></span>
        <button onclick="closeSidePanel()" class="text-subtext0 hover:text-text">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
    </div>
    <div class="overflow-y-auto flex-1 p-4 text-sm" id="panelContent">
        <p class="text-subtext0">Loading...</p>
    </div>
    <div class="flex gap-2 px-4 py-3 border-t border-surface0 flex-shrink-0">
        <button id="panelEditBtn" onclick="openEditModal(currentPanelIssueId); closeSidePanel();" class="flex-1 px-3 py-2 bg-blue text-base rounded hover:bg-blue/80 text-xs">Edit</button>
        <button id="panelCloseBtn" onclick="panelCloseIssue()" class="flex-1 px-3 py-2 bg-surface0 text-text rounded hover:bg-surface1 text-xs">Close Issue</button>
    </div>
</div>

<!-- Manage Workers Modal -->
<div id="workerModal" class="fixed inset-0 bg-crust/80 backdrop-blur-sm hidden items-center justify-center z-50" onclick="closeWorkerModal()">
    <div class="bg-base rounded-lg p-6 w-full max-w-2xl mx-4 border border-surface0 max-h-[80vh] flex flex-col" onclick="event.stopPropagation()">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-text">Manage Workers</h2>
            <button onclick="closeWorkerModal()" class="text-subtext0 hover:text-text">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
        </div>
        <div id="workerList" class="space-y-2 mb-4 max-h-60 overflow-y-auto"></div>
        <div class="border-t border-surface0 pt-4">
            <h3 class="text-sm font-semibold text-subtext0 mb-2">Add Worker</h3>
            <div class="flex gap-2 mb-2">
                <input type="text" id="newWorkerName" placeholder="name" class="flex-1 bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
                <select id="newWorkerEngine" class="bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
                    <option value="claude">Claude</option>
                    <option value="copilot">Copilot</option>
                    <option value="opencode">OpenCode</option>
                </select>
            </div>
            <div class="flex gap-2 mb-2">
                <input type="text" id="newWorkerModel" placeholder="model (e.g. claude-sonnet-4)" class="flex-1 bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
                <input type="text" id="newWorkerContext" placeholder="context file path" class="flex-1 bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
            </div>
            <div class="flex gap-2">
                <input type="text" id="newWorkerInstructions" placeholder="instructions" class="flex-1 bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
                <select id="newWorkerCompletionAction" class="bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
                    <option value="close" selected>Close</option>
                    <option value="none">None</option>
                    <option value="review">Review</option>
                    <option value="commit">Commit</option>
                    <option value="pull_request">Pull Request</option>
                </select>
                <button onclick="addWorker()" class="px-4 py-2 bg-blue text-base rounded hover:bg-blue/80 text-sm whitespace-nowrap">Add</button>
            </div>
        </div>
    </div>
</div>

<!-- Keyboard Shortcut Help Overlay -->
<div id="dispatchModal" class="fixed inset-0 bg-crust/80 backdrop-blur-sm hidden items-center justify-center z-50" onclick="closeDispatchModal()">
    <div class="bg-base rounded-lg p-6 w-full max-w-lg mx-4 border border-surface0" onclick="event.stopPropagation()">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-text">Dispatch Worktree</h2>
            <button onclick="closeDispatchModal()" class="text-subtext0 hover:text-text">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
        </div>
        <p class="text-sm text-subtext1 mb-4">Create a git worktree, assign all currently filtered issues to a worker, and set up an isolated workspace.</p>
        <div class="space-y-3">
            <div>
                <label class="block text-xs text-subtext0 mb-1">Worker</label>
                <select id="dispatchWorker" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue"></select>
            </div>
            <div>
                <label class="block text-xs text-subtext0 mb-1">Branch name (optional)</label>
                <input type="text" id="dispatchBranch" placeholder="wt/worker-name (auto-generated)" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
            </div>
            <div class="bg-mantle rounded p-3 border border-surface0">
                <p class="text-xs text-subtext0 mb-1">Issues to assign (<span id="dispatchIssueCount">0</span> filtered):</p>
                <div id="dispatchIssueList" class="text-xs text-text max-h-32 overflow-y-auto space-y-1"></div>
            </div>
            <div>
                <label class="block text-xs text-subtext0 mb-1">Launch with</label>
                <select id="dispatchLaunchWith" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
                    <option value="">Don't open</option>
                    <option value="editor">Editor (config)</option>
                    <option value="copilot">Copilot (VS Code)</option>
                    <option value="opencode">OpenCode</option>
                    <option value="claude">Claude</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-subtext0 mb-1">Completion action</label>
                <select id="dispatchCompletionAction" class="w-full bg-mantle text-text border border-surface0 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue">
                    <option value="none">None</option>
                    <option value="close" selected>Close</option>
                    <option value="review">Review</option>
                    <option value="commit">Commit</option>
                    <option value="pull_request">Pull Request</option>
                </select>
            </div>
        </div>
        <div class="flex justify-end gap-2 mt-4">
            <button onclick="closeDispatchModal()" class="px-4 py-2 bg-mantle text-text border border-surface0 rounded hover:bg-surface0 text-sm">Cancel</button>
            <button onclick="executeDispatch()" id="dispatchBtn" class="px-4 py-2 bg-mauve text-base rounded hover:bg-mauve/80 text-sm">Dispatch</button>
        </div>
    </div>
</div>

<div id="shortcutHelp" class="fixed inset-0 bg-crust/80 backdrop-blur-sm hidden items-center justify-center z-50" onclick="closeShortcutHelp()">
    <div class="bg-base rounded-lg border border-surface0 w-full max-w-md mx-4 p-6" onclick="event.stopPropagation()">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-bold text-text">Keyboard Shortcuts</h2>
            <button onclick="closeShortcutHelp()" class="text-subtext0 hover:text-text">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
        </div>
        <table class="w-full text-sm">
            <tbody class="divide-y divide-surface0">
                <tr class="py-2"><td class="py-2 pr-4"><kbd class="bg-surface0 text-text px-2 py-0.5 rounded font-mono text-xs">n</kbd></td><td class="py-2 text-subtext1">New Issue</td></tr>
                <tr><td class="py-2 pr-4"><kbd class="bg-surface0 text-text px-2 py-0.5 rounded font-mono text-xs">r</kbd></td><td class="py-2 text-subtext1">Refresh board</td></tr>
                <tr><td class="py-2 pr-4"><kbd class="bg-surface0 text-text px-2 py-0.5 rounded font-mono text-xs">/</kbd></td><td class="py-2 text-subtext1">Focus search</td></tr>
                <tr><td class="py-2 pr-4"><kbd class="bg-surface0 text-text px-2 py-0.5 rounded font-mono text-xs">?</kbd></td><td class="py-2 text-subtext1">Toggle this help</td></tr>
                <tr><td class="py-2 pr-4"><kbd class="bg-surface0 text-text px-2 py-0.5 rounded font-mono text-xs">Escape</kbd></td><td class="py-2 text-subtext1">Close modal / panel</td></tr>
                <tr><td class="py-2 pr-4"><kbd class="bg-surface0 text-text px-2 py-0.5 rounded font-mono text-xs">F11</kbd> / <kbd class="bg-surface0 text-text px-2 py-0.5 rounded font-mono text-xs">Alt+Enter</kbd></td><td class="py-2 text-subtext1">Toggle modal maximize</td></tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
.toast{position:fixed;bottom:1.5rem;right:1.5rem;padding:.75rem 1.25rem;border-radius:.5rem;color:#cdd6f4;font-size:.875rem;z-index:9999;opacity:0;transform:translateY(1rem);transition:opacity .3s,transform .3s;max-width:28rem;line-height:1.4;white-space:pre-line}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{background:#1e1e2e;border:1px solid #a6e3a1}
.toast.error{background:#1e1e2e;border:1px solid #f38ba8}
</style>
<script>
function showToast(msg, type, ms) {
    var t = document.createElement('div');
    t.className = 'toast ' + (type || 'success');
    t.textContent = msg;
    document.body.appendChild(t);
    requestAnimationFrame(function(){ t.classList.add('show'); });
    setTimeout(function(){ t.classList.remove('show'); setTimeout(function(){ t.remove(); }, 300); }, ms || 4000);
}
var currentLayout = "{{ layout }}";
var deleteIssueId = null;
var editingIssueId = null;
var pendingCreateFiles = [];
var _meta = null;
var _workers = [];
var _issueLaunchPopover = null;
var _bulkEpicPopover = null;
var currentTopTab = 'kanban';

function getColumnType() {
    return document.getElementById('board-container').dataset.columnType;
}

function refreshBoard() {
    htmx.ajax('GET', '/board?layout=' + currentLayout, {target: '#board-wrapper', swap: 'innerHTML'});
}

function switchLayout(newLayout) {
    currentLayout = newLayout;
    localStorage.setItem('boardLayout', newLayout);
    location.href = '/?layout=' + newLayout;
}

function _applyTopTabState() {
    var kanbanBtn = document.getElementById('topTabKanbanBtn');
    var worktreesBtn = document.getElementById('topTabWorktreesBtn');
    var kanbanPanel = document.getElementById('kanbanTabPanel');
    var worktreesPanel = document.getElementById('worktreesTabPanel');
    var onKanban = currentTopTab !== 'worktrees';

    if (kanbanBtn && worktreesBtn) {
        kanbanBtn.setAttribute('aria-selected', onKanban ? 'true' : 'false');
        worktreesBtn.setAttribute('aria-selected', onKanban ? 'false' : 'true');
        kanbanBtn.className = onKanban
            ? 'px-4 py-2 rounded-l-lg border border-surface0 bg-blue text-base focus:outline-none focus:ring-2 focus:ring-blue'
            : 'px-4 py-2 rounded-l-lg border border-surface0 bg-mantle text-text hover:bg-surface0 focus:outline-none focus:ring-2 focus:ring-blue';
        worktreesBtn.className = onKanban
            ? 'px-4 py-2 rounded-r-lg border border-l-0 border-surface0 bg-mantle text-text hover:bg-surface0 focus:outline-none focus:ring-2 focus:ring-blue'
            : 'px-4 py-2 rounded-r-lg border border-l-0 border-surface0 bg-blue text-base focus:outline-none focus:ring-2 focus:ring-blue';
    }

    if (kanbanPanel) {
        kanbanPanel.classList.toggle('hidden', !onKanban);
    }
    if (worktreesPanel) {
        worktreesPanel.classList.toggle('hidden', onKanban);
    }
}

function switchTopTab(tabName) {
    currentTopTab = (tabName === 'worktrees') ? 'worktrees' : 'kanban';
    localStorage.setItem('topTab', currentTopTab);
    _applyTopTabState();
    if (currentTopTab === 'worktrees') {
        loadBranchWorktrees();
    }
}

function initTopTabs() {
    var saved = localStorage.getItem('topTab');
    currentTopTab = (saved === 'worktrees') ? 'worktrees' : 'kanban';
    _applyTopTabState();
}

// ── Meta / dynamic selects ───────────────────────────────────────────

function _fillSelect(id, items, leadLabel) {
    var sel = document.getElementById(id);
    if (!sel) return;
    sel.innerHTML = '';
    if (leadLabel != null) {
        var lo = document.createElement('option');
        lo.value = ''; lo.textContent = leadLabel; sel.appendChild(lo);
    }
    (items || []).forEach(function(item) {
        var o = document.createElement('option');
        o.value = item.value; o.textContent = item.label; sel.appendChild(o);
    });
}

function populateFilterSelects() {
    if (!_meta) return;
    _fillSelect('typeFilter', _meta.types, 'All Types');
    _fillSelect('statusFilter', _meta.statuses, 'All Statuses');
    _fillSelect('priorityFilter', _meta.priorities, 'All Priorities');
}

function populateModalSelects() {
    if (!_meta) return;
    _fillSelect('fType', _meta.types, null);
    _fillSelect('fStatus', _meta.statuses, null);
    _fillSelect('fPriority', _meta.priorities, null);
    _fillSelect('fConfidence', _meta.confidences, null);
}

function _defaultIssueVersion() {
    if (_meta && typeof _meta.version_default === 'string') {
        return _meta.version_default;
    }
    return '';
}

function _workflowExpectationFromIssue(issue) {
    var stacked = (issue.stacked_diff || 'optional');
    var worktree = (issue.separate_worktree || 'optional');
    if (stacked === 'yes' && worktree === 'required') return 'stacked_worktree';
    if (stacked === 'yes') return 'stacked';
    if (worktree === 'required') return 'worktree';
    if (stacked === 'no' && worktree === 'no') return 'none';
    return 'none';
}

function _applyWorkflowExpectation(payload, mode) {
    var m = mode || 'none';
    if (m === 'stacked_worktree') {
        payload.stacked_diff = 'yes';
        payload.separate_worktree = 'required';
        return;
    }
    if (m === 'stacked') {
        payload.stacked_diff = 'yes';
        payload.separate_worktree = 'optional';
        return;
    }
    if (m === 'worktree') {
        payload.stacked_diff = 'optional';
        payload.separate_worktree = 'required';
        return;
    }
    if (m === 'none') {
        payload.stacked_diff = 'no';
        payload.separate_worktree = 'no';
        return;
    }
    payload.stacked_diff = 'no';
    payload.separate_worktree = 'no';
}

function _workflowExpectationLabel(mode) {
    if (mode === 'stacked_worktree') return 'Stacked diffs + separate worktree';
    if (mode === 'stacked') return 'Stacked diffs preferred';
    if (mode === 'worktree') return 'Separate worktree required';
    if (mode === 'none') return 'No special workflow requirements';
    return 'No special workflow requirements';
}

function _workflowExpectationDescription(mode) {
    if (mode === 'stacked_worktree') return 'Use stacked diffs and keep work in a separate worktree for stronger isolation.';
    if (mode === 'stacked') return 'Prefer a stacked-diff workflow so related changes are split into reviewable layers.';
    if (mode === 'worktree') return 'Use a dedicated worktree for this issue to isolate local changes from other work.';
    return 'No specific branching/worktree flow is required for this issue.';
}

function _updateWorkflowExpectationHelp() {
    var sel = document.getElementById('fWorkflowExpectation');
    var help = document.getElementById('fWorkflowHelp');
    if (!sel || !help) return;
    help.textContent = _workflowExpectationDescription(sel.value || 'none');
}

async function loadMeta() {
    try {
        var resp = await fetch('/api/meta');
        if (!resp.ok) return;
        var json = await resp.json();
        _meta = json.data;
        populateFilterSelects();
        populateModalSelects();
    } catch (e) {
        console.error('Failed to load meta:', e);
    }
}

async function loadWorkers() {
    try {
        var resp = await fetch('/api/workers');
        if (!resp.ok) return;
        var json = await resp.json();
        _workers = json.data.workers || [];
        populateOwnerSelect();
        populateWorkerFilter();
    } catch (e) {
        console.error('Failed to load workers:', e);
    }
}

async function openWorktreeAction(path, launchWith) {
    var resp = await fetch('/api/worktree/open', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({path: path, launch_with: launchWith}),
    });
    if (!resp.ok) {
        var err = await resp.json();
        showToast(err.errors && err.errors[0] ? err.errors[0].detail : 'Failed to open worktree', 'error');
        return;
    }
    var data = (await resp.json()).data;
    showToast('Opened ' + data.path + ' with ' + data.launched_with, 'success', 3000);
}

function closeIssueLaunchMenu() {
    if (_issueLaunchPopover) {
        _issueLaunchPopover.remove();
        _issueLaunchPopover = null;
    }
}

async function launchIssueFolder(issueId, launchWith) {
    var resp = await fetch('/api/worktree/open-issue', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({issue_id: issueId, launch_with: launchWith}),
    });
    if (!resp.ok) {
        var err = await resp.json();
        showToast(err.errors && err.errors[0] ? err.errors[0].detail : 'Failed to open issue folder', 'error');
        return;
    }
    var data = (await resp.json()).data;
    showToast('Opened ' + data.path + ' with ' + data.launched_with, 'success', 3000);
}

async function openIssueLaunchMenu(event, issueId) {
    event.stopPropagation();
    closeIssueLaunchMenu();
    var btn = event.currentTarget;
    var rect = btn.getBoundingClientRect();
    var resp = await fetch('/api/worktree/issue-folder/' + encodeURIComponent(issueId));
    if (!resp.ok) {
        var err = await resp.json();
        showToast(err.errors && err.errors[0] ? err.errors[0].detail : 'Failed to resolve issue folder', 'error');
        return;
    }

    var info = (await resp.json()).data;
    var pop = document.createElement('div');
    pop.className = 'fixed bg-base border border-surface0 rounded shadow-lg p-3 z-50 min-w-[16rem]';
    pop.style.top = (rect.bottom + 4) + 'px';
    pop.style.left = Math.max(8, rect.left - 40) + 'px';

    var title = document.createElement('div');
    title.className = 'text-xs text-subtext0 mb-2';
    title.textContent = info.is_project_root ? 'Project folder' : 'Issue worktree folder';
    pop.appendChild(title);

    var path = document.createElement('div');
    path.className = 'text-xs text-text font-mono truncate mb-2';
    path.title = info.path;
    path.textContent = info.path;
    pop.appendChild(path);

    var list = document.createElement('div');
    list.className = 'space-y-1';
    (info.targets || []).forEach(function(t) {
        var b = document.createElement('button');
        b.className = 'w-full text-left px-2 py-1 rounded border border-surface0 text-xs';
        b.textContent = t.label;
        if (t.available) {
            b.className += ' text-subtext1 hover:text-text hover:bg-surface0';
            b.addEventListener('click', async function() {
                await launchIssueFolder(issueId, t.key);
                closeIssueLaunchMenu();
            });
        } else {
            b.className += ' text-subtext0 opacity-60 cursor-not-allowed';
            b.disabled = true;
        }
        list.appendChild(b);
    });
    pop.appendChild(list);

    document.body.appendChild(pop);
    _issueLaunchPopover = pop;

    setTimeout(function() {
        document.addEventListener('click', function handler(e) {
            if (_issueLaunchPopover && !_issueLaunchPopover.contains(e.target) && !btn.contains(e.target)) {
                closeIssueLaunchMenu();
                document.removeEventListener('click', handler);
            }
        });
    }, 0);
}

function openWorktreeGitAction(path, action) {
    return fetch('/api/worktree/action', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({path: path, action: action}),
    });
}

function _dropdownWithButton(options, runLabel) {
    var wrap = document.createElement('div');
    wrap.className = 'flex items-center gap-1';

    var sel = document.createElement('select');
    sel.className = 'bg-mantle text-text border border-surface0 rounded px-2 py-1 text-xs max-w-[11rem]';
    (options || []).forEach(function(opt) {
        var o = document.createElement('option');
        o.value = opt.value;
        o.textContent = opt.label;
        if (opt.disabled) o.disabled = true;
        sel.appendChild(o);
    });

    var btn = document.createElement('button');
    btn.className = 'px-2 py-1 rounded border border-surface0 text-subtext1 hover:text-text hover:bg-surface0 text-xs';
    btn.textContent = runLabel;

    wrap.appendChild(sel);
    wrap.appendChild(btn);
    return {wrap: wrap, select: sel, button: btn};
}

async function loadBranchWorktrees() {
    var source = document.getElementById('worktreeSourceBranch');
    var list = document.getElementById('branchWorktreeList');
    if (!source || !list) return;
    source.textContent = 'Loading current branch…';
    list.innerHTML = '<div class="text-subtext0">Loading worktrees…</div>';

    var resp = await fetch('/api/worktree/current-branch');
    if (!resp.ok) {
        var err = await resp.json();
        source.textContent = 'Branch: unavailable';
        list.innerHTML = '<div class="text-red">' + _escHtml(err.errors && err.errors[0] ? err.errors[0].detail : 'Failed to load worktrees') + '</div>';
        return;
    }
    var data = (await resp.json()).data;
    source.textContent = 'Current branch: ' + (data.source_branch || 'unknown');
    list.innerHTML = '';
    if (!data.worktrees || data.worktrees.length === 0) {
        list.innerHTML = '<div class="text-subtext0">No managed worktrees for this branch.</div>';
        return;
    }

    var launchTargets = data.launch_targets || [];
    var gitActions = data.git_actions || [];

    data.worktrees.forEach(function(w) {
        var row = document.createElement('div');
        row.className = 'border border-surface0 rounded p-2 bg-base';

        var head = document.createElement('div');
        head.className = 'flex items-center justify-between gap-2';
        var left = document.createElement('div');
        left.className = 'min-w-0';
        var branch = document.createElement('div');
        branch.className = 'text-text';
        branch.textContent = w.branch || '(no branch)';
        var path = document.createElement('div');
        path.className = 'text-subtext0 truncate';
        path.title = w.path;
        path.textContent = w.path;
        left.appendChild(branch);
        left.appendChild(path);

        var actions = document.createElement('div');
        actions.className = 'flex gap-2 shrink-0';

        var launchOpts = [];
        launchTargets.forEach(function(t) {
            launchOpts.push({
                value: t.key,
                label: t.available ? t.label : (t.label + ' (unavailable)'),
                disabled: !t.available,
            });
        });
        var launcher = _dropdownWithButton(launchOpts, 'Open');
        var editorOpt = Array.from(launcher.select.options).find(function(o) { return o.value === 'editor' && !o.disabled; });
        if (editorOpt) {
            launcher.select.value = 'editor';
        } else {
            var firstEnabled = Array.from(launcher.select.options).find(function(o) { return !o.disabled; });
            if (firstEnabled) {
                launcher.select.value = firstEnabled.value;
            }
        }
        launcher.button.addEventListener('click', async function() {
            var choice = launcher.select.value;
            if (!choice) {
                showToast('Choose a launcher target first', 'error');
                return;
            }
            await openWorktreeAction(w.path, choice);
        });

        var actionOpts = [{value: '', label: 'Git action…', disabled: true}];
        gitActions.forEach(function(a) {
            actionOpts.push({
                value: a.key,
                label: a.supported ? a.label : (a.label + ' (hook)'),
                disabled: !a.supported && a.key !== 'rebase_hook' && a.key !== 'squash_hook',
            });
        });
        var gitMenu = _dropdownWithButton(actionOpts, 'Run');
        gitMenu.select.selectedIndex = 0;
        gitMenu.button.addEventListener('click', async function() {
            var action = gitMenu.select.value;
            if (!action) {
                showToast('Choose a git action first', 'error');
                return;
            }
            if (action === 'remove_force') {
                var ok = window.confirm('Force remove this worktree? This may discard uncommitted changes in the selected worktree.');
                if (!ok) {
                    return;
                }
            }
            var resp = await openWorktreeGitAction(w.path, action);
            var payload = await resp.json();
            if (!resp.ok) {
                showToast(payload.errors && payload.errors[0] ? payload.errors[0].detail : 'Git action failed', 'error');
                return;
            }
            var msg = payload.data && payload.data.message ? payload.data.message : ('Worktree action completed: ' + action);
            showToast(msg, 'success', 4000);
            await loadBranchWorktrees();
        });

        actions.appendChild(launcher.wrap);
        actions.appendChild(gitMenu.wrap);

        head.appendChild(left);
        head.appendChild(actions);
        row.appendChild(head);
        list.appendChild(row);
    });
}

function populateOwnerSelect() {
    var sel = document.getElementById('fOwner');
    if (!sel) return;
    var current = sel.value;
    sel.innerHTML = '';
    var defOpt = document.createElement('option');
    defOpt.value = 'agent'; defOpt.textContent = 'agent (default)';
    sel.appendChild(defOpt);
    _workers.forEach(function(w) {
        var o = document.createElement('option');
        o.value = w.name;
        o.textContent = w.name + ' (' + w.engine + ')';
        sel.appendChild(o);
    });
    if (current) sel.value = current;
}

function populateWorkerFilter() {
    var sel = document.getElementById('workerFilter');
    if (!sel) return;
    var current = sel.value;
    sel.innerHTML = '';
    var all = document.createElement('option');
    all.value = ''; all.textContent = 'All Workers';
    sel.appendChild(all);
    _workers.forEach(function(w) {
        var o = document.createElement('option');
        o.value = w.name;
        o.textContent = w.name;
        sel.appendChild(o);
    });
    if (current) sel.value = current;
}

function openWorkerModal() {
    renderWorkerList();
    document.getElementById('workerModal').classList.remove('hidden');
    document.getElementById('workerModal').classList.add('flex');
}

function closeWorkerModal() {
    document.getElementById('workerModal').classList.add('hidden');
    document.getElementById('workerModal').classList.remove('flex');
}

function renderWorkerList() {
    var container = document.getElementById('workerList');
    container.innerHTML = '';
    if (_workers.length === 0) {
        container.innerHTML = '<p class="text-subtext0 text-sm">No workers registered.</p>';
        return;
    }
    _workers.forEach(function(w) {
        var div = document.createElement('div');
        div.className = 'bg-mantle rounded px-3 py-2 border border-surface0';
        var header = document.createElement('div');
        header.className = 'flex justify-between items-center';
        header.innerHTML = '<div><span class="text-text font-medium">' + _escHtml(w.name) + '</span> <span class="text-xs text-subtext0">(' + _escHtml(w.engine) + ')</span>' + (w.label ? ' <span class="text-xs text-subtext1">' + _escHtml(w.label) + '</span>' : '') + '</div>';
        var rmBtn = document.createElement('button');
        rmBtn.className = 'text-red hover:text-red/80 text-xs';
        rmBtn.textContent = 'Remove';
        rmBtn.addEventListener('click', function() { removeWorker(w.name); });
        header.appendChild(rmBtn);
        div.appendChild(header);
        var details = [];
        if (w.model) details.push('<span class="text-subtext0">Model:</span> ' + _escHtml(w.model));
        if (w.context) details.push('<span class="text-subtext0">Context:</span> ' + _escHtml(w.context));
        if (w.instructions) details.push('<span class="text-subtext0">Instructions:</span> ' + _escHtml(w.instructions.length > 60 ? w.instructions.substring(0, 60) + '...' : w.instructions));
        if (details.length) {
            var meta = document.createElement('div');
            meta.className = 'mt-1 text-xs text-text space-x-3';
            meta.innerHTML = details.join(' &middot; ');
            div.appendChild(meta);
        }
        container.appendChild(div);
    });
}

async function addWorker() {
    var name = document.getElementById('newWorkerName').value.trim();
    var engine = document.getElementById('newWorkerEngine').value;
    var model = document.getElementById('newWorkerModel').value.trim();
    var context = document.getElementById('newWorkerContext').value.trim();
    var instructions = document.getElementById('newWorkerInstructions').value.trim();
    var completionAction = document.getElementById('newWorkerCompletionAction').value;
    if (!name) return;
    var payload = {name: name, engine: engine, completion_action: completionAction};
    if (model) payload.model = model;
    if (context) payload.context = context;
    if (instructions) payload.instructions = instructions;
    var resp = await fetch('/api/workers', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload),
    });
    if (resp.ok) {
        document.getElementById('newWorkerName').value = '';
        document.getElementById('newWorkerModel').value = '';
        document.getElementById('newWorkerContext').value = '';
        document.getElementById('newWorkerInstructions').value = '';
        await loadWorkers();
        renderWorkerList();
    } else {
        var err = await resp.json();
        alert(err.errors && err.errors[0] ? err.errors[0].detail : 'Failed to add worker');
    }
}

async function removeWorker(name) {
    var resp = await fetch('/api/workers/' + encodeURIComponent(name), {method: 'DELETE'});
    if (resp.ok) {
        await loadWorkers();
        renderWorkerList();
    }
}

async function moveIssue(issueId, target) {
    var colType = getColumnType();
    var body = colType === 'status'
        ? {target_status: target}
        : {target_priority: target};
    await fetch('/api/issues/' + issueId + '/move', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(body),
    });
}

function updateQuickMoveButtons() {
    var colType = getColumnType();
    document.querySelectorAll('[id^="quickMove-"]').forEach(function(container) {
        var card = container.closest('.issue-card');
        var id = card.dataset.issueId;
        container.textContent = '';
        var targets = colType === 'status'
            ? [['todo','Todo','text-subtext1 hover:text-blue'],['in_progress','In Progress','text-blue hover:text-blue/80'],['review','Review','text-mauve hover:text-mauve/80'],['done','Done','text-green hover:text-green/80'],['cancelled','Cancel','text-red hover:text-red/80']]
            : [['critical','Critical','text-red hover:text-red/80'],['high','High','text-red hover:text-red/80'],['medium','Med','text-yellow hover:text-yellow/80'],['low','Low','text-green hover:text-green/80'],['backlog','Backlog','text-subtext1 hover:text-text']];
        targets.forEach(function(t) {
            var btn = document.createElement('button');
            btn.className = t[2] + ' text-xs';
            btn.textContent = t[1];
            btn.addEventListener('click', function() { moveIssue(id, t[0]); });
            container.appendChild(btn);
        });
    });
}

// ── Unified Issue Modal ──────────────────────────────────────────────

function resetIssueForm() {
    document.getElementById('issueForm').reset();
    document.getElementById('fIssueId').value = '';
    document.getElementById('fType').value = 'feat';
    document.getElementById('fStatus').value = 'todo';
    document.getElementById('fPriority').value = 'backlog';
    document.getElementById('fConfidence').value = 'normal';
    document.getElementById('fWorkflowExpectation').value = 'none';
    _updateWorkflowExpectationHelp();
    document.getElementById('fOwner').value = 'agent';
    document.getElementById('fVersion').value = _defaultIssueVersion();
    populateOwnerSelect();
    document.getElementById('fNotes').value = '';
    document.getElementById('metadataSection').classList.add('hidden');
    document.getElementById('extraSections').classList.add('hidden');
    document.getElementById('filesSection').classList.add('hidden');
    pendingCreateFiles = [];
    _renderPendingFiles();
}

function _renderPendingFiles(existingFiles) {
    var list = document.getElementById('pendingFiles');
    list.innerHTML = '';
    var files = existingFiles || pendingCreateFiles;
    if (!files.length) {
        var li = document.createElement('li');
        li.className = 'text-subtext0 text-xs';
        li.textContent = editingIssueId ? 'No files selected.' : 'Files selected during create will upload after issue is created.';
        list.appendChild(li);
        return;
    }
    files.forEach(function(fileObj) {
        var li = document.createElement('li');
        li.className = 'text-text text-xs';
        li.textContent = fileObj.name;
        list.appendChild(li);
    });
}

function openCreateModal() {
    editingIssueId = null;
    resetIssueForm();
    document.getElementById('modalTitle').textContent = 'New Issue';
    document.getElementById('modalSubmitBtn').textContent = 'Create';
    document.getElementById('issueFormFooter').classList.add('sticky', 'bottom-0', 'z-10');
    _renderPendingFiles();
    document.getElementById('issueModal').classList.remove('hidden');
    document.getElementById('issueModal').classList.add('flex');
    document.getElementById('fTitle').focus();
}

async function openEditModal(issueId) {
    editingIssueId = issueId;
    resetIssueForm();
    document.getElementById('modalTitle').textContent = 'Edit Issue';
    document.getElementById('modalSubmitBtn').textContent = 'Save';
    document.getElementById('fIssueId').value = issueId;

    // Fetch full issue data from API
    try {
        var resp = await fetch('/api/issues/' + issueId);
        if (!resp.ok) { alert('Failed to load issue'); return; }
        var json = await resp.json();
        var issue = json.data;

        document.getElementById('fTitle').value = issue.title || '';
        document.getElementById('fType').value = issue.type || 'feat';
        document.getElementById('fStatus').value = issue.status || 'todo';
        document.getElementById('fPriority').value = issue.priority || 'backlog';
        document.getElementById('fConfidence').value = issue.confidence || 'normal';
        document.getElementById('fOwner').value = issue.owner || 'agent';
        document.getElementById('fEpic').value = issue.epic || '';
        document.getElementById('fNotes').value = issue.notes || '';
        document.getElementById('fExternalRef').value = issue.external_ref || '';
        document.getElementById('fWorkflowExpectation').value = _workflowExpectationFromIssue(issue);
        _updateWorkflowExpectationHelp();
        document.getElementById('fVersion').value = issue.version || '';

        // Metadata
        document.getElementById('metadataSection').classList.remove('hidden');
        document.getElementById('metaId').textContent = issue.id || '-';
        document.getElementById('metaCreated').textContent = issue.created || '-';
        document.getElementById('metaUpdated').textContent = issue.updated || '-';
        document.getElementById('metaStarted').textContent = issue.started_at || '-';
        document.getElementById('metaCompleted').textContent = issue.completed_at || '-';
        document.getElementById('metaDuration').textContent = issue.duration_minutes ? issue.duration_minutes + ' min' : '-';

        // Extra sections
        document.getElementById('extraSections').classList.remove('hidden');

        // Requirements
        var reqSec = document.getElementById('requirementsSection');
        var reqList = document.getElementById('metaRequirements');
        reqList.innerHTML = '';
        if (issue.requirements && issue.requirements.length > 0) {
            reqSec.classList.remove('hidden');
            issue.requirements.forEach(function(r) {
                var li = document.createElement('li');
                li.textContent = r;
                li.className = 'text-text';
                reqList.appendChild(li);
            });
        } else { reqSec.classList.add('hidden'); }

        // Acceptance criteria
        var acSec = document.getElementById('acceptanceSection');
        var acList = document.getElementById('metaAcceptance');
        acList.innerHTML = '';
        if (issue.acceptance_criteria && issue.acceptance_criteria.length > 0) {
            acSec.classList.remove('hidden');
            issue.acceptance_criteria.forEach(function(ac) {
                var li = document.createElement('li');
                li.className = 'flex items-center gap-2';
                var icon = ac.done ? '&#10003;' : '&#9675;';
                var color = ac.done ? 'text-green' : 'text-subtext0';
                li.innerHTML = '<span class="' + color + '">' + icon + '</span><span class="text-text">' + _escHtml(ac.description) + '</span>';
                acList.appendChild(li);
            });
        } else { acSec.classList.add('hidden'); }

        // Dependencies
        var depSec = document.getElementById('depsSection');
        var depDiv = document.getElementById('metaDeps');
        depDiv.innerHTML = '';
        var deps = issue.dependencies || {};
        var hasDeps = (deps.depends_on && deps.depends_on.length) || (deps.blocks && deps.blocks.length);
        if (hasDeps) {
            depSec.classList.remove('hidden');
            if (deps.depends_on && deps.depends_on.length) {
                depDiv.innerHTML += '<div class="mb-1"><span class="text-subtext0">Depends on:</span> <span class="font-mono">' + _escHtml(deps.depends_on.join(', ')) + '</span></div>';
            }
            if (deps.blocks && deps.blocks.length) {
                depDiv.innerHTML += '<div><span class="text-subtext0">Blocks:</span> <span class="font-mono">' + _escHtml(deps.blocks.join(', ')) + '</span></div>';
            }
        } else { depSec.classList.add('hidden'); }

        // Log
        var logSec = document.getElementById('logSection');
        var logDiv = document.getElementById('metaLog');
        logDiv.innerHTML = '';
        if (issue.log && issue.log.length > 0) {
            logSec.classList.remove('hidden');
            issue.log.forEach(function(entry) {
                var d = document.createElement('div');
                d.className = 'border-l-2 border-surface1 pl-3';
                d.innerHTML = '<span class="text-subtext0 text-xs">' + _escHtml(entry.date) + '</span><div class="text-text">' + _escHtml(entry.message) + '</div>';
                logDiv.appendChild(d);
            });
        } else { logSec.classList.add('hidden'); }

        // Lessons Learned
        var lessonSec = document.getElementById('lessonsSection');
        var lessonDiv = document.getElementById('metaLessons');
        lessonDiv.innerHTML = '';
        if (issue.lessons_learned && issue.lessons_learned.length > 0) {
            lessonSec.classList.remove('hidden');
            issue.lessons_learned.forEach(function(entry) {
                var d = document.createElement('div');
                d.className = 'border-l-2 border-surface1 pl-3';
                d.innerHTML = '<span class="text-subtext0 text-xs">' + _escHtml(entry.date) + '</span><div class="text-text">' + _escHtml(entry.message) + '</div>';
                lessonDiv.appendChild(d);
            });
        } else { lessonSec.classList.add('hidden'); }

        // Files
        var fileSec = document.getElementById('filesSection');
        var fileList = document.getElementById('metaFiles');
        fileList.innerHTML = '';
        var files = (issue.references && issue.references.files) || [];
        fileSec.classList.remove('hidden');
        files.forEach(function(f) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.href = '/static/refs/' + _escHtml(f);
            a.target = '_blank';
            a.className = 'text-blue hover:underline';
            a.textContent = f.split('/').pop();
            li.appendChild(a);
            fileList.appendChild(li);
        });
        _renderPendingFiles();

    } catch (e) {
        alert('Failed to load issue: ' + e.message);
        return;
    }

    document.getElementById('issueModal').classList.remove('hidden');
    document.getElementById('issueModal').classList.add('flex');
}

function closeIssueModal() {
    editingIssueId = null;
    _setModalMaximized(false);
    document.getElementById('issueFormFooter').classList.remove('sticky', 'bottom-0', 'z-10');
    document.getElementById('issueModal').classList.add('hidden');
    document.getElementById('issueModal').classList.remove('flex');
}

var _modalMaximized = false;

function _setModalMaximized(on) {
    _modalMaximized = on;
    var dialog = document.getElementById('issueDialog');
    var maxIcon = document.getElementById('maximizeIcon');
    var restoreIcon = document.getElementById('restoreIcon');
    var notesRow = document.getElementById('notesFieldRow');
    var notesField = document.getElementById('fNotes');
    if (on) {
        dialog.classList.remove('w-full', 'max-w-4xl', 'mx-4', 'max-h-[90vh]', 'rounded-lg');
        dialog.classList.add('fixed', 'inset-0', 'w-screen', 'h-screen', 'rounded-none');
        notesRow.classList.add('flex-1', 'flex', 'flex-col');
        notesField.classList.add('flex-1');
        notesField.classList.remove('min-h-[8rem]');
        var notesPx = Math.max(320, Math.floor(window.innerHeight * 0.55));
        notesRow.style.flex = '1 1 auto';
        notesField.style.minHeight = notesPx + 'px';
        notesField.style.height = notesPx + 'px';
        maxIcon.classList.add('hidden');
        restoreIcon.classList.remove('hidden');
    } else {
        dialog.classList.add('w-full', 'max-w-4xl', 'mx-4', 'max-h-[90vh]', 'rounded-lg');
        dialog.classList.remove('fixed', 'inset-0', 'w-screen', 'h-screen', 'rounded-none');
        notesRow.classList.remove('flex-1', 'flex', 'flex-col');
        notesField.classList.remove('flex-1');
        notesField.classList.add('min-h-[8rem]');
        notesRow.style.flex = '';
        notesField.style.minHeight = '';
        notesField.style.height = '';
        maxIcon.classList.remove('hidden');
        restoreIcon.classList.add('hidden');
    }
}

function toggleModalMaximize() {
    _setModalMaximized(!_modalMaximized);
}

function _escHtml(str) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(str || ''));
    return div.innerHTML;
}

async function submitIssue(event) {
    event.preventDefault();
    var form = document.getElementById('issueForm');
    var data = new FormData(form);
    var issueId = data.get('issue_id');

    if (issueId) {
        // Update existing issue
        var payload = {};
        payload.title = data.get('title') || undefined;
        payload.type = data.get('type') || undefined;
        payload.status = data.get('status') || undefined;
        payload.priority = data.get('priority') || undefined;
        payload.confidence = data.get('confidence') || undefined;
        payload.owner = data.get('owner') || undefined;
        payload.epic = data.get('epic') || undefined;
        payload.notes = data.get('notes') || undefined;
        payload.external_ref = data.get('external_ref') !== null ? data.get('external_ref') : undefined;
        _applyWorkflowExpectation(payload, data.get('workflow_expectation'));
        payload.version = data.get('version') !== null ? data.get('version') : undefined;
        // Remove undefined keys
        Object.keys(payload).forEach(function(k) { if (payload[k] === undefined) delete payload[k]; });
        var resp = await fetch('/api/issues/' + issueId, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload),
        });
        if (resp.ok) {
            if (pendingCreateFiles.length > 0) {
                await uploadFiles(issueId, pendingCreateFiles);
                pendingCreateFiles = [];
            }
            closeIssueModal();
            refreshBoard();
        }
        else { alert('Failed to update issue'); }
    } else {
        // Create new issue
        var payload = {
            title: data.get('title'),
            type: data.get('type') || 'feat',
            status: data.get('status') || 'todo',
            priority: data.get('priority') || 'backlog',
            confidence: data.get('confidence') || 'normal',
            epic: data.get('epic') || '',
            owner: data.get('owner') || 'agent',
            notes: data.get('notes') || '',
            external_ref: data.get('external_ref') || '',
        };
        var createVersion = data.get('version');
        if (createVersion) {
            payload.version = createVersion;
        }
        _applyWorkflowExpectation(payload, data.get('workflow_expectation'));
        var resp = await fetch('/api/issues', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload),
        });
        if (resp.ok) {
            var result = await resp.json();
            var newIssueId = result.data.issue_id;
            if (pendingCreateFiles.length > 0) {
                await uploadFiles(newIssueId, pendingCreateFiles);
                pendingCreateFiles = [];
            }
            closeIssueModal();
            refreshBoard();
        }
        else { alert('Failed to create issue'); }
    }
}

// ── Delete Modal ─────────────────────────────────────────────────────

function confirmDelete(issueId) {
    deleteIssueId = issueId;
    document.getElementById('deleteIssueId').textContent = issueId;
    document.getElementById('deleteModal').classList.remove('hidden');
    document.getElementById('deleteModal').classList.add('flex');
}
function closeDeleteModal() {
    deleteIssueId = null;
    document.getElementById('deleteModal').classList.add('hidden');
    document.getElementById('deleteModal').classList.remove('flex');
}

async function executeDelete() {
    if (!deleteIssueId) return;
    var resp = await fetch('/api/issues/' + deleteIssueId, {method: 'DELETE'});
    if (resp.ok) { closeDeleteModal(); refreshBoard(); }
    else { alert('Failed to delete issue'); }
}

// ── Filters ──────────────────────────────────────────────────────────

function filterIssues() {
    var tf = document.getElementById('typeFilter');
    var sf = document.getElementById('statusFilter');
    var pf = document.getElementById('priorityFilter');
    var wf = document.getElementById('workerFilter');
    var si = document.getElementById('searchInput');
    var typeVal = tf ? tf.value : '';
    var statusVal = sf ? sf.value : '';
    var priorityVal = pf ? pf.value : '';
    var workerVal = wf ? wf.value : '';
    var search = si ? si.value.toLowerCase() : '';
    document.querySelectorAll('.issue-card').forEach(function(card) {
        var show = true;
        if (typeVal && card.dataset.type !== typeVal) show = false;
        if (statusVal && card.dataset.status !== statusVal) show = false;
        if (priorityVal && card.dataset.priority !== priorityVal) show = false;
        if (workerVal && card.dataset.owner !== workerVal) show = false;
        if (search && !card.querySelector('h3').textContent.toLowerCase().includes(search)) show = false;
        card.style.display = show ? 'block' : 'none';
    });
}

// ── Drag and drop via event delegation ───────────────────────────────

document.body.addEventListener('dragstart', function(e) {
    var card = e.target.closest('.issue-card');
    if (!card) return;
    card.classList.add('dragging');
    e.dataTransfer.setData('text/plain', card.dataset.issueId);
});
document.body.addEventListener('dragend', function(e) {
    var card = e.target.closest('.issue-card');
    if (card) card.classList.remove('dragging');
});
document.body.addEventListener('dragover', function(e) {
    var zone = e.target.closest('.drop-zone');
    if (!zone) return;
    e.preventDefault();
    zone.classList.add('drag-over');
});
document.body.addEventListener('dragleave', function(e) {
    var zone = e.target.closest('.drop-zone');
    if (zone) zone.classList.remove('drag-over');
});
document.body.addEventListener('drop', async function(e) {
    var zone = e.target.closest('.drop-zone');
    if (!zone) return;
    e.preventDefault();
    zone.classList.remove('drag-over');
    var issueId = e.dataTransfer.getData('text/plain');
    var colType = zone.dataset.columnType || 'priority';
    var target = colType === 'status' ? zone.dataset.status : zone.dataset.priority;
    if (issueId && target) {
        var card = document.querySelector('[data-issue-id="' + issueId + '"]');
        if (card) { card.classList.add('moving'); setTimeout(function() { card.classList.remove('moving'); }, 500); }
        await moveIssue(issueId, target);
    }
});

// Filters via event delegation
document.body.addEventListener('change', function(e) {
    if (['typeFilter', 'statusFilter', 'priorityFilter', 'workerFilter'].includes(e.target.id)) filterIssues();
});
document.body.addEventListener('input', function(e) {
    if (e.target.id === 'searchInput') filterIssues();
});

// Re-init after htmx swaps new content
document.body.addEventListener('htmx:afterSettle', function() {
    updateQuickMoveButtons();
    populateFilterSelects();
    populateWorkerFilter();
    initTopTabs();
    if (currentTopTab === 'worktrees') {
        loadBranchWorktrees();
    }
    if (currentPanelIssueId) _setPanelCard(currentPanelIssueId);
});

// ── File upload ──────────────────────────────────────────────────────

async function uploadFiles(issueId, fileList) {
    if (!fileList || fileList.length === 0) return;
    var form = new FormData();
    for (var i = 0; i < fileList.length; i++) { form.append('files', fileList[i]); }
    var resp = await fetch('/api/issues/' + issueId + '/upload', {method: 'POST', body: form});
    if (resp.ok) {
        if (editingIssueId === issueId) { openEditModal(issueId); }
    } else { alert('File upload failed'); }
}

document.body.addEventListener('dragover', function(e) {
    var zone = e.target.closest('#fileDropZone');
    if (zone) { e.preventDefault(); zone.classList.add('!border-blue'); }
});
document.body.addEventListener('dragleave', function(e) {
    var zone = e.target.closest('#fileDropZone');
    if (zone) { zone.classList.remove('!border-blue'); }
});
document.body.addEventListener('drop', function(e) {
    var zone = e.target.closest('#fileDropZone');
    if (!zone) return;
    e.preventDefault();
    zone.classList.remove('!border-blue');
    if (e.dataTransfer.files.length > 0) {
        if (editingIssueId) {
            uploadFiles(editingIssueId, e.dataTransfer.files);
            return;
        }
        pendingCreateFiles = Array.from(e.dataTransfer.files);
        _renderPendingFiles();
    }
}, true);
document.body.addEventListener('change', function(e) {
    if (e.target.id === 'fileInput') {
        if (editingIssueId) {
            uploadFiles(editingIssueId, e.target.files);
        } else {
            pendingCreateFiles = Array.from(e.target.files);
            _renderPendingFiles();
        }
        e.target.value = '';
    }
});

// ── Side Panel ───────────────────────────────────────────────────────────

var currentPanelIssueId = null;

function _setPanelCard(issueId) {
    document.querySelectorAll('.issue-card').forEach(function(c) {
        c.classList.remove('ring-2', 'ring-blue');
    });
    if (issueId) {
        var card = document.querySelector('[data-issue-id="' + issueId + '"]');
        if (card) card.classList.add('ring-2', 'ring-blue');
    }
}

async function openSidePanel(issueId) {
    if (currentPanelIssueId === issueId) {
        closeSidePanel(); return;
    }
    currentPanelIssueId = issueId;
    _setPanelCard(issueId);
    var panel = document.getElementById('sidePanel');
    document.getElementById('panelIssueId').textContent = issueId;
    document.getElementById('panelContent').innerHTML = '<p class="text-subtext0">Loading...</p>';
    panel.classList.remove('translate-x-full');
    try {
        var resp = await fetch('/api/issues/' + issueId);
        if (!resp.ok) { document.getElementById('panelContent').innerHTML = '<p class="text-red">Failed to load issue.</p>'; return; }
        var issue = (await resp.json()).data;
        _renderPanelContent(issue);
    } catch (e) {
        document.getElementById('panelContent').innerHTML = '<p class="text-red">Error: ' + _escHtml(e.message) + '</p>';
    }
}

function closeSidePanel() {
    currentPanelIssueId = null;
    _setPanelCard(null);
    document.getElementById('sidePanel').classList.add('translate-x-full');
}

function _chip(label, cls) {
    return '<span class="px-2 py-0.5 rounded text-xs ' + cls + '">' + _escHtml(label) + '</span>';
}

function _renderInlineMarkdown(text) {
    var escaped = _escHtml(text || '');
    escaped = escaped.replace(/`([^`]+)`/g, '<code class="bg-surface0 text-text px-1 py-0.5 rounded text-xs">$1</code>');
    escaped = escaped.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
    escaped = escaped.replace(/\*([^*]+)\*/g, '<em>$1</em>');
    escaped = escaped.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue hover:underline">$1</a>');
    return escaped;
}

function _renderMarkdownSafe(markdownText) {
    var text = String(markdownText || '').replace(/\r\n?/g, '\n');
    var lines = text.split('\n');
    var html = [];
    var inList = false;
    var inCodeBlock = false;
    var codeBuffer = [];

    function closeList() {
        if (inList) {
            html.push('</ul>');
            inList = false;
        }
    }

    function flushCodeBlock() {
        if (!inCodeBlock) {
            return;
        }
        closeList();
        html.push('<pre class="bg-surface0 text-text rounded p-2 overflow-x-auto text-xs"><code>' + _escHtml(codeBuffer.join('\n')) + '</code></pre>');
        codeBuffer = [];
        inCodeBlock = false;
    }

    lines.forEach(function(rawLine) {
        var line = rawLine || '';

        if (line.trim().startsWith('```')) {
            if (inCodeBlock) {
                flushCodeBlock();
            } else {
                closeList();
                inCodeBlock = true;
                codeBuffer = [];
            }
            return;
        }

        if (inCodeBlock) {
            codeBuffer.push(line);
            return;
        }

        var trimmed = line.trim();
        if (!trimmed) {
            closeList();
            return;
        }

        var heading = trimmed.match(/^(#{1,6})\s+(.+)$/);
        if (heading) {
            closeList();
            var level = heading[1].length;
            html.push('<h' + level + ' class="text-text font-semibold mt-2 mb-1">' + _renderInlineMarkdown(heading[2]) + '</h' + level + '>');
            return;
        }

        var listItem = trimmed.match(/^[-*]\s+(.+)$/);
        if (listItem) {
            if (!inList) {
                html.push('<ul class="list-disc list-inside space-y-1">');
                inList = true;
            }
            html.push('<li class="text-text">' + _renderInlineMarkdown(listItem[1]) + '</li>');
            return;
        }

        closeList();
        html.push('<p class="text-text whitespace-pre-wrap">' + _renderInlineMarkdown(trimmed) + '</p>');
    });

    if (inCodeBlock) {
        flushCodeBlock();
    }
    closeList();
    return html.join('');
}

function _renderPanelContent(issue) {
    var typeColors = {bug:'bg-red/20 text-red', feat:'bg-blue/20 text-blue', chore:'bg-surface1 text-subtext0', enh:'bg-teal/20 text-teal', sec:'bg-peach/20 text-peach', perf:'bg-yellow/20 text-yellow', docs:'bg-lavender/20 text-lavender', test:'bg-green/20 text-green', refac:'bg-mauve/20 text-mauve', plan:'bg-sky/20 text-sky'};
    var prioColors = {critical:'text-red', high:'text-peach', medium:'text-yellow', low:'text-green', backlog:'text-subtext0'};
    var html = '';
    // Header chips
    html += '<div class="flex flex-wrap gap-1 mb-3">';
    html += _chip(issue.type, typeColors[issue.type] || 'bg-surface1 text-text');
    html += _chip(issue.status.replace('_', ' '), 'bg-surface1 text-text capitalize');
    html += _chip(issue.priority, (prioColors[issue.priority] || 'text-text') + ' bg-surface1');
    if (issue.confidence) html += _chip(issue.confidence, 'bg-surface1 text-subtext0');
    html += '</div>';
    // Title
    html += '<h3 class="text-base font-semibold text-text mb-2">' + _escHtml(issue.title) + '</h3>';
    // Meta
    html += '<div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs mb-4">';
    html += '<div class="col-span-2 flex items-center gap-2"><span class="text-subtext0">Owner</span> ';
    html += '<select onchange="panelAssignWorker(currentPanelIssueId, this.value)" class="bg-mantle text-text border border-surface0 rounded px-2 py-0.5 text-xs focus:outline-none focus:border-blue">';
    var _ownerFound = false;
    html += '<option value="agent"' + (issue.owner === 'agent' ? ' selected' : '') + '>agent</option>';
    if (issue.owner === 'agent') _ownerFound = true;
    _workers.forEach(function(w) {
        var isCur = issue.owner === w.name;
        if (isCur) _ownerFound = true;
        html += '<option value="' + _escHtml(w.name) + '"' + (isCur ? ' selected' : '') + '>' + _escHtml(w.name) + ' (' + _escHtml(w.engine) + ')</option>';
    });
    if (!_ownerFound && issue.owner) {
        html += '<option value="' + _escHtml(issue.owner) + '" selected>' + _escHtml(issue.owner) + '</option>';
    }
    html += '</select></div>';
    if (issue.epic) html += '<div><span class="text-subtext0">Epic</span> <span class="text-mauve">' + _escHtml(issue.epic) + '</span></div>';
    html += '<div><span class="text-subtext0">Workflow</span> <span class="text-text">' + _escHtml(_workflowExpectationLabel(_workflowExpectationFromIssue(issue))) + '</span></div>';
    if (issue.version) {
        html += '<div><span class="text-subtext0">Version</span> <span class="text-text font-mono">' + _escHtml(issue.version) + '</span></div>';
    }
    if (issue.external_ref) {
        var refVal = /^https?:\/\//.test(issue.external_ref) ? '<a href="' + _escHtml(issue.external_ref) + '" target="_blank" rel="noopener noreferrer" class="text-blue hover:underline">' + _escHtml(issue.external_ref) + '</a>' : _escHtml(issue.external_ref);
        html += '<div class="col-span-2"><span class="text-subtext0">Ext Ref</span> ' + refVal + '</div>';
    }
    html += '</div>';
    // Notes
    if (issue.notes) {
        html += '<div class="mb-4"><h4 class="text-xs font-semibold text-subtext0 uppercase tracking-wide mb-1">Notes</h4><div class="space-y-2">' + _renderMarkdownSafe(issue.notes) + '</div></div>';
    }
    // Acceptance criteria
    if (issue.acceptance_criteria && issue.acceptance_criteria.length) {
        html += '<div class="mb-4"><h4 class="text-xs font-semibold text-subtext0 uppercase tracking-wide mb-1">Acceptance Criteria</h4><ul class="space-y-1">';
        issue.acceptance_criteria.forEach(function(ac) {
            html += '<li class="flex gap-2 items-start"><span class="' + (ac.done ? 'text-green' : 'text-subtext0') + ' mt-0.5">' + (ac.done ? '&#10003;' : '&#9675;') + '</span><span class="text-text">' + _escHtml(ac.description) + '</span></li>';
        });
        html += '</ul></div>';
    }
    // Log
    if (issue.log && issue.log.length) {
        html += '<div class="mb-4"><h4 class="text-xs font-semibold text-subtext0 uppercase tracking-wide mb-1">Log</h4><div class="space-y-2">';
        var entries = issue.log.slice().reverse();
        entries.forEach(function(e) {
            html += '<div class="border-l-2 border-surface1 pl-2"><div class="text-subtext0 text-xs">' + _escHtml(e.date) + '</div><div class="text-text">' + _escHtml(e.message) + '</div></div>';
        });
        html += '</div></div>';
    }
    // Files
    var files = (issue.references && issue.references.files) || [];
    if (files.length) {
        html += '<div class="mb-4"><h4 class="text-xs font-semibold text-subtext0 uppercase tracking-wide mb-1">Files</h4><ul class="space-y-1">';
        files.forEach(function(f) {
            html += '<li><a href="/static/refs/' + _escHtml(f) + '" target="_blank" class="text-blue hover:underline text-xs">' + _escHtml(f.split('/').pop()) + '</a></li>';
        });
        html += '</ul></div>';
    }
    document.getElementById('panelContent').innerHTML = html;
}

async function panelCloseIssue() {
    if (!currentPanelIssueId) return;
    var id = currentPanelIssueId;
    var resp = await fetch('/api/issues/' + id, {method: 'DELETE'});
    if (resp.ok) { closeSidePanel(); refreshBoard(); }
    else { alert('Failed to close issue'); }
}

async function panelAssignWorker(issueId, newOwner) {
    var resp = await fetch('/api/issues/' + issueId, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({owner: newOwner}),
    });
    if (resp.ok) {
        refreshBoard();
    } else {
        alert('Failed to assign worker');
    }
}

var _cardAssignPopover = null;

function closeCardAssign() {
    if (_cardAssignPopover) {
        _cardAssignPopover.remove();
        _cardAssignPopover = null;
    }
}

function openCardAssign(event, issueId) {
    event.stopPropagation();
    closeCardAssign();
    var btn = event.currentTarget;
    var rect = btn.getBoundingClientRect();
    var card = btn.closest('.issue-card');
    var currentOwner = card ? card.dataset.owner : 'agent';

    var popover = document.createElement('div');
    popover.className = 'fixed bg-base border border-surface0 rounded shadow-lg p-2 z-50';
    popover.style.top = (rect.bottom + 4) + 'px';
    popover.style.left = rect.left + 'px';

    var sel = document.createElement('select');
    sel.className = 'bg-mantle text-text border border-surface0 rounded px-2 py-1 text-xs focus:outline-none focus:border-blue';

    var opt = document.createElement('option');
    opt.value = 'agent'; opt.textContent = 'agent';
    if (currentOwner === 'agent') opt.selected = true;
    sel.appendChild(opt);

    var ownerFound = (currentOwner === 'agent');
    _workers.forEach(function(w) {
        var o = document.createElement('option');
        o.value = w.name;
        o.textContent = w.name + ' (' + w.engine + ')';
        if (currentOwner === w.name) { o.selected = true; ownerFound = true; }
        sel.appendChild(o);
    });
    if (!ownerFound && currentOwner) {
        var co = document.createElement('option');
        co.value = currentOwner; co.textContent = currentOwner;
        co.selected = true;
        sel.appendChild(co);
    }

    sel.addEventListener('change', async function() {
        var resp = await fetch('/api/issues/' + issueId, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({owner: sel.value}),
        });
        if (resp.ok) {
            closeCardAssign();
            refreshBoard();
        } else {
            alert('Failed to assign worker');
        }
    });

    popover.appendChild(sel);
    document.body.appendChild(popover);
    _cardAssignPopover = popover;
    sel.focus();

    setTimeout(function() {
        document.addEventListener('click', function handler(e) {
            if (_cardAssignPopover && !_cardAssignPopover.contains(e.target)) {
                closeCardAssign();
                document.removeEventListener('click', handler);
            }
        });
    }, 0);
}

// ── Bulk assign / Dispatch worktree ──────────────────────────────────

function _getFilteredIssueIds() {
    var cards = document.querySelectorAll('.issue-card');
    var ids = [];
    cards.forEach(function(c) {
        if (c.style.display !== 'none') ids.push(c.dataset.issueId);
    });
    return ids;
}

var _bulkAssignPopover = null;
function openBulkAssignMenu(event) {
    event.stopPropagation();
    if (_bulkAssignPopover) { _bulkAssignPopover.remove(); _bulkAssignPopover = null; return; }
    var ids = _getFilteredIssueIds();
    if (!ids.length) { alert('No visible issues to assign'); return; }
    var btn = event.currentTarget;
    var rect = btn.getBoundingClientRect();

    var pop = document.createElement('div');
    pop.className = 'fixed bg-base border border-surface0 rounded shadow-lg p-3 z-50';
    pop.style.top = (rect.bottom + 4) + 'px';
    pop.style.right = (window.innerWidth - rect.right) + 'px';

    var label = document.createElement('div');
    label.className = 'text-xs text-subtext0 mb-2';
    label.textContent = 'Assign ' + ids.length + ' issue(s) to:';
    pop.appendChild(label);

    var sel = document.createElement('select');
    sel.className = 'bg-mantle text-text border border-surface0 rounded px-2 py-1 text-xs w-full mb-2 focus:outline-none focus:border-blue';
    var optA = document.createElement('option');
    optA.value = 'agent'; optA.textContent = 'agent';
    sel.appendChild(optA);
    _workers.forEach(function(w) {
        var o = document.createElement('option');
        o.value = w.name; o.textContent = w.name + ' (' + w.engine + ')';
        sel.appendChild(o);
    });
    pop.appendChild(sel);

    var goBtn = document.createElement('button');
    goBtn.className = 'w-full px-3 py-1 bg-teal text-base rounded hover:bg-teal/80 text-xs';
    goBtn.textContent = 'Assign All';
    goBtn.addEventListener('click', async function() {
        goBtn.disabled = true; goBtn.textContent = 'Assigning...';
        var resp = await fetch('/api/workers/' + encodeURIComponent(sel.value) + '/bulk-assign', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({issue_ids: ids}),
        });
        if (resp.ok) {
            _bulkAssignPopover.remove(); _bulkAssignPopover = null;
            refreshBoard();
        } else {
            var err = await resp.json();
            alert(err.errors && err.errors[0] ? err.errors[0].detail : 'Bulk assign failed');
            goBtn.disabled = false; goBtn.textContent = 'Assign All';
        }
    });
    pop.appendChild(goBtn);

    document.body.appendChild(pop);
    _bulkAssignPopover = pop;
    sel.focus();

    setTimeout(function() {
        document.addEventListener('click', function handler(e) {
            if (_bulkAssignPopover && !_bulkAssignPopover.contains(e.target) && !btn.contains(e.target)) {
                _bulkAssignPopover.remove(); _bulkAssignPopover = null;
                document.removeEventListener('click', handler);
            }
        });
    }, 0);
}

function closeBulkEpicMenu() {
    if (_bulkEpicPopover) {
        _bulkEpicPopover.remove();
        _bulkEpicPopover = null;
    }
}

async function openBulkEpicMenu(event) {
    event.stopPropagation();
    if (_bulkEpicPopover) { closeBulkEpicMenu(); return; }
    var ids = _getFilteredIssueIds();
    if (!ids.length) { showToast('No visible issues to update', 'error'); return; }
    var btn = event.currentTarget;
    var rect = btn.getBoundingClientRect();

    var pop = document.createElement('div');
    pop.className = 'fixed bg-base border border-surface0 rounded shadow-lg p-3 z-50 min-w-[18rem]';
    pop.style.top = (rect.bottom + 4) + 'px';
    pop.style.right = (window.innerWidth - rect.right) + 'px';

    var label = document.createElement('div');
    label.className = 'text-xs text-subtext0 mb-2';
    label.textContent = 'Set epic for ' + ids.length + ' filtered issue(s):';
    pop.appendChild(label);

    var sel = document.createElement('select');
    sel.className = 'bg-mantle text-text border border-surface0 rounded px-2 py-1 text-xs w-full mb-2 focus:outline-none focus:border-blue';
    var empty = document.createElement('option');
    empty.value = ''; empty.textContent = 'Select existing epic';
    sel.appendChild(empty);

    try {
        var epicsResp = await fetch('/api/epics');
        if (epicsResp.ok) {
            var epics = (await epicsResp.json()).data || [];
            epics.forEach(function(e) {
                if (!e.name) return;
                var o = document.createElement('option');
                o.value = e.name;
                o.textContent = e.name + ' (' + e.count + ')';
                sel.appendChild(o);
            });
        }
    } catch (_e) {
        // no-op; user can still enter a new epic name
    }
    pop.appendChild(sel);

    var input = document.createElement('input');
    input.type = 'text';
    input.placeholder = '...or type new epic name';
    input.className = 'bg-mantle text-text border border-surface0 rounded px-2 py-1 text-xs w-full mb-2 focus:outline-none focus:border-blue';
    pop.appendChild(input);

    var goBtn = document.createElement('button');
    goBtn.className = 'w-full px-3 py-1 bg-lavender text-base rounded hover:bg-lavender/80 text-xs';
    goBtn.textContent = 'Set Epic for Filtered';
    goBtn.addEventListener('click', async function() {
        var selected = sel.value.trim();
        var entered = input.value.trim();
        var epic = entered || selected;
        if (!epic) {
            showToast('Choose an existing epic or enter a new epic name', 'error');
            return;
        }
        goBtn.disabled = true;
        goBtn.textContent = 'Updating...';
        var resp = await fetch('/api/issues/bulk-epic', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({issue_ids: ids, epic: epic}),
        });
        goBtn.disabled = false;
        goBtn.textContent = 'Set Epic for Filtered';
        if (!resp.ok) {
            var err = await resp.json();
            showToast(err.errors && err.errors[0] ? err.errors[0].detail : 'Bulk epic update failed', 'error');
            return;
        }
        var data = (await resp.json()).data;
        closeBulkEpicMenu();
        refreshBoard();
        var msg = 'Updated ' + data.updated + '/' + data.issue_count + ' issues → epic ' + data.epic;
        if (data.errors && data.errors.length) {
            msg += '\nErrors: ' + data.errors.length;
            showToast(msg, 'error', 6000);
            return;
        }
        showToast(msg, 'success', 5000);
    });
    pop.appendChild(goBtn);

    document.body.appendChild(pop);
    _bulkEpicPopover = pop;
    input.focus();

    setTimeout(function() {
        document.addEventListener('click', function handler(e) {
            if (_bulkEpicPopover && !_bulkEpicPopover.contains(e.target) && !btn.contains(e.target)) {
                closeBulkEpicMenu();
                document.removeEventListener('click', handler);
            }
        });
    }, 0);
}

function _syncLaunchWith() {
    var sel = document.getElementById('dispatchWorker');
    var opt = sel.options[sel.selectedIndex];
    var engine = opt ? (opt.dataset.engine || '') : '';
    var lw = document.getElementById('dispatchLaunchWith');
    var map = {opencode:'opencode', claude:'claude', copilot:'copilot'};
    lw.value = map[engine] || 'editor';
}

function _syncCompletionAction() {
    var sel = document.getElementById('dispatchWorker');
    var opt = sel.options[sel.selectedIndex];
    var ca = opt ? (opt.dataset.completionAction || 'close') : 'close';
    document.getElementById('dispatchCompletionAction').value = ca;
}

function openDispatchModal() {
    var ids = _getFilteredIssueIds();
    if (!ids.length) { showToast('No visible issues to dispatch', 'error'); return; }
    if (!_workers.length) { showToast('Register a worker first (Workers button)', 'error'); return; }

    var sel = document.getElementById('dispatchWorker');
    sel.innerHTML = '';
    _workers.forEach(function(w) {
        var o = document.createElement('option');
        o.value = w.name; o.textContent = w.name + ' (' + w.engine + (w.model ? ', ' + w.model : '') + ')';
        o.dataset.engine = w.engine || '';
        o.dataset.completionAction = w.completion_action || 'close';
        sel.appendChild(o);
    });
    sel.onchange = function() { _syncLaunchWith(); _syncCompletionAction(); };
    _syncLaunchWith();
    _syncCompletionAction();

    document.getElementById('dispatchBranch').value = '';
    document.getElementById('dispatchIssueCount').textContent = ids.length;
    var listEl = document.getElementById('dispatchIssueList');
    listEl.innerHTML = '';
    ids.forEach(function(id) {
        var card = document.querySelector('[data-issue-id="' + id + '"]');
        var title = card ? card.querySelector('h3').textContent : id;
        var d = document.createElement('div');
        d.textContent = id + ' — ' + title;
        listEl.appendChild(d);
    });

    document.getElementById('dispatchModal').style.display = 'flex';
}

function closeDispatchModal() {
    document.getElementById('dispatchModal').style.display = 'none';
}

async function executeDispatch() {
    var ids = _getFilteredIssueIds();
    var worker = document.getElementById('dispatchWorker').value;
    var branch = document.getElementById('dispatchBranch').value.trim();
    var launchWith = document.getElementById('dispatchLaunchWith').value;
    var completionAction = document.getElementById('dispatchCompletionAction').value;
    var btn = document.getElementById('dispatchBtn');
    btn.disabled = true; btn.textContent = 'Dispatching...';

    var resp = await fetch('/api/worktree/dispatch', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({worker_name: worker, issue_ids: ids, branch_name: branch, launch_with: launchWith, completion_action: completionAction}),
    });
    btn.disabled = false; btn.textContent = 'Dispatch';
    if (resp.ok) {
        var data = (await resp.json()).data;
        closeDispatchModal();
        refreshBoard();
        var msg = 'Dispatched ' + data.assigned + '/' + data.issue_count + ' issues'
            + ' → ' + data.worker + ' (' + data.branch + ')';
        if (data.launched_with) msg += '\nLaunched: ' + data.launched_with;
        showToast(msg, 'success', 6000);
    } else {
        var err = await resp.json();
        showToast(err.errors && err.errors[0] ? err.errors[0].detail : 'Dispatch failed', 'error');
    }
}

// Initial setup
document.addEventListener('DOMContentLoaded', function() {
    loadMeta();
    loadWorkers();
    initTopTabs();
    if (currentTopTab === 'worktrees') {
        loadBranchWorktrees();
    }
    updateQuickMoveButtons();
    var workflowSel = document.getElementById('fWorkflowExpectation');
    if (workflowSel) {
        workflowSel.addEventListener('change', _updateWorkflowExpectationHelp);
    }
    _updateWorkflowExpectationHelp();
});

var _shortcutHelpOpen = false;

function openShortcutHelp() {
    _shortcutHelpOpen = true;
    var el = document.getElementById('shortcutHelp');
    el.classList.remove('hidden');
    el.classList.add('flex');
}

function closeShortcutHelp() {
    _shortcutHelpOpen = false;
    var el = document.getElementById('shortcutHelp');
    el.classList.add('hidden');
    el.classList.remove('flex');
}

document.addEventListener('keydown', function(e) {
    var modalVisible = !document.getElementById('issueModal').classList.contains('hidden');
    // Modal-specific shortcuts (always active when modal is open)
    if (modalVisible) {
        if (e.key === 'Escape') { closeIssueModal(); return; }
        if (e.key === 'F11' || (e.altKey && e.key === 'Enter')) { e.preventDefault(); toggleModalMaximize(); }
        return;
    }
    // Help overlay escape
    if (_shortcutHelpOpen) {
        if (e.key === 'Escape' || e.key === '?') { closeShortcutHelp(); return; }
        return;
    }
    // Panel escape
    var panelVisible = !document.getElementById('sidePanel').classList.contains('translate-x-full');
    if (panelVisible && e.key === 'Escape') { closeSidePanel(); return; }
    // Global shortcuts — skip when an input element is focused
    var tag = document.activeElement ? document.activeElement.tagName : '';
    var isEditable = (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || document.activeElement.isContentEditable);
    if (isEditable) return;
    if (e.key === '?') { e.preventDefault(); openShortcutHelp(); return; }
    if (e.key === 'n' && !e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault(); openCreateModal(); }
    else if (e.key === 'r' && !e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault(); refreshBoard(); }
    else if (e.key === '/') {
        e.preventDefault();
        var si = document.getElementById('searchInput');
        if (si) { si.focus(); si.select(); }
    }
});
</script>
{% endblock %}