feat(plugins): plugin pages, per-user config, capabilities gate, mobile/telegram refactors
- Plugin HTTP routes + web pages (plugin-page-host, plugin-catalog, plugin-detail) - Plugin access grants + per-user config (DB tables + API + frontend forms) - Capabilities-based guard (caps.rs) replacing role-id checks - Mobile connector: message routing, payload types, router refactor - Telegram bot: auth flow, event handling improvements - Honcho plugin: substantial rework - Sidebar: plugin pages integration, role-driven visibility - i18n: new strings for plugins, connectors, capabilities - Remove unused mascot asset
This commit is contained in:
@@ -0,0 +1,160 @@
|
||||
import { html, nothing } from 'lit';
|
||||
import { LightElement } from '../lib/base.js';
|
||||
import { t } from '../lib/i18n.js';
|
||||
import { jf, hasSchema, pluginHealth } from './shared/plugin-common.js';
|
||||
|
||||
// Plugin catalog (`#plugin-catalog`) — the admin board of every registered
|
||||
// plugin.
|
||||
//
|
||||
// One card per plugin: an enable/disable toggle, a health dot (green =
|
||||
// enabled, running and fully configured; red = enabled but broken; grey =
|
||||
// off) and a Configure button opening the plugin's own detail page
|
||||
// (`#plugin-detail?id=…`). Instance config and user-access grants live on the
|
||||
// detail page, not here — the catalog stays a quick status board.
|
||||
//
|
||||
// Styling reuses the connectors card grid (`web/css/connectors.css`).
|
||||
|
||||
const PAGE_ID = 'plugin-catalog';
|
||||
|
||||
export class PluginCatalogPage extends LightElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_open: { state: true },
|
||||
_all: { state: true }, // PluginInfo[]
|
||||
_error: { state: true },
|
||||
_status: { state: true }, // { [pluginId]: { err?: string } } — toggle feedback
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._open = false;
|
||||
this._reset();
|
||||
}
|
||||
|
||||
_reset() {
|
||||
this._all = null;
|
||||
this._error = null;
|
||||
this._status = {};
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.__onLocaleChanged = () => this.requestUpdate();
|
||||
window.addEventListener('locale-changed', this.__onLocaleChanged);
|
||||
window.addEventListener('llm-page-change', (e) => {
|
||||
this._open = e.detail.page === PAGE_ID;
|
||||
this.style.display = this._open ? 'flex' : 'none';
|
||||
if (this._open) this._load();
|
||||
});
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
window.removeEventListener('locale-changed', this.__onLocaleChanged);
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
async _load() {
|
||||
this._error = null;
|
||||
try {
|
||||
this._all = await jf('/api/plugins');
|
||||
} catch (e) {
|
||||
this._error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
/// The toggle flips `enabled` only — the persisted config travels back
|
||||
/// unchanged so a flip never clobbers what the detail page saved.
|
||||
async _toggle(p, enabled) {
|
||||
this._status = { ...this._status, [p.id]: {} };
|
||||
try {
|
||||
await jf(`/api/plugins/${encodeURIComponent(p.id)}`, {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled, config: p.config || {} }),
|
||||
});
|
||||
this._all = await jf('/api/plugins');
|
||||
window.dispatchEvent(new CustomEvent('plugins-changed'));
|
||||
} catch (e) {
|
||||
this._status = { ...this._status, [p.id]: { err: e.message } };
|
||||
}
|
||||
}
|
||||
|
||||
_configure(p) {
|
||||
history.pushState({ page: 'plugin-detail' }, '', `#plugin-detail?id=${encodeURIComponent(p.id)}`);
|
||||
window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'plugin-detail' } }));
|
||||
}
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────────────────
|
||||
|
||||
render() {
|
||||
if (!this._open) return nothing;
|
||||
const loading = this._all === null && !this._error;
|
||||
|
||||
return html`
|
||||
<div class="um-page">
|
||||
<div class="um-header">
|
||||
<h2 class="um-title"><i class="bi bi-puzzle-fill me-2"></i>${t('plugins.catalog.title')}</h2>
|
||||
</div>
|
||||
|
||||
${this._error ? html`
|
||||
<div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>` : nothing}
|
||||
|
||||
${loading
|
||||
? html`<div class="um-empty"><i class="bi bi-hourglass-split"></i> ${t('plugins.loading')}</div>`
|
||||
: html`
|
||||
<div style="padding:0 1.25rem 1.5rem; overflow:auto">
|
||||
${(this._all ?? []).length === 0
|
||||
? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-puzzle"></i><p>${t('plugins.empty.manage')}</p></div>`
|
||||
: html`<div class="connector-grid">${this._all.map(p => this._renderCard(p))}</div>`}
|
||||
</div>`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderHealth(p) {
|
||||
const h = pluginHealth(p);
|
||||
const cls = h === 'ok' ? 'ok' : (h === 'off' ? 'off' : 'err');
|
||||
return html`
|
||||
<span class="d-inline-flex align-items-center gap-1" style="font-size:.72rem;color:var(--placeholder-color)">
|
||||
<span class="plugin-status-dot plugin-status-dot--${cls}"></span>
|
||||
${t(`plugins.health.${h}`)}
|
||||
</span>`;
|
||||
}
|
||||
|
||||
_renderCard(p) {
|
||||
const status = this._status[p.id] || {};
|
||||
return html`
|
||||
<div class="connector-card" style="cursor:default">
|
||||
<div class="connector-card-head">
|
||||
<div class="connector-card-icon connector-card-icon--empty"><i class="bi bi-puzzle"></i></div>
|
||||
<div class="connector-card-title">
|
||||
<div class="connector-card-name">${p.name}</div>
|
||||
<div class="connector-card-sub">${p.id}</div>
|
||||
</div>
|
||||
${this._renderHealth(p)}
|
||||
</div>
|
||||
${p.description ? html`<div class="connector-card-desc">${p.description}</div>` : nothing}
|
||||
|
||||
<div class="connector-chips">
|
||||
${hasSchema(p.config_schema) ? html`
|
||||
<span class="connector-chip"><i class="bi bi-sliders"></i>${t('plugins.badge.instance_config')}</span>` : nothing}
|
||||
${hasSchema(p.user_config_schema) ? html`
|
||||
<span class="connector-chip connector-chip--scope"><i class="bi bi-person"></i>${t('plugins.badge.user_config')}</span>` : nothing}
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-between mt-1">
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="plugin-on-${p.id}"
|
||||
.checked=${p.enabled}
|
||||
@change=${(e) => this._toggle(p, e.target.checked)} />
|
||||
<label class="form-check-label" for="plugin-on-${p.id}" style="font-size:.82rem">${t('plugins.enabled')}</label>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._configure(p)}>
|
||||
<i class="bi bi-gear me-1"></i>${t('plugins.catalog.configure')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
${status.err ? html`<div class="alert alert-danger py-1 px-2" style="font-size:.78rem">${status.err}</div>` : nothing}
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
import { html, nothing } from 'lit';
|
||||
import { LightElement } from '../lib/base.js';
|
||||
import { t } from '../lib/i18n.js';
|
||||
import { jf, schemaFields, hasSchema, pluginHealth } from './shared/plugin-common.js';
|
||||
|
||||
// One plugin's admin page (`#plugin-detail?id=<plugin id>`), reached from the
|
||||
// Configure button on `#plugin-catalog` — the plugin counterpart of
|
||||
// `connector-detail.js`.
|
||||
//
|
||||
// Hosts what was squeezed into the old combined page: the instance-wide
|
||||
// config form (`config_schema`, saved via `PUT /api/plugins/{id}`) and the
|
||||
// per-user access checklist (`GET/PUT /api/plugins/{id}/access`). The enable
|
||||
// toggle is repeated in the summary card so a full setup round-trip happens
|
||||
// on one page.
|
||||
|
||||
const PAGE_ID = 'plugin-detail';
|
||||
|
||||
function idFromHash() {
|
||||
const m = location.hash.match(/^#plugin-detail\?id=(.*)$/);
|
||||
if (!m) return null;
|
||||
try { return decodeURIComponent(m[1]); } catch { return null; }
|
||||
}
|
||||
|
||||
export class PluginDetailPage extends LightElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_open: { state: true },
|
||||
_id: { state: true },
|
||||
_plugin: { state: true }, // PluginInfo
|
||||
_error: { state: true },
|
||||
_draft: { state: true }, // config form draft
|
||||
_status: { state: true }, // { ok?: string, err?: string }
|
||||
_access: { state: true }, // AccessEntry[]
|
||||
_accessSel: { state: true }, // Set of granted user ids
|
||||
_accessErr: { state: true },
|
||||
_accessSaved: { state: true },
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._open = false;
|
||||
this._reset();
|
||||
}
|
||||
|
||||
_reset() {
|
||||
this._id = null;
|
||||
this._plugin = null;
|
||||
this._error = null;
|
||||
this._draft = null;
|
||||
this._status = {};
|
||||
this._access = null;
|
||||
this._accessSel = new Set();
|
||||
this._accessErr = null;
|
||||
this._accessSaved = false;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.__onLocaleChanged = () => this.requestUpdate();
|
||||
window.addEventListener('locale-changed', this.__onLocaleChanged);
|
||||
window.addEventListener('llm-page-change', (e) => {
|
||||
this._open = e.detail.page === PAGE_ID;
|
||||
this.style.display = this._open ? 'flex' : 'none';
|
||||
if (this._open) this._loadFromHash();
|
||||
});
|
||||
window.addEventListener('hashchange', () => {
|
||||
if (this._open) this._loadFromHash();
|
||||
});
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
window.removeEventListener('locale-changed', this.__onLocaleChanged);
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
async _loadFromHash() {
|
||||
const id = idFromHash();
|
||||
if (!id) return;
|
||||
// A different plugin must not inherit the previous one's typed config.
|
||||
if (id !== this._id) this._reset();
|
||||
this._id = id;
|
||||
await this._load();
|
||||
}
|
||||
|
||||
async _load() {
|
||||
this._error = null;
|
||||
try {
|
||||
const all = await jf('/api/plugins');
|
||||
const p = (all ?? []).find(x => x.id === this._id) ?? null;
|
||||
if (!p) {
|
||||
this._plugin = null;
|
||||
this._error = t('plugins.detail.not_found', { id: this._id });
|
||||
return;
|
||||
}
|
||||
this._plugin = p;
|
||||
// Keep whatever the admin has already typed across a reload triggered by a save.
|
||||
this._draft = { ...(p.config || {}), ...(this._draft || {}) };
|
||||
// Binding-managed plugins (e.g. mobile-connector) gate access through
|
||||
// their own pairing lifecycle — the generic checklist controls nothing.
|
||||
if (!p.manages_own_access) await this._loadAccess();
|
||||
} catch (e) {
|
||||
this._error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async _loadAccess() {
|
||||
try {
|
||||
const entries = await jf(`/api/plugins/${encodeURIComponent(this._id)}/access`);
|
||||
this._access = entries;
|
||||
this._accessSel = new Set(entries.filter(e => e.granted).map(e => e.user_id));
|
||||
} catch (e) {
|
||||
this._accessErr = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
_back() {
|
||||
// Prefer real history so the browser's own Back stays consistent; fall back
|
||||
// to the catalog when this page was opened straight from a pasted URL.
|
||||
if (history.length > 1) { history.back(); return; }
|
||||
history.pushState({ page: 'plugin-catalog' }, '', '#plugin-catalog');
|
||||
window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'plugin-catalog' } }));
|
||||
}
|
||||
|
||||
_setDraft(key, value) {
|
||||
this._draft = { ...this._draft, [key]: value };
|
||||
}
|
||||
|
||||
async _save(enabled) {
|
||||
this._status = {};
|
||||
const fields = schemaFields(this._plugin.config_schema);
|
||||
for (const f of fields) {
|
||||
if (f.required && !this._draft[f.key]) {
|
||||
this._status = { err: t('plugins.error.required', { field: f.label }) };
|
||||
return;
|
||||
}
|
||||
}
|
||||
try {
|
||||
await jf(`/api/plugins/${encodeURIComponent(this._id)}`, {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled, config: this._draft || {} }),
|
||||
});
|
||||
this._status = { ok: t('plugins.saved') };
|
||||
this._draft = null; // re-seed from the persisted config
|
||||
await this._load();
|
||||
window.dispatchEvent(new CustomEvent('plugins-changed'));
|
||||
} catch (e) {
|
||||
this._status = { err: e.message };
|
||||
}
|
||||
}
|
||||
|
||||
_toggleAccessUser(userId, on) {
|
||||
const next = new Set(this._accessSel);
|
||||
if (on) next.add(userId); else next.delete(userId);
|
||||
this._accessSel = next;
|
||||
this._accessSaved = false;
|
||||
}
|
||||
|
||||
async _saveAccess() {
|
||||
this._accessErr = null;
|
||||
this._accessSaved = false;
|
||||
try {
|
||||
await jf(`/api/plugins/${encodeURIComponent(this._id)}/access`, {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ user_ids: [...this._accessSel] }),
|
||||
});
|
||||
this._accessSaved = true;
|
||||
} catch (e) {
|
||||
this._accessErr = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────────────────
|
||||
|
||||
render() {
|
||||
if (!this._open) return nothing;
|
||||
if (this._error && !this._plugin) {
|
||||
return html`
|
||||
<div class="um-page">
|
||||
${this._renderHeader()}
|
||||
<div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>
|
||||
</div>`;
|
||||
}
|
||||
if (!this._plugin) {
|
||||
return html`<div class="um-page">${this._renderHeader()}
|
||||
<div class="um-empty"><i class="bi bi-hourglass-split"></i> ${t('plugins.loading')}</div></div>`;
|
||||
}
|
||||
return html`
|
||||
<div class="um-page">
|
||||
${this._renderHeader()}
|
||||
<div style="padding:0 1.25rem 2rem; overflow:auto">
|
||||
${this._renderSummary()}
|
||||
${this._renderConfig()}
|
||||
${this._plugin.manages_own_access ? nothing : this._renderAccess()}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderHeader() {
|
||||
return html`
|
||||
<div class="um-header">
|
||||
<div class="d-flex align-items-center gap-2" style="min-width:0">
|
||||
<button class="btn btn-sm btn-outline-secondary" title=${t('plugins.detail.back')} @click=${() => this._back()}>
|
||||
<i class="bi bi-arrow-left"></i>
|
||||
</button>
|
||||
<h2 class="um-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">
|
||||
${this._plugin?.name || this._id || 'Plugin'}
|
||||
</h2>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderSummary() {
|
||||
const p = this._plugin;
|
||||
const h = pluginHealth(p);
|
||||
const cls = h === 'ok' ? 'ok' : (h === 'off' ? 'off' : 'err');
|
||||
return html`
|
||||
<div class="connector-card" style="margin-top:1rem;cursor:default">
|
||||
<div class="connector-card-head">
|
||||
<div class="connector-card-icon connector-card-icon--empty" style="width:44px;height:44px">
|
||||
<i class="bi bi-puzzle"></i>
|
||||
</div>
|
||||
<div class="connector-card-title">
|
||||
<div class="connector-card-name" style="font-size:1rem">${p.name}</div>
|
||||
<div class="connector-card-sub">${p.id}</div>
|
||||
</div>
|
||||
<span class="d-inline-flex align-items-center gap-1" style="font-size:.72rem;color:var(--placeholder-color)">
|
||||
<span class="plugin-status-dot plugin-status-dot--${cls}"></span>
|
||||
${t(`plugins.health.${h}`)}
|
||||
</span>
|
||||
</div>
|
||||
${p.description ? html`<div class="connector-card-desc" style="-webkit-line-clamp:initial">${p.description}</div>` : nothing}
|
||||
<div class="connector-chips">
|
||||
${hasSchema(p.user_config_schema) ? html`
|
||||
<span class="connector-chip connector-chip--scope"><i class="bi bi-person"></i>${t('plugins.badge.user_config')}</span>` : nothing}
|
||||
</div>
|
||||
<div class="form-check form-switch mt-1 mb-0">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="plugin-detail-on"
|
||||
.checked=${p.enabled}
|
||||
@change=${(e) => this._save(e.target.checked)} />
|
||||
<label class="form-check-label" for="plugin-detail-on" style="font-size:.82rem">${t('plugins.enabled')}</label>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderConfig() {
|
||||
const p = this._plugin;
|
||||
const fields = schemaFields(p.config_schema);
|
||||
const draft = this._draft || {};
|
||||
return html`
|
||||
<div style="margin-top:1.5rem">
|
||||
<div class="um-header" style="padding:0 0 .5rem">
|
||||
<h3 class="um-title" style="font-size:1rem"><i class="bi bi-sliders me-2"></i>${t('plugins.detail.config.title')}</h3>
|
||||
</div>
|
||||
${fields.length === 0 ? html`
|
||||
<div class="text-muted" style="font-size:.82rem">${t('plugins.detail.config.empty')}</div>` : html`
|
||||
${fields.map(f => html`
|
||||
<div class="mb-3">
|
||||
<label class="form-label">${f.label}${f.required ? html`<span class="text-danger">*</span>` : nothing}</label>
|
||||
${f.type === 'boolean' ? html`
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" .checked=${!!draft[f.key]}
|
||||
@change=${(e) => this._setDraft(f.key, e.target.checked)} />
|
||||
</div>` : html`
|
||||
<input class="form-control"
|
||||
type=${f.sensitive ? 'password' : (f.type === 'number' ? 'number' : 'text')}
|
||||
.value=${String(draft[f.key] ?? '')}
|
||||
@input=${(e) => this._setDraft(f.key, f.type === 'number' ? Number(e.target.value) : e.target.value)} />`}
|
||||
${f.description ? html`<div class="form-text" style="font-size:.72rem">${f.description}</div>` : nothing}
|
||||
</div>`)}
|
||||
${this._status.err ? html`<div class="alert alert-danger py-2 mb-3" style="font-size:.82rem">${this._status.err}</div>` : nothing}
|
||||
${this._status.ok ? html`<div class="alert alert-success py-2 mb-3" style="font-size:.82rem">${this._status.ok}</div>` : nothing}
|
||||
<button class="btn btn-sm btn-primary" @click=${() => this._save(p.enabled)}>
|
||||
<i class="bi bi-check-lg me-1"></i>${t('plugins.save_config')}
|
||||
</button>`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderAccess() {
|
||||
return html`
|
||||
<div style="margin-top:1.75rem">
|
||||
<div class="um-header" style="padding:0 0 .5rem">
|
||||
<h3 class="um-title" style="font-size:1rem"><i class="bi bi-people me-2"></i>${t('plugins.detail.access.title')}</h3>
|
||||
</div>
|
||||
<div class="text-muted mb-2" style="font-size:.78rem">${t('plugins.access.desc')}</div>
|
||||
${this._accessErr ? html`
|
||||
<div class="alert alert-danger py-2 mb-3" style="font-size:.82rem">${this._accessErr}</div>` : nothing}
|
||||
${this._accessSaved ? html`
|
||||
<div class="alert alert-success py-2 mb-3" style="font-size:.82rem">${t('plugins.saved')}</div>` : nothing}
|
||||
${this._access === null
|
||||
? html`<div style="font-size:.8rem"><i class="bi bi-hourglass-split"></i></div>`
|
||||
: this._access.length === 0
|
||||
? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-people"></i><p>${t('plugins.access.empty')}</p></div>`
|
||||
: html`
|
||||
<div class="connector-card" style="cursor:default">
|
||||
${this._access.map(u => html`
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="plugin-access-${u.user_id}"
|
||||
.checked=${this._accessSel.has(u.user_id)}
|
||||
@change=${(e) => this._toggleAccessUser(u.user_id, e.target.checked)} />
|
||||
<label class="form-check-label" for="plugin-access-${u.user_id}">
|
||||
${u.username} <code class="text-muted" style="font-size:.7rem">${u.role_id}</code>
|
||||
</label>
|
||||
</div>`)}
|
||||
</div>
|
||||
<button class="btn btn-sm btn-primary mt-2" @click=${() => this._saveAccess()}>
|
||||
<i class="bi bi-check-lg me-1"></i>${t('plugins.access.save')}
|
||||
</button>`}
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { html, nothing } from 'lit';
|
||||
import { LightElement } from '../lib/base.js';
|
||||
import { t } from '../lib/i18n.js';
|
||||
|
||||
// Host for plugin-contributed pages (`#plugin/<plugin_id>/<page_id>`).
|
||||
//
|
||||
// The frontend knows nothing about what a plugin page does: on navigation it
|
||||
// dynamic-imports the fragment ES module the plugin serves from its own router
|
||||
// (`/api/plugin/<id>/<entry>`), registers its default-exported HTMLElement
|
||||
// class as a custom element, and mounts it with the `plugin-id` attribute set.
|
||||
// The fragment talks to its backend only through `/api/plugin/<id>/…` and runs
|
||||
// with the full session privileges — plugins are trusted (they ship in the
|
||||
// binary). See `Plugin::web_pages` in core-api for the fragment contract.
|
||||
export class PluginPageHost extends LightElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_open: { state: true },
|
||||
_route: { state: true }, // "plugin/<plugin_id>/<page_id>" while open
|
||||
_error: { state: true },
|
||||
_loading: { state: true },
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._open = false;
|
||||
this._route = null;
|
||||
this._error = null;
|
||||
this._loading = false;
|
||||
this._mounted = null; // currently mounted fragment element
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.style.display = 'none';
|
||||
window.addEventListener('llm-page-change', (e) => {
|
||||
const page = e.detail.page || '';
|
||||
if (page.startsWith('plugin/')) {
|
||||
this._openPage(page);
|
||||
} else {
|
||||
this._open = false;
|
||||
this._route = null;
|
||||
this.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async _openPage(route) {
|
||||
this._open = true;
|
||||
this.style.display = 'flex';
|
||||
if (route === this._route) return;
|
||||
this._route = route;
|
||||
this._error = null;
|
||||
this._loading = true;
|
||||
|
||||
const [, pluginId, pageId] = route.split('/');
|
||||
const tag = `skald-plugin-${pluginId}-${pageId}`;
|
||||
try {
|
||||
if (!customElements.get(tag)) {
|
||||
const entry_url = await this._resolveEntry(pluginId, pageId);
|
||||
const mod = await import(/* @vite-ignore */ entry_url);
|
||||
const cls = mod.default;
|
||||
if (!cls || !(cls.prototype instanceof HTMLElement)) {
|
||||
throw new Error('fragment must default-export an HTMLElement class');
|
||||
}
|
||||
customElements.define(tag, cls);
|
||||
}
|
||||
const el = document.createElement(tag);
|
||||
el.setAttribute('plugin-id', pluginId);
|
||||
if (this._mounted) this._mounted.remove();
|
||||
this._mounted = el;
|
||||
} catch (e) {
|
||||
this._error = e.message || String(e);
|
||||
if (this._mounted) { this._mounted.remove(); this._mounted = null; }
|
||||
} finally {
|
||||
this._loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async _resolveEntry(pluginId, pageId) {
|
||||
const res = await fetch('/api/plugins/pages');
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const pages = await res.json();
|
||||
const page = pages.find(p => p.plugin_id === pluginId && p.page_id === pageId);
|
||||
if (!page) throw new Error(t('plugin_page.unavailable'));
|
||||
return page.entry_url;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this._open) return nothing;
|
||||
return html`
|
||||
${this._loading ? html`<div class="p-4 text-body-secondary">${t('plugin_page.loading')}</div>` : nothing}
|
||||
${this._error ? html`<div class="p-4 text-danger">${this._error}</div>` : nothing}
|
||||
${this._mounted && !this._error ? this._mounted : nothing}
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
import { html, nothing } from 'lit';
|
||||
import { LightElement } from '../lib/base.js';
|
||||
import { t } from '../lib/i18n.js';
|
||||
import { jf, schemaFields } from './shared/plugin-common.js';
|
||||
|
||||
// Plugins page (`#plugins`) — the user-facing half of the plugin split.
|
||||
//
|
||||
// Shows the plugins the caller has been granted (`plugin_access`, admin-granted).
|
||||
// When a plugin declares a `user_config_schema` the card carries a small
|
||||
// schema-driven form — e.g. Telegram's pairing code — saved via
|
||||
// `PUT /api/plugins/{id}/my-config`.
|
||||
//
|
||||
// The admin half (enable/disable, instance config, access grants) lives on
|
||||
// `#plugin-catalog` + `#plugin-detail` — see `plugin-catalog.js`.
|
||||
//
|
||||
// Styling reuses the connectors card grid (`web/css/connectors.css`).
|
||||
|
||||
export class PluginsPage extends LightElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_open: { state: true },
|
||||
_mine: { state: true }, // UserPluginView[] — granted + enabled plugins
|
||||
_error: { state: true },
|
||||
_uDrafts: { state: true }, // user config drafts: { [pluginId]: {key: value} }
|
||||
_uStatus: { state: true }, // { [pluginId]: { ok?: string, err?: string } }
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._open = false;
|
||||
this._reset();
|
||||
}
|
||||
|
||||
_reset() {
|
||||
this._mine = null;
|
||||
this._error = null;
|
||||
this._uDrafts = {};
|
||||
this._uStatus = {};
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.__onLocaleChanged = () => this.requestUpdate();
|
||||
window.addEventListener('locale-changed', this.__onLocaleChanged);
|
||||
window.addEventListener('llm-page-change', (e) => {
|
||||
this._open = e.detail.page === 'plugins';
|
||||
this.style.display = this._open ? 'flex' : 'none';
|
||||
if (this._open) this._load();
|
||||
});
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
window.removeEventListener('locale-changed', this.__onLocaleChanged);
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
async _load() {
|
||||
this._error = null;
|
||||
try {
|
||||
this._mine = await jf('/api/plugins/mine');
|
||||
} catch (e) {
|
||||
this._error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
_uDraft(p) {
|
||||
if (!this._uDrafts[p.id]) {
|
||||
// Seed the form from the stored config for keys the schema knows.
|
||||
const draft = {};
|
||||
for (const f of schemaFields(p.user_config_schema)) {
|
||||
const v = p.user_config?.[f.key];
|
||||
draft[f.key] = v ?? (f.type === 'boolean' ? false : '');
|
||||
}
|
||||
this._uDrafts = { ...this._uDrafts, [p.id]: draft };
|
||||
}
|
||||
return this._uDrafts[p.id];
|
||||
}
|
||||
|
||||
_setUDraft(id, key, value) {
|
||||
this._uDrafts = { ...this._uDrafts, [id]: { ...this._uDrafts[id], [key]: value } };
|
||||
}
|
||||
|
||||
async _saveUserConfig(p) {
|
||||
const draft = this._uDraft(p);
|
||||
for (const f of schemaFields(p.user_config_schema)) {
|
||||
if (f.required && !draft[f.key]) {
|
||||
this._uStatus = { ...this._uStatus, [p.id]: { err: t('plugins.error.required', { field: f.label }) } };
|
||||
return;
|
||||
}
|
||||
}
|
||||
this._uStatus = { ...this._uStatus, [p.id]: {} };
|
||||
try {
|
||||
await jf(`/api/plugins/${encodeURIComponent(p.id)}/my-config`, {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(draft),
|
||||
});
|
||||
this._uStatus = { ...this._uStatus, [p.id]: { ok: t('plugins.saved') } };
|
||||
// Drop the draft so the reloaded status blob re-seeds the form.
|
||||
const drafts = { ...this._uDrafts };
|
||||
delete drafts[p.id];
|
||||
this._uDrafts = drafts;
|
||||
this._mine = await jf('/api/plugins/mine');
|
||||
} catch (e) {
|
||||
this._uStatus = { ...this._uStatus, [p.id]: { err: e.message } };
|
||||
}
|
||||
}
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────────────────
|
||||
|
||||
render() {
|
||||
if (!this._open) return nothing;
|
||||
const loading = this._mine === null && !this._error;
|
||||
|
||||
return html`
|
||||
<div class="um-page">
|
||||
<div class="um-header">
|
||||
<h2 class="um-title"><i class="bi bi-puzzle me-2"></i>${t('plugins.title')}</h2>
|
||||
</div>
|
||||
|
||||
${this._error ? html`
|
||||
<div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>` : nothing}
|
||||
|
||||
${loading
|
||||
? html`<div class="um-empty"><i class="bi bi-hourglass-split"></i> ${t('plugins.loading')}</div>`
|
||||
: html`
|
||||
<div style="padding:0 1.25rem 1.5rem; overflow:auto">
|
||||
${this._renderMine()}
|
||||
</div>`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderMine() {
|
||||
const rows = this._mine ?? [];
|
||||
if (rows.length === 0) {
|
||||
return html`
|
||||
<div class="um-empty" style="padding:1rem"><i class="bi bi-puzzle"></i>
|
||||
<p>${t('plugins.empty.mine')}</p>
|
||||
<p style="font-size:.8rem;opacity:.7">${t('plugins.empty.ask_admin')}</p>
|
||||
</div>`;
|
||||
}
|
||||
return html`<div class="connector-grid">${rows.map(p => this._renderUserCard(p))}</div>`;
|
||||
}
|
||||
|
||||
/// Stored config entries the schema does not cover (e.g. Telegram's
|
||||
/// `{linked, chat_id}` status blob) rendered as a small status list.
|
||||
_renderUserStatus(p) {
|
||||
const covered = new Set(schemaFields(p.user_config_schema).map(f => f.key));
|
||||
const extra = Object.entries(p.user_config || {}).filter(([k]) => !covered.has(k));
|
||||
if (!extra.length) return nothing;
|
||||
return html`
|
||||
<div class="d-flex flex-column gap-1 mb-2" style="font-size:.78rem">
|
||||
${extra.map(([k, v]) => html`
|
||||
<div class="d-flex justify-content-between">
|
||||
<span class="text-muted">${k}</span>
|
||||
<span>${typeof v === 'boolean' ? (v ? t('plugins.yes') : t('plugins.no')) : String(v)}</span>
|
||||
</div>`)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderUserCard(p) {
|
||||
const fields = schemaFields(p.user_config_schema);
|
||||
const status = this._uStatus[p.id] || {};
|
||||
const draft = fields.length ? this._uDraft(p) : {};
|
||||
return html`
|
||||
<div class="connector-card" style="cursor:default">
|
||||
<div class="connector-card-head">
|
||||
<div class="connector-card-icon connector-card-icon--empty"><i class="bi bi-puzzle"></i></div>
|
||||
<div class="connector-card-title">
|
||||
<div class="connector-card-name">${p.name}</div>
|
||||
<div class="connector-card-sub">${p.id}</div>
|
||||
</div>
|
||||
<span class="connector-chip connector-chip--ok">${t('plugins.status.active')}</span>
|
||||
</div>
|
||||
${p.description ? html`<div class="connector-card-desc">${p.description}</div>` : nothing}
|
||||
${this._renderUserStatus(p)}
|
||||
${fields.length ? html`
|
||||
<div class="mt-2">
|
||||
${fields.map(f => html`
|
||||
<div class="mb-2">
|
||||
<label class="form-label" style="font-size:.8rem">${f.label}${f.required ? html`<span class="text-danger">*</span>` : nothing}</label>
|
||||
${f.type === 'boolean' ? html`
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" .checked=${!!draft[f.key]}
|
||||
@change=${(e) => this._setUDraft(p.id, f.key, e.target.checked)} />
|
||||
</div>` : html`
|
||||
<input class="form-control form-control-sm"
|
||||
type=${f.sensitive ? 'password' : (f.type === 'number' ? 'number' : 'text')}
|
||||
.value=${String(draft[f.key] ?? '')}
|
||||
@input=${(e) => this._setUDraft(p.id, f.key, f.type === 'number' ? Number(e.target.value) : e.target.value)} />`}
|
||||
${f.description ? html`<div class="form-text" style="font-size:.7rem">${f.description}</div>` : nothing}
|
||||
</div>`)}
|
||||
${status.err ? html`<div class="alert alert-danger py-1 px-2" style="font-size:.78rem">${status.err}</div>` : nothing}
|
||||
${status.ok ? html`<div class="alert alert-success py-1 px-2" style="font-size:.78rem">${status.ok}</div>` : nothing}
|
||||
<button class="btn btn-sm btn-primary" @click=${() => this._saveUserConfig(p)}>
|
||||
<i class="bi bi-check-lg me-1"></i>${t('plugins.save')}
|
||||
</button>
|
||||
</div>` : nothing}
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
// Shared helpers for the plugin pages (`plugins-page`, `plugin-catalog`,
|
||||
// `plugin-detail`). Kept separate from `connector-common.js` on purpose: the
|
||||
// plugin model (JSON-Schema config blobs, `plugin_access`) is not the
|
||||
// connector model (env/api_key manifests).
|
||||
|
||||
export async function jf(url, opts) {
|
||||
const res = await fetch(url, opts);
|
||||
if (!res.ok) throw new Error(await res.text() || `HTTP ${res.status}`);
|
||||
const ct = res.headers.get('content-type') || '';
|
||||
return ct.includes('application/json') ? res.json() : null;
|
||||
}
|
||||
|
||||
/// Normalizes a plugin JSON Schema (`{properties, required}`) into flat field
|
||||
/// descriptors. Only the scalar types a form can render are supported.
|
||||
export function schemaFields(schema) {
|
||||
const props = schema?.properties;
|
||||
if (!props || typeof props !== 'object') return [];
|
||||
const required = new Set(Array.isArray(schema.required) ? schema.required : []);
|
||||
return Object.entries(props).map(([key, p]) => ({
|
||||
key,
|
||||
label: p.title || key,
|
||||
description: p.description || '',
|
||||
type: p.type === 'boolean' ? 'boolean' : (p.type === 'integer' || p.type === 'number') ? 'number' : 'string',
|
||||
required: required.has(key),
|
||||
sensitive: !!p.sensitive,
|
||||
}));
|
||||
}
|
||||
|
||||
export const hasSchema = (schema) => schemaFields(schema).length > 0;
|
||||
|
||||
/// Required config keys with no persisted value yet.
|
||||
export function missingRequired(p) {
|
||||
return schemaFields(p.config_schema)
|
||||
.filter(f => f.required && (p.config?.[f.key] === undefined || p.config?.[f.key] === null || p.config?.[f.key] === ''));
|
||||
}
|
||||
|
||||
/// Admin-catalog health of a plugin: 'off' | 'needs_config' | 'not_running' | 'ok'.
|
||||
/// Green only when enabled, running and every required config key is set.
|
||||
export function pluginHealth(p) {
|
||||
if (!p.enabled) return 'off';
|
||||
if (missingRequired(p).length) return 'needs_config';
|
||||
if (!p.running) return 'not_running';
|
||||
return 'ok';
|
||||
}
|
||||
@@ -11,6 +11,7 @@ export class AppSidebar extends I18nMixin(LightElement) {
|
||||
_debugMode: { state: true },
|
||||
_recentProjects: { state: true },
|
||||
_me: { state: true },
|
||||
_pluginPages: { state: true },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
@@ -22,6 +23,7 @@ export class AppSidebar extends I18nMixin(LightElement) {
|
||||
this._debugMode = false;
|
||||
this._recentProjects = [];
|
||||
this._me = null;
|
||||
this._pluginPages = [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
@@ -54,6 +56,8 @@ export class AppSidebar extends I18nMixin(LightElement) {
|
||||
this._loadDebugMode();
|
||||
this._loadRecentProjects();
|
||||
this._loadMe();
|
||||
this._loadPluginPages();
|
||||
window.addEventListener('plugins-changed', () => this._loadPluginPages());
|
||||
window.addEventListener('project-updated', () => this._loadRecentProjects());
|
||||
}
|
||||
|
||||
@@ -114,14 +118,31 @@ export class AppSidebar extends I18nMixin(LightElement) {
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// Plugin-contributed menu entries (`GET /api/plugins/pages`, per-user).
|
||||
// Refetched on `plugins-changed` (fired by the plugins admin pages after an
|
||||
// enable/disable) so entries appear/disappear without a reload.
|
||||
async _loadPluginPages() {
|
||||
try {
|
||||
const res = await fetch('/api/plugins/pages');
|
||||
if (res.ok) this._pluginPages = await res.json();
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
_pageFromHash() {
|
||||
const hash = location.hash.slice(1);
|
||||
if (!hash) return 'home';
|
||||
// Segment ends at the first `/` (e.g. `#session/123`) or `?` (e.g. `#file_viewer?path=...`).
|
||||
const match = hash.match(/^([^/?]+)/);
|
||||
const segment = match ? match[1] : '';
|
||||
// Plugin pages: `#plugin/<plugin_id>/<page_id>` — the route is accepted by
|
||||
// shape (deep links must survive the async `/api/plugins/pages` load); the
|
||||
// host reports an error if the page turns out not to exist for this user.
|
||||
if (segment === 'plugin') {
|
||||
const m = hash.match(/^plugin\/([^/?]+)\/([^/?]+)/);
|
||||
return m ? `plugin/${m[1]}/${m[2]}` : 'home';
|
||||
}
|
||||
// `connector` (singular) is the per-connector detail page, `connectors` the list.
|
||||
return ['inbox', 'dashboard', 'tasks', 'projects', 'models', 'providers', 'approval', 'agents', 'users', 'roles', 'shared-folders', 'connectors', 'connector', 'catalog', 'marketplace', 'profile', 'config', 'llm-requests', 'session', 'tic', 'file_viewer'].includes(segment) ? segment : 'home';
|
||||
return ['inbox', 'dashboard', 'tasks', 'projects', 'models', 'providers', 'approval', 'agents', 'users', 'roles', 'shared-folders', 'connectors', 'connector', 'plugins', 'plugin-catalog', 'plugin-detail', 'catalog', 'marketplace', 'profile', 'config', 'llm-requests', 'session', 'tic', 'file_viewer'].includes(segment) ? segment : 'home';
|
||||
}
|
||||
|
||||
_tasksSectionFromHash() {
|
||||
@@ -214,6 +235,23 @@ export class AppSidebar extends I18nMixin(LightElement) {
|
||||
`;
|
||||
}
|
||||
|
||||
_renderPluginPages() {
|
||||
if (!this._pluginPages.length) return nothing;
|
||||
return html`
|
||||
<hr class="sidebar-divider" />
|
||||
${this._pluginPages.map(p => {
|
||||
const route = `plugin/${p.plugin_id}/${p.page_id}`;
|
||||
return html`
|
||||
<a href="#${route}"
|
||||
class="sidebar-link ${this._activePage === route ? 'active' : ''}"
|
||||
@click=${(e) => this._togglePage(route, e)}>
|
||||
<i class="bi bi-${p.icon}"></i>
|
||||
<span class="sidebar-link-name">${p.title}</span>
|
||||
</a>`;
|
||||
})}
|
||||
`;
|
||||
}
|
||||
|
||||
_renderRecentProjects() {
|
||||
if (!this._recentProjects.length) return nothing;
|
||||
return html`
|
||||
@@ -324,6 +362,17 @@ export class AppSidebar extends I18nMixin(LightElement) {
|
||||
<i class="bi bi-plug"></i>
|
||||
<span class="sidebar-link-name">${t('nav.connectors')}</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-link ${this._activePage === 'plugins' ? 'active' : ''}"
|
||||
@click=${(e) => this._togglePage('plugins', e)}>
|
||||
<i class="bi bi-puzzle"></i>
|
||||
<span class="sidebar-link-name">${t('nav.plugins')}</span>
|
||||
</a>
|
||||
${this._me?.role_id === 'admin' ? html`
|
||||
<a href="#" class="sidebar-link ${this._activePage === 'plugin-catalog' || this._activePage === 'plugin-detail' ? 'active' : ''}"
|
||||
@click=${(e) => this._togglePage('plugin-catalog', e)}>
|
||||
<i class="bi bi-puzzle-fill"></i>
|
||||
<span class="sidebar-link-name">${t('nav.plugin_catalog')}</span>
|
||||
</a>` : nothing}
|
||||
${this._me?.role_id === 'admin' ? html`
|
||||
<a href="#" class="sidebar-link ${this._activePage === 'catalog' || this._activePage === 'marketplace' ? 'active' : ''}"
|
||||
@click=${(e) => this._togglePage('catalog', e)}>
|
||||
@@ -336,6 +385,8 @@ export class AppSidebar extends I18nMixin(LightElement) {
|
||||
<span class="sidebar-link-name">${t('nav.config')}</span>
|
||||
</a>
|
||||
|
||||
${this._renderPluginPages()}
|
||||
|
||||
${this._debugMode ? html`
|
||||
<hr class="sidebar-divider" />
|
||||
<a href="#llm-requests"
|
||||
|
||||
Reference in New Issue
Block a user