dguiducci
5081ec2afe
Nightly Build / build (push) Successful in 6m50s
Remove the scope system end-to-end (llm_models.scope column, agent meta scope field, scope-based tier in model selection, UI checkboxes/pills): it was only a soft ranking hint, had drifted (6 UI scopes vs 3 used by agents, 'general' not even selectable) and duplicated what strength already decides. Strength stays the single AUTO-selection axis. Compaction: the summary model is now pickable from the Settings page via a new PropertyType::LlmModel config property (registry key compaction_model), instance-wide and live (no restart). Fallback chain: explicit pick -> compaction.strength from config.yml -> priority order; a deleted configured model degrades to AUTO. ContextCompactor reads the key at compact time through GlobalConfigManager.
308 lines
11 KiB
JavaScript
308 lines
11 KiB
JavaScript
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',
|
|
'Compaction': 'compaction',
|
|
};
|
|
return slugs[name] ?? null;
|
|
}
|
|
|
|
function _propKeyId(propKey) {
|
|
return propKey.replace(/\./g, '__');
|
|
}
|
|
|
|
export class ConfigPage extends LightElement {
|
|
static properties = {
|
|
_open: { state: true },
|
|
_properties: { state: true },
|
|
_values: { state: true }, // { [key]: string }
|
|
_saving: { state: true }, // Set<key>
|
|
_saved: { state: true }, // Set<key> (brief flash)
|
|
_error: { state: true },
|
|
_debugMode: { state: true },
|
|
_debugLoading: { state: true },
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
this._open = false;
|
|
this._properties = [];
|
|
this._values = {};
|
|
this._saving = new Set();
|
|
this._saved = new Set();
|
|
this._error = null;
|
|
this._debugMode = false;
|
|
this._debugLoading = true;
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.__onLocaleChanged = () => this.requestUpdate();
|
|
window.addEventListener('locale-changed', this.__onLocaleChanged);
|
|
window.addEventListener('llm-page-change', (e) => {
|
|
this._open = e.detail.page === 'config';
|
|
this.style.display = this._open ? 'flex' : 'none';
|
|
if (this._open) { this._load(); this._loadDebugMode(); }
|
|
});
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
window.removeEventListener('locale-changed', this.__onLocaleChanged);
|
|
super.disconnectedCallback();
|
|
}
|
|
|
|
async _loadDebugMode() {
|
|
try {
|
|
const res = await fetch('/api/dev/debug_mode');
|
|
if (!res.ok) throw new Error();
|
|
const data = await res.json();
|
|
this._debugMode = data.enabled;
|
|
} catch {
|
|
// ignore, keep current value
|
|
} finally {
|
|
this._debugLoading = false;
|
|
}
|
|
}
|
|
|
|
async _toggleDebugMode() {
|
|
const next = !this._debugMode;
|
|
this._debugMode = next;
|
|
try {
|
|
const res = await fetch('/api/dev/debug_mode', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled: next }),
|
|
});
|
|
if (!res.ok) throw new Error();
|
|
window.dispatchEvent(new CustomEvent('debug-mode-change', { detail: { enabled: next } }));
|
|
} catch {
|
|
this._debugMode = !next;
|
|
}
|
|
}
|
|
|
|
async _load() {
|
|
this._error = null;
|
|
try {
|
|
const res = await fetch('/api/config');
|
|
if (!res.ok) throw new Error(await res.text());
|
|
const data = await res.json();
|
|
this._properties = data.sets ?? [];
|
|
const vals = {};
|
|
for (const s of this._properties)
|
|
for (const p of s.properties) vals[p.key] = p.value ?? '';
|
|
this._values = vals;
|
|
} catch (e) {
|
|
this._error = e.message;
|
|
}
|
|
}
|
|
|
|
_setValue(key, val) {
|
|
this._values = { ...this._values, [key]: val };
|
|
}
|
|
|
|
async _save(prop) {
|
|
const key = prop.key;
|
|
const value = this._values[key] ?? '';
|
|
|
|
this._saving = new Set([...this._saving, key]);
|
|
this.requestUpdate();
|
|
|
|
try {
|
|
const res = await fetch(`/api/config/${encodeURIComponent(key)}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ value }),
|
|
});
|
|
if (!res.ok) throw new Error(await res.text());
|
|
|
|
this._saved = new Set([...this._saved, key]);
|
|
setTimeout(() => {
|
|
this._saved = new Set([...this._saved].filter(k => k !== key));
|
|
}, 1500);
|
|
} catch (e) {
|
|
alert(t('config.error_save', { name: prop.name, msg: e.message }));
|
|
} finally {
|
|
this._saving = new Set([...this._saving].filter(k => k !== key));
|
|
}
|
|
}
|
|
|
|
_renderInput(prop) {
|
|
const val = this._values[prop.key] ?? '';
|
|
|
|
if (prop.property_type === 'bool') {
|
|
const effective = val !== '' ? val : (prop.default_value ?? 'true');
|
|
const checked = effective !== 'false';
|
|
return html`
|
|
<div class="form-check form-switch config-bool-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch"
|
|
id="cfg-${prop.key}"
|
|
.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 ? t('config.enabled') : t('config.disabled')}
|
|
</label>
|
|
</div>`;
|
|
}
|
|
|
|
if (prop.property_type === 'int') {
|
|
return html`
|
|
<input type="number" step="1" min="1"
|
|
class="form-control form-control-sm config-input"
|
|
.value=${val}
|
|
placeholder=${prop.default_value ?? ''}
|
|
@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"
|
|
.value=${val}
|
|
@change=${e => this._setValue(prop.key, e.target.value)}>
|
|
<option value="">— default —</option>
|
|
${groups.map(g => html`
|
|
<option value=${g.id} ?selected=${val === g.id}>${g.name}</option>`)}
|
|
</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>`;
|
|
}
|
|
|
|
if (prop.property_type === 'llm_model') {
|
|
// Configured LLM models, by name. Nullable: the empty choice means
|
|
// "auto-select" (the backend's own resolution order applies).
|
|
const models = prop.options ?? [];
|
|
return html`
|
|
<select class="form-select form-select-sm config-input"
|
|
.value=${val}
|
|
@change=${e => this._setValue(prop.key, e.target.value)}>
|
|
<option value="">— ${t('config.llm_model.auto')} —</option>
|
|
${models.map(m => html`
|
|
<option value=${m.id} ?selected=${val === m.id}>${m.name}</option>`)}
|
|
</select>`;
|
|
}
|
|
|
|
return html`
|
|
<input type="text"
|
|
class="form-control form-control-sm config-input"
|
|
.value=${val}
|
|
placeholder=${prop.default_value ?? ''}
|
|
@input=${e => this._setValue(prop.key, e.target.value)} />`;
|
|
}
|
|
|
|
_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">${sName}</div>
|
|
<div class="config-set-desc">${sDesc}</div>
|
|
</div>
|
|
<div class="config-rows">
|
|
${set.properties.map(p => this._renderRow(p))}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
_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">${pName}</div>
|
|
<div class="config-row-desc">${pDesc}</div>
|
|
</div>
|
|
<div class="config-row-control">
|
|
${this._renderInput(prop)}
|
|
${!['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 ? t('common.saved') : t('common.save')}
|
|
</button>` : nothing}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="config-page">
|
|
<div class="config-page-header">
|
|
<h2 class="llm-page-title">${t('config.title')}</h2>
|
|
</div>
|
|
|
|
${this._error ? html`
|
|
<div class="alert alert-danger">${this._error}</div>` : nothing}
|
|
|
|
${this._properties.length === 0 && !this._error ? html`
|
|
<p class="text-muted mt-2">${t('config.loading')}</p>` : nothing}
|
|
|
|
<div class="config-sets">
|
|
${this._properties.map(s => this._renderSet(s))}
|
|
</div>
|
|
|
|
<div class="config-set">
|
|
<div class="config-set-header">
|
|
<div class="config-set-name">${t('config.developer')}</div>
|
|
<div class="config-set-desc"></div>
|
|
</div>
|
|
<div class="config-rows">
|
|
<div class="config-row">
|
|
<div class="config-row-meta">
|
|
<div class="config-row-name">${t('config.debug')}</div>
|
|
<div class="config-row-desc">${t('config.debug.desc')}</div>
|
|
</div>
|
|
<div class="config-row-control">
|
|
<div class="form-check form-switch config-bool-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch"
|
|
id="cfg-debug-mode"
|
|
.checked=${this._debugMode}
|
|
?disabled=${this._debugLoading}
|
|
@change=${() => this._toggleDebugMode()} />
|
|
<label class="form-check-label" for="cfg-debug-mode">
|
|
${this._debugMode ? t('config.enabled') : t('config.disabled')}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}
|