feat(mcp): connector marketplace + split the Connectors surface (§7/§14/§15)
Fills a gap the blueprint names: the admin had to hand-author every
`mcp_catalog` entry. A remote feed of vetted connectors now proposes them
and the admin installs — the feed is *consultative*, so §14's risk axis is
untouched and the trust anchor stays on the box.
Marketplace client (`src/frontend/api/marketplace.rs`):
- Fetches the feed server-side (it sends no CORS headers) and caches it;
icons are proxied for the same reason.
- Verifies every declared SHA-256 before writing, fail-closed and
all-or-nothing. Feed-supplied paths are refused if they escape
`./scripts/<id>/`. Importing an `mcp_local` entry still demands the
admin-only `mcp.register_local_script`.
- Translates the feed's vocabulary into Skald's: `user`→`per_user`,
`mcp_local`→`local_script`. Scope is read, never inferred from transport
(a remote connector can be per-user — that is what `mcp.register_remote`
is for), and an unreadable `type` fails closed to the answer needing more
authority. The feed's `llm_short_description` maps to `description`, the
column `render_mcp_list` puts in front of the LLM for `activate_tools()`.
- Feed URL is config (`marketplace.url`), not a constant: an on-premise
product must not hard-require reaching one vendor's host.
Two silent failures found while wiring it:
- `transport_of` maps anything unknown to Stdio, so the feed's
`streamable-http` would have tried to spawn a command. Normalised on import.
- Some servers want their key as a query param, not a bearer header, and say
so with a `{key}` placeholder. Substituted at connect time in
`global_row_spec`/`user_row_spec` — never at rest, so the key stays in its
own column and the stored URL stays a template.
Pages, split by the question each answers:
- Connectors — what runs (`UserMcpView` = global ∪ per-user) and what I can
add. Same page for everyone; the admin just has more verbs. One Available
list with the verb per row: `per_user`→Activate, `global`→Enable globally.
Enabling a global is the admin's counterpart to activating a per-user one,
so the catalog picker dropdown is gone — the entry comes from the row.
- Connector Catalog (admin) — what this box offers. One `Add connector`
with two sources: marketplace first (vetted, hashed), manual second
(unvetted by nature) — the order mirrors the trust model.
- Marketplace (admin) — reached from the catalog, not the sidebar: it is a
destination of an action, not a place.
`available()` no longer returns `McpGlobalServerRow`: that row carries
`api_key` and this view now reaches every logged-in user. A slim `GlobalView`
crosses instead, and an admin sees every global (with `can_use` marking their
own) so one enabled for someone else stays manageable.
Also fixes `connectors-page` having no CSS rule at all — every sibling page
has one, so it never got `flex: 1` and left an empty column beside it.
This commit is contained in:
@@ -0,0 +1,321 @@
|
||||
import { html, nothing } from 'lit';
|
||||
import { LightElement } from '../lib/base.js';
|
||||
|
||||
// Connector catalog — blueprint §14/§15. Admin only.
|
||||
//
|
||||
// One question: **what does this box offer?** The catalog is the shelf; nothing here
|
||||
// is running. A `global` entry still needs the admin to enable it and a `per_user`
|
||||
// one still needs each user to activate it — both of which happen on the Connectors
|
||||
// page, where the runtime lives.
|
||||
//
|
||||
// Adding is one intent with two sources, so it is one button with two options rather
|
||||
// than two distant affordances. Their order mirrors the trust model (§14): the
|
||||
// marketplace path is vetted and hash-verified, the manual path is the escape hatch
|
||||
// that puts unvetted code on the box — which is why it needs `mcp.register_local_script`
|
||||
// and why it sits second.
|
||||
//
|
||||
// Reuses the shared `um-*` / bootstrap styling (no page-specific CSS).
|
||||
|
||||
const ADMIN_ID = 'admin';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export class CatalogPage extends LightElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_open: { state: true },
|
||||
_me: { state: true },
|
||||
_rows: { state: true },
|
||||
_addOpen: { state: true }, // the "Add connector" chooser
|
||||
_error: { state: true },
|
||||
_modal: { state: true },
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._open = false;
|
||||
this._reset();
|
||||
}
|
||||
|
||||
_reset() {
|
||||
this._me = null;
|
||||
this._rows = null;
|
||||
this._addOpen = false;
|
||||
this._error = null;
|
||||
this._modal = null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
window.addEventListener('llm-page-change', (e) => {
|
||||
this._open = e.detail.page === 'catalog';
|
||||
this.style.display = this._open ? 'flex' : 'none';
|
||||
if (this._open) this._load();
|
||||
});
|
||||
// Close the chooser when clicking anywhere else.
|
||||
document.addEventListener('click', () => { if (this._addOpen) this._addOpen = false; });
|
||||
}
|
||||
|
||||
get _isAdmin() { return this._me?.role_id === ADMIN_ID; }
|
||||
|
||||
async _load() {
|
||||
this._error = null;
|
||||
try {
|
||||
this._me = await jf('/api/auth/me');
|
||||
if (!this._isAdmin) return;
|
||||
this._rows = await jf('/api/mcp/catalog');
|
||||
} catch (e) {
|
||||
this._error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
_goMarketplace() {
|
||||
this._addOpen = false;
|
||||
history.pushState({ page: 'marketplace' }, '', '#marketplace');
|
||||
window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'marketplace' } }));
|
||||
}
|
||||
|
||||
_goConnectors() {
|
||||
history.pushState({ page: 'connectors' }, '', '#connectors');
|
||||
window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'connectors' } }));
|
||||
}
|
||||
|
||||
// ── Manual entry ───────────────────────────────────────────────────────────
|
||||
|
||||
_openManual() {
|
||||
this._addOpen = false;
|
||||
this._modal = {
|
||||
form: {
|
||||
name: '', scope: 'per_user', source: 'remote', transport: 'stdio',
|
||||
command: '', args: '', url: '', script_path: '', config_schema: '',
|
||||
auth_kind: 'none', friendly_name: '', description: '',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
_patch(field, value) {
|
||||
this._modal = { ...this._modal, form: { ...this._modal.form, [field]: value } };
|
||||
}
|
||||
|
||||
_closeModal() { this._modal = null; this._error = null; }
|
||||
|
||||
async _saveManual() {
|
||||
const f = this._modal.form;
|
||||
if (!f.name.trim()) { this._error = 'Name is required.'; return; }
|
||||
const listField = (s) => s.split(/[\n,]/).map(x => x.trim()).filter(Boolean);
|
||||
try {
|
||||
await jf('/api/mcp/catalog', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: f.name.trim(),
|
||||
scope: f.scope,
|
||||
source: f.source,
|
||||
transport: f.transport,
|
||||
command: f.command.trim() || null,
|
||||
args: f.args.trim() ? listField(f.args) : null,
|
||||
url: f.url.trim() || null,
|
||||
script_path: f.script_path.trim() || null,
|
||||
config_schema: f.config_schema.trim() ? listField(f.config_schema) : null,
|
||||
auth_kind: f.auth_kind,
|
||||
friendly_name: f.friendly_name.trim() || null,
|
||||
description: f.description.trim() || null,
|
||||
}),
|
||||
});
|
||||
this._closeModal();
|
||||
await this._load();
|
||||
} catch (e) { this._error = e.message; }
|
||||
}
|
||||
|
||||
async _delete(row) {
|
||||
if (!confirm(`Remove "${row.name}" from the catalog?\n\nAnything already activated from it keeps running.`)) return;
|
||||
try {
|
||||
await jf(`/api/mcp/catalog/${row.id}`, { method: 'DELETE' });
|
||||
await this._load();
|
||||
} catch (e) { this._error = e.message; }
|
||||
}
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────────────────
|
||||
|
||||
render() {
|
||||
if (!this._open) return nothing;
|
||||
const rows = this._rows ?? [];
|
||||
const loading = this._rows === null && !this._error && this._isAdmin;
|
||||
|
||||
return html`
|
||||
<div class="um-page">
|
||||
<div class="um-header">
|
||||
<h2 class="um-title"><i class="bi bi-journal-text me-2"></i>Connector Catalog</h2>
|
||||
<div class="um-header-right">
|
||||
${this._isAdmin ? this._renderAddButton() : nothing}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this._error && !this._modal ? html`
|
||||
<div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>` : nothing}
|
||||
|
||||
<div style="padding:0 1.25rem 1.5rem; overflow:auto">
|
||||
${this._me && !this._isAdmin ? html`
|
||||
<div class="um-empty" style="padding:2rem">
|
||||
<i class="bi bi-shield-lock"></i>
|
||||
<p>The catalog is managed by the admin.</p>
|
||||
<p style="font-size:.8rem;opacity:.7">
|
||||
What you can activate is on the
|
||||
<a href="#connectors" @click=${(e) => { e.preventDefault(); this._goConnectors(); }}>Connectors</a> page.
|
||||
</p>
|
||||
</div>
|
||||
` : loading ? html`
|
||||
<div class="um-empty" style="padding:1rem"><i class="bi bi-hourglass-split"></i><p>Loading…</p></div>
|
||||
` : html`
|
||||
<div class="text-muted mt-3 mb-3" style="font-size:.8rem">
|
||||
What this box offers. Nothing here is running — a global entry still needs
|
||||
enabling, a per-user one still needs each user to activate it, both on the
|
||||
<a href="#connectors" @click=${(e) => { e.preventDefault(); this._goConnectors(); }}>Connectors</a> page.
|
||||
</div>
|
||||
${rows.length === 0 ? this._renderEmpty() : this._renderTable(rows)}
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
${this._renderModal()}`;
|
||||
}
|
||||
|
||||
// Bootstrap's own dropdown classes, not a hand-rolled panel: 5.3 themes
|
||||
// `.dropdown-menu`/`.dropdown-item` from `data-bs-theme`, so this follows the
|
||||
// light/dark switch for free. `.show` opens it — the state is ours, not
|
||||
// Bootstrap's JS.
|
||||
_renderAddButton() {
|
||||
return html`
|
||||
<div class="dropdown" style="position:relative" @click=${(e) => e.stopPropagation()}>
|
||||
<button class="btn btn-sm btn-primary" @click=${() => { this._addOpen = !this._addOpen; }}>
|
||||
<i class="bi bi-plus-lg me-1"></i>Add connector
|
||||
<i class="bi bi-chevron-down ms-1" style="font-size:.7rem"></i>
|
||||
</button>
|
||||
${this._addOpen ? html`
|
||||
<div class="dropdown-menu show" style="right:0;left:auto;top:calc(100% + .25rem);min-width:280px">
|
||||
<button class="dropdown-item" style="white-space:normal" @click=${() => this._goMarketplace()}>
|
||||
<div style="display:flex;align-items:center;gap:.5rem">
|
||||
<i class="bi bi-shop"></i><strong style="font-size:.85rem">From the marketplace</strong>
|
||||
</div>
|
||||
<div class="text-muted" style="font-size:.7rem;margin-top:.15rem">
|
||||
Vetted connectors, files verified by SHA-256.
|
||||
</div>
|
||||
</button>
|
||||
<div class="dropdown-divider"></div>
|
||||
<button class="dropdown-item" style="white-space:normal" @click=${() => this._openManual()}>
|
||||
<div style="display:flex;align-items:center;gap:.5rem">
|
||||
<i class="bi bi-pencil"></i><strong style="font-size:.85rem">Manually</strong>
|
||||
</div>
|
||||
<div class="text-muted" style="font-size:.7rem;margin-top:.15rem">
|
||||
You supply the config, and vouch for it yourself.
|
||||
</div>
|
||||
</button>
|
||||
</div>` : nothing}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderEmpty() {
|
||||
return html`
|
||||
<div class="um-empty" style="padding:2rem">
|
||||
<i class="bi bi-journal"></i>
|
||||
<p>The catalog is empty.</p>
|
||||
<p style="font-size:.8rem;opacity:.7">Add a connector from the marketplace to get started.</p>
|
||||
<button class="btn btn-sm btn-primary mt-2" @click=${() => this._goMarketplace()}>
|
||||
<i class="bi bi-shop me-1"></i>Browse the marketplace
|
||||
</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderTable(rows) {
|
||||
return html`
|
||||
<table class="um-table">
|
||||
<thead><tr><th>Connector</th><th>Scope</th><th>Type</th><th>Auth</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
${rows.map(r => html`
|
||||
<tr>
|
||||
<td>
|
||||
<strong>${r.friendly_name || r.name}</strong>
|
||||
${r.friendly_name ? html` <code class="text-muted" style="font-size:.7rem">${r.name}</code>` : nothing}
|
||||
${r.description ? html`
|
||||
<div class="text-muted" style="font-size:.75rem;max-width:44ch;overflow:hidden;
|
||||
text-overflow:ellipsis;white-space:nowrap" title=${r.description}>${r.description}</div>` : nothing}
|
||||
</td>
|
||||
<td><span class="badge ${r.scope === 'global' ? 'bg-info' : 'bg-secondary'}" style="font-size:.65rem">
|
||||
${r.scope === 'global' ? 'global' : 'per-user'}</span></td>
|
||||
<td><span class="badge ${r.source === 'local_script' ? 'bg-warning text-dark' : 'bg-secondary'}" style="font-size:.65rem">
|
||||
${r.source === 'local_script' ? 'local script' : 'remote'}</span></td>
|
||||
<td><span class="text-muted" style="font-size:.78rem">${r.auth_kind}</span></td>
|
||||
<td><div class="um-actions">
|
||||
<button class="um-btn-icon" title="Remove from catalog" @click=${() => this._delete(r)}>
|
||||
<i class="bi bi-trash"></i></button>
|
||||
</div></td>
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>`;
|
||||
}
|
||||
|
||||
_field(label, value, oninput, opts = {}) {
|
||||
return html`<div class="mb-3">
|
||||
<label class="form-label">${label}${opts.hint ? html` <span class="text-muted">(${opts.hint})</span>` : nothing}</label>
|
||||
<input class="form-control ${opts.mono ? 'font-monospace' : ''}" type=${opts.type || 'text'}
|
||||
placeholder=${opts.placeholder || ''} .value=${value} @input=${oninput} />
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_select(label, value, options, onchange) {
|
||||
return html`<div class="mb-3">
|
||||
<label class="form-label">${label}</label>
|
||||
<select class="form-select" @change=${onchange}>
|
||||
${options.map(o => html`<option value=${o} ?selected=${value === o}>${o}</option>`)}
|
||||
</select>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderModal() {
|
||||
if (!this._modal) return nothing;
|
||||
const f = this._modal.form;
|
||||
const isScript = f.source === 'local_script';
|
||||
return html`
|
||||
<div class="um-modal-overlay" @click=${(e) => { if (e.target.classList.contains('um-modal-overlay')) this._closeModal(); }}>
|
||||
<div class="um-modal">
|
||||
<div class="um-modal-header">
|
||||
<i class="bi bi-pencil"></i><span>Add connector manually</span>
|
||||
<button class="um-btn-icon ms-auto" @click=${() => this._closeModal()}><i class="bi bi-x-lg"></i></button>
|
||||
</div>
|
||||
<div class="um-modal-body">
|
||||
${this._error ? html`<div class="alert alert-danger py-2 mb-3" style="font-size:.85rem">${this._error}</div>` : nothing}
|
||||
${isScript ? html`
|
||||
<div class="alert alert-warning py-2 mb-3" style="font-size:.78rem">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i>A local script runs code on this box.
|
||||
Nothing verifies it — unlike the marketplace path, there is no digest to check.
|
||||
</div>` : nothing}
|
||||
${this._field('Name', f.name, e => this._patch('name', e.target.value), { hint: 'slug', mono: true })}
|
||||
${this._select('Scope', f.scope, ['per_user', 'global'], e => this._patch('scope', e.target.value))}
|
||||
${this._select('Type', f.source, ['remote', 'local_script'], e => this._patch('source', e.target.value))}
|
||||
${this._select('Transport', f.transport, ['stdio', 'http', 'sse'], e => this._patch('transport', e.target.value))}
|
||||
${isScript
|
||||
? html`${this._field('Command', f.command, e => this._patch('command', e.target.value), { placeholder: 'python3', mono: true })}
|
||||
${this._field('Script path', f.script_path, e => this._patch('script_path', e.target.value), { hint: 'under ./scripts', mono: true })}`
|
||||
: this._field('URL', f.url, e => this._patch('url', e.target.value), { mono: true })}
|
||||
${this._field('Args', f.args, e => this._patch('args', e.target.value), { hint: 'one per line', mono: true })}
|
||||
${this._field('Required secret/env keys', f.config_schema, e => this._patch('config_schema', e.target.value), { hint: 'comma/newline', mono: true })}
|
||||
${this._select('Auth', f.auth_kind, ['none', 'api_key', 'oauth', 'qr', 'ssh_key'], e => this._patch('auth_kind', e.target.value))}
|
||||
${this._field('Friendly name', f.friendly_name, e => this._patch('friendly_name', e.target.value))}
|
||||
${this._field('Description', f.description, e => this._patch('description', e.target.value),
|
||||
{ hint: 'the LLM reads this when deciding to activate the connector' })}
|
||||
</div>
|
||||
<div class="um-modal-footer">
|
||||
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._closeModal()}>Cancel</button>
|
||||
<button class="btn btn-sm btn-primary" @click=${() => this._saveManual()}>
|
||||
<i class="bi bi-check-lg me-1"></i>Add to catalog</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
+166
-215
@@ -1,13 +1,18 @@
|
||||
import { html, nothing } from 'lit';
|
||||
import { LightElement } from '../lib/base.js';
|
||||
|
||||
// Connectors (MCP) management — blueprint §14/§15.
|
||||
// Connectors (MCP) — blueprint §7/§14/§15.
|
||||
//
|
||||
// Two audiences on one page:
|
||||
// • every user: activate/deactivate per-user connectors from the catalog, and
|
||||
// see the global connectors they've been granted;
|
||||
// • admin (role_id === 'admin'): curate the catalog and enable globally-active
|
||||
// connectors + grant per-user access.
|
||||
// One question: **what is running, and what can I add?** This is the runtime view —
|
||||
// literally `UserMcpView` (global ∪ per-user) plus the actions that create those
|
||||
// instances. What this box *offers* is a different question, answered by the
|
||||
// Connector Catalog page.
|
||||
//
|
||||
// The same page serves everyone; the admin just has more verbs. A catalog entry is a
|
||||
// template with two runtimes (§7), so "Available" is one list with the verb that fits
|
||||
// each row: a `per_user` entry says Activate (anyone), a `global` entry says Enable
|
||||
// globally (admin only). Enabling a global is the admin's counterpart to activating a
|
||||
// per-user one — which is why they live side by side instead of in an admin dungeon.
|
||||
//
|
||||
// Reuses the shared `um-*` / bootstrap styling (no page-specific CSS).
|
||||
|
||||
@@ -31,12 +36,9 @@ export class ConnectorsPage extends LightElement {
|
||||
return {
|
||||
_open: { state: true },
|
||||
_me: { state: true }, // { role_id }
|
||||
_available: { state: true }, // { catalog: [...], global: [names] }
|
||||
_activated: { state: true }, // [ user server rows ]
|
||||
_catalog: { state: true }, // admin: catalog rows
|
||||
_global: { state: true }, // admin: global server rows
|
||||
_users: { state: true }, // admin: user summaries (for access)
|
||||
_access: { state: true }, // admin: { server_id -> Set(user_id) } (loaded lazily)
|
||||
_available: { state: true }, // { catalog: [...], globals: [...] }
|
||||
_activated: { state: true }, // my per-user server rows
|
||||
_users: { state: true }, // admin: user summaries (for the access modal)
|
||||
_error: { state: true },
|
||||
_modal: { state: true },
|
||||
};
|
||||
@@ -52,8 +54,6 @@ export class ConnectorsPage extends LightElement {
|
||||
this._me = null;
|
||||
this._available = null;
|
||||
this._activated = null;
|
||||
this._catalog = null;
|
||||
this._global = null;
|
||||
this._users = null;
|
||||
this._error = null;
|
||||
this._modal = null;
|
||||
@@ -80,16 +80,8 @@ export class ConnectorsPage extends LightElement {
|
||||
]);
|
||||
this._available = available;
|
||||
this._activated = activated;
|
||||
if (this._isAdmin) {
|
||||
const [catalog, global, users] = await Promise.all([
|
||||
jf('/api/mcp/catalog'),
|
||||
jf('/api/mcp/global'),
|
||||
jf('/api/users'),
|
||||
]);
|
||||
this._catalog = catalog;
|
||||
this._global = global;
|
||||
this._users = users;
|
||||
}
|
||||
// Only the access modal needs the user list, and only an admin opens it.
|
||||
if (this._isAdmin) this._users = await jf('/api/users');
|
||||
} catch (e) {
|
||||
this._error = e.message;
|
||||
}
|
||||
@@ -101,14 +93,19 @@ export class ConnectorsPage extends LightElement {
|
||||
|
||||
_closeModal() { this._modal = null; this._error = null; }
|
||||
|
||||
// ── User: activate / deactivate ────────────────────────────────────────────
|
||||
_goCatalog() {
|
||||
history.pushState({ page: 'catalog' }, '', '#catalog');
|
||||
window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'catalog' } }));
|
||||
}
|
||||
|
||||
// ── Activate a per-user connector ──────────────────────────────────────────
|
||||
|
||||
_openActivate(entry) {
|
||||
const schema = parseJson(entry.config_schema_json, []);
|
||||
const schema = parseJson(entry.config_schema_json, []) || [];
|
||||
this._modal = {
|
||||
kind: 'activate',
|
||||
entry,
|
||||
form: { name: entry.name, api_key: '', env: Object.fromEntries((schema || []).map(k => [k, ''])) },
|
||||
form: { name: entry.name, api_key: '', env: Object.fromEntries(schema.map(k => [k, ''])) },
|
||||
};
|
||||
}
|
||||
|
||||
@@ -141,77 +138,29 @@ export class ConnectorsPage extends LightElement {
|
||||
} catch (e) { this._error = e.message; }
|
||||
}
|
||||
|
||||
// ── Admin: catalog ─────────────────────────────────────────────────────────
|
||||
// ── Enable a global connector (admin) ──────────────────────────────────────
|
||||
|
||||
_openCatalogNew() {
|
||||
this._modal = {
|
||||
kind: 'catalog',
|
||||
form: {
|
||||
name: '', scope: 'per_user', source: 'remote', transport: 'stdio',
|
||||
command: '', args: '', url: '', script_path: '', config_schema: '',
|
||||
auth_kind: 'none', friendly_name: '', description: '',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async _saveCatalog() {
|
||||
const f = this._modal.form;
|
||||
if (!f.name.trim()) { this._error = 'Name is required.'; return; }
|
||||
const listField = (s) => s.split(/[\n,]/).map(x => x.trim()).filter(Boolean);
|
||||
try {
|
||||
await jf('/api/mcp/catalog', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: f.name.trim(),
|
||||
scope: f.scope,
|
||||
source: f.source,
|
||||
transport: f.transport,
|
||||
command: f.command.trim() || null,
|
||||
args: f.args.trim() ? listField(f.args) : null,
|
||||
url: f.url.trim() || null,
|
||||
script_path: f.script_path.trim() || null,
|
||||
config_schema: f.config_schema.trim() ? listField(f.config_schema) : null,
|
||||
auth_kind: f.auth_kind,
|
||||
friendly_name: f.friendly_name.trim() || null,
|
||||
description: f.description.trim() || null,
|
||||
}),
|
||||
});
|
||||
this._closeModal();
|
||||
await this._load();
|
||||
} catch (e) { this._error = e.message; }
|
||||
}
|
||||
|
||||
async _deleteCatalog(row) {
|
||||
if (!confirm(`Delete catalog entry "${row.name}"?`)) return;
|
||||
try {
|
||||
await jf(`/api/mcp/catalog/${row.id}`, { method: 'DELETE' });
|
||||
await this._load();
|
||||
} catch (e) { this._error = e.message; }
|
||||
}
|
||||
|
||||
// ── Admin: global connectors + access ──────────────────────────────────────
|
||||
|
||||
_openGlobalEnable() {
|
||||
const globals = (this._catalog ?? []).filter(c => c.scope === 'global');
|
||||
// The entry comes from the row the admin clicked, so there is no catalog picker:
|
||||
// the old dropdown existed only because this action lived on a page that did not
|
||||
// show the catalog.
|
||||
_openEnableGlobal(entry) {
|
||||
this._modal = {
|
||||
kind: 'global',
|
||||
globals,
|
||||
form: { catalog_name: globals[0]?.name ?? '', name: '', api_key: '' },
|
||||
entry,
|
||||
form: { name: entry.name, api_key: '' },
|
||||
};
|
||||
}
|
||||
|
||||
async _enableGlobal() {
|
||||
const f = this._modal.form;
|
||||
if (!f.catalog_name) { this._error = 'Pick a catalog entry.'; return; }
|
||||
const { entry, form } = this._modal;
|
||||
try {
|
||||
await jf('/api/mcp/global', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
catalog_name: f.catalog_name,
|
||||
name: f.name.trim() || null,
|
||||
api_key: f.api_key || null,
|
||||
catalog_name: entry.name,
|
||||
name: form.name.trim() || null,
|
||||
api_key: form.api_key || null,
|
||||
}),
|
||||
});
|
||||
this._closeModal();
|
||||
@@ -220,7 +169,7 @@ export class ConnectorsPage extends LightElement {
|
||||
}
|
||||
|
||||
async _deleteGlobal(row) {
|
||||
if (!confirm(`Remove global connector "${row.name}"?`)) return;
|
||||
if (!confirm(`Disable global connector "${row.name}"?\n\nIt stops for everyone who can use it.`)) return;
|
||||
try {
|
||||
await jf(`/api/mcp/global/${row.id}`, { method: 'DELETE' });
|
||||
await this._load();
|
||||
@@ -253,6 +202,7 @@ export class ConnectorsPage extends LightElement {
|
||||
body: JSON.stringify({ user_ids: [...selected] }),
|
||||
});
|
||||
this._closeModal();
|
||||
await this._load();
|
||||
} catch (e) { this._error = e.message; }
|
||||
}
|
||||
|
||||
@@ -266,22 +216,25 @@ export class ConnectorsPage extends LightElement {
|
||||
<div class="um-page">
|
||||
<div class="um-header">
|
||||
<h2 class="um-title"><i class="bi bi-plug me-2"></i>Connectors</h2>
|
||||
<div class="um-header-right">
|
||||
${this._isAdmin ? html`
|
||||
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._goCatalog()}>
|
||||
<i class="bi bi-journal-text me-1"></i>Catalog
|
||||
</button>` : nothing}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this._error && !this._modal ? html`
|
||||
<div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>
|
||||
` : nothing}
|
||||
<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> Loading…</div>` : html`
|
||||
<div style="padding:0 1.25rem 1.5rem; overflow:auto">
|
||||
${this._renderMine()}
|
||||
${this._renderGlobals()}
|
||||
${this._renderAvailable()}
|
||||
${this._isAdmin ? this._renderAdmin() : nothing}
|
||||
</div>
|
||||
`}
|
||||
</div>`}
|
||||
</div>
|
||||
${this._renderModal()}
|
||||
`;
|
||||
${this._renderModal()}`;
|
||||
}
|
||||
|
||||
_section(title, icon, right, body) {
|
||||
@@ -297,101 +250,120 @@ export class ConnectorsPage extends LightElement {
|
||||
|
||||
_renderMine() {
|
||||
const rows = this._activated ?? [];
|
||||
const globals = this._available?.global ?? [];
|
||||
return this._section('My connectors', 'bi-check2-circle', nothing, html`
|
||||
${globals.length ? html`
|
||||
<div class="mb-2" style="font-size:.8rem;color:var(--text-muted,#888)">
|
||||
Global (granted by admin): ${globals.map(g => html`<code class="me-1">${g}</code>`)}
|
||||
</div>` : nothing}
|
||||
${rows.length === 0 ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-plug"></i><p>No per-user connectors activated.</p></div>` : html`
|
||||
<table class="um-table">
|
||||
<thead><tr><th>Name</th><th>Source</th><th>From catalog</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
${rows.map(r => html`
|
||||
<tr>
|
||||
<td><strong>${r.name}</strong></td>
|
||||
<td>${r.source}</td>
|
||||
<td>${r.catalog_name ? html`<code>${r.catalog_name}</code>` : html`<span class="text-muted">—</span>`}</td>
|
||||
<td><div class="um-actions">
|
||||
<button class="um-btn-icon" title="Deactivate" @click=${() => this._deactivate(r)}><i class="bi bi-trash"></i></button>
|
||||
</div></td>
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>`}
|
||||
`);
|
||||
return this._section('My connectors', 'bi-check2-circle', nothing,
|
||||
rows.length === 0
|
||||
? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-plug"></i>
|
||||
<p>No per-user connectors activated.</p></div>`
|
||||
: html`
|
||||
<table class="um-table">
|
||||
<thead><tr><th>Name</th><th>Type</th><th>From catalog</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
${rows.map(r => html`
|
||||
<tr>
|
||||
<td><strong>${r.name}</strong></td>
|
||||
<td><span class="badge ${r.source === 'local_script' ? 'bg-warning text-dark' : 'bg-secondary'}"
|
||||
style="font-size:.65rem">${r.source === 'local_script' ? 'local script' : 'remote'}</span></td>
|
||||
<td>${r.catalog_name ? html`<code>${r.catalog_name}</code>` : html`<span class="text-muted">—</span>`}</td>
|
||||
<td><div class="um-actions">
|
||||
<button class="um-btn-icon" title="Deactivate" @click=${() => this._deactivate(r)}>
|
||||
<i class="bi bi-trash"></i></button>
|
||||
</div></td>
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>`);
|
||||
}
|
||||
|
||||
_renderGlobals() {
|
||||
const rows = this._available?.globals ?? [];
|
||||
if (rows.length === 0 && !this._isAdmin) return nothing;
|
||||
return this._section('Global connectors', 'bi-globe', nothing,
|
||||
rows.length === 0
|
||||
? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-globe"></i>
|
||||
<p>None enabled. Enable one from Available below.</p></div>`
|
||||
: html`
|
||||
${this._isAdmin ? html`
|
||||
<div class="text-muted mb-2" style="font-size:.75rem">
|
||||
Shared by the household. You see every one so you can manage it —
|
||||
<span class="badge bg-success" style="font-size:.6rem">yours</span> marks the ones granted to you.
|
||||
</div>` : nothing}
|
||||
<table class="um-table">
|
||||
<thead><tr><th>Name</th><th>Transport</th><th>Status</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
${rows.map(g => html`
|
||||
<tr>
|
||||
<td>
|
||||
<strong>${g.friendly_name || g.name}</strong>
|
||||
${this._isAdmin && g.can_use ? html`
|
||||
<span class="badge bg-success ms-1" style="font-size:.6rem">yours</span>` : nothing}
|
||||
${g.description ? html`
|
||||
<div class="text-muted" style="font-size:.75rem;max-width:44ch;overflow:hidden;
|
||||
text-overflow:ellipsis;white-space:nowrap" title=${g.description}>${g.description}</div>` : nothing}
|
||||
</td>
|
||||
<td><span class="text-muted" style="font-size:.78rem">${g.transport}</span></td>
|
||||
<td>${g.enabled
|
||||
? html`<span class="badge bg-success" style="font-size:.65rem">on</span>`
|
||||
: html`<span class="badge bg-secondary" style="font-size:.65rem">off</span>`}</td>
|
||||
<td><div class="um-actions">
|
||||
${this._isAdmin ? html`
|
||||
<button class="um-btn-icon" title="Manage access" @click=${() => this._openAccess(g)}>
|
||||
<i class="bi bi-people"></i></button>
|
||||
<button class="um-btn-icon" title="Disable" @click=${() => this._deleteGlobal(g)}>
|
||||
<i class="bi bi-trash"></i></button>
|
||||
` : nothing}
|
||||
</div></td>
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>`);
|
||||
}
|
||||
|
||||
_renderAvailable() {
|
||||
const entries = this._available?.catalog ?? [];
|
||||
if (entries.length === 0) return nothing;
|
||||
const enabledGlobals = new Set((this._available?.globals ?? []).map(g => g.catalog_name ?? g.name));
|
||||
const activatedNames = new Set((this._activated ?? []).map(r => r.catalog_name));
|
||||
return this._section('Available to activate', 'bi-plus-square', nothing, html`
|
||||
|
||||
const right = this._isAdmin ? html`
|
||||
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._goCatalog()}>
|
||||
<i class="bi bi-plus-lg me-1"></i>Add to catalog
|
||||
</button>` : nothing;
|
||||
|
||||
if (entries.length === 0) {
|
||||
return this._section('Available', 'bi-plus-square', right, html`
|
||||
<div class="um-empty" style="padding:1rem"><i class="bi bi-journal"></i>
|
||||
<p>${this._isAdmin ? 'The catalog is empty.' : 'Nothing available to you yet.'}</p>
|
||||
${this._isAdmin ? html`
|
||||
<p style="font-size:.8rem;opacity:.7">Add connectors to the catalog first.</p>` : nothing}
|
||||
</div>`);
|
||||
}
|
||||
|
||||
return this._section('Available', 'bi-plus-square', right, html`
|
||||
<table class="um-table">
|
||||
<thead><tr><th>Connector</th><th>Source</th><th>Auth</th><th></th></tr></thead>
|
||||
<thead><tr><th>Connector</th><th>Scope</th><th>Auth</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
${entries.map(e => html`
|
||||
<tr>
|
||||
<td><strong>${e.friendly_name || e.name}</strong>
|
||||
${e.description ? html`<div class="text-muted" style="font-size:.78rem">${e.description}</div>` : nothing}</td>
|
||||
<td>${e.source}</td>
|
||||
<td>${e.auth_kind}</td>
|
||||
<td><div class="um-actions">
|
||||
<button class="btn btn-sm btn-primary" @click=${() => this._openActivate(e)}>
|
||||
<i class="bi bi-plug me-1"></i>Activate
|
||||
</button>
|
||||
${activatedNames.has(e.name) ? html`<span class="badge bg-success ms-1">active</span>` : nothing}
|
||||
</div></td>
|
||||
</tr>`)}
|
||||
${entries.map(e => {
|
||||
const isGlobal = e.scope === 'global';
|
||||
const already = isGlobal ? enabledGlobals.has(e.name) : activatedNames.has(e.name);
|
||||
return html`
|
||||
<tr>
|
||||
<td><strong>${e.friendly_name || e.name}</strong>
|
||||
${e.description ? html`
|
||||
<div class="text-muted" style="font-size:.75rem;max-width:44ch;overflow:hidden;
|
||||
text-overflow:ellipsis;white-space:nowrap" title=${e.description}>${e.description}</div>` : nothing}</td>
|
||||
<td><span class="badge ${isGlobal ? 'bg-info' : 'bg-secondary'}" style="font-size:.65rem">
|
||||
${isGlobal ? 'global' : 'per-user'}</span></td>
|
||||
<td><span class="text-muted" style="font-size:.78rem">${e.auth_kind}</span></td>
|
||||
<td><div class="um-actions">
|
||||
${already
|
||||
? html`<span class="badge bg-success">${isGlobal ? 'enabled' : 'active'}</span>`
|
||||
: isGlobal
|
||||
? html`<button class="btn btn-sm btn-primary" @click=${() => this._openEnableGlobal(e)}>
|
||||
<i class="bi bi-globe me-1"></i>Enable globally</button>`
|
||||
: html`<button class="btn btn-sm btn-primary" @click=${() => this._openActivate(e)}>
|
||||
<i class="bi bi-plug me-1"></i>Activate</button>`}
|
||||
</div></td>
|
||||
</tr>`;
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
`);
|
||||
}
|
||||
|
||||
_renderAdmin() {
|
||||
const catalog = this._catalog ?? [];
|
||||
const global = this._global ?? [];
|
||||
return html`
|
||||
<hr style="margin:1.75rem 0;opacity:.4" />
|
||||
${this._section('Catalog', 'bi-journal-text', html`
|
||||
<button class="btn btn-sm btn-primary" @click=${() => this._openCatalogNew()}><i class="bi bi-plus-lg me-1"></i>New entry</button>
|
||||
`, catalog.length === 0 ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-journal"></i><p>Empty catalog.</p></div>` : html`
|
||||
<table class="um-table">
|
||||
<thead><tr><th>Name</th><th>Scope</th><th>Source</th><th>Transport</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
${catalog.map(c => html`
|
||||
<tr>
|
||||
<td><strong>${c.name}</strong>${c.friendly_name ? html` <span class="text-muted">(${c.friendly_name})</span>` : nothing}</td>
|
||||
<td>${c.scope}</td>
|
||||
<td>${c.source}</td>
|
||||
<td>${c.transport}</td>
|
||||
<td><div class="um-actions">
|
||||
<button class="um-btn-icon" title="Delete" @click=${() => this._deleteCatalog(c)}><i class="bi bi-trash"></i></button>
|
||||
</div></td>
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>
|
||||
`)}
|
||||
|
||||
${this._section('Global connectors', 'bi-globe', html`
|
||||
<button class="btn btn-sm btn-primary" @click=${() => this._openGlobalEnable()}><i class="bi bi-plus-lg me-1"></i>Enable global</button>
|
||||
`, global.length === 0 ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-globe"></i><p>No global connectors.</p></div>` : html`
|
||||
<table class="um-table">
|
||||
<thead><tr><th>Name</th><th>Transport</th><th>Enabled</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
${global.map(g => html`
|
||||
<tr>
|
||||
<td><strong>${g.name}</strong></td>
|
||||
<td>${g.transport}</td>
|
||||
<td>${g.enabled ? html`<span class="badge bg-success">on</span>` : html`<span class="badge bg-secondary">off</span>`}</td>
|
||||
<td><div class="um-actions">
|
||||
<button class="um-btn-icon" title="Manage access" @click=${() => this._openAccess(g)}><i class="bi bi-people"></i></button>
|
||||
<button class="um-btn-icon" title="Remove" @click=${() => this._deleteGlobal(g)}><i class="bi bi-trash"></i></button>
|
||||
</div></td>
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>
|
||||
`)}
|
||||
`;
|
||||
</table>`);
|
||||
}
|
||||
|
||||
// ── Modals ─────────────────────────────────────────────────────────────────
|
||||
@@ -424,15 +396,6 @@ export class ConnectorsPage extends LightElement {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_select(label, value, options, onchange) {
|
||||
return html`<div class="mb-3">
|
||||
<label class="form-label">${label}</label>
|
||||
<select class="form-select" @change=${onchange}>
|
||||
${options.map(o => html`<option value=${o} ?selected=${value === o}>${o}</option>`)}
|
||||
</select>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderModal() {
|
||||
if (!this._modal) return nothing;
|
||||
const m = this._modal;
|
||||
@@ -443,6 +406,11 @@ export class ConnectorsPage extends LightElement {
|
||||
return this._modalShell(`Activate ${m.entry.friendly_name || m.entry.name}`, 'bi-plug', html`
|
||||
${this._field('Name', f.name, e => this._patch('name', e.target.value), { hint: 'unique for you', mono: true })}
|
||||
${m.entry.auth_kind === 'api_key' ? this._field('API key', f.api_key, e => this._patch('api_key', e.target.value), { type: 'password', mono: true }) : nothing}
|
||||
${m.entry.auth_kind === 'oauth' ? html`
|
||||
<div class="alert alert-warning py-2" style="font-size:.78rem">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i>This connector needs an interactive login,
|
||||
which is not wired up yet — it will activate but cannot authenticate.
|
||||
</div>` : nothing}
|
||||
${schema.map(k => html`<div class="mb-3">
|
||||
<label class="form-label font-monospace" style="font-size:.8rem">${k}</label>
|
||||
<input class="form-control font-monospace" .value=${f.env[k] ?? ''}
|
||||
@@ -451,33 +419,16 @@ export class ConnectorsPage extends LightElement {
|
||||
`, () => this._activate(), 'Activate');
|
||||
}
|
||||
|
||||
if (m.kind === 'catalog') {
|
||||
const f = m.form;
|
||||
const isScript = f.source === 'local_script';
|
||||
return this._modalShell('New catalog entry', 'bi-journal-plus', html`
|
||||
${this._field('Name', f.name, e => this._patch('name', e.target.value), { hint: 'slug', mono: true })}
|
||||
${this._select('Scope', f.scope, ['per_user', 'global'], e => this._patch('scope', e.target.value))}
|
||||
${this._select('Source', f.source, ['remote', 'local_script'], e => this._patch('source', e.target.value))}
|
||||
${this._select('Transport', f.transport, ['stdio', 'http', 'sse'], e => this._patch('transport', e.target.value))}
|
||||
${isScript
|
||||
? html`${this._field('Command', f.command, e => this._patch('command', e.target.value), { placeholder: 'python', mono: true })}
|
||||
${this._field('Script path', f.script_path, e => this._patch('script_path', e.target.value), { hint: 'under ./scripts', mono: true })}`
|
||||
: this._field('URL', f.url, e => this._patch('url', e.target.value), { mono: true })}
|
||||
${this._field('Args', f.args, e => this._patch('args', e.target.value), { hint: 'one per line', mono: true })}
|
||||
${this._field('Required secret/env keys', f.config_schema, e => this._patch('config_schema', e.target.value), { hint: 'comma/newline', mono: true })}
|
||||
${this._select('Auth', f.auth_kind, ['none', 'api_key', 'oauth', 'qr', 'ssh_key'], e => this._patch('auth_kind', e.target.value))}
|
||||
${this._field('Friendly name', f.friendly_name, e => this._patch('friendly_name', e.target.value))}
|
||||
${this._field('Description', f.description, e => this._patch('description', e.target.value))}
|
||||
`, () => this._saveCatalog(), 'Create');
|
||||
}
|
||||
|
||||
if (m.kind === 'global') {
|
||||
const f = m.form;
|
||||
return this._modalShell('Enable global connector', 'bi-globe', html`
|
||||
${m.globals.length === 0 ? html`<div class="text-muted mb-2">No <code>global</code>-scoped catalog entries yet. Add one to the catalog first.</div>` : nothing}
|
||||
${this._select('Catalog entry', f.catalog_name, m.globals.map(g => g.name), e => this._patch('catalog_name', e.target.value))}
|
||||
${this._field('Name override', f.name, e => this._patch('name', e.target.value), { hint: 'optional', mono: true })}
|
||||
${this._field('API key', f.api_key, e => this._patch('api_key', e.target.value), { type: 'password', mono: true })}
|
||||
return this._modalShell(`Enable ${m.entry.friendly_name || m.entry.name} globally`, 'bi-globe', html`
|
||||
<div class="text-muted mb-3" style="font-size:.78rem">
|
||||
Runs once for the household on the host. Nobody reaches it until you grant access.
|
||||
</div>
|
||||
${this._field('Name', f.name, e => this._patch('name', e.target.value), { hint: 'runtime name', mono: true })}
|
||||
${m.entry.auth_kind === 'api_key'
|
||||
? this._field('API key', f.api_key, e => this._patch('api_key', e.target.value), { type: 'password', mono: true })
|
||||
: nothing}
|
||||
`, () => this._enableGlobal(), 'Enable');
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,289 @@
|
||||
import { html, nothing } from 'lit';
|
||||
import { LightElement } from '../lib/base.js';
|
||||
|
||||
// Connector marketplace — blueprint §14/§15.
|
||||
//
|
||||
// Admin-only: browses the remote feed of vetted connectors and *installs* one into
|
||||
// the local catalog. Installing is deliberately not activating — a global entry
|
||||
// still needs the admin to enable it with a key, a per-user one still needs each
|
||||
// user to activate it from the Connectors page. The feed only ever proposes; the
|
||||
// trust anchor stays on this box.
|
||||
//
|
||||
// Page shell from the shared `um-*` styling; the card grid, chips and filter bar
|
||||
// live in `css/connectors.css`. Colours come from the theme's own variables — no
|
||||
// literal colour belongs in here.
|
||||
|
||||
const ADMIN_ID = 'admin';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export class MarketplacePage extends LightElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_open: { state: true },
|
||||
_me: { state: true },
|
||||
_cards: { state: true },
|
||||
_feedErr: { state: true }, // feed unreachable — scoped, not page-level
|
||||
_error: { state: true },
|
||||
_q: { state: true },
|
||||
_scope: { state: true }, // 'all' | 'per_user' | 'global'
|
||||
_source: { state: true }, // 'all' | 'remote' | 'local_script'
|
||||
_installing: { state: true },
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._open = false;
|
||||
this._q = '';
|
||||
this._scope = 'all';
|
||||
this._source = 'all';
|
||||
this._reset();
|
||||
}
|
||||
|
||||
_reset() {
|
||||
this._me = null;
|
||||
this._cards = null;
|
||||
this._feedErr = null;
|
||||
this._error = null;
|
||||
this._installing = null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
window.addEventListener('llm-page-change', (e) => {
|
||||
this._open = e.detail.page === 'marketplace';
|
||||
this.style.display = this._open ? 'flex' : 'none';
|
||||
if (this._open) this._load();
|
||||
});
|
||||
}
|
||||
|
||||
get _isAdmin() { return this._me?.role_id === ADMIN_ID; }
|
||||
|
||||
async _load() {
|
||||
this._error = null;
|
||||
try {
|
||||
this._me = await jf('/api/auth/me');
|
||||
if (!this._isAdmin) return;
|
||||
await this._loadFeed(false);
|
||||
} catch (e) {
|
||||
this._error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async _loadFeed(refresh) {
|
||||
this._feedErr = null;
|
||||
if (refresh) this._cards = null;
|
||||
try {
|
||||
const res = await jf(`/api/mcp/marketplace${refresh ? '?refresh=true' : ''}`);
|
||||
this._cards = res.connectors ?? [];
|
||||
} catch (e) {
|
||||
this._cards = [];
|
||||
this._feedErr = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async _install(card) {
|
||||
const warn = card.source === 'local_script'
|
||||
? `\n\nThis puts code on this box:\n • ${card.file_count} file(s), each verified against its SHA-256\n • installed into ./scripts/${card.id}/`
|
||||
: '';
|
||||
if (!confirm(`Install "${card.name}" into the catalog?${warn}\n\nInstalling does not activate it.`)) return;
|
||||
this._installing = card.id;
|
||||
this._error = null;
|
||||
try {
|
||||
await jf('/api/mcp/marketplace/install', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id: card.id }),
|
||||
});
|
||||
await this._loadFeed(false);
|
||||
} catch (e) {
|
||||
this._error = e.message;
|
||||
} finally {
|
||||
this._installing = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Client-side: the feed is small, and one payload keeps typing instant.
|
||||
get _filtered() {
|
||||
const q = this._q.trim().toLowerCase();
|
||||
return (this._cards ?? []).filter((c) => {
|
||||
if (this._scope !== 'all' && c.scope !== this._scope) return false;
|
||||
if (this._source !== 'all' && c.source !== this._source) return false;
|
||||
if (!q) return true;
|
||||
const hay = [c.name, c.id, c.user_description, ...(c.tags ?? []), ...(c.requires ?? [])]
|
||||
.filter(Boolean).join(' ').toLowerCase();
|
||||
return hay.includes(q);
|
||||
});
|
||||
}
|
||||
|
||||
// The marketplace is a destination of the catalog's "Add connector" action, not a
|
||||
// place of its own — so it goes back where it came from.
|
||||
_goCatalog() {
|
||||
history.pushState({ page: 'catalog' }, '', '#catalog');
|
||||
window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'catalog' } }));
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this._open) return nothing;
|
||||
const loading = this._cards === null && !this._feedErr && !this._error;
|
||||
|
||||
return html`
|
||||
<div class="um-page">
|
||||
<div class="um-header">
|
||||
<h2 class="um-title"><i class="bi bi-shop me-2"></i>Marketplace</h2>
|
||||
<div class="um-header-right">
|
||||
<button class="btn btn-sm btn-outline-primary" @click=${() => this._goCatalog()}>
|
||||
<i class="bi bi-arrow-left me-1"></i>Catalog
|
||||
</button>
|
||||
${this._isAdmin ? html`
|
||||
<button class="um-btn-icon ms-1" title="Refetch the feed"
|
||||
@click=${() => this._loadFeed(true)}><i class="bi bi-arrow-clockwise"></i></button>
|
||||
` : nothing}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:0 1.25rem 1.5rem; overflow:auto">
|
||||
${this._error ? html`
|
||||
<div class="alert alert-danger py-2 mt-3" style="font-size:.85rem">${this._error}</div>` : nothing}
|
||||
|
||||
${this._me && !this._isAdmin ? html`
|
||||
<div class="um-empty" style="padding:2rem">
|
||||
<i class="bi bi-shield-lock"></i>
|
||||
<p>The marketplace is managed by the admin.</p>
|
||||
<p style="font-size:.8rem;opacity:.7">
|
||||
Connectors the admin has installed appear on the
|
||||
<a href="#connectors" @click=${(e) => { e.preventDefault();
|
||||
history.pushState({ page: 'connectors' }, '', '#connectors');
|
||||
window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'connectors' } })); }}>Connectors</a> page.
|
||||
</p>
|
||||
</div>
|
||||
` : html`
|
||||
<div class="text-muted mt-3 mb-3" style="font-size:.8rem">
|
||||
Vetted connectors you can add to this box's catalog. Installing does not
|
||||
activate anything — it makes a connector <em>available</em>.
|
||||
</div>
|
||||
|
||||
${this._feedErr ? html`
|
||||
<div class="alert alert-warning py-2" style="font-size:.82rem">
|
||||
<i class="bi bi-wifi-off me-1"></i>Marketplace unreachable — ${this._feedErr}
|
||||
</div>` : nothing}
|
||||
|
||||
${this._renderFilters()}
|
||||
|
||||
${loading ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-hourglass-split"></i><p>Loading feed…</p></div>`
|
||||
: this._renderGrid()}
|
||||
`}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// A segmented control per axis rather than loose buttons: each row is one choice,
|
||||
// and the grouping says so.
|
||||
_segment(label, current, set, options) {
|
||||
return html`
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<span class="connector-segment-label">${label}</span>
|
||||
<div class="connector-segment">
|
||||
${options.map(([text, value]) => html`
|
||||
<button class=${current === value ? 'active' : ''} @click=${() => set(value)}>${text}</button>`)}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderFilters() {
|
||||
return html`
|
||||
<div class="connector-filters">
|
||||
<div class="connector-search">
|
||||
<i class="bi bi-search"></i>
|
||||
<input class="form-control form-control-sm" placeholder="Search connectors…"
|
||||
.value=${this._q} @input=${(e) => { this._q = e.target.value; }} />
|
||||
</div>
|
||||
${this._segment('Scope', this._scope, (v) => { this._scope = v; },
|
||||
[['All', 'all'], ['Global', 'global'], ['Per-user', 'per_user']])}
|
||||
${this._segment('Type', this._source, (v) => { this._source = v; },
|
||||
[['All', 'all'], ['Remote', 'remote'], ['Local', 'local_script']])}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderGrid() {
|
||||
const cards = this._filtered;
|
||||
const total = (this._cards ?? []).length;
|
||||
if (cards.length === 0) {
|
||||
return html`
|
||||
<div class="um-empty" style="padding:1rem"><i class="bi bi-search"></i>
|
||||
<p>${total === 0 ? 'The feed is empty.' : 'No connector matches these filters.'}</p></div>`;
|
||||
}
|
||||
return html`
|
||||
<div class="connector-grid">
|
||||
${cards.map((c) => this._renderCard(c))}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderCard(c) {
|
||||
const busy = this._installing === c.id;
|
||||
const isScript = c.source === 'local_script';
|
||||
// Keywords only. `mcp` is on everything, and scope/type already have their own
|
||||
// chips — repeating them as grey tags is noise.
|
||||
const tags = (c.tags ?? []).filter((t) => !['mcp', 'local', 'remote'].includes(t));
|
||||
|
||||
return html`
|
||||
<div class="connector-card">
|
||||
<div class="connector-card-head">
|
||||
${c.has_icon
|
||||
? html`<img class="connector-card-icon" src=${`/api/mcp/marketplace/${c.id}/icon?size=sm`} alt="" />`
|
||||
: html`<div class="connector-card-icon connector-card-icon--empty"><i class="bi bi-plug"></i></div>`}
|
||||
<div class="connector-card-title">
|
||||
<div class="connector-card-name">${c.name}</div>
|
||||
<div class="connector-card-sub">${c.id}${c.version ? ` · v${c.version}` : ''}</div>
|
||||
</div>
|
||||
${c.installed ? html`<span class="connector-chip connector-chip--ok">installed</span>` : nothing}
|
||||
</div>
|
||||
|
||||
${c.user_description ? html`<div class="connector-card-desc">${c.user_description}</div>` : nothing}
|
||||
|
||||
<div class="connector-chips">
|
||||
<span class="connector-chip connector-chip--scope">
|
||||
<i class="bi ${c.scope === 'global' ? 'bi-globe' : 'bi-person'}"></i>
|
||||
${c.scope === 'global' ? 'global' : 'per-user'}
|
||||
</span>
|
||||
<span class="connector-chip ${isScript ? 'connector-chip--script' : ''}">
|
||||
<i class="bi ${isScript ? 'bi-file-earmark-code' : 'bi-cloud'}"></i>
|
||||
${isScript ? 'local script' : 'remote'}
|
||||
</span>
|
||||
${c.auth_kind !== 'none' ? html`
|
||||
<span class="connector-chip"><i class="bi bi-key"></i>${c.auth_kind}</span>` : nothing}
|
||||
${tags.map((t) => html`<span class="connector-chip">${t}</span>`)}
|
||||
</div>
|
||||
|
||||
${isScript ? html`
|
||||
<div class="connector-card-note">
|
||||
<i class="bi bi-shield-check"></i>${c.file_count} file${c.file_count === 1 ? '' : 's'}, SHA-256 verified on install
|
||||
</div>` : nothing}
|
||||
${c.oauth_scopes?.length ? html`
|
||||
<details class="connector-card-scopes">
|
||||
<summary>Requests ${c.oauth_scopes.length} OAuth scope${c.oauth_scopes.length === 1 ? '' : 's'}</summary>
|
||||
${c.oauth_scopes.map((s) => html`<code>${s}</code>`)}
|
||||
</details>` : nothing}
|
||||
|
||||
<div class="connector-card-actions">
|
||||
<button class="btn btn-sm ${c.installed ? 'btn-outline-primary' : 'btn-primary'}"
|
||||
?disabled=${busy} @click=${() => this._install(c)}>
|
||||
${busy ? html`<i class="bi bi-hourglass-split me-1"></i>Installing…`
|
||||
: c.installed ? html`<i class="bi bi-arrow-repeat me-1"></i>Reinstall`
|
||||
: html`<i class="bi bi-download me-1"></i>Install`}
|
||||
</button>
|
||||
${c.homepage ? html`
|
||||
<a class="btn btn-sm btn-outline-primary"
|
||||
href=${c.homepage} target="_blank" rel="noopener noreferrer" title="Homepage">
|
||||
<i class="bi bi-box-arrow-up-right"></i></a>` : nothing}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,7 @@ export class AppSidebar extends LightElement {
|
||||
_inboxCount: { state: true },
|
||||
_debugMode: { state: true },
|
||||
_recentProjects: { state: true },
|
||||
_me: { state: true },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
@@ -19,6 +20,7 @@ export class AppSidebar extends LightElement {
|
||||
this._pollTimer = null;
|
||||
this._debugMode = false;
|
||||
this._recentProjects = [];
|
||||
this._me = null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
@@ -50,9 +52,20 @@ export class AppSidebar extends LightElement {
|
||||
this._pollTimer = setInterval(() => this._pollInbox(), 10000);
|
||||
this._loadDebugMode();
|
||||
this._loadRecentProjects();
|
||||
this._loadMe();
|
||||
window.addEventListener('project-updated', () => this._loadRecentProjects());
|
||||
}
|
||||
|
||||
// Only for deciding which links to draw. Hiding a link is not access control —
|
||||
// every admin route is capability-gated server-side (`require_cap`), so this
|
||||
// only avoids offering a door that would answer 403.
|
||||
async _loadMe() {
|
||||
try {
|
||||
const res = await fetch('/api/auth/me');
|
||||
if (res.ok) this._me = await res.json();
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
clearInterval(this._pollTimer);
|
||||
@@ -106,7 +119,7 @@ export class AppSidebar extends LightElement {
|
||||
// Segment ends at the first `/` (e.g. `#session/123`) or `?` (e.g. `#file_viewer?path=...`).
|
||||
const match = hash.match(/^([^/?]+)/);
|
||||
const segment = match ? match[1] : '';
|
||||
return ['inbox', 'tasks', 'projects', 'models', 'providers', 'approval', 'agents', 'users', 'roles', 'connectors', 'profile', 'config', 'llm-requests', 'session', 'tic', 'file_viewer'].includes(segment) ? segment : 'home';
|
||||
return ['inbox', 'tasks', 'projects', 'models', 'providers', 'approval', 'agents', 'users', 'roles', 'connectors', 'catalog', 'marketplace', 'profile', 'config', 'llm-requests', 'session', 'tic', 'file_viewer'].includes(segment) ? segment : 'home';
|
||||
}
|
||||
|
||||
_tasksSectionFromHash() {
|
||||
@@ -291,6 +304,12 @@ export class AppSidebar extends LightElement {
|
||||
<i class="bi bi-plug"></i>
|
||||
<span class="sidebar-link-name">Connectors</span>
|
||||
</a>
|
||||
${this._me?.role_id === 'admin' ? html`
|
||||
<a href="#" class="sidebar-link ${this._activePage === 'catalog' || this._activePage === 'marketplace' ? 'active' : ''}"
|
||||
@click=${(e) => this._togglePage('catalog', e)}>
|
||||
<i class="bi bi-journal-text"></i>
|
||||
<span class="sidebar-link-name">Catalog</span>
|
||||
</a>` : nothing}
|
||||
<a href="#" class="sidebar-link ${this._activePage === 'config' ? 'active' : ''}"
|
||||
@click=${(e) => this._togglePage('config', e)}>
|
||||
<i class="bi bi-gear"></i>
|
||||
|
||||
Reference in New Issue
Block a user