1909 lines
89 KiB
JavaScript
1909 lines
89 KiB
JavaScript
// skills.js — Skills tab in the Memory modal.
|
|
//
|
|
// Skills are SKILL.md files (frontmatter + body) under data/skills/.
|
|
// This UI supports: list, search, view (read SKILL.md), edit (replace
|
|
// content), publish/draft toggle, delete, and "run as slash" via the
|
|
// /<skill-name> path.
|
|
|
|
import uiModule from './ui.js';
|
|
import * as spinnerModule from './spinner.js';
|
|
|
|
const API = window.location.origin;
|
|
let skills = [];
|
|
let builtinSkills = []; // read-only agent tool capabilities (TOOL_SECTIONS)
|
|
let loaded = false;
|
|
let _loadPromise = null;
|
|
|
|
function esc(s) { return uiModule.esc(String(s ?? '')); }
|
|
|
|
let _pendingFocusSkill = null;
|
|
let _cascadeNext = false; // set true to play the domino-in entrance on the next render
|
|
|
|
function _playSkillsCascade(container = document.getElementById('skills-list')) {
|
|
if (!container || !container.querySelector('.skill-card')) return false;
|
|
container.classList.remove('doclib-just-opened');
|
|
void container.offsetWidth;
|
|
container.classList.add('doclib-just-opened');
|
|
setTimeout(() => container.classList.remove('doclib-just-opened'), 900);
|
|
return true;
|
|
}
|
|
|
|
// Cache of SKILL.md text by skill name, so expanding is instant (no async
|
|
// fetch + content-settle jump). Populated lazily on expand AND eagerly in
|
|
// the background for all visible cards right after render.
|
|
const _mdCache = new Map();
|
|
async function _fetchSkillMarkdown(name) {
|
|
if (_mdCache.has(name)) return _mdCache.get(name);
|
|
const res = await fetch(`${API}/api/skills/${encodeURIComponent(name)}/markdown`);
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const data = await res.json();
|
|
const md = data.markdown || '';
|
|
_mdCache.set(name, md);
|
|
return md;
|
|
}
|
|
// Background-load the markdown for every currently-rendered skill card so it
|
|
// is ready (in the card's <pre> + _mdLoaded) before the user expands it.
|
|
function _preloadVisibleMarkdown() {
|
|
document.querySelectorAll('#skills-list .skill-card[data-skill-name]').forEach(card => {
|
|
const name = card.dataset.skillName;
|
|
if (!name || card._mdLoaded) return;
|
|
const pre = card.querySelector('.skill-md-pre');
|
|
const apply = (md) => { if (pre) pre.textContent = md || '(empty)'; card._mdLoaded = true; card._md = md || ''; };
|
|
if (_mdCache.has(name)) { apply(_mdCache.get(name)); return; }
|
|
_fetchSkillMarkdown(name).then(apply).catch(() => {});
|
|
});
|
|
}
|
|
|
|
// Collapsed skills sections ("user" / "builtin"), persisted so the
|
|
// choice survives reloads. Built-in defaults to collapsed (it's
|
|
// reference info, not the user's own skills).
|
|
const _collapsedSections = (() => {
|
|
try {
|
|
const raw = localStorage.getItem('skillsSectionsCollapsed');
|
|
if (raw) return new Set(JSON.parse(raw));
|
|
} catch (_) {}
|
|
return new Set(['builtin']);
|
|
})();
|
|
function _saveCollapsedSections() {
|
|
try { localStorage.setItem('skillsSectionsCollapsed', JSON.stringify([..._collapsedSections])); } catch (_) {}
|
|
}
|
|
function _applySectionCollapse(container) {
|
|
if (!container) return;
|
|
container.querySelectorAll('.skills-section-header').forEach(h => {
|
|
h.classList.toggle('collapsed', _collapsedSections.has(h.dataset.section));
|
|
});
|
|
container.querySelectorAll('.doclib-card[data-skill-section]').forEach(c => {
|
|
c.classList.toggle('skill-card-section-hidden', _collapsedSections.has(c.dataset.skillSection));
|
|
});
|
|
}
|
|
|
|
export async function loadSkills(cascade = false) {
|
|
// Play the domino-in entrance on this load (set when the tab is opened,
|
|
// not for the silent re-loads after an edit/delete).
|
|
if (cascade) _cascadeNext = true;
|
|
if (cascade && loaded && !_loadPromise && _playSkillsCascade()) {
|
|
_cascadeNext = false;
|
|
updateCount();
|
|
return;
|
|
}
|
|
if (_loadPromise) return _loadPromise;
|
|
_loadPromise = (async () => {
|
|
try {
|
|
const res = await fetch(`${API}/api/skills`);
|
|
const data = await res.json();
|
|
skills = data.skills || [];
|
|
_loadSkillApprovalThreshold();
|
|
// Built-in capabilities are no longer surfaced in the Skills menu.
|
|
loaded = true;
|
|
renderSkillsList();
|
|
updateCount();
|
|
if (_pendingFocusSkill) {
|
|
_focusSkillRow(_pendingFocusSkill);
|
|
_pendingFocusSkill = null;
|
|
}
|
|
// If a background audit is running, re-show its progress panel.
|
|
if (!_auditPoll) {
|
|
_fetchAuditStatus().then(st => {
|
|
if (st.status === 'running') _auditAllSkills();
|
|
}).catch(() => {});
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load skills:', e);
|
|
} finally {
|
|
_loadPromise = null;
|
|
}
|
|
})();
|
|
return _loadPromise;
|
|
}
|
|
|
|
function _focusSkillRow(name) {
|
|
setTimeout(() => {
|
|
const card = document.querySelector(`.skill-card[data-skill-name="${CSS.escape(name)}"]`);
|
|
if (!card) return;
|
|
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
card.classList.add('skill-row-flash');
|
|
setTimeout(() => card.classList.remove('skill-row-flash'), 2000);
|
|
// Expand it so the linked skill opens to its SKILL.md directly.
|
|
_expandSkillCard(card, name);
|
|
}, 200);
|
|
}
|
|
|
|
// Open the Memory modal → Skills tab → focus a specific skill row.
|
|
// Used by the chat anchor-link delegate ([name](#skill-<name>)).
|
|
export function openSkill(name) {
|
|
_pendingFocusSkill = name || null;
|
|
// Open the memory modal if not already open.
|
|
const memBtn = document.getElementById('tool-memory-btn');
|
|
if (memBtn) memBtn.click();
|
|
// Switch to the skills tab (triggers lazy loadSkills()).
|
|
setTimeout(() => {
|
|
const tab = document.querySelector('.memory-tab[data-memory-tab="skills"]');
|
|
if (tab) tab.click();
|
|
else loadSkills(); // fallback if tab structure differs
|
|
}, 120);
|
|
}
|
|
|
|
let _skillsSort = 'confidence';
|
|
let _showDraftsOnly = false;
|
|
let _showPublishedOnly = false;
|
|
let _confMax = null; // confidence ceiling filter (%, e.g. 90 = show ≤90%); null = off
|
|
let _selectMode = false;
|
|
const _selectedNames = new Set();
|
|
let _skillApprovalThreshold = 0.85;
|
|
|
|
function updateCount() {
|
|
const el = document.getElementById('skills-count');
|
|
if (el) el.textContent = skills.length || '0';
|
|
const elH = document.getElementById('skills-count-h2');
|
|
if (elH) elH.textContent = skills.length + ' skill' + (skills.length === 1 ? '' : 's');
|
|
}
|
|
|
|
function _sortSkills(list) {
|
|
const arr = list.slice();
|
|
if (_skillsSort === 'confidence') {
|
|
arr.sort((a, b) => (b.confidence || 0) - (a.confidence || 0) || (a.name || '').localeCompare(b.name || ''));
|
|
} else if (_skillsSort === 'uses') {
|
|
arr.sort((a, b) => (b.uses || 0) - (a.uses || 0) || (a.name || '').localeCompare(b.name || ''));
|
|
} else if (_skillsSort === 'recent') {
|
|
arr.sort((a, b) => (b.updated_at || b.created_at || 0) - (a.updated_at || a.created_at || 0));
|
|
} else {
|
|
arr.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
function _matches(sk, query) {
|
|
const q = query.toLowerCase();
|
|
return (
|
|
(sk.name || '').toLowerCase().includes(q) ||
|
|
(sk.description || '').toLowerCase().includes(q) ||
|
|
(sk.when_to_use || sk.problem || '').toLowerCase().includes(q) ||
|
|
(sk.category || '').toLowerCase().includes(q) ||
|
|
(sk.tags || []).some(t => (t || '').toLowerCase().includes(q))
|
|
);
|
|
}
|
|
|
|
function _statusPill(sk) {
|
|
const s = sk.status || (sk._legacy ? 'legacy' : 'draft');
|
|
if (s === 'published') return '<span class="memory-cat-badge skill-status-pill" data-status="published" style="background:color-mix(in srgb, var(--accent, #4ade80) 30%, transparent)">published</span>';
|
|
if (s === 'draft') return '<span class="memory-cat-badge skill-status-pill" data-status="draft" style="background:color-mix(in srgb, var(--fg) 14%, transparent)">draft</span>';
|
|
return `<span class="memory-cat-badge skill-status-pill" data-status="${esc(s)}" style="opacity:0.6">${esc(s)}</span>`;
|
|
}
|
|
|
|
// Show a "teacher" badge for skills written by the auto-escalation
|
|
// teacher loop. Lets the user tell at-a-glance which procedures were
|
|
// hand-authored vs auto-generated so they can audit (and demote /
|
|
// edit / publish) before trusting them.
|
|
function _sourcePill(sk) {
|
|
if (sk.source !== 'teacher-escalation') return '';
|
|
const teacher = sk.teacher_model || 'teacher';
|
|
return `<span class="memory-cat-badge" title="Created by teacher escalation: ${esc(teacher)}" style="background:color-mix(in srgb, var(--color-warning, #f0ad4e) 22%, transparent);">teacher-created</span>`;
|
|
}
|
|
|
|
function _modelShortName(model) {
|
|
return String(model || '').split('/').filter(Boolean).pop() || String(model || '');
|
|
}
|
|
|
|
function _skillTokens(sk) {
|
|
return new Set(String([
|
|
sk.name || '',
|
|
sk.description || '',
|
|
sk.when_to_use || '',
|
|
...(sk.tags || []),
|
|
].join(' ')).toLowerCase()
|
|
.replace(/-\d+\b/g, '')
|
|
.split(/[^a-z0-9]+/)
|
|
.filter(t => t.length > 2 && !['the', 'and', 'with', 'for', 'from', 'using'].includes(t)));
|
|
}
|
|
|
|
function _skillSimilarity(a, b) {
|
|
const A = _skillTokens(a), B = _skillTokens(b);
|
|
if (!A.size || !B.size) return 0;
|
|
let inter = 0;
|
|
for (const t of A) if (B.has(t)) inter++;
|
|
return inter / (A.size + B.size - inter);
|
|
}
|
|
|
|
function _baseSkillName(name) {
|
|
return String(name || '').replace(/-\d+$/, '');
|
|
}
|
|
|
|
function _scoreDuplicateKeeper(sk) {
|
|
return [
|
|
(sk.status === 'published') ? 100000 : 0,
|
|
(sk.uses || 0) * 100,
|
|
Math.round((sk.confidence || 0) * 100),
|
|
sk.audit_by_teacher ? -5 : 0,
|
|
-String(sk.name || '').length / 1000,
|
|
].reduce((a, b) => a + b, 0);
|
|
}
|
|
|
|
function _duplicateMeta(list) {
|
|
const parent = new Map();
|
|
const names = list.map(s => s.name || s.id).filter(Boolean);
|
|
names.forEach(n => parent.set(n, n));
|
|
const find = (x) => {
|
|
let p = parent.get(x) || x;
|
|
while (p !== parent.get(p)) p = parent.get(p);
|
|
return p;
|
|
};
|
|
const unite = (a, b) => {
|
|
const pa = find(a), pb = find(b);
|
|
if (pa !== pb) parent.set(pb, pa);
|
|
};
|
|
for (let i = 0; i < list.length; i++) {
|
|
for (let j = i + 1; j < list.length; j++) {
|
|
const a = list[i], b = list[j];
|
|
const an = a.name || a.id, bn = b.name || b.id;
|
|
if (!an || !bn) continue;
|
|
if (_baseSkillName(an) === _baseSkillName(bn) || _skillSimilarity(a, b) >= 0.38) {
|
|
unite(an, bn);
|
|
}
|
|
}
|
|
}
|
|
const groups = new Map();
|
|
for (const sk of list) {
|
|
const n = sk.name || sk.id;
|
|
if (!n) continue;
|
|
const root = find(n);
|
|
if (!groups.has(root)) groups.set(root, []);
|
|
groups.get(root).push(sk);
|
|
}
|
|
const meta = new Map();
|
|
let idx = 1;
|
|
for (const group of groups.values()) {
|
|
if (group.length < 2) continue;
|
|
const sorted = group.slice().sort((a, b) => _scoreDuplicateKeeper(b) - _scoreDuplicateKeeper(a));
|
|
const keep = sorted[0].name || sorted[0].id;
|
|
const groupNames = sorted.map(s => s.name || s.id).filter(Boolean);
|
|
for (const sk of sorted) {
|
|
const n = sk.name || sk.id;
|
|
meta.set(n, { group: idx, keep: n === keep, keepName: keep, names: groupNames });
|
|
}
|
|
idx++;
|
|
}
|
|
return meta;
|
|
}
|
|
|
|
function _auditModelPills(sk) {
|
|
const worker = sk.audit_worker_model || '';
|
|
const teacher = sk.audit_teacher_model || '';
|
|
let html = '';
|
|
if (worker) {
|
|
html += `<span class="memory-cat-badge skill-model-pill skill-model-student" title="Last audited by default audit model: ${esc(worker)}">audit</span>`;
|
|
}
|
|
if (sk.audit_by_teacher || teacher) {
|
|
const title = teacher
|
|
? `Teacher rewrote this skill; audit model passed after the rewrite. Teacher: ${teacher}`
|
|
: 'Teacher rewrote this skill; audit model passed after the rewrite.';
|
|
html += `<span class="memory-cat-badge skill-model-pill skill-model-teacher" title="${esc(title)}">teacher-fixed</span>`;
|
|
}
|
|
return html;
|
|
}
|
|
|
|
function _necessityKind(sk) {
|
|
const nec = sk && sk.necessity;
|
|
if (sk && sk._duplicateGroup) return 'duplicate';
|
|
if (!nec || nec.necessary !== false) return null;
|
|
const reason = String(nec.reason || '').toLowerCase();
|
|
const redundant = (nec.redundant_with || []).filter(Boolean);
|
|
if (redundant.length || /duplicat|redundan|overlap|same skill|same procedure/.test(reason)) return 'duplicate';
|
|
if (/trivial|generic|capable assistant|without a saved|not need|unnecessary/.test(reason)) return 'trivial';
|
|
return 'irrelevant';
|
|
}
|
|
|
|
function _necessityPill(sk) {
|
|
const kind = _necessityKind(sk);
|
|
if (!kind) return '';
|
|
const nec = sk.necessity || {};
|
|
const dup = (nec.redundant_with || []).filter(Boolean);
|
|
const label = kind === 'duplicate' ? (sk._duplicateGroup ? `duplicate #${sk._duplicateGroup}` : 'duplicate')
|
|
: kind === 'trivial' ? 'generic'
|
|
: 'possibly-irrelevant';
|
|
const group = sk._duplicateNames || [];
|
|
const why = sk._duplicateGroup
|
|
? `Duplicate group #${sk._duplicateGroup}. Recommended keep: ${sk._duplicateKeepName}. Group: ${group.join(', ')}`
|
|
: (nec.reason || 'May not be worth keeping') + (dup.length ? ' | overlaps: ' + dup.join(', ') : '');
|
|
return `<span class="memory-cat-badge skill-necessity-pill skill-necessity-${kind}" title="${esc(why)}">${label}</span>`;
|
|
}
|
|
|
|
function _duplicatePriorityPill(sk) {
|
|
if (!sk._duplicateGroup) return '';
|
|
if (sk._duplicateKeep) {
|
|
return `<span class="memory-cat-badge skill-duplicate-keep" title="Best duplicate candidate by published status, uses, confidence, and specificity">recommended</span>`;
|
|
}
|
|
return `<span class="memory-cat-badge skill-duplicate-lower" title="Lower-priority duplicate. Suggested keeper: ${esc(sk._duplicateKeepName || '')}">lower-priority</span>`;
|
|
}
|
|
|
|
// Verified-by-test indicators shown next to the confidence %. A check when a
|
|
// test/audit run passed; a graduation-cap when the teacher model had to
|
|
// rewrite the skill to make it pass. SVG (no Unicode emoji).
|
|
function _auditMarks(sk) {
|
|
let html = '';
|
|
if (sk.audit_verdict === 'pass') {
|
|
html += `<span class="skill-verified" title="Passed an automated test"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>`;
|
|
}
|
|
if (sk.audit_by_teacher) {
|
|
const teacher = sk.audit_teacher_model ? `: ${sk.audit_teacher_model}` : '';
|
|
html += `<span class="skill-teachermark" title="Teacher rewrote this skill; audit model passed after the rewrite${esc(teacher)}"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10L12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1 3 2 6 2s6-1 6-2v-5"/></svg></span>`;
|
|
}
|
|
return html;
|
|
}
|
|
|
|
// Audit verdict dot — removed at user request. The ✓ check-mark next to the
|
|
// confidence % still indicates a pass. Stub returns empty so the surrounding
|
|
// header HTML still composes without changing other layout.
|
|
function _auditDot(sk) { return ''; }
|
|
|
|
function _isDraftsFilter() { return !!_showDraftsOnly; }
|
|
|
|
// Confidence → colour. 90%+ is solidly green, scaling down through
|
|
// yellow/orange to red at 50% and below (hue 120→0 over 90→50).
|
|
function _confColor(conf) {
|
|
const hue = Math.max(0, Math.min(120, ((conf - 50) / 40) * 120));
|
|
return `hsl(${Math.round(hue)}, 70%, 42%)`;
|
|
}
|
|
|
|
// Shared action icons (collapsed kebab menu + expanded footer use the same).
|
|
const _ICON = {
|
|
del: '<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>',
|
|
edit: '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>',
|
|
approve: '<polyline points="20 6 9 17 4 12"/>',
|
|
unpublish: '<path d="M5 12l5 5L20 7"/>',
|
|
test: '<polygon points="5 3 19 12 5 21 5 3"/>',
|
|
};
|
|
function _svg(paths, { fill = 'none', size = 13 } = {}) {
|
|
const stroke = fill === 'currentColor' ? '' : 'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
|
|
return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="${fill}" ${stroke} style="vertical-align:-2px;flex-shrink:0;">${paths}</svg>`;
|
|
}
|
|
|
|
// Kebab dropdown for a collapsed skill card — same actions + icons as the
|
|
// expanded footer (Publish/Unpublish · Edit · Delete).
|
|
function _openSkillMenu(btn, card, sk, name, isPublished) {
|
|
document.querySelectorAll('.skill-kebab-menu').forEach(m => m.remove());
|
|
const menu = document.createElement('div');
|
|
menu.className = 'skill-kebab-menu';
|
|
const mk = (paths, label, opts, onClick) => {
|
|
const item = document.createElement('button');
|
|
item.className = 'skill-kebab-item' + (opts && opts.danger ? ' danger' : '');
|
|
item.innerHTML = _svg(paths, opts) + `<span>${label}</span>`;
|
|
item.addEventListener('click', (e) => { e.stopPropagation(); menu.remove(); onClick(); });
|
|
menu.appendChild(item);
|
|
};
|
|
if (isPublished) mk(_ICON.unpublish, 'Unpublish', {}, () => _setSkillStatus(name, 'draft'));
|
|
else mk(_ICON.approve, 'Publish', {}, () => _setSkillStatus(name, 'published'));
|
|
mk(_ICON.edit, 'Edit', {}, async () => {
|
|
if (!card.classList.contains('doclib-card-expanded')) await _expandSkillCard(card, name);
|
|
_toggleSkillEdit(card, name);
|
|
});
|
|
mk(_ICON.test, 'Test', {}, () => _testSkill(card, name));
|
|
// Audit kicks off the bulk audit-all loop (test → judge → fix → retry → demote).
|
|
// Starts at the top of the list and walks down.
|
|
mk(_ICON.test, 'Audit', {}, () => _auditAllSkills());
|
|
mk(_ICON.del, 'Delete', { danger: true }, () => _deleteSkill(name, card));
|
|
|
|
// Select — enters bulk-select mode and pre-selects this skill. Same pattern
|
|
// as the email/documents/brain Select item, with the email bullet icon.
|
|
const selItem = document.createElement('button');
|
|
selItem.className = 'skill-kebab-item';
|
|
selItem.innerHTML = '<span style="display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;"><span style="font-size:16px;line-height:1;">●</span></span><span>Select</span>';
|
|
selItem.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
menu.remove();
|
|
if (!_selectMode) _enterSelectMode();
|
|
_selectedNames.add(name);
|
|
renderSkillsList();
|
|
});
|
|
menu.appendChild(selItem);
|
|
|
|
// Mobile-only Cancel — mirrors the email/documents/brain popup pattern.
|
|
// CSS hides `.dropdown-cancel-mobile` on desktop where outside-click
|
|
// already dismisses cleanly.
|
|
const cancelItem = document.createElement('button');
|
|
cancelItem.className = 'skill-kebab-item dropdown-cancel-mobile';
|
|
cancelItem.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg><span>Cancel</span>';
|
|
cancelItem.addEventListener('click', (e) => { e.stopPropagation(); menu.remove(); });
|
|
menu.appendChild(cancelItem);
|
|
|
|
document.body.appendChild(menu);
|
|
const r = btn.getBoundingClientRect();
|
|
menu.style.top = (r.bottom + 4) + 'px';
|
|
menu.style.right = Math.max(6, window.innerWidth - r.right) + 'px';
|
|
// Keep it on-screen (mobile): flip above the button if it would overflow the
|
|
// bottom, clamp the left edge, and cap the height as a last resort.
|
|
const mr = menu.getBoundingClientRect();
|
|
if (mr.bottom > window.innerHeight - 6) {
|
|
menu.style.top = Math.max(6, r.top - mr.height - 4) + 'px';
|
|
}
|
|
if (mr.left < 6) {
|
|
menu.style.right = Math.max(6, window.innerWidth - 6 - mr.width) + 'px';
|
|
}
|
|
const mr2 = menu.getBoundingClientRect();
|
|
if (mr2.bottom > window.innerHeight - 6) {
|
|
menu.style.maxHeight = Math.max(80, window.innerHeight - 12 - mr2.top) + 'px';
|
|
menu.style.overflowY = 'auto';
|
|
}
|
|
const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('click', close, true); } };
|
|
setTimeout(() => document.addEventListener('click', close, true), 0);
|
|
}
|
|
|
|
// Cards for the agent's built-in tool capabilities (from
|
|
// /api/skills/builtin → TOOL_SECTIONS). Expandable to preview the
|
|
// instruction block; editable with a warning + a revert-to-default
|
|
// button (overrides stored in settings, applied to the prompt).
|
|
function _buildBuiltinCards() {
|
|
return builtinSkills.map(b => {
|
|
const card = document.createElement('div');
|
|
card.className = 'doclib-card skill-card skill-builtin-card';
|
|
card.dataset.builtinName = b.name;
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'doclib-card-header skill-card-header';
|
|
header.innerHTML = `
|
|
<span class="skill-conf-dot" style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent, var(--red));flex-shrink:0;margin-right:6px;opacity:0.55;"></span>
|
|
<div style="flex:1;min-width:0;overflow:hidden;">
|
|
<div class="doclib-card-title" style="display:flex;align-items:center;gap:6px;min-width:0;">
|
|
<code style="font-weight:600;font-size:0.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0;">${esc(b.name)}</code>
|
|
<span class="memory-cat-badge" style="background:color-mix(in srgb, var(--fg) 14%, transparent)">built-in</span>
|
|
${b.is_overridden ? '<span class="memory-cat-badge" title="You have edited this built-in capability" style="background:color-mix(in srgb, var(--color-warning, #f0ad4e) 30%, transparent);">edited</span>' : ''}
|
|
</div>
|
|
${b.description ? `<div class="doclib-card-session" title="${esc(b.description)}" style="font-size:10px;opacity:0.55;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${esc(b.description)}</div>` : ''}
|
|
</div>
|
|
<span class="doclib-card-chevron"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></span>
|
|
`;
|
|
card.appendChild(header);
|
|
|
|
const preview = document.createElement('div');
|
|
preview.className = 'doclib-card-preview skill-card-preview';
|
|
// Warning banner — editing a built-in changes how the assistant uses a native tool.
|
|
const warn = document.createElement('div');
|
|
warn.className = 'skill-builtin-warn';
|
|
warn.innerHTML = '⚠ This is a built-in capability. Editing changes how the assistant is instructed to use this native tool — it can break or alter core behaviour. Use Revert to restore the shipped default.';
|
|
preview.appendChild(warn);
|
|
const pre = document.createElement('pre');
|
|
pre.className = 'skill-md-pre';
|
|
pre.textContent = ''; // filled on expand
|
|
preview.appendChild(pre);
|
|
|
|
// Footer: Revert (left, only meaningful when overridden) · Edit/Save (right).
|
|
const actions = document.createElement('div');
|
|
actions.className = 'doclib-card-expanded-actions';
|
|
|
|
const revertBtn = document.createElement('button');
|
|
revertBtn.className = 'doclib-card-text-btn doclib-card-action-btn doclib-card-text-btn-danger';
|
|
revertBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>Revert';
|
|
revertBtn.title = 'Restore the original shipped instructions';
|
|
revertBtn.addEventListener('click', (e) => { e.stopPropagation(); _revertBuiltin(b.name); });
|
|
|
|
const editBtn = document.createElement('button');
|
|
editBtn.className = 'doclib-card-text-btn doclib-card-action-btn';
|
|
editBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>Edit';
|
|
editBtn.addEventListener('click', (e) => { e.stopPropagation(); _toggleBuiltinEdit(card, b.name); });
|
|
|
|
const rightGroup = document.createElement('div');
|
|
rightGroup.className = 'doclib-action-group';
|
|
const btnRow = document.createElement('div');
|
|
btnRow.className = 'doclib-action-btn-row';
|
|
btnRow.appendChild(editBtn);
|
|
rightGroup.appendChild(btnRow);
|
|
|
|
actions.appendChild(revertBtn);
|
|
actions.appendChild(rightGroup);
|
|
preview.appendChild(actions);
|
|
card.appendChild(preview);
|
|
|
|
card.addEventListener('click', (e) => {
|
|
if (e.target.closest('button, input, textarea')) return;
|
|
_expandBuiltinCard(card, b.name);
|
|
});
|
|
return card;
|
|
});
|
|
}
|
|
|
|
async function _expandBuiltinCard(card, name) {
|
|
const grid = card.closest('.doclib-grid');
|
|
if (card.classList.contains('doclib-card-expanded')) {
|
|
card.classList.remove('doclib-card-expanded');
|
|
return;
|
|
}
|
|
if (grid) grid.querySelectorAll('.doclib-card-expanded').forEach(c => c.classList.remove('doclib-card-expanded'));
|
|
card.classList.add('doclib-card-expanded');
|
|
if (grid) grid.scrollTop = 0;
|
|
const pre = card.querySelector('.skill-md-pre');
|
|
if (pre && !card._loaded) {
|
|
pre.textContent = 'Loading…';
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/builtin/${encodeURIComponent(name)}`);
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const data = await res.json();
|
|
pre.textContent = data.text || '(empty)';
|
|
card._loaded = true;
|
|
card._text = data.text || '';
|
|
card._default = data.default || '';
|
|
} catch (e) {
|
|
pre.textContent = 'Failed to load.';
|
|
}
|
|
}
|
|
}
|
|
|
|
function _toggleBuiltinEdit(card, name) {
|
|
const preview = card.querySelector('.skill-card-preview');
|
|
if (!preview) return;
|
|
if (preview.querySelector('.skill-md-editor')) { _saveBuiltinEdit(card, name); return; }
|
|
const pre = preview.querySelector('.skill-md-pre');
|
|
const ta = document.createElement('textarea');
|
|
ta.className = 'skill-md-editor';
|
|
ta.spellcheck = false;
|
|
ta.value = (card._text != null ? card._text : (pre ? pre.textContent : '')) || '';
|
|
ta.addEventListener('click', (e) => e.stopPropagation());
|
|
if (pre) pre.style.display = 'none';
|
|
preview.insertBefore(ta, preview.querySelector('.doclib-card-expanded-actions'));
|
|
ta.focus();
|
|
const editBtn = [...preview.querySelectorAll('.doclib-card-action-btn')].find(b => /Edit|Save/.test(b.textContent));
|
|
if (editBtn) editBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>Save';
|
|
}
|
|
|
|
async function _saveBuiltinEdit(card, name) {
|
|
const ta = card.querySelector('.skill-md-editor');
|
|
if (!ta) return;
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/builtin/${encodeURIComponent(name)}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text: ta.value }),
|
|
});
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
uiModule.showToast('Built-in capability updated');
|
|
builtinSkills = []; // force reload of built-in list (refreshes "edited" badge)
|
|
await loadSkills();
|
|
} catch (e) { uiModule.showError('Save failed: ' + e.message); }
|
|
}
|
|
|
|
async function _revertBuiltin(name) {
|
|
if (!(await uiModule.styledConfirm(`Revert "${name}" to its original built-in instructions?`, { confirmText: 'Revert', danger: true }))) return;
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/builtin/${encodeURIComponent(name)}`, { method: 'DELETE' });
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
uiModule.showToast('Reverted to default');
|
|
builtinSkills = [];
|
|
await loadSkills();
|
|
} catch (e) { uiModule.showError('Revert failed: ' + e.message); }
|
|
}
|
|
|
|
function _getFilteredSkills() {
|
|
const query = (document.getElementById('skills-search')?.value || '').toLowerCase();
|
|
let filtered = query ? skills.filter(sk => _matches(sk, query)) : skills;
|
|
if (_showDraftsOnly) {
|
|
filtered = filtered.filter(sk => (sk.status || 'draft') !== 'published');
|
|
}
|
|
if (_showPublishedOnly) {
|
|
filtered = filtered.filter(sk => (sk.status || 'draft') === 'published');
|
|
}
|
|
if (_confMax != null) {
|
|
// "≤ X%" — surface the lower-confidence skills that may need review.
|
|
filtered = filtered.filter(sk => Math.round((sk.confidence || 0) * 100) <= _confMax);
|
|
}
|
|
return _sortSkills(filtered);
|
|
}
|
|
|
|
function renderSkillsList() {
|
|
const container = document.getElementById('skills-list');
|
|
if (!container) return;
|
|
// Re-render rebuilds the cards (none expanded), so clear the expand flag
|
|
// on the admin-card or it would keep the toolbar hidden with nothing open.
|
|
container.closest('.admin-card')?.classList.remove('skills-has-expanded');
|
|
|
|
const sorted = _getFilteredSkills();
|
|
// Built-in capabilities show as their own read-only section (skipped when
|
|
// the user is filtering to drafts, since built-ins aren't drafts).
|
|
// Skills menu shows the user's own skills only (built-in capabilities
|
|
// are intentionally not surfaced here).
|
|
const showBuiltin = false;
|
|
|
|
if (!sorted.length && !showBuiltin) {
|
|
container.innerHTML = `<div style="text-align:center;opacity:0.4;padding:24px 0;font-size:11px;">${loaded ? 'No skills yet, use agent for it to auto extract them.' : 'Loading…'}</div>`;
|
|
return;
|
|
}
|
|
|
|
// Library-style cards: a compact bar that expands in-place to show the
|
|
// SKILL.md, with a footer (Delete left; Edit / Run / Approve right).
|
|
// Reuses the proven .doclib-card / .doclib-card-preview /
|
|
// .doclib-card-expanded-actions markup so the desktop+mobile expand +
|
|
// footer behaviour matches the document/chat library exactly.
|
|
//
|
|
// #skills-list itself becomes the .doclib-grid (rather than a nested
|
|
// grid) so the global "hide non-grid children when a card is expanded"
|
|
// rule (.admin-card:has(.doclib-card-expanded) > *:not(.doclib-grid))
|
|
// doesn't hide the list container along with everything else.
|
|
container.classList.add('doclib-grid');
|
|
const cards = [];
|
|
const dupeMeta = _duplicateMeta(sorted);
|
|
|
|
for (const sk of sorted) {
|
|
const name = sk.name || sk.id;
|
|
const dm = dupeMeta.get(name);
|
|
if (dm) {
|
|
sk._duplicateGroup = dm.group;
|
|
sk._duplicateKeep = dm.keep;
|
|
sk._duplicateKeepName = dm.keepName;
|
|
sk._duplicateNames = dm.names;
|
|
} else {
|
|
delete sk._duplicateGroup;
|
|
delete sk._duplicateKeep;
|
|
delete sk._duplicateKeepName;
|
|
delete sk._duplicateNames;
|
|
}
|
|
const conf = Math.round((sk.confidence || 0) * 100);
|
|
const uses = sk.uses || 0;
|
|
const isPublished = (sk.status === 'published');
|
|
const confColor = _confColor(conf);
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'doclib-card skill-card';
|
|
card.dataset.skillName = name;
|
|
card.dataset.skillStatus = sk.status || 'draft';
|
|
|
|
const checked = _selectedNames.has(name) ? 'checked' : '';
|
|
const cbHtml = _selectMode
|
|
? `<input type="checkbox" class="memory-select-cb skill-select-cb" data-name="${esc(name)}" ${checked} style="margin-right:6px;flex-shrink:0;cursor:pointer;" />`
|
|
: '';
|
|
|
|
// Collapsed header bar: dot · name (wraps) · [pills (right) · stats · menu].
|
|
const header = document.createElement('div');
|
|
header.className = 'doclib-card-header skill-card-header';
|
|
header.innerHTML = `
|
|
${cbHtml}
|
|
${_auditDot(sk)}
|
|
<div class="skill-card-textcol">
|
|
<code class="skill-card-name">${esc(name)}</code>
|
|
${sk.description ? `<div class="skill-card-desc">${esc(sk.description)}</div>` : ''}
|
|
</div>
|
|
<div class="skill-card-right">
|
|
${_statusPill(sk)}
|
|
${_sourcePill(sk)}
|
|
${_auditModelPills(sk)}
|
|
${_necessityPill(sk)}
|
|
${_duplicatePriorityPill(sk)}
|
|
<span class="skill-stats">${_auditMarks(sk)}<span class="skill-conf" style="color:${confColor};">${conf}%</span> · ${uses}u</span>
|
|
<span class="skill-chevron-up" title="Collapse"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg></span>
|
|
<button class="skill-kebab-btn" title="Actions" aria-label="Actions"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="12" cy="19" r="1.6"/></svg></button>
|
|
</div>
|
|
`;
|
|
card.appendChild(header);
|
|
|
|
// Kebab dropdown (collapsed-bar quick actions: same set + icons as the
|
|
// expanded footer). Clicking the kebab opens it; it doesn't expand.
|
|
header.querySelector('.skill-kebab-btn').addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
_openSkillMenu(e.currentTarget, card, sk, name, isPublished);
|
|
});
|
|
|
|
// Preview (hidden until expanded) — SKILL.md goes here + footer.
|
|
const preview = document.createElement('div');
|
|
preview.className = 'doclib-card-preview skill-card-preview';
|
|
const pre = document.createElement('pre');
|
|
pre.className = 'skill-md-pre';
|
|
pre.textContent = ''; // filled on expand
|
|
preview.appendChild(pre);
|
|
|
|
// Footer: Approve/Unpublish on the left, destructive delete on the right.
|
|
const actions = document.createElement('div');
|
|
actions.className = 'doclib-card-expanded-actions';
|
|
|
|
const delBtn = document.createElement('button');
|
|
delBtn.className = 'doclib-card-text-btn doclib-card-action-btn doclib-card-text-btn-danger';
|
|
delBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>Delete';
|
|
delBtn.addEventListener('click', (e) => { e.stopPropagation(); _deleteSkill(name, card); });
|
|
|
|
const editBtn = document.createElement('button');
|
|
editBtn.className = 'doclib-card-text-btn doclib-card-action-btn';
|
|
editBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>Edit';
|
|
editBtn.addEventListener('click', (e) => { e.stopPropagation(); _toggleSkillEdit(card, name); });
|
|
|
|
const pubBtn = document.createElement('button');
|
|
pubBtn.className = 'doclib-card-text-btn doclib-card-action-btn';
|
|
if (isPublished) {
|
|
pubBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg>Unpublish';
|
|
pubBtn.title = 'Move back to draft';
|
|
pubBtn.addEventListener('click', (e) => { e.stopPropagation(); _setSkillStatus(name, 'draft'); });
|
|
} else {
|
|
pubBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Publish';
|
|
pubBtn.title = 'Publish — appears in the skills index';
|
|
pubBtn.style.color = 'var(--color-success, #4caf50)';
|
|
pubBtn.addEventListener('click', (e) => { e.stopPropagation(); _setSkillStatus(name, 'published'); });
|
|
}
|
|
|
|
// Test/audit this one skill — same action that's in the kebab, surfaced in
|
|
// the footer too so it's not buried under the "⋯" menu.
|
|
const testBtn = document.createElement('button');
|
|
testBtn.className = 'doclib-card-text-btn doclib-card-action-btn';
|
|
testBtn.innerHTML = _svg(_ICON.test, { size: 11 }) + 'Test';
|
|
testBtn.title = 'Test this skill — run it + AI judge';
|
|
testBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
// Immediate visual feedback: previously the click looked like nothing
|
|
// happened because _testSkill awaits a status fetch before overwriting
|
|
// the preview — so users would tap a second time. Mark the button as
|
|
// pending right away so the first tap is obviously registered.
|
|
if (testBtn.dataset.busy === '1') return; // also dedupe rapid double-tap
|
|
testBtn.dataset.busy = '1';
|
|
testBtn.disabled = true;
|
|
const _origHTML = testBtn.innerHTML;
|
|
testBtn.innerHTML = _svg(_ICON.test, { size: 11 }) + 'Starting…';
|
|
Promise.resolve(_testSkill(card, name)).finally(() => {
|
|
// The preview gets overwritten by _testSkill, which removes the
|
|
// testBtn from the DOM. The cleanup below only matters if the
|
|
// button still exists (e.g. _testSkill bailed early).
|
|
if (document.body.contains(testBtn)) {
|
|
testBtn.disabled = false;
|
|
testBtn.dataset.busy = '';
|
|
testBtn.innerHTML = _origHTML;
|
|
}
|
|
});
|
|
});
|
|
|
|
const rightGroup = document.createElement('div');
|
|
rightGroup.className = 'doclib-action-group';
|
|
const btnRow = document.createElement('div');
|
|
btnRow.className = 'doclib-action-btn-row';
|
|
btnRow.appendChild(testBtn);
|
|
btnRow.appendChild(editBtn);
|
|
btnRow.appendChild(delBtn);
|
|
rightGroup.appendChild(btnRow);
|
|
|
|
actions.appendChild(pubBtn);
|
|
actions.appendChild(rightGroup);
|
|
preview.appendChild(actions);
|
|
card.appendChild(preview);
|
|
|
|
// Click to expand/collapse (unless in select mode → toggle checkbox).
|
|
card.addEventListener('click', (e) => {
|
|
if (card._suppressNextClick) { card._suppressNextClick = false; return; }
|
|
if (e.target.closest('button, input, textarea')) return;
|
|
if (_selectMode) {
|
|
const cb = card.querySelector('.skill-select-cb');
|
|
if (cb) { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); }
|
|
return;
|
|
}
|
|
_expandSkillCard(card, name);
|
|
});
|
|
|
|
// Long-press anywhere on the card opens the kebab dropdown — mirrors the
|
|
// documents library + brain memory pattern. Skip when touch starts on a
|
|
// button/input so per-control handlers keep working.
|
|
{
|
|
const kebab = header.querySelector('.skill-kebab-btn');
|
|
let hold = null;
|
|
let start = null;
|
|
const _lpCancel = () => { if (hold) { clearTimeout(hold); hold = null; } start = null; };
|
|
card.addEventListener('pointerdown', (e) => {
|
|
if (e.target.closest('.skill-kebab-btn, .skill-select-cb, button, input, textarea')) return;
|
|
start = { x: e.clientX, y: e.clientY };
|
|
hold = setTimeout(() => {
|
|
hold = null;
|
|
card._suppressNextClick = true;
|
|
setTimeout(() => { card._suppressNextClick = false; }, 400);
|
|
if (navigator.vibrate) try { navigator.vibrate(15); } catch {}
|
|
if (kebab) kebab.click();
|
|
}, 500);
|
|
});
|
|
card.addEventListener('pointermove', (e) => {
|
|
if (!start) return;
|
|
if (Math.hypot(e.clientX - start.x, e.clientY - start.y) > 10) _lpCancel();
|
|
});
|
|
card.addEventListener('pointerup', _lpCancel);
|
|
card.addEventListener('pointercancel', _lpCancel);
|
|
}
|
|
|
|
cards.push(card);
|
|
}
|
|
container.innerHTML = '';
|
|
|
|
// Two collapsible sections — "Your skills" and "Built-in". Headers and
|
|
// cards are all DIRECT children of the grid (cards tagged with
|
|
// data-skill-section) so the global expand rule — which hides sibling
|
|
// .doclib-card elements by direct-child selector — keeps working.
|
|
// Collapse just toggles display on the tagged cards.
|
|
const _mkSectionHeader = (sectionId, title, count) => {
|
|
const collapsed = _collapsedSections.has(sectionId);
|
|
const hdr = document.createElement('div');
|
|
hdr.className = 'skills-section-label skills-section-header' + (collapsed ? ' collapsed' : '');
|
|
hdr.dataset.section = sectionId;
|
|
hdr.innerHTML =
|
|
`<svg class="skills-section-chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>` +
|
|
`<span>${esc(title)}</span>` +
|
|
`<span class="skills-section-count">${count}</span>`;
|
|
hdr.addEventListener('click', () => {
|
|
if (_collapsedSections.has(sectionId)) _collapsedSections.delete(sectionId);
|
|
else _collapsedSections.add(sectionId);
|
|
_saveCollapsedSections();
|
|
_applySectionCollapse(container);
|
|
});
|
|
return hdr;
|
|
};
|
|
|
|
// "Your skills" section — show the header only when there's also a
|
|
// built-in section to distinguish from (otherwise it's just the list).
|
|
if (cards.length) {
|
|
if (showBuiltin) container.appendChild(_mkSectionHeader('user', 'Your skills', cards.length));
|
|
cards.forEach(c => { c.dataset.skillSection = 'user'; container.appendChild(c); });
|
|
}
|
|
|
|
// Built-in capabilities — read-only cards (the agent's native tools).
|
|
if (showBuiltin) {
|
|
const builtinCards = _buildBuiltinCards();
|
|
container.appendChild(_mkSectionHeader('builtin', 'Built-in capabilities', builtinCards.length));
|
|
builtinCards.forEach(c => { c.dataset.skillSection = 'builtin'; container.appendChild(c); });
|
|
}
|
|
|
|
_applySectionCollapse(container);
|
|
|
|
// Domino-in cascade when the Skills tab is (re)opened — same sleek
|
|
// staggered entrance the document/chat library uses (.doclib-just-opened
|
|
// → section-domino-in on each .doclib-card child). Only consumes the flag
|
|
// set on tab-open, so search/sort/edit re-renders stay instant.
|
|
if (_cascadeNext && cards.length) {
|
|
_cascadeNext = false;
|
|
_playSkillsCascade(container);
|
|
}
|
|
|
|
// Select-mode checkbox wiring (card-body click is handled in the card's
|
|
// own click listener above).
|
|
if (_selectMode) {
|
|
container.querySelectorAll('.skill-select-cb').forEach(cb => {
|
|
cb.addEventListener('change', () => {
|
|
const name = cb.dataset.name;
|
|
if (cb.checked) _selectedNames.add(name); else _selectedNames.delete(name);
|
|
const all = document.getElementById('skills-select-all');
|
|
if (all) {
|
|
const visible = _getFilteredSkills().map(s => s.name || s.id);
|
|
all.checked = visible.length > 0 && visible.every(n => _selectedNames.has(n));
|
|
}
|
|
_updateBulkBar();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Background-load the visible skills' SKILL.md so expanding any of them is
|
|
// instant (no first-time async fetch → no jump). Deferred so it never
|
|
// competes with the render/cascade paint.
|
|
setTimeout(_preloadVisibleMarkdown, 0);
|
|
}
|
|
|
|
// ---- Card expand / edit / actions ----
|
|
|
|
// Collapse an expanded skill card: drop the class AND clear the inline
|
|
// heights skills.js pinned on the card/preview/<pre> (otherwise a collapsed
|
|
// card keeps its full expanded height) and detach its resize listener.
|
|
function _collapseSkillCardEl(c) {
|
|
c.classList.remove('doclib-card-expanded', 'skill-expand-instant');
|
|
c.style.removeProperty('height');
|
|
const pv = c.querySelector('.doclib-card-preview');
|
|
const pr = c.querySelector('.skill-md-pre') || c.querySelector('.skill-md-editor');
|
|
if (pv) { pv.style.removeProperty('height'); pv.style.removeProperty('flex'); pv.style.removeProperty('max-height'); }
|
|
if (pr) { pr.style.removeProperty('height'); pr.style.removeProperty('flex'); }
|
|
if (c._fillH) window.removeEventListener('resize', c._fillH);
|
|
}
|
|
|
|
async function _expandSkillCard(card, name) {
|
|
const grid = card.closest('.doclib-grid');
|
|
const adminCard = card.closest('.admin-card');
|
|
// Toggle collapse if already open.
|
|
if (card.classList.contains('doclib-card-expanded')) {
|
|
_collapseSkillCardEl(card);
|
|
if (adminCard) adminCard.classList.remove('skills-has-expanded');
|
|
return;
|
|
}
|
|
// Were we already showing another expanded card? If so this is a SWITCH,
|
|
// not a fresh open — skip the fade-in. The fade reveals the previous card
|
|
// collapsing behind the new (semi-transparent) one, which read as a jump.
|
|
const switching = !!(grid && grid.querySelector('.doclib-card-expanded'));
|
|
// Collapse any other expanded sibling (full cleanup, not just the class).
|
|
if (grid) grid.querySelectorAll('.doclib-card-expanded').forEach(_collapseSkillCardEl);
|
|
card.classList.add('doclib-card-expanded');
|
|
if (switching) card.classList.add('skill-expand-instant');
|
|
// Explicit class on the admin-card so CSS doesn't depend on :has()
|
|
// (Firefox mobile builds without :has left the expand at ~50%).
|
|
if (adminCard) adminCard.classList.add('skills-has-expanded');
|
|
if (grid) grid.scrollTop = 0;
|
|
|
|
// Firefox doesn't treat the absolutely-positioned card's stretched height
|
|
// (inset:0) or height:100% as DEFINITE, so grid/flex children won't fill.
|
|
// Pin an explicit px height = the card's already-rendered height. A px
|
|
// value is unambiguously definite, so the preview + <pre> finally fill.
|
|
card._fillH = () => {
|
|
// Reset any prior inline heights so we measure the natural box first
|
|
// (and so switching desktop<->mobile never leaves stale px values).
|
|
card.style.removeProperty('height');
|
|
const preview = card.querySelector('.doclib-card-preview');
|
|
const header = card.querySelector('.skill-card-header');
|
|
const pre = card.querySelector('.skill-md-pre') || card.querySelector('.skill-md-editor');
|
|
if (preview) { preview.style.removeProperty('height'); preview.style.removeProperty('flex'); preview.style.removeProperty('max-height'); }
|
|
if (pre) { pre.style.removeProperty('height'); pre.style.removeProperty('flex'); }
|
|
|
|
// The px-pinning is ONLY for the mobile layout (position:absolute fill,
|
|
// where Firefox won't propagate a definite height). On desktop the card
|
|
// expands via normal flex/flow — pinning measured heights there just
|
|
// under-sizes it. So bail on desktop and let the CSS handle it.
|
|
if (!window.matchMedia('(max-width: 768px)').matches) return;
|
|
|
|
const cardH = card.getBoundingClientRect().height;
|
|
if (cardH <= 0) return;
|
|
card.style.setProperty('height', cardH + 'px', 'important');
|
|
if (!preview) return;
|
|
|
|
const px = (el, prop) => parseFloat(getComputedStyle(el)[prop]) || 0;
|
|
const headerH = header ? header.getBoundingClientRect().height : 0;
|
|
const cardPad = px(card, 'paddingTop') + px(card, 'paddingBottom');
|
|
const previewH = Math.max(0, cardH - headerH - cardPad);
|
|
// Force the preview to an explicit height (flex:none so nothing fights it).
|
|
// A max-height (~335px, resolved from a % rule) was capping it — clear it.
|
|
preview.style.setProperty('flex', '0 0 auto', 'important');
|
|
preview.style.setProperty('max-height', 'none', 'important');
|
|
preview.style.setProperty('height', previewH + 'px', 'important');
|
|
|
|
if (pre) {
|
|
// Pre = preview height minus its non-pre siblings (footer, warn banner).
|
|
const prevPad = px(preview, 'paddingTop') + px(preview, 'paddingBottom');
|
|
let siblings = 0;
|
|
for (const child of preview.children) {
|
|
if (child !== pre) siblings += child.getBoundingClientRect().height;
|
|
}
|
|
const preH = Math.max(0, previewH - prevPad - siblings);
|
|
pre.style.setProperty('height', preH + 'px', 'important');
|
|
pre.style.setProperty('flex', '0 0 auto', 'important');
|
|
}
|
|
};
|
|
// Size SYNCHRONOUSLY (not in rAF) so the pinned heights are in place before
|
|
// the browser's first paint of the expanded card. Running it a frame later
|
|
// let the first frame paint at content-height, then snap — the "explosion"
|
|
// that showed on the first expand (when the SKILL.md was still loading).
|
|
card._fillH();
|
|
window.addEventListener('resize', card._fillH);
|
|
|
|
const pre = card.querySelector('.skill-md-pre');
|
|
if (pre && !card._mdLoaded) {
|
|
// Use the cache when available (the bg preload usually has it already),
|
|
// so the content is in place synchronously — no async settle/jump.
|
|
if (_mdCache.has(name)) {
|
|
const md = _mdCache.get(name);
|
|
pre.textContent = md || '(empty)';
|
|
card._mdLoaded = true;
|
|
card._md = md || '';
|
|
} else {
|
|
pre.textContent = 'Loading…';
|
|
try {
|
|
const md = await _fetchSkillMarkdown(name);
|
|
pre.textContent = md || '(empty)';
|
|
card._mdLoaded = true;
|
|
card._md = md;
|
|
} catch (e) {
|
|
pre.textContent = 'Failed to load SKILL.md';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Swap the read-only <pre> for an editable <textarea> (and back). The
|
|
// Edit button toggles; a Save button commits via the markdown endpoint.
|
|
function _toggleSkillEdit(card, name) {
|
|
const preview = card.querySelector('.skill-card-preview');
|
|
if (!preview) return;
|
|
const existing = preview.querySelector('.skill-md-editor');
|
|
if (existing) {
|
|
// Already editing — treat Edit as Save.
|
|
_saveSkillEdit(card, name);
|
|
return;
|
|
}
|
|
const pre = preview.querySelector('.skill-md-pre');
|
|
const ta = document.createElement('textarea');
|
|
ta.className = 'skill-md-editor';
|
|
ta.spellcheck = false;
|
|
ta.value = (card._md != null ? card._md : (pre ? pre.textContent : '')) || '';
|
|
ta.addEventListener('click', (e) => e.stopPropagation());
|
|
if (pre) pre.style.display = 'none';
|
|
preview.insertBefore(ta, preview.querySelector('.doclib-card-expanded-actions'));
|
|
ta.focus();
|
|
// Flip the Edit button label to "Save".
|
|
const editBtn = [...preview.querySelectorAll('.doclib-card-action-btn')].find(b => /Edit|Save/.test(b.textContent));
|
|
if (editBtn) editBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>Save';
|
|
}
|
|
|
|
async function _saveSkillEdit(card, name) {
|
|
const preview = card.querySelector('.skill-card-preview');
|
|
const ta = preview?.querySelector('.skill-md-editor');
|
|
if (!ta) return;
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/${encodeURIComponent(name)}/markdown`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ markdown: ta.value }),
|
|
});
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
// Refresh the cached markdown so the preload/expand show the new text.
|
|
_mdCache.set(name, ta.value);
|
|
uiModule.showToast('Saved');
|
|
await loadSkills(); // re-render (frontmatter changes like name/status may have changed)
|
|
} catch (e) {
|
|
uiModule.showError('Save failed: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function _deleteSkill(name, card = null) {
|
|
if (!(await uiModule.styledConfirm(`Delete skill "${name}"? This removes the SKILL.md.`, { confirmText: 'Delete', danger: true }))) return;
|
|
// Locate the card if the caller didn't hand one over, so we can collapse it
|
|
// away gracefully (same fade+shrink as the document library) instead of
|
|
// re-rendering the whole list.
|
|
if (!card) {
|
|
card = [...document.querySelectorAll('.skill-card')]
|
|
.find(c => { const n = c.querySelector('.skill-card-name'); return n && n.textContent === name; }) || null;
|
|
}
|
|
try {
|
|
await fetch(`${API}/api/skills/${encodeURIComponent(name)}`, { method: 'DELETE' });
|
|
_mdCache.delete(name);
|
|
if (card) {
|
|
if (card._testPoll) { clearInterval(card._testPoll); card._testPoll = null; }
|
|
_setCardRunning(card, false);
|
|
card.classList.add('doclib-card-deleting');
|
|
card.addEventListener('transitionend', () => card.remove(), { once: true });
|
|
setTimeout(() => { if (card.parentElement) card.remove(); }, 400);
|
|
} else {
|
|
await loadSkills();
|
|
}
|
|
uiModule.showToast('Skill deleted');
|
|
} catch (e) { uiModule.showError('Delete failed: ' + e.message); }
|
|
}
|
|
|
|
async function _setSkillStatus(name, status) {
|
|
try {
|
|
await fetch(`${API}/api/skills/${encodeURIComponent(name)}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ status }),
|
|
});
|
|
await loadSkills();
|
|
uiModule.showToast(status === 'published' ? 'Skill approved' : 'Skill moved to draft');
|
|
} catch (e) { uiModule.showError('Update failed: ' + e.message); }
|
|
}
|
|
|
|
// ---- Test a skill (sandbox agent run + AI eval) ----
|
|
|
|
async function _fetchTestStatus(name) {
|
|
try {
|
|
const r = await fetch(`${API}/api/skills/${encodeURIComponent(name)}/test-status`);
|
|
return r.ok ? await r.json() : { status: 'none' };
|
|
} catch { return { status: 'none' }; }
|
|
}
|
|
|
|
function _renderTestLog(logEl, verdictEl, job, card, name) {
|
|
if (!logEl) return;
|
|
logEl.innerHTML = '';
|
|
const add = (txt, cls) => { const d = document.createElement('div'); if (cls) d.className = cls; d.textContent = txt; logEl.appendChild(d); };
|
|
for (const ev of (job.log || [])) {
|
|
if (ev.type === 'skill_test_start') { add('Task: ' + ev.task, 'skill-test-task'); add('Model: ' + ev.model, 'skill-test-meta'); }
|
|
else if (ev.type === 'agent_step') add('— round ' + ev.round + ' —', 'skill-test-round');
|
|
else if (ev.type === 'tool_start') add('▸ ' + ev.tool + ' ' + String(ev.command || '').slice(0, 200), 'skill-test-tool');
|
|
else if (ev.type === 'tool_output') add(String(ev.output || '').slice(0, 500), 'skill-test-out');
|
|
else if (ev.type === 'say') add(ev.text || '', 'skill-test-say');
|
|
else if (ev.type === 'evaluating') add('Evaluating run…', 'skill-test-meta');
|
|
else if (ev.type === 'error') add('Error: ' + (ev.error || 'run failed'), 'skill-test-err');
|
|
}
|
|
if (job.status === 'running') add('…running (you can close this — it keeps going)', 'skill-test-meta');
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|
if (job.status === 'done' && job.verdict) _renderTestVerdict(verdictEl, job.verdict, card, name);
|
|
else if (verdictEl) verdictEl.innerHTML = '';
|
|
}
|
|
|
|
// `force` = start a fresh run even if a finished result already exists (Retry).
|
|
async function _testSkill(card, name, force = false) {
|
|
if (!card.classList.contains('doclib-card-expanded')) await _expandSkillCard(card, name);
|
|
const preview = card.querySelector('.skill-card-preview');
|
|
if (!preview) return;
|
|
preview.innerHTML =
|
|
'<div class="skill-test"><div class="skill-test-log"></div>' +
|
|
'<div class="skill-test-verdict"></div></div>';
|
|
const logEl = preview.querySelector('.skill-test-log');
|
|
const verdictEl = preview.querySelector('.skill-test-verdict');
|
|
if (card._testPoll) { clearInterval(card._testPoll); card._testPoll = null; }
|
|
|
|
// Attach to an existing job unless forcing a fresh run.
|
|
let job = force ? { status: 'none' } : await _fetchTestStatus(name);
|
|
|
|
if (job.status === 'none') {
|
|
logEl.innerHTML = '<div class="skill-test-meta">Starting test…</div>';
|
|
let model = '', endpoint_url = '';
|
|
try {
|
|
const sm = window.sessionModule;
|
|
model = (sm && sm.getCurrentModel && sm.getCurrentModel()) || '';
|
|
endpoint_url = (sm && sm.getCurrentEndpointUrl && sm.getCurrentEndpointUrl()) || '';
|
|
} catch (_) {}
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/${encodeURIComponent(name)}/test`, {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ model, endpoint_url }),
|
|
});
|
|
if (!res.ok) { logEl.innerHTML = '<div class="skill-test-err">Test failed: HTTP ' + res.status + '</div>'; return; }
|
|
} catch (e) { logEl.innerHTML = '<div class="skill-test-err">Test failed: ' + (e.message || e) + '</div>'; return; }
|
|
job = await _fetchTestStatus(name);
|
|
}
|
|
|
|
_renderTestLog(logEl, verdictEl, job, card, name);
|
|
_setCardRunning(card, job.status === 'running');
|
|
|
|
if (job.status === 'running') {
|
|
card._testPoll = setInterval(async () => {
|
|
// Keep polling even if the card is collapsed (the test runs server-side);
|
|
// only stop once the card itself is gone from the DOM.
|
|
if (!document.body.contains(card)) { clearInterval(card._testPoll); card._testPoll = null; _setCardRunning(card, false); return; }
|
|
const s = await _fetchTestStatus(name);
|
|
// Update the expanded log only while it's still on screen.
|
|
if (document.body.contains(logEl)) _renderTestLog(logEl, verdictEl, s, card, name);
|
|
if (s.status !== 'running') {
|
|
clearInterval(card._testPoll); card._testPoll = null;
|
|
_setCardRunning(card, false);
|
|
// If the log isn't visible (card was collapsed), still update the
|
|
// header dot/% so the result shows on the folded card.
|
|
if (!document.body.contains(logEl) && s.verdict && s.verdict.verdict) {
|
|
_applyVerdictToHeader(card, s.verdict.verdict);
|
|
}
|
|
}
|
|
}, 1300);
|
|
}
|
|
}
|
|
|
|
// Show/hide the app-wide whirlpool spinner next to the skill name while a test
|
|
// is in flight. Works on the collapsed header too, since we inject a real DOM
|
|
// element rather than a CSS pseudo on a class.
|
|
function _setCardRunning(card, on) {
|
|
if (!card) return;
|
|
card.classList.toggle('skill-test-running', !!on);
|
|
if (on) {
|
|
if (card._testSpinner) return;
|
|
const nameEl = card.querySelector('.skill-card-name');
|
|
if (!nameEl) return;
|
|
const wp = spinnerModule.createWhirlpool(12);
|
|
wp.element.style.cssText = 'display:inline-flex;width:12px;height:12px;margin:0 0 0 7px;vertical-align:middle;flex-shrink:0;';
|
|
// Append INSIDE the <code> name (inline-flow), not after it. The textcol
|
|
// is a flex column, so a sibling-after lands on its own line — putting
|
|
// the spinner inside the inline code keeps it on the title row.
|
|
nameEl.appendChild(wp.element);
|
|
card._testSpinner = wp;
|
|
} else if (card._testSpinner) {
|
|
try { card._testSpinner.destroy(); } catch (_) {}
|
|
if (card._testSpinner.element && card._testSpinner.element.parentElement) {
|
|
card._testSpinner.element.remove();
|
|
}
|
|
card._testSpinner = null;
|
|
}
|
|
}
|
|
|
|
// Reflect a test/audit verdict on the (possibly collapsed) card header without
|
|
// a full reload: the glowing audit dot, the confidence %, and the pass check.
|
|
// Works whether the card is expanded or folded so a test that finishes after
|
|
// you collapse still updates the card.
|
|
function _applyVerdictToHeader(card, verdict) {
|
|
if (!card || !verdict) return;
|
|
const dotColor = {
|
|
pass: 'var(--color-success, #4ade80)',
|
|
needs_work: 'var(--color-warning, #f0ad4e)',
|
|
inconclusive: 'var(--color-warning, #f0ad4e)',
|
|
fail: 'var(--color-danger, #e06c75)',
|
|
}[verdict];
|
|
// Audit dot removed at user request — strip any pre-existing one so the
|
|
// post-audit live update doesn't leave a stale dot from an old render.
|
|
const header = card.querySelector('.skill-card-header');
|
|
if (header) {
|
|
header.querySelectorAll('.skill-audit-dot').forEach(n => n.remove());
|
|
}
|
|
const newConf = { pass: 95, needs_work: 60, fail: 40 }[verdict];
|
|
const statsEl = card.querySelector('.skill-stats');
|
|
if (statsEl && newConf != null) {
|
|
const confEl = statsEl.querySelector('.skill-conf');
|
|
if (confEl) { confEl.textContent = newConf + '%'; confEl.style.color = _confColor(newConf); }
|
|
}
|
|
// Fold the verdict into the status (draft / published) pill — colour the
|
|
// pill itself and append a tiny check/warn/cross glyph so the audit result
|
|
// lives next to the label instead of dangling in the stats row.
|
|
const pill = card.querySelector('.skill-status-pill');
|
|
if (pill) {
|
|
// Inline glyphs for the per-verdict pill — appear next to the "checked"
|
|
// label so the verdict reads as a real badge.
|
|
const ICON = {
|
|
pass: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="20 6 9 17 4 12"/></svg>',
|
|
needs_work: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="17" x2="12" y2="17"/></svg>',
|
|
inconclusive: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="17" x2="12" y2="17"/></svg>',
|
|
fail: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
|
|
}[verdict];
|
|
// Wash the pill's bg + tint the text so a glance at the badge tells you
|
|
// pass/needs-work/fail without expanding the card.
|
|
const tint = {
|
|
pass: { bg: 'color-mix(in srgb, var(--color-success, #4ade80) 30%, transparent)', fg: 'var(--color-success, #4ade80)' },
|
|
needs_work: { bg: 'color-mix(in srgb, var(--color-warning, #f0ad4e) 30%, transparent)', fg: 'var(--color-warning, #f0ad4e)' },
|
|
inconclusive: { bg: 'color-mix(in srgb, var(--color-warning, #f0ad4e) 30%, transparent)', fg: 'var(--color-warning, #f0ad4e)' },
|
|
fail: { bg: 'color-mix(in srgb, var(--color-danger, #e06c75) 30%, transparent)', fg: 'var(--color-danger, #e06c75)' },
|
|
}[verdict];
|
|
// The status pill (draft / published) keeps its own colours now — the
|
|
// verdict lives in a separate "checked" pill that's inserted next to it.
|
|
// Remove any prior audit glyph (was previously inserted inside the pill;
|
|
// now scrub both the in-pill and sibling locations on every refresh).
|
|
pill.querySelectorAll('.skill-pill-verdict').forEach(n => n.remove());
|
|
if (pill.parentElement) {
|
|
pill.parentElement.querySelectorAll(':scope > .skill-pill-verdict').forEach(n => n.remove());
|
|
}
|
|
if (ICON) {
|
|
// Full "checked" pill badge — sits LEFT of the draft/published pill,
|
|
// styled like the other memory-cat-badges so it reads as a real chip.
|
|
const span = document.createElement('span');
|
|
span.className = 'memory-cat-badge skill-pill-verdict';
|
|
span.title = 'Audited: ' + verdict.replace(/_/g, ' ');
|
|
span.innerHTML = ICON + '<span>checked</span>';
|
|
if (tint) {
|
|
span.style.background = tint.bg;
|
|
span.style.color = tint.fg;
|
|
}
|
|
if (pill.parentElement) {
|
|
pill.parentElement.insertBefore(span, pill);
|
|
} else {
|
|
pill.insertAdjacentElement('beforebegin', span);
|
|
}
|
|
}
|
|
}
|
|
// Old free-floating .skill-verified check (next to confidence %) is no
|
|
// longer added — the pill carries the verdict glyph now. Remove a stale
|
|
// one in case the card was rendered by an earlier build.
|
|
card.querySelectorAll('.skill-verified').forEach(n => n.remove());
|
|
}
|
|
|
|
function _renderTestVerdict(el, v, card, name) {
|
|
if (!el) return;
|
|
const verdict = (v && v.verdict) || 'unknown';
|
|
const cls = { pass: 'ok', needs_work: 'warn', fail: 'bad', inconclusive: 'unknown' }[verdict] || 'unknown';
|
|
const label = { pass: 'PASS', needs_work: 'NEEDS WORK', fail: 'FAIL', inconclusive: 'INCONCLUSIVE', unknown: 'UNCLEAR' }[verdict] || 'UNCLEAR';
|
|
const conf = v && typeof v.confidence === 'number' ? Math.round(v.confidence * 100) + '%' : '';
|
|
const issues = Array.isArray(v && v.issues) ? v.issues : [];
|
|
// Reflect the skill's current state: if it's already published, the button
|
|
// confirms "Approved" (click to unpublish) rather than offering to approve.
|
|
const isPub = card && card.dataset && card.dataset.skillStatus === 'published';
|
|
const approveLabel = isPub ? 'Approved' : 'Approve';
|
|
const approveCls = 'skill-eval-approve' + (isPub ? ' is-approved' : (verdict === 'pass' ? ' suggested' : ''));
|
|
const approveTitle = isPub ? 'Already approved — click to unpublish' : 'Publish — appears in the skills index';
|
|
el.innerHTML =
|
|
'<div class="skill-eval-head"><span class="skill-eval-badge skill-eval-' + cls + '">' + label + (conf ? ' · ' + conf : '') + '</span>' +
|
|
'<span class="skill-eval-summary">' + esc((v && v.summary) || '') + '</span></div>' +
|
|
(issues.length ? '<ul class="skill-eval-issues">' + issues.map(i => '<li>' + esc(i) + '</li>').join('') + '</ul>' : '') +
|
|
'<div class="doclib-card-expanded-actions skill-eval-actions-wrap">' +
|
|
'<button class="doclib-card-text-btn doclib-card-action-btn ' + approveCls + '" data-act="approve" title="' + approveTitle + '">' + approveLabel + '</button>' +
|
|
'<div class="doclib-action-group"><div class="doclib-action-btn-row">' +
|
|
'<button class="doclib-card-text-btn doclib-card-action-btn" data-act="retry" title="Run the test again">Retry</button>' +
|
|
'<button class="doclib-card-text-btn doclib-card-action-btn" data-act="copy" title="Copy the run output + verdict">Copy</button>' +
|
|
'<button class="doclib-card-text-btn doclib-card-action-btn" data-act="edit">Edit</button>' +
|
|
'<button class="doclib-card-text-btn doclib-card-action-btn doclib-card-text-btn-danger" data-act="del"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>Delete</button>' +
|
|
'</div></div>' +
|
|
'</div>';
|
|
_applyVerdictToHeader(card, verdict);
|
|
el.querySelector('[data-act="approve"]')?.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
const nowPub = card.dataset.skillStatus === 'published';
|
|
await _setSkillStatus(name, nowPub ? 'draft' : 'published');
|
|
// _setSkillStatus reloads the list, but if this card survives, relabel it.
|
|
card.dataset.skillStatus = nowPub ? 'draft' : 'published';
|
|
const btn = el.querySelector('[data-act="approve"]');
|
|
if (btn) {
|
|
const pub = card.dataset.skillStatus === 'published';
|
|
btn.textContent = pub ? 'Approved' : 'Approve';
|
|
btn.title = pub ? 'Already approved — click to unpublish' : 'Publish — appears in the skills index';
|
|
btn.classList.toggle('is-approved', pub);
|
|
btn.classList.toggle('suggested', !pub && verdict === 'pass');
|
|
}
|
|
});
|
|
el.querySelector('[data-act="del"]')?.addEventListener('click', (e) => { e.stopPropagation(); _deleteSkill(name, card); });
|
|
el.querySelector('[data-act="edit"]')?.addEventListener('click', (e) => { e.stopPropagation(); _toggleSkillEdit(card, name); });
|
|
el.querySelector('[data-act="retry"]')?.addEventListener('click', (e) => { e.stopPropagation(); _testSkill(card, name, true); });
|
|
el.querySelector('[data-act="copy"]')?.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const logEl = card.querySelector('.skill-test-log');
|
|
const issuesTxt = issues.length ? '\nIssues:\n- ' + issues.join('\n- ') : '';
|
|
const text = (logEl ? logEl.innerText.trim() + '\n\n' : '') +
|
|
'=== Eval: ' + label + (conf ? ' (' + conf + ')' : '') + ' ===\n' + ((v && v.summary) || '') + issuesTxt;
|
|
// Shared helper falls back to execCommand on plain HTTP (navigator.clipboard
|
|
// is unavailable in non-secure contexts, which is why the raw call failed).
|
|
uiModule.copyToClipboard(text);
|
|
});
|
|
}
|
|
|
|
// ---- Audit all skills (autonomous: test → fix → retry → teacher → flag) ----
|
|
|
|
let _auditPoll = null;
|
|
let _auditSeenResults = 0;
|
|
|
|
function _confirmAuditSkills(label) {
|
|
return new Promise(resolve => {
|
|
let overlay = document.getElementById('skills-audit-confirm-overlay');
|
|
if (!overlay) {
|
|
overlay = document.createElement('div');
|
|
overlay.id = 'skills-audit-confirm-overlay';
|
|
overlay.className = 'modal';
|
|
overlay.innerHTML =
|
|
'<div class="modal-content styled-confirm-box">' +
|
|
'<div class="modal-header"><h4>Audit Skills</h4></div>' +
|
|
'<div class="modal-body">' +
|
|
'<p id="skills-audit-confirm-msg"></p>' +
|
|
'<label class="memory-bulk-check-all" style="margin-top:10px;display:inline-flex;align-items:center;gap:7px;">' +
|
|
'<input type="checkbox" id="skills-audit-skip-audited" checked />' +
|
|
'<span>Skip already audited</span>' +
|
|
'</label>' +
|
|
'</div>' +
|
|
'<div class="modal-footer">' +
|
|
'<button id="skills-audit-confirm-cancel" class="confirm-btn confirm-btn-secondary">Cancel</button>' +
|
|
'<button id="skills-audit-confirm-ok" class="confirm-btn confirm-btn-primary">Audit</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
const msg = overlay.querySelector('#skills-audit-confirm-msg');
|
|
const skip = overlay.querySelector('#skills-audit-skip-audited');
|
|
const okBtn = overlay.querySelector('#skills-audit-confirm-ok');
|
|
const cancelBtn = overlay.querySelector('#skills-audit-confirm-cancel');
|
|
msg.textContent = `Audit ${label}? Each is tested from top to bottom, then published or moved to draft using your auto-approve confidence threshold.`;
|
|
skip.checked = true;
|
|
overlay.classList.remove('hidden');
|
|
overlay.style.display = '';
|
|
|
|
function cleanup(result) {
|
|
overlay.classList.add('hidden');
|
|
overlay.style.display = 'none';
|
|
okBtn.removeEventListener('click', onOk);
|
|
cancelBtn.removeEventListener('click', onCancel);
|
|
overlay.removeEventListener('click', onBackdrop);
|
|
document.removeEventListener('keydown', onKey);
|
|
resolve(result);
|
|
}
|
|
function onOk() { cleanup({ ok: true, skipAudited: !!skip.checked }); }
|
|
function onCancel() { cleanup({ ok: false, skipAudited: false }); }
|
|
function onBackdrop(e) { if (e.target === overlay) onCancel(); }
|
|
function onKey(e) {
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
cleanup({ ok: false, skipAudited: false });
|
|
}
|
|
}
|
|
|
|
okBtn.addEventListener('click', onOk);
|
|
cancelBtn.addEventListener('click', onCancel);
|
|
overlay.addEventListener('click', onBackdrop);
|
|
document.addEventListener('keydown', onKey);
|
|
okBtn.focus();
|
|
});
|
|
}
|
|
|
|
async function _auditAllSkills(opts = {}) {
|
|
const panel = document.getElementById('skills-audit-panel');
|
|
if (!panel) return;
|
|
// If a run is already going, just (re)attach to it.
|
|
let st = await _fetchAuditStatus();
|
|
if (st.status !== 'running') {
|
|
const explicitNames = Array.isArray(opts.names) ? opts.names.filter(Boolean) : null;
|
|
const visibleNames = _getFilteredSkills()
|
|
.map(sk => sk.name || sk.id)
|
|
.filter(Boolean);
|
|
const names = explicitNames || visibleNames;
|
|
const label = explicitNames
|
|
? `${names.length} selected ${names.length === 1 ? 'skill' : 'skills'}`
|
|
: `${names.length} visible ${names.length === 1 ? 'skill' : 'skills'}`;
|
|
if (!names.length) {
|
|
uiModule.showToast(explicitNames ? 'No selected skills to audit' : 'No visible skills to audit');
|
|
return;
|
|
}
|
|
const confirmed = await _confirmAuditSkills(label);
|
|
if (!confirmed.ok) return;
|
|
try {
|
|
const r = await fetch(`${API}/api/skills/audit-all`, {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ scope: explicitNames ? 'selected' : 'all', names, skip_audited: confirmed.skipAudited }),
|
|
});
|
|
if (!r.ok) { uiModule.showError('Audit failed to start (HTTP ' + r.status + ')'); return; }
|
|
st = await _fetchAuditStatus();
|
|
} catch (e) { uiModule.showError('Audit failed: ' + (e.message || e)); return; }
|
|
_auditSeenResults = 0;
|
|
}
|
|
panel.classList.remove('hidden');
|
|
_auditSeenResults = Math.min(_auditSeenResults, (st.results || []).length);
|
|
_renderAuditPanel(panel, st);
|
|
_applyAuditResults(st);
|
|
_highlightAuditCard(st.status === 'running' ? st.current : null);
|
|
if (_auditPoll) clearInterval(_auditPoll);
|
|
if (st.status === 'running') {
|
|
_auditPoll = setInterval(async () => {
|
|
const s = await _fetchAuditStatus();
|
|
_renderAuditPanel(panel, s);
|
|
_applyAuditResults(s);
|
|
_highlightAuditCard(s.status === 'running' ? s.current : null);
|
|
if (s.status !== 'running') {
|
|
clearInterval(_auditPoll); _auditPoll = null;
|
|
_highlightAuditCard(null);
|
|
loadSkills(); // refresh statuses (some may have been demoted/edited)
|
|
}
|
|
}, 1500);
|
|
}
|
|
}
|
|
|
|
function _findSkillCard(name) {
|
|
if (!name) return null;
|
|
return [...document.querySelectorAll('.skill-card[data-skill-name]')]
|
|
.find(c => c.dataset.skillName === name) || null;
|
|
}
|
|
|
|
function _mergeSkillState(state) {
|
|
if (!state || !state.name) return;
|
|
const idx = skills.findIndex(s => (s.name || s.id) === state.name);
|
|
if (idx >= 0) skills[idx] = { ...skills[idx], ...state };
|
|
}
|
|
|
|
function _applySkillStateToHeader(card, state, fallbackVerdict) {
|
|
if (!card) return;
|
|
const verdict = state?.audit_verdict || fallbackVerdict;
|
|
if (verdict) _applyVerdictToHeader(card, verdict);
|
|
if (state && typeof state.confidence === 'number') {
|
|
const conf = Math.round(state.confidence * 100);
|
|
const confEl = card.querySelector('.skill-conf');
|
|
if (confEl) { confEl.textContent = conf + '%'; confEl.style.color = _confColor(conf); }
|
|
}
|
|
if (state?.status) {
|
|
card.dataset.skillStatus = state.status;
|
|
const oldPill = card.querySelector('.skill-status-pill');
|
|
if (oldPill) {
|
|
const wrap = document.createElement('span');
|
|
wrap.innerHTML = _statusPill(state);
|
|
const next = wrap.firstElementChild;
|
|
if (next) oldPill.replaceWith(next);
|
|
}
|
|
}
|
|
const right = card.querySelector('.skill-card-right');
|
|
if (right && state) {
|
|
right.querySelectorAll('.skill-model-pill, .skill-necessity-pill').forEach(n => n.remove());
|
|
const stats = right.querySelector('.skill-stats');
|
|
const wrap = document.createElement('span');
|
|
wrap.innerHTML = _auditModelPills(state) + _necessityPill(state);
|
|
[...wrap.children].forEach(p => {
|
|
if (stats) right.insertBefore(p, stats);
|
|
else right.appendChild(p);
|
|
});
|
|
}
|
|
}
|
|
|
|
function _applyAuditResults(st) {
|
|
const results = st && Array.isArray(st.results) ? st.results : [];
|
|
if (!results.length) return;
|
|
for (const r of results.slice(_auditSeenResults)) {
|
|
const name = r && r.skill;
|
|
if (!name) continue;
|
|
const state = r.skill_state || null;
|
|
_mergeSkillState(state);
|
|
const verdict = state?.audit_verdict || r.verdict?.verdict || (r.result === 'flagged' ? 'fail' : null);
|
|
_applySkillStateToHeader(_findSkillCard(name), state, verdict);
|
|
}
|
|
_auditSeenResults = results.length;
|
|
}
|
|
|
|
// Make the card currently being audited glow, so it's obvious which one the
|
|
// "Audit now" run is processing. Pass null to clear all highlights.
|
|
function _highlightAuditCard(name) {
|
|
document.querySelectorAll('.skill-card.skill-audit-active')
|
|
.forEach(c => { c.classList.remove('skill-audit-active'); _setCardRunning(c, false); });
|
|
if (!name) return;
|
|
const card = _findSkillCard(name);
|
|
if (card) {
|
|
card.classList.add('skill-audit-active');
|
|
_setCardRunning(card, true);
|
|
card.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
}
|
|
}
|
|
|
|
async function _fetchAuditStatus() {
|
|
try {
|
|
const r = await fetch(`${API}/api/skills/audit-all/status`);
|
|
return r.ok ? await r.json() : { status: 'none' };
|
|
} catch { return { status: 'none' }; }
|
|
}
|
|
|
|
function _renderAuditPanel(panel, st) {
|
|
if (st.status === 'none') { panel.classList.add('hidden'); panel.innerHTML = ''; return; }
|
|
const done = st.done || 0, total = st.total || 0;
|
|
const pct = total ? Math.round((done / total) * 100) : 0;
|
|
const counts = {};
|
|
for (const r of (st.results || [])) counts[r.result] = (counts[r.result] || 0) + 1;
|
|
const summary = Object.entries(counts).map(([k, v]) => v + ' ' + k.replace(/_/g, ' ')).join(' · ');
|
|
const running = st.status === 'running';
|
|
const cancelled = st.status === 'cancelled';
|
|
const head = running
|
|
? `Auditing ${done}/${total}${st.current ? ' — ' + esc(st.current) : ''}`
|
|
: cancelled
|
|
? `Audit cancelled — ${done}/${total}`
|
|
: `Audit complete — ${total} skill${total === 1 ? '' : 's'}`;
|
|
panel.innerHTML =
|
|
'<div class="skills-audit-head">' +
|
|
'<span class="skills-audit-title-wrap" style="display:inline-flex;align-items:center;gap:8px;">' +
|
|
'<span class="skills-audit-title">' + head + '</span>' +
|
|
'</span>' +
|
|
(running
|
|
? '<button class="memory-toolbar-btn" data-act="audit-cancel">Cancel</button>'
|
|
: '<button class="memory-toolbar-btn" data-act="audit-close">Close</button>') +
|
|
'</div>' +
|
|
'<div class="skills-audit-bar"><div class="skills-audit-fill" style="width:' + pct + '%"></div></div>' +
|
|
(summary ? '<div class="skills-audit-summary">' + esc(summary) + (st.teacher ? ' · teacher: ' + esc(st.teacher) : '') + '</div>' : '') +
|
|
'<div class="skills-audit-log">' + (st.log || []).slice(-40).map(l => '<div>' + esc(l) + '</div>').join('') + '</div>';
|
|
// Whirlpool sits next to the title while the audit is actually running.
|
|
if (running) {
|
|
const titleWrap = panel.querySelector('.skills-audit-title-wrap');
|
|
if (titleWrap) {
|
|
const wp = spinnerModule.createWhirlpool(12);
|
|
wp.element.style.cssText = 'display:inline-flex;width:12px;height:12px;margin:0;vertical-align:middle;flex-shrink:0;';
|
|
titleWrap.appendChild(wp.element);
|
|
}
|
|
}
|
|
const cancel = panel.querySelector('[data-act="audit-cancel"]');
|
|
if (cancel) cancel.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
cancel.disabled = true;
|
|
cancel.textContent = 'Cancelling...';
|
|
try {
|
|
await fetch(`${API}/api/skills/audit-all/cancel`, { method: 'POST', credentials: 'same-origin' });
|
|
const s = await _fetchAuditStatus();
|
|
_renderAuditPanel(panel, { ...s, status: s.status === 'none' ? 'cancelled' : s.status });
|
|
_highlightAuditCard(null);
|
|
} catch {
|
|
cancel.disabled = false;
|
|
cancel.textContent = 'Cancel';
|
|
}
|
|
});
|
|
const close = panel.querySelector('[data-act="audit-close"]');
|
|
if (close) close.addEventListener('click', () => { panel.classList.add('hidden'); panel.innerHTML = ''; });
|
|
const logEl = panel.querySelector('.skills-audit-log');
|
|
if (logEl) logEl.scrollTop = logEl.scrollHeight;
|
|
}
|
|
|
|
// ---- Select mode / bulk actions ----
|
|
|
|
function _enterSelectMode() {
|
|
_selectMode = true;
|
|
_selectedNames.clear();
|
|
const bar = document.getElementById('skills-bulk-bar');
|
|
const btn = document.getElementById('skills-select-btn');
|
|
if (bar) bar.classList.remove('hidden');
|
|
if (btn) { btn.classList.add('active'); btn.textContent = 'Cancel'; }
|
|
_updateBulkBar();
|
|
renderSkillsList();
|
|
}
|
|
|
|
function _exitSelectMode() {
|
|
_selectMode = false;
|
|
_selectedNames.clear();
|
|
const bar = document.getElementById('skills-bulk-bar');
|
|
const btn = document.getElementById('skills-select-btn');
|
|
const all = document.getElementById('skills-select-all');
|
|
if (bar) bar.classList.add('hidden');
|
|
if (btn) { btn.classList.remove('active'); btn.textContent = 'Select'; }
|
|
if (all) all.checked = false;
|
|
renderSkillsList();
|
|
}
|
|
|
|
function _updateBulkBar() {
|
|
const countEl = document.getElementById('skills-selected-count');
|
|
const delBtn = document.getElementById('skills-bulk-delete');
|
|
const delNonPassingBtn = document.getElementById('skills-bulk-delete-nonpassing');
|
|
const pubBtn = document.getElementById('skills-bulk-publish');
|
|
const auditBtn = document.getElementById('skills-bulk-audit');
|
|
if (countEl) countEl.textContent = `${_selectedNames.size} Selected`;
|
|
if (delBtn) delBtn.disabled = _selectedNames.size === 0;
|
|
if (auditBtn) auditBtn.disabled = _selectedNames.size === 0;
|
|
if (delNonPassingBtn) {
|
|
const count = _selectedNonPassingSkills().length;
|
|
delNonPassingBtn.disabled = count === 0;
|
|
delNonPassingBtn.title = count
|
|
? `Delete ${count} selected non-passing ${count === 1 ? 'skill' : 'skills'}`
|
|
: 'No selected non-passing skills';
|
|
}
|
|
// Approve is only meaningful when at least one selected skill is still a draft.
|
|
const anyDraft = [..._selectedNames].some(n => {
|
|
const sk = skills.find(s => (s.name || s.id) === n);
|
|
return sk && (sk.status || 'draft') !== 'published';
|
|
});
|
|
if (pubBtn) pubBtn.disabled = !anyDraft;
|
|
}
|
|
|
|
function _toggleSelectAll() {
|
|
const all = document.getElementById('skills-select-all');
|
|
if (!all) return;
|
|
const visible = _getFilteredSkills().map(s => s.name || s.id);
|
|
if (all.checked) visible.forEach(n => _selectedNames.add(n));
|
|
else visible.forEach(n => _selectedNames.delete(n));
|
|
_updateBulkBar();
|
|
renderSkillsList();
|
|
}
|
|
|
|
async function _bulkDelete() {
|
|
if (!_selectedNames.size) return;
|
|
const n = _selectedNames.size;
|
|
const ok = await uiModule.styledConfirm(
|
|
`Delete ${n} ${n === 1 ? 'skill' : 'skills'}? This removes their SKILL.md files.`,
|
|
{ confirmText: 'Delete', danger: true }
|
|
);
|
|
if (!ok) return;
|
|
let deleted = 0;
|
|
const deletedNames = [];
|
|
for (const name of _selectedNames) {
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/${encodeURIComponent(name)}`, { method: 'DELETE' });
|
|
if (res.ok) {
|
|
deleted++;
|
|
deletedNames.push(name);
|
|
}
|
|
} catch {}
|
|
}
|
|
for (const name of deletedNames) {
|
|
const card = document.querySelector(`.skill-card[data-skill-name="${CSS.escape(name)}"]`);
|
|
if (card) card.classList.add('doclib-card-deleting');
|
|
}
|
|
if (deletedNames.length) await new Promise(resolve => setTimeout(resolve, 320));
|
|
_exitSelectMode();
|
|
await loadSkills();
|
|
uiModule.showToast(`Deleted ${deleted}`);
|
|
}
|
|
|
|
async function _loadSkillApprovalThreshold() {
|
|
try {
|
|
const res = await fetch(`${API}/api/prefs`, { credentials: 'same-origin' });
|
|
if (!res.ok) return;
|
|
const prefs = await res.json();
|
|
const raw = prefs.skill_min_confidence ?? prefs.skill_autosave_min_confidence;
|
|
const val = Number(raw);
|
|
if (Number.isFinite(val)) _skillApprovalThreshold = Math.max(0, Math.min(1, val));
|
|
} catch {}
|
|
}
|
|
|
|
function _selectedNonPassingSkills() {
|
|
const selected = new Set(_selectedNames);
|
|
return skills.filter(sk => {
|
|
const name = sk.name || sk.id;
|
|
if (!selected.has(name)) return false;
|
|
const conf = Number(sk.confidence || 0);
|
|
const necessity = _necessityKind(sk);
|
|
if (necessity === 'duplicate' || necessity === 'trivial' || necessity === 'irrelevant') return true;
|
|
if ((sk.audit_verdict || '') !== 'pass') return true;
|
|
return conf < _skillApprovalThreshold;
|
|
});
|
|
}
|
|
|
|
async function _bulkDeleteNonPassing() {
|
|
const targets = _selectedNonPassingSkills();
|
|
if (!targets.length) {
|
|
uiModule.showToast('No selected non-passing skills');
|
|
return;
|
|
}
|
|
const thresholdPct = Math.round(_skillApprovalThreshold * 100);
|
|
const names = targets.map(sk => sk.name || sk.id).filter(Boolean);
|
|
const ok = await uiModule.styledConfirm(
|
|
`Delete ${names.length} selected non-passing ${names.length === 1 ? 'skill' : 'skills'}? This removes duplicates, generic/irrelevant skills, failed audits, and anything below ${thresholdPct}%.`,
|
|
{ confirmText: 'Delete non passing', danger: true }
|
|
);
|
|
if (!ok) return;
|
|
let deleted = 0;
|
|
const deletedNames = [];
|
|
for (const name of names) {
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/${encodeURIComponent(name)}`, { method: 'DELETE' });
|
|
if (res.ok) {
|
|
deleted++;
|
|
deletedNames.push(name);
|
|
_mdCache.delete(name);
|
|
}
|
|
} catch {}
|
|
}
|
|
for (const name of deletedNames) {
|
|
const card = document.querySelector(`.skill-card[data-skill-name="${CSS.escape(name)}"]`);
|
|
if (card) card.classList.add('doclib-card-deleting');
|
|
}
|
|
if (deletedNames.length) await new Promise(resolve => setTimeout(resolve, 320));
|
|
_exitSelectMode();
|
|
await loadSkills();
|
|
uiModule.showToast(`Deleted ${deleted} non-passing`);
|
|
}
|
|
|
|
async function _bulkApprove() {
|
|
if (!_selectedNames.size) return;
|
|
let published = 0;
|
|
for (const name of _selectedNames) {
|
|
const sk = skills.find(s => (s.name || s.id) === name);
|
|
if (sk && sk.status === 'published') continue;
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/${encodeURIComponent(name)}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ status: 'published' }),
|
|
});
|
|
if (res.ok) published++;
|
|
} catch {}
|
|
}
|
|
_exitSelectMode();
|
|
await loadSkills();
|
|
uiModule.showToast(`Published ${published}`);
|
|
}
|
|
|
|
async function _bulkAudit() {
|
|
if (!_selectedNames.size) return;
|
|
const selected = new Set(_selectedNames);
|
|
const ordered = _getFilteredSkills()
|
|
.map(sk => sk.name || sk.id)
|
|
.filter(n => selected.has(n));
|
|
_exitSelectMode();
|
|
await _auditAllSkills({ names: ordered });
|
|
}
|
|
|
|
async function _showSkillSource(name) {
|
|
let md = '';
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/${encodeURIComponent(name)}/markdown`);
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const data = await res.json();
|
|
md = data.markdown || '';
|
|
} catch (e) {
|
|
uiModule.showError('Failed to load SKILL.md');
|
|
return;
|
|
}
|
|
|
|
// Lightweight modal — reuses the .modal CSS the rest of the app uses.
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'modal';
|
|
wrap.style.display = 'block';
|
|
wrap.innerHTML = `
|
|
<div class="modal-content" style="max-width:760px;max-height:85vh;display:flex;flex-direction:column">
|
|
<div class="modal-header">
|
|
<h4>SKILL.md — <code>${esc(name)}</code></h4>
|
|
<span style="flex:1"></span>
|
|
<button class="memory-toolbar-btn" id="skill-save-btn">Save</button>
|
|
<button class="close-btn" id="skill-md-close">✖</button>
|
|
</div>
|
|
<div class="modal-body" style="display:flex;flex-direction:column;gap:8px">
|
|
<textarea id="skill-md-textarea" spellcheck="false" style="flex:1;min-height:50vh;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);box-sizing:border-box"></textarea>
|
|
<p class="memory-desc" style="margin:0">Edit the frontmatter and body directly. Save replaces the file via PUT /api/skills/{name}.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(wrap);
|
|
const ta = wrap.querySelector('#skill-md-textarea');
|
|
ta.value = md;
|
|
wrap.querySelector('#skill-md-close').addEventListener('click', () => wrap.remove());
|
|
wrap.addEventListener('click', (e) => { if (e.target === wrap) wrap.remove(); });
|
|
wrap.querySelector('#skill-save-btn').addEventListener('click', async () => {
|
|
try {
|
|
// We use the manage_skills-style edit by going through PUT with a
|
|
// single 'content' field. The route doesn't accept that yet — use the
|
|
// tool call instead. We have a /api/skills/{name} PUT for fields, but
|
|
// a full SKILL.md replace is simpler via the parsed-then-PUT approach
|
|
// below: parse client-side by uploading via the tool route.
|
|
const res = await fetch(`${API}/api/skills/${encodeURIComponent(name)}/markdown`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ markdown: ta.value }),
|
|
});
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
uiModule.showToast('Saved');
|
|
wrap.remove();
|
|
await loadSkills();
|
|
} catch (e) {
|
|
uiModule.showError('Save failed: ' + e.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function addSkill() {
|
|
const name = document.getElementById('new-skill-name')?.value.trim()
|
|
|| document.getElementById('new-skill-title')?.value.trim();
|
|
const description = document.getElementById('new-skill-description')?.value.trim()
|
|
|| document.getElementById('new-skill-title')?.value.trim();
|
|
const whenToUse = document.getElementById('new-skill-when')?.value.trim()
|
|
|| document.getElementById('new-skill-problem')?.value.trim() || '';
|
|
const procedureRaw = document.getElementById('new-skill-procedure')?.value.trim()
|
|
|| document.getElementById('new-skill-solution')?.value.trim() || '';
|
|
const tagsRaw = document.getElementById('new-skill-tags')?.value.trim();
|
|
const category = document.getElementById('new-skill-category')?.value.trim() || 'general';
|
|
|
|
if (!description && !name) {
|
|
uiModule.showError('Description (or name) is required');
|
|
return;
|
|
}
|
|
const procedure = procedureRaw
|
|
? procedureRaw.split('\n').map(s => s.replace(/^\s*(?:[-*]|\d+[.)])\s+/, '').trim()).filter(Boolean)
|
|
: [];
|
|
const tags = tagsRaw ? tagsRaw.split(',').map(t => t.trim()).filter(Boolean) : [];
|
|
|
|
try {
|
|
const res = await fetch(`${API}/api/skills/add`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: name || undefined,
|
|
description,
|
|
category,
|
|
when_to_use: whenToUse,
|
|
procedure,
|
|
tags,
|
|
status: 'draft',
|
|
}),
|
|
});
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
['new-skill-name', 'new-skill-title', 'new-skill-description', 'new-skill-when',
|
|
'new-skill-problem', 'new-skill-procedure', 'new-skill-solution', 'new-skill-tags',
|
|
'new-skill-category']
|
|
.forEach(id => { const el = document.getElementById(id); if (el) el.value = ''; });
|
|
await loadSkills();
|
|
uiModule.showToast('Skill added (draft)');
|
|
} catch (err) {
|
|
uiModule.showError('Failed to add skill: ' + err.message);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.getElementById('add-skill-btn')?.addEventListener('click', addSkill);
|
|
document.getElementById('skills-search')?.addEventListener('input', renderSkillsList);
|
|
document.getElementById('skills-sort')?.addEventListener('change', (e) => {
|
|
// Dropdown holds two optgroups: Sort (sort:<key>) and Filter (filter:<key>).
|
|
// Picking a sort option leaves the filter alone, and vice-versa.
|
|
const v = e.target.value || '';
|
|
if (v.startsWith('sort:')) {
|
|
_skillsSort = v.slice(5);
|
|
} else if (v.startsWith('filter:')) {
|
|
const f = v.slice(7);
|
|
if (f === 'all') { _showDraftsOnly = false; _showPublishedOnly = false; _confMax = null; }
|
|
else if (f === 'drafts') { _showDraftsOnly = true; _showPublishedOnly = false; _confMax = null; }
|
|
else if (f === 'published') { _showPublishedOnly = true; _showDraftsOnly = false; _confMax = null; }
|
|
else if (f.startsWith('conf')) { _showDraftsOnly = false; _showPublishedOnly = false; _confMax = parseInt(f.slice(4), 10) || null; }
|
|
}
|
|
renderSkillsList();
|
|
});
|
|
document.getElementById('skills-select-btn')?.addEventListener('click', () => {
|
|
if (_selectMode) _exitSelectMode(); else _enterSelectMode();
|
|
});
|
|
document.getElementById('skills-audit-btn')?.addEventListener('click', _auditAllSkills);
|
|
document.getElementById('skills-select-all')?.addEventListener('change', _toggleSelectAll);
|
|
document.getElementById('skills-bulk-cancel')?.addEventListener('click', _exitSelectMode);
|
|
document.getElementById('skills-bulk-audit')?.addEventListener('click', _bulkAudit);
|
|
document.getElementById('skills-bulk-delete')?.addEventListener('click', _bulkDelete);
|
|
document.getElementById('skills-bulk-delete-nonpassing')?.addEventListener('click', _bulkDeleteNonPassing);
|
|
document.getElementById('skills-bulk-publish')?.addEventListener('click', _bulkApprove);
|
|
document.getElementById('new-skill-title')?.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') addSkill();
|
|
});
|
|
document.getElementById('new-skill-name')?.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') addSkill();
|
|
});
|
|
});
|
|
|
|
export default { loadSkills, openSkill };
|
|
|
|
// Populate the Skills badge on first load so the count is right before the
|
|
// user clicks into the tab. Cheap fetch — same as the lazy path.
|
|
document.addEventListener('DOMContentLoaded', () => { loadSkills(); });
|