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

<div class="mb-6">
  <div class="text-xs text-gray-500 mb-1">
    <a href="/p/{{ project.project_key }}" class="hover:text-gray-700">← {{ project.project_key }}</a>
  </div>
  <h1 class="text-2xl font-semibold">Efficiency metrics</h1>
  <div class="text-sm text-gray-600 mt-1">Daily rollups for the last 30 days. Suggestions + uptake start showing data once the plugin is installed and you submit prompts.</div>
</div>

<style>
  .stat-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; }
  .stat-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
  .stat-card .value { font-size: 22px; font-weight: 600; color: #111827; margin-top: 4px; }
  .stat-card .sub   { font-size: 12px; color: #6b7280; margin-top: 2px; }
  .stat-card .spark { margin-top: 8px; display: block; }
  table.daily { font-size: 13px; }
  table.daily th { text-align: right; padding: 6px 10px; font-weight: 500; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
  table.daily td { text-align: right; padding: 6px 10px; border-bottom: 1px solid #f3f4f6; font-variant-numeric: tabular-nums; }
  table.daily td.date { text-align: left; color: #374151; font-family: ui-monospace, "SF Mono", "Menlo", monospace; }
  table.daily tr.empty td { color: #9ca3af; }
</style>

<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
  <div class="stat-card">
    <div class="label">Sessions / 7d</div>
    <div class="value">{{ last7.sessions }}</div>
    <div class="sub">{{ last30.sessions }} in last 30d</div>
    <div class="spark wm-chart" style="height: 46px;" data-wm-chart="area"
         data-color="hsl(217, 91%, 60%)" data-label="Sessions" data-value-fmt="int"
         data-points='{{ sparks_data.sessions|tojson }}'></div>
  </div>
  <div class="stat-card">
    <div class="label">Prompts / 7d</div>
    <div class="value">{{ last7.prompts }}</div>
    <div class="sub">{{ "%.1f"|format(last7.prompts / last7.sessions if last7.sessions else 0) }} per session</div>
    <div class="spark wm-chart" style="height: 46px;" data-wm-chart="area"
         data-color="hsl(189, 94%, 43%)" data-label="Prompts" data-value-fmt="int"
         data-points='{{ sparks_data.prompts|tojson }}'></div>
  </div>
  <div class="stat-card">
    <div class="label">Tool errors / 7d</div>
    <div class="value">{{ last7.tool_errors }}</div>
    <div class="sub">{{ "%.2f"|format(last7.tool_errors / last7.sessions if last7.sessions else 0) }} per session</div>
    <div class="spark wm-chart" style="height: 46px;" data-wm-chart="area"
         data-color="hsl(0, 84%, 60%)" data-label="Errors" data-value-fmt="int"
         data-points='{{ sparks_data.tool_errors|tojson }}'></div>
  </div>
  <div class="stat-card">
    <div class="label">Cost / 7d</div>
    <div class="value">${{ "%.2f"|format(last7.cost_usd) }}</div>
    <div class="sub">${{ "%.2f"|format(last30.cost_usd) }} in last 30d</div>
    <div class="spark wm-chart" style="height: 46px;" data-wm-chart="area"
         data-color="hsl(25, 95%, 53%)" data-label="Cost" data-value-fmt="usd"
         data-points='{{ sparks_data.cost_usd|tojson }}'></div>
  </div>
  <div class="stat-card">
    <div class="label">Input tokens / 7d</div>
    <div class="value">{{ "{:,}".format(last7.input_tokens) }}</div>
    <div class="sub">{{ "{:,}".format(last7.cache_read_tokens) }} from cache</div>
    <div class="spark wm-chart" style="height: 46px;" data-wm-chart="area"
         data-color="hsl(189, 94%, 43%)" data-label="Input tokens" data-value-fmt="int"
         data-points='{{ sparks_data.input_tokens|tojson }}'></div>
  </div>
  <div class="stat-card">
    <div class="label">Output tokens / 7d</div>
    <div class="value">{{ "{:,}".format(last7.output_tokens) }}</div>
    <div class="sub">{{ "%.2f"|format(last7.output_tokens / last7.sessions if last7.sessions else 0) }}k per session avg</div>
    <div class="spark wm-chart" style="height: 46px;" data-wm-chart="area"
         data-color="hsl(142, 71%, 35%)" data-label="Output tokens" data-value-fmt="int"
         data-points='{{ sparks_data.output_tokens|tojson }}'></div>
  </div>
  <div class="stat-card">
    <div class="label">Skill suggestions / 7d</div>
    <div class="value">{{ last7.suggestions_fired }}</div>
    <div class="sub">
      {% if last7.suggestions_fired %}
        {{ last7.uptake }} taken ({{ "%.0f"|format(100 * last7.uptake / last7.suggestions_fired) }}% uptake)
      {% else %}
        no fires yet
      {% endif %}
    </div>
    <div class="spark wm-chart" style="height: 46px;" data-wm-chart="area"
         data-color="hsl(280, 70%, 60%)" data-label="Suggestions" data-value-fmt="int"
         data-points='{{ sparks_data.suggestions|tojson }}'></div>
  </div>
  <div class="stat-card">
    <div class="label">Cache hit ratio / 7d</div>
    {% set total_in = last7.input_tokens + last7.cache_creation_tokens + last7.cache_read_tokens %}
    <div class="value">{{ "%.0f"|format(100 * last7.cache_read_tokens / total_in if total_in else 0) }}%</div>
    <div class="sub">cache read / total input</div>
  </div>
</div>

<h2 class="text-lg font-semibold mb-3">When you work</h2>
<div class="grid grid-cols-1 lg:grid-cols-5 gap-4 mb-6">
  <div class="stat-card overflow-x-auto lg:col-span-2">
    <div class="label">Last 26 weeks</div>
    <div class="sub mb-2">Prompt activity per day</div>
    {% if streak.current or streak.longest %}
    <div class="flex flex-wrap gap-2 mb-3 text-xs">
      <span class="px-2 py-1 rounded-full bg-orange-100 text-orange-800 font-medium">
        🔥 {{ streak.current }}-day current streak
      </span>
      <span class="px-2 py-1 rounded-full bg-gray-100 text-gray-700">
        Longest: {{ streak.longest }} days{% if streak.longest_end %} <span class="text-gray-500">(ended {{ streak.longest_end }})</span>{% endif %}
      </span>
    </div>
    {% endif %}
    <div class="wm-chart" style="height: 180px;" data-wm-chart="calendar"
         data-points='{{ calendar_data|tojson }}'></div>
  </div>
  <div class="stat-card overflow-x-auto lg:col-span-3">
    <div class="label">Day × hour (last 90 days)</div>
    <div class="sub mb-2">
      {% if peaks %}
        Peak: <span class="font-semibold">{{ peaks[0] }} {{ peaks[1] }}</span> ({{ peaks[2] }} prompts)
      {% else %}
        not enough data yet
      {% endif %}
    </div>
    <div class="wm-chart" style="height: 200px;" data-wm-chart="hourdow"
         data-points='{{ hour_dow_data|tojson }}'></div>
  </div>
</div>

{% if tool_usage %}
<h2 class="text-lg font-semibold mb-3">Tool usage (last 30 days)</h2>
<div class="stat-card mb-6">
  {% set top_count = tool_usage[0].count %}
  <table class="w-full text-sm" style="font-variant-numeric: tabular-nums;">
    {% for t in tool_usage %}
    <tr class="border-b border-gray-100 last:border-b-0">
      <td class="py-1.5 pr-3 font-mono text-gray-700 whitespace-nowrap" style="width: 1%;">{{ t.tool }}</td>
      <td class="py-1.5">
        <div class="bg-gray-100 rounded-sm h-3 overflow-hidden relative">
          <div class="bg-blue-500 h-full absolute top-0 left-0" style="width: {{ (100 * t.count / top_count)|round(1) }}%;"></div>
          {% if t.errors %}
          <div class="bg-red-400 h-full absolute top-0" style="left: {{ (100 * (t.count - t.errors) / top_count)|round(1) }}%; width: {{ (100 * t.errors / top_count)|round(1) }}%;"></div>
          {% endif %}
        </div>
      </td>
      <td class="py-1.5 pl-3 text-right text-gray-700 whitespace-nowrap" style="width: 1%;">
        {{ "{:,}".format(t.count) }}
        {% if t.errors %}<span class="text-red-500 text-xs ml-1">{{ t.errors }} err</span>{% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endif %}

<h2 class="text-lg font-semibold mb-3">Daily breakdown</h2>
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
  <table class="daily min-w-full">
    <thead>
      <tr>
        <th class="text-left">Date</th>
        <th>Sessions</th>
        <th>Prompts</th>
        <th>Errors</th>
        <th>Input tok</th>
        <th>Output tok</th>
        <th>Cost</th>
        <th>Suggestions</th>
        <th>Uptake</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
      <tr class="{% if not r.sessions and not r.suggestions_fired %}empty{% endif %}">
        <td class="date">{{ r.date }}</td>
        <td>{{ r.sessions or "" }}</td>
        <td>{{ r.prompts or "" }}</td>
        <td>{{ r.tool_errors or "" }}</td>
        <td>{{ "{:,}".format(r.input_tokens) if r.input_tokens else "" }}</td>
        <td>{{ "{:,}".format(r.output_tokens) if r.output_tokens else "" }}</td>
        <td>{{ "${:.2f}".format(r.cost_usd) if r.cost_usd > 0 else "" }}</td>
        <td>{{ r.suggestions_fired or "" }}</td>
        <td>
          {% if r.suggestions_fired %}{{ r.uptake }}/{{ r.suggestions_fired }}{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="mt-4 text-xs text-gray-500">
  Cost estimates use public Anthropic list prices per million tokens. Cache reads price at ~10% of fresh input. Suggestion uptake counts a hit when /&lt;skill&gt; appears in the same session within an hour of the suggestion firing.
</div>

{% endblock %}