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

feat(mcp): WhatsApp connector, archivable catalog, MCP connector config endpoint

Browse Source
This commit is contained in:
dguiducci
2026-07-19 10:55:44 +01:00
parent ffea3f41f9
commit f85876350e
23 changed files with 1324 additions and 3614 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/catalog.js
+86 -44
View File
@@ -16,6 +16,11 @@ import { t } from '../lib/i18n.js';
// that puts unvetted code on the box — which is why it needs `mcp.register_local_script`
// and why it sits second.
//
// The manual path is a dedicated page (`#catalog/new`), not a dialog: the form is
// long and technical, a fixed modal grew taller than the viewport with no way to
// scroll, and a click on the overlay discarded everything typed so far. A page
// scrolls, and leaving it is a deliberate navigation.
//
// Reuses the shared `um-*` / bootstrap styling (no page-specific CSS).
const ADMIN_ID = 'admin';
@@ -36,7 +41,8 @@ export class CatalogPage extends LightElement {
_rows: { state: true },
_addOpen: { state: true }, // the "Add connector" chooser
_error: { state: true },
_modal: { state: true },
_view: { state: true }, // 'list' | 'new'
_form: { state: true }, // manual-entry fields, when _view === 'new'
};
}
@@ -51,7 +57,8 @@ export class CatalogPage extends LightElement {
this._rows = null;
this._addOpen = false;
this._error = null;
this._modal = null;
this._view = 'list';
this._form = null;
}
connectedCallback() {
@@ -61,7 +68,10 @@ export class CatalogPage extends LightElement {
window.addEventListener('llm-page-change', (e) => {
this._open = e.detail.page === 'catalog';
this.style.display = this._open ? 'flex' : 'none';
if (this._open) this._load();
if (this._open) { this._syncViewFromHash(); this._load(); }
});
window.addEventListener('hashchange', () => {
if (this._open) this._syncViewFromHash();
});
document.addEventListener('click', () => { if (this._addOpen) this._addOpen = false; });
}
@@ -97,25 +107,43 @@ export class CatalogPage extends LightElement {
// ── Manual entry ───────────────────────────────────────────────────────────
_openManual() {
this._addOpen = false;
this._modal = {
form: {
// The `new` view is derived from the `#catalog/new` sub-route, so the browser's
// Back/Forward works and a pasted URL lands on the form. Entering the view
// always starts a fresh form.
_syncViewFromHash() {
const parts = location.hash.slice(1).split('/');
const wantsNew = parts[0] === 'catalog' && parts[1] === 'new';
if (wantsNew && this._view !== 'new') {
this._error = null;
this._form = {
name: '', scope: 'per_user', source: 'remote', transport: 'stdio',
command: '', args: '', url: '', script_path: '', config_schema: '',
auth_kind: 'none', friendly_name: '', description: '',
},
};
};
}
this._view = wantsNew ? 'new' : 'list';
}
_openManual() {
this._addOpen = false;
history.pushState({ page: 'catalog', view: 'new' }, '', '#catalog/new');
this._syncViewFromHash();
}
_closeNew() {
// Prefer real history so the browser's own Back stays consistent; fall back to
// the list when this page was opened straight from a pasted URL.
if (history.length > 1) { history.back(); return; }
history.pushState({ page: 'catalog' }, '', '#catalog');
this._view = 'list';
}
_patch(field, value) {
this._modal = { ...this._modal, form: { ...this._modal.form, [field]: value } };
this._form = { ...this._form, [field]: value };
}
_closeModal() { this._modal = null; this._error = null; }
async _saveManual() {
const f = this._modal.form;
const f = this._form;
if (!f.name.trim()) { this._error = t('catalog.error.name'); return; }
const listField = (s) => s.split(/[\n,]/).map(x => x.trim()).filter(Boolean);
try {
@@ -137,7 +165,9 @@ export class CatalogPage extends LightElement {
description: f.description.trim() || null,
}),
});
this._closeModal();
this._view = 'list';
this._form = null;
history.pushState({ page: 'catalog' }, '', '#catalog');
await this._load();
} catch (e) { this._error = e.message; }
}
@@ -154,6 +184,7 @@ export class CatalogPage extends LightElement {
render() {
if (!this._open) return nothing;
if (this._view === 'new') return this._renderNew();
const rows = this._rows ?? [];
const loading = this._rows === null && !this._error && this._isAdmin;
@@ -166,7 +197,7 @@ export class CatalogPage extends LightElement {
</div>
</div>
${this._error && !this._modal ? html`
${this._error ? 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">
@@ -183,8 +214,7 @@ export class CatalogPage extends LightElement {
${rows.length === 0 ? this._renderEmpty() : this._renderTable(rows)}
`}
</div>
</div>
${this._renderModal()}`;
</div>`;
}
// Bootstrap's own dropdown classes, not a hand-rolled panel: 5.3 themes
@@ -265,6 +295,14 @@ export class CatalogPage extends LightElement {
</div>`;
}
_area(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>
<textarea class="form-control ${opts.mono ? 'font-monospace' : ''}" rows=${opts.rows || 3}
.value=${value} @input=${oninput}></textarea>
</div>`;
}
_select(label, value, options, onchange) {
return html`<div class="mb-3">
<label class="form-label">${label}</label>
@@ -274,39 +312,43 @@ export class CatalogPage extends LightElement {
</div>`;
}
_renderModal() {
if (!this._modal) return nothing;
const f = this._modal.form;
_renderNew() {
const f = this._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>${t('catalog.modal.title')}</span>
<button class="um-btn-icon ms-auto" @click=${() => this._closeModal()}><i class="bi bi-x-lg"></i></button>
<div class="um-page">
<div class="um-header">
<div class="d-flex align-items-center gap-2" style="min-width:0">
<button class="btn btn-sm btn-outline-secondary" title=${t('catalog.new.back')} @click=${() => this._closeNew()}>
<i class="bi bi-arrow-left"></i>
</button>
<h2 class="um-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">
<i class="bi bi-pencil me-2"></i>${t('catalog.new.title')}</h2>
</div>
<div class="um-modal-body">
</div>
<div style="padding:0 1.25rem 2rem; overflow:auto">
<div style="max-width:620px">
${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">${unsafeHTML(t('catalog.modal.script_warn'))}</div>` : nothing}
${this._field(t('catalog.modal.name'), f.name, e => this._patch('name', e.target.value), { hint: t('catalog.modal.name_hint'), mono: true })}
${this._select(t('catalog.modal.scope'), f.scope, ['per_user', 'global'], e => this._patch('scope', e.target.value))}
${this._select(t('catalog.modal.type'), f.source, ['remote', 'local_script'], e => this._patch('source', e.target.value))}
${this._select(t('catalog.modal.transport'), f.transport, ['stdio', 'http', 'sse'], e => this._patch('transport', e.target.value))}
<div class="alert alert-warning py-2 mb-3" style="font-size:.78rem">${unsafeHTML(t('catalog.new.script_warn'))}</div>` : nothing}
${this._field(t('catalog.new.name'), f.name, e => this._patch('name', e.target.value), { hint: t('catalog.new.name_hint'), mono: true })}
${this._select(t('catalog.new.scope'), f.scope, ['per_user', 'global'], e => this._patch('scope', e.target.value))}
${this._select(t('catalog.new.type'), f.source, ['remote', 'local_script'], e => this._patch('source', e.target.value))}
${this._select(t('catalog.new.transport'), f.transport, ['stdio', 'http', 'sse'], e => this._patch('transport', e.target.value))}
${isScript
? html`${this._field(t('catalog.modal.command'), f.command, e => this._patch('command', e.target.value), { placeholder: t('catalog.modal.command_ph'), mono: true })}
${this._field(t('catalog.modal.script_path'), f.script_path, e => this._patch('script_path', e.target.value), { hint: t('catalog.modal.script_path_hint'), mono: true })}`
: this._field(t('catalog.modal.url'), f.url, e => this._patch('url', e.target.value), { mono: true })}
${this._field(t('catalog.modal.args'), f.args, e => this._patch('args', e.target.value), { hint: t('catalog.modal.args_hint'), mono: true })}
${this._field(t('catalog.modal.config_schema'), f.config_schema, e => this._patch('config_schema', e.target.value), { hint: t('catalog.modal.config_schema_hint'), mono: true })}
${this._select(t('catalog.modal.auth'), f.auth_kind, ['none', 'api_key', 'oauth', 'qr', 'ssh_key'], e => this._patch('auth_kind', e.target.value))}
${this._field(t('catalog.modal.friendly'), f.friendly_name, e => this._patch('friendly_name', e.target.value))}
${this._field(t('catalog.modal.desc'), f.description, e => this._patch('description', e.target.value), { hint: t('catalog.modal.desc_hint') })}
</div>
<div class="um-modal-footer">
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._closeModal()}>${t('catalog.modal.cancel')}</button>
<button class="btn btn-sm btn-primary" @click=${() => this._saveManual()}>
<i class="bi bi-check-lg me-1"></i>${t('catalog.modal.save')}</button>
? html`${this._field(t('catalog.new.command'), f.command, e => this._patch('command', e.target.value), { placeholder: t('catalog.new.command_ph'), mono: true })}
${this._field(t('catalog.new.script_path'), f.script_path, e => this._patch('script_path', e.target.value), { hint: t('catalog.new.script_path_hint'), mono: true })}`
: this._field(t('catalog.new.url'), f.url, e => this._patch('url', e.target.value), { mono: true })}
${this._area(t('catalog.new.args'), f.args, e => this._patch('args', e.target.value), { hint: t('catalog.new.args_hint'), mono: true })}
${this._area(t('catalog.new.config_schema'), f.config_schema, e => this._patch('config_schema', e.target.value), { hint: t('catalog.new.config_schema_hint'), mono: true })}
${this._select(t('catalog.new.auth'), f.auth_kind, ['none', 'api_key', 'oauth', 'qr', 'ssh_key'], e => this._patch('auth_kind', e.target.value))}
${this._field(t('catalog.new.friendly'), f.friendly_name, e => this._patch('friendly_name', e.target.value))}
${this._area(t('catalog.new.desc'), f.description, e => this._patch('description', e.target.value), { hint: t('catalog.new.desc_hint'), rows: 2 })}
<div class="d-flex justify-content-end gap-2 mt-3">
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._closeNew()}>${t('catalog.new.cancel')}</button>
<button class="btn btn-sm btn-primary" @click=${() => this._saveManual()}>
<i class="bi bi-check-lg me-1"></i>${t('catalog.new.save')}</button>
</div>
</div>
</div>
</div>`;
web/components/config-page.js
+51 -8
View File
@@ -2,6 +2,23 @@ import { html, nothing } from 'lit';
import { LightElement } from '../lib/base.js';
import { t } from '../lib/i18n.js';
function _maybeT(key, fallback) {
const v = t(key);
return v !== key ? v : fallback;
}
function _configSetSlug(name) {
const slugs = {
'Interface': 'interface',
'TIC Agent': 'tic_agent',
};
return slugs[name] ?? null;
}
function _propKeyId(propKey) {
return propKey.replace(/\./g, '__');
}
export class ConfigPage extends LightElement {
static properties = {
_open: { state: true },
@@ -130,7 +147,7 @@ export class ConfigPage extends LightElement {
.checked=${checked}
@change=${e => { this._setValue(prop.key, e.target.checked ? 'true' : 'false'); this._save(prop); }} />
<label class="form-check-label" for="cfg-${prop.key}">
${checked ? 'Enabled' : 'Disabled'}
${checked ? t('config.enabled') : t('config.disabled')}
</label>
</div>`;
}
@@ -144,7 +161,13 @@ export class ConfigPage extends LightElement {
@input=${e => this._setValue(prop.key, e.target.value)} />`;
}
// Dropdown-style property types. The backend ships the allowed values in
// `prop.options` (a list of {id, name}); we only decide how to frame them.
// Adding a new custom type from a config section? Give it a `property_type`
// on the backend, attach its `options`, and add a branch like these — a
// free-text box becomes a proper picker for the price of a few lines.
if (prop.property_type === 'security_group') {
// Nullable: the empty choice means "fall back to the instance default".
const groups = prop.options ?? [];
return html`
<select class="form-select form-select-sm config-input"
@@ -156,6 +179,20 @@ export class ConfigPage extends LightElement {
</select>`;
}
if (prop.property_type === 'locale') {
// Interface languages the instance supports; labels are native endonyms.
// Always a concrete pick (no empty option) — falls back to default_value.
const locales = prop.options ?? [];
const current = val || prop.default_value || 'en';
return html`
<select class="form-select form-select-sm config-input"
.value=${current}
@change=${e => { this._setValue(prop.key, e.target.value); this._save(prop); }}>
${locales.map(l => html`
<option value=${l.id} ?selected=${current === l.id}>${l.name}</option>`)}
</select>`;
}
return html`
<input type="text"
class="form-control form-control-sm config-input"
@@ -165,11 +202,14 @@ export class ConfigPage extends LightElement {
}
_renderSet(set) {
const slug = _configSetSlug(set.name);
const sName = slug ? _maybeT(`config.set.${slug}.name`, set.name) : set.name;
const sDesc = slug ? _maybeT(`config.set.${slug}.desc`, set.description) : set.description;
return html`
<div class="config-set">
<div class="config-set-header">
<div class="config-set-name">${set.name}</div>
<div class="config-set-desc">${set.description}</div>
<div class="config-set-name">${sName}</div>
<div class="config-set-desc">${sDesc}</div>
</div>
<div class="config-rows">
${set.properties.map(p => this._renderRow(p))}
@@ -180,22 +220,25 @@ export class ConfigPage extends LightElement {
_renderRow(prop) {
const saving = this._saving.has(prop.key);
const saved = this._saved.has(prop.key);
const pk = _propKeyId(prop.key);
const pName = _maybeT(`config.prop.${pk}.name`, prop.name);
const pDesc = _maybeT(`config.prop.${pk}.desc`, prop.description);
return html`
<div class="config-row">
<div class="config-row-meta">
<div class="config-row-name">${prop.name}</div>
<div class="config-row-desc">${prop.description}</div>
<div class="config-row-name">${pName}</div>
<div class="config-row-desc">${pDesc}</div>
</div>
<div class="config-row-control">
${this._renderInput(prop)}
${prop.property_type !== 'bool' ? html`
${!['bool', 'locale'].includes(prop.property_type) ? html`
<button class="btn btn-sm ${saved ? 'btn-success' : 'btn-primary'} config-save-btn"
?disabled=${saving}
@click=${() => this._save(prop)}>
${saving
? html`<span class="spinner-border spinner-border-sm"></span>`
: saved ? 'Saved' : 'Save'}
: saved ? t('common.saved') : t('common.save')}
</button>` : nothing}
</div>
</div>`;
@@ -237,7 +280,7 @@ export class ConfigPage extends LightElement {
?disabled=${this._debugLoading}
@change=${() => this._toggleDebugMode()} />
<label class="form-check-label" for="cfg-debug-mode">
${this._debugMode ? 'Enabled' : 'Disabled'}
${this._debugMode ? t('config.enabled') : t('config.disabled')}
</label>
</div>
</div>
web/components/connector-detail.js
+137 -1
View File
@@ -48,6 +48,7 @@ export class ConnectorDetailPage extends LightElement {
_access: { state: true }, // admin: Set of granted user ids
_noIcon: { state: true },
_oauth: { state: true }, // in-flight OAuth login: { state, auth_url, code }
_qr: { state: true }, // in-flight QR/device login: { state, qr, message }
};
}
@@ -72,6 +73,9 @@ export class ConnectorDetailPage extends LightElement {
this._users = null;
this._access = null;
this._oauth = null;
this._qr = null;
this._qrServerId = null;
this._stopQrPoll();
}
connectedCallback() {
@@ -82,6 +86,7 @@ export class ConnectorDetailPage extends LightElement {
this._open = e.detail.page === PAGE_ID;
this.style.display = this._open ? 'flex' : 'none';
if (this._open) this._loadFromHash();
else this._stopQrPoll(); // never poll a connector's login off-screen
});
window.addEventListener('hashchange', () => {
if (this._open) this._loadFromHash();
@@ -90,12 +95,18 @@ export class ConnectorDetailPage extends LightElement {
disconnectedCallback() {
window.removeEventListener('locale-changed', this.__onLocaleChanged);
this._stopQrPoll();
super.disconnectedCallback();
}
get _isAdmin() { return this._me?.role_id === ADMIN_ID; }
get _isGlobal() { return (this._entry?.scope ?? (this._glob ? 'global' : null)) === 'global'; }
get _status() { return statusOf({ _act: this._act, _glob: this._glob }); }
get _status() {
const s = statusOf({ _act: this._act, _glob: this._glob });
// A QR/device connector at `pending` is waiting for its scan, not misconfigured.
if (s === 'pending' && this._entry?.auth_kind === 'qr') return 'needs_login';
return s;
}
async _loadFromHash() {
const name = nameFromHash();
@@ -267,6 +278,76 @@ export class ConnectorDetailPage extends LightElement {
finally { this._busy = false; }
}
// ── QR / device login (§15): activate → server emits a QR → scan → poll ready ──
// Unlike OAuth there is no code to paste: the connector's server must run to
// produce the QR, so activation starts it and we poll `login_status` until the
// phone scan flips it to `ready`.
async _startQrLogin() {
this._busy = true; this._error = null;
try {
// First sign-in creates the pending row (which installs deps + starts the
// server — this can take a while on a cold container). Reuse it thereafter.
let serverId = this._act?.id;
if (!serverId) {
const res = await jf('/api/mcp/activate', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ catalog_name: this._name }),
});
if (res?.error) { this._error = res.error; return; }
serverId = res.id;
}
this._qrServerId = serverId;
await this._pollQr(); // fetch the first QR immediately
this._startQrPoll(); // then keep it fresh
await this._load();
} catch (e) { this._error = e.message; }
finally { this._busy = false; }
}
_startQrPoll() {
this._stopQrPoll();
// The QR rotates every ~20 s and the scan can land any moment: poll briskly.
this.__qrTimer = setInterval(() => this._pollQr(), 2500);
}
_stopQrPoll() {
if (this.__qrTimer) { clearInterval(this.__qrTimer); this.__qrTimer = null; }
}
async _pollQr() {
if (!this._qrServerId) return;
try {
const res = await jf('/api/mcp/login/status', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ server_id: this._qrServerId }),
});
this._qr = res;
if (res?.state === 'ready') {
this._stopQrPoll();
await this._load(); // pick up the flipped auth_state
}
} catch (_) { /* transient (server still connecting) — keep polling */ }
}
async _resetQrLogin() {
const id = this._qrServerId || this._act?.id;
if (!id) return;
this._busy = true; this._error = null;
try {
await jf('/api/mcp/login/reset', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ server_id: id }),
});
this._qr = null;
this._qrServerId = id;
await this._pollQr();
this._startQrPoll();
await this._load();
} catch (e) { this._error = e.message; }
finally { this._busy = false; }
}
async _enableGlobal() {
this._busy = true; this._error = null;
try {
@@ -451,6 +532,18 @@ export class ConnectorDetailPage extends LightElement {
</div>`;
}
// QR / device login (WhatsApp): the server produces a QR the user scans with
// their phone — its own panel, like OAuth.
if (e.auth_kind === 'qr' && !this._isGlobal) {
return html`
<div style="margin-top:1.5rem">
<div class="um-header" style="padding:0 0 .5rem">
<h3 class="um-title" style="font-size:1rem"><i class="bi bi-qr-code me-2"></i>${t('connectors.detail.qr.title')}</h3>
</div>
${this._renderQr()}
</div>`;
}
return html`
<div style="margin-top:1.5rem">
<div class="um-header" style="padding:0 0 .5rem">
@@ -561,6 +654,49 @@ export class ConnectorDetailPage extends LightElement {
`;
}
_renderQr() {
const active = this._act && this._act.auth_state === 'ready';
const q = this._qr;
const st = q?.state;
const polling = !!this.__qrTimer;
return html`
<div class="text-muted mb-3" style="font-size:.78rem">${t('connectors.detail.qr.desc')}</div>
${active && st !== 'need_scan' && st !== 'logged_out' ? html`
<div class="alert alert-success py-2 mb-3" style="font-size:.82rem">
<i class="bi bi-check-circle-fill me-1"></i>${t('connectors.detail.qr.connected')}
</div>` : nothing}
${st === 'need_scan' && q?.qr ? html`
<div class="connector-card" style="text-align:center; margin-bottom:.75rem">
<div class="mb-2" style="font-size:.82rem">${t('connectors.detail.qr.scan')}</div>
<img src=${q.qr} alt="WhatsApp QR"
style="width:280px; max-width:100%; height:auto; border-radius:8px; background:#fff; padding:10px" />
<div class="text-muted mt-2" style="font-size:.72rem">${t('connectors.detail.qr.hint')}</div>
</div>` : nothing}
${polling && st && st !== 'ready' && st !== 'need_scan' ? html`
<div class="d-flex align-items-center gap-2 mb-2 text-muted" style="font-size:.8rem">
<i class="bi bi-arrow-repeat"></i>${q?.message || t('connectors.detail.qr.connecting')}
</div>` : nothing}
<div class="d-flex gap-2 flex-wrap" style="margin-top:.5rem">
${!active && !polling ? html`
<button class="btn btn-sm btn-primary" ?disabled=${this._busy} @click=${() => this._startQrLogin()}>
<i class="bi bi-qr-code me-1"></i>${this._busy ? t('connectors.detail.qr.btn_starting') : t('connectors.detail.qr.btn_start')}
</button>` : nothing}
${active || polling ? html`
<button class="btn btn-sm btn-outline-secondary" ?disabled=${this._busy} @click=${() => this._resetQrLogin()}>
<i class="bi bi-arrow-repeat me-1"></i>${t('connectors.detail.qr.btn_relink')}
</button>` : nothing}
${this._act ? html`
<button class="btn btn-sm btn-outline-danger" ?disabled=${this._busy} @click=${() => this._deactivate()}>
<i class="bi bi-trash me-1"></i>${t('connectors.detail.oauth.deactivate')}
</button>` : nothing}
</div>`;
}
_renderEnvFields() {
if (!this._schema.length) return nothing;
return this._schema.map(f => html`
web/components/marketplace.js
+9 -3
View File
@@ -245,9 +245,14 @@ export class MarketplacePage extends LightElement {
: 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 class="connector-card-sub">
${c.id}${c.version_string ? ` · ${c.version_string}` : (c.version != null ? ` · v${c.version}` : '')}
${c.update_available && c.installed_version != null ? html`<span style="opacity:.7"> · ${t('marketplace.card.installed_version', { v: c.installed_version })}</span>` : nothing}
</div>
</div>
${c.installed ? html`<span class="connector-chip connector-chip--ok">${t('marketplace.card.installed')}</span>` : nothing}
${c.update_available
? html`<span class="connector-chip connector-chip--script"><i class="bi bi-arrow-up-circle me-1"></i>${t('marketplace.card.update_available')}</span>`
: c.installed ? html`<span class="connector-chip connector-chip--ok">${t('marketplace.card.installed')}</span>` : nothing}
</div>
${c.user_description ? html`<div class="connector-card-desc">${c.user_description}</div>` : nothing}
@@ -277,9 +282,10 @@ export class MarketplacePage extends LightElement {
</details>` : nothing}
<div class="connector-card-actions">
<button class="btn btn-sm ${c.installed ? 'btn-outline-primary' : 'btn-primary'}"
<button class="btn btn-sm ${(c.installed && !c.update_available) ? 'btn-outline-primary' : 'btn-primary'}"
?disabled=${busy} @click=${() => this._install(c)}>
${busy ? html`<i class="bi bi-hourglass-split me-1"></i>${t('marketplace.card.installing')}`
: c.update_available ? html`<i class="bi bi-arrow-up-circle me-1"></i>${t('marketplace.card.update')}`
: c.installed ? html`<i class="bi bi-arrow-repeat me-1"></i>${t('marketplace.card.reinstall')}`
: html`<i class="bi bi-download me-1"></i>${t('marketplace.card.install')}`}
</button>
web/i18n/en.js
+53 -22
View File
@@ -153,6 +153,22 @@ export default {
'config.loading': 'Loading…',
'config.developer': 'Developer',
'config.error_save':'Error saving "{name}": {msg}',
'config.enabled': 'Enabled',
'config.disabled': 'Disabled',
'config.set.interface.name': 'Interface',
'config.set.interface.desc': 'Look and feel of the web interface.',
'config.set.tic_agent.name': 'TIC Agent',
'config.set.tic_agent.desc': 'TIC is a background agent that monitors all async events generated by connected MCP servers (new emails, calendar updates, WhatsApp messages, etc.). It reads your notification rules from data/notifications.md and your memory to decide — via an LLM call — which events are worth surfacing. Relevant notifications are forwarded to the home agent set via /sethome.',
'config.prop.ui_locale.name': 'Language',
'config.prop.ui_locale.desc': 'Default interface language for the whole instance. Each user can override it on their profile.',
'config.prop.tic__enabled.name': 'Enabled',
'config.prop.tic__enabled.desc': 'Enable or disable the TIC agent. When disabled, no MCP events are processed.',
'config.prop.tic__security_group.name': 'Security Group',
'config.prop.tic__security_group.desc': 'Tool permission group applied to each TIC agent session. Leave empty to use the default group.',
'config.prop.tic__interval_minutes.name': 'Check Interval (minutes)',
'config.prop.tic__interval_minutes.desc': 'How often TIC runs, in minutes. Leave empty to use the value from config.yml (tic.interval_secs).',
// ── Projects ────────────────────────────────────────────────────────────────
'projects.title': 'Projects',
@@ -799,6 +815,16 @@ export default {
'connectors.detail.oauth.cancel': 'Cancel',
'connectors.detail.oauth.deactivate': 'Deactivate',
'connectors.detail.qr.title': 'Link your phone',
'connectors.detail.qr.desc': 'Scan a QR code with your phone to link this device. The session stays on this box — no password is stored.',
'connectors.detail.qr.connected': 'Connected and active.',
'connectors.detail.qr.scan': 'Scan this code with your phone:',
'connectors.detail.qr.hint': 'WhatsApp → Settings → Linked Devices → Link a Device.',
'connectors.detail.qr.connecting': 'Connecting…',
'connectors.detail.qr.btn_start': 'Start sign-in',
'connectors.detail.qr.btn_starting': 'Preparing… (this can take a minute the first time)',
'connectors.detail.qr.btn_relink': 'Re-link (new QR)',
'connectors.detail.test.running': 'Testing credentials…',
'connectors.detail.test.skipped': 'No verification step for this connector.',
'connectors.detail.test.ok_label': 'OK',
@@ -891,6 +917,9 @@ export default {
'marketplace.grid.no_match': 'No connector matches these filters.',
'marketplace.card.installed': 'installed',
'marketplace.card.update_available': 'update available',
'marketplace.card.installed_version': 'installed v{v}',
'marketplace.card.update': 'Update',
'marketplace.card.scope_global': 'global',
'marketplace.card.scope_per_user': 'per-user',
'marketplace.card.type_script': 'local script',
@@ -986,28 +1015,29 @@ export default {
'catalog.action.remove': 'Remove from catalog',
'catalog.modal.title': 'Add connector manually',
'catalog.modal.script_warn': '<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.',
'catalog.modal.name': 'Name',
'catalog.modal.name_hint': 'slug',
'catalog.modal.scope': 'Scope',
'catalog.modal.type': 'Type',
'catalog.modal.transport': 'Transport',
'catalog.modal.command': 'Command',
'catalog.modal.command_ph': 'python3',
'catalog.modal.script_path': 'Script path',
'catalog.modal.script_path_hint': 'as <connector>/<file>, under ./connectors',
'catalog.modal.url': 'URL',
'catalog.modal.args': 'Args',
'catalog.modal.args_hint': 'one per line',
'catalog.modal.config_schema': 'Required secret/env keys',
'catalog.modal.config_schema_hint': 'comma/newline',
'catalog.modal.auth': 'Auth',
'catalog.modal.friendly': 'Friendly name',
'catalog.modal.desc': 'Description',
'catalog.modal.desc_hint': 'the LLM reads this when deciding to activate the connector',
'catalog.modal.cancel': 'Cancel',
'catalog.modal.save': 'Add to catalog',
'catalog.new.back': 'Back',
'catalog.new.title': 'Add connector manually',
'catalog.new.script_warn': '<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.',
'catalog.new.name': 'Name',
'catalog.new.name_hint': 'slug',
'catalog.new.scope': 'Scope',
'catalog.new.type': 'Type',
'catalog.new.transport': 'Transport',
'catalog.new.command': 'Command',
'catalog.new.command_ph': 'python3',
'catalog.new.script_path': 'Script path',
'catalog.new.script_path_hint': 'as <connector>/<file>, under ./connectors',
'catalog.new.url': 'URL',
'catalog.new.args': 'Args',
'catalog.new.args_hint': 'one per line',
'catalog.new.config_schema': 'Required secret/env keys',
'catalog.new.config_schema_hint': 'comma/newline',
'catalog.new.auth': 'Auth',
'catalog.new.friendly': 'Friendly name',
'catalog.new.desc': 'Description',
'catalog.new.desc_hint': 'the LLM reads this when deciding to activate the connector',
'catalog.new.cancel': 'Cancel',
'catalog.new.save': 'Add to catalog',
'catalog.error.name': 'Name is required.',
'catalog.confirm.delete': 'Remove "{name}" from the catalog?\n\nAnything already activated from it keeps running.',
@@ -1039,6 +1069,7 @@ export default {
'common.saving': 'Saving…',
'common.cancel': 'Cancel',
'common.loading': 'Loading…',
'common.saved': 'Saved',
// ── Shared Folders (blueprint §6) ────────────────────────────────────────────
'nav.shared_folders': 'Shared Folders',
web/i18n/fr.js
+40 -22
View File
@@ -153,6 +153,22 @@ export default {
'config.loading': 'Chargement…',
'config.developer': 'Développeur',
'config.error_save':'Erreur lors de l\'enregistrement de "{name}" : {msg}',
'config.enabled': 'Activé',
'config.disabled': 'Désactivé',
'config.set.interface.name': 'Interface',
'config.set.interface.desc': 'Aspect et style de l\'interface web.',
'config.set.tic_agent.name': 'Agent TIC',
'config.set.tic_agent.desc': 'TIC est un agent d\'arrière-plan qui surveille tous les événements asynchrones générés par les serveurs MCP connectés (nouveaux e-mails, mises à jour du calendrier, messages WhatsApp, etc.). Il lit vos règles de notification dans data/notifications.md et votre mémoire pour décider — via un appel LLM — quels événements méritent d\'être signalés. Les notifications pertinentes sont transmises à l\'agent d\'accueil défini via /sethome.',
'config.prop.ui_locale.name': 'Langue',
'config.prop.ui_locale.desc': 'Langue d\'interface par défaut pour l\'ensemble de l\'instance. Chaque utilisateur peut la modifier dans son profil.',
'config.prop.tic__enabled.name': 'Activé',
'config.prop.tic__enabled.desc': 'Activer ou désactiver l\'agent TIC. Lorsqu\'il est désactivé, aucun événement MCP n\'est traité.',
'config.prop.tic__security_group.name': 'Groupe de sécurité',
'config.prop.tic__security_group.desc': 'Groupe de permissions d\'outils appliqué à chaque session de l\'agent TIC. Laissez vide pour utiliser le groupe par défaut.',
'config.prop.tic__interval_minutes.name': 'Intervalle de vérification (minutes)',
'config.prop.tic__interval_minutes.desc': 'Fréquence d\'exécution de TIC, en minutes. Laissez vide pour utiliser la valeur de config.yml (tic.interval_secs).',
// ── Projects ────────────────────────────────────────────────────────────────
'projects.title': 'Projets',
@@ -986,28 +1002,29 @@ export default {
'catalog.action.remove': 'Retirer du catalogue',
'catalog.modal.title': 'Ajouter un connecteur manuellement',
'catalog.modal.script_warn': '<i class="bi bi-exclamation-triangle me-1"></i>Un script local exécute du code sur cette machine. Rien ne le vérifie — contrairement au Marketplace, il n\'y a pas de condensé à contrôler.',
'catalog.modal.name': 'Nom',
'catalog.modal.name_hint': 'slug',
'catalog.modal.scope': 'Portée',
'catalog.modal.type': 'Type',
'catalog.modal.transport': 'Transport',
'catalog.modal.command': 'Commande',
'catalog.modal.command_ph': 'python3',
'catalog.modal.script_path': 'Chemin du script',
'catalog.modal.script_path_hint': 'comme <connecteur>/<fichier>, sous ./connectors',
'catalog.modal.url': 'URL',
'catalog.modal.args': 'Arguments',
'catalog.modal.args_hint': 'un par ligne',
'catalog.modal.config_schema': 'Clés secrètes/env requises',
'catalog.modal.config_schema_hint': 'virgule/nouvelle ligne',
'catalog.modal.auth': 'Auth',
'catalog.modal.friendly': 'Nom convivial',
'catalog.modal.desc': 'Description',
'catalog.modal.desc_hint': 'le LLM lit ceci pour décider d\'activer le connecteur',
'catalog.modal.cancel': 'Annuler',
'catalog.modal.save': 'Ajouter au catalogue',
'catalog.new.back': 'Retour',
'catalog.new.title': 'Ajouter un connecteur manuellement',
'catalog.new.script_warn': '<i class="bi bi-exclamation-triangle me-1"></i>Un script local exécute du code sur cette machine. Rien ne le vérifie — contrairement au Marketplace, il n\'y a pas de condensé à contrôler.',
'catalog.new.name': 'Nom',
'catalog.new.name_hint': 'slug',
'catalog.new.scope': 'Portée',
'catalog.new.type': 'Type',
'catalog.new.transport': 'Transport',
'catalog.new.command': 'Commande',
'catalog.new.command_ph': 'python3',
'catalog.new.script_path': 'Chemin du script',
'catalog.new.script_path_hint': 'comme <connecteur>/<fichier>, sous ./connectors',
'catalog.new.url': 'URL',
'catalog.new.args': 'Arguments',
'catalog.new.args_hint': 'un par ligne',
'catalog.new.config_schema': 'Clés secrètes/env requises',
'catalog.new.config_schema_hint': 'virgule/nouvelle ligne',
'catalog.new.auth': 'Auth',
'catalog.new.friendly': 'Nom convivial',
'catalog.new.desc': 'Description',
'catalog.new.desc_hint': 'le LLM lit ceci pour décider d\'activer le connecteur',
'catalog.new.cancel': 'Annuler',
'catalog.new.save': 'Ajouter au catalogue',
'catalog.error.name': 'Le nom est requis.',
'catalog.confirm.delete': 'Retirer "{name}" du catalogue ?\n\nTout ce qui a déjà été activé continuera de fonctionner.',
@@ -1039,6 +1056,7 @@ export default {
'common.saving': 'Enregistrement…',
'common.cancel': 'Annuler',
'common.loading': 'Chargement…',
'common.saved': 'Enregistré',
// ── Shared Folders (blueprint §6) ────────────────────────────────────────────
'nav.shared_folders': 'Dossiers partagés',
web/i18n/it.js
+40 -22
View File
@@ -177,6 +177,22 @@ export default {
'config.loading': 'Caricamento…',
'config.developer': 'Sviluppatore',
'config.error_save':'Errore durante il salvataggio di "{name}": {msg}',
'config.enabled': 'Attivato',
'config.disabled': 'Disattivato',
'config.set.interface.name': 'Interfaccia',
'config.set.interface.desc': 'Aspetto e stile dell\'interfaccia web.',
'config.set.tic_agent.name': 'Agente TIC',
'config.set.tic_agent.desc': 'TIC è un agente in background che monitora tutti gli eventi asincroni generati dai server MCP connessi (nuove email, aggiornamenti del calendario, messaggi WhatsApp, ecc.). Legge le regole di notifica da data/notifications.md e la memoria per decidere — tramite una chiamata LLM — quali eventi vale la pena segnalare. Le notifiche rilevanti vengono inoltrate all\'agente predefinito impostato tramite /sethome.',
'config.prop.ui_locale.name': 'Lingua',
'config.prop.ui_locale.desc': 'Lingua predefinita per l\'intera istanza. Ogni utente può modificarla nel proprio profilo.',
'config.prop.tic__enabled.name': 'Attivo',
'config.prop.tic__enabled.desc': 'Attiva o disattiva l\'agente TIC. Quando disattivato, nessun evento MCP viene elaborato.',
'config.prop.tic__security_group.name': 'Gruppo di sicurezza',
'config.prop.tic__security_group.desc': 'Gruppo di permessi strumenti applicato a ogni sessione dell\'agente TIC. Lascia vuoto per usare il gruppo predefinito.',
'config.prop.tic__interval_minutes.name': 'Intervallo di controllo (minuti)',
'config.prop.tic__interval_minutes.desc': 'Ogni quanto TIC viene eseguito, in minuti. Lascia vuoto per usare il valore da config.yml (tic.interval_secs).',
// ── Projects ────────────────────────────────────────────────────────────────
'projects.title': 'Progetti',
@@ -986,28 +1002,29 @@ export default {
'catalog.action.remove': 'Rimuovi dal catalogo',
'catalog.modal.title': 'Aggiungi connettore manualmente',
'catalog.modal.script_warn': '<i class="bi bi-exclamation-triangle me-1"></i>Uno script locale esegue codice su questo computer. Niente lo verifica — a differenza del marketplace, non c\'è un digest da controllare.',
'catalog.modal.name': 'Nome',
'catalog.modal.name_hint': 'slug',
'catalog.modal.scope': 'Ambito',
'catalog.modal.type': 'Tipo',
'catalog.modal.transport': 'Trasporto',
'catalog.modal.command': 'Comando',
'catalog.modal.command_ph': 'python3',
'catalog.modal.script_path': 'Percorso script',
'catalog.modal.script_path_hint': 'come <connettore>/<file>, sotto ./connectors',
'catalog.modal.url': 'URL',
'catalog.modal.args': 'Argomenti',
'catalog.modal.args_hint': 'uno per riga',
'catalog.modal.config_schema': 'Chiavi segrete/env richieste',
'catalog.modal.config_schema_hint': 'virgola/nuova riga',
'catalog.modal.auth': 'Auth',
'catalog.modal.friendly': 'Nome visualizzato',
'catalog.modal.desc': 'Descrizione',
'catalog.modal.desc_hint': 'l\'LLM legge questo quando decide se attivare il connettore',
'catalog.modal.cancel': 'Annulla',
'catalog.modal.save': 'Aggiungi al catalogo',
'catalog.new.back': 'Indietro',
'catalog.new.title': 'Aggiungi connettore manualmente',
'catalog.new.script_warn': '<i class="bi bi-exclamation-triangle me-1"></i>Uno script locale esegue codice su questo computer. Niente lo verifica — a differenza del marketplace, non c\'è un digest da controllare.',
'catalog.new.name': 'Nome',
'catalog.new.name_hint': 'slug',
'catalog.new.scope': 'Ambito',
'catalog.new.type': 'Tipo',
'catalog.new.transport': 'Trasporto',
'catalog.new.command': 'Comando',
'catalog.new.command_ph': 'python3',
'catalog.new.script_path': 'Percorso script',
'catalog.new.script_path_hint': 'come <connettore>/<file>, sotto ./connectors',
'catalog.new.url': 'URL',
'catalog.new.args': 'Argomenti',
'catalog.new.args_hint': 'uno per riga',
'catalog.new.config_schema': 'Chiavi segrete/env richieste',
'catalog.new.config_schema_hint': 'virgola/nuova riga',
'catalog.new.auth': 'Auth',
'catalog.new.friendly': 'Nome visualizzato',
'catalog.new.desc': 'Descrizione',
'catalog.new.desc_hint': 'l\'LLM legge questo quando decide se attivare il connettore',
'catalog.new.cancel': 'Annulla',
'catalog.new.save': 'Aggiungi al catalogo',
'catalog.error.name': 'Il nome è obbligatorio.',
'catalog.confirm.delete': 'Rimuovere "{name}" dal catalogo?\n\nTutto ciò che è già stato attivato continuerà a funzionare.',
@@ -1039,6 +1056,7 @@ export default {
'common.saving': 'Salvataggio…',
'common.cancel': 'Annulla',
'common.loading': 'Caricamento…',
'common.saved': 'Salvato',
// ── Cartelle condivise (blueprint §6) ────────────────────────────────────────
'nav.shared_folders': 'Cartelle condivise',