505 lines
16 KiB
Svelte
505 lines
16 KiB
Svelte
<script>
|
|
import Icon from '../ui/Icon.svelte';
|
|
import PluginCard from './PluginCard.svelte';
|
|
import PluginBundleHost from '../plugin-host/PluginBundleHost.svelte';
|
|
import { onMount } from 'svelte';
|
|
import { GetPlugins, GetCapabilities, GetPermissions, GetContributions, ReloadPlugins, GetVaultStatus, GetVaultPluginState, EnablePlugin, DisablePlugin, ReadPluginSettings, WritePluginSettings, GetPluginFrontendInfo } from '../../../wailsjs/go/api/App';
|
|
|
|
let plugins = [];
|
|
let capabilities = [];
|
|
let permissions = [];
|
|
let contributions = {};
|
|
let loading = true;
|
|
let error = '';
|
|
let vaultStatus = { status: 'unknown', path: '', vaultId: '' };
|
|
let vaultPluginState = { enabledPlugins: [], disabledPlugins: [], desiredPlugins: [] };
|
|
let settingsPanel = null;
|
|
let settingsData = {};
|
|
let settingsPluginId = '';
|
|
let settingsError = null;
|
|
let settingsPluginInfo = null;
|
|
let lastOpenedKey = '';
|
|
|
|
export let activeSettingsPluginId = '';
|
|
export let activeSettingsPanelId = '';
|
|
|
|
$: if (activeSettingsPluginId && activeSettingsPanelId) {
|
|
const key = `${activeSettingsPluginId}:${activeSettingsPanelId}`;
|
|
if (key !== lastOpenedKey) {
|
|
lastOpenedKey = key;
|
|
openSettingsFromProps(activeSettingsPluginId, activeSettingsPanelId);
|
|
}
|
|
}
|
|
|
|
async function openSettingsFromProps(pluginId, panelId) {
|
|
const panel = (contributions.settingsPanels || []).find(sp => sp.pluginId === pluginId && (!panelId || sp.id === panelId));
|
|
if (panel) {
|
|
settingsPanel = panel;
|
|
settingsPluginId = pluginId;
|
|
settingsError = null;
|
|
// Get plugin frontend info
|
|
try {
|
|
const info = await GetPluginFrontendInfo(pluginId);
|
|
settingsPluginInfo = info;
|
|
} catch { settingsPluginInfo = null; }
|
|
ReadPluginSettings(pluginId).then(data => {
|
|
settingsData = data || {};
|
|
}).catch(() => { settingsData = {}; });
|
|
}
|
|
}
|
|
|
|
$: vaultOpen = vaultStatus.status === 'open';
|
|
$: missingInstalled = computeMissingInstalled();
|
|
|
|
function computeMissingInstalled() {
|
|
if (!vaultPluginState.desiredPlugins) return [];
|
|
const installedIDs = new Set(plugins.map(p => p.manifest?.id).filter(Boolean));
|
|
return (vaultPluginState.desiredPlugins || []).filter(dp => !installedIDs.has(dp.id));
|
|
}
|
|
|
|
async function loadAll() {
|
|
error = '';
|
|
loading = true;
|
|
try {
|
|
const p = await GetPlugins();
|
|
plugins = p || [];
|
|
} catch (e) {
|
|
error = 'GetPlugins: ' + String(e);
|
|
loading = false;
|
|
return;
|
|
}
|
|
// Vault status — non-critical
|
|
GetVaultStatus().then(v => { vaultStatus = v || { status: 'unknown', path: '', vaultId: '' }; }).catch(() => {});
|
|
// Vault plugin state
|
|
if (vaultStatus.status === 'open') {
|
|
GetVaultPluginState().then(s => { vaultPluginState = s || { enabledPlugins: [], disabledPlugins: [], desiredPlugins: [] }; }).catch(() => {});
|
|
}
|
|
// Capabilities and permissions are non-critical — load async
|
|
GetCapabilities().then(c => { capabilities = c || []; }).catch(() => {});
|
|
GetPermissions().then(p => { permissions = p || []; }).catch(() => {});
|
|
GetContributions().then(c => { contributions = c || {}; }).catch(() => {});
|
|
loading = false;
|
|
}
|
|
|
|
onMount(() => { loadAll(); });
|
|
|
|
async function reload() {
|
|
loading = true;
|
|
error = '';
|
|
try {
|
|
await ReloadPlugins();
|
|
} catch (e) {
|
|
error = 'Reload: ' + String(e);
|
|
loading = false;
|
|
return;
|
|
}
|
|
await loadAll();
|
|
}
|
|
|
|
async function enablePlugin(pluginId) {
|
|
const err = await EnablePlugin(pluginId);
|
|
if (err) {
|
|
error = 'Enable: ' + err;
|
|
return;
|
|
}
|
|
await reload();
|
|
}
|
|
|
|
async function disablePlugin(pluginId) {
|
|
const err = await DisablePlugin(pluginId);
|
|
if (err) {
|
|
error = 'Disable: ' + err;
|
|
return;
|
|
}
|
|
await reload();
|
|
}
|
|
|
|
$: totalPlugins = plugins.length;
|
|
$: totalCaps = capabilities.length;
|
|
$: totalPerms = permissions.length;
|
|
|
|
function closeSettings() {
|
|
settingsPanel = null;
|
|
settingsPluginId = '';
|
|
settingsError = null;
|
|
lastOpenedKey = '';
|
|
window.dispatchEvent(new CustomEvent('verstak:close-settings'));
|
|
}
|
|
|
|
function saveSettings() {
|
|
WritePluginSettings(settingsPluginId, settingsData).then(err => {
|
|
if (err) console.error('WritePluginSettings:', err);
|
|
}).catch(e => console.error('WritePluginSettings:', e));
|
|
}
|
|
</script>
|
|
|
|
<div class="plugin-manager">
|
|
<header>
|
|
<div class="header-left">
|
|
<h2>Plugin Manager</h2>
|
|
{#if vaultStatus.status !== 'unknown'}
|
|
<span class="vault-badge" class:vault-open={vaultStatus.status === 'open'} class:vault-not-created={vaultStatus.status === 'not-created'} class:vault-closed={vaultStatus.status === 'closed'} class:vault-error={vaultStatus.status === 'error'}>
|
|
Vault: {vaultStatus.status}{#if vaultStatus.path} ({vaultStatus.path}){/if}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
<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">
|
|
<Icon name="warning" size={24} className="error-icon" />
|
|
<div class="error-message">{error}</div>
|
|
<button class="retry-btn" on:click={loadAll} type="button">⟳ Retry</button>
|
|
</div>
|
|
{:else}
|
|
<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>
|
|
|
|
{#if plugins.length === 0 && missingInstalled.length === 0}
|
|
<div class="empty">
|
|
<div class="empty-icon">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<p>No plugins found</p>
|
|
<p class="hint">Plugin directories scanned:</p>
|
|
<ul class="hint-list">
|
|
<li><code>~/.config/verstak/plugins/</code> — user plugins</li>
|
|
<li><code>./plugins/</code> — bundled plugins (app directory)</li>
|
|
</ul>
|
|
<p class="hint">Place a plugin folder with <code>plugin.json</code> in one of these directories and click Reload.</p>
|
|
</div>
|
|
{:else}
|
|
<div class="plugin-list">
|
|
{#each plugins as p}
|
|
<PluginCard {p} {capabilities} {permissions} {contributions} {vaultOpen} settingsPanels={(contributions.settingsPanels || []).filter(sp => sp.pluginId === p.manifest?.id)} onEnable={enablePlugin} onDisable={disablePlugin} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if missingInstalled.length > 0}
|
|
<div class="missing-section">
|
|
<h3>Missing Installed Plugins</h3>
|
|
<p class="missing-hint">These plugins are required by this vault but their packages are not installed locally.</p>
|
|
<div class="plugin-list">
|
|
{#each missingInstalled as mp}
|
|
<div class="plugin-card missing-card">
|
|
<div class="card-header">
|
|
<div class="plugin-id">
|
|
<span class="status-dot" style="background: #e94560"></span>
|
|
<strong>{mp.id}</strong>
|
|
{#if mp.version}<span class="version">v{mp.version}</span>{/if}
|
|
</div>
|
|
<span class="status-badge" style="color: #e94560">missing</span>
|
|
</div>
|
|
<p class="missing-text">
|
|
This plugin is listed in the vault's desired plugins but the package is not installed.
|
|
{#if mp.source && mp.source !== 'unknown'}
|
|
<span class="source-hint">Source: {mp.source}</span>
|
|
{/if}
|
|
</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if capabilities.length > 0}
|
|
<details class="registry-section">
|
|
<summary>Capability Registry ({totalCaps})</summary>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Capability</th><th>Provider</th><th>Source</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="source-badge" class:source-core={cap.pluginId === 'verstak-desktop'} class:source-plugin={cap.pluginId !== 'verstak-desktop'}>{cap.pluginId === 'verstak-desktop' ? 'core' : 'plugin'}</span></td>
|
|
<td><span class="status-{cap.status}">{cap.status}</span></td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</details>
|
|
{/if}
|
|
{/if}
|
|
|
|
<!-- Settings Panel Modal -->
|
|
{#key `settings-${settingsPluginId}`}
|
|
{#if settingsError}
|
|
<div class="modal-overlay" on:click|self={closeSettings} on:keydown|self={(e) => e.key === 'Escape' && closeSettings()} role="presentation">
|
|
<div class="modal" role="dialog" aria-modal="true" aria-label="Settings Error">
|
|
<div class="modal-header">
|
|
<h3>Settings Error</h3>
|
|
<button class="modal-close" on:click={closeSettings} type="button">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="error" style="color: #e94560;">{settingsError}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else if settingsPanel}
|
|
<div class="modal-overlay" on:click|self={closeSettings} on:keydown|self={(e) => e.key === 'Escape' && closeSettings()} role="presentation">
|
|
<div class="modal" role="dialog" aria-modal="true" aria-label="Plugin Settings">
|
|
<div class="modal-header">
|
|
<h3>{settingsPanel.title}</h3>
|
|
<button class="modal-close" on:click={closeSettings} type="button">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="settings-hint">Plugin: <code>{settingsPluginId}</code></p>
|
|
{#if settingsPluginInfo && settingsPluginInfo.entry}
|
|
<PluginBundleHost
|
|
pluginId={settingsPluginId}
|
|
componentId={settingsPanel.component || settingsPanel.id}
|
|
/>
|
|
{:else}
|
|
<p class="settings-hint">Component: <code>{settingsPanel.component}</code></p>
|
|
<p class="placeholder">Settings panel frontend bundle not available</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/key}
|
|
</div>
|
|
|
|
<style>
|
|
.plugin-manager {
|
|
max-width: 900px;
|
|
padding-top: 0.5rem;
|
|
}
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.25rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
h2 { color: #e0e0e0; font-size: 1.3rem; margin: 0; }
|
|
.vault-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
border: 1px solid;
|
|
}
|
|
.vault-open {
|
|
background: rgba(78, 204, 163, 0.15);
|
|
color: #4ecca3;
|
|
border-color: #4ecca3;
|
|
}
|
|
.vault-not-created {
|
|
background: rgba(255, 200, 87, 0.15);
|
|
color: #ffc857;
|
|
border-color: #ffc857;
|
|
}
|
|
.vault-closed {
|
|
background: rgba(160, 160, 184, 0.15);
|
|
color: #a0a0b8;
|
|
border-color: #a0a0b8;
|
|
}
|
|
.vault-error {
|
|
background: rgba(233, 69, 96, 0.15);
|
|
color: #e94560;
|
|
border-color: #e94560;
|
|
}
|
|
.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; }
|
|
.error-icon { color: #e94560; margin-bottom: 0.5rem; }
|
|
.error-message {
|
|
font-family: monospace; font-size: 0.85rem; margin-bottom: 1rem; word-break: break-word;
|
|
}
|
|
.retry-btn {
|
|
background: #0f3460; color: #e0e0e0; border: 1px solid #533483;
|
|
padding: 0.4rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
|
|
}
|
|
.retry-btn:hover { background: #533483; }
|
|
.summary {
|
|
display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;
|
|
}
|
|
.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;
|
|
}
|
|
.empty-icon { margin-bottom: 0.5rem; color: #0f3460; }
|
|
.hint { font-size: 0.85rem; margin-top: 0.5rem; opacity: 0.7; }
|
|
.hint-list { list-style: none; padding: 0; margin: 0.5rem 0; font-size: 0.8rem; opacity: 0.7; }
|
|
.hint-list li { margin: 0.25rem 0; }
|
|
.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; }
|
|
|
|
/* Missing installed section */
|
|
.missing-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.missing-section h3 {
|
|
color: #e94560;
|
|
font-size: 1rem;
|
|
margin: 0 0 0.25rem;
|
|
}
|
|
.missing-hint {
|
|
color: #a0a0b8;
|
|
font-size: 0.8rem;
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
.missing-card {
|
|
border-color: #e94560;
|
|
opacity: 0.8;
|
|
}
|
|
.missing-text {
|
|
color: #a0a0b8;
|
|
font-size: 0.85rem;
|
|
margin: 0.5rem 0 0;
|
|
}
|
|
.source-hint {
|
|
display: block;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
}
|
|
|
|
.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; }
|
|
.source-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
.source-core {
|
|
background: #1a3a5c;
|
|
color: #4ecca3;
|
|
border: 1px solid #4ecca3;
|
|
}
|
|
.source-plugin {
|
|
background: #0f3460;
|
|
color: #a0a0b8;
|
|
border: 1px solid #533483;
|
|
}
|
|
|
|
/* ── Modal ── */
|
|
.modal-overlay {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
.modal {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
border-radius: 8px;
|
|
width: 480px;
|
|
max-width: 90vw;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
.modal-header h3 { margin: 0; color: #e0e0f0; font-size: 1.1rem; }
|
|
.modal-close {
|
|
background: none; border: none; color: #a0a0b8;
|
|
font-size: 1.2rem; cursor: pointer; padding: 0.2rem 0.5rem;
|
|
}
|
|
.modal-close:hover { color: #e94560; }
|
|
.modal-body { padding: 1rem; overflow-y: auto; }
|
|
.settings-hint { color: #666; font-size: 0.8rem; margin: 0.25rem 0; }
|
|
.settings-hint code { color: #4ecca3; }
|
|
|
|
/* ── Settings Form ── */
|
|
.settings-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
.settings-form h4 {
|
|
margin: 0 0 0.5rem 0;
|
|
color: #e0e0f0;
|
|
font-size: 1rem;
|
|
}
|
|
.form-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
.form-row label {
|
|
color: #a0a0b8;
|
|
font-size: 0.85rem;
|
|
}
|
|
.form-row input[type="text"],
|
|
.form-row input[type="number"] {
|
|
background: #0f3460;
|
|
border: 1px solid #1a3a5c;
|
|
color: #e0e0f0;
|
|
padding: 0.4rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.form-row input:focus {
|
|
outline: none;
|
|
border-color: #4ecca3;
|
|
}
|
|
.btn-save {
|
|
background: #4ecca3;
|
|
color: #1a1a2e;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.btn-save:hover {
|
|
background: #3dbb92;
|
|
}
|
|
</style>
|