{% extends "base.html" %}
{% set active_page = "projects" %}
{% block title %}{{ project.title[:40] }}{% endblock %}

{% block content %}
<!-- 1. Header -->
<div class="mb-6">
    <a href="/projects" class="text-xs text-gray-500 hover:text-gray-300">&larr; All Projects</a>
    <h1 class="text-xl font-semibold text-white mt-2">{{ project.title }}</h1>
    <div class="flex items-center gap-3 mt-2 flex-wrap">
        <span class="badge badge-{{ project.bid_status.value | status_color }}">
            {{ project.bid_status.value | replace('_', ' ') | title }}
        </span>
        <span class="badge badge-purple">Direct Client</span>
        {% if project.project_type and project.project_type != 'software' %}
        <span class="badge badge-red">{{ project.project_type | replace('_', ' ') | title }}</span>
        {% elif project.project_type == 'software' %}
        <span class="badge badge-blue">Software</span>
        {% endif %}
        {% if project.ref_number %}
        <span class="text-sm font-mono text-blue-400 bg-blue-400/10 px-2 py-0.5 rounded">BS-{{ '%03d' % project.ref_number }}</span>
        {% endif %}
        {% if project.github_repo_url %}
        <a href="{{ project.github_repo_url }}" target="_blank" class="text-xs text-blue-400 hover:text-blue-300">GitHub &rarr;</a>
        {% endif %}
    </div>
    <!-- Client info -->
    <div class="flex items-center gap-4 mt-3 text-sm text-gray-400">
        {% if project.client_name %}
        <div class="flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            {{ project.client_name }}
        </div>
        {% endif %}
        {% if project.client_email %}
        <div class="flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            {{ project.client_email }}
        </div>
        {% endif %}
        {% if project.customer and project.customer.company %}
        <div class="flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            {{ project.customer.company }}
        </div>
        {% endif %}
    </div>
</div>

<!-- 1b. Workflow Pipeline -->
{% set latest_session = dev_sessions[0] if dev_sessions else None %}
{% set all_dev_confirmed = features and features | selectattr('dev_confirmed') | list | length == features | length %}
{% set any_qa_confirmed = features and features | selectattr('qa_confirmed') | list | length > 0 %}
{% set has_approved_plans = smoke_test_plans and smoke_test_plans | selectattr('approved') | list | length > 0 %}
{% set has_docker = project.docker_image_url %}

{# Determine current step index (0-based) #}
{% set ns = namespace(step=0) %}
{% if latest_session %}
  {% if latest_session.status.value == 'planning' or latest_session.status.value == 'plan_pending_review' %}
    {% set ns.step = 1 %}
  {% elif latest_session.status.value == 'running' or latest_session.status.value == 'paused_waiting_human' %}
    {% set ns.step = 2 %}
  {% elif latest_session.status.value == 'completed' or latest_session.status.value == 'failed' %}
    {% if all_dev_confirmed %}
      {% set ns.step = 3 %}
    {% else %}
      {% set ns.step = 2 %}
    {% endif %}
  {% else %}
    {% set ns.step = 1 %}
  {% endif %}
{% endif %}

{% if deployment_plan %}
  {% if deployment_plan.status.value == 'draft' or deployment_plan.status.value == 'pending_review' or deployment_plan.status.value == 'rejected' %}
    {% set ns.step = 4 %}
  {% elif deployment_plan.status.value == 'approved' or deployment_plan.status.value == 'provisioning' %}
    {% set ns.step = 5 %}
  {% elif deployment_plan.status.value == 'provisioned_stopped' %}
    {% set ns.step = 6 %}
  {% elif deployment_plan.status.value == 'test_approved' or deployment_plan.status.value == 'running' or deployment_plan.status.value == 'testing' %}
    {% set ns.step = 7 %}
  {% elif deployment_plan.status.value == 'test_complete' or deployment_plan.status.value == 'completed' %}
    {% set ns.step = 8 %}
  {% endif %}
{% endif %}

{% if has_docker and ns.step < 9 %}
  {% set ns.step = 9 %}
{% endif %}

{% if project.bid_status.value == 'completed' %}
  {% set ns.step = 10 %}
{% endif %}

<div class="card rounded-lg p-5 mb-6">
    <h3 class="text-sm font-medium text-white mb-3">Workflow</h3>
    <div class="overflow-x-auto">
        <canvas id="workflow-canvas" height="340" style="width:100%;min-width:960px;"></canvas>
    </div>
</div>
<script>
(function() {
    var CURRENT = {{ ns.step }};
    var canvas = document.getElementById('workflow-canvas');
    if (!canvas) return;
    var dpr = window.devicePixelRatio || 1;
    var rect = canvas.getBoundingClientRect();
    var W = Math.max(960, rect.width);
    var H = 340;
    canvas.width = W * dpr;
    canvas.height = H * dpr;
    canvas.style.width = W + 'px';
    canvas.style.height = H + 'px';
    var ctx = canvas.getContext('2d');
    ctx.scale(dpr, dpr);

    /* ── colours ── */
    var C = {
        done:     {bg:'#064e3b', border:'#10b981', text:'#34d399', fill:'#059669'},
        current:  {bg:'#1e3a5f', border:'#3b82f6', text:'#60a5fa', fill:'#2563eb'},
        future:   {bg:'#1f2937', border:'#374151', text:'#6b7280', fill:'#374151'},
        gate:     {bg:'#422006', border:'#d97706', text:'#fbbf24', fill:'#b45309'},
        reject:   '#ef4444',
        arrow:    '#4b5563',
        arrowDone:'#059669',
        gridLine: '#111827',
        canvas:   '#0d1117',
        label:    '#9ca3af',
        sublabel: '#6b7280',
    };

    /* ── node definitions ── */
    /* type: 'proc' = process box, 'gate' = approval diamond, 'term' = terminal rounded */
    var nodes = [
        {id:'intake',      label:'Intake',           agent:'Requirements',  type:'proc', step:0,  row:0, col:0},
        {id:'devplan',     label:'Dev Plan',          agent:'DevAgent',      type:'proc', step:1,  row:0, col:1},
        {id:'approve_dp',  label:'Approve?',          agent:'Human',         type:'gate', step:1,  row:0, col:2},
        {id:'coding',      label:'Coding',            agent:'DevAgent',      type:'proc', step:2,  row:0, col:3},
        {id:'codereview',  label:'Code Review',       agent:'PM Agent',      type:'proc', step:3,  row:0, col:4},
        {id:'deploystrat', label:'Deploy Strategy',   agent:'DevOps Agent',  type:'proc', step:4,  row:1, col:0},
        {id:'approve_dep', label:'Approve?',          agent:'Human',         type:'gate', step:4,  row:1, col:1},
        {id:'provision',   label:'Provision VM',      agent:'DevOps Agent',  type:'proc', step:5,  row:1, col:2},
        {id:'testplans',   label:'Test Plans',        agent:'Smoke Test',    type:'proc', step:6,  row:1, col:3},
        {id:'approve_tp',  label:'Approve?',          agent:'Human',         type:'gate', step:6,  row:1, col:4},
        {id:'testing',     label:'Run Tests',         agent:'Smoke Test',    type:'proc', step:7,  row:2, col:0},
        {id:'release',     label:'Docker Build',      agent:'Release Agent', type:'proc', step:8,  row:2, col:1},
        {id:'demo',        label:'Launchpad Demo',    agent:'Launchpad',     type:'proc', step:9,  row:2, col:2},
        {id:'complete',    label:'Delivered',          agent:'',              type:'term', step:10, row:2, col:3},
    ];

    /* ── edges: [from_id, to_id, type] type: 'flow' | 'reject' ── */
    var edges = [
        ['intake',     'devplan',      'flow'],
        ['devplan',    'approve_dp',   'flow'],
        ['approve_dp', 'coding',       'flow'],
        ['approve_dp', 'devplan',      'reject'],
        ['coding',     'codereview',   'flow'],
        ['codereview', 'deploystrat',  'flow'],
        ['deploystrat','approve_dep',  'flow'],
        ['approve_dep','provision',    'flow'],
        ['approve_dep','deploystrat',  'reject'],
        ['provision',  'testplans',    'flow'],
        ['testplans',  'approve_tp',   'flow'],
        ['approve_tp', 'testing',      'flow'],
        ['approve_tp', 'testplans',    'reject'],
        ['testing',    'release',      'flow'],
        ['release',    'demo',         'flow'],
        ['demo',       'complete',     'flow'],
    ];

    /* ── substatus ── */
    var substatus = {
    {% if ns.step == 1 and latest_session %}
      {% if latest_session.status.value == 'planning' %}1: 'Generating...',
      {% elif latest_session.status.value == 'plan_pending_review' %}1: 'Needs Review',{% endif %}
    {% endif %}
    {% if ns.step == 2 and latest_session %}
      {% if latest_session.status.value == 'running' %}2: 'In Progress',
      {% elif latest_session.status.value == 'paused_waiting_human' %}2: 'Waiting for Input',
      {% elif latest_session.status.value == 'failed' %}2: 'Failed',{% endif %}
    {% endif %}
    {% if ns.step == 4 and deployment_plan %}
      {% if deployment_plan.status.value == 'draft' %}4: 'Strategy Pending',
      {% elif deployment_plan.status.value == 'pending_review' %}4: 'Needs Review',
      {% elif deployment_plan.status.value == 'rejected' %}4: 'Revision Needed',{% endif %}
    {% endif %}
    {% if ns.step == 5 %}5: 'Provisioning VM',{% endif %}
    {% if ns.step == 6 %}6: {% if has_approved_plans %}'Ready to Test'{% else %}'Plans Need Approval'{% endif %},{% endif %}
    {% if ns.step == 7 %}7: 'Running Tests',{% endif %}
    {% if ns.step == 8 %}8: 'Building Image',{% endif %}
    };

    /* ── layout geometry ── */
    var pad   = {x: 30, y: 30};
    var nodeW = 130, nodeH = 44, gateS = 40;
    var colGap = 52, rowGap = 50;
    var colW = nodeW + colGap;
    var rowH = nodeH + rowGap + 18;

    function nodePos(n) {
        var x = pad.x + n.col * colW + nodeW / 2;
        var y = pad.y + n.row * rowH + nodeH / 2 + 8;
        return {x: x, y: y};
    }

    var nodeMap = {};
    nodes.forEach(function(n) { nodeMap[n.id] = n; });

    function stateOf(n) {
        if (n.step < CURRENT) return 'done';
        if (n.step === CURRENT) return 'current';
        return 'future';
    }

    function palette(n) {
        var s = stateOf(n);
        if (n.type === 'gate') {
            if (s === 'done') return C.done;
            if (s === 'current') return C.gate;
            return C.future;
        }
        return C[s];
    }

    /* ── drawing helpers ── */
    function roundRect(x, y, w, h, r) {
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + h - r);
        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
        ctx.lineTo(x + r, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.closePath();
    }

    function diamond(cx, cy, s) {
        ctx.beginPath();
        ctx.moveTo(cx, cy - s);
        ctx.lineTo(cx + s, cy);
        ctx.lineTo(cx, cy + s);
        ctx.lineTo(cx - s, cy);
        ctx.closePath();
    }

    function arrow(x1, y1, x2, y2, color, dashed) {
        ctx.save();
        ctx.strokeStyle = color;
        ctx.lineWidth = 1.5;
        if (dashed) ctx.setLineDash([4, 4]);
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        /* arrowhead */
        var angle = Math.atan2(y2 - y1, x2 - x1);
        var hs = 6;
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - hs * Math.cos(angle - 0.4), y2 - hs * Math.sin(angle - 0.4));
        ctx.lineTo(x2 - hs * Math.cos(angle + 0.4), y2 - hs * Math.sin(angle + 0.4));
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    function curvedArrow(x1, y1, x2, y2, color, curveDir) {
        /* curveDir: 1 = curve below, -1 = curve above */
        ctx.save();
        ctx.strokeStyle = color;
        ctx.lineWidth = 1.5;
        ctx.setLineDash([4, 3]);
        var mx = (x1 + x2) / 2;
        var my = (y1 + y2) / 2 + curveDir * 30;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.quadraticCurveTo(mx, my, x2, y2);
        ctx.stroke();
        /* arrowhead */
        var t = 0.95;
        var tx = (1-t)*(1-t)*x1 + 2*(1-t)*t*mx + t*t*x2;
        var ty = (1-t)*(1-t)*y1 + 2*(1-t)*t*my + t*t*y2;
        var angle = Math.atan2(y2 - ty, x2 - tx);
        var hs = 5;
        ctx.fillStyle = color;
        ctx.setLineDash([]);
        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - hs * Math.cos(angle - 0.4), y2 - hs * Math.sin(angle - 0.4));
        ctx.lineTo(x2 - hs * Math.cos(angle + 0.4), y2 - hs * Math.sin(angle + 0.4));
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    /* ── draw background ── */
    ctx.fillStyle = C.canvas;
    ctx.fillRect(0, 0, W, H);

    /* ── row labels ── */
    ctx.save();
    ctx.font = '600 9px system-ui, sans-serif';
    ctx.fillStyle = '#374151';
    ctx.textAlign = 'right';
    var rlx = pad.x - 8;
    /* no row labels — keep it clean */
    ctx.restore();

    /* ── draw edges ── */
    edges.forEach(function(e) {
        var from = nodeMap[e[0]], to = nodeMap[e[1]];
        var fp = nodePos(from), tp = nodePos(to);
        var isReject = e[2] === 'reject';

        if (isReject) {
            /* reject loops curve above the gate back to the source */
            var exitY = fp.y - (from.type === 'gate' ? gateS/2 + 4 : nodeH/2 + 4);
            var entryY = tp.y - nodeH/2 - 4;
            curvedArrow(fp.x, exitY, tp.x, entryY, C.reject, -1);
            return;
        }

        /* normal flow */
        var fromDone = from.step < CURRENT;
        var color = fromDone ? C.arrowDone : C.arrow;

        /* handle row transitions */
        if (from.row !== to.row) {
            /* go down: exit right side, go down, enter left side of next row */
            var exitX = fp.x + (from.type === 'gate' ? gateS/2 + 2 : nodeW/2 + 2);
            var exitY = fp.y;
            var entryX = tp.x - nodeW/2 - 2;
            var entryY = tp.y;
            var midX = exitX + 20;
            ctx.save();
            ctx.strokeStyle = color;
            ctx.lineWidth = 1.5;
            ctx.beginPath();
            ctx.moveTo(exitX, exitY);
            ctx.lineTo(midX, exitY);
            ctx.lineTo(midX, entryY);
            ctx.lineTo(entryX, entryY);
            ctx.stroke();
            /* arrowhead */
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.moveTo(entryX, entryY);
            ctx.lineTo(entryX - 6, entryY - 3);
            ctx.lineTo(entryX - 6, entryY + 3);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
            return;
        }

        /* same row: right side to left side */
        var x1 = fp.x + (from.type === 'gate' ? gateS/2 + 2 : nodeW/2 + 2);
        var x2 = tp.x - (to.type === 'gate' ? gateS/2 + 2 : nodeW/2 + 2);
        arrow(x1, fp.y, x2, tp.y, color, false);
    });

    /* ── draw nodes ── */
    nodes.forEach(function(n) {
        var p = nodePos(n);
        var pal = palette(n);
        var s = stateOf(n);

        if (n.type === 'gate') {
            /* diamond */
            diamond(p.x, p.y, gateS / 2);
            ctx.fillStyle = pal.bg;
            ctx.fill();
            ctx.strokeStyle = pal.border;
            ctx.lineWidth = 1.5;
            ctx.stroke();

            /* icon: ? mark */
            ctx.fillStyle = pal.text;
            ctx.font = 'bold 13px system-ui, sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('?', p.x, p.y + 1);

            /* label below */
            ctx.font = '500 9px system-ui, sans-serif';
            ctx.fillStyle = pal.text;
            ctx.fillText(n.label, p.x, p.y + gateS/2 + 12);
            ctx.font = '400 8px system-ui, sans-serif';
            ctx.fillStyle = C.sublabel;
            ctx.fillText(n.agent, p.x, p.y + gateS/2 + 22);

        } else if (n.type === 'term') {
            /* terminal: pill shape */
            var tw = nodeW - 10, th = nodeH;
            roundRect(p.x - tw/2, p.y - th/2, tw, th, th/2);
            ctx.fillStyle = pal.bg;
            ctx.fill();
            ctx.strokeStyle = pal.border;
            ctx.lineWidth = s === 'current' ? 2 : 1.5;
            ctx.stroke();

            ctx.fillStyle = pal.text;
            ctx.font = '600 11px system-ui, sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(n.label, p.x, p.y);

        } else {
            /* process box */
            roundRect(p.x - nodeW/2, p.y - nodeH/2, nodeW, nodeH, 6);
            ctx.fillStyle = pal.bg;
            ctx.fill();
            ctx.strokeStyle = pal.border;
            ctx.lineWidth = s === 'current' ? 2 : 1.5;
            ctx.stroke();

            /* checkmark for done */
            if (s === 'done') {
                ctx.save();
                ctx.fillStyle = '#059669';
                ctx.beginPath();
                ctx.arc(p.x - nodeW/2 + 12, p.y, 7, 0, Math.PI * 2);
                ctx.fill();
                ctx.strokeStyle = '#d1fae5';
                ctx.lineWidth = 1.5;
                ctx.beginPath();
                ctx.moveTo(p.x - nodeW/2 + 9, p.y);
                ctx.lineTo(p.x - nodeW/2 + 11.5, p.y + 2.5);
                ctx.lineTo(p.x - nodeW/2 + 15, p.y - 2);
                ctx.stroke();
                ctx.restore();
            }

            /* current pulsing dot */
            if (s === 'current') {
                ctx.save();
                ctx.fillStyle = '#3b82f6';
                ctx.shadowColor = '#3b82f6';
                ctx.shadowBlur = 8;
                ctx.beginPath();
                ctx.arc(p.x + nodeW/2 - 8, p.y - nodeH/2 + 8, 4, 0, Math.PI * 2);
                ctx.fill();
                ctx.shadowBlur = 0;
                ctx.restore();
            }

            /* label */
            var labelX = s === 'done' ? p.x + 4 : p.x;
            ctx.fillStyle = pal.text;
            ctx.font = '600 10px system-ui, sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(n.label, labelX, p.y - 6);

            /* agent sublabel */
            ctx.font = '400 8px system-ui, sans-serif';
            ctx.fillStyle = C.sublabel;
            ctx.fillText(n.agent, labelX, p.y + 7);

            /* substatus badge */
            if (s === 'current' && substatus[n.step]) {
                var badge = substatus[n.step];
                ctx.font = '500 8px system-ui, sans-serif';
                var bw = ctx.measureText(badge).width + 10;
                var bx = p.x - bw/2, by = p.y + nodeH/2 + 4;
                roundRect(bx, by, bw, 16, 8);
                ctx.fillStyle = n.step === 2 && badge === 'Failed' ? '#7f1d1d' : '#1e3a5f';
                ctx.fill();
                ctx.strokeStyle = n.step === 2 && badge === 'Failed' ? '#ef4444' : '#3b82f6';
                ctx.lineWidth = 1;
                ctx.stroke();
                ctx.fillStyle = n.step === 2 && badge === 'Failed' ? '#fca5a5' : '#93c5fd';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(badge, p.x, by + 8);
            }
        }
    });

    /* ── reject labels ── */
    ctx.font = '500 7px system-ui, sans-serif';
    ctx.fillStyle = '#ef4444';
    ctx.textAlign = 'center';
    [['approve_dp','devplan'],['approve_dep','deploystrat'],['approve_tp','testplans']].forEach(function(pair) {
        var gp = nodePos(nodeMap[pair[0]]);
        var tp2 = nodePos(nodeMap[pair[1]]);
        ctx.fillText('reject', (gp.x + tp2.x) / 2, gp.y - gateS/2 - 18);
    });

    /* ── legend ── */
    var lx = W - 200, ly = H - 55;
    ctx.font = '400 8px system-ui, sans-serif';
    [[C.done.fill, 'Completed'], [C.current.fill, 'Current'], [C.future.fill, 'Upcoming'], [C.gate.border, 'Approval Gate'], [C.reject, 'Reject Loop']].forEach(function(item, i) {
        var ix = lx, iy = ly + i * 14;
        if (i < 3) {
            roundRect(ix, iy - 4, 10, 8, 2);
            ctx.fillStyle = item[0]; ctx.fill();
        } else if (i === 3) {
            diamond(ix + 5, iy, 5);
            ctx.fillStyle = item[0]; ctx.fill();
        } else {
            ctx.save(); ctx.strokeStyle = item[0]; ctx.lineWidth = 1.5; ctx.setLineDash([3,2]);
            ctx.beginPath(); ctx.moveTo(ix, iy); ctx.lineTo(ix + 10, iy); ctx.stroke();
            ctx.restore();
        }
        ctx.fillStyle = C.label; ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
        ctx.fillText(item[1], ix + 16, iy);
    });
})();
</script>

<!-- 2. Pricing & Timeline Card -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <div class="card rounded-lg p-5">
        <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">Pricing</h3>
        {% if project.bid_amount %}
        <div class="flex items-baseline gap-3">
            <span class="text-gray-500 line-through text-lg">${{ "%.2f" | format(project.bid_amount) }}</span>
            <span class="text-2xl font-bold text-green-400">$99.99</span>
        </div>
        <div class="mt-1.5 inline-block bg-green-900/40 border border-green-800/50 text-green-400 text-xs font-medium px-2.5 py-1 rounded-full">
            Promotional Offer
        </div>
        {% else %}
        <div class="flex items-baseline gap-3">
            <span class="text-2xl font-bold text-green-400">$99.99</span>
        </div>
        <div class="mt-1.5 inline-block bg-green-900/40 border border-green-800/50 text-green-400 text-xs font-medium px-2.5 py-1 rounded-full">
            Promotional Offer
        </div>
        {% endif %}
    </div>
    <div class="card rounded-lg p-5">
        <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">Timeline</h3>
        {% if delivery_plan_data and delivery_plan_data is mapping and delivery_plan_data.get('total_days') %}
        <div class="flex items-baseline gap-3">
            <span class="text-gray-500 line-through text-lg">{{ delivery_plan_data.total_days }} days</span>
            <span class="text-2xl font-bold text-green-400">48 Hours</span>
        </div>
        {% elif project.bid_amount %}
        <div class="flex items-baseline gap-3">
            <span class="text-2xl font-bold text-green-400">48 Hours</span>
        </div>
        {% else %}
        <div class="text-2xl font-bold text-green-400">48 Hours</div>
        {% endif %}
        <div class="mt-1.5 inline-block bg-green-900/40 border border-green-800/50 text-green-400 text-xs font-medium px-2.5 py-1 rounded-full">
            Promotional Delivery
        </div>
    </div>
</div>

<!-- 3. Delivery Plan -->
<div class="card rounded-lg p-5 mb-6">
    <h3 class="text-sm font-medium text-white mb-4">Delivery Plan</h3>
    {% if delivery_plan_data and delivery_plan_data is mapping %}
    <!-- Structured JSON plan -->
    {% if delivery_plan_data.get('phases') %}
    <div class="space-y-4">
        {% for phase in delivery_plan_data.phases %}
        <div class="border-l-2 border-blue-800 pl-4">
            <div class="flex items-center gap-3 mb-2">
                <span class="text-sm font-medium text-blue-400">Phase {{ loop.index }}: {{ phase.name if phase is mapping and phase.get('name') else phase }}</span>
                {% if phase is mapping and phase.get('duration') %}
                <span class="text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">{{ phase.duration }}</span>
                {% endif %}
            </div>
            {% if phase is mapping and phase.get('deliverables') %}
            <ul class="space-y-1 ml-2">
                {% for d in phase.deliverables %}
                <li class="text-xs text-gray-400 flex items-start gap-2">
                    <span class="text-gray-600 mt-0.5">&#8226;</span>
                    {{ d }}
                </li>
                {% endfor %}
            </ul>
            {% elif phase is mapping and phase.get('description') %}
            <div class="text-xs text-gray-400">{{ phase.description }}</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% elif delivery_plan_data.get('description') %}
    <div class="text-sm text-gray-400 prose prose-invert prose-sm max-w-none markdown-body" data-markdown="{{ delivery_plan_data.description | e }}"></div>
    {% else %}
    <!-- Render the whole JSON as structured content -->
    <div class="text-sm text-gray-400 whitespace-pre-wrap mono bg-gray-900/50 rounded p-3 text-xs">{{ delivery_plan_data | tojson(indent=2) }}</div>
    {% endif %}
    {% elif project.delivery_plan %}
    <!-- Markdown text plan -->
    <div class="text-sm text-gray-400 prose prose-invert prose-sm max-w-none markdown-body" data-markdown="{{ project.delivery_plan | e }}"></div>
    {% else %}
    <div class="text-sm text-gray-600 text-center py-4">No delivery plan generated yet</div>
    {% endif %}
</div>

<!-- 3b. Development Plan (Dev Agent) -->
{% set latest_session = dev_sessions[0] if dev_sessions else None %}
{% if latest_session and latest_session.dev_plan %}
<div class="card rounded-lg p-5 mb-6" id="dev-plan">
    <h3 class="text-sm font-medium text-white mb-4">
        Development Plan
        {% if latest_session.dev_plan_approved %}
        <span class="ml-2 badge badge-green">Approved</span>
        {% elif latest_session.status.value == 'plan_pending_review' %}
        <span class="ml-2 badge badge-yellow">Needs Review</span>
        {% elif latest_session.status.value == 'planning' %}
        <span class="ml-2 badge badge-blue">Generating...</span>
        {% endif %}
    </h3>

    {% if latest_session.status.value == 'plan_pending_review' and not latest_session.dev_plan_approved %}
    <!-- Editable plan for review -->
    <form method="POST" action="/projects/{{ project.id }}/dev-plan/{{ latest_session.id }}/approve">
        <div class="mb-4">
            <label class="text-xs text-gray-500 uppercase tracking-wider block mb-2">Review and edit the plan below</label>
            <textarea name="dev_plan" rows="24"
                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-sm text-gray-200 font-mono resize-y focus:border-blue-500 focus:outline-none leading-relaxed"
            >{{ latest_session.dev_plan }}</textarea>
        </div>
        <div class="flex items-center gap-3">
            <button type="submit"
                class="px-5 py-2 bg-green-600 hover:bg-green-500 text-white text-sm font-medium rounded-lg transition">
                Approve &amp; Start Coding
            </button>
            <button type="submit" formaction="/projects/{{ project.id }}/dev-plan/{{ latest_session.id }}/reject"
                class="px-5 py-2 bg-red-600/80 hover:bg-red-500 text-white text-sm font-medium rounded-lg transition">
                Reject &amp; Revise
            </button>
            <span class="text-xs text-gray-500 ml-2">Dev agent will follow this plan exactly once approved</span>
        </div>
    </form>

    {% else %}
    <!-- Read-only view (approved or coding in progress) -->
    <div class="text-sm text-gray-400 bg-gray-900/50 rounded-lg p-4 prose prose-invert prose-sm max-w-none markdown-body" data-markdown="{{ latest_session.dev_plan | e }}">
        {{ latest_session.dev_plan }}
    </div>
    {% endif %}
</div>
{% elif latest_session and latest_session.status.value == 'planning' %}
<div class="card rounded-lg p-5 mb-6" id="dev-plan">
    <h3 class="text-sm font-medium text-white mb-4">Development Plan</h3>
    <div class="flex items-center gap-3 p-4 bg-gray-900/30 rounded-lg">
        <div class="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div>
            <div class="text-sm text-gray-300">Dev Agent is generating a plan...</div>
            <div class="text-xs text-gray-500">The plan will appear here for your review before coding begins</div>
        </div>
    </div>
</div>
{% endif %}


<!-- 3.5 Development Plan (from PM Agent) -->
{% if latest_session %}
<div class="card rounded-lg p-5 mb-6" id="devplan-section">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-medium text-white">Project Plan</h3>
        <div class="flex items-center gap-2">
            {% if latest_session.status.value in ('queued', 'plan_pending_review') %}
            <span class="px-2 py-1 text-xs rounded bg-yellow-500/20 text-yellow-400">Pending Review</span>
            {% elif latest_session.dev_plan_approved %}
            <span class="px-2 py-1 text-xs rounded bg-green-500/20 text-green-400">Approved</span>
            {% elif latest_session.status.value == 'running' %}
            <span class="px-2 py-1 text-xs rounded bg-blue-500/20 text-blue-400">In Progress</span>
            {% endif %}
        </div>
    </div>

    {% if latest_session.dev_plan %}
    <div class="bg-gray-900/50 rounded-lg p-4 mb-4 prose prose-sm prose-invert max-w-none" id="devplan-content">
        {{ latest_session.dev_plan | replace('\n', '<br>') | safe }}
    </div>
    {% else %}
    <p class="text-sm text-gray-500">Waiting for development plan to be generated...</p>
    {% endif %}

    {% if latest_session and not latest_session.dev_plan_approved and latest_session.status.value in ('queued', 'plan_pending_review') %}
    <div class="flex gap-3 mt-4">
        <form method="POST" action="/projects/{{ project.id }}/dev-plan/{{ latest_session.id }}/approve" class="inline">
            <button type="submit" name="action" value="approve" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors">
                ✓ Approve Plan
            </button>
        </form>
        <button onclick="document.getElementById('devplan-edit').classList.toggle('hidden'); document.getElementById('devplan-content').classList.toggle('hidden')" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm rounded-lg transition-colors">
            ✎ Edit Plan
        </button>
        <form method="POST" action="/projects/{{ project.id }}/dev-plan/{{ latest_session.id }}/approve" class="inline">
            <button type="submit" name="action" value="reject" class="px-4 py-2 bg-red-600/50 hover:bg-red-600 text-white text-sm rounded-lg transition-colors">
                ✗ Reject
            </button>
        </form>
    </div>

    <!-- Edit form (hidden by default) -->
    <div id="devplan-edit" class="hidden mt-4">
        <form method="POST" action="/projects/{{ project.id }}/dev-plan/{{ latest_session.id }}/approve">
            <textarea name="dev_plan" rows="20" class="w-full bg-gray-900 text-gray-200 text-sm rounded-lg p-4 font-mono border border-gray-700 focus:border-blue-500 focus:outline-none">{{ latest_session.dev_plan or '' }}</textarea>
            <div class="flex gap-3 mt-3">
                <button type="submit" name="action" value="approve" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg">Save & Approve</button>
                <button type="button" onclick="document.getElementById('devplan-edit').classList.add('hidden'); document.getElementById('devplan-content').classList.remove('hidden')" class="px-4 py-2 bg-gray-700 text-white text-sm rounded-lg">Cancel</button>
            </div>
        </form>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- 4. Feature Tracking -->
<div class="card rounded-lg p-5 mb-6" id="features">
    <h3 class="text-sm font-medium text-white mb-4">Feature Tracking</h3>
    {% if features %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-xs text-gray-500 uppercase tracking-wider">
                    <th class="text-left pb-3 pr-4">Feature</th>
                    <th class="text-center pb-3 px-4">Dev</th>
                    <th class="text-center pb-3 px-4">QA</th>
                    <th class="text-center pb-3 px-4">Client</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
                {% for f in features %}
                <tr>
                    <td class="py-3 pr-4">
                        <div class="text-gray-200">{{ f.name }}</div>
                        {% if f.description %}
                        <div class="text-xs text-gray-500 mt-0.5">{{ f.description }}</div>
                        {% endif %}
                    </td>
                    <td class="py-3 px-4 text-center">
                        <div class="inline-flex items-center justify-center w-7 h-7 rounded-full
                            {% if f.dev_confirmed %}bg-blue-900/50 border-2 border-blue-500{% else %}bg-gray-800 border-2 border-gray-700{% endif %}"
                            title="{{ 'Confirmed ' ~ f.dev_confirmed_at.strftime('%Y-%m-%d') if f.dev_confirmed and f.dev_confirmed_at else 'Pending' }}">
                            {% if f.dev_confirmed %}
                            <svg class="w-3.5 h-3.5 text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                            {% endif %}
                        </div>
                    </td>
                    <td class="py-3 px-4 text-center">
                        <div class="inline-flex items-center justify-center w-7 h-7 rounded-full
                            {% if f.qa_confirmed %}bg-yellow-900/50 border-2 border-yellow-500{% else %}bg-gray-800 border-2 border-gray-700{% endif %}"
                            title="{{ 'Confirmed ' ~ f.qa_confirmed_at.strftime('%Y-%m-%d') if f.qa_confirmed and f.qa_confirmed_at else 'Pending' }}">
                            {% if f.qa_confirmed %}
                            <svg class="w-3.5 h-3.5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                            {% endif %}
                        </div>
                    </td>
                    <td class="py-3 px-4 text-center">
                        <div class="inline-flex items-center justify-center w-7 h-7 rounded-full
                            {% if f.client_confirmed %}bg-green-900/50 border-2 border-green-500{% else %}bg-gray-800 border-2 border-gray-700{% endif %}"
                            title="{{ 'Confirmed ' ~ f.client_confirmed_at.strftime('%Y-%m-%d') if f.client_confirmed and f.client_confirmed_at else 'Pending' }}">
                            {% if f.client_confirmed %}
                            <svg class="w-3.5 h-3.5 text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <!-- 3-dot progress legend -->
    <div class="flex items-center gap-6 mt-4 pt-3 border-t border-gray-800 text-xs text-gray-500">
        <div class="flex items-center gap-1.5">
            <div class="w-3 h-3 rounded-full bg-gray-800 border border-gray-700"></div>
            Pending
        </div>
        <div class="flex items-center gap-1.5">
            <div class="w-3 h-3 rounded-full bg-blue-900/50 border border-blue-500"></div>
            Dev Confirmed
        </div>
        <div class="flex items-center gap-1.5">
            <div class="w-3 h-3 rounded-full bg-yellow-900/50 border border-yellow-500"></div>
            QA Confirmed
        </div>
        <div class="flex items-center gap-1.5">
            <div class="w-3 h-3 rounded-full bg-green-900/50 border border-green-500"></div>
            Client Confirmed
        </div>
    </div>
    {% else %}
    <div class="text-sm text-gray-600 text-center py-6">
        <div class="text-gray-500 mb-1">No features tracked yet</div>
        <div class="text-xs text-gray-600">Features will appear here once the dev agent starts working</div>
    </div>
    {% endif %}
</div>

<!-- 4b. Deployment Plan (DevOps Agent) -->
<div class="card rounded-lg p-5 mb-6" id="deployment-plan">
    <h3 class="text-sm font-medium text-white mb-4">
        Deployment Plan
        {% if deployment_plan %}
        <span class="ml-2 badge badge-{% if deployment_plan.status.value == 'approved' %}green{% elif deployment_plan.status.value == 'pending_review' %}yellow{% elif deployment_plan.status.value == 'rejected' %}red{% elif deployment_plan.status.value == 'draft' %}gray{% else %}blue{% endif %}">
            {{ deployment_plan.status.value | replace('_', ' ') | title }}
        </span>
        {% endif %}
    </h3>

    {% if deployment_plan %}
    <!-- Code Review Summary (from PM Agent) -->
    {% if deployment_plan.code_review_summary %}
    <details class="mb-4">
        <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-300 font-medium uppercase tracking-wider">PM Code Review Summary</summary>
        <div class="mt-2 text-sm text-gray-400 bg-gray-900/50 rounded-lg p-4 prose prose-invert prose-sm max-w-none markdown-body" data-markdown="{{ deployment_plan.code_review_summary | e }}">
            {{ deployment_plan.code_review_summary }}
        </div>
    </details>
    {% endif %}

    <!-- Strategy (editable if pending_review) -->
    {% if deployment_plan.status.value == 'pending_review' %}
    <form method="POST" action="/projects/{{ project.id }}/deployment-plan/{{ deployment_plan.id }}/approve" id="plan-form">
        <div class="mb-4">
            <label class="text-xs text-gray-500 uppercase tracking-wider block mb-2">Deployment Strategy (edit below if needed)</label>
            <textarea name="edited_strategy" rows="18"
                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-sm text-gray-200 font-mono resize-y focus:border-blue-500 focus:outline-none leading-relaxed"
            >{{ deployment_plan.edited_strategy or deployment_plan.strategy }}</textarea>
        </div>
        <div class="mb-4">
            <label class="text-xs text-gray-500 uppercase tracking-wider block mb-2">Reviewer Notes (optional)</label>
            <textarea name="reviewer_notes" rows="3" placeholder="Add notes about your changes or approval conditions..."
                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-none focus:border-blue-500 focus:outline-none"></textarea>
        </div>
        <div class="flex items-center gap-3">
            <button type="submit"
                class="px-5 py-2 bg-green-600 hover:bg-green-500 text-white text-sm font-medium rounded-lg transition">
                Approve Plan
            </button>
            <button type="submit" formaction="/projects/{{ project.id }}/deployment-plan/{{ deployment_plan.id }}/reject"
                class="px-5 py-2 bg-red-600/80 hover:bg-red-500 text-white text-sm font-medium rounded-lg transition">
                Request Rework
            </button>
        </div>
    </form>

    {% elif deployment_plan.strategy %}
    <!-- Read-only strategy -->
    <details class="mb-4" {% if deployment_plan.status.value in ['approved', 'provisioning'] %}open{% endif %}>
        <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-300 font-medium uppercase tracking-wider">Deployment Strategy</summary>
        <div class="mt-2 text-sm text-gray-400 bg-gray-900/50 rounded-lg p-4 prose prose-invert prose-sm max-w-none markdown-body" data-markdown="{{ (deployment_plan.edited_strategy or deployment_plan.strategy) | e }}">
            {{ deployment_plan.edited_strategy or deployment_plan.strategy }}
        </div>
    </details>

    <!-- VM / Test Environment Status -->
    {% if deployment_plan.vm_instance_name %}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
        <div class="bg-gray-900/50 rounded-lg p-3">
            <div class="text-xs text-gray-500 uppercase tracking-wider mb-1">VM</div>
            <div class="text-sm text-gray-300 font-mono">{{ deployment_plan.vm_instance_name }}</div>
        </div>
        <div class="bg-gray-900/50 rounded-lg p-3">
            <div class="text-xs text-gray-500 uppercase tracking-wider mb-1">Status</div>
            <div class="text-sm font-medium {% if deployment_plan.vm_status == 'running' %}text-green-400{% elif deployment_plan.vm_status == 'stopped' %}text-yellow-400{% elif deployment_plan.vm_status == 'failed' %}text-red-400{% else %}text-gray-400{% endif %}">
                {{ deployment_plan.vm_status or 'unknown' | title }}
            </div>
        </div>
        {% if deployment_plan.test_url %}
        <div class="bg-gray-900/50 rounded-lg p-3 col-span-2">
            <div class="text-xs text-gray-500 uppercase tracking-wider mb-1">Test URL</div>
            {% if deployment_plan.vm_status == 'running' %}
            <a href="{{ deployment_plan.test_url }}" target="_blank" class="text-sm text-blue-400 hover:text-blue-300">{{ deployment_plan.test_url }} &rarr;</a>
            {% else %}
            <span class="text-sm text-gray-500">{{ deployment_plan.test_url }} (VM stopped)</span>
            {% endif %}
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Action buttons based on status -->
    {% if deployment_plan.status.value == 'provisioning' %}
    <div class="flex items-center gap-3 p-4 bg-blue-950/30 border border-blue-900/50 rounded-lg">
        <div class="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div>
            <div class="text-sm text-blue-300">Provisioning test environment...</div>
            <div class="text-xs text-gray-500">DevOps agent is creating VM, deploying code, and setting up dependencies</div>
        </div>
    </div>

    {% elif deployment_plan.status.value == 'provisioned_stopped' %}
    <div class="p-4 bg-yellow-950/30 border border-yellow-900/50 rounded-lg">
        <div class="text-sm text-yellow-300 mb-2">Test environment provisioned &amp; stopped</div>
        <div class="text-xs text-gray-400 mb-3">VM is ready with code deployed. Approve test plans above, then click Start Testing to bring the environment online.</div>
        <form method="POST" action="/projects/{{ project.id }}/deployment-plan/{{ deployment_plan.id }}/start-testing">
            <button type="submit" class="px-5 py-2 bg-green-600 hover:bg-green-500 text-white text-sm font-medium rounded-lg transition">
                Start Testing
            </button>
        </form>
    </div>

    {% elif deployment_plan.status.value == 'test_approved' %}
    <div class="flex items-center gap-3 p-4 bg-blue-950/30 border border-blue-900/50 rounded-lg">
        <div class="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div>
            <div class="text-sm text-blue-300">Starting test environment...</div>
            <div class="text-xs text-gray-500">DevOps agent is bringing the VM online</div>
        </div>
    </div>

    {% elif deployment_plan.status.value == 'testing' %}
    <div class="p-4 bg-green-950/30 border border-green-900/50 rounded-lg">
        <div class="flex items-center gap-2 mb-1">
            <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
            <span class="text-sm text-green-300">Test environment is live</span>
        </div>
        <div class="text-xs text-gray-400">Smoke test agent is running approved test plans</div>
    </div>

    {% elif deployment_plan.status.value == 'test_complete' %}
    <div class="p-4 bg-green-950/30 border border-green-900/50 rounded-lg">
        <div class="text-sm text-green-300 mb-1">Testing complete</div>
        <div class="text-xs text-gray-400">Review test results above</div>
    </div>
    {% endif %}

    {% if deployment_plan.reviewer_notes %}
    <div class="mt-3">
        <label class="text-xs text-gray-500 uppercase tracking-wider block mb-1">Reviewer Notes</label>
        <div class="text-sm text-gray-400 bg-gray-900/50 rounded-lg p-3">{{ deployment_plan.reviewer_notes }}</div>
    </div>
    {% endif %}

    {% else %}
    <!-- Draft with no strategy yet (waiting for DevOps agent) -->
    <div class="flex items-center gap-3 p-4 bg-gray-900/30 rounded-lg">
        <div class="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div>
            <div class="text-sm text-gray-300">Waiting for DevOps Agent</div>
            <div class="text-xs text-gray-500">PM agent has submitted a code review — DevOps agent is generating a deployment plan</div>
        </div>
    </div>
    {% endif %}

    {% else %}
    <div class="text-sm text-gray-600 text-center py-6">
        <div class="text-gray-500 mb-1">No deployment plan yet</div>
        <div class="text-xs text-gray-600">A deployment plan will be generated after all features are dev-confirmed and the PM agent reviews the code</div>
    </div>
    {% endif %}
</div>

<!-- 4c. Smoke & Functional Test Plans -->
<div class="card rounded-lg p-5 mb-6" id="test-plans">
    <h3 class="text-sm font-medium text-white mb-4">Test Plans</h3>
    {% if smoke_test_plans %}
    <div class="space-y-4">
        {% for plan in smoke_test_plans %}
        <div class="border border-gray-800 rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <span class="text-sm font-medium text-gray-200">{{ plan.name }}</span>
                    <span class="badge badge-{% if plan.plan_type == 'functional' %}purple{% else %}blue{% endif %}">
                        {{ plan.plan_type or 'smoke' }}
                    </span>
                </div>
                {% if plan.approved %}
                <span class="badge badge-green">Approved</span>
                {% else %}
                <span class="badge badge-yellow">Pending Review</span>
                {% endif %}
            </div>

            {% if plan.base_url %}
            <div class="text-xs text-gray-500 mb-3">Target: <span class="text-gray-400 font-mono">{{ plan.base_url }}</span></div>
            {% endif %}

            <!-- Steps -->
            <div class="space-y-1 mb-3">
                {% for step in (plan.steps or []) %}
                <div class="flex items-start gap-2 text-xs py-1 {% if not loop.last %}border-b border-gray-800/50{% endif %}">
                    <span class="text-gray-600 w-5 text-right flex-shrink-0">{{ loop.index }}.</span>
                    <span class="badge badge-{% if step.action == 'navigate' %}blue{% elif step.action == 'click' %}cyan{% elif step.action == 'type' %}green{% elif step.action == 'assert' %}yellow{% elif step.action == 'screenshot' %}purple{% else %}gray{% endif %} text-[10px] px-1.5 py-0 flex-shrink-0">
                        {{ step.action }}
                    </span>
                    <span class="text-gray-400">{{ step.description or step.get('value', '') }}</span>
                    {% if step.selector %}
                    <span class="text-gray-600 font-mono ml-auto flex-shrink-0">{{ step.selector[:40] }}</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>

            {% if not plan.approved %}
            <form method="POST" action="/projects/{{ project.id }}/smoke-test/plans/{{ plan.id }}/approve" class="flex items-center gap-2">
                <button type="submit" class="px-3 py-1.5 bg-green-600 hover:bg-green-500 text-white text-xs font-medium rounded transition">
                    Approve Plan
                </button>
                <span class="text-xs text-gray-500">Smoke test agent will only run approved plans</span>
            </form>
            {% else %}
            <!-- Show latest result if any -->
            {% set latest_result = plan.results[-1] if plan.results else None %}
            {% if latest_result %}
            <div class="flex items-center gap-3 mt-2 p-2 rounded {% if latest_result.passed %}bg-green-950/30{% else %}bg-red-950/30{% endif %}">
                <span class="badge badge-{% if latest_result.passed %}green{% else %}red{% endif %}">
                    {{ 'PASSED' if latest_result.passed else 'FAILED' }}
                </span>
                <span class="text-xs text-gray-400">{{ latest_result.passed_steps }}/{{ latest_result.total_steps }} steps</span>
                {% if latest_result.duration_ms %}
                <span class="text-xs text-gray-500">{{ latest_result.duration_ms }}ms</span>
                {% endif %}
                <span class="text-xs text-gray-600">{{ latest_result.run_at.strftime('%Y-%m-%d %H:%M') if latest_result.run_at else '' }}</span>
            </div>
            {% endif %}
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-sm text-gray-600 text-center py-6">
        <div class="text-gray-500 mb-1">No test plans yet</div>
        <div class="text-xs text-gray-600">Smoke test agent will generate plans after all features are dev-confirmed</div>
    </div>
    {% endif %}
</div>

<!-- 4b. QA Reports -->
<div class="card rounded-lg p-5 mb-6" id="qa-reports">
    <h3 class="text-sm font-medium text-white mb-4">QA Reports</h3>

    <!-- Questions -->
    {% if qa_questions %}
    <div class="mb-5">
        <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Questions</h4>
        <div class="space-y-2">
            {% for q in qa_questions %}
            <div class="bg-gray-900/30 rounded-lg p-3 border {% if q.status == 'pending' %}border-yellow-900/50{% elif q.status == 'answered' %}border-green-900/50{% else %}border-gray-800{% endif %}">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs font-mono {% if q.priority == 'P0' %}text-red-400{% elif q.priority == 'P1' %}text-orange-400{% elif q.priority == 'P2' %}text-yellow-400{% else %}text-gray-500{% endif %}">{{ q.priority }}</span>
                    <span class="badge badge-{% if q.status == 'pending' %}yellow{% elif q.status == 'answered' %}green{% else %}gray{% endif %}">{{ q.status }}</span>
                </div>
                <div class="text-sm text-gray-200 mb-1">{{ q.question }}</div>
                {% if q.context %}
                <div class="text-xs text-gray-500 mb-2">Context: {{ q.context[:200] }}</div>
                {% endif %}
                {% if q.answer %}
                <div class="text-sm text-green-300 bg-green-950/30 rounded p-2 mt-2">{{ q.answer }}</div>
                {% elif q.status == 'pending' %}
                <form method="POST" action="/projects/{{ project.id }}/qa/questions/{{ q.id }}/answer" class="mt-2">
                    <div class="flex gap-2">
                        <input type="text" name="answer" placeholder="Answer this question..." required
                            class="flex-1 bg-gray-900 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-200 placeholder-gray-600 focus:border-blue-500 focus:outline-none">
                        <button type="submit" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs rounded transition">Answer</button>
                    </div>
                </form>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Bug Reports -->
    {% if qa_bug_reports %}
    <div>
        <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Bug Reports</h4>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
                        <th class="text-left py-2 pr-3">ID</th>
                        <th class="text-left py-2 pr-3">Title</th>
                        <th class="text-left py-2 pr-3">Severity</th>
                        <th class="text-left py-2 pr-3">Status</th>
                        <th class="text-left py-2">Assigned</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    {% for bug in qa_bug_reports %}
                    <tr>
                        <td class="py-2 pr-3 font-mono text-xs text-gray-400">{{ bug.bug_id }}</td>
                        <td class="py-2 pr-3 text-gray-200">{{ bug.title[:60] }}{% if bug.title|length > 60 %}...{% endif %}</td>
                        <td class="py-2 pr-3">
                            <span class="text-xs px-2 py-0.5 rounded
                                {% if bug.severity == 'critical' %}bg-red-900/50 text-red-400
                                {% elif bug.severity == 'high' %}bg-orange-900/50 text-orange-400
                                {% elif bug.severity == 'medium' %}bg-yellow-900/50 text-yellow-400
                                {% else %}bg-gray-800 text-gray-500{% endif %}">
                                {{ bug.severity }}
                            </span>
                        </td>
                        <td class="py-2 pr-3">
                            <span class="badge badge-{% if bug.status == 'open' %}yellow{% elif bug.status in ['fixed', 'verified'] %}green{% elif bug.status == 'wont_fix' %}gray{% else %}blue{% endif %}">
                                {{ bug.status | replace('_', ' ') }}
                            </span>
                        </td>
                        <td class="py-2 text-xs text-gray-500">{{ bug.assigned_to or '—' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if not qa_questions and not qa_bug_reports %}
    <div class="text-sm text-gray-600 text-center py-4">
        <div class="text-gray-500 mb-1">No QA reports yet</div>
        <div class="text-xs text-gray-600">QA agent will submit questions and bug reports during testing</div>
    </div>
    {% endif %}
</div>

<!-- 5. Human Tasks -->
<div class="card rounded-lg p-5 mb-6" id="tasks">
    <h3 class="text-sm font-medium text-white mb-4">Tasks</h3>
    {% if tasks %}
    <div class="space-y-2 mb-4">
        {% for t in tasks %}
        <div class="flex items-center gap-3 p-3 rounded-lg
            {% if t.blocking and t.status != 'completed' %}bg-red-950/30 border border-red-900/50
            {% elif t.status == 'completed' %}bg-gray-900/50
            {% else %}bg-gray-900/30 border border-gray-800{% endif %}">
            <!-- Status indicator -->
            {% if t.status == 'completed' %}
            <div class="w-5 h-5 rounded-full bg-green-900/50 border border-green-600 flex items-center justify-center flex-shrink-0">
                <svg class="w-3 h-3 text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
            </div>
            {% elif t.status == 'in_progress' %}
            <div class="w-5 h-5 rounded-full bg-blue-900/50 border border-blue-600 flex-shrink-0"></div>
            {% else %}
            <div class="w-5 h-5 rounded-full bg-gray-800 border border-gray-700 flex-shrink-0"></div>
            {% endif %}
            <div class="flex-1 min-w-0">
                <div class="text-sm {% if t.status == 'completed' %}text-gray-500 line-through{% else %}text-gray-200{% endif %}">
                    {{ t.title }}
                </div>
                {% if t.description %}
                <div class="text-xs text-gray-500 mt-0.5 truncate">{{ t.description }}</div>
                {% endif %}
            </div>
            <div class="flex items-center gap-2 flex-shrink-0">
                {% if t.blocking and t.status != 'completed' %}
                <span class="text-xs font-medium text-red-400 bg-red-900/40 px-2 py-0.5 rounded">Blocking</span>
                {% endif %}
                <span class="text-xs {% if t.assigned_to == 'client' %}text-purple-400 bg-purple-900/30{% else %}text-blue-400 bg-blue-900/30{% endif %} px-2 py-0.5 rounded">
                    {{ t.assigned_to | title }}
                </span>
                {% if t.status != 'completed' %}
                <form method="POST" action="/projects/{{ project.id }}/tasks/{{ t.id }}/complete" class="inline">
                    <button type="submit" class="text-xs text-gray-500 hover:text-green-400 transition" title="Mark complete">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    </button>
                </form>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-sm text-gray-600 text-center py-3 mb-4">No tasks yet</div>
    {% endif %}
    <!-- Add task form -->
    <details class="text-xs border-t border-gray-800 pt-3">
        <summary class="text-gray-500 hover:text-gray-300 cursor-pointer text-sm">Add Task</summary>
        <form method="POST" action="/projects/{{ project.id }}/tasks" class="mt-3 space-y-3">
            <input type="text" name="title" placeholder="Task title..." required
                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-blue-500 focus:outline-none">
            <textarea name="description" rows="2" placeholder="Description (optional)..."
                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-none focus:border-blue-500 focus:outline-none"></textarea>
            <div class="flex items-center gap-4">
                <select name="assigned_to"
                    class="bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 focus:border-blue-500 focus:outline-none">
                    <option value="bridgestack">Bridgestack</option>
                    <option value="client">Client</option>
                </select>
                <label class="flex items-center gap-2 text-sm text-gray-400">
                    <input type="checkbox" name="blocking" class="rounded bg-gray-900 border-gray-700 text-red-500 focus:ring-red-500">
                    Blocking
                </label>
                <button type="submit"
                    class="ml-auto px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm rounded-lg transition">
                    Add Task
                </button>
            </div>
        </form>
    </details>
</div>

<!-- 6. Agent Activity -->
<div class="card rounded-lg p-5 mb-6" id="agent-activity">
    <h3 class="text-sm font-medium text-white mb-4">Agent Activity</h3>

    <!-- Token usage & time stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
        <div class="bg-gray-900/50 rounded-lg p-3 text-center">
            <div class="text-lg font-bold text-indigo-400">
                {% if total_dev_input_tokens or total_dev_output_tokens %}
                {{ "{:,}".format(total_dev_input_tokens + total_dev_output_tokens) }}
                {% else %}0{% endif %}
            </div>
            <div class="text-xs text-gray-500">Dev Tokens</div>
        </div>
        <div class="bg-gray-900/50 rounded-lg p-3 text-center">
            <div class="text-lg font-bold text-cyan-400">
                {{ dev_sessions | length }}
            </div>
            <div class="text-xs text-gray-500">Dev Sessions</div>
        </div>
        <div class="bg-gray-900/50 rounded-lg p-3 text-center">
            <div class="text-lg font-bold text-purple-400">
                {{ time_entries | length }}
            </div>
            <div class="text-xs text-gray-500">Milestones Hit</div>
        </div>
        <div class="bg-gray-900/50 rounded-lg p-3 text-center">
            <div class="text-lg font-bold text-emerald-400">
                {{ project.completion_pct or 0 }}%
            </div>
            <div class="text-xs text-gray-500">Completion</div>
        </div>
    </div>

    <!-- Token cost breakdown by agent -->
    {% if token_usage %}
    <div class="mb-5">
        <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Token Cost by Agent</h4>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
                        <th class="text-left py-2 pr-3">Agent</th>
                        <th class="text-right py-2 pr-3">Input Tokens</th>
                        <th class="text-right py-2 pr-3">Output Tokens</th>
                        <th class="text-right py-2">Cost ($)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    {% for row in token_usage %}
                    <tr>
                        <td class="py-2 pr-3 text-gray-200">{{ row.agent_name | replace('_', ' ') | title }}</td>
                        <td class="py-2 pr-3 text-right text-gray-400 font-mono text-xs">{{ "{:,}".format(row.input_tokens) }}</td>
                        <td class="py-2 pr-3 text-right text-gray-400 font-mono text-xs">{{ "{:,}".format(row.output_tokens) }}</td>
                        <td class="py-2 text-right font-mono text-xs {% if row.cost > 5 %}text-red-400{% elif row.cost > 1 %}text-yellow-400{% else %}text-green-400{% endif %}">
                            ${{ "%.4f" | format(row.cost) }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr class="border-t border-gray-700">
                        <td class="py-2 pr-3 text-gray-200 font-medium">Total</td>
                        <td class="py-2 pr-3 text-right text-gray-300 font-mono text-xs">{{ "{:,}".format(token_usage | sum(attribute='input_tokens')) }}</td>
                        <td class="py-2 pr-3 text-right text-gray-300 font-mono text-xs">{{ "{:,}".format(token_usage | sum(attribute='output_tokens')) }}</td>
                        <td class="py-2 text-right font-mono text-xs font-medium {% if total_token_cost > 5 %}text-red-400{% elif total_token_cost > 1 %}text-yellow-400{% else %}text-green-400{% endif %}">
                            ${{ "%.4f" | format(total_token_cost) }}
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- Dev session details -->
    {% if dev_sessions %}
    <div class="mb-4">
        <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Development Sessions</h4>
        <div class="space-y-2">
            {% for session in dev_sessions[:3] %}
            <div class="flex items-center justify-between bg-gray-900/30 rounded p-3">
                <div class="flex items-center gap-3">
                    <span class="badge badge-{% if session.status.value == 'running' %}blue{% elif session.status.value == 'completed' %}green{% elif session.status.value == 'failed' %}red{% else %}gray{% endif %}">
                        {{ session.status.value | replace('_', ' ') | title }}
                    </span>
                    <span class="text-xs text-gray-400">{{ session.iteration_count or 0 }} iterations</span>
                </div>
                <div class="text-xs text-gray-500">
                    {% if session.input_tokens or session.output_tokens %}
                    {{ "{:,}".format((session.input_tokens or 0) + (session.output_tokens or 0)) }} tokens
                    {% endif %}
                    {% if session.started_at %}&middot; {{ session.started_at | timeago }}{% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Live dev logs -->
    <div>
        <div class="flex items-center justify-between mb-2">
            <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider">Development Logs</h4>
            <div id="log-status" class="flex items-center gap-1.5">
                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                <span class="text-xs text-gray-500">Live</span>
            </div>
        </div>
        <div id="dev-logs" class="space-y-1 max-h-[400px] overflow-y-auto mono text-xs bg-gray-900/30 rounded-lg p-3">
            {% for log in dev_logs %}
            <div class="pl-3 py-1 border-l-2 {% if log.log_type.value == 'error' %}border-red-500/50 bg-red-950/20{% else %}border-gray-800{% endif %}" data-log-id="{{ log.id }}">
                <span class="text-gray-600">{{ log.created_at.strftime('%H:%M:%S') }}</span>
                <span class="{% if log.log_type.value == 'error' %}text-red-400{% elif log.log_type.value == 'decision_needed' %}text-yellow-400{% elif log.log_type.value == 'thinking' %}text-purple-400{% elif log.log_type.value == 'tool_call' %}text-cyan-400{% else %}text-gray-500{% endif %} font-medium">
                    [{{ log.log_type.value }}]
                </span>
                <span class="text-gray-300">{{ log.content[:500] }}</span>
            </div>
            {% endfor %}
            {% if not dev_logs %}
            <div class="text-gray-600 text-center py-4">No logs yet &mdash; logs appear when a dev session starts</div>
            {% endif %}
        </div>
        {% if dev_logs %}
        <div class="mt-2 text-xs text-gray-600 italic">Logs cleared after review</div>
        {% endif %}
    </div>
</div>

<!-- Agent Chat -->
<div class="card rounded-lg p-5 mb-6" id="agent-chat">
    <h3 class="text-sm font-medium text-white mb-4">Agent Chat</h3>

    <!-- Chat history -->
    <div id="chat-messages" class="space-y-3 max-h-[400px] overflow-y-auto mb-4 scroll-smooth">
        <div class="text-xs text-gray-600 text-center py-4">Loading conversation...</div>
    </div>

    <!-- Input -->
    <form id="chat-form" class="flex gap-2 items-end">
        <select id="chat-agent" class="bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-xs text-gray-300 focus:border-blue-500 focus:outline-none flex-shrink-0">
            <option value="dev-agent">DevAgent</option>
            <option value="pm-agent">PM Agent</option>
            <option value="release-agent">Release Agent</option>
            <option value="devops-agent">DevOps Agent</option>
            <option value="smoke-test">Smoke Test</option>
            <option value="bugfixer-agent">Bugfixer</option>
        </select>
        <textarea
            id="chat-input"
            rows="2"
            placeholder="Type a message..."
            class="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-none focus:border-blue-500 focus:outline-none"
            onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();document.getElementById('chat-form').dispatchEvent(new Event('submit'));}"
        ></textarea>
        <button type="submit"
            class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs rounded-lg transition font-medium disabled:opacity-50 flex-shrink-0">
            Send
        </button>
    </form>
</div>

<script>
(function() {
    var chatEl = document.getElementById('chat-messages');
    var form = document.getElementById('chat-form');
    var input = document.getElementById('chat-input');
    var agentSelect = document.getElementById('chat-agent');
    var projectId = '{{ project.id }}';
    var apiKey = '{{ agent_api_key }}';

    var agentColors = {
        'dev-agent': {bg: 'bg-indigo-900/30', border: 'border-indigo-800/50', text: 'text-indigo-400', label: 'DevAgent'},
        'pm-agent': {bg: 'bg-purple-900/30', border: 'border-purple-800/50', text: 'text-purple-400', label: 'PM Agent'},
        'release-agent': {bg: 'bg-cyan-900/30', border: 'border-cyan-800/50', text: 'text-cyan-400', label: 'Release Agent'},
        'devops-agent': {bg: 'bg-emerald-900/30', border: 'border-emerald-800/50', text: 'text-emerald-400', label: 'DevOps Agent'},
        'smoke-test': {bg: 'bg-orange-900/30', border: 'border-orange-800/50', text: 'text-orange-400', label: 'Smoke Test'},
        'bugfixer-agent': {bg: 'bg-red-900/30', border: 'border-red-800/50', text: 'text-red-400', label: 'Bugfixer'},
    };

    function agentStyle(agent) {
        return agentColors[agent] || {bg: 'bg-gray-800', border: 'border-gray-700', text: 'text-gray-400', label: agent};
    }

    function timeAgo(iso) {
        if (!iso) return '';
        var d = new Date(iso);
        var diff = (Date.now() - d.getTime()) / 1000;
        if (diff < 60) return 'just now';
        if (diff < 3600) return Math.floor(diff/60) + 'm ago';
        if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
        return d.toLocaleDateString();
    }

    function renderMessages(instructions) {
        if (!instructions.length) {
            chatEl.innerHTML = '<div class="text-xs text-gray-600 text-center py-4">No messages yet. Send an instruction to any agent.</div>';
            return;
        }
        var html = '';
        for (var i of instructions) {
            var s = agentStyle(i.target_agent);
            var statusBadge = i.status === 'pending'
                ? '<span class="inline-block w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse"></span>'
                : i.status === 'acknowledged'
                ? '<span class="inline-block w-1.5 h-1.5 rounded-full bg-blue-400"></span>'
                : '<span class="inline-block w-1.5 h-1.5 rounded-full bg-green-400"></span>';

            // User message (right-aligned)
            html += '<div class="flex justify-end"><div class="max-w-[80%]">';
            html += '<div class="bg-blue-900/30 border border-blue-800/50 rounded-lg px-4 py-2.5">';
            html += '<div class="flex items-center gap-2 mb-1">';
            html += '<span class="text-xs text-blue-400 font-medium">You</span>';
            html += '<span class="text-[10px] ' + s.text + ' bg-gray-900 px-1.5 py-0.5 rounded">' + s.label + '</span>';
            html += statusBadge;
            html += '<span class="text-[10px] text-gray-600 ml-auto">' + timeAgo(i.created_at) + '</span>';
            html += '</div>';
            html += '<div class="text-sm text-gray-200 whitespace-pre-wrap">' + i.instruction + '</div>';
            html += '</div></div></div>';

            // Agent response (left-aligned)
            if (i.response) {
                html += '<div class="flex justify-start"><div class="max-w-[80%]">';
                html += '<div class="' + s.bg + ' border ' + s.border + ' rounded-lg px-4 py-2.5">';
                html += '<div class="flex items-center gap-2 mb-1">';
                html += '<span class="text-xs ' + s.text + ' font-medium">' + s.label + '</span>';
                html += '<span class="text-[10px] text-gray-600">' + timeAgo(i.responded_at) + '</span>';
                html += '</div>';
                html += '<div class="text-sm text-gray-300 whitespace-pre-wrap">' + i.response + '</div>';
                html += '</div></div></div>';
            } else if (i.status === 'pending') {
                html += '<div class="flex justify-start"><div class="max-w-[80%]">';
                html += '<div class="' + s.bg + ' border ' + s.border + ' rounded-lg px-3 py-2">';
                html += '<div class="flex items-center gap-2">';
                html += '<span class="text-xs ' + s.text + '">' + s.label + '</span>';
                html += '<span class="text-[10px] text-gray-600">typing</span>';
                html += '<span class="flex gap-0.5"><span class="w-1 h-1 bg-gray-500 rounded-full animate-bounce" style="animation-delay:0s"></span><span class="w-1 h-1 bg-gray-500 rounded-full animate-bounce" style="animation-delay:0.15s"></span><span class="w-1 h-1 bg-gray-500 rounded-full animate-bounce" style="animation-delay:0.3s"></span></span>';
                html += '</div></div></div></div>';
            }
        }
        chatEl.innerHTML = html;
        chatEl.scrollTop = chatEl.scrollHeight;
    }

    function loadMessages() {
        fetch('/api/v1/devagent/instructions/' + projectId, {
            headers: {'X-Agent-Key': apiKey}
        })
        .then(function(r) { return r.json(); })
        .then(renderMessages)
        .catch(function() {});
    }

    loadMessages();
    // Poll for new responses every 10 seconds
    setInterval(loadMessages, 10000);

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        var msg = input.value.trim();
        if (!msg) return;

        var agent = agentSelect.value;
        var btn = form.querySelector('button[type=submit]');
        btn.disabled = true;

        fetch('/api/v1/devagent/instructions', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-Agent-Key': apiKey},
            body: JSON.stringify({project_id: projectId, instruction: msg, target_agent: agent})
        })
        .then(function(r) {
            if (r.ok) {
                input.value = '';
                loadMessages();
            }
        })
        .catch(function() {})
        .finally(function() { btn.disabled = false; });
    });
})();
</script>

<!-- 7. Docker Build -->
<div class="card rounded-lg p-5 mb-6" id="docker">
    <h3 class="text-sm font-medium text-white mb-4">Docker Build</h3>
    {% if project.docker_image_url %}
    <div class="space-y-3">
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500 uppercase tracking-wider w-24">Image</span>
            <span class="text-sm text-gray-200 font-mono bg-gray-900 px-3 py-1 rounded">{{ project.docker_image_url }}</span>
        </div>
        {% if project.docker_exposed_port %}
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500 uppercase tracking-wider w-24">Port</span>
            <span class="text-sm text-gray-300">{{ project.docker_exposed_port }}</span>
        </div>
        {% endif %}
        {% if project.docker_build_commit_sha %}
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500 uppercase tracking-wider w-24">Commit</span>
            <span class="text-sm text-gray-300 font-mono">{{ project.docker_build_commit_sha[:8] }}</span>
        </div>
        {% endif %}
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500 uppercase tracking-wider w-24">Status</span>
            {% if project.docker_build_commit_sha %}
            <span class="badge badge-green">Built</span>
            {% else %}
            <span class="badge badge-yellow">Building</span>
            {% endif %}
        </div>
        {% if project.docker_image_url and 'docker.io' in project.docker_image_url or 'hub.docker' in (project.docker_image_url or '') %}
        <a href="https://hub.docker.com/r/{{ project.docker_image_url.split('/')[-2:] | join('/') if '/' in project.docker_image_url else project.docker_image_url }}"
           target="_blank" class="inline-flex items-center gap-1.5 text-xs text-blue-400 hover:text-blue-300 mt-1">
            View on Docker Hub &rarr;
        </a>
        {% endif %}
    </div>
    {% if project.docker_build_log %}
    <details class="mt-4">
        <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">Build Log</summary>
        <pre class="mt-2 text-xs text-gray-400 bg-gray-900 rounded p-3 overflow-x-auto max-h-60">{{ project.docker_build_log }}</pre>
    </details>
    {% endif %}
    {% else %}
    <div class="text-sm text-gray-600 text-center py-4">
        <div class="text-gray-500 mb-1">No Docker image yet</div>
        <div class="text-xs text-gray-600">The release agent will create a Docker image after development completes</div>
    </div>
    {% endif %}
</div>

<!-- 7b. Release Checklist -->
{% if release_checklist %}
<div class="card rounded-lg p-5 mb-6" id="release-checklist">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-medium text-white">Release Checklist</h3>
        <div class="flex items-center gap-2">
            {% if release_checklist.version %}
            <span class="text-xs text-gray-500 font-mono">v{{ release_checklist.version }}</span>
            {% endif %}
            <span class="badge badge-{% if release_checklist.status == 'passed' %}green{% elif release_checklist.status == 'failed' %}red{% else %}yellow{% endif %}">
                {{ release_checklist.status | replace('_', ' ') | title }}
            </span>
        </div>
    </div>

    {% set phase_labels = {"pre_release": "Pre-Release", "test_environment": "Test Environment", "preview_environment": "Preview Environment", "post_release": "Post-Release"} %}

    {% for phase_key, phase_label in phase_labels.items() %}
    {% if phase_key in release_checklist.checklist %}
    {% set items = release_checklist.checklist[phase_key] %}
    {% set checked_count = items.values() | selectattr('checked') | list | length %}
    {% set total_count = items | length %}
    <div class="mb-4">
        <div class="flex items-center justify-between mb-2">
            <h4 class="text-xs font-medium text-gray-400 uppercase tracking-wider">{{ phase_label }}</h4>
            <span class="text-xs {% if checked_count == total_count %}text-green-400{% else %}text-gray-500{% endif %}">
                {{ checked_count }}/{{ total_count }}
            </span>
        </div>
        <div class="space-y-1">
            {% for item_id, item in items.items() %}
            <div class="flex items-center gap-2 py-1">
                {% if item.checked %}
                <svg class="w-4 h-4 text-green-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
                {% else %}
                <div class="w-4 h-4 rounded-full border border-gray-700 flex-shrink-0"></div>
                {% endif %}
                <span class="text-sm {% if item.checked %}text-gray-400{% else %}text-gray-300{% endif %}">
                    {{ item_id | replace('_', ' ') | title }}
                </span>
                {% if item.detail %}
                <span class="text-xs text-gray-600 ml-auto">{{ item.detail[:80] }}</span>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>
{% endif %}

<!-- 8. Documents -->
<div class="card rounded-lg p-5 mb-6" id="documents">
    <h3 class="text-sm font-medium text-white mb-4">Documents</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
        <!-- NDA -->
        <div class="bg-gray-900/50 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="text-xs text-gray-500 uppercase tracking-wider">NDA</span>
                <span class="badge badge-gray">Skipped</span>
            </div>
            <div class="text-xs text-gray-500">Not required for this project</div>
        </div>
        <!-- SOW -->
        <div class="bg-gray-900/50 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="text-xs text-gray-500 uppercase tracking-wider">SOW</span>
                {% if project.bid_status.value in ['awarded', 'scope_approved', 'completed'] %}
                <span class="badge badge-green">Accepted</span>
                {% elif project.delivery_plan %}
                <span class="badge badge-yellow">Pending</span>
                {% else %}
                <span class="badge badge-gray">Not Generated</span>
                {% endif %}
            </div>
            <div class="text-xs text-gray-500">
                {% if project.delivery_plan %}Scope & pricing approved{% else %}Pending delivery plan{% endif %}
            </div>
        </div>
        <!-- Attachments -->
        <div class="bg-gray-900/50 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="text-xs text-gray-500 uppercase tracking-wider">Attachments</span>
                <span class="badge badge-{% if project.attachments %}blue{% else %}gray{% endif %}">
                    {{ project.attachments | length if project.attachments else 0 }} files
                </span>
            </div>
            {% if project.attachments %}
            <div class="space-y-1 mt-2">
                {% for att in project.attachments %}
                <div class="text-xs text-gray-400 truncate">{{ att.filename if att is mapping else att }}</div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-xs text-gray-500">No files attached</div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 9. Launchpad -->
{% if launchpad_url or project.docker_image_url %}
<div class="card rounded-lg p-5 mb-6" id="launchpad">
    <h3 class="text-sm font-medium text-white mb-4">Launchpad</h3>
    {% if launchpad_url %}
    <div class="flex items-center gap-4">
        <a href="{{ launchpad_url }}" target="_blank"
            class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            View in Launchpad
        </a>
        <span class="text-xs text-gray-500">Client-facing demo page</span>
    </div>
    {% else %}
    <div class="text-sm text-gray-600 text-center py-4">
        <div class="text-gray-500 mb-1">Not deployed to Launchpad yet</div>
        <div class="text-xs text-gray-600">The project will be available on Launchpad after Docker build completes</div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Description (collapsible) -->
{% if project.description %}
<details class="card rounded-lg mb-6">
    <summary class="p-5 text-sm font-medium text-white cursor-pointer hover:text-gray-300">Project Description</summary>
    <div class="px-5 pb-5 text-sm text-gray-400 whitespace-pre-wrap border-t border-gray-800 pt-3">{{ project.description }}</div>
</details>
{% endif %}

<!-- Questionnaire & Answers -->
{% if qa_pairs %}
<div class="card rounded-lg p-5 mb-6" id="questionnaire">
    <h3 class="text-sm font-medium text-white mb-4">Questionnaire &amp; Client Answers</h3>
    <div class="space-y-4">
        {% for qa in qa_pairs %}
        <div class="border-l-2 {% if qa.answer %}border-green-800{% else %}border-gray-800{% endif %} pl-4 py-1">
            <div class="text-sm text-gray-300 font-medium">{{ qa.num }}. {{ qa.question }}</div>
            {% if qa.answer %}
            <div class="mt-1.5 text-sm text-gray-400 bg-gray-900/50 rounded px-3 py-2">
                {{ qa.answer }}
            </div>
            {% else %}
            <div class="mt-1.5 text-xs text-gray-600 italic">No answer provided</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Decisions (if any) -->
{% if decisions %}
<div class="card rounded-lg p-5 mb-6">
    <h3 class="text-sm font-medium text-white mb-4">Decisions</h3>
    <div class="space-y-3">
        {% for d in decisions %}
        <div class="p-4 rounded-lg {% if d.status.value == 'pending' %}bg-yellow-950/30 border border-yellow-900/50{% else %}bg-gray-900/30{% endif %}">
            <div class="flex items-center justify-between mb-2">
                <span class="badge badge-{% if d.status.value == 'pending' %}yellow{% elif d.status.value == 'answered' %}green{% else %}red{% endif %}">
                    {{ d.status.value | title }}
                </span>
                <span class="text-xs text-gray-600">{{ d.notified_at | timeago }}</span>
            </div>
            <div class="text-sm text-gray-300 mb-2">{{ d.question }}</div>
            {% if d.status.value == 'pending' %}
            <form method="POST" action="/projects/{{ project.id }}/decisions/{{ d.id }}/answer" class="mt-2">
                <textarea name="answer" rows="3" placeholder="Type your answer..."
                    class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-none focus:border-blue-500 focus:outline-none"></textarea>
                <button type="submit"
                    class="mt-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm rounded-lg transition">
                    Submit Answer
                </button>
            </form>
            {% elif d.answer %}
            <div class="p-3 bg-gray-900 rounded-lg text-sm text-gray-400">
                <span class="text-xs text-green-500 block mb-1">Answer:</span>
                {{ d.answer }}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Milestones Timeline -->
{% if time_entries %}
<div class="card rounded-lg p-5 mb-6">
    <h3 class="text-sm font-medium text-white mb-4">Milestone Timeline</h3>
    <div class="relative pl-6 space-y-0">
        {% for entry in time_entries %}
        <div class="relative pb-4 {% if not loop.last %}border-l border-gray-800{% endif %}" style="margin-left: 4px;">
            <div class="absolute -left-[7px] top-1 w-3.5 h-3.5 rounded-full border-2 bg-blue-600 border-blue-500"></div>
            <div class="ml-6">
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-blue-400">{{ entry.milestone.value | replace('_', ' ') | title }}</span>
                    <span class="text-xs text-gray-600 mono">{{ entry.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                </div>
                {% if entry.notes %}
                <div class="text-xs text-gray-500 mt-1">{{ entry.notes }}</div>
                {% endif %}
                {% if entry.triggered_by %}
                <div class="text-xs text-gray-600 mt-0.5">by {{ entry.triggered_by }}</div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Markdown rendering styles + scripts -->
<style>
.markdown-body h1,.markdown-body h2,.markdown-body h3{color:#e5e7eb;margin-top:0.8em;margin-bottom:0.4em;font-weight:600;}
.markdown-body h1{font-size:1.25em;} .markdown-body h2{font-size:1.1em;} .markdown-body h3{font-size:1em;}
.markdown-body p{margin-bottom:0.5em;}
.markdown-body ul,.markdown-body ol{padding-left:1.5em;margin-bottom:0.5em;}
.markdown-body li{margin-bottom:0.2em;}
.markdown-body code{background:#1f2937;padding:1px 4px;border-radius:3px;font-size:0.85em;}
.markdown-body pre{background:#111827;padding:0.75em;border-radius:6px;overflow-x:auto;margin-bottom:0.5em;}
.markdown-body pre code{background:none;padding:0;}
.markdown-body strong{color:#d1d5db;}
.markdown-body a{color:#60a5fa;text-decoration:underline;}
</style>
<script>
/* Markdown rendering */
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-markdown]').forEach(function(el) {
        var raw = el.getAttribute('data-markdown');
        if (raw && typeof marked !== 'undefined') {
            el.innerHTML = marked.parse(raw);
        }
    });
    document.querySelectorAll('details').forEach(function(d) {
        d.addEventListener('toggle', function() {
            d.querySelectorAll('[data-markdown]').forEach(function(el) {
                if (!el.dataset.rendered && typeof marked !== 'undefined') {
                    el.innerHTML = marked.parse(el.getAttribute('data-markdown'));
                    el.dataset.rendered = '1';
                }
            });
        });
    });
});

/* Live dev log polling */
(function() {
    var container = document.getElementById('dev-logs');
    if (!container) return;
    var projectId = '{{ project.id }}';
    var knownIds = new Set();
    document.querySelectorAll('[data-log-id]').forEach(function(el) { knownIds.add(el.dataset.logId); });

    var typeColors = {
        thinking: 'text-purple-400',
        tool_call: 'text-cyan-400',
        tool_result: 'text-gray-500',
        error: 'text-red-400',
        decision_needed: 'text-yellow-400',
    };

    async function poll() {
        try {
            var res = await fetch('/api/v1/projects/' + projectId + '/logs');
            var logs = await res.json();
            var added = false;
            for (var l of logs) {
                if (knownIds.has(l.id)) continue;
                knownIds.add(l.id);
                var color = typeColors[l.log_type] || 'text-gray-400';
                var border = l.log_type === 'error' ? 'border-red-500/50 bg-red-950/20' : 'border-gray-800';
                var time = l.created_at ? new Date(l.created_at).toLocaleTimeString('en-GB', {hour12:false}) : '';
                var html = '<div class="pl-3 py-1 border-l-2 ' + border + '" data-log-id="' + l.id + '">'
                    + '<span class="text-gray-600">' + time + '</span> '
                    + '<span class="' + color + ' font-medium">[' + l.log_type + ']</span> '
                    + '<span class="text-gray-300">' + l.content.substring(0, 500) + '</span>'
                    + '</div>';
                var placeholder = container.querySelector('.text-center');
                if (placeholder) placeholder.remove();
                container.insertAdjacentHTML('beforeend', html);
                added = true;
            }
            if (added) container.scrollTop = container.scrollHeight;
        } catch (e) {
            console.error('Log poll error:', e);
        }
    }
    setInterval(poll, 5000);
})();

/* WebSocket log streaming for live agent activity */
(function() {
    var container = document.getElementById('dev-logs');
    if (!container) return;
    var agentKey = '{{ agent_api_key | default("") }}';
    if (!agentKey) return;

    var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
    var wsUrl = proto + '//' + location.host + '/ws/dashboard?key=' + agentKey;
    var ws = null;

    function connect() {
        try {
            ws = new WebSocket(wsUrl);
            ws.onmessage = function(event) {
                try {
                    var msg = JSON.parse(event.data);
                    if (msg.type === 'log' && (msg.component === 'dev-agent' || msg.component === 'pm-agent')) {
                        var lvl = (msg.data && msg.data.level) || 'INFO';
                        var color = lvl === 'ERROR' ? 'text-red-400' :
                                    lvl === 'WARNING' ? 'text-yellow-400' : 'text-gray-300';
                        var ts = msg.timestamp ? msg.timestamp.split('T')[1].split('.')[0] : '';
                        var line = document.createElement('div');
                        line.className = 'pl-3 py-1 border-l-2 border-gray-800 ' + color;
                        line.textContent = ts + ' [' + msg.component + '/' + lvl + '] ' + ((msg.data && msg.data.message) || '');
                        var placeholder = container.querySelector('.text-center');
                        if (placeholder) placeholder.remove();
                        container.appendChild(line);
                        container.scrollTop = container.scrollHeight;
                    }
                } catch(e) {}
            };
            ws.onclose = function() {
                setTimeout(connect, 5000);
            };
        } catch(e) {}
    }
    connect();
})();
</script>
{% endblock %}