feat: plugin discovery, capability/contribution/permission registries, Plugin Manager UI
This commit is contained in:
@@ -0,0 +1,288 @@
|
||||
<script>
|
||||
export let p = {};
|
||||
export let capabilities = [];
|
||||
export let permissions = [];
|
||||
|
||||
$: m = p.manifest || {};
|
||||
|
||||
$: statusColor = ({
|
||||
loaded: '#4ecca3',
|
||||
degraded: '#ffc857',
|
||||
disabled: '#a0a0b8',
|
||||
failed: '#e94560',
|
||||
incompatible: '#e94560',
|
||||
'missing-required-capability': '#e94560',
|
||||
loading: '#ffc857',
|
||||
discovered: '#a0a0b8',
|
||||
}[p.status] || '#a0a0b8');
|
||||
|
||||
$: dangerousPermissions = (m.permissions || []).filter(name => {
|
||||
let perm = permissions.find(p => p.name === name);
|
||||
return perm && perm.dangerous;
|
||||
});
|
||||
|
||||
$: missingRequired = (m.requires || []).filter(req =>
|
||||
!capabilities.some(c => c.name === req)
|
||||
);
|
||||
|
||||
$: availableOptional = (m.optionalRequires || []).filter(opt =>
|
||||
capabilities.some(c => c.name === opt)
|
||||
);
|
||||
|
||||
$: missingOptional = (m.optionalRequires || []).filter(opt =>
|
||||
!capabilities.some(c => c.name === opt)
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="plugin-card" class:disabled={!p.enabled} class:failed={p.status === 'failed'}>
|
||||
<div class="card-header">
|
||||
<div class="plugin-id">
|
||||
<span class="status-dot" style="background: {statusColor}"></span>
|
||||
<strong>{m.id || 'unknown'}</strong>
|
||||
<span class="version">v{m.version || '?'}</span>
|
||||
</div>
|
||||
<span class="status-badge" style="color: {statusColor}">{p.status}</span>
|
||||
</div>
|
||||
|
||||
{#if m.description}
|
||||
<p class="description">{m.description}</p>
|
||||
{/if}
|
||||
|
||||
<div class="card-meta">
|
||||
<div class="meta-row">
|
||||
<span class="label">Name:</span>
|
||||
<span>{m.name || '-'}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="label">API Version:</span>
|
||||
<span>{m.apiVersion || '-'}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="label">Source:</span>
|
||||
<span>{m.source || 'unknown'}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="label">Root:</span>
|
||||
<span class="path">{p.rootPath || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Capabilities -->
|
||||
<div class="section">
|
||||
<span class="section-title">Provides</span>
|
||||
<div class="tags">
|
||||
{#each m.provides || [] as cap}
|
||||
<span class="tag provides">{cap}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if m.requires && m.requires.length > 0}
|
||||
<div class="section">
|
||||
<span class="section-title">Requires</span>
|
||||
<div class="tags">
|
||||
{#each m.requires as req}
|
||||
{@const found = capabilities.some(c => c.name === req)}
|
||||
<span class="tag" class:required-ok={found} class:required-missing={!found}>
|
||||
{req}
|
||||
{#if found}<span class="check">✓</span>{/if}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{#if missingRequired.length > 0}
|
||||
<p class="warning">⚠ Missing required capabilities: {missingRequired.join(', ')}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if m.optionalRequires && m.optionalRequires.length > 0}
|
||||
<div class="section">
|
||||
<span class="section-title">Optional Requires</span>
|
||||
<div class="tags">
|
||||
{#each m.optionalRequires as opt}
|
||||
{@const found = capabilities.some(c => c.name === opt)}
|
||||
<span class="tag" class:optional-ok={found} class:optional-missing={!found}>
|
||||
{opt}
|
||||
{#if found}<span class="check">✓</span>{:else}<span class="x">✗</span>{/if}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Permissions -->
|
||||
{#if m.permissions && m.permissions.length > 0}
|
||||
<div class="section">
|
||||
<span class="section-title">Permissions</span>
|
||||
<div class="tags">
|
||||
{#each m.permissions as perm}
|
||||
{@const isDangerous = dangerousPermissions.includes(perm)}
|
||||
<span class="tag" class:dangerous={isDangerous}>
|
||||
{perm}
|
||||
{#if isDangerous}<span class="danger-icon">⚠</span>{/if}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Error -->
|
||||
{#if p.error}
|
||||
<div class="error-box">{p.error}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.plugin-card {
|
||||
background: #16213e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.plugin-card.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.plugin-card.failed {
|
||||
border-color: #e94560;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.plugin-id {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: #a0a0b8;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #a0a0b8;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #a0a0b8;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.path {
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #a0a0b8;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: #a0a0b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #0f3460;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-family: monospace;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.tag.provides {
|
||||
background: #1a3a5c;
|
||||
border: 1px solid #533483;
|
||||
}
|
||||
|
||||
.tag.required-ok {
|
||||
border: 1px solid #4ecca3;
|
||||
}
|
||||
|
||||
.tag.required-missing {
|
||||
border: 1px solid #e94560;
|
||||
color: #e94560;
|
||||
}
|
||||
|
||||
.tag.optional-ok {
|
||||
border: 1px solid #4ecca3;
|
||||
}
|
||||
|
||||
.tag.optional-missing {
|
||||
border: 1px solid #ffc857;
|
||||
color: #ffc857;
|
||||
}
|
||||
|
||||
.tag.dangerous {
|
||||
border: 1px solid #e94560;
|
||||
}
|
||||
|
||||
.check { color: #4ecca3; margin-left: 2px; }
|
||||
.x { color: #e94560; margin-left: 2px; }
|
||||
.danger-icon { color: #e94560; margin-left: 2px; }
|
||||
|
||||
.warning {
|
||||
color: #ffc857;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
background: rgba(233, 69, 96, 0.1);
|
||||
border: 1px solid #e94560;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #e94560;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,230 @@
|
||||
<script>
|
||||
import PluginCard from './PluginCard.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let plugins = [];
|
||||
let capabilities = [];
|
||||
let permissions = [];
|
||||
let loading = true;
|
||||
let error = '';
|
||||
|
||||
async function loadData() {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
plugins = await window.go.api.App.GetPlugins();
|
||||
capabilities = await window.go.api.App.GetCapabilities();
|
||||
permissions = await window.go.api.App.GetPermissions();
|
||||
} catch (e) {
|
||||
error = String(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadData();
|
||||
});
|
||||
|
||||
async function reload() {
|
||||
await window.go.api.App.ReloadPlugins();
|
||||
await loadData();
|
||||
}
|
||||
|
||||
$: totalPlugins = plugins.length;
|
||||
$: totalCaps = capabilities.length;
|
||||
$: totalPerms = permissions.length;
|
||||
</script>
|
||||
|
||||
<div class="plugin-manager">
|
||||
<header>
|
||||
<h2>Plugin Manager</h2>
|
||||
<button class="reload-btn" on:click={reload} type="button" disabled={loading}>
|
||||
{loading ? '⟳ Loading...' : '⟳ Reload'}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="loading">Scanning plugin directories...</div>
|
||||
{:else if error}
|
||||
<div class="error">Error: {error}</div>
|
||||
{:else}
|
||||
<!-- Plugin Count -->
|
||||
<div class="summary">
|
||||
<span class="badge">{totalPlugins} plugin(s) discovered</span>
|
||||
<span class="badge">{totalCaps} capabilities registered</span>
|
||||
<span class="badge">{totalPerms} permissions known</span>
|
||||
</div>
|
||||
|
||||
<!-- Plugin List -->
|
||||
{#if plugins.length === 0}
|
||||
<div class="empty">
|
||||
<p>No plugins discovered.</p>
|
||||
<p class="hint">Place plugins in <code>~/.config/verstak/plugins/</code> or <code>./plugins/</code></p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="plugin-list">
|
||||
{#each plugins as p}
|
||||
<PluginCard {p} {capabilities} {permissions} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Capabilities Registry -->
|
||||
{#if capabilities.length > 0}
|
||||
<details class="registry-section">
|
||||
<summary>Capability Registry ({totalCaps})</summary>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Capability</th>
|
||||
<th>Provider</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each capabilities as cap}
|
||||
<tr>
|
||||
<td><code>{cap.name}</code></td>
|
||||
<td>{cap.pluginId}</td>
|
||||
<td><span class="status-{cap.status}">{cap.status}</span></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</details>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.plugin-manager {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #e0e0e0;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.reload-btn {
|
||||
background: #0f3460;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #533483;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.reload-btn:hover:not(:disabled) {
|
||||
background: #533483;
|
||||
}
|
||||
|
||||
.reload-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #a0a0b8;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #e94560;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: #16213e;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
color: #a0a0b8;
|
||||
border: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #a0a0b8;
|
||||
background: #16213e;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #0f3460;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.5rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.hint code {
|
||||
background: #0f3460;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.plugin-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.registry-section {
|
||||
background: #16213e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.registry-section summary {
|
||||
cursor: pointer;
|
||||
color: #a0a0b8;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.5rem;
|
||||
color: #a0a0b8;
|
||||
border-bottom: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-bottom: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
td code {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
:global(.status-stable) { color: #4ecca3; }
|
||||
:global(.status-draft) { color: #ffc857; }
|
||||
:global(.status-deprecated) { color: #e94560; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user