{% extends "_layout.html" %}
{% set active = "skills" %}
{% block title %}Skills{% endblock %}

{% block main %}
<header class="page-header">
  <div>
    <h1 class="page-header__title">Skills</h1>
    <p class="page-header__subtitle">
      Distilled procedures the agent re-applies. Promote a candidate when its
      Bayesian fitness is high enough; retire one when it consistently fails.
    </p>
  </div>
  <div class="page-header__actions">
    <a class="btn btn--ghost btn--sm" href="/lineage">View lineage graph</a>
    <a class="btn btn--ghost btn--sm" href="/episodes">Browse episodes</a>
  </div>
</header>

<section class="grid-tiles" aria-label="Skill totals">
  <div class="kpi kpi--success">
    <span class="kpi__label">Promoted</span>
    <span class="kpi__value">{{ kpi.promoted }}</span>
    <span class="kpi__sub">of {{ kpi.total }} total</span>
  </div>
  <div class="kpi kpi--warning">
    <span class="kpi__label">Candidate</span>
    <span class="kpi__value">{{ kpi.candidate }}</span>
    <span class="kpi__sub">awaiting evidence</span>
  </div>
  <div class="kpi kpi--info">
    <span class="kpi__label">Compiled macros</span>
    <span class="kpi__value">{{ kpi.compiled }}</span>
    <span class="kpi__sub">zero-LLM execution path</span>
  </div>
  <div class="kpi">
    <span class="kpi__label">Counterfactual</span>
    <span class="kpi__value">{{ kpi.counterfactual }}</span>
    <span class="kpi__sub">REM-generated alternatives</span>
  </div>
</section>

<div class="skills-toolbar" role="search">
  <input id="skillSearch" type="search" class="input"
         placeholder="Filter by name, trigger, or id…"
         aria-label="Filter skills">
  <div class="filter-pills" role="tablist" aria-label="Filter by status">
    <button class="filter-pill is-active" data-filter="all" type="button"
            role="tab" aria-selected="true">All</button>
    <button class="filter-pill" data-filter="promoted" type="button"
            role="tab" aria-selected="false">Promoted</button>
    <button class="filter-pill" data-filter="candidate" type="button"
            role="tab" aria-selected="false">Candidate</button>
    <button class="filter-pill" data-filter="retired" type="button"
            role="tab" aria-selected="false">Retired</button>
    <button class="filter-pill" data-filter="compiled" type="button"
            role="tab" aria-selected="false">Compiled</button>
  </div>
  <span class="spacer"></span>
  <span class="text-xs text-muted" id="skillCount">{{ skills|length }} skills</span>
</div>

{% if skills %}
<section class="skills-grid" id="skillsGrid">
  {% for s in skills %}
  {% set bar_class = 'bar--success' if s.fitness_mean >= 0.7
                     else ('bar--warning' if s.fitness_mean >= 0.4 else 'bar--danger') %}
  <article class="skill-card"
           data-status="{{ s.status }}"
           data-compiled="{{ '1' if s.compiled_macro else '0' }}"
           data-search="{{ (s.name ~ ' ' ~ s.trigger ~ ' ' ~ s.id)|lower }}">
    <header class="skill-card__head">
      <h2 class="skill-card__name">
        <a href="/skills/{{ s.id }}">{{ s.name }}</a>
      </h2>
      <span class="skill-card__id" title="Skill id">{{ s.id[:8] }}</span>
    </header>

    <div class="skill-card__chips">
      <span class="chip chip--stage-{{ s.stage|lower }}" title="Sleep stage of origin">
        {{ s.stage }}
      </span>
      <span class="chip chip--status-{{ s.status }}" title="Lifecycle status">
        {{ s.status }}
      </span>
      {% if s.compiled_macro %}
      <span class="chip chip--ico-compiled"
            title="Compiled macro: {{ s.compiled_macro.steps|length }} steps. Bypasses the LLM at wake time.">
        compiled · {{ s.compiled_macro.steps|length }}
      </span>
      {% endif %}
      {% if s.is_counterfactual %}
      <span class="chip chip--ico-cf"
            title="Generated by counterfactual REM from a parent skill">
        counterfactual
      </span>
      {% endif %}
      {% if s.learned_embedding is not none %}
      <span class="chip chip--ico-learned"
            title="Trigger embedding has been Hebbian-updated by past successes">
        Hebbian
      </span>
      {% endif %}
    </div>

    <dl class="skill-card__meta">
      <dt>Trials</dt>
      <dd>{{ s.successes }} <span class="text-dim">/</span> {{ s.trials }}</dd>
      <dt>Stage</dt>
      <dd class="text-mono">{{ s.stage }}</dd>
    </dl>

    <div class="skill-card__fitness">
      <div class="skill-card__fitness-label">
        <span>Bayesian fitness</span>
        <span class="value">{{ "%.2f"|format(s.fitness_mean) }}</span>
      </div>
      <div class="bar {{ bar_class }}" role="progressbar"
           aria-valuenow="{{ (s.fitness_mean * 100)|int }}"
           aria-valuemin="0" aria-valuemax="100"
           aria-label="Fitness {{ '%.2f'|format(s.fitness_mean) }} of 1.0">
        <div class="bar__fill" style="width: {{ (s.fitness_mean * 100)|int }}%"></div>
      </div>
    </div>

    <div class="skill-card__actions">
      <a class="btn btn--ghost btn--sm" href="/skills/{{ s.id }}">Details</a>
      {% if s.status != 'promoted' %}
      <button class="btn btn--success btn--sm js-promote"
              data-id="{{ s.id }}" type="button"
              aria-label="Promote skill {{ s.name }}">Promote</button>
      {% endif %}
      {% if s.status != 'retired' %}
      <button class="btn btn--danger btn--sm js-retire"
              data-id="{{ s.id }}" type="button"
              aria-label="Retire skill {{ s.name }}">Retire</button>
      {% endif %}
    </div>
  </article>
  {% endfor %}
</section>
{% else %}
<div class="empty card">
  <h2 class="empty__title">No skills yet</h2>
  <p class="empty__hint">
    Run a few tasks in the chat, then trigger a sleep cycle to consolidate
    them into reusable skills.
  </p>
  <div class="page-header__actions" style="justify-content: center;">
    <a class="btn btn--primary" href="/chat">Open Chat</a>
    <a class="btn btn--ghost" href="/active-memory">Learn how it works</a>
  </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script src="/assets/skills.js" defer></script>
{% endblock %}