dguiducci/Skald-Circle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(plugins): plugin pages, per-user config, capabilities gate, mobile/telegram refactors

Browse Source 
- 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:
dguiducci
2026-07-19 20:47:09 +01:00
parent f85876350e
commit ba911ae8cb
50 changed files with 3186 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+8
View File
@@ -14,6 +14,10 @@ import { RolesPage } from './components/roles-page.js';
import { SharedFoldersPage } from './components/shared-folders.js';
import { ConnectorsPage } from './components/connectors.js';
import { ConnectorDetailPage } from './components/connector-detail.js';
import { PluginsPage } from './components/plugins-page.js';
import { PluginPageHost } from './components/plugin-page-host.js';
import { PluginCatalogPage } from './components/plugin-catalog.js';
import { PluginDetailPage } from './components/plugin-detail.js';
import { MarketplacePage } from './components/marketplace.js';
import { CatalogPage } from './components/catalog.js';
import { ProfilePage } from './components/profile-page.js';
@@ -51,6 +55,10 @@ customElements.define('roles-page', RolesPage);
customElements.define('shared-folders-page', SharedFoldersPage);
customElements.define('connectors-page', ConnectorsPage);
customElements.define('connector-detail-page', ConnectorDetailPage);
customElements.define('plugins-page', PluginsPage);
customElements.define('plugin-page-host', PluginPageHost);
customElements.define('plugin-catalog-page', PluginCatalogPage);
customElements.define('plugin-detail-page', PluginDetailPage);
customElements.define('marketplace-page', MarketplacePage);
customElements.define('catalog-page', CatalogPage);
customElements.define('profile-page', ProfilePage);
web/assets/mascot.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 277 KiB

web/components/plugin-catalog.js
+160
View File
@@ -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>`;
}
}
web/components/plugin-detail.js
+312
View File
@@ -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>`;
}
}
web/components/plugin-page-host.js
+98
View File
@@ -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}
`;
}
}
web/components/plugins-page.js
+202
View File
@@ -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>`;
}
}
web/components/shared/plugin-common.js
+44
View File
@@ -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';
}
web/components/sidebar.js
+52 -1
View File
@@ -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"
web/css/connectors.css
+30
View File
@@ -270,3 +270,33 @@
font-size: 0.7rem;
color: var(--placeholder-color);
}
/* ── Plugin health dot ────────────────────────────────────────────────────────
*
* The plugin catalog's red/green status: green = enabled, running and fully
* configured; red = enabled but broken; grey = off. Same Bootstrap-subtle
* colour sources as the chips, so light/dark follows `data-bs-theme`.
*/
.plugin-status-dot {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
flex-shrink: 0;
}
.plugin-status-dot--ok {
background: var(--bs-success);
box-shadow: 0 0 0 2px var(--bs-success-bg-subtle);
}
.plugin-status-dot--err {
background: var(--bs-danger);
box-shadow: 0 0 0 2px var(--bs-danger-bg-subtle);
}
.plugin-status-dot--off {
background: var(--placeholder-color);
opacity: 0.5;
}
web/css/page-shell.css
+16
View File
@@ -76,6 +76,10 @@ roles-page,
shared-folders-page,
connectors-page,
connector-detail-page,
plugins-page,
plugin-catalog-page,
plugin-detail-page,
plugin-page-host,
marketplace-page,
catalog-page,
profile-page {
@@ -88,6 +92,18 @@ profile-page {
border-right: 1px solid var(--toolbar-border, #e5e9f0);
}
/* Plugin-contributed page fragments mount inside the host with the `plugin-id`
attribute set — make them fill the host column (the host is `flex:1`, but a
bare custom element has no default sizing). Generic across all plugins. */
plugin-page-host > [plugin-id] {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
min-height: 0;
overflow: hidden;
}
/* ── Workspace placeholder ──────────────────────────────────────────────────── */
.app-workspace {
web/i18n/en.js
+41
View File
@@ -16,6 +16,8 @@ export default {
'nav.users': 'Users',
'nav.roles': 'Roles',
'nav.connectors': 'Connectors',
'nav.plugins': 'Plugins',
'nav.plugin_catalog': 'Plugin Catalog',
'nav.catalog': 'Catalog',
'nav.config': 'Settings',
'nav.llm_requests': 'LLM Requests',
@@ -839,6 +841,45 @@ export default {
'connectors.error.no_connector': 'No connector named "{name}" is available to you.',
// ── Plugins ─────────────────────────────────────────────────────────────────
'plugins.title': 'Plugins',
'plugins.loading': 'Loading…',
'plugins.section.mine': 'My plugins',
'plugins.section.manage': 'Manage plugins',
'plugins.empty.mine': 'No plugins available to you yet.',
'plugins.empty.ask_admin': 'Ask an admin to grant you access.',
'plugins.empty.manage': 'No plugins registered.',
'plugins.status.active': 'active',
'plugins.status.running': 'running',
'plugins.status.enabled': 'enabled',
'plugins.status.off': 'off',
'plugins.enabled': 'Enabled',
'plugins.save': 'Save',
'plugins.save_config': 'Save config',
'plugins.saved': 'Saved.',
'plugin_page.loading': 'Loading…',
'plugin_page.unavailable': 'This page is not available (plugin disabled or page not granted).',
'plugins.yes': 'yes',
'plugins.no': 'no',
'plugins.badge.user_config': 'per-user settings',
'plugins.access.btn': 'User access',
'plugins.access.desc': 'Tick a box to let that person see and configure this plugin. Saving replaces the whole list.',
'plugins.access.empty': 'No users.',
'plugins.access.save': 'Save access',
'plugins.error.required': '"{field}" is required.',
'plugins.catalog.title': 'Plugin Catalog',
'plugins.catalog.configure': 'Configure',
'plugins.health.ok': 'active',
'plugins.health.off': 'off',
'plugins.health.needs_config': 'needs configuration',
'plugins.health.not_running': 'not running',
'plugins.badge.instance_config': 'instance settings',
'plugins.detail.back': 'Back to catalog',
'plugins.detail.config.title': 'Instance configuration',
'plugins.detail.config.empty': 'This plugin has no instance settings.',
'plugins.detail.access.title': 'User access',
'plugins.detail.not_found': 'No plugin named "{id}".',
// ── Providers ───────────────────────────────────────────────────────────────
'providers.title': 'Providers',
'providers.add': 'Add',
web/i18n/fr.js
+41
View File
@@ -16,6 +16,8 @@ export default {
'nav.users': 'Utilisateurs',
'nav.roles': 'Rôles',
'nav.connectors': 'Connecteurs',
'nav.plugins': 'Plugins',
'nav.plugin_catalog': 'Catalogue des plugins',
'nav.catalog': 'Catalogue',
'nav.config': 'Paramètres',
'nav.llm_requests': 'Requêtes LLM',
@@ -829,6 +831,45 @@ export default {
'connectors.error.no_connector': 'Aucun connecteur nommé "{name}" ne vous est disponible.',
// ── Plugins ─────────────────────────────────────────────────────────────────
'plugins.title': 'Plugins',
'plugins.loading': 'Chargement…',
'plugins.section.mine': 'Mes plugins',
'plugins.section.manage': 'Gérer les plugins',
'plugins.empty.mine': 'Aucun plugin disponible pour vous.',
'plugins.empty.ask_admin': "Demandez à un administrateur de vous accorder l'accès.",
'plugins.empty.manage': 'Aucun plugin enregistré.',
'plugins.status.active': 'actif',
'plugins.status.running': 'en cours',
'plugins.status.enabled': 'activé',
'plugins.status.off': 'arrêté',
'plugins.enabled': 'Activé',
'plugins.save': 'Enregistrer',
'plugins.save_config': 'Enregistrer la config',
'plugins.saved': 'Enregistré.',
'plugin_page.loading': 'Chargement…',
'plugin_page.unavailable': 'Page non disponible (plugin désactivé ou page non accordée).',
'plugins.yes': 'oui',
'plugins.no': 'non',
'plugins.badge.user_config': 'réglages par utilisateur',
'plugins.access.btn': 'Accès utilisateurs',
'plugins.access.desc': "Cochez qui peut voir et configurer ce plugin. L'enregistrement remplace toute la liste.",
'plugins.access.empty': 'Aucun utilisateur.',
'plugins.access.save': 'Enregistrer les accès',
'plugins.error.required': '« {field} » est requis.',
'plugins.catalog.title': 'Catalogue des plugins',
'plugins.catalog.configure': 'Configurer',
'plugins.health.ok': 'actif',
'plugins.health.off': 'arrêté',
'plugins.health.needs_config': 'à configurer',
'plugins.health.not_running': 'non démarré',
'plugins.badge.instance_config': 'réglages d’instance',
'plugins.detail.back': 'Retour au catalogue',
'plugins.detail.config.title': 'Configuration de l’instance',
'plugins.detail.config.empty': 'Ce plugin n’a aucun réglage d’instance.',
'plugins.detail.access.title': 'Accès utilisateurs',
'plugins.detail.not_found': 'Aucun plugin nommé « {id} ».',
// ── Providers ───────────────────────────────────────────────────────────────
'providers.title': 'Fournisseurs',
'providers.add': 'Ajouter',
web/i18n/it.js
+41
View File
@@ -16,6 +16,8 @@ export default {
'nav.users': 'Utenti',
'nav.roles': 'Ruoli',
'nav.connectors': 'Connettori',
'nav.plugins': 'Plugin',
'nav.plugin_catalog': 'Catalogo plugin',
'nav.catalog': 'Catalogo',
'nav.config': 'Impostazioni',
'nav.llm_requests': 'Richieste LLM',
@@ -829,6 +831,45 @@ export default {
'connectors.error.no_connector': 'Nessun connettore chiamato "{name}" è disponibile per te.',
// ── Plugin ──────────────────────────────────────────────────────────────────
'plugins.title': 'Plugin',
'plugins.loading': 'Caricamento…',
'plugins.section.mine': 'I miei plugin',
'plugins.section.manage': 'Gestione plugin',
'plugins.empty.mine': 'Nessun plugin disponibile per te.',
'plugins.empty.ask_admin': "Chiedi a un amministratore di concederti l'accesso.",
'plugins.empty.manage': 'Nessun plugin registrato.',
'plugins.status.active': 'attivo',
'plugins.status.running': 'in esecuzione',
'plugins.status.enabled': 'abilitato',
'plugins.status.off': 'spento',
'plugins.enabled': 'Abilitato',
'plugins.save': 'Salva',
'plugins.save_config': 'Salva configurazione',
'plugins.saved': 'Salvato.',
'plugin_page.loading': 'Caricamento…',
'plugin_page.unavailable': 'Pagina non disponibile (plugin disabilitato o pagina non concessa).',
'plugins.yes': 'sì',
'plugins.no': 'no',
'plugins.badge.user_config': 'impostazioni per utente',
'plugins.access.btn': 'Accesso utenti',
'plugins.access.desc': "Seleziona chi può vedere e configurare questo plugin. Il salvataggio sostituisce l'intera lista.",
'plugins.access.empty': 'Nessun utente.',
'plugins.access.save': 'Salva accesso',
'plugins.error.required': '"{field}" è obbligatorio.',
'plugins.catalog.title': 'Catalogo plugin',
'plugins.catalog.configure': 'Configura',
'plugins.health.ok': 'attivo',
'plugins.health.off': 'spento',
'plugins.health.needs_config': 'da configurare',
'plugins.health.not_running': 'non in esecuzione',
'plugins.badge.instance_config': 'impostazioni istanza',
'plugins.detail.back': 'Torna al catalogo',
'plugins.detail.config.title': 'Configurazione istanza',
'plugins.detail.config.empty': 'Questo plugin non ha impostazioni di istanza.',
'plugins.detail.access.title': 'Accesso utenti',
'plugins.detail.not_found': 'Nessun plugin chiamato "{id}".',
// ── Provider ────────────────────────────────────────────────────────────────
'providers.title': 'Provider',
'providers.add': 'Aggiungi',
web/index.html
+4
View File
@@ -96,6 +96,10 @@
<shared-folders-page></shared-folders-page>
<connectors-page></connectors-page>
<connector-detail-page></connector-detail-page>
<plugins-page></plugins-page>
<plugin-page-host></plugin-page-host>
<plugin-catalog-page></plugin-catalog-page>
<plugin-detail-page></plugin-detail-page>
<marketplace-page></marketplace-page>
<catalog-page></catalog-page>
<profile-page style="display:none"></profile-page>