{% extends "base.html" %}
{% block title %}insights · watchmen{% endblock %}
{% block content %}

<style>
  /* `.stat-card` + `.adapter-pill` baseline live in base.html now. Only
     page-specific bits stay here. */
  .repo-row td { vertical-align: middle; }
  .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; margin-right: 4px; }
  .badge-curated { background: hsl(142 60% 94%); color: hsl(142 60% 26%); }
  .badge-candidate { background: hsl(45 90% 92%); color: hsl(35 70% 32%); }
  details summary { cursor: pointer; }
  .frust-sample { font-style: italic; color: hsl(var(--muted-foreground)); border-left: 2px solid hsl(var(--border)); padding-left: 10px; margin: 4px 0; font-size: 12px; }
  .digest-body { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 8px 24px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04); }
  .digest-body .markdown-body { background: transparent; padding: 16px 0; max-width: 100%; }
</style>

<div class="mb-6 flex items-end justify-between">
  <div>
    <h1 class="text-2xl font-semibold">Watchmen insights</h1>
    <div class="text-sm text-gray-600 mt-1">
      LLM-synthesized digest grounded in your corpus across Claude Code,
      Codex, and pi.dev. Cross-repo patterns, friction signals, untapped
      coverage. Complements Claude Code's
      <code class="bg-gray-100 px-1.5 py-0.5 rounded text-xs">/insights</code>
      single-agent view.
    </div>
    <div class="text-xs text-gray-500 mt-2">
      Looking for raw numbers? See
      <a href="/metrics" class="text-blue-600 font-medium hover:underline">↗ aggregated metrics</a>
      for sessions, cost, tool errors, per-agent breakdown.
    </div>
  </div>
  <div class="text-xs text-gray-500 text-right">
    <div>{{ n_projects }} repos · {{ curated_count }} curated · {{ total_sessions }} sessions</div>
    <div class="mt-1">
      <span class="font-semibold">{{ total_skills }}</span> approved skills
      {% if total_pending %}
        · <span class="text-amber-700 font-semibold">{{ total_pending }}</span> pending
      {% endif %}
    </div>
  </div>
</div>

<!-- Per-repo table ─────────────────────────────────────────────────── -->
<h2 class="text-lg font-semibold mb-3">Repos</h2>
<div class="wm-card wm-card-table mb-8 tabular">
  <table>
    <thead>
      <tr>
        <th class="px-4 py-2">Project</th>
        <th class="px-4 py-2">Skills</th>
        <th class="px-4 py-2">Pending</th>
        <th class="px-4 py-2">Sessions (30d)</th>
        <th class="px-4 py-2">Adapters</th>
        <th class="px-4 py-2">Tool errors</th>
        <th class="px-4 py-2">Frustration</th>
        <th class="px-4 py-2">Unanalyzed</th>
      </tr>
    </thead>
    <tbody>
    {% for r in repos %}
      <tr class="repo-row">
        <td>
          <a href="/p/{{ r.key }}" class="text-blue-600 font-medium">{{ r.key }}</a>
        </td>
        <td class="text-sm">
          {% if r.skills_n %}<span class="font-semibold">{{ r.skills_n }}</span>{% else %}<span class="text-gray-400">0</span>{% endif %}
        </td>
        <td class="text-sm">
          {% if r.pending_n %}<span class="text-amber-700 font-semibold">{{ r.pending_n }}</span>{% else %}<span class="text-gray-400">0</span>{% endif %}
        </td>
        <td>
          <div class="wm-chart spark" style="width: 140px; height: 32px;"
               data-wm-chart="area"
               data-color="hsl(217, 91%, 60%)" data-label="Sessions" data-value-fmt="int"
               data-points='{{ r.sess_spark_data|tojson }}'></div>
        </td>
        <td class="text-xs">
          {% for agent in ["claude_code", "codex", "pi"] %}
            {% if r.adapter.get(agent, 0) %}
              <span class="adapter-pill">{{ {"claude_code":"cc","codex":"cd","pi":"pi"}[agent] }}: {{ r.adapter[agent] }}</span>
            {% endif %}
          {% endfor %}
        </td>
        <td class="text-sm">
          {% if r.tool_errors %}<span class="text-red-700 font-semibold">{{ r.tool_errors }}</span>{% else %}<span class="text-gray-400">0</span>{% endif %}
        </td>
        <td class="text-sm">
          {% if r.frust_count %}<span class="text-amber-700 font-semibold">{{ r.frust_count }}</span>{% else %}<span class="text-gray-400">0</span>{% endif %}
        </td>
        <td class="text-sm">
          {% if r.pending_prompts %}<span class="text-gray-700">{{ r.pending_prompts }}</span>{% else %}<span class="text-gray-400">0</span>{% endif %}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

<!-- Friction signal charts ─────────────────────────────────────────── -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-8">
  <div class="wm-card">
    <div class="text-sm font-semibold mb-2 text-gray-800">Tool errors by repo</div>
    <div class="text-xs text-gray-500 mb-3">From <code>sessions.tool_error_count</code> in corpus.db.</div>
    {% if errors_chart_data %}
      <div class="wm-chart" style="height: 220px;"
           data-wm-chart="bar"
           data-color="hsl(0, 84%, 60%)"
           data-points='{{ errors_chart_data|tojson }}'></div>
    {% else %}
      <div class="text-sm text-gray-400">No tool errors recorded.</div>
    {% endif %}
  </div>
  <div class="wm-card">
    <div class="text-sm font-semibold mb-2 text-gray-800">Frustration markers by repo</div>
    <div class="text-xs text-gray-500 mb-3">Prompts matching <code>no wait / bruh / :( / wtf / nope / …</code></div>
    {% if frust_chart_data %}
      <div class="wm-chart" style="height: 220px;"
           data-wm-chart="bar"
           data-color="hsl(45, 93%, 47%)"
           data-points='{{ frust_chart_data|tojson }}'></div>
    {% else %}
      <div class="text-sm text-gray-400">No frustration markers detected.</div>
    {% endif %}
  </div>
</div>

<!-- Cross-repo patterns ────────────────────────────────────────────── -->
{% if cross %}
<h2 class="text-lg font-semibold mb-3">Cross-repo patterns</h2>
<div class="text-xs text-gray-500 mb-3">Candidate slugs that appear in two or more repos' <code>_candidates.json</code>. Curated in some, only proposed in others.</div>
<div class="wm-card wm-card-table mb-8">
  <table>
    <tbody>
    {% for slug, hits in cross[:12] %}
      <tr>
        <td class="font-mono text-sm font-semibold">{{ slug }}</td>
        <td class="text-sm">
          {% for key, status in hits %}
            {% if status == "curated" %}
              <span class="badge badge-curated">✓ {{ key }}</span>
            {% else %}
              <span class="badge badge-candidate">· {{ key }}</span>
            {% endif %}
          {% endfor %}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

<!-- Untapped corpora ───────────────────────────────────────────────── -->
{% if untapped %}
<h2 class="text-lg font-semibold mb-3">Untapped corpora</h2>
<div class="text-xs text-gray-500 mb-3">Tracked repos with captured sessions but zero curated skills yet.</div>
<div class="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-8">
  <ul class="space-y-1">
  {% for key, sess in untapped %}
    <li class="text-sm">
      <span class="font-semibold">{{ key }}</span>
      <span class="text-amber-700 ml-2">{{ sess }} sessions</span>
      <code class="ml-3 text-xs bg-amber-100 px-1.5 py-0.5 rounded">watchmen curate {{ key }}</code>
    </li>
  {% endfor %}
  </ul>
</div>
{% endif %}

<!-- Frustration samples per repo (collapsible) ─────────────────────── -->
{% set frust_repos = repos | selectattr("frust_samples") | list %}
{% if frust_repos %}
<details class="mb-8">
  <summary class="text-sm font-semibold text-gray-800 mb-2 cursor-pointer">Frustration samples (click to expand)</summary>
  <div class="wm-card mt-2">
    {% for r in frust_repos %}
      <div class="mb-3">
        <div class="text-sm font-semibold">{{ r.key }} <span class="text-gray-500 font-normal">({{ r.frust_count }} markers)</span></div>
        {% for s in r.frust_samples %}
          <div class="frust-sample">"{{ s }}"</div>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
</details>
{% endif %}

<!-- Hour-of-day heatmap ────────────────────────────────────────────── -->
<h2 class="text-lg font-semibold mb-3">Activity by hour & day-of-week</h2>
<div class="text-xs text-gray-500 mb-3">Last 90 days, every coding-agent session in your corpus.</div>
<div class="wm-card mb-8 overflow-x-auto">
  <div class="wm-chart" style="height: 200px;" data-wm-chart="hourdow"
       data-points='{{ hour_dow_data|tojson }}'></div>
</div>

<!-- Cross-agent narrative ──────────────────────────────────────────── -->
{% if cmp_narrative_html %}
<section class="wm-cmp mb-8">
  <div class="wm-cmp__header">
    <h2 class="wm-cmp__title">How you use each agent</h2>
    <div class="wm-cmp__sub">
      {% if cmp_narrative_meta and cmp_narrative_meta.generated_at %}
        Synthesized {{ cmp_narrative_meta.generated_at[:10] }}
        {% if cmp_narrative_meta.model %}with <code>{{ cmp_narrative_meta.model }}</code>{% endif %}
        · regenerate from the CLI with <code>watchmen insights --regenerate</code>
      {% endif %}
    </div>
  </div>
  <div class="wm-cmp__narrative markdown-body">
    {{ cmp_narrative_html|safe }}
  </div>
</section>
{% endif %}

<!-- Latest deep digest ─────────────────────────────────────────────── -->
{% if digest_html %}
<h2 class="text-lg font-semibold mb-3">◉ Deep digest</h2>
<div class="text-xs text-gray-500 mb-3">
  {% if digest_meta.get("generated_at") %}
    Generated {{ digest_meta["generated_at"] }} with <code>{{ digest_meta.get("model", "?") }}</code>
    · {{ digest_meta.get("repos_synthesized", "?") }} repos synthesized
  {% endif %}
  · regenerate from the CLI with <code>watchmen insights --regenerate</code>
</div>
<div class="digest-body">
  <div class="markdown-body">{{ digest_html|safe }}</div>
</div>
{% else %}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-6 text-sm text-gray-600 mb-8">
  No cached deep digest yet. Run <code class="bg-white px-1.5 py-0.5 rounded border">watchmen insights</code> from the CLI to generate one. It'll cache under <code>~/.watchmen/insights/</code> and appear here on next page load.
</div>
{% endif %}

{% endblock %}