{% extends "base.html" %}

{% block content %}
<article>
  <header>
    <hgroup>
      <h2>BVP Quadrant Scatter</h2>
      <p>Business Value Points vs composite cost. Tasks = small dots, arcs = larger dots. Drag a slider below to preview re-ranking client-side; <strong>Commit</strong> persists via <code>fw bvp weight --from-watchtower</code> (§ACD).</p>
    </hgroup>
  </header>

  {% if weights %}
  {# ── T-1929: live weight sliders ── #}
  <section id="bvp-sliders" style="margin: 1rem 0 1.5rem 0;">
    <h3>Live weight sliders</h3>
    <p class="muted">Drag a slider to preview re-ranking client-side (no commit). Press <strong>Commit</strong> to persist via <code>fw bvp weight --from-watchtower</code> (§ACD, D8). Rationale ≥30 chars required (R6).</p>
    <table id="bvp-sliders-table">
      <thead><tr><th>Driver</th><th>Server weight</th><th>Slider</th><th>Current</th><th></th></tr></thead>
      <tbody>
        {% for d_id, w in weights.items() %}
        <tr data-driver="{{ d_id }}">
          {#- T-2080: show driver name next to the id for at-a-glance reading.
              Falls back to id-only when the name field is missing. -#}
          <td>
            <code>{{ d_id }}</code>
            {% if driver_names and driver_names[d_id] %}
              <span class="muted" style="margin-left: 0.4rem; font-size: 0.85rem;">{{ driver_names[d_id] }}</span>
            {% endif %}
            {#- T-2084: per-driver 0-5 scoring rubric expand. Native <details>
                = no JS, accessible by keyboard, no Pico tooltip dependency.
                Source: policy/bvp-scoring-rubric.md (D1-D4) + value-drivers.yaml
                rationale (F1+). Gracefully absent when _driver_rubrics() returns
                no entry for this driver. -#}
            {% if driver_rubrics and driver_rubrics[d_id] %}
              <details class="driver-rubric" style="display:inline-block; margin-left:0.4rem; vertical-align:middle;">
                <summary style="cursor:help; font-size:0.8rem; color:var(--pico-muted-color); list-style:none;" title="Show 0-5 scoring guidance for {{ d_id }}">(?)</summary>
                {#- T-2085: list-style:none — the explicit <strong>N</strong> below
                    is the only number; without this the <ol start="0"> auto-marker
                    rendered "0. 0 — …" double-numbering. Source rubric.md uses one
                    bold number per row, this matches. -#}
                <ul class="driver-rubric-list" style="list-style:none; margin:0.4rem 0 0; padding-left:0.2rem; font-size:0.82rem; line-height:1.4; max-width:42rem;">
                  {#- T-2086: rubric entries are (label, desc) tuples. Label is
                      a single score ("3") or a range ("1–2") — keeps source
                      semantics where one rationale row spans two scores. -#}
                  {% for label, desc in driver_rubrics[d_id] %}
                  <li><strong>{{ label }}</strong> — {{ desc }}</li>
                  {% endfor %}
                </ul>
              </details>
            {% endif %}
          </td>
          <td class="server-weight" data-server-weight="{{ w }}">{{ w }}</td>
          <td>
            <input type="range" name="slider-{{ d_id }}" min="0" max="9" value="{{ w }}"
                   class="bvp-slider" data-driver="{{ d_id }}"
                   style="width: 180px;">
          </td>
          <td><span class="live-weight" data-driver="{{ d_id }}">{{ w }}</span></td>
          <td>
            {# T-1965 (T-1958 B): per-row Remove for free drivers only — D1-D4 are protected #}
            {% if not d_id.startswith('D') %}
              {#- T-2079: htmx replaces the JS click handler. hx-prompt collects
                  the rationale (sent as HX-Prompt header); driver id travels in
                  the URL query. No vanilla fetch() path means no navigation
                  surprises if JS errors elsewhere on the page. -#}
              <button type="button" class="dr-remove-btn" data-driver="{{ d_id }}"
                      hx-post="/api/bvp/driver/remove?driver={{ d_id }}"
                      hx-prompt="Rationale for removing {{ d_id }} (≥30 chars):"
                      hx-target="#dr-remove-result"
                      hx-swap="innerHTML"
                      hx-on::after-request="if(event.detail.successful) setTimeout(()=>location.reload(),800)"
                      style="font-size:0.8rem; padding:0.2rem 0.5rem;">Remove</button>
            {% else %}
              <span class="muted" style="font-size:0.75rem;" title="D1-D4 are immutable in identity">protected</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {#- T-2079: htmx submits — native form action removed. The `changes` field
        is computed from liveWeights and added to the request via the
        `htmx:configRequest` listener below. Rationale + no-changes validation
        runs in that listener and calls evt.preventDefault() on failure. -#}
    <form id="bvp-commit-form"
          hx-post="/api/bvp/commit-weights"
          hx-target="#bvp-commit-result"
          hx-swap="innerHTML"
          hx-on::after-request="if(event.detail.successful) setTimeout(()=>location.reload(),800)"
          style="margin-top: 0.8rem;">
      <label>Rationale (≥30 characters):
        <textarea name="rationale" rows="2" minlength="30" required style="width: 100%;"
                  placeholder="Why are you changing these weights? Cite evidence (incident, decision, periodic re-weighting cycle)."></textarea>
      </label>
      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
        <button type="submit" id="bvp-commit-btn" disabled>Commit changes</button>
        <button type="button" id="bvp-reset-btn">Reset to server values</button>
        <span id="bvp-diff-summary" class="muted"></span>
      </div>
      <div id="bvp-commit-result" style="margin-top: 0.5rem;"></div>
    </form>
    <div id="dr-remove-result" style="margin-top: 0.5rem;"></div>
    {#- T-2079: per-row Remove handler IIFE replaced by hx-post + hx-prompt on
        each button. CSRF is auto-injected by web/static/csrf-htmx.js. -#}
  </section>

  {# ── T-2332 (T-2330 S2): driver proposal queue ── #}
  {%- if pending_proposals %}
  <section id="bvp-driver-proposals" style="margin: 1rem 0 1.5rem 0; padding: 0.8rem; border: 1px solid var(--pico-muted-border-color); border-radius: 0.4rem;">
    <h3>Pending driver proposals ({{ pending_proposals|length }})</h3>
    <p class="muted">
      Agent-filed proposals awaiting your decision. Approve runs
      <code>fw bvp driver --add --from-watchtower</code> (the Sovereign rail is
      preserved). Reject appends a <code>state: rejected</code> row with your
      rationale — both decisions are auditable in
      <code>.context/bvp-driver-proposals.jsonl</code>.
    </p>
    <table style="width:100%;">
      <thead>
        <tr>
          <th style="text-align:left;">ID</th>
          <th style="text-align:left;">Name</th>
          <th style="text-align:right;">Weight</th>
          <th style="text-align:left;">Rationale</th>
          <th style="text-align:left;">Author</th>
          <th style="text-align:left;">Actions</th>
        </tr>
      </thead>
      <tbody>
        {%- for p in pending_proposals %}
        <tr id="proposal-{{ p.id }}">
          <td><code>{{ p.id }}</code></td>
          <td><strong>{{ p.name }}</strong></td>
          <td style="text-align:right;">{{ p.weight }}</td>
          <td style="max-width: 28rem;">{{ p.rationale }}</td>
          <td><small class="muted">{{ p.author or 'unknown' }}{% if p.task %} · {{ p.task }}{% endif %}</small></td>
          <td style="white-space:nowrap;">
            <button type="button"
                    hx-post="/api/bvp/driver/approve?id={{ p.id }}"
                    hx-target="#proposal-{{ p.id }} .dp-result"
                    hx-swap="innerHTML"
                    hx-on::after-request="if(event.detail.successful) setTimeout(()=>location.reload(),800)"
                    style="background: var(--pico-ins-color); color: white; padding: 0.2rem 0.6rem; border: 0;">
              Approve
            </button>
            <button type="button"
                    hx-post="/api/bvp/driver/reject?id={{ p.id }}"
                    hx-prompt="Reject rationale (≥30 chars — why is this not the right driver?):"
                    hx-target="#proposal-{{ p.id }} .dp-result"
                    hx-swap="innerHTML"
                    hx-on::after-request="if(event.detail.successful) setTimeout(()=>location.reload(),800)"
                    style="background: var(--pico-del-color); color: white; padding: 0.2rem 0.6rem; border: 0;">
              Reject
            </button>
            <span class="dp-result" style="display:inline-block; margin-left:0.4rem;"></span>
          </td>
        </tr>
        {%- endfor %}
      </tbody>
    </table>
  </section>
  {%- endif %}

  {# ── T-1964 (T-1958 A): add free driver form ── #}
  <section id="bvp-driver-add" style="margin: 1rem 0 1.5rem 0;">
    <h3>Add free driver</h3>
    <p class="muted">
      Add a free driver (D1-D4 are protected — immutable in identity). Total drivers cap at 9 (M1).
      At cap, you must <em>drop</em> an existing free driver to add a new one (add-one-drop-one).
      §ACD: posted via <code>fw bvp driver --add --from-watchtower</code>. Rationale ≥30 chars (R6).
    </p>
    {#- T-2079: htmx replaces native form submit so a JS error can't navigate
        the browser to the JSON API URL (the prior failure mode where users saw
        "Method Not Allowed" was a GET on /api/bvp/driver/add after native submit).
        CSRF header injected automatically by web/static/csrf-htmx.js. -#}
    <form id="bvp-driver-add-form"
          hx-post="/api/bvp/driver/add"
          hx-target="#da-result"
          hx-swap="innerHTML"
          hx-on::after-request="if(event.detail.successful) setTimeout(()=>location.reload(),800)">
      <table style="width:100%; max-width:48rem;">
        <tr>
          <td style="width:9rem;"><label for="da-name">Name (slug):</label></td>
          <td>
            <input type="text" id="da-name" name="name" required
                   pattern="[A-Za-z][A-Za-z0-9_-]*"
                   title="Letters, digits, underscore, hyphen. Must start with a letter."
                   placeholder="e.g. estimator-fidelity" style="width:100%;">
          </td>
        </tr>
        <tr>
          <td><label for="da-weight">Weight (0-9):</label></td>
          <td>
            <input type="range" id="da-weight" name="weight" min="0" max="9" value="3"
                   oninput="document.getElementById('da-weight-display').textContent = this.value;">
            <span id="da-weight-display" style="margin-left:0.5rem;"><strong>3</strong></span>
          </td>
        </tr>
        <tr>
          <td><label for="da-rationale">Rationale:</label></td>
          <td>
            <textarea id="da-rationale" name="rationale" rows="2" minlength="30" required
                      style="width:100%;"
                      placeholder="What does this driver distinguish that global D1-D4 do not? (D6 quality criterion, ≥30 chars)"></textarea>
          </td>
        </tr>
        {% if weights|length >= 9 %}
        <tr id="da-drop-row">
          <td><label for="da-drop">Drop (M1 add-one-drop-one):</label></td>
          <td>
            <select id="da-drop" name="drop" required>
              <option value="">— select existing free driver to drop —</option>
              {% for d_id in weights.keys() %}
                {% if not d_id.startswith('D') %}
                <option value="{{ d_id }}">{{ d_id }}{% if driver_names and driver_names[d_id] %} — {{ driver_names[d_id] }}{% endif %}</option>
                {% endif %}
              {% endfor %}
            </select>
            <small class="muted">Total drivers = {{ weights|length }} (cap=9). D1-D4 cannot be dropped.</small>
          </td>
        </tr>
        {% endif %}
      </table>
      <div style="display:flex; gap:0.5rem; margin-top:0.5rem;">
        <button type="submit" id="da-submit-btn">Add driver</button>
        <span id="da-result" class="muted"></span>
      </div>
    </form>
    {#- T-2079: vanilla fetch() IIFE removed — htmx now drives the submit. -#}
  </section>
  {% endif %}

  {% if empty %}
    <p><strong>No scored entities yet.</strong> The scatter is empty until tasks/arcs carry confirmed <code>bvp_scores:</code> (via <code>fw bvp confirm T-XXX --i-am-human</code>) or estimator-proposed <code>bvp_scores_proposed:</code> (via the T-1922 worker; advisory). Proposed scores render at reduced opacity until confirmed.</p>
    <p>Once scoring lands, this page will show a four-quadrant scatter:</p>
    <ul>
      <li><strong>HV-LC</strong> (high value, low cost) — top-left, prime auto-promote zone</li>
      <li><strong>HV-HC</strong> (high value, high cost) — top-right, strategic but expensive</li>
      <li><strong>LV-LC</strong> (low value, low cost) — bottom-left, quick wins</li>
      <li><strong>LV-HC</strong> (low value, high cost) — bottom-right, avoid</li>
    </ul>
  {% else %}
    <div id="scatter-quadrant" data-quadrant="scatter" style="margin:1rem 0;"></div>
    <p><small>
      Quadrant scatter — {{ task_points|length }} task(s), {{ arc_points|length }} arc(s).
      Hover a dot to see cost composite (blast_radius × 0.6 + tier × 0.3 + effort × 0.1) or T-shirt fallback (Q2).
    </small></p>
    <p id="bvp-scatter-legend"><small>
      <strong>Legend:</strong>
      <span style="display:inline-block;width:10px;height:10px;background:steelblue;border-radius:50%;vertical-align:middle;"></span>
      filled = confirmed task &nbsp;·&nbsp;
      <span style="display:inline-block;width:10px;height:10px;border:1.5px solid steelblue;border-radius:50%;vertical-align:middle;"></span>
      outlined = <strong>proposed</strong> task (estimator output, advisory — confirm via <code>fw bvp confirm T-XXX --i-am-human</code>)
      &nbsp;·&nbsp;
      <span style="display:inline-block;width:14px;height:14px;background:#d4623a;border-radius:50%;vertical-align:middle;"></span>
      arc (confirmed) &nbsp;·&nbsp;
      <span style="display:inline-block;width:14px;height:14px;border:2px solid #d4623a;border-radius:50%;vertical-align:middle;"></span>
      arc (proposed)
    </small></p>
  {% endif %}

  <details>
    <summary>Raw data ({{ task_points|length + arc_points|length }} point(s))</summary>
    <table>
      <thead>
        <tr><th>Kind</th><th>ID</th><th>Name</th><th>WF</th><th>BVP_norm</th><th>Cost</th><th>Source</th><th>Status</th></tr>
      </thead>
      <tbody>
        {% for p in arc_points %}
        <tr>
          <td><strong>arc</strong></td>
          <td><code>{{ p.id }}</code></td>
          <td>{{ p.name }}</td>
          <td>—</td>
          <td>{{ "%.3f"|format(p.bvp_norm) }}</td>
          <td>{{ "%.2f"|format(p.cost) if p.cost is not none else "—" }}</td>
          <td>{{ p.cost_source }}</td>
          <td>{{ p.status }}</td>
        </tr>
        {% endfor %}
        {% for p in task_points %}
        <tr>
          <td>task</td>
          <td><code>{{ p.id }}</code></td>
          <td>{{ p.name }}</td>
          {# T-2192: WF column makes inceptions glanceable in the raw-data table without hovering each dot #}
          <td>{% if p.workflow_type == 'inception' %}<strong style="color:#9333ea;">inception</strong>{% elif p.workflow_type %}{{ p.workflow_type }}{% else %}—{% endif %}</td>
          <td>{{ "%.3f"|format(p.bvp_norm) }}</td>
          <td>{{ "%.2f"|format(p.cost) }}</td>
          <td>{{ p.cost_source }}</td>
          <td>{{ p.status }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </details>

  {#- T-2170 AC#1+#2+#6: per-driver score table — collapsed by default
      (data-driven iteration over weights.items() so new drivers like
      F-AUTONOMY auto-render when activated, zero template change).
      Column headers carry data-driver-id (machine-readable) + title= with
      one-line rubric summary (D1-D4 from policy/bvp-scoring-rubric.md,
      free drivers from policy/value-drivers.yaml `rubric:` field, both
      surfaced via _driver_rubrics()). Score cells render the per-driver
      score from p.scores (estimator-proposed or human-confirmed) or "—"
      when absent. AC#3 (facet axis-swap) + AC#5 (Playwright pin) ship in
      a Slice 2 sibling task. -#}
  {%- if not empty %}
  <details id="bvp-driver-scores-section" style="margin-top: 0.5rem;">
    <summary>Per-driver scores ({{ task_points|length }} task(s) × {{ weights|length }} driver(s))</summary>
    <p class="muted" style="font-size: 0.85rem; margin: 0.3rem 0 0.6rem;">
      Per-driver 0-5 scores. Headers carry <code>data-driver-id</code> + a
      <code>title=</code> rubric tooltip (hover the header). Confirmed scores
      come from <code>bvp_scores:</code>; estimator-proposed scores come from
      the latest <code>bvp_scores_proposed:</code> entry. "—" = driver not
      scored for this task (e.g. new driver added after the proposal cron).
    </p>
    <table class="bvp-driver-scores" style="font-size: 0.85rem;">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          {%- for d_id, w in weights.items() %}
          <th data-driver-id="{{ d_id }}"
              title="{%- if driver_rubrics and driver_rubrics[d_id] -%}
                       {%- for label, desc in driver_rubrics[d_id] -%}
                         {{ label }}: {{ desc }}{% if not loop.last %} · {% endif -%}
                       {%- endfor -%}
                     {%- else -%}
                       Rubric not parsed for {{ d_id }}
                     {%- endif -%}"
              style="text-align: center;">
            <code>{{ d_id }}</code>
            {%- if driver_names and driver_names[d_id] %}<br><small class="muted">{{ driver_names[d_id] }}</small>{% endif %}
            <br><small class="muted">w={{ w }}</small>
          </th>
          {%- endfor %}
        </tr>
      </thead>
      <tbody>
        {%- for p in task_points %}
        <tr>
          <td><a href="/tasks/{{ p.id }}"><code>{{ p.id }}</code></a></td>
          <td style="max-width: 24rem;">{{ p.name }}</td>
          {%- for d_id, w in weights.items() %}
          <td class="bvp-score-cell" data-driver-id="{{ d_id }}" style="text-align: center;">
            {%- if p.scores and d_id in p.scores -%}
              <strong>{{ p.scores[d_id] }}</strong>
            {%- else -%}
              <span class="muted">—</span>
            {%- endif -%}
          </td>
          {%- endfor %}
        </tr>
        {%- endfor %}
      </tbody>
    </table>
  </details>
  {%- endif %}
</article>

{% if weights or not empty %}
<script src="{{ url_for('static', filename='d3.v7.min.js') }}"></script>
<script id="bvp-data" type="application/json">{
  "tasks":   {{ task_points|tojson }},
  "arcs":    {{ arc_points|tojson }},
  "weights": {{ weights|tojson }}
}</script>
{% endif %}

{% if weights %}
<script>
(function() {
  // ── T-1929: live slider preview + commit ──
  const payload   = JSON.parse(document.getElementById("bvp-data").textContent);
  const baseWeights = Object.assign({}, payload.weights || {});
  const liveWeights = Object.assign({}, baseWeights);

  function computeBVP(scores, weights) {
    let raw = 0, ws = 0;
    for (const did in weights) {
      if (Object.prototype.hasOwnProperty.call(scores, did)) {
        raw += Number(scores[did]) * Number(weights[did]);
        ws  += Number(weights[did]);
      }
    }
    if (ws === 0) return {raw: 0, norm: 0};
    return {raw: raw, norm: raw / (5 * ws)};
  }

  function recomputePoint(p, weights) {
    const r = computeBVP(p.scores || {}, weights);
    return Object.assign({}, p, {bvp_norm: r.norm, bvp_raw: r.raw});
  }

  function refreshLiveLabels() {
    document.querySelectorAll(".live-weight").forEach(span => {
      const d = span.getAttribute("data-driver");
      span.textContent = liveWeights[d];
    });
  }

  function diffSummary() {
    const changes = [];
    for (const d in liveWeights) {
      if (Number(liveWeights[d]) !== Number(baseWeights[d])) {
        changes.push(`${d}: ${baseWeights[d]}→${liveWeights[d]}`);
      }
    }
    const el = document.getElementById("bvp-diff-summary");
    const btn = document.getElementById("bvp-commit-btn");
    if (changes.length === 0) {
      el.textContent = "no changes";
      btn.disabled = true;
    } else {
      el.textContent = "pending: " + changes.join(", ");
      btn.disabled = false;
    }
  }

  function rerenderScatter() {
    if (typeof window.bvpRedrawScatter === "function") {
      const tasks = (payload.tasks || []).map(p => recomputePoint(p, liveWeights));
      const arcs  = (payload.arcs  || []).map(p => recomputePoint(p, liveWeights));
      window.bvpRedrawScatter(tasks, arcs);
    }
  }

  document.querySelectorAll(".bvp-slider").forEach(slider => {
    slider.addEventListener("input", evt => {
      const d = slider.getAttribute("data-driver");
      liveWeights[d] = Number(slider.value);
      refreshLiveLabels();
      diffSummary();
      rerenderScatter();
    });
  });

  document.getElementById("bvp-reset-btn").addEventListener("click", () => {
    for (const d in baseWeights) {
      liveWeights[d] = baseWeights[d];
      const sl = document.querySelector(`.bvp-slider[data-driver="${d}"]`);
      if (sl) sl.value = baseWeights[d];
    }
    refreshLiveLabels();
    diffSummary();
    rerenderScatter();
    document.getElementById("bvp-commit-result").innerHTML = "";
  });

  // T-2079: commit form now driven by htmx. We hook htmx:configRequest to
  // (a) inject the computed `changes` JSON into the request parameters and
  // (b) run client-side rationale/no-change validation, calling
  // evt.preventDefault() to surface the error inline without firing the POST.
  document.getElementById("bvp-commit-form").addEventListener("htmx:configRequest", (evt) => {
    const result = document.getElementById("bvp-commit-result");
    const rationale = (evt.detail.parameters.rationale || "").trim();
    if (rationale.length < 30) {
      result.innerHTML = '<p style="color: var(--pico-del-color);">Rationale must be ≥30 characters (R6).</p>';
      evt.preventDefault();
      return;
    }
    const changes = [];
    for (const d in liveWeights) {
      if (Number(liveWeights[d]) !== Number(baseWeights[d])) {
        changes.push({driver: d, weight: liveWeights[d]});
      }
    }
    if (!changes.length) {
      result.innerHTML = '<p>No changes to commit.</p>';
      evt.preventDefault();
      return;
    }
    evt.detail.parameters.changes = JSON.stringify(changes);
  });

  refreshLiveLabels();
  diffSummary();
})();
</script>
{% endif %}

{% if not empty %}
<script>
(function() {
  const payload = JSON.parse(document.getElementById("bvp-data").textContent);
  const tasks = payload.tasks || [];
  const arcs = payload.arcs || [];
  const all = tasks.concat(arcs);
  if (!all.length) return;

  const container = document.getElementById("scatter-quadrant");
  const width  = Math.min(container.clientWidth || 900, 900);
  const height = 520;
  const margin = {top: 20, right: 20, bottom: 50, left: 60};
  const innerW = width  - margin.left - margin.right;
  const innerH = height - margin.top  - margin.bottom;

  const costMax = Math.max(8, d3.max(all, d => d.cost || 0)) * 1.05;
  const x = d3.scaleLinear().domain([0, costMax]).range([0, innerW]);
  const y = d3.scaleLinear().domain([0, 1]).range([innerH, 0]);

  const bvpVals  = all.map(d => d.bvp_norm);
  const costVals = all.map(d => d.cost).filter(v => v != null);
  const bvpMedian  = d3.median(bvpVals)  || 0.5;
  const costMedian = d3.median(costVals) || 4.0;

  const svg = d3.select(container).append("svg")
    .attr("width", width).attr("height", height).attr("role", "img")
    .attr("aria-label", "BVP quadrant scatter");

  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);

  // Quadrant guides at median
  g.append("line").attr("x1", x(costMedian)).attr("x2", x(costMedian))
    .attr("y1", 0).attr("y2", innerH).attr("stroke", "#888").attr("stroke-dasharray", "3,3");
  g.append("line").attr("y1", y(bvpMedian)).attr("y2", y(bvpMedian))
    .attr("x1", 0).attr("x2", innerW).attr("stroke", "#888").attr("stroke-dasharray", "3,3");

  // Axes
  g.append("g").attr("transform", `translate(0,${innerH})`).call(d3.axisBottom(x));
  g.append("g").call(d3.axisLeft(y));
  g.append("text").attr("x", innerW/2).attr("y", innerH + 40)
    .attr("text-anchor", "middle").text("Cost composite (F8: 0.6·br + 0.3·tier + 0.1·effort)");
  g.append("text").attr("transform", "rotate(-90)").attr("x", -innerH/2).attr("y", -45)
    .attr("text-anchor", "middle").text("BVP_norm");

  // Quadrant labels (HV-LC top-left etc.)
  const labelStyle = { "font-size": "0.7rem", "fill": "#999", "pointer-events": "none" };
  g.append("text").attr("x", x(0)+5).attr("y", y(1)+15)
    .attr("style", "font-size:0.7rem;fill:#999;").text("HV-LC");
  g.append("text").attr("x", innerW-40).attr("y", y(1)+15)
    .attr("style", "font-size:0.7rem;fill:#999;").text("HV-HC");
  g.append("text").attr("x", x(0)+5).attr("y", innerH-5)
    .attr("style", "font-size:0.7rem;fill:#999;").text("LV-LC");
  g.append("text").attr("x", innerW-40).attr("y", innerH-5)
    .attr("style", "font-size:0.7rem;fill:#999;").text("LV-HC");

  // Tooltip
  const tip = d3.select(container).append("div")
    .attr("class", "bvp-tip")
    .style("position", "absolute").style("padding", "6px 8px")
    .style("background", "rgba(20,20,25,0.92)").style("color", "#eee")
    .style("border-radius", "4px").style("font-size", "0.75rem")
    .style("pointer-events", "none").style("opacity", 0);

  function tipHTML(d) {
    let cost = "";
    if (d.cost_source === "three-component") {
      cost = `cost ${d.cost.toFixed(2)} = ${(d.blast_radius*0.6).toFixed(2)} (br ${d.blast_radius}) + ${(d.tier*0.3).toFixed(2)} (tier ${d.tier}) + ${(d.effort*0.1).toFixed(2)} (effort ${d.effort})`;
    } else if (d.cost_source === "tshirt") {
      cost = `cost ${d.cost.toFixed(1)} (T-shirt Q2 fallback)`;
    } else {
      cost = "cost: absent";
    }
    // T-1934: surface proposed vs confirmed in the tooltip explicitly
    const advisory = d.proposed ? " <em>(proposed)</em>" : "";
    // T-1941: for arc dots, append the 4-tier provenance slug so users can
    // tell direct-confirmed (anchored arc score) from derived-confirmed
    // (rolled up from members) — same for proposed.
    let provenance = "";
    if (d.kind === "arc" && d.bvp_mode) {
      provenance = `<br><small>source: <code>${d.bvp_mode}</code></small>`;
    }
    // T-2192: inception extras — voi_score + target_blast_radius if filed
    let incExtras = "";
    if (d.workflow_type === "inception") {
      const voi = (d.voi_score !== null && d.voi_score !== undefined) ? `voi ${d.voi_score.toFixed(2)}` : "voi —";
      const tbr = (d.target_blast_radius !== null && d.target_blast_radius !== undefined) ? `tbr ${d.target_blast_radius}` : "tbr —";
      incExtras = `<br><small><strong>inception</strong> · ${voi} · ${tbr}</small>`;
    } else if (d.workflow_type) {
      incExtras = `<br><small>wf: ${d.workflow_type}</small>`;
    }
    return `<strong>${d.id}</strong> [${d.kind}]${advisory}<br>${d.name}<br>BVP_norm ${d.bvp_norm.toFixed(3)} (raw ${d.bvp_raw})<br>${cost}${provenance}${incExtras}`;
  }

  function drawPoints(taskData, arcData) {
    // T-1934: split confirmed (filled) from proposed (outlined). Same data
    // shape; the .proposed flag drives the visual style.
    const confirmedTasks = taskData.filter(d => !d.proposed);
    const proposedTasks  = taskData.filter(d => d.proposed);
    const confirmedArcs  = arcData.filter(d => !d.proposed);
    const proposedArcs   = arcData.filter(d => d.proposed);

    // T-2192 (T-2186 slice 6): inception tasks get a distinct purple hue +
    // diamond shape so they stand out from build-task steelblue dots in
    // a dense scatter. Tooltip extras (voi/tbr) are emitted by tipHTML().
    function dotFill(d) {
      if (d.workflow_type === "inception") return "#9333ea";  // purple-600
      return "steelblue";
    }
    function dotStroke(d) {
      if (d.workflow_type === "inception") return "#6b21a8";  // purple-800
      return "steelblue";
    }
    function dotClass(d, base) {
      return base + (d.workflow_type === "inception" ? " dot-inception" : "");
    }

    // Confirmed tasks — filled, inception purple / build steelblue
    const tCSel = g.selectAll(".pt-task-confirmed").data(confirmedTasks, d => d.id);
    tCSel.exit().remove();
    tCSel.enter().append("circle")
      .attr("class", d => dotClass(d, "pt-task pt-task-confirmed"))
      .attr("r", d => d.workflow_type === "inception" ? 5 : 4)
      .attr("fill", dotFill).attr("opacity", 0.85)
      .attr("stroke", dotStroke).attr("stroke-width", d => d.workflow_type === "inception" ? 1.2 : 0)
      .on("mouseover", function(event, d) { tip.style("opacity", 1).html(tipHTML(d)); })
      .on("mousemove", function(event)     { tip.style("left", (event.pageX + 12) + "px").style("top", (event.pageY - 30) + "px"); })
      .on("mouseout",  function()          { tip.style("opacity", 0); })
      .merge(tCSel)
      .attr("cx", d => x(d.cost)).attr("cy", d => y(d.bvp_norm));

    // Proposed tasks — outlined; inception purple-stroke / build steelblue-stroke
    const tPSel = g.selectAll(".pt-task-proposed").data(proposedTasks, d => d.id);
    tPSel.exit().remove();
    tPSel.enter().append("circle")
      .attr("class", d => dotClass(d, "pt-task pt-task-proposed"))
      .attr("r", d => d.workflow_type === "inception" ? 5 : 4)
      .attr("fill", "none")
      .attr("stroke", dotStroke).attr("stroke-width", 1.5).attr("opacity", 0.65)
      .on("mouseover", function(event, d) { tip.style("opacity", 1).html(tipHTML(d)); })
      .on("mousemove", function(event)     { tip.style("left", (event.pageX + 12) + "px").style("top", (event.pageY - 30) + "px"); })
      .on("mouseout",  function()          { tip.style("opacity", 0); })
      .merge(tPSel)
      .attr("cx", d => x(d.cost)).attr("cy", d => y(d.bvp_norm));

    // Confirmed arcs — filled orange
    const aCSel = g.selectAll(".pt-arc-confirmed").data(confirmedArcs, d => d.id);
    aCSel.exit().remove();
    aCSel.enter().append("circle")
      .attr("class", "pt-arc pt-arc-confirmed")
      .attr("r", 9).attr("fill", "#d4623a").attr("opacity", 0.85)
      .attr("stroke", "#7a3a23").attr("stroke-width", 1)
      .on("mouseover", function(event, d) { tip.style("opacity", 1).html(tipHTML(d)); })
      .on("mousemove", function(event)     { tip.style("left", (event.pageX + 12) + "px").style("top", (event.pageY - 30) + "px"); })
      .on("mouseout",  function()          { tip.style("opacity", 0); })
      .merge(aCSel)
      .attr("cx", d => x(d.cost || 4)).attr("cy", d => y(d.bvp_norm));

    // Proposed arcs — outlined orange
    const aPSel = g.selectAll(".pt-arc-proposed").data(proposedArcs, d => d.id);
    aPSel.exit().remove();
    aPSel.enter().append("circle")
      .attr("class", "pt-arc pt-arc-proposed")
      .attr("r", 9).attr("fill", "none")
      .attr("stroke", "#d4623a").attr("stroke-width", 2).attr("opacity", 0.75)
      .on("mouseover", function(event, d) { tip.style("opacity", 1).html(tipHTML(d)); })
      .on("mousemove", function(event)     { tip.style("left", (event.pageX + 12) + "px").style("top", (event.pageY - 30) + "px"); })
      .on("mouseout",  function()          { tip.style("opacity", 0); })
      .merge(aPSel)
      .attr("cx", d => x(d.cost || 4)).attr("cy", d => y(d.bvp_norm));
  }

  // Initial draw
  drawPoints(tasks, arcs);

  // T-1929 hook: slider live-recompute calls this to redraw without server roundtrip
  window.bvpRedrawScatter = function(newTasks, newArcs) {
    drawPoints(newTasks || [], newArcs || []);
  };
})();
</script>
{% endif %}
{% endblock %}