{% extends "base.html" %}

{% block title %}Agent skills - Memorizz{% endblock %}

{% block head %}<link rel="stylesheet" href="/static/css/pages/vercel_skills.css?v=7">
<script src="/static/js/catalog.js?v=2" defer></script>{% endblock %}

{% block content %}
{% from '_ui.html' import page_header, empty_state %}
{{ page_header('Agent skills', 'Search the open skills directory (skills.sh) or fetch a skill from a GitHub repository, read its instructions, and attach it to an agent.', 'Integrations') }}

<div class="fleet-tape skills-tape" role="list" aria-label="Agent skills summary">
    <div role="listitem"><span>Agents with skills</span><strong>{{ agents|selectattr('skills')|list|length }}<small>of {{ agent_total }}</small></strong></div>
    <div role="listitem"><span>Marketplace on</span><strong>{{ skill_agents|length }}<small>of {{ agent_total }}</small></strong></div>
    <div role="listitem"><span>GitHub token</span><strong>{{ 'Set' if github_token_present else 'Optional' }}</strong></div>
    <div role="listitem"><span>Results</span><strong id="skills-tape-results">—</strong></div>
    <div role="listitem"><span>Repositories</span><strong id="skills-tape-repos">—</strong></div>
    <div role="listitem"><span>Most installs</span><strong id="skills-tape-stars">—</strong></div>
    <div role="listitem" class="fleet-tape-meta"><span>Last query</span><strong id="skills-tape-query">—</strong></div>
</div>

<section class="panel skills-find" aria-labelledby="skills-find-title">
    <h2 class="visually-hidden" id="skills-find-title">Find a skill</h2>
    <div class="skills-find-grid">
        <div class="filter-bar">
            <label class="is-wide">Search skills
                <input type="text" id="search-input" placeholder="Notion, Gmail, calendar, React, deployment…" />
            </label>
            <button type="button" class="btn btn-primary" id="search-btn" onclick="searchSkills()">Search</button>
        </div>
        <div class="filter-bar">
            <label class="is-wide">GitHub repository
                <input type="text" id="repo-input" placeholder="owner/repo or GitHub URL, e.g. vercel-labs/skills" />
            </label>
            <label>Skill name (optional)
                <input type="text" id="skill-name-input" placeholder="All skills in the repository" />
            </label>
            <button type="button" class="btn" id="fetch-repo-btn" onclick="fetchSkillFromRepo()">Fetch skill</button>
        </div>
    </div>
    <p class="skills-suggest">Try
        {% for term in ['notion', 'gmail', 'calendar', 'react', 'deployment', 'testing'] %}<button type="button" class="skills-suggest-item" data-skill-query="{{ term }}">{{ term }}</button>{% endfor %}
    </p>
</section>

<p class="search-status" id="search-status" role="status"></p>

<div class="fleet-bar" id="skills-bar" hidden>
    <label class="fleet-search">
        <kbd aria-hidden="true">/</kbd>
        <input type="search" id="skills-filter" data-monitor-filter-for="skills-table" placeholder="Filter results by name, repository or text" aria-label="Filter results" autocomplete="off">
    </label>
    <div class="segmented" role="group" aria-label="Show skills">
        <button type="button" class="segmented-item" data-monitor-tag="" aria-pressed="true">All <span data-skill-count="">0</span></button>
        <button type="button" class="segmented-item" data-monitor-tag="vercel" aria-pressed="false">From Vercel <span data-skill-count="vercel">0</span></button>
        <button type="button" class="segmented-item" data-monitor-tag="popular" aria-pressed="false">Popular <span data-skill-count="popular">0</span></button>
    </div>
    <p class="fleet-keys" aria-label="Keyboard shortcuts"><span><kbd>j</kbd> <kbd>k</kbd> move</span><span><kbd>↵</kbd> instructions</span><span><kbd>o</kbd> open on GitHub</span></p>
</div>

<div class="fleet skills" id="skills">
    <div class="fleet-main">
        <div class="skills-grid" id="skills-grid">
            {{ empty_state('Find a skill to get started', 'Search by keyword, such as notion, gmail, react or deployment, or fetch a skill directly from a GitHub repository.') }}
        </div>
        <div class="fleet-table-wrap" id="skills-table-wrap" hidden>
            <table class="fleet-table" id="skills-table">
                <caption class="visually-hidden">Skills found. Select a row to see its source, read its instructions and attach it to an agent.</caption>
                <thead>
                    <tr>
                        <th scope="col" aria-sort="none"><button type="button" data-sort="name" data-sort-type="text">Skill</button></th>
                        <th scope="col" class="skills-col-repo" aria-sort="none"><button type="button" data-sort="repo" data-sort-type="text">Repository</button></th>
                        <th scope="col" class="num" aria-sort="none"><button type="button" data-sort="stars">Installs</button></th>
                        <th scope="col" class="skills-col-desc">Source</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <p class="fleet-none" id="skills-none" hidden>No skills match this filter.</p>
        </div>
    </div>

    <aside class="fleet-pane" aria-label="Selected skill" id="skills-pane">
        <section class="skills-intro" id="skills-intro">
            <h2>How agents use these skills</h2>
            <p><strong>Attach</strong> a skill to pin it to an agent: MemoRizz saves its <code>SKILL.md</code> under <code>~/.memorizz/skills</code> and adds it to the agent's skills. The agent sees it in <code>list_skills</code> and reads it with <code>read_skill</code> when a task needs it. Code in a skill runs only in a sandbox.</p>
            <p>An agent with the skills marketplace enabled can also search and fetch skills itself with <code>vercel_skills_search</code> and <code>vercel_skill_fetch</code>.</p>
            <h3 class="fleet-detail-title">Agents with the marketplace enabled</h3>
            {% if skill_agents %}
            <ul class="skills-agents">
                {% for agent in skill_agents %}<li><a href="/agents/{{ agent.agent_id }}/edit">{{ agent.name }}</a><span class="mono">{{ agent.agent_id[:8] }}</span></li>{% endfor %}
            </ul>
            {% else %}
            <p class="panel-empty">None yet. Enable it under Skills marketplace when you <a href="/agents">edit an agent</a>.</p>
            {% endif %}
        </section>

        <!-- Skill instructions: filled by View instructions or Fetch skill -->
        <section class="skill-detail-panel" id="skill-detail-panel" aria-labelledby="detail-skill-name">
            <header class="fleet-detail-head skill-detail-header">
                <div>
                    <h2 id="detail-skill-name">Skill</h2>
                    <p class="fleet-detail-sub">Instructions an agent receives</p>
                </div>
                <button type="button" class="btn btn-sm skill-detail-close" onclick="closeDetailPanel()">Close</button>
            </header>
            <dl class="fleet-config skill-meta-row">
                <div><dt>Repository</dt><dd class="mono" id="detail-skill-repo">-</dd></div>
                <div><dt>Path</dt><dd class="mono" id="detail-skill-path">-</dd></div>
            </dl>
            <p class="skill-meta-desc" id="detail-skill-desc-row" style="display:none;"><span id="detail-skill-desc"></span></p>
            <div class="mem-body-head">
                <h3 class="fleet-detail-title skill-instructions-title">Instructions</h3>
                <button type="button" class="btn btn-sm" data-copy-target="detail-skill-instructions">Copy</button>
            </div>
            <div class="skill-instructions" id="detail-skill-instructions">-</div>
            <div class="skills-attach" id="detail-skill-attach" hidden></div>
        </section>
    </aside>
</div>

<script>
    var searchInput = document.getElementById('search-input');
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') searchSkills();
    });
    var repoInput = document.getElementById('repo-input');
    repoInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') fetchSkillFromRepo();
    });
    var skillsMonitor = null;
    var currentSkills = [];
    var SKILL_AGENTS = {{ agents|tojson }};
    var AGENT_KEY = 'memorizz.skills.agent';

    document.querySelectorAll('[data-skill-query]').forEach(function(button) {
        button.addEventListener('click', function() {
            searchInput.value = button.dataset.skillQuery;
            searchSkills();
        });
    });

    function setTape(id, value) {
        var el = document.getElementById(id);
        if (el) el.textContent = value;
    }

    function clearResults() {
        currentSkills = [];
        document.querySelector('#skills-table tbody').textContent = '';
        document.querySelectorAll('#skills-pane .fleet-detail').forEach(function(el) { el.remove(); });
        document.getElementById('skills-table-wrap').hidden = true;
        document.getElementById('skills-bar').hidden = true;
    }

    function showEmpty(title, text) {
        var grid = document.getElementById('skills-grid');
        grid.hidden = false;
        grid.textContent = '';
        var box = document.createElement('div'); box.className = 'empty-state';
        var strong = document.createElement('strong'); strong.textContent = title;
        var p = document.createElement('p'); p.textContent = text;
        box.append(strong, p); grid.appendChild(box);
    }

    function searchSkills() {
        var query = document.getElementById('search-input').value.trim();
        if (!query) return;

        var status = document.getElementById('search-status');

        status.className = 'search-status';
        status.innerHTML = '<span class="loading-spinner"></span> Searching for "' + escapeHtml(query) + '"...';
        setTape('skills-tape-query', query);

        fetch('/vercel-skills/api/search?q=' + encodeURIComponent(query))
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data.ok) {
                    status.className = 'search-status error';
                    status.textContent = data.error || 'Search failed.';
                    if (data.hint) {
                        status.textContent += ' ' + data.hint;
                    }
                    return;
                }
                var skills = data.skills || [];
                status.textContent = 'Found ' + data.count + ' skill' + (data.count !== 1 ? 's' : '') + ' for "' + query + '"' + (data.source === 'github' ? ' on GitHub' : ' on skills.sh, most installed first') + (data.total_count > data.count ? ', ' + data.total_count + ' matches in all' : '') + '.';
                clearResults();
                if (skills.length === 0) {
                    showEmpty('No skills found', 'Nothing matched "' + query + '". Try different keywords, or fetch the skill by repository.');
                    ['skills-tape-results', 'skills-tape-repos', 'skills-tape-stars'].forEach(function(id) { setTape(id, '0'); });
                    return;
                }
                renderSkills(skills);
            })
            .catch(function(err) {
                status.className = 'search-status error';
                status.textContent = 'Request failed: ' + err.message + '. Check that the UI server is running, then search again.';
            });
    }

    // A skill's own name is its folder; SKILL.md at the repository root takes the repo name.
    function skillLabel(skill) {
        if (skill.skill_name) return skill.skill_name;
        var parts = String(skill.path || '').split('/').filter(Boolean);
        if (parts.length > 1) return parts[parts.length - 2];
        var repo = String(skill.repo || '');
        return repo.split('/').pop() || skill.name || '-';
    }

    // Pass a skill name only where fetch looks for it (skills/<name>/SKILL.md and friends).
    function skillNameFor(skill) {
        if (skill.skill_name) return skill.skill_name;
        var match = /^(?:skills\/(?:\.curated\/|\.experimental\/)?)?([^/]+)\/SKILL\.md$/.exec(String(skill.path || ''));
        return match ? match[1] : '';
    }

    function tagsFor(skill) {
        var tags = [];
        var owner = String(skill.repo || '').split('/')[0].toLowerCase();
        if (owner === 'vercel' || owner === 'vercel-labs') tags.push('vercel');
        if ((skill.installs || 0) >= 1000 || (skill.stars || 0) >= 100) tags.push('popular');
        return tags;
    }

    function cell(tag, className, text, title) {
        var el = document.createElement(tag);
        if (className) el.className = className;
        el.textContent = text;
        if (title) el.title = title;
        return el;
    }

    function renderSkills(skills) {
        currentSkills = skills;
        var tbody = document.querySelector('#skills-table tbody');
        var pane = document.getElementById('skills-pane');
        var counts = { '': skills.length, vercel: 0, popular: 0 };
        var repos = {};
        var topStars = 0;
        skills.forEach(function(skill, index) {
            var key = 's' + index;
            var label = skillLabel(skill);
            var tags = tagsFor(skill);
            tags.forEach(function(tag) { counts[tag] += 1; });
            repos[skill.repo] = true;
            var score = skill.installs || skill.stars || 0;
            topStars = Math.max(topStars, score);

            var row = document.createElement('tr');
            row.dataset.key = key;
            row.dataset.tags = tags.join(' ');
            row.dataset.name = label.toLowerCase();
            row.dataset.repo = String(skill.repo || '').toLowerCase();
            row.dataset.stars = String(score);
            row.dataset.search = [label, skill.repo, skill.path, skill.description].join(' ').toLowerCase();
            row.tabIndex = -1;
            var name = cell('th', 'fleet-name skills-name', label);
            name.scope = 'row';
            row.append(
                name,
                cell('td', 'skills-col-repo mono', skill.repo || '-', skill.repo),
                cell('td', 'num', score ? score.toLocaleString() : '—'),
                cell('td', 'skills-col-desc', skill.source === 'github' ? (skill.description || 'GitHub') : 'skills.sh', skill.description)
            );
            tbody.appendChild(row);
            pane.insertBefore(renderDetail(skill, key, label), document.getElementById('skill-detail-panel'));
        });
        Object.keys(counts).forEach(function(tag) {
            var el = document.querySelector('[data-skill-count="' + tag + '"]');
            if (el) el.textContent = counts[tag];
        });
        setTape('skills-tape-results', String(skills.length));
        setTape('skills-tape-repos', String(Object.keys(repos).length));
        setTape('skills-tape-stars', topStars.toLocaleString());
        document.getElementById('skills-grid').hidden = true;
        document.getElementById('skills-table-wrap').hidden = false;
        document.getElementById('skills-bar').hidden = false;
        document.getElementById('skills-intro').hidden = true;
        document.getElementById('skills-filter').value = '';
        var all = document.querySelector('[data-monitor-tag=""]');
        if (all) all.click();
        if (skillsMonitor) {
            skillsMonitor.applyFilter();
            skillsMonitor.select(tbody.rows[0]);
        }
    }

    function renderDetail(skill, key, label) {
        var section = document.createElement('section');
        section.className = 'fleet-detail';
        section.dataset.key = key;
        section.hidden = true;

        var head = document.createElement('header'); head.className = 'fleet-detail-head';
        var title = document.createElement('div');
        var h2 = cell('h2', '', label);
        var sub = document.createElement('p'); sub.className = 'fleet-detail-sub';
        sub.append(cell('span', 'mono', skill.repo || '-'));
        title.append(h2, sub);
        var score = skill.installs ? skill.installs.toLocaleString() + ' installs' : (skill.stars || 0).toLocaleString() + ' stars';
        head.append(title, cell('span', 'pill' + (tagsFor(skill).indexOf('popular') >= 0 ? ' pill--info' : ''), score));

        var actions = document.createElement('div'); actions.className = 'fleet-detail-actions';
        var view = cell('button', 'btn btn-primary btn-sm', 'View instructions');
        view.type = 'button';
        view.addEventListener('click', function() { fetchAndShowSkill(skill.repo || '', skillNameFor(skill)); });
        actions.appendChild(view);
        if (skill.html_url) {
            var file = cell('a', 'btn btn-sm', 'Open SKILL.md');
            file.href = skill.html_url; file.target = '_blank'; file.rel = 'noopener';
            actions.appendChild(file);
        }
        var repoLink = cell('a', 'btn btn-sm', 'Repository');
        repoLink.href = skill.repo_url || ('https://github.com/' + skill.repo); repoLink.target = '_blank'; repoLink.rel = 'noopener';
        actions.appendChild(repoLink);

        var desc = cell('p', 'skills-desc', skill.description || 'Select View instructions to read what this skill tells an agent.');

        var config = document.createElement('dl'); config.className = 'fleet-config';
        [['Source', skill.source === 'github' ? 'GitHub code search' : 'skills.sh'], ['Popularity', score], ['Repository', skill.repo || '-'], ['Path', skill.path || 'Found when attached']].forEach(function(pair) {
            var item = document.createElement('div');
            item.append(cell('dt', '', pair[0]), cell('dd', pair[0] === 'Repository' || pair[0] === 'Path' ? 'mono' : '', pair[1]));
            config.appendChild(item);
        });

        section.append(head, actions, desc, config, attachControl(skill.repo || '', skillNameFor(skill)));
        return section;
    }

    // Attach saves the SKILL.md locally and adds it to the chosen agent's skills.
    function attachControl(repo, skillName) {
        var wrap = document.createElement('div');
        wrap.className = 'skills-attach';
        if (!SKILL_AGENTS.length) {
            wrap.appendChild(cell('p', 'form-hint', 'Create an agent to attach skills to it.'));
            return wrap;
        }
        var label = cell('label', 'skills-attach-label', 'Attach to');
        var select = document.createElement('select');
        var remembered = null;
        try { remembered = localStorage.getItem(AGENT_KEY); } catch (_) { /* storage blocked */ }
        SKILL_AGENTS.forEach(function(agent) {
            var option = cell('option', '', agent.name + ' · ' + agent.agent_id.slice(0, 8));
            option.value = agent.agent_id;
            if (agent.agent_id === remembered) option.selected = true;
            select.appendChild(option);
        });
        label.appendChild(select);
        var button = cell('button', 'btn btn-primary btn-sm', 'Attach skill');
        button.type = 'button';
        var status = cell('p', 'form-hint', '');
        status.setAttribute('role', 'status');
        button.addEventListener('click', function() {
            var agent = SKILL_AGENTS.find(function(item) { return item.agent_id === select.value; }) || {};
            try { localStorage.setItem(AGENT_KEY, select.value); } catch (_) { /* storage blocked */ }
            button.disabled = true;
            status.textContent = 'Saving the skill…';
            MemorizzCatalog.skills.attach(select.value, { repo: repo, skill_name: skillName })
                .then(function(body) {
                    status.textContent = 'Attached ' + body.skill.name + ' to ' + agent.name + '. It now has ' + body.skills.length + ' skill' + (body.skills.length === 1 ? '' : 's') + '.';
                })
                .catch(function(error) {
                    var choices = (error.body && error.body.available_skills) || [];
                    status.textContent = error.message + (choices.length ? ' Try: ' + choices.slice(0, 6).map(function(c) { return c.name; }).join(', ') + '.' : '');
                })
                .finally(function() { button.disabled = false; });
        });
        wrap.append(label, button, status);
        return wrap;
    }

    function fetchSkillFromRepo() {
        var repo = document.getElementById('repo-input').value.trim();
        if (!repo) return;
        var skillName = document.getElementById('skill-name-input').value.trim();
        fetchAndShowSkill(repo, skillName);
    }

    function showPanel(panel) {
        document.getElementById('skills-intro').hidden = true;
        panel.classList.toggle('is-alone', !currentSkills.length);
        panel.classList.add('active');
        var motion = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
        panel.scrollIntoView({ behavior: motion, block: 'nearest' });
    }

    function fetchAndShowSkill(repo, skillName) {
        var panel = document.getElementById('skill-detail-panel');
        var status = document.getElementById('search-status');

        status.className = 'search-status';
        status.innerHTML = '<span class="loading-spinner"></span> Fetching skill from ' + escapeHtml(repo) + '...';

        var url = '/vercel-skills/api/fetch?repo=' + encodeURIComponent(repo);
        if (skillName) {
            url += '&skill_name=' + encodeURIComponent(skillName);
        }

        fetch(url)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data.ok) {
                    status.className = 'search-status error';
                    status.textContent = data.error || 'Failed to fetch skill.';
                    panel.classList.remove('active');
                    return;
                }

                status.textContent = '';

                // Multi-skill repo
                if (data.multi_skill_repo) {
                    var skills = data.available_skills || [];
                    var box = document.getElementById('detail-skill-instructions');
                    box.textContent = '';
                    var intro = document.createElement('div');
                    intro.append('This repository contains ', cell('strong', '', String(skills.length)), ' skills. Select one to view its instructions:');
                    box.appendChild(intro);
                    skills.forEach(function(item) {
                        var button = cell('button', 'btn btn-sm', item.name);
                        button.type = 'button';
                        button.addEventListener('click', function() { fetchAndShowSkill(data.repo, item.name); });
                        box.appendChild(button);
                    });
                    document.getElementById('detail-skill-name').textContent = data.repo + ' (multi-skill)';
                    document.getElementById('detail-skill-repo').textContent = data.repo;
                    document.getElementById('detail-skill-path').textContent = 'skills/';
                    document.getElementById('detail-skill-desc-row').style.display = 'none';
                    document.getElementById('detail-skill-attach').hidden = true;
                    showPanel(panel);
                    return;
                }

                var attachBox = document.getElementById('detail-skill-attach');
                attachBox.textContent = '';
                attachBox.appendChild(attachControl(data.repo || repo, skillName || ''));
                attachBox.hidden = false;
                document.getElementById('detail-skill-name').textContent = data.name || repo;
                document.getElementById('detail-skill-repo').textContent = data.repo || repo;
                document.getElementById('detail-skill-path').textContent = data.path || '-';
                document.getElementById('detail-skill-instructions').textContent = data.instructions || 'No instructions found.';

                if (data.description) {
                    document.getElementById('detail-skill-desc').textContent = data.description;
                    document.getElementById('detail-skill-desc-row').style.display = '';
                } else {
                    document.getElementById('detail-skill-desc-row').style.display = 'none';
                }

                showPanel(panel);
            })
            .catch(function(err) {
                status.className = 'search-status error';
                status.textContent = 'Request failed: ' + err.message + '. Check that the UI server is running, then try again.';
                panel.classList.remove('active');
            });
    }

    function closeDetailPanel() {
        document.getElementById('skill-detail-panel').classList.remove('active');
        if (!currentSkills.length) document.getElementById('skills-intro').hidden = false;
    }

    function selectedSkill(row) {
        return currentSkills[Number(String(row.dataset.key).slice(1))] || null;
    }

    document.addEventListener('DOMContentLoaded', function() {
        skillsMonitor = MemorizzMonitor.init({
            table: 'skills-table',
            keys: {
                Enter: function(row) {
                    var skill = selectedSkill(row);
                    if (skill) fetchAndShowSkill(skill.repo || '', skillNameFor(skill));
                },
                o: function(row) {
                    var skill = selectedSkill(row);
                    if (skill) window.open(skill.html_url || skill.repo_url || ('https://github.com/' + skill.repo), '_blank', 'noopener');
                },
            },
        });
    });
</script>
{% endblock %}