{% extends "base.html" %}
{% block title %}Cognitive State — Agent Wasp{% endblock %}

{% block page_css %}
<style id="page-dyn-style" nonce="{{ request.state.csp_nonce }}">
[data-ds="1"] { width:5rem;height:5rem; }
[data-ds="2"] { transform:rotate(-90deg); }
[data-ds="3"] { transition: stroke-dasharray 1s ease; }
[data-ds="4"] { }
[data-ds="5"] { }
[data-ds="6"] { }
[data-ds="7"] { }
[data-ds="8"] { }
</style>
{% endblock %}

{% block content %}
<div class="space-y-5">

  <!-- ── Header ────────────────────────────────────────────────────────────── -->
  <div class="flex items-start justify-between gap-3 flex-wrap">
    <div>
      <h1 class="text-2xl font-bold tracking-tight">Cognitive State</h1>
      <p class="text-sm text-base-content/50 mt-0.5">The agent's living memory and belief systems</p>
    </div>
    <div class="text-xs text-base-content/30 mt-1" id="cpi-refresh-ts"></div>
  </div>

  <!-- ── Stats bar ─────────────────────────────────────────────────────────── -->
  <div class="flex flex-wrap items-center gap-2">

    {% set learning_total = behavioral_rule_count + proposal_count + learning_example_count %}
    {% if learning_total > 0 %}
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2.5">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-warning/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
      </svg>
      <div>
        <div class="text-[10px] text-base-content/40 uppercase tracking-widest leading-none mb-0.5">Learning</div>
        <div class="text-lg font-bold tabular-nums leading-none text-warning">{{ learning_total }}</div>
      </div>
    </div>
    {% endif %}

  </div>

  <!-- ── CPI Banner ─────────────────────────────────────────────────────────── -->
  {% if cpi_report and cpi_report.get('cpi') is not none %}
  {% set cpi_val = cpi_report.get('cpi', 0) | int %}
  <div id="cpi-card" class="card bg-base-100 shadow-sm wasp-accent {% if cpi_report.high %}border border-warning/30{% endif %}">
    <div class="card-body py-4 px-5">
      <div class="flex items-center gap-5 flex-wrap">

        <!-- Gauge + label -->
        <div class="flex items-center gap-4 shrink-0">
          <div class="relative flex items-center justify-center" data-ds="1">
            <svg viewBox="0 0 80 80" class="absolute inset-0 w-full h-full -rotate-90" data-ds="2">
              <circle cx="40" cy="40" r="32" fill="none" stroke="currentColor" stroke-width="6"
                class="text-base-200"/>
              <circle id="cpi-ring" cx="40" cy="40" r="32" fill="none" stroke-width="6"
                stroke-linecap="round"
                stroke="{% if cpi_val >= 80 %}oklch(var(--wa)){% elif cpi_val >= 50 %}oklch(var(--in)){% else %}oklch(var(--su)){% endif %}"
                stroke-dasharray="{{ (cpi_val / 100 * 201.06) | round(1) }} 201.06"
                data-ds="3"/>
            </svg>
            <div class="relative text-center">
              <div id="cpi-pct" class="text-lg font-bold tabular-nums leading-none {% if cpi_val >= 80 %}text-warning{% elif cpi_val >= 50 %}text-info{% else %}text-success{% endif %}">{{ cpi_val }}%</div>
              <div class="text-[9px] text-base-content/40 uppercase tracking-widest mt-0.5">load</div>
            </div>
          </div>
          <div>
            <div class="font-semibold text-sm">Cognitive Load</div>
            <div id="cpi-status-badge" class="mt-1">
              {% if cpi_report.high %}
              <span class="pill pill-sm pill-warning"><span class="pill-pulse"></span>HIGH LOAD</span>
              {% elif cpi_val >= 50 %}
              <span class="pill pill-sm pill-info">ELEVATED</span>
              {% else %}
              <span class="pill pill-sm pill-success">NOMINAL</span>
              {% endif %}
            </div>
          </div>
        </div>

        <!-- Component bars -->
        <div class="flex flex-wrap gap-x-6 gap-y-2 flex-1 min-w-0">
          {% set comps = cpi_report.get('components', {}) %}
          {% for comp_name, comp_val in comps.items() %}
          {% set cv = comp_val | int %}
          <div class="min-w-[9rem] flex-1">
            <div class="flex justify-between items-center mb-1">
              <span class="text-xs text-base-content/50 capitalize">{{ comp_name.replace('_', ' ') }}</span>
              <span class="text-xs font-medium {% if cv > 70 %}text-warning{% elif cv > 40 %}text-info{% else %}text-success{% endif %}">{{ cv }}%</span>
            </div>
            <div class="w-full bg-base-200 rounded-full h-1.5">
              <div class="h-1.5 rounded-full transition-all duration-700
                {% if cv > 70 %}bg-warning{% elif cv > 40 %}bg-info{% else %}bg-success{% endif %}"
                data-ds="4" data-dv="width:{{ cv}}%"></div>
            </div>
          </div>
          {% endfor %}
        </div>

        <span class="text-xs text-base-content/25 shrink-0" id="cpi-computed-at">{{ cpi_report.get('computed_at', '')[:16] | replace('T', ' ') }}</span>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- ── Tab bar ────────────────────────────────────────────────────────────── -->
  <div class="flex flex-wrap gap-1 p-1 bg-base-200 rounded-xl w-fit">
    <button class="tab-btn tab-active px-3 py-1.5 rounded-lg text-sm font-medium transition-all" id="tab-self" data-tab="self">Self-Model</button>
    <button class="tab-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-all" id="tab-epistemic" data-tab="epistemic">Epistemic</button>
    <button class="tab-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-all" id="tab-integrity" data-tab="integrity">
      Integrity
      {% if integrity_report and integrity_report.summary and integrity_report.summary.total_findings > 0 %}
      <span class="pill pill-sm pill-warning ml-1">{{ integrity_report.summary.total_findings }}</span>
      {% endif %}
    </button>
    <button class="tab-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-all" id="tab-learning" data-tab="learning">
      Learning Loop
      {% set learning_total = behavioral_rule_count + proposal_count + learning_example_count %}
      {% if learning_total > 0 %}<span class="pill pill-sm pill-warning ml-1">{{ learning_total }}</span>{% endif %}
    </button>
  </div>

  <!-- ================================================================ -->
  <!-- TAB: SELF-MODEL                                                   -->
  <!-- ================================================================ -->
  <div id="pane-self" class="space-y-4">

    <!-- Key stats row -->
    <div class="grid grid-cols-3 gap-3">
      <div class="card bg-base-100 shadow-sm wasp-accent text-center">
        <div class="card-body py-3 px-4">
          <div class="text-2xl font-bold tabular-nums text-primary">{{ self_model.get('total_messages_processed', 0) }}</div>
          <div class="text-xs text-base-content/45 mt-0.5">Total messages</div>
        </div>
      </div>
      <div class="card bg-base-100 shadow-sm wasp-accent text-center">
        <div class="card-body py-3 px-4">
          <div class="text-2xl font-bold tabular-nums text-secondary">{{ self_model.get('weekly_stats', {}).get('skill_calls', 0) }}</div>
          <div class="text-xs text-base-content/45 mt-0.5">Skills this week</div>
        </div>
      </div>
      <div class="card bg-base-100 shadow-sm wasp-accent text-center">
        <div class="card-body py-3 px-4">
          <div class="text-2xl font-bold tabular-nums text-accent">{{ self_model.get('dream_count', 0) }}</div>
          <div class="text-xs text-base-content/45 mt-0.5">Dream cycles</div>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

      <!-- Strengths -->
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4">
          <h2 class="font-semibold text-sm text-success flex items-center gap-2 mb-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
            Strengths
          </h2>
          <ul class="space-y-2">
            {% for s in self_model.get('strengths', []) %}
            <li class="flex items-start gap-2 text-sm">
              <span class="text-success mt-0.5 shrink-0">✓</span>
              <span>{{ s }}</span>
            </li>
            {% else %}
            <li class="text-base-content/35 text-sm italic">No data yet</li>
            {% endfor %}
          </ul>
        </div>
      </div>

      <!-- Known failures -->
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4">
          <h2 class="font-semibold text-sm text-warning flex items-center gap-2 mb-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
            Known Failures & Solutions
          </h2>
          <div class="space-y-2">
            {% for f in self_model.get('known_failures', []) %}
            <div class="bg-base-200 rounded-lg p-2.5">
              {% set title = (f.tool ~ ' — ' ~ f.error_type) if f.tool else f.get('pattern', 'Unknown') %}
              <p class="text-xs font-semibold text-warning">{{ title }}</p>
              {% if f.frequency or f.risk %}
              <p class="text-xs text-base-content/50 mt-0.5">
                {% if f.frequency %}{{ f.frequency }}{% endif %}
                {% if f.frequency and f.risk %} · {% endif %}
                {% if f.risk %}<span class="{% if f.risk == 'high' %}text-error{% else %}text-warning{% endif %}">{{ f.risk }} risk</span>{% endif %}
              </p>
              {% endif %}
              {% if f.solution %}
              <p class="text-xs text-base-content/65 mt-1">→ {{ f.solution }}</p>
              {% endif %}
            </div>
            {% else %}
            <p class="text-base-content/35 text-sm italic">No failures recorded</p>
            {% endfor %}
          </div>
        </div>
      </div>

      <!-- User preferences -->
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4">
          <h2 class="font-semibold text-sm text-info flex items-center gap-2 mb-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
            User Preferences
          </h2>
          <div class="space-y-2">
            {% for k, v in self_model.get('user_preferences', {}).items() %}
            {% if v %}
            <div class="flex justify-between gap-2">
              <span class="text-xs text-base-content/40 capitalize">{{ k.replace('_', ' ') }}</span>
              <span class="text-xs font-medium text-right max-w-[60%]">{{ v }}</span>
            </div>
            {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>

      <!-- Weekly top skills -->
      {% set ws = self_model.get('weekly_stats', {}) %}
      {% if ws.get('skills_used') %}
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4">
          <h2 class="font-semibold text-sm flex items-center gap-2 mb-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            Top Skills This Week
          </h2>
          <div class="space-y-2">
            {% for sk, cnt in ws['skills_used'].items() | sort(attribute=1, reverse=True) | list %}
            {% set max_cnt = ws['skills_used'].values() | max %}
            <div class="flex items-center gap-2">
              <span class="text-xs w-28 truncate shrink-0">{{ sk }}</span>
              <div class="flex-1 bg-base-200 rounded-full h-1.5">
                <div class="h-1.5 rounded-full bg-primary/60 transition-all duration-500" data-ds="5" data-dv="width:{{ (cnt / max_cnt * 100) | int}}%"></div>
              </div>
              <span class="text-xs text-base-content/40 w-6 text-right shrink-0">{{ cnt }}</span>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}

    </div>

    <!-- Skill success rates -->
    {% if skill_rates %}
    <div class="card bg-base-100 shadow-sm wasp-accent">
      <div class="card-body p-4">
        <h2 class="font-semibold text-sm mb-4">Skill Success Rates</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {% for sr in skill_rates %}
          <div>
            <div class="flex justify-between items-center mb-1.5">
              <span class="text-sm font-medium truncate max-w-[8rem]">{{ sr.skill }}</span>
              <span class="text-sm font-bold {% if sr.pct >= 80 %}text-success{% elif sr.pct >= 50 %}text-warning{% else %}text-error{% endif %}">{{ sr.pct }}%</span>
            </div>
            <div class="w-full bg-base-200 rounded-full h-2">
              <div class="h-2 rounded-full transition-all duration-700
                {% if sr.pct >= 80 %}bg-success{% elif sr.pct >= 50 %}bg-warning{% else %}bg-error{% endif %}"
                data-ds="6" data-dv="width:{{ sr.pct}}%"></div>
            </div>
            <p class="text-xs text-base-content/35 mt-1">{{ sr.success }}✓ {{ sr.failure }}✗ · {{ sr.total }} total</p>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Improvement queue -->
    {% set queue = self_model.get('improvement_queue', []) %}
    {% if queue %}
    <div class="card bg-base-100 shadow-sm wasp-accent">
      <div class="card-body p-4">
        <h2 class="font-semibold text-sm text-secondary flex items-center gap-2 mb-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
          Improvement Queue ({{ queue|length }})
        </h2>
        <ol class="space-y-1.5">
          {% for item in queue %}
          <li class="flex items-start gap-2 text-sm">
            <span class="text-secondary/60 font-mono text-xs mt-0.5 shrink-0">{{ loop.index }}.</span>
            <span>{{ item }}</span>
          </li>
          {% endfor %}
        </ol>
      </div>
    </div>
    {% endif %}

  </div><!-- end pane-self -->

  <!-- ================================================================ -->
  <!-- TAB: EPISTEMIC                                                    -->
  <!-- ================================================================ -->
  <div id="pane-epistemic" class="hidden space-y-4">
    <div class="card bg-base-100 shadow-sm wasp-accent">
      <div class="card-body p-4">
        <div class="flex items-center justify-between mb-5">
          <div>
            <h2 class="font-semibold text-sm">Domain Confidence</h2>
            <p class="text-xs text-base-content/40 mt-0.5">
              {{ epistemic.get('total_interactions', 0) }} total interactions
              {% if epistemic.get('last_updated') %} · updated {{ epistemic['last_updated'][:10] }}{% endif %}
            </p>
          </div>
          <button id="btn-reset-epistemic" class="btn btn-xs btn-outline btn-error" data-action="cognitive:resetEpistemic">Reset</button>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {% for domain, conf in epistemic.get('domain_confidence', {}).items() | sort(attribute=1, reverse=True) %}
          {% set pct = (conf * 100) | int %}
          {% set hue = (pct * 1.2) | int %}
          <div>
            <div class="flex justify-between items-center mb-2">
              <span class="text-sm font-medium capitalize">{{ domain.replace('_', ' ') }}</span>
              <span class="text-sm font-bold tabular-nums" data-ds="7" data-dv="color: hsl({{ hue}}, 55%, 52%);">{{ pct }}%</span>
            </div>
            <div class="w-full bg-base-200 rounded-full h-2.5 overflow-hidden">
              <div class="h-2.5 rounded-full transition-all duration-700"
                data-ds="8" data-dv="width:{{ pct}}%; background: linear-gradient(90deg, hsl({{ [hue - 12, 0] | max }}, 50%, 44%), hsl({{ hue }}, 55%, 48%))"></div>
            </div>
          </div>
          {% else %}
          <p class="col-span-3 text-base-content/35 text-sm italic py-4 text-center">No epistemic data yet</p>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      {% set errors = epistemic.get('recent_errors', []) %}
      {% set successes = epistemic.get('recent_successes', []) %}
      {% if errors %}
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4">
          <h3 class="font-semibold text-sm text-error mb-2">Recent error domains</h3>
          <div class="flex flex-wrap gap-1">
            {% for d in errors[-10:] %}
            <span class="pill pill-sm pill-danger capitalize">{{ d.replace('_', ' ') }}</span>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}
      {% if successes %}
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4">
          <h3 class="font-semibold text-sm text-success mb-2">Recent success domains</h3>
          <div class="flex flex-wrap gap-1">
            {% for d in successes[-10:] %}
            <span class="pill pill-sm pill-success capitalize">{{ d.replace('_', ' ') }}</span>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </div>


  <!-- ================================================================ -->
  <!-- TAB: INTEGRITY                                                    -->
  <!-- ================================================================ -->
  <div id="pane-integrity" class="hidden space-y-4">
    {% if integrity_report and integrity_report.get('summary') %}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
      <div class="card bg-base-100 shadow-sm wasp-accent text-center">
        <div class="card-body py-3 px-4">
          {% set s = integrity_report.get('summary', {}) %}
          <div class="text-2xl font-bold {% if s.get('total_findings', 0) > 0 %}text-warning{% else %}text-success{% endif %}">{{ s.get('total_findings', 0) }}</div>
          <div class="text-xs text-base-content/45 mt-0.5">Total Findings</div>
        </div>
      </div>
      <div class="card bg-base-100 shadow-sm wasp-accent text-center">
        <div class="card-body py-3 px-4">
          <div class="text-2xl font-bold {% if s.get('invalid_strengths', 0) > 0 %}text-error{% else %}text-success{% endif %}">{{ s.get('invalid_strengths', 0) }}</div>
          <div class="text-xs text-base-content/45 mt-0.5">Invalid Strengths</div>
        </div>
      </div>
      <div class="card bg-base-100 shadow-sm wasp-accent text-center">
        <div class="card-body py-3 px-4">
          <div class="text-2xl font-bold {% if s.get('epistemic_drifts', 0) > 0 %}text-warning{% else %}text-success{% endif %}">{{ s.get('epistemic_drifts', 0) }}</div>
          <div class="text-xs text-base-content/45 mt-0.5">Epistemic Drift</div>
        </div>
      </div>
      <div class="card bg-base-100 shadow-sm wasp-accent text-center">
        <div class="card-body py-3 px-4">
          <div class="text-2xl font-bold text-info">{{ s.get('auto_corrections', 0) }}</div>
          <div class="text-xs text-base-content/45 mt-0.5">Auto-Corrections</div>
        </div>
      </div>
    </div>
    {% set gen_at = integrity_report.get('generated_at', '') %}
    {% if gen_at %}<p class="text-xs text-base-content/35">Last check: {{ gen_at[:19] | replace("T", " ") }}</p>{% endif %}

    {% if integrity_report.get('corrections') %}
    <div class="card bg-info/10 shadow-sm wasp-accent">
      <div class="card-body py-3 px-4">
        <h3 class="font-semibold text-sm text-info mb-2">Auto-Corrections Applied</h3>
        {% for c in integrity_report.corrections %}
        <p class="text-xs text-base-content/70">✓ {{ c }}</p>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% if integrity_report.get('findings') %}
    <div class="space-y-3">
      {% for f in integrity_report.findings %}
      <div class="card bg-base-100 shadow-sm border-l-4 {% if f.severity == 'medium' %}border-warning{% else %}border-info{% endif %} wasp-accent">
        <div class="card-body py-3 px-4">
          <div class="flex items-center gap-1.5 mb-1.5 flex-wrap">
            <span class="pill pill-sm {% if f.severity == 'medium' %}pill-warning{% else %}pill-info{% endif %}">{{ f.severity }}</span>
            <span class="pill pill-sm pill-ghost">{{ f.type | replace("_", " ") }}</span>
            {% if f.domain %}<span class="pill pill-sm pill-neutral">{{ f.domain }}</span>{% endif %}
          </div>
          <p class="text-sm text-base-content/80">{{ f.detail }}</p>
          {% if f.type == 'epistemic_drift' %}
          <div class="flex gap-4 mt-1 text-xs text-base-content/50">
            <span>Epistemic: <strong>{{ (f.epistemic_confidence * 100)|int }}%</strong></span>
            <span>Actual: <strong>{{ (f.actual_rate * 100)|int }}%</strong></span>
            <span>Drift: <strong>{{ (f.drift * 100)|int }}%</strong></span>
          </div>
          {% elif f.type == 'invalid_strength' %}
          <div class="flex gap-4 mt-1 text-xs text-base-content/50">
            <span>Actual rate: <strong>{{ (f.actual_rate * 100)|int }}%</strong></span>
            <span>Required: <strong>{{ (f.threshold * 100)|int }}%</strong></span>
          </div>
          {% elif f.type == 'audit_error_spike' %}
          <div class="flex gap-4 mt-1 text-xs text-base-content/50">
            <span>Error rate: <strong>{{ (f.error_rate * 100)|int }}%</strong></span>
            <span>Total events: <strong>{{ f.total_events }}</strong></span>
          </div>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="card bg-base-100 shadow-sm wasp-accent">
      <div class="card-body items-center py-8 text-center">
        <div class="text-4xl mb-2">✅</div>
        <p class="font-medium text-success">No integrity issues found</p>
        <p class="text-xs text-base-content/40 mt-1">All self-model claims are consistent with observed reality.</p>
      </div>
    </div>
    {% endif %}
    {% else %}
    <div class="card bg-base-100 shadow-sm wasp-accent">
      <div class="card-body items-center py-12 text-center">
        <p class="text-base-content/40">No integrity report available yet.</p>
        <p class="text-xs text-base-content/30 mt-1">The Self-Integrity Monitor runs every 6 hours.</p>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- ================================================================ -->
  <!-- TAB: LEARNING LOOP                                                -->
  <!-- ================================================================ -->
  <div id="pane-learning" class="hidden space-y-6">

    <!-- ── Self-Improve Proposals ─────────────────────────────────── -->
    <div>
      <div class="flex items-center justify-between mb-3">
        <h2 class="font-semibold text-sm flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
          </svg>
          Self-Improve Proposals
          {% if proposal_count > 0 %}<span class="pill pill-sm pill-secondary">{{ proposal_count }}</span>{% endif %}
        </h2>
        <p class="text-xs text-base-content/35">Pending code changes proposed by the agent</p>
      </div>
      {% if proposals %}
      <div class="space-y-3">
        {% for p in proposals %}
        <div class="card bg-base-100 shadow-sm border-l-4 border-secondary/50 wasp-accent" id="proposal-{{ p.id }}">
          <div class="card-body py-3 px-4">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0 flex-1">
                <div class="flex items-center gap-2 mb-1">
                  <span class="pill pill-sm pill-secondary font-mono">{{ p.id }}</span>
                  <span class="text-xs text-base-content/40 font-mono truncate max-w-[24rem]" title="{{ p.file }}">{{ p.file }}</span>
                  {% if p.created_at %}<span class="text-xs text-base-content/30">{{ p.created_at }}</span>{% endif %}
                </div>
                {% if p.change %}
                <p class="text-sm text-base-content/70 mb-2">{{ p.change }}</p>
                {% endif %}
                {% if p.diff_preview %}
                <pre class="text-xs bg-base-200 rounded-lg p-2 overflow-x-auto leading-relaxed text-base-content/60 max-h-24">{{ p.diff_preview }}{% if p.diff_preview|length >= 300 %}…{% endif %}</pre>
                {% endif %}
              </div>
              <div class="flex flex-col gap-1.5 shrink-0">
                <button data-action="cognitive:applyProposal" data-id="{{ p.id }}" data-file="{{ p.file|e }}"
                  class="btn btn-xs btn-success btn-outline">Apply</button>
                <button data-action="cognitive:rejectProposal" data-id="{{ p.id }}"
                  class="btn btn-xs btn-ghost text-error">Reject</button>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body py-8 text-center">
          <p class="text-base-content/35 text-sm">No pending proposals</p>
          <p class="text-xs text-base-content/25 mt-1">The agent stores code change proposals here before they're reviewed.</p>
        </div>
      </div>
      {% endif %}
    </div>

    <!-- ── Behavioral Rules ───────────────────────────────────────── -->
    <div>
      <div class="flex items-center justify-between mb-3">
        <h2 class="font-semibold text-sm flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
          </svg>
          Behavioral Rules
          {% if behavioral_rule_count > 0 %}<span class="pill pill-sm pill-warning">{{ behavioral_rule_count }}</span>{% endif %}
        </h2>
        <p class="text-xs text-base-content/35">Learned from user corrections · injected into every prompt</p>
      </div>
      {% if behavioral_rules %}
      <div class="space-y-2">
        {% for rule in behavioral_rules %}
        <div class="card bg-base-100 shadow-sm border-l-4 wasp-accent
          {% if not rule.active %}opacity-50 border-base-300
          {% elif rule.rule_type == 'refusal' %}border-error
          {% elif rule.rule_type == 'hallucination' %}border-warning
          {% elif rule.rule_type == 'wrong_skill' %}border-info
          {% else %}border-secondary{% endif %}">
          <div class="card-body py-2.5 px-4">
            <div class="flex items-start justify-between gap-2 flex-wrap">
              <div class="flex items-center gap-1.5 flex-wrap">
                <span class="pill pill-sm
                  {% if rule.rule_type == 'refusal' %}pill-danger
                  {% elif rule.rule_type == 'hallucination' %}pill-warning
                  {% elif rule.rule_type == 'wrong_skill' %}pill-info
                  {% else %}pill-secondary{% endif %}">
                  {{ rule.rule_type | replace("_", " ") }}
                </span>
                {% if not rule.active %}<span class="pill pill-sm pill-ghost">inactive</span>{% endif %}
                {% if rule.skill_poison %}
                <span class="pill pill-sm pill-danger" title="Blocked trigger: {{ rule.skill_poison }}">
                  poison: {{ rule.skill_poison[:20] }}{% if rule.skill_poison|length > 20 %}…{% endif %}
                </span>
                {% endif %}
              </div>
              <div class="flex items-center gap-3 text-xs text-base-content/35 shrink-0">
                <span>{{ (rule.confidence * 100)|int }}% conf</span>
                <span>×{{ rule.times_applied }}</span>
                <span>{{ rule.created_at }}</span>
              </div>
            </div>
            <p class="text-sm text-base-content/75 mt-1.5 leading-relaxed">{{ rule.description }}</p>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body py-6 text-center">
          <p class="text-base-content/35 text-sm">No behavioral rules yet</p>
          <p class="text-xs text-base-content/25 mt-1">Created when the agent detects and processes user corrections.</p>
        </div>
      </div>
      {% endif %}
    </div>

    <!-- ── Learning Examples ──────────────────────────────────────── -->
    <div>
      <div class="flex items-center justify-between mb-3">
        <h2 class="font-semibold text-sm flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
          </svg>
          Learning Examples
          {% if learning_example_count > 0 %}<span class="pill pill-sm pill-success">{{ learning_example_count }}</span>{% endif %}
        </h2>
        <p class="text-xs text-base-content/35">Few-shot examples driving behavior · sorted by usage</p>
      </div>
      {% if learning_examples %}
      <div class="space-y-2">
        {% for ex in learning_examples %}
        <div class="card bg-base-100 shadow-sm wasp-accent border-l-4 {% if ex.outcome == 'positive' %}border-success/50{% else %}border-error/50{% endif %}">
          <div class="card-body py-2.5 px-4">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0 flex-1">
                <p class="text-sm text-base-content/80 leading-snug">{{ ex.user_input }}</p>
                {% if ex.skill_calls %}
                <p class="text-xs text-base-content/45 mt-1 font-mono truncate">→ {{ ex.skill_calls }}</p>
                {% endif %}
              </div>
              <div class="flex items-center gap-1.5 shrink-0">
                <span class="pill pill-sm {% if ex.outcome == 'positive' %}pill-success{% else %}pill-danger{% endif %}">
                  {{ ex.outcome }}
                </span>
                <span class="pill pill-sm pill-neutral">×{{ ex.use_count }}</span>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body py-6 text-center">
          <p class="text-base-content/35 text-sm">No learning examples yet</p>
          <p class="text-xs text-base-content/25 mt-1">Stored automatically from user feedback interactions.</p>
        </div>
      </div>
      {% endif %}
    </div>

  </div><!-- end pane-learning -->

</div>
{% endblock %}

{% block extra_scripts %}
<script nonce="{{ request.state.csp_nonce }}">
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '';

// ── Tab system ────────────────────────────────────────────────────────────
const TABS = ['self', 'epistemic', 'integrity', 'learning'];
function switchTab(name) {
  TABS.forEach(t => {
    const btn = document.getElementById('tab-' + t);
    const pane = document.getElementById('pane-' + t);
    if (btn) btn.classList.toggle('tab-active', t === name);
    if (pane) pane.classList.toggle('hidden', t !== name);
  });
  localStorage.setItem('cognitive-tab', name);
}
const savedTab = localStorage.getItem('cognitive-tab');
if (savedTab && TABS.includes(savedTab)) switchTab(savedTab);

// ── CPI auto-refresh every 30s ───────────────────────────────────────────
function updateCpi(cpi) {
  if (!cpi) return;
  const val = Math.round(cpi.cpi || 0);
  // Ring
  const ring = document.getElementById('cpi-ring');
  if (ring) {
    const dash = (val / 100 * 201.06).toFixed(1);
    ring.setAttribute('stroke-dasharray', dash + ' 201.06');
    ring.setAttribute('stroke',
      val >= 80 ? 'oklch(var(--wa))' :
      val >= 50 ? 'oklch(var(--in))' : 'oklch(var(--su))');
  }
  const pct = document.getElementById('cpi-pct');
  if (pct) {
    pct.textContent = val + '%';
    pct.className = 'text-lg font-bold tabular-nums leading-none ' +
      (val >= 80 ? 'text-warning' : val >= 50 ? 'text-info' : 'text-success');
  }
  const badge = document.getElementById('cpi-status-badge');
  if (badge) {
    if (cpi.high) {
      badge.innerHTML = '<span class="pill pill-sm pill-warning"><span class="pill-pulse"></span>HIGH LOAD</span>';
    } else if (val >= 50) {
      badge.innerHTML = '<span class="pill pill-sm pill-info">ELEVATED</span>';
    } else {
      badge.innerHTML = '<span class="pill pill-sm pill-success">NOMINAL</span>';
    }
  }
  const ts = document.getElementById('cpi-refresh-ts');
  if (ts) {
    const now = new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit', second:'2-digit'});
    ts.textContent = 'refreshed ' + now;
  }
}

function refreshCpi() {
  fetch('/cognitive/api/cpi')
    .then(r => r.json())
    .then(d => { if (d.ok) updateCpi(d.cpi); })
    .catch(() => {});
}
if (window._cogCpiInterval) clearInterval(window._cogCpiInterval);
window._cogCpiInterval = setInterval(refreshCpi, 30000);


// ── Proposal actions ──────────────────────────────────────────────────────
async function rejectProposal(id) {
  if (!await showConfirmModal({ title: 'Reject Proposal', message: 'Reject this proposal? It will be permanently removed.', confirmText: 'Reject', danger: true })) return;
  const r = await fetch(`/self-improve/api/${id}/reject`, {
    method: 'POST', headers: { 'X-CSRF-Token': CSRF }
  });
  const data = await r.json();
  if (data.ok) {
    document.getElementById('proposal-' + id)?.remove();
    showToast('Proposal rejected', 'success');
  } else {
    showToast(data.error || 'Failed', 'error');
  }
}

async function applyProposal(id, file) {
  if (!await showConfirmModal({ title: 'Apply Proposal', message: `Apply proposal to ${file}? This will overwrite the file. Restart agent-core to reload changes.`, confirmText: 'Apply', danger: true })) return;
  const r = await fetch(`/self-improve/api/${id}/apply`, {
    method: 'POST', headers: { 'X-CSRF-Token': CSRF }
  });
  const data = await r.json();
  if (data.ok) {
    document.getElementById('proposal-' + id)?.remove();
    showToast('Proposal applied — restart agent-core to reload', 'success');
  } else {
    showToast(data.error || 'Failed', 'error');
  }
}

// ── Reset epistemic ───────────────────────────────────────────────────────
async function resetEpistemic() {
  if (!await showConfirmModal({ title: 'Reset Epistemic State', message: 'Reset epistemic state to defaults?', confirmText: 'Reset', danger: true })) return;
  const r = await fetch('/cognitive/api/epistemic/reset', {
    method: 'POST', headers: { 'X-CSRF-Token': CSRF }
  });
  const data = await r.json();
  if (data.ok) {
    showToast('Epistemic state reset', 'success');
    setTimeout(() => location.reload(), 1200);
  } else {
    showToast(data.error || 'Error', 'error');
  }
}
// data-tab delegation (tab switching — kept separate from WaspActions)
if (!window._cogTabBound) {
  window._cogTabBound = true;
  document.addEventListener('click', function(e) {
    var tabBtn = e.target.closest('[data-tab]');
    if (tabBtn) { switchTab(tabBtn.getAttribute('data-tab')); }
  });
}
registerWaspActions('cognitive', {
  'applyProposal':  function(el) { applyProposal(el.dataset.id, el.dataset.file); },
  'rejectProposal': function(el) { rejectProposal(el.dataset.id); },
  'resetEpistemic': function()   { resetEpistemic(); },
});
</script>

{% endblock %}