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

feat(mcp): connector marketplace + split the Connectors surface (§7/§14/§15)

Browse Source 
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:
dguiducci
2026-07-16 18:52:59 +01:00
parent 6d299472e3
commit bcd8f7b5c0
19 changed files with 2119 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/connectors.js
+166 -215
View File
@@ -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');
}