{% extends "base.html" %}
{% block title %}{{ case.case_id }} — Worker Mesh — psyc{% endblock %}
{% block content %}
{% set accents = ['#1ec8ff', '#2dd4bf', '#38bdf8', '#a78bfa', '#60a5fa', '#4ade80', '#fbbf24'] %}

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
  <filter id="botglow" x="-90%" y="-90%" width="280%" height="280%">
    <feGaussianBlur stdDeviation="2.6" result="b"/>
    <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
</defs></svg>

{% macro bot_svg(b) %}
<svg class="bot-svg" viewBox="0 0 96 116" aria-hidden="true">
  <line class="bot-stalk" x1="48" y1="7" x2="48" y2="19"/>
  <circle class="bot-tip" cx="48" cy="6" r="4.6" filter="url(#botglow)"/>
  <rect class="bot-arm" x="8" y="70" width="9" height="23" rx="4.5"/>
  <rect class="bot-arm" x="79" y="70" width="9" height="23" rx="4.5"/>
  <rect class="bot-head" x="16" y="18" width="64" height="46" rx="14"/>
  <rect class="bot-visor" x="24" y="28" width="48" height="22" rx="10"/>
  <circle class="bot-eye eye-awake" cx="38" cy="39" r="4.6" filter="url(#botglow)"/>
  <circle class="bot-eye eye-awake" cx="58" cy="39" r="4.6" filter="url(#botglow)"/>
  <line class="bot-eye eye-sleep" x1="32" y1="39" x2="44" y2="39"/>
  <line class="bot-eye eye-sleep" x1="52" y1="39" x2="64" y2="39"/>
  <path class="bot-mouth mouth-happy" d="M40 54 Q48 61 56 54" fill="none"/>
  <line class="bot-mouth mouth-flat" x1="41" y1="57" x2="55" y2="57"/>
  <rect class="bot-body" x="24" y="68" width="48" height="34" rx="11"/>
  <circle class="bot-core" cx="48" cy="85" r="8.5" filter="url(#botglow)"/>
  <text class="bot-num" x="48" y="89" text-anchor="middle">{{ b.index }}</text>
  <rect class="bot-foot" x="30" y="101" width="13" height="9" rx="3"/>
  <rect class="bot-foot" x="53" y="101" width="13" height="9" rx="3"/>
</svg>
{% endmacro %}

<section class="panel">
  <a class="back" href="/cases/{{ case.case_id }}">← {{ case.case_id }}</a>
  <div class="panel-head">
    <h1>Worker Mesh</h1>
    <button class="replay-btn" onclick="replayMesh()">▶ replay</button>
  </div>
  <p class="summary-lead">{{ case.summary }}</p>
  <p class="page-intro">Watch the case move through psyc's worker mesh — seven bots, each performing one pipeline stage and reporting its real result. The Classifier bot's severity verdict comes from the live fine-tuned model; hit ▶ replay to run it again.</p>

  <ol class="mesh playing" id="mesh">
    <span class="case-token" aria-hidden="true"></span>
    {% for b in beats %}
    <li class="bot {{ 'bot-done' if b.occurred else 'bot-asleep' }}"
        style="--i: {{ loop.index0 }}; --bot: {{ accents[loop.index0] }}">
      <div class="bot-avatar">
        <span class="bot-ring" aria-hidden="true"></span>
        {{ bot_svg(b) }}
        <span class="bot-name">{{ b.bot }}</span>
      </div>
      <div class="bot-bubble">
        <p class="bot-purpose">{{ b.purpose }}</p>
        {% if b.occurred %}
          <p class="bot-working">▸ {{ b.action }}…</p>
          <p class="bot-answer">{{ b.caption }}</p>
        {% else %}
          <p class="bot-answer bot-answer-skip">{{ b.caption }}</p>
        {% endif %}
        {% if b.facts %}
        <ul class="bot-facts">{% for f in b.facts %}<li>{{ f }}</li>{% endfor %}</ul>
        {% endif %}
        {% if b.model_answer %}
        {% set rule_sev = case.classification.severity.value if case.classification.severity else '' %}
        {% set agrees = b.model_answer == rule_sev %}
        <p class="bot-model {{ 'model-agree' if agrees else 'model-differ' }}">
          <span class="model-chip">⬡ psyc-v4 · live model</span>
          severity: <strong>{{ b.model_answer | upper }}</strong>
          {% if agrees %}<span class="model-verdict">✓ agrees with the rule</span>
          {% else %}<span class="model-verdict">✗ differs — rule said {{ rule_sev | upper }}</span>{% endif %}
        </p>
        {% endif %}
      </div>
    </li>
    {% endfor %}
  </ol>
</section>
<script>
function replayMesh() {
  const m = document.getElementById('mesh');
  m.classList.remove('playing');
  void m.offsetWidth;
  m.classList.add('playing');
}
</script>
{% endblock %}