{% extends "base.html" %}
{% set active_page = "about" %}

{% block title %}About — IETF Draft Analyzer{% endblock %}

{% block content %}
<div class="max-w-3xl">
    <h1 class="text-2xl font-bold text-white mb-6">About IETF Draft Analyzer</h1>

    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
        <h2 class="text-lg font-semibold text-white mb-3">What is this?</h2>
        <p class="text-sm text-slate-400 leading-relaxed mb-4">
            A tool for tracking, categorizing, rating, and mapping IETF Internet-Drafts
            focused on AI and agent-related topics. It uses Claude for analysis and rating,
            Ollama for embeddings, and SQLite for storage.
        </p>
        <p class="text-sm text-slate-400 leading-relaxed">
            The dashboard provides interactive visualizations of the draft landscape,
            including category breakdowns, rating distributions, author networks,
            extracted ideas, and gap analysis.
        </p>
    </div>

    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
        <h2 class="text-lg font-semibold text-white mb-3">Current Data</h2>
        <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <div class="text-slate-500">Total Drafts</div>
                <div class="text-xl font-bold text-blue-400">{{ stats.total_drafts }}</div>
            </div>
            <div>
                <div class="text-slate-500">Rated Drafts</div>
                <div class="text-xl font-bold text-green-400">{{ stats.rated_count }}</div>
            </div>
            <div>
                <div class="text-slate-500">Authors Tracked</div>
                <div class="text-xl font-bold text-purple-400">{{ stats.author_count }}</div>
            </div>
            <div>
                <div class="text-slate-500">Ideas Extracted</div>
                <div class="text-xl font-bold text-amber-400">{{ stats.idea_count }}</div>
            </div>
            <div>
                <div class="text-slate-500">Gaps Identified</div>
                <div class="text-xl font-bold text-red-400">{{ stats.gap_count }}</div>
            </div>
            <div>
                <div class="text-slate-500">API Tokens Used</div>
                <div class="text-xl font-bold text-slate-300">{{ "{:,}".format(stats.input_tokens + stats.output_tokens) }}</div>
            </div>
        </div>
    </div>

    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
        <h2 class="text-lg font-semibold text-white mb-3">Data Collection Methodology</h2>
        <p class="text-sm text-slate-400 leading-relaxed mb-4">
            Drafts are discovered by searching the
            <a href="https://datatracker.ietf.org" class="text-blue-400 hover:text-blue-300 transition">IETF Datatracker API</a>
            for documents whose abstract contains any of the following keywords.
            Only drafts submitted since <span class="text-slate-200 font-medium">{{ fetch_since }}</span> are included.
        </p>

        <h3 class="text-sm font-semibold text-slate-300 mb-2">Search Keywords</h3>
        <div class="flex flex-wrap gap-2 mb-4">
            {% for kw in search_keywords %}
            <span class="px-2.5 py-1 bg-blue-500/10 text-blue-400 border border-blue-500/20 rounded-md text-xs font-mono">{{ kw }}</span>
            {% endfor %}
        </div>

        <h3 class="text-sm font-semibold text-slate-300 mb-2">Analysis Pipeline</h3>
        <div class="text-sm text-slate-400 leading-relaxed space-y-2">
            <p><span class="text-slate-200 font-medium">1. Fetch</span> — Query Datatracker API for each keyword, deduplicate by draft name, download full text.</p>
            <p><span class="text-slate-200 font-medium">2. Rate</span> — Claude rates each draft on 5 dimensions (novelty, maturity, overlap, momentum, relevance) from 1–5, with per-dimension explanations.</p>
            <p><span class="text-slate-200 font-medium">3. Categorize</span> — Claude assigns one or more topic categories (e.g., "A2A protocols", "Agent identity/auth").</p>
            <p><span class="text-slate-200 font-medium">4. Extract Ideas</span> — Claude extracts distinct technical ideas from each draft, with novelty scores.</p>
            <p><span class="text-slate-200 font-medium">5. Embed</span> — Ollama generates vector embeddings for similarity analysis and clustering.</p>
            <p><span class="text-slate-200 font-medium">6. Author Network</span> — Author and affiliation data fetched from Datatracker to build collaboration graphs.</p>
            <p><span class="text-slate-200 font-medium">7. Gap Analysis</span> — Claude identifies areas where no existing draft adequately addresses a need.</p>
        </div>

        <div class="mt-4 p-3 bg-slate-800/50 rounded-lg border border-slate-700/50">
            <p class="text-xs text-slate-500">
                <span class="text-amber-400/70 font-semibold">Note on keyword selection:</span>
                Keywords determine which drafts are included. Broad terms like "agent" and "autonomous" cast a wide net
                (catching some tangentially related drafts), while specific terms like "ai-agent" and "agentic" target
                the core AI agent space. The false-positive flag in ratings helps filter out irrelevant matches.
                Suggestions for additional keywords are welcome.
            </p>
        </div>
    </div>

    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
        <h2 class="text-lg font-semibold text-white mb-3">Scoring Methodology</h2>
        <div class="text-sm text-slate-400 leading-relaxed space-y-3">
            <p>Each draft is rated by Claude AI on five dimensions, scored from 1 (lowest) to 5 (highest):</p>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-slate-700 text-left text-xs text-slate-500">
                            <th class="py-2 pr-4 font-medium">Dimension</th>
                            <th class="py-2 font-medium">What it measures</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/50">
                        <tr><td class="py-2 pr-4 text-slate-300 font-medium">Novelty</td><td class="py-2">Originality of contribution. Does it introduce genuinely new ideas?</td></tr>
                        <tr><td class="py-2 pr-4 text-slate-300 font-medium">Maturity</td><td class="py-2">Completeness of the specification. Ready for implementation?</td></tr>
                        <tr><td class="py-2 pr-4 text-slate-300 font-medium">Overlap</td><td class="py-2">Duplication with other drafts. High = redundant. <em>Inverted in composite score.</em></td></tr>
                        <tr><td class="py-2 pr-4 text-slate-300 font-medium">Momentum</td><td class="py-2">Activity level. Revisions, WG adoption, multi-org authorship.</td></tr>
                        <tr><td class="py-2 pr-4 text-slate-300 font-medium">Relevance</td><td class="py-2">How directly related to AI agent infrastructure.</td></tr>
                    </tbody>
                </table>
            </div>
            <p class="mt-2">
                <span class="text-slate-200 font-medium">Composite score</span> = (novelty + maturity + (5 - overlap) + momentum + relevance) / 5.
                Overlap is inverted so lower overlap contributes positively.
            </p>
        </div>
    </div>

    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
        <h2 class="text-lg font-semibold text-white mb-3">Tech Stack</h2>
        <ul class="text-sm text-slate-400 space-y-2">
            <li><span class="text-slate-200 font-medium">Analysis:</span> Claude (Sonnet for analysis, Haiku for bulk)</li>
            <li><span class="text-slate-200 font-medium">Embeddings:</span> Ollama (nomic-embed-text)</li>
            <li><span class="text-slate-200 font-medium">Storage:</span> SQLite with FTS5 full-text search</li>
            <li><span class="text-slate-200 font-medium">Dashboard:</span> Flask, Tailwind CSS, Plotly.js</li>
            <li><span class="text-slate-200 font-medium">Data source:</span> IETF Datatracker API</li>
        </ul>
    </div>
</div>
{% endblock %}