plugins: merge the user Plugins page into per-plugin sidebar pages
Nightly Build / build (push) Successful in 7m1s
Nightly Build / build (push) Successful in 7m1s
The generic per-user #plugins page is gone: a plugin with per-user settings hosts them in its own web_pages() sidebar page instead (Telegram's pairing page is new; Honcho's opt-in page already existed). The admin catalog moves from #plugin-catalog to #plugins (old hash redirected), and user_config_schema is removed from the Plugin trait, the API DTOs and both plugins — the my-config endpoint, the plugin_user_configs store and the update_user_config hook stay, now driven by each plugin's own page fragment.
This commit is contained in:
@@ -3,8 +3,10 @@ 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.
|
||||
// Plugins page (`#plugins`) — the admin board of every registered plugin,
|
||||
// and the single plugin management surface (the old per-user `#plugins`
|
||||
// page is gone: a plugin with per-user settings — Telegram's pairing,
|
||||
// Honcho's opt-in — hosts them in its own sidebar page via `web_pages()`).
|
||||
//
|
||||
// One card per plugin: an enable/disable toggle, a health dot (green =
|
||||
// enabled, running and fully configured; red = enabled but broken; grey =
|
||||
@@ -14,7 +16,7 @@ import { jf, hasSchema, pluginHealth } from './shared/plugin-common.js';
|
||||
//
|
||||
// Styling reuses the connectors card grid (`web/css/connectors.css`).
|
||||
|
||||
const PAGE_ID = 'plugin-catalog';
|
||||
const PAGE_ID = 'plugins';
|
||||
|
||||
export class PluginCatalogPage extends LightElement {
|
||||
|
||||
@@ -94,7 +96,7 @@ export class PluginCatalogPage extends LightElement {
|
||||
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>
|
||||
<h2 class="um-title"><i class="bi bi-puzzle-fill me-2"></i>${t('nav.plugins')}</h2>
|
||||
</div>
|
||||
|
||||
${this._error ? html`
|
||||
@@ -138,8 +140,8 @@ export class PluginCatalogPage extends LightElement {
|
||||
<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}
|
||||
${p.has_user_page ? html`
|
||||
<span class="connector-chip connector-chip--scope"><i class="bi bi-person"></i>${t('plugins.badge.user_page')}</span>` : nothing}
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-between mt-1">
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
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';
|
||||
import { jf, schemaFields, 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
|
||||
// Configure button on `#plugins` — the plugin counterpart of
|
||||
// `connector-detail.js`.
|
||||
//
|
||||
// Hosts what was squeezed into the old combined page: the instance-wide
|
||||
@@ -128,10 +128,10 @@ export class PluginDetailPage extends LightElement {
|
||||
|
||||
_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.
|
||||
// to the plugins list 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' } }));
|
||||
history.pushState({ page: 'plugins' }, '', '#plugins');
|
||||
window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'plugins' } }));
|
||||
}
|
||||
|
||||
_setDraft(key, value) {
|
||||
@@ -243,8 +243,8 @@ export class PluginDetailPage extends LightElement {
|
||||
</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}
|
||||
${p.has_user_page ? html`
|
||||
<span class="connector-chip connector-chip--scope"><i class="bi bi-person"></i>${t('plugins.badge.user_page')}</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"
|
||||
|
||||
@@ -1,202 +0,0 @@
|
||||
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>`;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
// 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).
|
||||
// Shared helpers for the plugin pages (`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);
|
||||
|
||||
@@ -31,7 +31,6 @@ const NAV = [
|
||||
// Estensioni — what the assistant is made of / can use. Visible to everyone;
|
||||
// Agents is read-only for non-admins (editable only by the admin server-side).
|
||||
{ id: 'connectors', group: 'extensions', priority: 10, icon: 'plug', labelKey: 'nav.connectors', aliases: ['connector', 'marketplace'] },
|
||||
{ id: 'plugins', group: 'extensions', priority: 20, icon: 'puzzle', labelKey: 'nav.plugins' },
|
||||
{ id: 'agents', group: 'extensions', priority: 30, icon: 'people', labelKey: 'nav.agents' },
|
||||
// The background agents the instance runs for you. Visible to everyone: the
|
||||
// run log is the caller's own, so there is nothing here to gate on a role.
|
||||
@@ -44,7 +43,7 @@ const NAV = [
|
||||
{ id: 'models', group: 'config', priority: 30, icon: 'cpu', labelKey: 'nav.models', adminOnly: true },
|
||||
{ id: 'providers', group: 'config', priority: 40, icon: 'plug', labelKey: 'nav.providers', adminOnly: true },
|
||||
{ id: 'approval', group: 'config', priority: 50, icon: 'shield-check', labelKey: 'nav.security', adminOnly: true },
|
||||
{ id: 'plugin-catalog', group: 'config', priority: 70, icon: 'puzzle-fill', labelKey: 'nav.plugin_catalog', adminOnly: true, aliases: ['plugin-detail'] },
|
||||
{ id: 'plugins', group: 'config', priority: 70, icon: 'puzzle-fill', labelKey: 'nav.plugins', adminOnly: true, aliases: ['plugin-catalog', 'plugin-detail'] },
|
||||
{ id: 'config', group: 'config', priority: 90, icon: 'gear', labelKey: 'nav.config', adminOnly: true },
|
||||
|
||||
// Sviluppo — debug surface, only with the debug flag on.
|
||||
@@ -228,7 +227,9 @@ export class AppSidebar extends I18nMixin(LightElement) {
|
||||
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', 'plugins', 'plugin-catalog', 'plugin-detail', 'marketplace', 'profile', 'config', 'llm-requests', 'session', 'system-agents', 'file_viewer', 'tool_detail'].includes(segment) ? segment : 'home';
|
||||
// `plugin-catalog` is the pre-merge hash of what is now `#plugins`.
|
||||
const page = segment === 'plugin-catalog' ? 'plugins' : segment;
|
||||
return ['inbox', 'dashboard', 'tasks', 'projects', 'models', 'providers', 'approval', 'agents', 'users', 'roles', 'shared-folders', 'connectors', 'connector', 'plugins', 'plugin-detail', 'marketplace', 'profile', 'config', 'llm-requests', 'session', 'system-agents', 'file_viewer', 'tool_detail'].includes(page) ? page : 'home';
|
||||
}
|
||||
|
||||
_tasksSectionFromHash() {
|
||||
|
||||
Reference in New Issue
Block a user