cli-jaw 1.4.11 → 1.5.0

package/public/js/features/settings-cli-status.ts

@@ -0,0 +1,164 @@
+// ── CLI Status & Quota ──
+import { api } from '../api.js';
+import { escapeHtml } from '../render.js';
+import { t } from './i18n.js';
+import { state } from '../state.js';
+import type { QuotaEntry } from './settings-types.js';
+
+export async function loadCliStatus(force = false): Promise<void> {
+    const interval = Number(localStorage.getItem('cliStatusInterval') || 300);
+    if (!force && state.cliStatusCache && interval > 0 && (Date.now() - state.cliStatusTs) < interval * 1000) {
+        renderCliStatus({ cliStatus: (state.cliStatusCache as Record<string, unknown>)?.cliStatus as Record<string, { available: boolean }> | null, quota: (state.cliStatusCache as Record<string, unknown>)?.quota as Record<string, QuotaEntry> | null });
+        return;
+    }
+
+    const el = document.getElementById('cliStatusList');
+    if (el) el.innerHTML = '<div style="color:var(--text-dim);font-size:11px">Loading...</div>';
+
+    const [cliStatus, quota] = await Promise.all([
+        api<Record<string, { available: boolean }>>('/api/cli-status'),
+        api<Record<string, QuotaEntry>>('/api/quota'),
+    ]);
+
+    state.cliStatusCache = { cliStatus, quota } as Record<string, unknown>;
+    state.cliStatusTs = Date.now();
+    renderCliStatus({ cliStatus, quota });
+}
+
+function renderCliStatus(data: { cliStatus: Record<string, { available: boolean }> | null; quota: Record<string, QuotaEntry> | null }): void {
+    const { cliStatus, quota } = data;
+    const el = document.getElementById('cliStatusList');
+
+    const AUTH_HINTS: Record<string, { install: string; auth: string }> = {
+        claude: { install: 'npm i -g @anthropic-ai/claude-code', auth: 'claude auth' },
+        codex: { install: 'npm i -g @openai/codex', auth: 'codex login' },
+        gemini: { install: 'npm i -g @google/gemini-cli', auth: `gemini  (${t('cli.gemini.auth')})` },
+        opencode: { install: 'npm i -g opencode-ai', auth: 'opencode auth' },
+        copilot: { install: 'npm i -g copilot', auth: 'copilot login 또는 gh auth login' },
+    };
+
+    let html = '';
+
+    if (!cliStatus || typeof cliStatus !== 'object') {
+        if (el) el.innerHTML = '<div style="color:var(--text-dim);font-size:11px">Failed to load CLI status</div>';
+        return;
+    }
+
+    for (const [name, info] of Object.entries(cliStatus)) {
+        const q = quota?.[name];
+        let dotClass: string;
+        if (!info.available) {
+            dotClass = 'missing';
+        } else if (!q || q.error) {
+            dotClass = 'ok';
+        } else if (q.authenticated === false) {
+            dotClass = 'warn';
+        } else {
+            dotClass = 'ok';
+        }
+
+        let accountLine = '';
+        if (q?.account) {
+            const parts = [];
+            if (q.account.email) parts.push(q.account.email);
+            if (q.account.type) parts.push(q.account.type);
+            if (q.account.plan) parts.push(q.account.plan);
+            if (q.account.tier) parts.push(q.account.tier);
+            if (parts.length) accountLine = `<div style="font-size:10px;color:var(--text-dim);margin:2px 0 4px 16px">${escapeHtml(parts.join(' · '))}</div>`;
+        }
+
+        let authHint = '';
+        if (!info.available || dotClass === 'warn') {
+            const hint = AUTH_HINTS[name];
+            if (hint) {
+                const isNotInstalled = !info.available;
+                const title = isNotInstalled ? t('cli.authRequired') : t('cli.notAuthenticated');
+                const borderColor = isNotInstalled ? '#ef4444' : '#fbbf24';
+                authHint = `
+                    <div style="font-size:10px;margin:4px 0 2px 16px;padding:6px 8px;background:var(--bg-dim, #1e1e2e);border-radius:4px;border-left:2px solid ${borderColor}">
+                        <div style="color:${borderColor};margin-bottom:3px">${title}</div>
+                        ${isNotInstalled ? `<div style="color:var(--text-dim)"><code style="font-size:10px;background:var(--border);padding:1px 4px;border-radius:2px">${escapeHtml(hint.install)}</code></div>` : ''}
+                        <div style="color:var(--text-dim)${isNotInstalled ? ';margin-top:2px' : ''}"><code style="font-size:10px;background:var(--border);padding:1px 4px;border-radius:2px">${escapeHtml(hint.auth)}</code></div>
+                    </div>
+                `;
+            }
+        }
+
+        let windowsHtml = '';
+        if (q?.windows?.length) {
+            windowsHtml = q.windows.map(w => {
+                const pct = Math.round(w.percent);
+                const barColor = pct > 80 ? '#ef4444' : pct > 50 ? '#fbbf24' : '#38bdf8';
+                const shortLabel = w.label.replace('-hour', 'h').replace('-day', 'd').replace(' Sonnet', '').replace(' Opus', '').replace('plus monthly subscriber quota', 'plus').replace('Premium', 'Prem');
+                let resetStr = '';
+                if (w.resetsAt) {
+                    const d = new Date(typeof w.resetsAt === 'number' ? w.resetsAt * 1000 : w.resetsAt);
+                    const now = new Date();
+                    if (d.toDateString() === now.toDateString()) {
+                        resetStr = `${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`;
+                    } else {
+                        resetStr = `${d.getMonth() + 1}/${d.getDate()}`;
+                    }
+                }
+                return `
+                    <div style="display:flex;align-items:center;gap:4px;margin-left:16px;font-size:10px;color:var(--text-dim)">
+                        <span style="min-width:18px;max-width:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(shortLabel)}</span>
+                        <div style="flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden">
+                            <div style="width:${pct}%;height:100%;background:${barColor};border-radius:2px"></div>
+                        </div>
+                        <span style="width:24px;text-align:right">${pct}%</span>
+                        ${resetStr ? `<span style="width:30px;text-align:right;opacity:0.6">${resetStr}</span>` : ''}
+                    </div>
+                `;
+            }).join('');
+        } else if (q?.error && info.available) {
+            const msg = q.reason === 'rate_limited' ? 'Rate limited — retry in a moment' : 'Usage data unavailable';
+            windowsHtml = `<div style="font-size:10px;color:var(--text-dim);margin:2px 0 0 16px;opacity:0.7">⚠ ${msg}</div>`;
+        }
+
+        html += `
+            <div class="settings-group" style="margin-bottom:6px;padding:8px 10px">
+                <div class="cli-status-row">
+                    <span class="cli-dot ${dotClass}"></span>
+                    <span class="cli-name" style="font-weight:600">${escapeHtml(name)}</span>${name === 'copilot' ? `<button id="copilotKeychainBtn" style="font-size:9px;margin-left:6px;padding:1px 5px;background:var(--border);color:var(--text-dim);border:1px solid var(--text-dim);border-radius:3px;cursor:pointer;vertical-align:middle;line-height:1" title="${t('copilot.keychainHint')}">🔑</button>` : ''}
+                </div>
+                ${accountLine}
+                ${authHint}
+                ${windowsHtml}
+            </div>
+        `;
+    }
+
+    if (el) el.innerHTML = html;
+
+    const allEntries = Object.entries(cliStatus);
+    const hasReadyCli = allEntries.some(([name, info]) => {
+        if (!info.available) return false;
+        const q = quota?.[name];
+        return !q || q.authenticated !== false;
+    });
+    if (!hasReadyCli && allEntries.length > 0 && el) {
+        el.insertAdjacentHTML('afterbegin',
+            `<div style="padding:8px 10px;margin-bottom:8px;background:#fbbf2422;border:1px solid #fbbf24;border-radius:6px;font-size:11px;color:#fbbf24">
+                ⚠ ${t('cli.noReadyCli')}
+            </div>`
+        );
+    }
+
+    const kcBtn = document.getElementById('copilotKeychainBtn');
+    if (kcBtn) {
+        kcBtn.addEventListener('click', async () => {
+            const btn = kcBtn as HTMLButtonElement;
+            btn.disabled = true;
+            btn.textContent = '⏳';
+            try {
+                const res = await api<{ ok: boolean }>('/api/copilot/refresh', { method: 'POST' });
+                btn.textContent = res?.ok ? '✅' : '❌';
+                if (res?.ok) await loadCliStatus(true);
+            } catch {
+                btn.textContent = '❌';
+            }
+            setTimeout(() => { btn.textContent = '🔑'; btn.disabled = false; }, 2000);
+        });
+    }
+}

package/public/js/features/settings-core.ts

@@ -0,0 +1,357 @@
+// ── Settings Core ──
+import { MODEL_MAP, loadCliRegistry, getCliKeys, getCliMeta } from '../constants.js';
+import { escapeHtml } from '../render.js';
+import { syncStoredLocale } from '../locale.js';
+import { t } from './i18n.js';
+import { api, apiJson, apiFire } from '../api.js';
+import type { PerCliConfig, SettingsData } from './settings-types.js';
+import { initSttSettings } from './settings-stt.js';
+import { loadTelegramSettings } from './settings-telegram.js';
+import { loadDiscordSettings } from './settings-discord.js';
+import { loadActiveChannel, loadFallbackOrder } from './settings-channel.js';
+import { loadMcpServers } from './settings-mcp.js';
+
+function toCap(cli: string): string {
+    return cli.charAt(0).toUpperCase() + cli.slice(1);
+}
+
+function getModelSelect(cli: string): HTMLSelectElement | null {
+    return document.getElementById('model' + toCap(cli)) as HTMLSelectElement | null;
+}
+
+function getCustomModelInput(cli: string): HTMLInputElement | null {
+    return document.getElementById('customModel' + toCap(cli)) as HTMLInputElement | null;
+}
+
+function getEffortSelect(cli: string): HTMLSelectElement | null {
+    return document.getElementById('effort' + toCap(cli)) as HTMLSelectElement | null;
+}
+
+function setSelectOptions(selectEl: HTMLSelectElement | null, values: string[], { includeCustom = false, includeDefault = false, selected = '' } = {}): void {
+    if (!selectEl) return;
+    const defaultHtml = includeDefault ? '<option value="default">default</option>' : '';
+    const customHtml = includeCustom ? `<option value="__custom__">${t('model.customOption')}</option>` : '';
+    const opts = (values || []).map(v => `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`).join('');
+    selectEl.innerHTML = defaultHtml + opts + customHtml;
+
+    if (selected && Array.from(selectEl.options).some(o => o.value === selected)) {
+        selectEl.value = selected;
+    }
+}
+
+function appendCustomOption(selectEl: HTMLSelectElement | null, value: string): void {
+    if (!selectEl || !value) return;
+    if (Array.from(selectEl.options).some(o => o.value === value)) return;
+    const opt = document.createElement('option');
+    opt.value = value;
+    opt.textContent = value;
+    const customOpt = selectEl.querySelector('option[value="__custom__"]');
+    if (customOpt) selectEl.insertBefore(opt, customOpt);
+    else selectEl.appendChild(opt);
+}
+
+function syncCliOptionSelects(settings: SettingsData | null = null): void {
+    const cliKeys = getCliKeys();
+
+    const selCli = document.getElementById('selCli') as HTMLSelectElement | null;
+    if (selCli) {
+        const current = settings?.cli || selCli.value || cliKeys[0] || 'claude';
+        selCli.innerHTML = cliKeys.map(cli => {
+            const label = getCliMeta(cli)?.label || cli;
+            return `<option value="${escapeHtml(cli)}">${escapeHtml(label)}</option>`;
+        }).join('');
+        if (Array.from(selCli.options).some(o => o.value === current)) selCli.value = current;
+    }
+
+    const memCli = document.getElementById('memCli') as HTMLSelectElement | null;
+    if (memCli) {
+        const current = settings?.memory?.cli || memCli.value || '';
+        memCli.innerHTML = '<option value="">(active CLI)</option>' +
+            cliKeys.map(cli => `<option value="${escapeHtml(cli)}">${escapeHtml(cli)}</option>`).join('');
+        if (Array.from(memCli.options).some(o => o.value === current)) memCli.value = current;
+    }
+}
+
+function normalizeModelForDisplay(cli: string, model: string): string {
+    if (cli !== 'claude') return model;
+    switch ((model || '').trim()) {
+        case 'claude-sonnet-4-6': return 'sonnet';
+        case 'claude-opus-4-6': return 'opus';
+        case 'claude-sonnet-4-6[1m]': return 'sonnet[1m]';
+        case 'claude-opus-4-6[1m]': return 'opus[1m]';
+        default: return model;
+    }
+}
+
+function syncPerCliModelAndEffortControls(settings: SettingsData | null = null): void {
+    for (const cli of getCliKeys()) {
+        const modelSel = getModelSelect(cli);
+        if (modelSel) {
+            const raw = settings?.perCli?.[cli]?.model || modelSel.value || '';
+            const selected = normalizeModelForDisplay(cli, raw);
+            setSelectOptions(modelSel, MODEL_MAP[cli] || [], { includeCustom: true, selected });
+            if (selected && !Array.from(modelSel.options).some(o => o.value === selected)) {
+                appendCustomOption(modelSel, selected);
+                modelSel.value = selected;
+            }
+        }
+
+        const effortSel = getEffortSelect(cli);
+        if (effortSel) {
+            const meta = getCliMeta(cli);
+            const options = [''].concat(meta?.efforts || []);
+            const selected = settings?.perCli?.[cli]?.effort || effortSel.value || '';
+            const unique = [...new Set(options)];
+            const noneLabel = (meta?.efforts?.length === 0 && meta?.effortNote) ? meta.effortNote : '— none';
+            effortSel.innerHTML = unique.map(v => {
+                if (!v) return `<option value="">${escapeHtml(noneLabel)}</option>`;
+                return `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`;
+            }).join('');
+            if (meta?.effortNote) effortSel.title = meta.effortNote;
+            effortSel.disabled = (meta?.efforts?.length === 0 && !!meta?.effortNote);
+            if (Array.from(effortSel.options).some(o => o.value === selected)) effortSel.value = selected;
+        }
+    }
+}
+
+function syncActiveEffortOptions(cli: string, selected = ''): void {
+    const selEffort = document.getElementById('selEffort') as HTMLSelectElement | null;
+    if (!selEffort) return;
+    const meta = getCliMeta(cli);
+    if (meta?.effortNote) {
+        selEffort.innerHTML = `<option value="">${escapeHtml(meta.effortNote)}</option>`;
+        selEffort.title = meta.effortNote;
+        selEffort.disabled = true;
+        return;
+    }
+    const efforts = [''].concat(meta?.efforts || []);
+    const unique = [...new Set(efforts)];
+    selEffort.innerHTML = unique.map(v => {
+        if (!v) return '<option value="">— none</option>';
+        return `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`;
+    }).join('');
+    selEffort.disabled = false;
+    selEffort.title = '';
+    if (Array.from(selEffort.options).some(o => o.value === selected)) selEffort.value = selected;
+}
+
+export async function loadSettings(): Promise<void> {
+    await loadCliRegistry();
+    const s = await api<SettingsData>('/api/settings');
+    if (!s) return;
+    syncStoredLocale(s.locale ?? '');
+    syncCliOptionSelects(s);
+    syncPerCliModelAndEffortControls(s);
+
+    const selCli = document.getElementById('selCli') as HTMLSelectElement | null;
+    if (selCli && Array.from(selCli.options).some(o => o.value === s.cli)) {
+        selCli.value = s.cli;
+    }
+    const cwdEl = document.getElementById('inpCwd');
+    if (cwdEl) cwdEl.textContent = s.workingDir;
+    const headerEl = document.getElementById('headerCli');
+    if (headerEl) headerEl.textContent = s.cli;
+    setPerm(s.permissions, false);
+
+    if (s.perCli) {
+        for (const [cli, cfg] of Object.entries(s.perCli) as [string, PerCliConfig][]) {
+            const modelEl = getModelSelect(cli);
+            const effortEl = getEffortSelect(cli);
+            if (modelEl && cfg.model) {
+                const displayModel = normalizeModelForDisplay(cli, cfg.model);
+                appendCustomOption(modelEl, displayModel);
+                modelEl.value = displayModel;
+            }
+            if (effortEl) effortEl.value = cfg.effort || '';
+            if (cli === 'codex' && cfg.fastMode !== undefined) {
+                document.getElementById('codexFastOn')?.classList.toggle('active', cfg.fastMode);
+                document.getElementById('codexFastOff')?.classList.toggle('active', !cfg.fastMode);
+            }
+            if (cli === 'codex') {
+                const ctxOn = !!cfg.contextWindow;
+                document.getElementById('codexCtxOn')?.classList.toggle('active', ctxOn);
+                document.getElementById('codexCtxOff')?.classList.toggle('active', !ctxOn);
+                const valDiv = document.getElementById('codexCtxValues');
+                if (valDiv) valDiv.style.display = ctxOn ? '' : 'none';
+                const winInput = document.getElementById('codexCtxWindow') as HTMLInputElement | null;
+                const compInput = document.getElementById('codexCtxCompact') as HTMLInputElement | null;
+                if (winInput && cfg.contextWindowSize) winInput.value = String(cfg.contextWindowSize);
+                if (compInput && cfg.contextCompactLimit) compInput.value = String(cfg.contextCompactLimit);
+            }
+            if (cli === 'claude') {
+                const is1m = !!(cfg.model && String(cfg.model).endsWith('[1m]'));
+                document.getElementById('claude1mOn')?.classList.toggle('active', is1m);
+                document.getElementById('claude1mOff')?.classList.toggle('active', !is1m);
+            }
+        }
+    }
+
+    onCliChange(false);
+    const ao = s.activeOverrides?.[s.cli] || {};
+    const pc = s.perCli?.[s.cli] || {};
+    const activeModel = ao.model || pc.model;
+    const activeEffort = ao.effort || pc.effort || '';
+    const selModel = document.getElementById('selModel') as HTMLSelectElement | null;
+    if (activeModel && selModel) {
+        const displayModel = normalizeModelForDisplay(s.cli, activeModel);
+        if (displayModel && !Array.from(selModel.options).some(o => o.value === displayModel)) {
+            appendCustomOption(selModel, displayModel);
+        }
+        selModel.value = displayModel;
+    }
+    syncActiveEffortOptions(s.cli, activeEffort);
+
+    loadTelegramSettings(s);
+    loadDiscordSettings(s);
+    loadActiveChannel(s);
+    loadFallbackOrder(s);
+    loadMcpServers();
+    initSttSettings(s.stt || {});
+}
+
+export async function updateSettings(): Promise<void> {
+    const s = {
+        cli: (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude',
+    };
+    const hdr = document.getElementById('headerCli');
+    if (hdr) hdr.textContent = s.cli;
+    await apiJson('/api/settings', 'PUT', s);
+}
+
+export function setPerm(_p: string, save = true): void {
+    if (save) apiFire('/api/settings', 'PUT', { permissions: 'auto' });
+}
+
+export function getModelValue(cli: string): string {
+    const sel = getModelSelect(cli);
+    if (!sel) return 'default';
+    if (sel.value === '__custom__') {
+        const inp = getCustomModelInput(cli);
+        return inp?.value?.trim() || sel.options[0]?.value || 'default';
+    }
+    return sel.value;
+}
+
+export function handleModelSelect(cli: string, selectEl: HTMLSelectElement): void {
+    const customInput = getCustomModelInput(cli);
+    if (!customInput) return;
+    if (selectEl.value === '__custom__') {
+        customInput.style.display = 'block';
+        customInput.focus();
+    } else {
+        customInput.style.display = 'none';
+        if (cli === 'claude') syncClaude1mToggle(selectEl.value);
+        savePerCli();
+    }
+}
+
+/** Sync Claude 1M toggle button state to match current model value */
+function syncClaude1mToggle(model: string): void {
+    const is1m = !!(model && model.endsWith('[1m]'));
+    document.getElementById('claude1mOn')?.classList.toggle('active', is1m);
+    document.getElementById('claude1mOff')?.classList.toggle('active', !is1m);
+}
+
+export function applyCustomModel(cli: string, inputEl: HTMLInputElement): void {
+    const val = inputEl.value.trim();
+    if (!val) return;
+    const select = getModelSelect(cli);
+    if (!select) return;
+    appendCustomOption(select, val);
+    select.value = val;
+    inputEl.style.display = 'none';
+    if (cli === 'claude') syncClaude1mToggle(val);
+    savePerCli();
+}
+
+export async function savePerCli(): Promise<void> {
+    const perCli: Record<string, PerCliConfig> = {};
+    for (const cli of getCliKeys()) {
+        const modelEl = getModelSelect(cli);
+        if (!modelEl) continue;
+        const effortEl = getEffortSelect(cli);
+        const entry: PerCliConfig = {
+            model: getModelValue(cli),
+            effort: effortEl ? effortEl.value : '',
+        };
+        if (cli === 'codex') {
+            const onBtn = document.getElementById('codexFastOn');
+            entry.fastMode = onBtn?.classList.contains('active') ?? false;
+            const ctxOn = document.getElementById('codexCtxOn');
+            entry.contextWindow = ctxOn?.classList.contains('active') ?? false;
+            const winInput = document.getElementById('codexCtxWindow') as HTMLInputElement | null;
+            const compInput = document.getElementById('codexCtxCompact') as HTMLInputElement | null;
+            entry.contextWindowSize = parseInt(winInput?.value || '1000000', 10);
+            entry.contextCompactLimit = parseInt(compInput?.value || '900000', 10);
+        }
+        perCli[cli] = entry;
+    }
+    await apiJson('/api/settings', 'PUT', { perCli });
+}
+
+export function onCliChange(save = true): void {
+    const cli = (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude';
+    const models = MODEL_MAP[cli] || [];
+    const modelSel = document.getElementById('selModel') as HTMLSelectElement | null;
+    setSelectOptions(modelSel, models, { includeCustom: true, includeDefault: true });
+    const hdrCli = document.getElementById('headerCli');
+    if (hdrCli) hdrCli.textContent = cli;
+    syncActiveEffortOptions(cli);
+
+    const oldInput = document.getElementById('selModelCustom');
+    if (oldInput) oldInput.remove();
+    const inp = document.createElement('input');
+    inp.type = 'text'; inp.id = 'selModelCustom';
+    inp.className = 'custom-model-input';
+    inp.placeholder = t('model.placeholder');
+    inp.style.display = 'none';
+    inp.onchange = function () {
+        const val = (this as HTMLInputElement).value.trim();
+        if (!val || !modelSel) return;
+        appendCustomOption(modelSel, val);
+        modelSel.value = val;
+        (this as HTMLInputElement).style.display = 'none';
+        saveActiveCliSettings();
+    };
+    if (!modelSel) { if (save) updateSettings(); return; }
+    modelSel.parentElement?.appendChild(inp);
+    modelSel.onchange = function () {
+        if ((this as HTMLSelectElement).value === '__custom__') {
+            inp.style.display = 'block';
+            inp.focus();
+        } else {
+            inp.style.display = 'none';
+            saveActiveCliSettings();
+        }
+    };
+
+    api<SettingsData>('/api/settings').then(s => {
+        if (!s) return;
+        const ao = s.activeOverrides?.[cli] || {};
+        const pc = s.perCli?.[cli] || {};
+        const model = ao.model || pc.model;
+        const effort = ao.effort || pc.effort || '';
+        if (model && modelSel) {
+            const displayModel = normalizeModelForDisplay(cli, model);
+            appendCustomOption(modelSel, displayModel);
+            modelSel.value = displayModel;
+        }
+        syncActiveEffortOptions(cli, effort);
+    });
+
+    if (save) updateSettings();
+}
+
+export async function saveActiveCliSettings(): Promise<void> {
+    const cli = (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude';
+    const modelSel = document.getElementById('selModel') as HTMLSelectElement | null;
+    let model = modelSel?.value || 'default';
+    if (model === '__custom__') {
+        model = (document.getElementById('selModelCustom') as HTMLInputElement | null)?.value?.trim() || 'default';
+    }
+    const effortEl = document.getElementById('selEffort') as HTMLSelectElement | null;
+    const overrides: Record<string, PerCliConfig> = {};
+    overrides[cli] = { model };
+    if (effortEl && !effortEl.disabled) overrides[cli].effort = effortEl.value || '';
+    await apiJson('/api/settings', 'PUT', { activeOverrides: overrides });
+}

package/public/js/features/settings-discord.ts

@@ -0,0 +1,52 @@
+// ── Discord Settings ──
+import { apiJson } from '../api.js';
+import type { SettingsData } from './settings-types.js';
+
+export async function saveDiscordSettings(): Promise<void> {
+    const token = (document.getElementById('dcToken') as HTMLInputElement)?.value.trim() || '';
+    const guildId = (document.getElementById('dcGuildId') as HTMLInputElement)?.value.trim() || '';
+    const channelIdsRaw = (document.getElementById('dcChannelIds') as HTMLInputElement)?.value.trim() || '';
+    const channelIds = channelIdsRaw
+        ? channelIdsRaw.split(',').map(s => s.trim()).filter(Boolean)
+        : [];
+    await apiJson('/api/settings', 'PUT', { discord: { token, guildId, channelIds } });
+}
+
+export async function setDiscord(enabled: boolean): Promise<void> {
+    document.getElementById('dcOn')?.classList.toggle('active', enabled);
+    document.getElementById('dcOff')?.classList.toggle('active', !enabled);
+    await apiJson('/api/settings', 'PUT', { discord: { enabled } });
+}
+
+export async function setDiscordForwardAll(enabled: boolean): Promise<void> {
+    document.getElementById('dcForwardOn')?.classList.toggle('active', enabled);
+    document.getElementById('dcForwardOff')?.classList.toggle('active', !enabled);
+    await apiJson('/api/settings', 'PUT', { discord: { forwardAll: enabled } });
+}
+
+export async function setDiscordAllowBots(allow: boolean): Promise<void> {
+    document.getElementById('dcAllowBotsOn')?.classList.toggle('active', allow);
+    document.getElementById('dcAllowBotsOff')?.classList.toggle('active', !allow);
+    await apiJson('/api/settings', 'PUT', { discord: { allowBots: allow } });
+}
+
+export function loadDiscordSettings(s: SettingsData): void {
+    if (!s.discord) return;
+    const dc = s.discord;
+    document.getElementById('dcOn')?.classList.toggle('active', !!dc.enabled);
+    document.getElementById('dcOff')?.classList.toggle('active', !dc.enabled);
+    const dcToken = document.getElementById('dcToken') as HTMLInputElement | null;
+    if (dc.token && dcToken) dcToken.value = dc.token;
+    const dcGuildId = document.getElementById('dcGuildId') as HTMLInputElement | null;
+    if (dc.guildId && dcGuildId) dcGuildId.value = dc.guildId;
+    const dcChannelIds = document.getElementById('dcChannelIds') as HTMLInputElement | null;
+    if (dc.channelIds?.length && dcChannelIds) {
+        dcChannelIds.value = dc.channelIds.join(', ');
+    }
+    const fwdOn = dc.forwardAll !== false;
+    document.getElementById('dcForwardOn')?.classList.toggle('active', fwdOn);
+    document.getElementById('dcForwardOff')?.classList.toggle('active', !fwdOn);
+    const allowBots = !!dc.allowBots;
+    document.getElementById('dcAllowBotsOn')?.classList.toggle('active', allowBots);
+    document.getElementById('dcAllowBotsOff')?.classList.toggle('active', !allowBots);
+}

package/public/js/features/settings-mcp.ts

@@ -0,0 +1,54 @@
+// ── MCP Server Settings ──
+import { api, apiJson } from '../api.js';
+import { escapeHtml } from '../render.js';
+import { t } from './i18n.js';
+
+interface McpData { servers: Record<string, { command: string; args?: string[] }>; }
+interface McpSyncResult { results: Record<string, boolean>; }
+interface McpInstallEntry { status: string; bin?: string; }
+interface McpInstallResult { results: Record<string, McpInstallEntry>; }
+
+export async function loadMcpServers(): Promise<void> {
+    try {
+        const d = await api<McpData>('/api/mcp');
+        if (!d) return;
+        const el = document.getElementById('mcpServerList');
+        if (!el) return;
+        const names = Object.entries(d.servers || {});
+        if (!names.length) { el.textContent = t('mcp.noServers'); return; }
+        el.innerHTML = names.map(([n, s]) =>
+            `<div style="padding:2px 0">• <b>${escapeHtml(n)}</b> <span style="opacity:.6">${escapeHtml(s.command)} ${(s.args || []).slice(0, 2).map(a => escapeHtml(a)).join(' ')}</span></div>`
+        ).join('');
+    } catch { }
+}
+
+export async function syncMcpServers(): Promise<void> {
+    const resultEl = document.getElementById('mcpSyncResult');
+    if (!resultEl) return;
+    resultEl.style.display = 'block';
+    resultEl.textContent = t('mcp.syncing');
+    try {
+        const d = await apiJson('/api/mcp/sync', 'POST', {}) as McpSyncResult | null;
+        if (!d) { resultEl.textContent = '❌ sync failed'; return; }
+        const r = d.results || {};
+        resultEl.innerHTML = Object.entries(r).map(([k, v]) =>
+            `${v ? '✅' : '⏭️'} ${escapeHtml(k)}`
+        ).join(' &nbsp; ');
+    } catch (e) { resultEl.textContent = '❌ ' + (e as Error).message; }
+}
+
+export async function installMcpGlobal(): Promise<void> {
+    const resultEl = document.getElementById('mcpSyncResult');
+    if (!resultEl) return;
+    resultEl.style.display = 'block';
+    resultEl.textContent = t('mcp.installing');
+    try {
+        const d = await apiJson('/api/mcp/install', 'POST', {}) as McpInstallResult | null;
+        if (!d) { resultEl.textContent = '❌ install failed'; return; }
+        resultEl.innerHTML = Object.entries(d.results || {}).map(([k, v]) => {
+            const icon = v.status === 'installed' ? '✅' : v.status === 'skip' ? '⏭️' : '❌';
+            return `${icon} <b>${escapeHtml(k)}</b>: ${escapeHtml(v.status)}${v.bin ? ' → ' + escapeHtml(v.bin) : ''}`;
+        }).join('<br>');
+        loadMcpServers();
+    } catch (e) { resultEl.textContent = '❌ ' + (e as Error).message; }
+}