{% extends "base.html" %}
{% block title %}Skills{% endblock %}

{% block topbar_main %}
<h1>Skills</h1>
<span class="sub">What your agents load, and where it comes from</span>
{% endblock %}

{% block topbar_actions %}
<form method="get" action="/skills" class="listctl">
  <label class="sr-only" for="skscope">Scope</label>
  <select class="btn btn-sm" id="skscope" name="scope" onchange="this.form.requestSubmit()">
    <option value="" {% if not scope %}selected{% endif %}>Every scope</option>
    <option value="project" {% if scope == 'project' %}selected{% endif %}>This project</option>
    <option value="user" {% if scope == 'user' %}selected{% endif %}>Yours</option>
    <option value="plugin" {% if scope == 'plugin' %}selected{% endif %}>Plugins</option>
  </select>
  {% if shadowed %}<input type="hidden" name="shadowed" value="1">{% endif %}
</form>
<a class="btn btn-sm" href="/skills?scope={{ scope }}{% if not shadowed %}&shadowed=1{% endif %}">
  {% if shadowed %}Hide shadowed{% else %}Show shadowed{% endif %}</a>
<a class="btn btn-sm" href="/skills/proposals">Proposals</a>
{% endblock %}

{% block content %}
<div class="pane">

  {% if said %}
  <div class="notice good" style="margin-bottom:14px">{{ said }}</div>
  {% endif %}

  {% if report.summary.defects %}
  <div class="notice bad" style="margin-bottom:14px">
    {{ report.summary.defects }} defect{{ '' if report.summary.defects == 1 else 's' }}
    found. Nothing is broken on its own, but an agent may be loading a copy
    you did not mean it to. The list is at the foot of this page.
  </div>
  {% endif %}

  <div class="stat-grid">
    <div class="stat"><div class="v tnum">{{ report.summary.effective }}</div>
      <div class="k">In effect</div></div>
    <div class="stat"><div class="v tnum">{{ report.summary.shadowed }}</div>
      <div class="k">Shadowed</div></div>
    <div class="stat"><div class="v tnum">{{ report.summary.by_scope.plugin }}</div>
      <div class="k">From plugins</div></div>
    <div class="stat"><div class="v tnum">{{ report.summary.defects }}</div>
      <div class="k">Defects</div></div>
  </div>

  {% if rows %}
  <div class="card" data-listgroup>
    <div class="card-head">
      {% if scope %}{{ scope }} skills{% else %}Skills{% endif %}
      <span class="note">{{ rows | length }} of {{ report.summary.packages }}</span>
    </div>
    <div class="grid-row grid-head cols-skills">
      <span>Skill</span><span>Scope</span><span>From</span>
      <span>Description</span><span>Files</span>
    </div>
    {% for row in rows %}
    <div class="grid-row cols-skills" data-list-item>
      <span>{{ row.name }}
        {% if not row.effective %}<span class="pill pill-quiet">shadowed</span>{% endif %}
        <span class="path">{{ row.directory }}</span></span>
      <span class="muted">{{ row.scope }}</span>
      <span class="muted">{{ row.plugin or row.scope }}</span>
      <span class="hint clamp2">{{ row.description or '—' }}</span>
      <span class="when tnum">{{ row.file_count }} files</span>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="card card-pad card-prose">
    <h2 class="card-title">Nothing found</h2>
    <p>No skill package matched. A skill is a directory holding a
      <code>SKILL.md</code>, under <code>.claude/skills</code> in a project,
      in your home directory, or inside an installed plugin.</p>
    <p>Flanner reads those directories and never writes to them. Nothing in a
      package is executed by a scan.</p>
  </div>
  {% endif %}

  {% set scope_row = (observe.scopes | selectattr('observing') | list | first)
                     or (observe.scopes | list | first) %}
  <div class="card card-pad" style="margin-top:14px">
    <div class="card-head" style="padding:0 0 10px 0">Watching skill use
      <span class="note">{% if scope_row and scope_row.observing %}on{% else %}off{% endif %}</span>
    </div>
    <p class="hint">Records that a named skill was invoked, when, and by which
      local session. Not your prompts, not the agent's replies. Nothing leaves
      this machine. Only explicit invocations are visible: Claude Code shows
      every skill's description to the model without reporting it, so reads
      are unknown rather than zero.</p>
    <div class="listctl" style="margin-top:10px">
      {% if scope_row and scope_row.observing %}
      <form method="post" action="/skills/observe">
        <input type="hidden" name="action" value="disable">
        <button class="btn btn-sm">Stop watching</button>
      </form>
      <form method="post" action="/skills/purge">
        <input type="hidden" name="scope" value="project">
        <button class="btn btn-sm">Delete what was recorded</button>
      </form>
      <span class="hint">Keeping {{ scope_row.retention_days }} days ·
        {{ scope_row.observations }} recorded
        {%- if scope_row.dropped %} · {{ scope_row.dropped }} dropped{% endif %}</span>
      {% else %}
      <form method="post" action="/skills/observe">
        <input type="hidden" name="action" value="enable">
        <input type="hidden" name="retention_days" value="30">
        <button class="btn btn-sm btn-primary">Start watching this project</button>
      </form>
      <span class="hint">Off. Nothing is being recorded.</span>
      {% endif %}
    </div>
  </div>

  <div class="card" style="margin-top:14px">
    <div class="card-head">Used in the last {{ usage.window_days }} days
      <span class="note">
        {% if usage.coverage.watching %}{{ usage.rows | length }} skill(s)
        {% else %}nothing was watching{% endif %}</span></div>
    {% if usage.rows %}
    <div class="grid-row grid-head cols-usage">
      <span>Skill</span><span>Uses</span><span>Last used</span><span>Models</span>
    </div>
    {% for row in usage.rows %}
    <div class="grid-row cols-usage">
      <span>{{ row.skill }}</span>
      <span class="tnum">{{ row.invocations }}{% if row.attributed < row.invocations %}
        <span class="hint">{{ row.invocations - row.attributed }} unversioned</span>{% endif %}</span>
      <span class="when">{{ row.last_used_at[:16].replace('T', ' ') }}</span>
      <span class="muted">{% for k, v in row.by_model.items() %}{{ k }} ({{ v }}){% if not loop.last %}, {% endif %}{% endfor %}</span>
    </div>
    {% endfor %}
    {% else %}
    <div class="card-pad card-prose">
      <p>{% if usage.coverage.watching %}Nothing was invoked in this window.
        {% else %}Nothing has been watching, so a zero here means nothing
        rather than "unused".{% endif %}</p>
    </div>
    {% endif %}
    {# The coverage, spelled out. A closed window still counts as coverage —
       correctly, something was watching for part of the period — but a
       reader seeing "nothing was invoked" while the switch reads off needs
       telling which of those two facts they are looking at. #}
    <div class="card-pad" style="padding-top:0">
      <p class="hint">
        {% if usage.coverage.watching %}
          Watched during {{ usage.coverage.windows }}
          period{{ '' if usage.coverage.windows == 1 else 's' }} of these
          {{ usage.window_days }} days{% if not (scope_row and scope_row.observing) %},
          and not watching now{% endif %}.
        {% else %}
          Nothing watched any part of these {{ usage.window_days }} days.
        {% endif %}
        {% if usage.coverage.dropped %}
          {{ usage.coverage.dropped }} event(s) arrived and could not be stored,
          so the counts are short by at least that.
        {% endif %}
      </p>
    </div>
  </div>

  <div class="card" style="margin-top:14px">
    <div class="card-head">Versions flanner is holding
      <span class="note">{{ stored | length }} stored ·
        {{ installs | length }} install(s)</span></div>
    {% if installs %}
    <div class="grid-row grid-head cols-installs">
      <span>Installed</span><span>Where</span><span>State</span><span></span>
    </div>
    {% for row in installs %}
    <div class="grid-row cols-installs">
      <span class="when">{{ row.installed_at[:16].replace('T', ' ') }}</span>
      <span>{{ row.name }}
        <span class="path">{{ row.manifest_hash[:23] }}…</span></span>
      <span>{% if row.intact %}<span class="pill pill-fresh">intact</span>
        {% elif row.status == 'installed' %}<span class="pill pill-aging">edited since</span>
        {% else %}<span class="pill pill-quiet">{{ row.status }}</span>{% endif %}</span>
      <span>{% if row.replaced_hash and row.status == 'installed' %}
        <form method="post" action="/skills/rollback">
          <input type="hidden" name="installation_id" value="{{ row.id }}">
          <button class="btn btn-sm">Roll back</button>
        </form>{% endif %}</span>
    </div>
    {% endfor %}
    {% else %}
    <div class="card-pad card-prose">
      <p>Nothing installed by flanner. Skills stay where their owner put
        them; <code>flanner skills adopt &lt;name&gt;</code> keeps a copy
        flanner can put back.</p>
    </div>
    {% endif %}
  </div>

  <div class="card" style="margin-top:14px">
    <div class="card-head">From your team
      <span class="note">{{ transfers | length }} arrived ·
        {{ channels | selectattr('subscribed') | list | length }} followed</span></div>
    {% if transfers %}
    <div class="grid-row grid-head cols-transfers">
      <span>Skill</span><span>State</span><span>From</span><span>How</span><span></span>
    </div>
    {% for row in transfers %}
    <div class="grid-row cols-transfers">
      <span>{{ row.skill }}{% if row.detail and row.state == 'rejected' %}
        <span class="hint">{{ row.detail }}</span>{% endif %}</span>
      <span>{% if row.state == 'installed' %}<span class="pill pill-fresh">installed</span>
        {% elif row.state == 'verified' %}<span class="pill pill-quiet">verified, not installed</span>
        {% elif row.state == 'rejected' %}<span class="pill pill-stale">rejected</span>
        {% else %}<span class="pill pill-aging">{{ row.state }}</span>{% endif %}</span>
      <span class="path">{{ row.from_device[:12] or '-' }}</span>
      <span class="muted">{% if row.pinned %}a one-time copy{% else %}channel {{ row.channel }}{% endif %}</span>
      <span>{% if row.state == 'verified' %}
        <form method="post" action="/skills/import">
          <input type="hidden" name="transfer_id" value="{{ row.id }}">
          <button class="btn btn-sm btn-primary">Install</button>
        </form>{% endif %}</span>
    </div>
    {% endfor %}
    {% else %}
    <div class="card-pad card-prose">
      <p>Nothing has arrived. A package a teammate sends shows up here and
        waits: receiving one is not installing it.</p>
    </div>
    {% endif %}

    {% if channels %}
    <div class="card-pad">
      {% for row in channels %}
      <form method="post" action="/skills/channel" class="listctl" style="margin-bottom:6px">
        <input type="hidden" name="name" value="{{ row.name }}">
        <input type="hidden" name="action" value="{{ 'unsubscribe' if row.subscribed else 'subscribe' }}">
        <span>{{ row.name }}</span>
        <span class="muted">{% if row.subscribed %}following{% else %}not following{% endif %}</span>
        <button class="btn btn-sm">{{ 'Stop following' if row.subscribed else 'Follow' }}</button>
      </form>
      {% endfor %}
      <p class="hint">Following tells you about a new version. It never
        installs one: that would hand whoever publishes it control of what
        your agent reads.</p>
    </div>
    {% endif %}
  </div>

  {% if report.findings %}
  <div class="card" style="margin-top:14px">
    <div class="card-head">What is wrong
      <span class="note">{{ report.summary.defects }}
        defect{{ '' if report.summary.defects == 1 else 's' }},
        {{ report.summary.advice }} advisory</span></div>
    <div class="grid-row grid-head cols-findings">
      <span>Finding</span><span>Skill</span><span>What to do</span>
    </div>
    {% for f in report.findings %}
    <div class="grid-row cols-findings">
      <span><span class="pill pill-{{ 'stale' if f.severity == 'defect' else 'aging' }}">{{ f.code }}</span></span>
      <span>{{ f.skill }}<span class="hint">{{ f.detail }}</span></span>
      <span class="hint">{{ f.remedy }}</span>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <div class="card card-pad card-prose" style="margin-top:14px">
    <h2 class="card-title">Where this was read from</h2>
    <ul>
      {% for r in report.coverage.roots %}
      <li><code>{{ r.path }}</code>
        <span class="muted">{{ r.scope }}{% if r.revision %} · {{ r.revision }}{% endif %}</span>
        {% if not r.exists %}<span class="pill pill-quiet">not there</span>{% endif %}
        {% if not r.active %}<span class="pill pill-quiet">not the installed revision</span>{% endif %}
      </li>
      {% endfor %}
    </ul>
    {% for note in report.coverage.notes %}
    <p class="muted">{{ note }}</p>
    {% endfor %}
  </div>

</div>
{% endblock %}