78 lines
2.8 KiB
JavaScript
78 lines
2.8 KiB
JavaScript
async function renderPlugins() {
|
|
const content = document.getElementById('pageContent');
|
|
content.innerHTML = `
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">Plugin Registry</h1>
|
|
<p class="page-subtitle">Manage installed skills and plugins</p>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="showInstallPlugin()">+ Install</button>
|
|
</div>
|
|
<div id="pluginList"><div class="loading">Loading...</div></div>
|
|
<div id="installPluginForm" style="display:none"></div>
|
|
`;
|
|
|
|
try {
|
|
const data = await api.getPlugins();
|
|
const plugins = data.plugins || [];
|
|
const container = document.getElementById('pluginList');
|
|
|
|
if (plugins.length === 0) {
|
|
container.innerHTML = '<div class="empty-state"><div class="icon">🔌</div><h3>No plugins installed</h3></div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead><tr><th>Plugin</th><th>Version</th><th>Type</th><th>Installed</th></tr></thead>
|
|
<tbody>
|
|
${plugins.map(p => `
|
|
<tr>
|
|
<td><strong>${p.name}</strong></td>
|
|
<td><code>${p.version}</code></td>
|
|
<td><span class="badge badge-info">${p.type || 'unknown'}</span></td>
|
|
<td style="font-size:12px">${formatDate(p.installed)}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text2);text-align:right;margin-top:8px">${plugins.length} plugins</div>
|
|
`;
|
|
} catch (err) {
|
|
document.getElementById('pluginList').innerHTML = `<div class="empty-state"><div class="icon">⚠</div><p>${escapeHtml(err.message)}</p></div>`;
|
|
}
|
|
}
|
|
|
|
function showInstallPlugin() {
|
|
document.getElementById('installPluginForm').style.display = 'block';
|
|
document.getElementById('installPluginForm').innerHTML = `
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">Install Plugin</span></div>
|
|
<div class="form-group">
|
|
<label class="form-label">Plugin Name</label>
|
|
<input id="pluginName" placeholder="e.g., my-custom-skill">
|
|
</div>
|
|
<button class="btn btn-primary" onclick="installPlugin()">Install</button>
|
|
<button class="btn" onclick="cancelInstallPlugin()" style="margin-left:8px">Cancel</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async function installPlugin() {
|
|
const name = document.getElementById('pluginName').value.trim();
|
|
if (!name) { showToast('Plugin name required', 'error'); return; }
|
|
try {
|
|
const r = await api.installPlugin(name);
|
|
showToast(r.status === 'already_installed' ? 'Already installed' : 'Plugin installed', 'success');
|
|
renderPlugins();
|
|
} catch (err) {
|
|
showToast(`Error: ${err.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
function cancelInstallPlugin() {
|
|
document.getElementById('installPluginForm').style.display = 'none';
|
|
}
|