{% extends "base.html" %}

{% block title %}{{ project.name }} - Kanban Board{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/kanban_premium.css?v=7">
<link rel="stylesheet" href="/static/css/board.css?v=10">
{% endblock %}

{% block content %}

{# Destination stage for planned work: Backlog, or the first stage when no
   Backlog stage exists (mirrors the server-side chat-plan fallback). #}
{% set backlog_stage = project.stages | selectattr('key', 'equalto', 'backlog') | first %}
{% set plan_stage = backlog_stage or (project.stages | first) %}
{% set new_task_default_stage = plan_stage %}

<div class="board-revamp-shell board-simple-shell" style="--stage-count: {{ project.stages|length }};">
  <!-- Consistent Project Navigation -->
  {% include "_project_subnav.html" %}

  <section class="board-header-section board-simple-header">
    <div class="board-title-row">
      <div class="board-title-block">
        <p class="board-kicker">Project workspace</p>
        <div class="d-flex align-items-center gap-2">
          <h2 id="project-title" class="m-0">{{ project.name }}</h2>
          <button class="btn-icon btn-sm" onclick="editProject()" title="Edit project" aria-label="Edit project"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m4 20 4.2-1 10.6-10.6a2.1 2.1 0 0 0-3-3L5.2 16z"/><path d="m14.5 6.5 3 3"/></svg></button>
          {% if project.creator and project.creator.entity_type.value == 'agent' %}
          <span class="badge badge-agent" title="Managed by {{ project.creator.name }}">Agent managed</span>
          {% endif %}
        </div>
        <div class="board-project-meta">
          <span class="badge {% if project.approval_status and project.approval_status.value == 'APPROVED' %}badge-success{% elif project.approval_status and project.approval_status.value == 'REJECTED' %}badge-blocked{% else %}badge-pending{% endif %}" title="Project approval status">{{ (project.approval_status.value | lower) if project.approval_status else 'pending' }}</span>
          <span title="Project workspace folder"><code id="project-path-label">{{ project.path or 'No folder selected' }}</code></span>
        </div>
      </div>

      <div class="header-actions board-primary-actions">
        <span id="board-connection-status" class="board-connection-status is-stale" role="status" aria-live="polite">Connecting…</span>
        <button class="btn btn-icon" id="header-bell-btn" onclick="toggleBellDropdown()" title="Pending approvals" aria-label="Pending approvals">
          <span id="header-bell-icon" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"/><path d="M10 21h4"/></svg></span> <span id="header-bell-count" class="badge" style="display:none;background:var(--danger);color:#fff;font-size:0.6rem;padding:0.05rem 0.3rem;position:absolute;top:0;right:0;border-radius:1rem;">0</span>
        </button>
        <button class="btn btn-secondary board-create-action" id="plan-work-btn" type="button" onclick="openPlanWorkModal()">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/><circle cx="12" cy="12" r="3.5"/></svg> Plan work
        </button>
        <button class="btn btn-primary board-create-action" id="new-task-btn" type="button" onclick="openNewTaskModal()">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> New task
        </button>
      </div>
    </div>

    <details class="board-advanced-details">
      <summary>Advanced</summary>
      <div class="board-advanced-actions">
        {% if project.path %}
        <button class="btn btn-secondary btn-sm" data-path="{{ project.path|e }}" onclick="openWorkspace(this.dataset.path)" title="Open workspace folder">Open folder</button>
        {% endif %}
        <button class="btn btn-secondary btn-sm stage-policy-btn" onclick="openStagePolicyModal()">Stage policy</button>
        <button class="btn btn-secondary btn-sm notification-settings-btn" onclick="toggleNotificationSettings()">Notifications</button>
      </div>
    </details>
    <div id="bell-dropdown" class="bell-dropdown" style="display:none;">
      <div class="bell-dropdown-header">
        <strong>Pending Approvals</strong>
        <button class="btn-icon-sm" onclick="toggleBellDropdown()">&#10005;</button>
      </div>
      <div id="bell-dropdown-list" class="bell-dropdown-list">
        <p class="text-secondary" style="font-size:0.8rem;">No pending approvals.</p>
      </div>
    </div>
    <div id="notification-settings-panel" class="notification-settings-panel" style="display:none;">
      <label class="d-flex align-items-center gap-2">
        <input type="checkbox" id="notifications-enabled" onchange="toggleNotifications(this.checked)">
        Enable desktop notifications
      </label>
      <label class="d-flex align-items-center gap-2">
        <input type="checkbox" id="notifications-sound" onchange="toggleNotificationSound(this.checked)">
        Play sound on approval
      </label>
    </div>
  </section>

  {% if setup_checklist %}
  <section class="project-setup-checklist" id="project-setup-checklist" aria-label="Project setup checklist">
    <div class="setup-checklist-header" onclick="toggleSetupChecklist()">
      <div class="setup-header-left">
        <span class="setup-badge">Setup Checklist</span>
        <strong class="setup-progress" id="setup-progress-text">{{ setup_checklist.completed_count }}/4 complete</strong>
      </div>
      <div class="setup-header-right">
        <button class="btn-icon btn-sm" id="toggle-checklist-btn" type="button" aria-label="Toggle setup checklist" onclick="event.stopPropagation();toggleSetupChecklist()">
          <span id="checklist-toggle-icon">{% if setup_checklist.all_complete %}&#9660;{% else %}&#9650;{% endif %}</span>
        </button>
      </div>
    </div>
    <div class="setup-steps-grid" id="setup-steps-grid" {% if setup_checklist.all_complete %}style="display:none;"{% endif %}>
      <!-- Step 1: Choose folder -->
      <div class="setup-step-item {% if setup_checklist.has_folder %}step-complete{% else %}step-pending{% endif %}" id="step-choose-folder">
        <div class="setup-step-top">
          <div class="step-num-indicator">{% if setup_checklist.has_folder %}&#10003;{% else %}1{% endif %}</div>
          <div class="step-content">
            <div class="step-title">Choose folder</div>
            <div class="step-detail">
              {% if setup_checklist.has_folder %}
              <code style="font-size:0.75rem;">{{ project.path }}</code>
              {% else %}
              <span class="text-warning">Missing prerequisite: Set a project folder for workspace files.</span>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="step-action">
          {% if not setup_checklist.has_folder %}
          <button class="btn btn-sm btn-primary" type="button" onclick="openWorkspaceFolderPicker()">Choose folder</button>
          {% else %}
          <span class="step-done-tag">&#10003; Configured</span>
          {% endif %}
        </div>
      </div>

      <!-- Step 2: Configure worker -->
      <div class="setup-step-item {% if setup_checklist.has_worker %}step-complete{% else %}step-pending{% endif %}" id="step-configure-worker">
        <div class="setup-step-top">
          <div class="step-num-indicator">{% if setup_checklist.has_worker %}&#10003;{% else %}2{% endif %}</div>
          <div class="step-content">
            <div class="step-title">Configure worker</div>
            <div class="step-detail">
              {% if setup_checklist.has_worker %}
              <span>Worker: <strong>{{ setup_checklist.worker_name }}</strong> ({{ setup_checklist.worker_agent }})</span>
              {% elif not setup_checklist.has_folder %}
              <span class="text-muted">Prerequisite: choose a project folder first.</span>
              {% elif setup_checklist.worker_configured %}
              <span class="text-warning">Configured worker CLI is not on PATH. Install it or choose an available agent.</span>
              {% else %}
              <span class="text-warning">Missing prerequisite: Assign an available CLI to the worker role.</span>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="step-action">
          <button class="btn btn-sm {% if not setup_checklist.has_worker %}btn-primary{% else %}btn-secondary{% endif %}" type="button" onclick="openTeamModal()">Configure global worker role</button>
        </div>
      </div>

      <!-- Step 3: Create task -->
      <div class="setup-step-item {% if setup_checklist.has_tasks %}step-complete{% else %}step-pending{% endif %}" id="step-create-task">
        <div class="setup-step-top">
          <div class="step-num-indicator">{% if setup_checklist.has_tasks %}&#10003;{% else %}3{% endif %}</div>
          <div class="step-content">
            <div class="step-title">Create task</div>
            <div class="step-detail">
              {% if setup_checklist.has_tasks %}
              <span>{{ setup_checklist.task_count }} task(s) on board</span>
              {% elif not setup_checklist.has_worker %}
              <span class="text-muted">Prerequisite: configure an agent worker first.</span>
              {% else %}
              <span class="text-warning">Missing prerequisite: Create your first task to define work.</span>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="step-action">
          <button class="btn btn-sm {% if not setup_checklist.has_tasks %}btn-primary{% else %}btn-secondary{% endif %}" type="button" onclick="openNewTaskModal()">New task</button>
        </div>
      </div>

      <!-- Step 4: Start work -->
      <div class="setup-step-item {% if setup_checklist.has_started %}step-complete{% else %}step-pending{% endif %}" id="step-start-work">
        <div class="setup-step-top">
          <div class="step-num-indicator">{% if setup_checklist.has_started %}&#10003;{% else %}4{% endif %}</div>
          <div class="step-content">
            <div class="step-title">Start work</div>
            <div class="step-detail">
              {% if setup_checklist.has_started %}
              <span class="{% if 'failed' in setup_checklist.execution_message or 'blocked' in setup_checklist.execution_message %}text-warning{% else %}text-success{% endif %}">{{ setup_checklist.execution_message }}</span>
              {% elif setup_checklist.execution_message %}
              <span class="text-warning">{{ setup_checklist.execution_message }}</span>
              {% elif not setup_checklist.has_folder %}
              <span class="text-muted">Prerequisite: choose a project folder first.</span>
              {% elif not setup_checklist.has_worker %}
              <span class="text-muted">Prerequisite: configure an available worker first.</span>
              {% elif not setup_checklist.has_tasks %}
              <span class="text-muted">Prerequisite: create a task first.</span>
              {% elif setup_checklist.first_todo_unassigned_task_id %}
              <span class="text-warning">A task is queued in To Do. Assign the configured worker to launch it.</span>
              {% elif setup_checklist.first_todo_assigned_task_id %}
              <span class="text-warning">Task assigned; waiting for an agent session. Check Activity for blockers.</span>
              {% elif setup_checklist.first_backlog_task_id %}
              <span class="text-warning">Move a Backlog task to To Do, then assign the worker.</span>
              {% else %}
              <span class="text-warning">No agent session yet. Queue a task in To Do and assign the worker.</span>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="step-action">
          {% if setup_checklist.has_started or setup_checklist.execution_message %}
          <a class="btn btn-sm btn-secondary" href="/ui/projects/{{ project.id }}/workbench">View Activity</a>
          {% elif not setup_checklist.has_folder %}
          <button class="btn btn-sm btn-primary" type="button" onclick="openWorkspaceFolderPicker()">Choose folder</button>
          {% elif not setup_checklist.has_worker %}
          <button class="btn btn-sm btn-primary" type="button" onclick="openTeamModal()">Configure global worker role</button>
          {% elif not setup_checklist.has_tasks %}
          <button class="btn btn-sm btn-primary" type="button" onclick="openNewTaskModal()">New task</button>
          {% elif setup_checklist.first_todo_unassigned_task_id %}
          <button class="btn btn-sm btn-primary" type="button" onclick="assignRoleToTask({{ setup_checklist.first_todo_unassigned_task_id }},'worker',this)">Assign worker</button>
          {% elif setup_checklist.first_todo_assigned_task_id %}
          <a class="btn btn-sm btn-secondary" href="/ui/projects/{{ project.id }}/workbench">View Activity</a>
          {% elif setup_checklist.first_backlog_task_id %}
          <button class="btn btn-sm btn-primary" type="button" onclick="moveToTodo({{ setup_checklist.first_backlog_task_id }},this)">Move to To Do</button>
          {% else %}
          {% if setup_checklist.todo_stage_id %}
          <button class="btn btn-sm btn-primary" type="button" onclick="openAddTaskModal({{ setup_checklist.todo_stage_id }},'To Do')">New task in To Do</button>
          {% else %}
          <button class="btn btn-sm btn-primary" type="button" onclick="openNewTaskModal()">New task</button>
          {% endif %}
          {% endif %}
        </div>
      </div>
    </div>
  </section>
  {% endif %}


  <section class="board-filter-bar" aria-label="Find board tasks">
    <label for="board-search">Search tasks
      <input id="board-search" class="form-input" type="search" placeholder="Title or task ID" oninput="applyBoardFilters()">
    </label>
    <label for="board-filter">Show
      <select id="board-filter" class="form-input" onchange="applyBoardFilters()">
        <option value="">All tasks</option>
        <option value="needs-me">Needs me</option>
        <option value="blocked">Blocked</option>
        <option value="running">Running</option>
        <option value="unassigned">Unassigned</option>
      </select>
    </label>
    <label for="board-agent-filter">Agent
      <select id="board-agent-filter" class="form-input" onchange="applyBoardFilters()">
        <option value="">All agents</option>
      </select>
    </label>
    <label for="board-priority-filter">Priority
      <select id="board-priority-filter" class="form-input" onchange="applyBoardFilters()">
        <option value="">All priorities</option>
        <option value="none">None (0)</option>
        <option value="low">Low (1–3)</option>
        <option value="normal">Normal (4–6)</option>
        <option value="high">High (7–8)</option>
        <option value="urgent">Urgent (9–10)</option>
      </select>
    </label>
    <div class="board-filter-summary">
      <span id="board-match-count" role="status" aria-live="polite"></span>
      <button class="btn btn-sm" type="button" id="board-clear-filters" onclick="clearBoardFilters()" hidden>Clear filters</button>
    </div>
  </section>
  <p id="board-filter-empty" class="board-filter-empty" hidden>No tasks match these filters. Clear filters to see all tasks.</p>

  <section class="board-main-revamp" id="board-main-revamp">
    <div class="kanban-container-revamp">
      {% for stage in project.stages %}
      <div class="kanban-column-revamp" data-stage-id="{{ stage.id }}" data-stage-name="{{ stage.name }}" data-stage-key="{{ stage.key }}" data-stage-status="{{ stage_statuses.get(stage.key, '') }}">
        <div class="kanban-column-header-revamp">
          <span>{{ stage.name }}</span>
          <span class="badge" id="count-stage-{{ stage.id }}">{{ stage.tasks|length }}</span>
        </div>

        <div class="kanban-drop-zone-revamp" data-stage-id="{{ stage.id }}">
          {% for task in stage.tasks %}
          {% set latest_activity = latest_activity_by_task.get(task.id) %}
          {% set start_state = start_state_by_task.get(task.id) %}
          {% set git_pr_state = git_pr_state_by_task.get(task.id) %}
          <div class="kanban-task-revamp" draggable="true" tabindex="0" role="group"
            aria-label="Task {{ task.title }} in {{ stage.name }}. Use left and right arrow keys to move."
            aria-keyshortcuts="ArrowLeft ArrowRight" onkeydown="handleTaskKeydown(event, this)"
            data-task-id="{{ task.id }}" data-current-stage="{{ stage.id }}" data-status="{{ task.status.value }}"
            data-priority="P{{ task.priority }}" data-priority-value="{{ task.priority }}"
            data-execution="{{ latest_session_by_task.get(task.id, '') }}" data-needs-me="{{ 'true' if task.id in pending_approval_task_ids else 'false' }}"
            data-start-state="{{ start_state.state if start_state else '' }}"
            data-start-agent-name="{{ start_state.agent_name if start_state and start_state.agent_name else '' }}"
            id="task-card-{{ task.id }}">
            <div class="task-compact-face" role="button" aria-haspopup="dialog" aria-controls="task-detail-panel" aria-expanded="false" onclick="toggleCardExpansion({{ task.id }})">
              <div class="task-state-indicators" id="task-indicators-{{ task.id }}"></div>
              <div class="task-header-revamp">
                <strong class="task-title-revamp">{{ task.title }}</strong>
                <div class="task-actions-revamp">
                  <button class="btn-icon-sm" type="button" onclick="event.stopPropagation();openEditModal(this.closest('.kanban-task-revamp'))" title="Edit" aria-label="Edit task {{ task.id }}">&#9998;</button>
                  <div class="task-menu-wrap">
                    <button class="btn-icon-sm task-menu-btn" type="button" aria-haspopup="menu" aria-expanded="false"
                      aria-controls="task-menu-{{ task.id }}" aria-label="More actions for task {{ task.id }}"
                      onclick="event.stopPropagation();toggleTaskMenu({{ task.id }}, this)" title="More actions">&#8942;</button>
                    <div class="task-menu" id="task-menu-{{ task.id }}" role="menu" style="display:none;">
                      <button class="task-menu-item" type="button" role="menuitem"
                        onclick="event.stopPropagation();deleteTaskFromMenu({{ task.id }})">Delete task</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="task-meta-revamp">
                <span class="badge badge-{{ task.status.value }}" id="status-task-{{ task.id }}">
                  {% if task.status.value == 'completed' %}&#9989;{% elif task.status.value == 'in_progress' %}&#9889;{% elif task.status.value == 'in_review' %}&#128269;{% elif task.status.value == 'blocked' %}&#128683;{% else %}&#9203;{% endif %} {{ task.status.value | status_label }}
                </span>
                {% if task.priority > 5 %}
                <span class="badge badge-warning">&#128293; P{{ task.priority }}</span>
                {% elif task.priority > 0 %}
                <span class="badge">&#128204; P{{ task.priority }}</span>
                {% endif %}
                <span class="task-approval-badge" id="task-approval-badge-{{ task.id }}" style="display:none;cursor:pointer;" onclick="event.stopPropagation();openTaskApprovalPopup({{ task.id }})"></span>
                <span class="task-session-chip" id="task-session-chip-{{ task.id }}" style="display:none;"></span>
              </div>
              <div class="task-live-summary" id="task-live-summary-{{ task.id }}"
                data-activity-id="{{ latest_activity.id if latest_activity else '' }}"
                data-activity-at="{{ latest_activity.created_at if latest_activity else '' }}"
                data-activity-type="{{ latest_activity.type if latest_activity else '' }}"
                {% if latest_activity %}title="Latest activity from {{ latest_activity.agent_name }}"
                aria-label="Latest activity from {{ latest_activity.agent_name }}: {{ latest_activity.type_label }}. {{ latest_activity.message }}"
                {% else %}hidden{% endif %}>
                <span class="task-live-pulse" aria-hidden="true"></span>
                <span class="task-live-type">{{ latest_activity.type_label if latest_activity else '' }}</span>
                <span class="task-live-separator" aria-hidden="true">&middot;</span>
                <span class="task-live-message">{{ latest_activity.message if latest_activity else '' }}</span>
              </div>
              {% if task.assignees %}
              <div class="task-assignees-revamp">
                {% for assignee in task.assignees %}
                <span class="badge badge-assignee badge-{{ assignee.entity_type.value }}"
                  data-entity-id="{{ assignee.id }}" title="{{ assignee.name }} ({{ assignee.entity_type.value }})">
                  {% if assignee.entity_type.value == 'agent' %}&#129302;{% else %}&#128100;{% endif %} {{ assignee.name|truncate(15) }}
                  <button class="btn-remove-assignee"
                    onclick="event.stopPropagation();unassignEntity({{ task.id }}, {{ assignee.id }}, this.closest('.badge'))"
                    title="Unassign">&times;</button>
                </span>
                {% endfor %}
                {% if task.assignees|length > 1 %}
                <span class="assignee-overflow" title="Expand to see all assignees">+{{ task.assignees|length - 1 }} more</span>
                {% endif %}
              </div>
              {% endif %}
              {% if start_state %}
              <div class="task-start-row">
                {% if start_state.state in ('eligible', 'needs_assignment', 'choose_agent') %}
                <button class="btn btn-sm {% if start_state.state == 'eligible' %}btn-primary{% else %}btn-secondary{% endif %} task-start-button"
                  type="button" onclick="event.stopPropagation();startTask({{ task.id }}, this, '{{ start_state.state }}')"
                  aria-label="{{ start_state.label }} for task {{ task.title }}"
                  title="{% if start_state.state == 'eligible' %}Move to To Do and queue {{ start_state.agent_name }}{% elif start_state.state == 'choose_agent' %}Choose one agent before starting{% else %}Assign an agent before starting{% endif %}">
                  {% if start_state.state == 'eligible' %}&#9654;{% else %}&#128100;{% endif %} {{ start_state.label }}
                </button>
                {% else %}
                <span class="task-start-state task-start-state-{{ start_state.state }}">{{ start_state.label }}</span>
                {% endif %}
              </div>
              {% endif %}
              {% if git_pr_state %}
              <div class="task-git-pr-row">
                {% if git_pr_state.state == 'request' %}
                <button class="btn btn-sm btn-primary task-git-pr-button" type="button"
                  onclick="event.stopPropagation();requestGitPr({{ task.id }}, this)"
                  aria-label="Request Git/PR handoff for task {{ task.title }}"
                  title="Queue the configured Git/PR agent for the current implementation revision">
                  &#128279; {{ git_pr_state.label }}
                </button>
                {% elif git_pr_state.state == 'configure' %}
                <button class="btn btn-sm btn-secondary task-git-pr-button" type="button"
                  onclick="event.stopPropagation();openTeamModal()"
                  aria-label="Configure Git/PR agent for task {{ task.title }}">
                  &#9881; {{ git_pr_state.label }}
                </button>
                {% elif git_pr_state.state in ('queued', 'blocked', 'reserved', 'starting', 'started', 'active', 'completed', 'policy_queued') %}
                <a class="task-git-pr-state task-git-pr-state-{{ git_pr_state.state }}"
                  href="/ui/projects/{{ project.id }}/workbench#launch-queue"
                  onclick="event.stopPropagation()" title="Open the Activity launch queue">{{ git_pr_state.label }}</a>
                {% else %}
                <span class="task-git-pr-state task-git-pr-state-{{ git_pr_state.state }}">{{ git_pr_state.label }}</span>
                {% endif %}
              </div>
              {% endif %}
            </div>
            <div class="task-expansion-panel" id="task-expansion-{{ task.id }}" style="display:none;">
              <div class="expansion-tabs" role="tablist" aria-label="Task details">
                <button type="button" class="expansion-tab active" role="tab" aria-selected="true" data-tab="overview" aria-controls="expansion-pane-overview-{{ task.id }}" onclick="event.stopPropagation();switchExpansionTab({{ task.id }},'overview')">Overview</button>
                <button type="button" class="expansion-tab" role="tab" aria-selected="false" data-tab="terminal" aria-controls="expansion-pane-terminal-{{ task.id }}" onclick="event.stopPropagation();switchExpansionTab({{ task.id }},'terminal')">&#128187; Terminal</button>
                <button type="button" class="expansion-tab" role="tab" aria-selected="false" data-tab="approvals" aria-controls="expansion-pane-approvals-{{ task.id }}" onclick="event.stopPropagation();switchExpansionTab({{ task.id }},'approvals')">&#9888; Approvals <span class="badge" id="task-approvals-count-{{ task.id }}" style="display:none;">0</span></button>
                <button type="button" class="expansion-tab" role="tab" aria-selected="false" data-tab="activity" aria-controls="expansion-pane-activity-{{ task.id }}" onclick="event.stopPropagation();switchExpansionTab({{ task.id }},'activity')">Activity</button>
                <button type="button" class="expansion-tab" role="tab" aria-selected="false" data-tab="logs" aria-controls="expansion-pane-logs-{{ task.id }}" onclick="event.stopPropagation();switchExpansionTab({{ task.id }},'logs')">Logs</button>
                <button type="button" class="expansion-tab" role="tab" aria-selected="false" data-tab="reviews" aria-controls="expansion-pane-reviews-{{ task.id }}" onclick="event.stopPropagation();switchExpansionTab({{ task.id }},'reviews')">&#128270; Reviews</button>
              </div>
              <div class="expansion-pane active" role="tabpanel" id="expansion-pane-overview-{{ task.id }}">
                <div class="task-overview" id="task-overview-{{ task.id }}">Loading task details…</div>
              </div>
              <div class="expansion-pane" role="tabpanel" id="expansion-pane-terminal-{{ task.id }}">
                <div class="in-card-activity-header" style="justify-content:space-between;align-items:center;">
                  <span class="text-secondary" style="font-size:0.72rem;">Recent agent output</span>
                  <button class="btn-link" style="font-size:0.72rem;" onclick="event.stopPropagation();popOutTerminal({{ task.id }})">&#8599; Open in Activity</button>
                </div>
                <pre class="in-card-terminal" id="task-terminal-pre-{{ task.id }}" style="background:#020617;color:#d1fae5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.72rem;line-height:1.4;padding:0.6rem;border-radius:var(--radius-sm);max-height:220px;overflow:auto;white-space:pre-wrap;margin:0;">No active session.</pre>
              </div>
              <div class="expansion-pane" role="tabpanel" id="expansion-pane-approvals-{{ task.id }}">
                <div id="task-approvals-list-{{ task.id }}">
                  <p class="text-secondary" style="font-size:0.8rem;">Loading&hellip;</p>
                </div>
              </div>
              <div class="expansion-pane" role="tabpanel" id="expansion-pane-activity-{{ task.id }}">
                <div class="in-card-activity-header">
                  <button class="btn-link" style="font-size:0.72rem;" onclick="event.stopPropagation();openActivityPopup({{ task.id }})">&#8599; Expand all</button>
                </div>
                <div id="task-activity-list-{{ task.id }}" class="in-card-activity-list">
                  <p class="text-secondary" style="font-size:0.8rem;">Loading&hellip;</p>
                </div>
              </div>
              <div class="expansion-pane" role="tabpanel" id="expansion-pane-logs-{{ task.id }}">
                <div id="task-logs-{{ task.id }}" class="task-logs-list">Loading task logs…</div>
              </div>
              <div class="expansion-pane" role="tabpanel" id="expansion-pane-reviews-{{ task.id }}">
                <div class="task-diff-heading">
                  <div>
                    <strong>Git changes</strong>
                    <span id="task-git-diff-source-{{ task.id }}" class="text-secondary">Loading&hellip;</span>
                  </div>
                  <button type="button" class="btn-link" onclick="refreshTaskGitDiff({{ task.id }})">Refresh diff</button>
                </div>
                <div id="task-git-diff-{{ task.id }}" class="task-git-diff" aria-live="polite"></div>
                <h4 class="task-review-heading">Review decisions</h4>
                <p class="task-review-guidance">Approve or reject the saved patch. Agent runs finish separately; this does not move the task or merge code.</p>
                <div id="task-reviews-list-{{ task.id }}">
                  <p class="text-secondary" style="font-size:0.8rem;">Loading&hellip;</p>
                </div>
              </div>
            </div>

            <div class="task-footer-revamp" onclick="event.stopPropagation()">
              <button class="btn-link" onclick="openAssignModal({{ task.id }})">&#128100; Assign</button>
            </div>
          </div>
          {% endfor %}

          {% if not stage.tasks %}
          <div class="kanban-empty-placeholder text-center text-secondary">
            <small>&#10024; Ready for new tasks</small>
            <small style="font-size: 0.7rem; margin-top: 0.5rem; opacity: 0.7;">Drop here</small>
          </div>
          {% endif %}
        </div>

        {% if stage.key in ['backlog', 'to_do'] %}
        <div class="kanban-column-footer-revamp">
          <button class="btn-add-task" type="button" data-stage-name="{{ stage.name|e }}" onclick="openAddTaskModal({{ stage.id }}, this.dataset.stageName)">
            <span>+</span> New task
          </button>
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </section>

  <div id="task-panel-backdrop" class="task-panel-backdrop" hidden onclick="closeTaskPanel()" aria-hidden="true"></div>
  <aside id="task-detail-panel" class="task-detail-panel" role="dialog" aria-modal="true"
    aria-labelledby="task-panel-title" aria-hidden="true" tabindex="-1" hidden>
    <div class="task-panel-header">
      <div>
        <p class="task-panel-kicker" id="task-panel-number">Task details</p>
        <h2 id="task-panel-title">Task</h2>
      </div>
      <div class="task-panel-header-actions">
        <button class="btn btn-sm" type="button" id="task-panel-edit" onclick="editSelectedTask()">Edit</button>
        <button class="btn-icon" type="button" id="task-panel-close" aria-label="Close task details" onclick="closeTaskPanel()">&times;</button>
      </div>
    </div>
    <div id="task-panel-content" class="task-panel-content"></div>
  </aside>

  <!-- Activity popup modal -->
  <div id="activity-popup-overlay" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="activity-popup-title" onclick="if(event.target===this)closeActivityPopup()">
    <div class="modal-card" style="max-width:700px;width:95%;max-height:85vh;display:flex;flex-direction:column;">
      <div class="modal-header">
        <h3 id="activity-popup-title">Activity</h3>
        <button class="btn-icon" aria-label="Close activity" onclick="closeActivityPopup()">&times;</button>
      </div>
      <div id="activity-popup-body" style="flex:1;overflow-y:auto;padding:1rem 1.25rem;"></div>
    </div>
  </div>

  <!-- Approval prompt modal -->
  <div id="approval-popup-overlay" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="approval-popup-title" onclick="if(event.target===this)closeApprovalPopup()">
    <div class="modal-card approval-popup-card">
      <div class="modal-header">
        <div>
          <p class="approval-popup-kicker">Agent approval request</p>
          <h3 id="approval-popup-title">Approval needed</h3>
        </div>
        <button class="btn-icon" aria-label="Close approval request" onclick="closeApprovalPopup()">&times;</button>
      </div>
      <div id="approval-popup-body" class="approval-popup-body">
        <p class="text-secondary">Select a pending approval.</p>
      </div>
      <div class="approval-popup-note-wrap">
        <label for="approval-popup-note">Optional note</label>
        <input type="text" id="approval-popup-note" class="form-input" autofocus placeholder="Reason or instruction for the blocked agent">
      </div>
      <div class="approval-popup-actions">
        <button type="button" class="btn" onclick="closeApprovalPopup()">Later</button>
        <button type="button" class="btn btn-danger" id="approval-popup-reject" onclick="resolveCurrentApproval('rejected')">Reject</button>
        <button type="button" class="btn btn-success" id="approval-popup-approve" onclick="resolveCurrentApproval('approved')">Approve</button>
      </div>
    </div>
  </div>
</div>



<!-- Human completion override modal -->
<div id="done-override-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
  aria-hidden="true" aria-labelledby="done-override-title" data-cancel-handler="cancelDoneOverride"
  onclick="if(event.target===this)cancelDoneOverride()">
  <div class="modal-card done-override-card">
    <div class="modal-header">
      <div>
        <p class="approval-popup-kicker">Workflow override</p>
        <h3 id="done-override-title">Override workflow gate?</h3>
      </div>
      <button class="btn-icon" type="button" aria-label="Cancel workflow override" onclick="cancelDoneOverride()">&times;</button>
    </div>
    <div class="done-override-body">
      <p id="done-override-blocker" class="text-secondary"></p>
      <p id="done-override-evidence-label">The following required evidence is still missing:</p>
      <ul id="done-override-gates" class="done-override-gates"></ul>
      <label for="done-override-reason">Override reason</label>
      <textarea id="done-override-reason" class="form-input" rows="3" autofocus
        placeholder="Explain why this transition should proceed without the missing evidence"></textarea>
      <p id="done-override-error" class="text-danger" role="alert" style="display:none;"></p>
      <p class="text-secondary done-override-audit-note">Your name, the missing gates, and this reason will be recorded in the task audit trail.</p>
    </div>
    <div class="modal-actions">
      <button type="button" class="btn" onclick="cancelDoneOverride()">Cancel</button>
      <button id="done-override-submit" type="button" class="btn btn-danger" onclick="submitDoneOverride()">Continue anyway</button>
    </div>
  </div>
</div>

<!-- Toast notification -->
<div id="toast" class="toast" style="display:none;" role="status" aria-live="polite" aria-atomic="true"></div>

<!-- Agent-assisted planning starts in a focused composer. Proposed cards are
     still reviewed in the separate preview before anything is created. -->
<div id="plan-work-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="plan-work-title"
    onclick="if(event.target===this)closeModal('plan-work-modal')">
  <div class="modal-card modal-small plan-work-card" id="plan-work-wrap"
      data-stage-name="{{ (plan_stage.name if plan_stage else 'Backlog')|e }}">
    <div class="modal-header">
      <div>
        <h3 id="plan-work-title">Plan work with an agent</h3>
        <p class="text-secondary">Describe an outcome, then review the proposed cards before creating them.</p>
      </div>
      <button type="button" class="btn-icon" aria-label="Close work planner" onclick="closeModal('plan-work-modal')">&times;</button>
    </div>
    <div class="plan-work-body">
      <label for="chat-task-input">What do you want to accomplish?</label>
      <textarea id="chat-task-input" class="form-input" rows="5" autofocus
        placeholder="For example: add an authenticated browser terminal with a separate task shell"
        aria-describedby="chat-plan-hint"></textarea>
      <p class="chat-plan-hint text-secondary" id="chat-plan-hint">
        Proposed cards will be placed in {{ plan_stage.name if plan_stage else 'Backlog' }}. Nothing is created until you confirm.
      </p>
      <p class="chat-plan-error text-danger" id="chat-plan-error" role="alert" style="display:none;"></p>
    </div>
    <div class="form-actions">
      <button type="button" class="btn" onclick="closeModal('plan-work-modal')">Cancel</button>
      <button class="btn btn-primary" id="chat-plan-btn" type="button" onclick="createTaskFromChat()">Preview plan</button>
    </div>
  </div>
</div>

<!-- Task Edit/Create Modal -->
<div id="task-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="task-modal-title"
    onclick="if(event.target===this)closeModal('task-modal')">
  <div class="modal-card">
    <div class="modal-header">
      <h3 id="task-modal-title">New task</h3>
      <button class="btn-icon" aria-label="Close task dialog" onclick="closeModal('task-modal')">&times;</button>
    </div>
    <div class="tab-content">
      <form id="task-form" onsubmit="return false;">
        <input type="hidden" id="task-form-id">
        <input type="hidden" id="task-form-mode" value="edit">
        <input type="hidden" id="task-form-version" value="">
        <div class="form-group">
          <label for="task-form-title">Title</label>
          <input type="text" id="task-form-title" class="form-input" required autofocus placeholder="Task title">
        </div>
        <div class="form-group">
          <label for="task-form-desc">Description</label>
          <textarea id="task-form-desc" class="form-input" rows="3" placeholder="What needs to be done?"></textarea>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="task-form-stage">Stage</label>
            <select id="task-form-stage" class="form-input">
              {% for stage in project.stages %}
              <option value="{{ stage.id }}">{{ stage.name }}</option>
              {% endfor %}
            </select>
            <small id="task-form-stage-hint" class="text-secondary" style="display:none;">
              Move the card on the board to change its stage.
            </small>
          </div>
          <div class="form-group">
            <label for="task-form-priority">Priority</label>
            <select id="task-form-priority" class="form-input">
              <option value="0">None (0)</option>
              <option value="2">Low (2)</option>
              <option value="5">Normal (5)</option>
              <option value="8">High (8)</option>
              <option value="10">Urgent (10)</option>
            </select>
            <small class="text-secondary">Existing values 0–10 stay unchanged unless you choose a new priority.</small>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="task-form-status">Status</label>
            <select id="task-form-status" class="form-input">
              <option value="pending">Pending</option>
              <option value="in_progress">In Progress</option>
              <option value="in_review">In Review</option>
              <option value="completed">Completed</option>
              <option value="blocked">Blocked</option>
            </select>
          </div>
          <div class="form-group">
            <label for="task-form-skills">Required Skills</label>
            <input type="text" id="task-form-skills" class="form-input" placeholder="python,react,testing">
          </div>
        </div>
        <div id="task-comments-section" style="display:none; margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
          <h4>Activity &amp; Comments</h4>
          <div id="task-comments-list" style="max-height: 200px; overflow-y: auto; margin-bottom: 1rem; font-size: 0.9rem;"></div>
        </div>
        <p id="task-form-error" class="text-danger" role="alert" style="display:none;margin-top:0.5rem;"></p>
        <div class="form-actions">
          <button type="button" class="btn" onclick="closeModal('task-modal')">Cancel</button>
          <button type="button" class="btn btn-primary" id="task-form-submit" onclick="submitTaskForm(this)">Create task</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Assign Modal -->
<div id="assign-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="assign-modal-title"
    onclick="if(event.target===this)closeModal('assign-modal')">
  <div class="modal-card modal-small">
    <div class="modal-header">
      <h3 id="assign-modal-title">Assign Role to Task</h3>
      <button class="btn-icon" aria-label="Close assignment dialog" onclick="closeModal('assign-modal')">&times;</button>
    </div>
    <input type="hidden" id="assign-task-id">
    <div id="assign-entity-list" class="entity-list">
      <p class="text-secondary">Loading...</p>
    </div>
  </div>
</div>

<!-- Project Edit Modal -->
<div id="project-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="project-modal-title"
    onclick="if(event.target===this)closeModal('project-modal')">
  <div class="modal-card modal-small">
    <div class="modal-header">
      <h3 id="project-modal-title">Edit Project</h3>
      <button class="btn-icon" aria-label="Close project dialog" onclick="closeModal('project-modal')">&times;</button>
    </div>
    <div class="form-group">
      <label>Project Name</label>
      <input type="text" id="project-form-name" class="form-input" value="{{ project.name }}">
    </div>
    <div class="form-group">
      <label>Description</label>
      <textarea id="project-form-desc" class="form-input" rows="3">{{ project.description }}</textarea>
    </div>
    <div class="form-group">
      <label>Project Folder</label>
      <div style="display:flex;gap:0.5rem;">
        <input type="text" id="project-form-path" class="form-input" value="{{ project.path or '' }}" placeholder="Choose a local folder" readonly>
        <button type="button" class="btn" onclick="openFolderPicker('project-form-path')">Browse</button>
      </div>
      <small class="text-secondary">CLI agent sessions and hooks use this as the workspace path.</small>
    </div>
    <div class="form-actions">
      <button class="btn" onclick="closeModal('project-modal')">Cancel</button>
      <button class="btn btn-primary" onclick="submitProjectEdit()">Save</button>
    </div>
  </div>
</div>

<div id="plan-preview-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    data-cancel-handler="closePlanPreview"
    aria-hidden="true" aria-labelledby="plan-preview-title" onclick="if(event.target===this)closePlanPreview()">
  <div class="modal-card plan-preview-card">
    <div class="modal-header">
      <div><h3 id="plan-preview-title">Review proposed tasks</h3>
        <p class="text-secondary">Edit, remove, or deselect tasks. Nothing is created until you confirm.</p></div>
      <button type="button" class="btn-icon" aria-label="Close plan preview" onclick="closePlanPreview()">&times;</button>
    </div>
    <div id="plan-preview-items" class="plan-preview-items"></div>
    <p id="plan-preview-error" class="text-danger" role="alert"></p>
    <div class="form-actions">
      <span id="plan-preview-count" role="status"></span>
      <button type="button" class="btn" onclick="closePlanPreview()">Cancel</button>
      <button type="button" class="btn btn-primary" id="plan-preview-create" onclick="commitPlanPreview()">Create selected tasks</button>
    </div>
  </div>
</div>

<!-- Stage Policy Modal -->
<div id="stage-policy-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="stage-policy-modal-title"
    onclick="if(event.target===this)closeModal('stage-policy-modal')">
  <div class="modal-card" style="max-width:600px;">
    <div class="modal-header">
      <h3 id="stage-policy-modal-title">Stage Policy</h3>
      <button class="btn-icon" aria-label="Close stage policy dialog" onclick="closeModal('stage-policy-modal')">&times;</button>
    </div>
    <p class="text-secondary" style="margin-bottom:1rem;">
      Expected roles, required outputs, and review mode for each stage. When an
      agent session finishes and reports its work ready in <code>STATUS.md</code>,
      the runtime moves the card automatically &mdash; work finished in To Do or
      In Progress goes to Review, and a finished test or diff review moves the
      card to Done &mdash; and assigns the new stage's expected roles. Every
      other move is made by you or the orchestrator.
    </p>
    <div id="stage-policy-list" style="max-height:50vh;overflow-y:auto;"></div>
    <div class="form-actions" style="margin-top:1rem;">
      <button class="btn" onclick="closeModal('stage-policy-modal')">Close</button>
      <button class="btn btn-primary" onclick="seedDefaultPolicies()">Seed Defaults</button>
    </div>
  </div>
</div>

<!-- Team Management Modal -->
<div id="team-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="team-modal-title"
    onclick="if(event.target===this)closeModal('team-modal')">
  <div class="modal-card role-settings-modal">
    <div class="modal-header">
      <h3 id="team-modal-title">Global agent roles</h3>
      <button class="btn-icon" aria-label="Close team dialog" onclick="closeModal('team-modal')">&times;</button>
    </div>
    <p class="text-secondary" style="padding:0 1rem;margin:0.75rem 0 0;font-size:0.82rem;">
      Changes here apply to every project.
      <a href="/ui/users?focus=worker&amp;return=/ui/projects/{{ project.id }}/board">Open the full role manager</a>
    </p>
    <div id="team-list" class="entity-list role-settings-list"></div>
    <div class="modal-footer" style="padding-top: 1rem; border-top: 1px solid var(--border-color); margin-top: 1rem;">
      <small class="text-secondary">Assign CLI tools to roles. Discovered CLIs are candidates only; role assignment is the working team.</small>
    </div>
  </div>
</div>

{% set folder_picker_title = 'Select Project Folder' %}
{% include "_folder_picker.html" %}

{% endblock %}

{% block extra_js %}
<script>
    var PROJECT_ID = {{ project.id }};
    var CURRENT_ENTITY_ID = {{ current_entity.id if current_entity else 'null' }};
    var PLAN_STAGE_ID = {{ new_task_default_stage.id if new_task_default_stage else 'null' }};
</script>
<script src="/static/js/role-settings.js?v=7"></script>
<script src="/static/js/terminal-feed.js?v=7"></script>
<script src="/static/js/folder-picker.js?v=7"></script>
<script src="/static/js/board.js?v=10"></script>
{% endblock %}