cli-jaw 0.1.0

package/public/js/features/memory.js

@@ -0,0 +1,85 @@
+// ── Memory Feature ──
+import { escapeHtml } from '../render.js';
+import { api, apiJson, apiFire } from '../api.js';
+
+export async function openMemoryModal() {
+    const data = await api('/api/memory-files');
+    if (!data) return;
+    document.getElementById('memOn').classList.toggle('active', data.enabled);
+    document.getElementById('memOff').classList.toggle('active', !data.enabled);
+    document.getElementById('memFlushEvery').value = data.flushEvery;
+    document.getElementById('memCli').value = data.cli || '';
+    document.getElementById('memModel').value = data.model || '';
+    document.getElementById('memRetention').value = data.retentionDays;
+    document.getElementById('memPath').textContent = data.path;
+    document.getElementById('memCounter').textContent = data.counter;
+    document.getElementById('memThreshold').textContent = data.flushEvery;
+    renderMemFiles(data.files);
+    document.getElementById('memorySidebarBtn').textContent = `🧠 Memory (${data.files.length})`;
+    document.getElementById('memoryModal').classList.add('open');
+}
+
+export function closeMemoryModal(e) {
+    if (e && e.target !== e.currentTarget) return;
+    document.getElementById('memoryModal').classList.remove('open');
+}
+
+export function switchMemTab(tab) {
+    document.getElementById('memTabSettings').style.display = tab === 'settings' ? '' : 'none';
+    document.getElementById('memTabFiles').style.display = tab === 'files' ? '' : 'none';
+    document.getElementById('memTabBtnSettings').classList.toggle('active', tab === 'settings');
+    document.getElementById('memTabBtnFiles').classList.toggle('active', tab === 'files');
+}
+
+export async function setMemEnabled(v) {
+    document.getElementById('memOn').classList.toggle('active', v);
+    document.getElementById('memOff').classList.toggle('active', !v);
+    await apiJson('/api/memory-files/settings', 'PUT', { enabled: v });
+}
+
+export async function saveMemSettings() {
+    await apiJson('/api/memory-files/settings', 'PUT', {
+        flushEvery: +document.getElementById('memFlushEvery').value,
+        cli: document.getElementById('memCli').value,
+        model: document.getElementById('memModel').value,
+        retentionDays: +document.getElementById('memRetention').value,
+    });
+    document.getElementById('memThreshold').textContent = document.getElementById('memFlushEvery').value;
+}
+
+function renderMemFiles(files) {
+    const container = document.getElementById('memFilesList');
+    if (!files || files.length === 0) {
+        container.innerHTML = '<p style="color:var(--text-dim);font-size:12px;text-align:center">No memory files yet</p>';
+        return;
+    }
+    container.innerHTML = files.map(f => `
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--border);border-radius:4px;margin-bottom:4px;cursor:pointer"
+             data-mem-view="${escapeHtml(f.name)}">
+            <div>
+                <span style="font-size:12px;font-family:monospace">${escapeHtml(f.name)}</span>
+                <span style="font-size:10px;color:var(--accent);margin-left:6px">${f.entries} entries</span>
+            </div>
+            <button data-mem-delete="${escapeHtml(f.name)}" style="background:none;border:none;color:#f55;cursor:pointer;font-size:14px">🗑️</button>
+        </div>
+    `).join('');
+}
+
+export async function deleteMemFile(name) {
+    if (!confirm('Delete ' + name + '?')) return;
+    await apiJson('/api/memory-files/' + name, 'DELETE');
+    openMemoryModal();
+}
+
+export async function viewMemFile(name) {
+    const data = await api('/api/memory-files/' + name);
+    if (!data) return;
+    const container = document.getElementById('memFilesList');
+    container.innerHTML = `
+        <div style="margin-bottom:8px;display:flex;justify-content:space-between;align-items:center">
+            <span style="font-size:12px;font-weight:600">${data.name}</span>
+            <button data-mem-back style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:11px">← back</button>
+        </div>
+        <pre style="background:var(--bg);padding:8px;border-radius:4px;font-size:11px;white-space:pre-wrap;max-height:50vh;overflow-y:auto;color:var(--text)">${escapeHtml(data.content)}</pre>
+    `;
+}

package/public/js/features/settings.js

@@ -0,0 +1,512 @@
+// ── Settings Feature ──
+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';
+
+function toCap(cli) {
+    return cli.charAt(0).toUpperCase() + cli.slice(1);
+}
+
+function getModelSelect(cli) {
+    return document.getElementById('model' + toCap(cli));
+}
+
+function getCustomModelInput(cli) {
+    return document.getElementById('customModel' + toCap(cli));
+}
+
+function getEffortSelect(cli) {
+    return document.getElementById('effort' + toCap(cli));
+}
+
+function setSelectOptions(selectEl, values, { includeCustom = false, includeDefault = false, selected = '' } = {}) {
+    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, value) {
+    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 = null) {
+    const cliKeys = getCliKeys();
+
+    const selCli = document.getElementById('selCli');
+    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');
+    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 syncPerCliModelAndEffortControls(settings = null) {
+    for (const cli of getCliKeys()) {
+        const modelSel = getModelSelect(cli);
+        if (modelSel) {
+            const selected = settings?.perCli?.[cli]?.model || modelSel.value || '';
+            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, selected = '') {
+    const selEffort = document.getElementById('selEffort');
+    if (!selEffort) return;
+    const meta = getCliMeta(cli);
+    if (meta?.effortNote) {
+        // Effort managed externally (e.g. Copilot config.json) — show hint, disable
+        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() {
+    await loadCliRegistry();
+    const s = await api('/api/settings');
+    if (!s) return;
+    syncStoredLocale(s.locale);
+    syncCliOptionSelects(s);
+    syncPerCliModelAndEffortControls(s);
+
+    const selCli = document.getElementById('selCli');
+    if (Array.from(selCli.options).some(o => o.value === s.cli)) {
+        selCli.value = s.cli;
+    }
+    document.getElementById('inpCwd').value = s.workingDir;
+    document.getElementById('headerCli').textContent = s.cli;
+    setPerm(s.permissions, false);
+
+    if (s.perCli) {
+        for (const [cli, cfg] of Object.entries(s.perCli)) {
+            const modelEl = getModelSelect(cli);
+            const effortEl = getEffortSelect(cli);
+            if (modelEl && cfg.model) {
+                appendCustomOption(modelEl, cfg.model);
+                modelEl.value = cfg.model;
+            }
+            if (effortEl) effortEl.value = cfg.effort || '';
+        }
+    }
+
+    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 || '';
+    if (activeModel) document.getElementById('selModel').value = activeModel;
+    syncActiveEffortOptions(s.cli, activeEffort);
+
+    loadTelegramSettings(s);
+    loadFallbackOrder(s);
+    loadMcpServers();
+}
+
+export async function loadMcpServers() {
+    try {
+        const d = await api('/api/mcp');
+        if (!d) return;
+        const el = document.getElementById('mcpServerList');
+        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>${n}</b> <span style="opacity:.6">${s.command} ${(s.args || []).slice(0, 2).join(' ')}</span></div>`
+        ).join('');
+    } catch { }
+}
+
+export async function syncMcpServers() {
+    const resultEl = document.getElementById('mcpSyncResult');
+    resultEl.style.display = 'block';
+    resultEl.textContent = t('mcp.syncing');
+    try {
+        const d = await apiJson('/api/mcp/sync', 'POST', {});
+        if (!d) { resultEl.textContent = '❌ sync failed'; return; }
+        const r = d.results || {};
+        resultEl.innerHTML = Object.entries(r).map(([k, v]) =>
+            `${v ? '✅' : '⏭️'} ${k}`
+        ).join(' &nbsp; ');
+    } catch (e) { resultEl.textContent = '❌ ' + e.message; }
+}
+
+export async function installMcpGlobal() {
+    const resultEl = document.getElementById('mcpSyncResult');
+    resultEl.style.display = 'block';
+    resultEl.textContent = t('mcp.installing');
+    try {
+        const d = await apiJson('/api/mcp/install', 'POST', {});
+        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>${k}</b>: ${v.status}${v.bin ? ' → ' + v.bin : ''}`;
+        }).join('<br>');
+        loadMcpServers();
+    } catch (e) { resultEl.textContent = '❌ ' + e.message; }
+}
+
+export async function updateSettings() {
+    const s = {
+        cli: document.getElementById('selCli').value,
+        workingDir: document.getElementById('inpCwd').value,
+    };
+    document.getElementById('headerCli').textContent = s.cli;
+    await apiJson('/api/settings', 'PUT', s);
+}
+
+export function setPerm(p, save = true) {
+    document.getElementById('permSafe').classList.toggle('active', p === 'safe');
+    document.getElementById('permAuto').classList.toggle('active', p === 'auto');
+    if (save) apiFire('/api/settings', 'PUT', { permissions: p });
+}
+
+export function getModelValue(cli) {
+    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, selectEl) {
+    const customInput = getCustomModelInput(cli);
+    if (!customInput) return;
+    if (selectEl.value === '__custom__') {
+        customInput.style.display = 'block';
+        customInput.focus();
+    } else {
+        customInput.style.display = 'none';
+        savePerCli();
+    }
+}
+
+export function applyCustomModel(cli, inputEl) {
+    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';
+    savePerCli();
+}
+
+export async function savePerCli() {
+    const perCli = {};
+    for (const cli of getCliKeys()) {
+        const modelEl = getModelSelect(cli);
+        if (!modelEl) continue;
+        const effortEl = getEffortSelect(cli);
+        perCli[cli] = {
+            model: getModelValue(cli),
+            effort: effortEl ? effortEl.value : '',
+        };
+    }
+    await apiJson('/api/settings', 'PUT', { perCli });
+}
+
+export function onCliChange(save = true) {
+    const cli = document.getElementById('selCli').value;
+    const models = MODEL_MAP[cli] || [];
+    const modelSel = document.getElementById('selModel');
+    setSelectOptions(modelSel, models, { includeCustom: true, includeDefault: true });
+    document.getElementById('headerCli').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.value.trim();
+        if (!val) return;
+        appendCustomOption(modelSel, val);
+        modelSel.value = val;
+        this.style.display = 'none';
+        saveActiveCliSettings();
+    };
+    modelSel.parentElement.appendChild(inp);
+    modelSel.onchange = function () {
+        if (this.value === '__custom__') {
+            inp.style.display = 'block';
+            inp.focus();
+        } else {
+            inp.style.display = 'none';
+            saveActiveCliSettings();
+        }
+    };
+
+    api('/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) {
+            appendCustomOption(modelSel, model);
+            modelSel.value = model;
+        }
+        syncActiveEffortOptions(cli, effort);
+    });
+
+    if (save) updateSettings();
+}
+
+export async function saveActiveCliSettings() {
+    const cli = document.getElementById('selCli').value;
+    const modelSel = document.getElementById('selModel');
+    let model = modelSel?.value || 'default';
+    if (model === '__custom__') {
+        model = document.getElementById('selModelCustom')?.value?.trim() || 'default';
+    }
+    const effortEl = document.getElementById('selEffort');
+    const overrides = {};
+    overrides[cli] = { model };
+    if (!effortEl?.disabled) overrides[cli].effort = effortEl?.value || '';
+    await apiJson('/api/settings', 'PUT', { activeOverrides: overrides });
+}
+
+// ── Telegram ──
+export async function saveTelegramSettings() {
+    const token = document.getElementById('tgToken').value.trim();
+    const chatIdsRaw = document.getElementById('tgChatIds').value.trim();
+    const allowedChatIds = chatIdsRaw
+        ? chatIdsRaw.split(',').map(s => parseInt(s.trim(), 10)).filter(n => !isNaN(n))
+        : [];
+    await apiJson('/api/settings', 'PUT', { telegram: { token, allowedChatIds } });
+}
+
+export async function setTelegram(enabled) {
+    document.getElementById('tgOn').classList.toggle('active', enabled);
+    document.getElementById('tgOff').classList.toggle('active', !enabled);
+    await apiJson('/api/settings', 'PUT', { telegram: { enabled } });
+}
+
+function loadTelegramSettings(s) {
+    if (!s.telegram) return;
+    const tg = s.telegram;
+    document.getElementById('tgOn').classList.toggle('active', !!tg.enabled);
+    document.getElementById('tgOff').classList.toggle('active', !tg.enabled);
+    if (tg.token) document.getElementById('tgToken').value = tg.token;
+    if (tg.allowedChatIds?.length) {
+        document.getElementById('tgChatIds').value = tg.allowedChatIds.join(', ');
+    }
+}
+
+// ── Fallback Order ──
+export function loadFallbackOrder(s) {
+    const container = document.getElementById('fallbackOrderList');
+    if (!container) return;
+    const allClis = Object.keys(s.perCli || {});
+    const active = s.fallbackOrder || [];
+    const slotCount = Math.min(allClis.length - 1, 3);
+
+    let html = '';
+    for (let i = 0; i < slotCount; i++) {
+        const current = active[i] || '';
+        const opts = allClis.map(cli =>
+            `<option value="${cli}" ${cli === current ? 'selected' : ''}>${cli}</option>`
+        ).join('');
+        html += `
+            <div class="settings-row sub-row">
+                <label style="min-width:60px">Fallback ${i + 1}</label>
+                <select id="fallback${i}"
+                    style="font-size:11px;padding:4px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:4px;flex:1">
+                    <option value="">${t('settings.none')}</option>
+                    ${opts}
+                </select>
+            </div>`;
+    }
+    container.innerHTML = html;
+}
+
+export async function saveFallbackOrder() {
+    const selects = document.querySelectorAll('#fallbackOrderList select');
+    const fallbackOrder = [...selects].map(s => s.value).filter(Boolean);
+    await apiJson('/api/settings', 'PUT', { fallbackOrder });
+}
+
+// ── CLI Status ──
+import { state } from '../state.js';
+
+export async function loadCliStatus(force = false) {
+    const interval = Number(localStorage.getItem('cliStatusInterval') || 300);
+    if (!force && state.cliStatusCache && interval > 0 && (Date.now() - state.cliStatusTs) < interval * 1000) {
+        renderCliStatus(state.cliStatusCache);
+        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('/api/cli-status'),
+        api('/api/quota'),
+    ]);
+
+    state.cliStatusCache = { cliStatus, quota };
+    state.cliStatusTs = Date.now();
+    renderCliStatus(state.cliStatusCache);
+}
+
+function renderCliStatus(data) {
+    const { cliStatus, quota } = data;
+    const el = document.getElementById('cliStatusList');
+
+    const AUTH_HINTS = {
+        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: 'gh copilot --help', auth: '1) gh auth login → 2) gh copilot --help → 3) copilot 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];
+        const dotClass = info.available ? 'ok' : 'missing';
+
+        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>`;
+        }
+
+        // Auth hint when CLI is not available
+        let authHint = '';
+        if (!info.available) {
+            const hint = AUTH_HINTS[name];
+            if (hint) {
+                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 #fbbf24">
+                        <div style="color:#fbbf24;margin-bottom:3px">${t('cli.authRequired')}</div>
+                        <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);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';
+                return `
+                    <div style="display:flex;align-items:center;gap:6px;margin-left:16px;font-size:10px;color:var(--text-dim)">
+                        <span style="width:42px">${w.label}</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:28px;text-align:right">${pct}%</span>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        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">${name}</span>
+                </div>
+                ${accountLine}
+                ${authHint}
+                ${windowsHtml}
+            </div>
+        `;
+    }
+
+    el.innerHTML = html;
+}
+
+// ── Prompt Modal ──
+export function openPromptModal() {
+    api('/api/prompt').then(data => {
+        if (!data) return;
+        document.getElementById('modalPromptEditor').value = data.content || '';
+        document.getElementById('promptModal').classList.add('open');
+    });
+}
+
+export function closePromptModal(e) {
+    if (e && e.target !== e.currentTarget) return;
+    document.getElementById('promptModal').classList.remove('open');
+}
+
+export async function savePromptFromModal() {
+    const content = document.getElementById('modalPromptEditor').value;
+    await apiJson('/api/prompt', 'PUT', { content });
+    document.getElementById('promptModal').classList.remove('open');
+}

package/public/js/features/sidebar.js

@@ -0,0 +1,88 @@
+// ── Sidebar Collapse ──
+// Toggle left/right sidebars. Responsive-aware:
+// - Wide viewport (>900px): toggle *-collapsed classes
+// - Narrow viewport (≤900px): CSS auto-collapses, toggle *-expanded to override
+
+const STORAGE_KEY = 'sidebarState';
+const BREAKPOINT = 900;
+
+export function initSidebar() {
+    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+    if (saved.left) document.body.classList.add('left-collapsed');
+    if (saved.right) document.body.classList.add('right-collapsed');
+
+    document.getElementById('toggleLeft')?.addEventListener('click', toggleLeft);
+    document.getElementById('toggleRight')?.addEventListener('click', toggleRight);
+
+    // On resize: sync classes with viewport mode
+    window.addEventListener('resize', () => {
+        if (window.innerWidth > BREAKPOINT) {
+            // Wide: remove expanded, restore collapsed from storage
+            document.body.classList.remove('left-expanded', 'right-expanded');
+            const s = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+            document.body.classList.toggle('left-collapsed', !!s.left);
+            document.body.classList.toggle('right-collapsed', !!s.right);
+        } else {
+            // Narrow: suspend collapsed (CSS media query handles auto-collapse)
+            document.body.classList.remove('left-collapsed', 'right-collapsed');
+        }
+        syncIcons();
+    });
+
+    // If starting narrow, suspend collapsed
+    if (window.innerWidth <= BREAKPOINT) {
+        document.body.classList.remove('left-collapsed', 'right-collapsed');
+    }
+
+    syncIcons();
+}
+
+function isNarrow() {
+    return window.innerWidth <= BREAKPOINT;
+}
+
+export function toggleLeft() {
+    if (isNarrow()) {
+        // Narrow mode: toggle expanded override
+        document.body.classList.toggle('left-expanded');
+    } else {
+        // Wide mode: toggle collapsed
+        document.body.classList.toggle('left-collapsed');
+    }
+    save();
+    syncIcons();
+}
+
+export function toggleRight() {
+    if (isNarrow()) {
+        document.body.classList.toggle('right-expanded');
+    } else {
+        document.body.classList.toggle('right-collapsed');
+    }
+    save();
+    syncIcons();
+}
+
+function isLeftOpen() {
+    if (isNarrow()) return document.body.classList.contains('left-expanded');
+    return !document.body.classList.contains('left-collapsed');
+}
+
+function isRightOpen() {
+    if (isNarrow()) return document.body.classList.contains('right-expanded');
+    return !document.body.classList.contains('right-collapsed');
+}
+
+function syncIcons() {
+    const leftBtn = document.getElementById('toggleLeft');
+    const rightBtn = document.getElementById('toggleRight');
+    if (leftBtn) leftBtn.textContent = isLeftOpen() ? '◀' : '▶';
+    if (rightBtn) rightBtn.textContent = isRightOpen() ? '▶' : '◀';
+}
+
+function save() {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        left: document.body.classList.contains('left-collapsed'),
+        right: document.body.classList.contains('right-collapsed'),
+    }));
+}