{% extends "layouts/app.html" %}

{% block title %}Agent Harness - ClaudeSavvy{% endblock %}

{% block main_content %}
<div class="space-y-8">

    <!-- Page Header -->
    <div class="flex items-start justify-between flex-wrap gap-4">
        <div>
            <div class="flex items-center gap-2 mb-1.5">
                <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Harness · Overview</span>
            </div>
            <h1 class="text-3xl font-bold text-gray-900">Your Agent Harness</h1>
            <p class="mt-2 text-gray-500 max-w-2xl">
                Everything wired into Claude in this workspace — skills, sub-agents, MCP servers,
                plugins, hooks, and guidance — at each scope level.
            </p>
        </div>
        <div class="flex items-center gap-2 mt-1">
            <a href="/configuration"
               class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.7">
                    <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/>
                    <path d="M14 3v5h5M9 13h6M9 17h6"/>
                </svg>
                Full Config
            </a>
        </div>
    </div>

    <!-- Session Quality Evaluation (most actionable — first) -->
    <div class="space-y-4">
        <div class="flex flex-wrap items-center gap-3">
            <div>
                <h2 class="text-lg font-semibold text-gray-900">Session quality</h2>
                <p class="text-sm text-gray-500">How efficiently the harness ran your sessions — ranked by dollars wasted so you know what to tune first.</p>
            </div>
            <div class="ml-auto">
                {% with current_url='/api/harness/evaluation', target_id='harness-eval-content', default_period='7days', storage_key='harness_eval_period', filter_projects=harness_projects %}
                {% include "partials/time_filter.html" %}
                {% endwith %}
            </div>
        </div>
        <div id="harness-eval-content">
            {% include "partials/harness_evaluation.html" %}
        </div>
    </div>

    <!-- Summary KPI Row -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        {% set counts = [
            ('Skills',   harness_totals.skills,   harness_used.get('skills'),  '#2ec27e', '<path d="M12 2 14 8h6l-5 4 2 6-5-3.5L7 18l2-6-5-4h6Z"/>'),
            ('Sub-Agents', harness_totals.agents, harness_used.get('agents'),  '#0770E3', '<circle cx="12" cy="8" r="3.5"/><path d="M5 21a7 7 0 0 1 14 0"/>'),
            ('MCP Servers', harness_totals.mcps,  harness_used.get('mcps'),    '#8b5cf6', '<path d="M4 7v10l8 4 8-4V7l-8-4-8 4Z"/><path d="m4 7 8 4 8-4"/><path d="M12 11v10"/>'),
            ('Plugins',  harness_totals.plugins,  none, '#f59e0b', '<path d="M9 3v3H6a2 2 0 0 0-2 2v3h3a2 2 0 0 1 0 4H4v3a2 2 0 0 0 2 2h3v-3a2 2 0 0 1 4 0v3h3a2 2 0 0 0 2-2v-3h3a2 2 0 0 0 0-4h-3V8a2 2 0 0 0-2-2h-3V3"/>'),
            ('Hooks',    harness_totals.hooks,    none, '#ef4444', '<path d="M12 4v8a4 4 0 1 1-4 4"/><circle cx="12" cy="3.5" r="1.5"/>'),
            ('Commands', harness_totals.commands, none, '#6b7280', '<path d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/>'),
        ] %}
        {% for label, count, used, color, icon_path in counts %}
        <div class="bg-white rounded-xl border border-gray-200 p-4 flex flex-col gap-2">
            <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-gray-500">{{ label }}</span>
                <div class="w-7 h-7 rounded-lg flex items-center justify-center" style="background: {{ color }}18;">
                    <svg class="w-4 h-4" fill="none" stroke="{{ color }}" viewBox="0 0 24 24" stroke-width="1.7">{{ icon_path | safe }}</svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-gray-900">{{ count }}</div>
            {% if used is not none and count %}
            <div class="text-[10px] {{ 'text-emerald-600' if used else 'text-gray-400' }}"
                 title="Components with at least one invocation in the last 30 days">
                {{ used }} of {{ count }} used in 30d
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <!-- Scope Level Tabs -->
    <div x-data="{ activeScope: 'user' }">

        <!-- Tab Bar -->
        <div class="flex items-center gap-1 border-b border-gray-200 mb-6">
            {% for scope_key, scope_label, scope_desc in [
                ('user',    'User Level',    '~/.claude/'),
                ('project', 'Project Level', '.claude/ per repo'),
                ('plugin',  'Plugin Level',  'External plugins'),
            ] %}
            <button
                @click="activeScope = '{{ scope_key }}'"
                :class="activeScope === '{{ scope_key }}' ? 'border-[#0770E3] text-[#0770E3] font-semibold' : 'border-transparent text-gray-500 hover:text-gray-700'"
                class="px-5 py-3 text-sm border-b-2 transition-colors -mb-px focus:outline-none">
                {{ scope_label }}
                <span class="ml-1 text-xs font-mono text-gray-400">{{ scope_desc }}</span>
            </button>
            {% endfor %}
        </div>

        <!-- ── User Level ── -->
        <div x-show="activeScope === 'user'" x-transition>
            {% if user_repo %}
            <div class="space-y-6">
                <div class="flex items-center gap-3 px-4 py-3 bg-blue-50 border border-blue-100 rounded-xl">
                    <svg class="w-5 h-5 text-[#0770E3] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.7">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                        <polyline points="9,22 9,12 15,12 15,22"/>
                    </svg>
                    <div>
                        <span class="text-sm font-semibold text-blue-900">User configuration</span>
                        <span class="ml-2 text-xs text-blue-500 font-mono">{{ user_repo.path }}</span>
                    </div>
                    <a href="/configuration?repo={{ user_repo.path | urlencode }}" class="ml-auto text-xs text-[#0770E3] hover:underline font-medium">Edit →</a>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for category, items, color, icon_path in [
                        ('Skills',   user_features.skills,   '#2ec27e', '<path d="M12 2 14 8h6l-5 4 2 6-5-3.5L7 18l2-6-5-4h6Z"/>'),
                        ('MCPs',     user_features.mcps,     '#8b5cf6', '<path d="M4 7v10l8 4 8-4V7l-8-4-8 4Z"/><path d="m4 7 8 4 8-4"/><path d="M12 11v10"/>'),
                        ('Commands', user_features.commands, '#6b7280', '<path d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/>'),
                        ('Plugins',  user_features.plugins,  '#f59e0b', '<path d="M9 3v3H6a2 2 0 0 0-2 2v3h3a2 2 0 0 1 0 4H4v3a2 2 0 0 0 2 2h3v-3a2 2 0 0 1 4 0v3h3a2 2 0 0 0 2-2v-3h3a2 2 0 0 0 0-4h-3V8a2 2 0 0 0-2-2h-3V3"/>'),
                        ('Hooks',    user_features.hooks,    '#ef4444', '<path d="M12 4v8a4 4 0 1 1-4 4"/><circle cx="12" cy="3.5" r="1.5"/>'),
                        ('Agents',   user_features.agents,   '#0770E3', '<circle cx="12" cy="8" r="3.5"/><path d="M5 21a7 7 0 0 1 14 0"/>'),
                    ] %}
                    {% if items %}
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="flex items-center gap-2 px-4 py-3 border-b border-gray-100">
                            <div class="w-6 h-6 rounded-md flex items-center justify-center" style="background: {{ color }}18;">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="{{ color }}" viewBox="0 0 24 24" stroke-width="1.7">{{ icon_path | safe }}</svg>
                            </div>
                            <span class="text-sm font-semibold text-gray-800">{{ category }}</span>
                            <span class="ml-auto text-xs font-mono text-gray-400">{{ items | length }}</span>
                        </div>
                        <ul class="divide-y divide-gray-50">
                            {% for item in items[:5] %}
                            <li class="px-4 py-2.5 flex items-start gap-2">
                                <span class="w-1.5 h-1.5 rounded-full mt-1.5 shrink-0" style="background: {{ color }};"></span>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-1.5">
                                        <span class="text-xs font-semibold text-gray-800 truncate">{{ item.name }}</span>
                                        {% if item.used_count is defined %}
                                        {% if item.used_count %}
                                        <span class="text-[10px] font-medium text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded-full whitespace-nowrap shrink-0"
                                              title="Invoked {{ item.used_count }} time{{ 's' if item.used_count != 1 else '' }} in the last 30 days">{{ item.used_count }}× 30d</span>
                                        {% else %}
                                        <span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded-full whitespace-nowrap shrink-0"
                                              title="No invocations seen in the last 30 days">no use 30d</span>
                                        {% endif %}
                                        {% endif %}
                                    </div>
                                    {% if item.description %}
                                    <div class="text-xs text-gray-400 truncate">{{ item.description[:80] }}{% if item.description|length > 80 %}…{% endif %}</div>
                                    {% endif %}
                                </div>
                            </li>
                            {% endfor %}
                            {% if items | length > 5 %}
                            <li class="px-4 py-2 text-xs text-gray-400 text-center">+{{ items | length - 5 }} more</li>
                            {% endif %}
                        </ul>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="text-center py-16 text-gray-400">
                <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.3">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                </svg>
                <p class="text-sm">No user-level configuration found at <code class="bg-gray-100 px-1 rounded">~/.claude/</code></p>
            </div>
            {% endif %}
        </div>

        <!-- ── Project Level ── -->
        <div x-show="activeScope === 'project'" x-transition>
            {% if project_repos %}
            <div class="space-y-8">
                {% for repo in project_repos %}
                <div class="space-y-4">
                    <!-- Repo header -->
                    <div class="flex items-center gap-3 px-4 py-3 bg-green-50 border border-green-100 rounded-xl">
                        <svg class="w-5 h-5 text-green-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.7">
                            <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z"/>
                        </svg>
                        <div>
                            <span class="text-sm font-semibold text-green-900">{{ repo.name }}</span>
                            <span class="ml-2 text-xs text-green-500 font-mono">{{ repo.path }}</span>
                        </div>
                        <a href="/configuration?repo={{ repo.path | urlencode }}" class="ml-auto text-xs text-green-700 hover:underline font-medium">Edit →</a>
                    </div>

                    <!-- Feature cards for this repo -->
                    {% if repo.features %}
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pl-2">
                        {% for category, items, color, icon_path in [
                            ('Skills',   repo.features.skills,   '#2ec27e', '<path d="M12 2 14 8h6l-5 4 2 6-5-3.5L7 18l2-6-5-4h6Z"/>'),
                            ('MCPs',     repo.features.mcps,     '#8b5cf6', '<path d="M4 7v10l8 4 8-4V7l-8-4-8 4Z"/><path d="m4 7 8 4 8-4"/><path d="M12 11v10"/>'),
                            ('Commands', repo.features.commands, '#6b7280', '<path d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/>'),
                            ('Plugins',  repo.features.plugins,  '#f59e0b', '<path d="M9 3v3H6a2 2 0 0 0-2 2v3h3a2 2 0 0 1 0 4H4v3a2 2 0 0 0 2 2h3v-3a2 2 0 0 1 4 0v3h3a2 2 0 0 0 2-2v-3h3a2 2 0 0 0 0-4h-3V8a2 2 0 0 0-2-2h-3V3"/>'),
                            ('Hooks',    repo.features.hooks,    '#ef4444', '<path d="M12 4v8a4 4 0 1 1-4 4"/><circle cx="12" cy="3.5" r="1.5"/>'),
                            ('Agents',   repo.features.agents,   '#0770E3', '<circle cx="12" cy="8" r="3.5"/><path d="M5 21a7 7 0 0 1 14 0"/>'),
                        ] %}
                        {% if items %}
                        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                            <div class="flex items-center gap-2 px-4 py-3 border-b border-gray-100">
                                <div class="w-6 h-6 rounded-md flex items-center justify-center" style="background: {{ color }}18;">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="{{ color }}" viewBox="0 0 24 24" stroke-width="1.7">{{ icon_path | safe }}</svg>
                                </div>
                                <span class="text-sm font-semibold text-gray-800">{{ category }}</span>
                                <span class="ml-auto text-xs font-mono text-gray-400">{{ items | length }}</span>
                            </div>
                            <ul class="divide-y divide-gray-50">
                                {% for item in items[:6] %}
                                <li class="px-4 py-2.5 flex items-start gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full mt-1.5 shrink-0" style="background: {{ color }};"></span>
                                    <div class="min-w-0 flex-1">
                                        <div class="flex items-center gap-1.5">
                                            <span class="text-xs font-semibold text-gray-800 truncate">{{ item.name }}</span>
                                            {% if item.used_count is defined %}
                                            {% if item.used_count %}
                                            <span class="text-[10px] font-medium text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded-full whitespace-nowrap shrink-0"
                                                  title="Invoked {{ item.used_count }} time{{ 's' if item.used_count != 1 else '' }} in the last 30 days">{{ item.used_count }}× 30d</span>
                                            {% else %}
                                            <span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded-full whitespace-nowrap shrink-0"
                                                  title="No invocations seen in the last 30 days">no use 30d</span>
                                            {% endif %}
                                            {% endif %}
                                        </div>
                                        {% if item.description %}
                                        <div class="text-xs text-gray-400 truncate">{{ item.description[:80] }}{% if item.description|length > 80 %}…{% endif %}</div>
                                        {% endif %}
                                    </div>
                                </li>
                                {% endfor %}
                                {% if items | length > 6 %}
                                <li class="px-4 py-2 text-xs text-gray-400 text-center">+{{ items | length - 6 }} more</li>
                                {% endif %}
                            </ul>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-sm text-gray-400 pl-2">No configuration items found for this repository.</p>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-16 text-gray-400">
                <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.3">
                    <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z"/>
                </svg>
                <p class="text-sm">No project-level configurations found.</p>
            </div>
            {% endif %}
        </div>

        <!-- ── Plugin Level ── -->
        <div x-show="activeScope === 'plugin'" x-transition>
            {% set all_plugins = [] %}
            {% if user_features and user_features.plugins %}{% set _ = all_plugins.extend(user_features.plugins) %}{% endif %}
            {% for repo in project_repos %}
                {% if repo.features and repo.features.plugins %}{% set _ = all_plugins.extend(repo.features.plugins) %}{% endif %}
            {% endfor %}

            {% if all_plugins %}
            <div class="space-y-4">
                <p class="text-sm text-gray-500">Plugins extend Claude Code with additional capabilities and integrations.</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {% for plugin in all_plugins %}
                    <div class="bg-white rounded-xl border border-gray-200 p-5">
                        <div class="flex items-start gap-3">
                            <div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.7">
                                    <path d="M9 3v3H6a2 2 0 0 0-2 2v3h3a2 2 0 0 1 0 4H4v3a2 2 0 0 0 2 2h3v-3a2 2 0 0 1 4 0v3h3a2 2 0 0 0 2-2v-3h3a2 2 0 0 0 0-4h-3V8a2 2 0 0 0-2-2h-3V3"/>
                                </svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <h3 class="text-sm font-semibold text-gray-900">{{ plugin.name }}</h3>
                                    {% if plugin.scope %}
                                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-full
                                        {{ 'bg-blue-50 text-blue-600' if plugin.scope == 'user' else 'bg-green-50 text-green-600' }}">
                                        {{ plugin.scope }}
                                    </span>
                                    {% endif %}
                                </div>
                                {% if plugin.description %}
                                <p class="mt-1 text-xs text-gray-500">{{ plugin.description }}</p>
                                {% endif %}
                                {% if plugin.type %}
                                <div class="mt-2">
                                    <span class="text-[10px] font-mono bg-gray-100 text-gray-500 px-1.5 py-0.5 rounded">{{ plugin.type }}</span>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="text-center py-16 text-gray-400">
                <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.3">
                    <path d="M9 3v3H6a2 2 0 0 0-2 2v3h3a2 2 0 0 1 0 4H4v3a2 2 0 0 0 2 2h3v-3a2 2 0 0 1 4 0v3h3a2 2 0 0 0 2-2v-3h3a2 2 0 0 0 0-4h-3V8a2 2 0 0 0-2-2h-3V3"/>
                </svg>
                <p class="text-sm">No plugins configured. Plugins are discovered from your <code class="bg-gray-100 px-1 rounded">.claude/settings.json</code>.</p>
                <a href="https://github.com/anthropics/claude-code" target="_blank" class="mt-2 inline-block text-xs text-[#0770E3] hover:underline">
                    Learn about Claude Code plugins →
                </a>
            </div>
            {% endif %}
        </div>

    </div>

    <!-- Quick Links to Harness Sections -->
    <div>
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Drill into your harness</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {% for href, label, desc, color, icon_path in [
                ('/subagents',    'Sub-Agents',     'Agent exchanges & costs',           '#0770E3', '<circle cx="12" cy="8" r="3.5"/><path d="M5 21a7 7 0 0 1 14 0"/>'),
                ('/integrations', 'MCP Servers',    'Tool calls across servers',         '#8b5cf6', '<path d="M4 7v10l8 4 8-4V7l-8-4-8 4Z"/><path d="m4 7 8 4 8-4"/><path d="M12 11v10"/>'),
                ('/features',     'Tools & Features','Invocation counts & timing',       '#2ec27e', '<path d="M14.7 6.3a4 4 0 0 0-5.4 5.4l-6 6a1.4 1.4 0 0 0 2 2l6-6a4 4 0 0 0 5.4-5.4l-2.4 2.4-2-2 2.4-2.4Z"/>'),
                ('/configuration','Configuration',  'Skills, hooks, plugins & more',     '#f59e0b', '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M14 3v5h5M9 13h6M9 17h6"/>'),
            ] %}
            <a href="{{ href }}" class="bg-white rounded-xl border border-gray-200 p-5 hover:border-gray-300 hover:shadow-sm transition-all group">
                <div class="w-9 h-9 rounded-lg flex items-center justify-center mb-3" style="background: {{ color }}18;">
                    <svg class="w-5 h-5" fill="none" stroke="{{ color }}" viewBox="0 0 24 24" stroke-width="1.7">{{ icon_path | safe }}</svg>
                </div>
                <div class="text-sm font-semibold text-gray-900 group-hover:text-[#0770E3] transition-colors">{{ label }}</div>
                <div class="text-xs text-gray-400 mt-0.5">{{ desc }}</div>
            </a>
            {% endfor %}
        </div>
    </div>

</div>
{% endblock %}