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

<div class="mb-6 flex items-center justify-between">
  <div>
    <div class="text-xs text-gray-500 mb-1"><a href="/" class="hover:text-gray-700">← dashboard</a></div>
    <h1 class="text-2xl font-semibold">{{ project.project_key }}</h1>
    <div class="text-sm text-gray-600 mt-1 font-mono">{{ project.source_repo|replace("/Users/" ~ project.source_repo.split("/")[2], "~") if project.source_repo and project.source_repo.startswith("/Users/") else project.source_repo }}</div>
  </div>
  <div class="text-right space-y-1">
    <div><a href="/p/{{ project.project_key }}/metrics" class="text-sm text-blue-600 hover:underline">View metrics →</a></div>
    <div><a href="/p/{{ project.project_key }}/runs" class="text-sm text-blue-600 hover:underline">View curator runs →</a></div>
    <div><a href="/p/{{ project.project_key }}/thesis" class="text-sm text-blue-600 hover:underline">View thesis →</a></div>
    <div><a href="/p/{{ project.project_key }}/prune" class="text-sm text-blue-600 hover:underline">Prune skills →</a></div>
  </div>
</div>

{% include "_action_banner.html" %}

<div class="grid grid-cols-3 gap-4 mb-6">
  <div class="bg-white p-4 rounded-lg border border-gray-200">
    <div class="text-xs text-gray-500 uppercase tracking-wide">Skills</div>
    <div class="text-2xl font-bold">{{ skills|length }}</div>
  </div>
  <div class="bg-white p-4 rounded-lg border border-gray-200">
    <div class="text-xs text-gray-500 uppercase tracking-wide">Thesis days</div>
    <div class="text-2xl font-bold">{{ thesis_days|length }}</div>
  </div>
  <div class="bg-white p-4 rounded-lg border border-gray-200">
    <div class="text-xs text-gray-500 uppercase tracking-wide">Last analyst day</div>
    <div class="text-lg font-mono">{{ project.last_analyst_day or "·" }}</div>
  </div>
</div>

{# ─── Impact: per-project before/after ──────────────────────────────────
   Renders when curator has run at least once AND we have ≥3 sessions
   on each side of that date.  Otherwise the section explains why —
   never silently disappears.  All numbers are descriptive; the verdict
   line names the direction but does not claim causation.                #}
<section class="mb-6">
  <div class="flex items-baseline justify-between mb-3">
    <div>
      <h2 class="text-lg font-semibold">Impact</h2>
      <div class="text-xs text-gray-500 mt-0.5">
        Sessions before vs after curator first landed for this repo.
        Correlation only — not a controlled experiment.
      </div>
    </div>
    {% if impact.treatment_date %}
    <div class="text-xs text-gray-500 text-right">
      first curated <strong class="text-gray-700">{{ impact.days_since_treatment }}d ago</strong>
      <span class="font-mono ml-1">({{ impact.treatment_date }})</span>
    </div>
    {% endif %}
  </div>

  {% if impact.enough_data %}
  <div class="wm-card">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
      <div class="lg:col-span-2">
        <div class="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-2">
          Tool errors per session · 16 weeks
        </div>
        <div class="wm-chart" style="height: 180px;"
             data-wm-chart="area"
             data-color="hsl(0 84% 58%)" data-label="Errors / session" data-value-fmt="float"
             data-mark-date="{{ impact.treatment_bucket_date }}" data-mark-label="curator"
             data-points='{{ impact.weekly_series|tojson }}'></div>
      </div>
      <div>
        <div class="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-2">
          Before vs after curator
        </div>
        <table class="w-full text-sm tabular">
          <thead>
            <tr class="border-b border-gray-200 text-xs uppercase tracking-wide text-gray-500">
              <th class="text-left font-medium py-1.5"></th>
              <th class="text-right font-medium py-1.5">pre</th>
              <th class="text-right font-medium py-1.5">post</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b border-gray-100">
              <td class="py-1.5 text-gray-600">Sessions</td>
              <td class="py-1.5 text-right font-mono">{{ impact.pre.sessions_n }}</td>
              <td class="py-1.5 text-right font-mono font-semibold">{{ impact.post.sessions_n }}</td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="py-1.5 text-gray-600">Median tool errors</td>
              <td class="py-1.5 text-right font-mono">{{ '%.1f'|format(impact.pre.median_errors) }}</td>
              <td class="py-1.5 text-right font-mono font-semibold">{{ '%.1f'|format(impact.post.median_errors) }}</td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="py-1.5 text-gray-600">Median prompts</td>
              <td class="py-1.5 text-right font-mono">{{ '%.0f'|format(impact.pre.median_prompts) }}</td>
              <td class="py-1.5 text-right font-mono font-semibold">{{ '%.0f'|format(impact.post.median_prompts) }}</td>
            </tr>
            <tr>
              <td class="py-1.5 text-gray-600">Median cost</td>
              <td class="py-1.5 text-right font-mono">${{ '%.2f'|format(impact.pre.median_cost) }}</td>
              <td class="py-1.5 text-right font-mono font-semibold">${{ '%.2f'|format(impact.post.median_cost) }}</td>
            </tr>
          </tbody>
        </table>
        {% if impact.verdict %}
        <div class="text-xs text-gray-500 mt-3 italic">
          Direction: {{ impact.verdict }}.
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% else %}
  <div class="wm-card text-sm text-gray-600">
    <strong class="text-gray-800">Not enough data yet.</strong>
    {{ impact.verdict_reason }}
    {% if impact.treatment_date %}
    <div class="text-xs text-gray-500 mt-2">
      Keep using <code class="bg-gray-100 px-1 py-0.5 rounded">{{ project.project_key }}</code>;
      the comparison will fill in as more sessions land.
    </div>
    {% endif %}
  </div>
  {% endif %}
</section>

{% if subagent_metrics and subagent_metrics.has_data %}
<section class="bg-white rounded-lg border border-gray-200 mb-8 p-5">
  <div class="flex items-baseline justify-between mb-3">
    <h2 class="text-lg font-semibold">Subagent usage</h2>
    <div class="text-xs text-gray-500">
      {{ subagent_metrics.sessions }} session{{ "" if subagent_metrics.sessions == 1 else "s" }} ·
      ${{ '%.2f'|format(subagent_metrics.total_cost) }} total
    </div>
  </div>

  {% set share = subagent_metrics.cost_share_pct %}
  {% set share_label = '—' if share is none else ('%.0f'|format(share) + '%') %}
  {% if share is none %}
    {% set share_color = 'text-gray-500 bg-gray-100' %}
  {% elif share < 10 %}
    {% set share_color = 'text-red-700 bg-red-50' %}
  {% elif share < 30 %}
    {% set share_color = 'text-amber-700 bg-amber-50' %}
  {% else %}
    {% set share_color = 'text-green-700 bg-green-50' %}
  {% endif %}

  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
    <div class="border border-gray-200 rounded-md p-3">
      <div class="text-xs uppercase text-gray-500 mb-1">Main thread</div>
      <div class="text-2xl font-bold font-mono">${{ '%.2f'|format(subagent_metrics.main_cost) }}</div>
      <div class="text-xs text-gray-500 mt-1">
        {{ subagent_metrics.sessions - subagent_metrics.subagent_sessions }} session{{ "" if (subagent_metrics.sessions - subagent_metrics.subagent_sessions) == 1 else "s" }}
      </div>
    </div>
    <div class="border border-gray-200 rounded-md p-3">
      <div class="text-xs uppercase text-gray-500 mb-1">Subagents</div>
      <div class="text-2xl font-bold font-mono">${{ '%.2f'|format(subagent_metrics.sub_cost) }}</div>
      <div class="text-xs text-gray-500 mt-1">
        {{ subagent_metrics.subagent_sessions }} session{{ "" if subagent_metrics.subagent_sessions == 1 else "s" }}
      </div>
    </div>
    <div class="border border-gray-200 rounded-md p-3">
      <div class="text-xs uppercase text-gray-500 mb-1">Cost share</div>
      <div class="text-2xl font-bold font-mono">
        <span class="inline-block px-2 py-0.5 rounded {{ share_color }}">{{ share_label }}</span>
      </div>
      <div class="text-xs text-gray-500 mt-1">of project spend in subagents</div>
    </div>
  </div>

  {% if subagent_metrics.candidates %}
  <div class="mt-2">
    <div class="text-sm font-medium text-gray-700 mb-2">
      Top main sessions
      <span class="text-xs text-gray-500 font-normal">— delegation candidates, ordered by cost</span>
    </div>
    <table class="min-w-full text-sm">
      <thead class="text-xs uppercase text-gray-500 border-b border-gray-200">
        <tr>
          <th class="py-1.5 pr-3 text-left font-medium">session</th>
          <th class="py-1.5 pr-3 text-left font-medium">agent</th>
          <th class="py-1.5 pr-3 text-left font-medium">started</th>
          <th class="py-1.5 pr-3 text-right font-medium">cost</th>
          <th class="py-1.5 pr-3 text-right font-medium">tokens</th>
          <th class="py-1.5 pr-3 text-right font-medium">tools</th>
        </tr>
      </thead>
      <tbody>
        {% for c in subagent_metrics.candidates %}
        <tr class="border-b border-gray-100">
          <td class="py-1.5 pr-3 font-mono text-xs">{{ c.session_id[:12] }}</td>
          <td class="py-1.5 pr-3 text-gray-600">{{ c.agent }}</td>
          <td class="py-1.5 pr-3 text-gray-600 text-xs">{{ (c.started_at or '')[:10] }}</td>
          <td class="py-1.5 pr-3 text-right font-mono">${{ '%.2f'|format(c.cost_usd) }}</td>
          <td class="py-1.5 pr-3 text-right font-mono text-xs">
            {% if c.total_tokens >= 1000000 %}{{ '%.1f'|format(c.total_tokens / 1000000) }}M{% else %}{{ '%.0f'|format(c.total_tokens / 1000) }}k{% endif %}
          </td>
          <td class="py-1.5 pr-3 text-right font-mono">{{ '{:,}'.format(c.tool_use_count) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  {% if share is not none and share < 10 and subagent_metrics.total_cost >= 10 %}
  <div class="mt-4 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-3">
    Only {{ share_label }} of this project's spend goes through subagents.
    Large main-thread sessions like the ones above are the strongest candidates for delegating work,
    which lets the parent thread keep a smaller context window and routes routine search/read tasks
    to focused subagents.
  </div>
  {% endif %}
</section>
{% endif %}

{% if skills %}
<h2 class="text-lg font-semibold mb-3">Skills</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-8">
  {% for s in skills %}
  <a href="/p/{{ project.project_key }}/skills/{{ s.slug }}" class="skill-card block bg-white p-4 rounded-lg border border-gray-200 no-underline">
    <div class="font-medium text-blue-600 mb-1">{{ s.slug }}</div>
    <div class="text-xs text-gray-600 line-clamp-2 mb-2">{{ s.description }}</div>
    <div class="text-xs text-gray-500">{{ s.script_count }} script{{ "" if s.script_count == 1 else "s" }}</div>
  </a>
  {% endfor %}
</div>
{% endif %}

{% if claude_md %}
<h2 class="text-lg font-semibold mb-3">CLAUDE.md</h2>
<article class="bg-white border border-gray-200 rounded-lg markdown-body">
  {{ claude_md|safe }}
</article>
{% else %}
<div class="text-sm text-gray-500">No CLAUDE.md generated yet. Run <code>watchmen curate {{ project.project_key }}</code>.</div>
{% endif %}

{% endblock %}