cli-jaw 0.1.0

package/public/js/features/skills.js

@@ -0,0 +1,68 @@
+// ── Skills Feature ──
+import { state } from '../state.js';
+import { t, fetchWithLocale } from './i18n.js';
+import { apiJson } from '../api.js';
+import { escapeHtml } from '../render.js';
+
+export async function loadSkills() {
+    try {
+        const res = await fetchWithLocale('/api/skills');
+        state.allSkills = await res.json();
+        renderSkills();
+    } catch (e) {
+        document.getElementById('skillsList').innerHTML =
+            `<div style="color:var(--text-dim);font-size:11px">${t('skill.loadFail')}</div>`;
+    }
+}
+
+const KNOWN_CATS = ['productivity', 'communication', 'devtools', 'ai-media', 'utility', 'smarthome', 'automation'];
+
+export function renderSkills() {
+    const list = document.getElementById('skillsList');
+    const count = document.getElementById('skillsCount');
+    let filtered = state.allSkills;
+    if (state.currentSkillFilter === 'installed') {
+        filtered = state.allSkills.filter(s => s.enabled);
+    } else if (state.currentSkillFilter === 'other') {
+        filtered = state.allSkills.filter(s => !KNOWN_CATS.includes(s.category));
+    } else if (state.currentSkillFilter !== 'all') {
+        filtered = state.allSkills.filter(s => s.category === state.currentSkillFilter);
+    }
+    const enabledCount = state.allSkills.filter(s => s.enabled).length;
+    count.textContent = t('skill.count', { active: enabledCount, total: state.allSkills.length });
+
+    list.innerHTML = filtered.map(s => {
+        const reqParts = [];
+        if (s.requires?.env) reqParts.push('🔑 ' + s.requires.env.join(', '));
+        if (s.requires?.bins) reqParts.push('⚙️ ' + s.requires.bins.join(', '));
+        if (s.install) reqParts.push(s.install);
+        return `
+        <div class="skill-card ${s.enabled ? 'enabled' : ''}">
+            <div class="skill-card-header">
+                <span class="skill-emoji">${escapeHtml(s.emoji || '🔧')}</span>
+                <span class="skill-name">${escapeHtml(s.name || s.id)}</span>
+                <button class="skill-toggle ${s.enabled ? 'on' : 'off'}"
+                        data-skill-id="${escapeHtml(s.id)}" data-skill-enabled="${s.enabled}"></button>
+            </div>
+            <div class="skill-desc">${escapeHtml(s.description || '')}</div>
+            ${reqParts.length ? `<div class="skill-req">${reqParts.join(' · ')}</div>` : ''}
+        </div>`;
+    }).join('');
+}
+
+export async function toggleSkill(id, currentlyEnabled) {
+    const endpoint = currentlyEnabled ? '/api/skills/disable' : '/api/skills/enable';
+    try {
+        await apiJson(endpoint, 'POST', { id });
+        await loadSkills();
+    } catch (e) {
+        console.error('toggleSkill error:', e);
+    }
+}
+
+export function filterSkills(cat, btn) {
+    state.currentSkillFilter = cat;
+    document.querySelectorAll('.skill-filter').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    renderSkills();
+}

package/public/js/features/slash-commands.js

@@ -0,0 +1,231 @@
+// ── Slash Command Dropdown ──
+import { getPreferredLocale } from '../locale.js';
+import { t } from './i18n.js';
+import { api } from '../api.js';
+
+let cmdList = [];       // { name, desc, args, category }[]
+let filtered = [];      // currently filtered list
+let selectedIdx = -1;   // -1 = none
+let isOpen = false;
+let closeTimer = null;
+
+// File paths like /Users/junny/... or /tmp/foo — not commands
+function looksLikeFilePath(text) {
+    const after = String(text || '').slice(1).trim();
+    const tok = after.split(/\s+/)[0] || '';
+    return tok.includes('/') || tok.includes('\\');
+}
+
+const dropdown = () => document.getElementById('cmdDropdown');
+const input = () => document.getElementById('chatInput');
+
+function escapeHtml(str) {
+    return String(str || '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+function filterCommands(partial) {
+    const prefix = String(partial || '').toLowerCase();
+    return cmdList.filter(c => (`/${c.name}`).startsWith(prefix));
+}
+
+function showDropdown() {
+    const el = dropdown();
+    const inp = input();
+    if (!el || !inp) return;
+
+    if (closeTimer) {
+        clearTimeout(closeTimer);
+        closeTimer = null;
+    }
+
+    el.style.display = 'block';
+    requestAnimationFrame(() => el.classList.add('visible'));
+    isOpen = true;
+
+    inp.setAttribute('aria-expanded', 'true');
+}
+
+function render() {
+    const el = dropdown();
+    const inp = input();
+    if (!el || !inp) return;
+
+    if (!filtered.length) {
+        if (!inp.value.startsWith('/') || looksLikeFilePath(inp.value)) { close(); return; }
+
+        el.innerHTML = `
+            <div class="cmd-item cmd-empty" role="option" aria-disabled="true">
+                ${t('cmd.noMatch')}
+            </div>
+        `;
+        showDropdown();
+        inp.setAttribute('aria-activedescendant', '');
+        return;
+    }
+
+    el.innerHTML = filtered.map((cmd, i) => {
+        const selected = i === selectedIdx;
+        return `<div class="cmd-item${selected ? ' selected' : ''}"
+                     role="option"
+                     id="cmd-item-${i}"
+                     aria-selected="${selected}"
+                     data-index="${i}">
+            <span class="cmd-name">/${escapeHtml(cmd.name)}</span>
+            <span class="cmd-desc">${escapeHtml(cmd.desc)}</span>
+            ${cmd.args ? `<span class="cmd-args">${escapeHtml(cmd.args)}</span>` : ''}
+        </div>`;
+    }).join('');
+
+    showDropdown();
+    inp.setAttribute('aria-activedescendant', selectedIdx >= 0 ? `cmd-item-${selectedIdx}` : '');
+
+    const selected = el.querySelector('.selected');
+    if (selected) selected.scrollIntoView({ block: 'nearest' });
+}
+
+function applySelection(execute) {
+    const cmd = filtered[selectedIdx];
+    const inp = input();
+    if (!cmd || !inp) { close(); return; }
+
+    close();
+    if (cmd.args || !execute) {
+        inp.value = `/${cmd.name} `;
+        inp.focus();
+        inp.selectionStart = inp.selectionEnd = inp.value.length;
+        return;
+    }
+
+    inp.value = `/${cmd.name}`;
+    inp.dispatchEvent(new Event('cmd-execute', { bubbles: true }));
+}
+
+export async function loadCommands() {
+    try {
+        const locale = getPreferredLocale();
+        const url = `/api/commands?interface=web&locale=${encodeURIComponent(locale)}`;
+        const data = await api(url, { headers: { 'Accept-Language': locale } });
+        cmdList = data || [];
+    } catch (err) {
+        console.warn('[slash-commands] loadCommands failed:', err.message);
+        cmdList = [];
+    }
+}
+
+export function close() {
+    const el = dropdown();
+
+    if (closeTimer) {
+        clearTimeout(closeTimer);
+        closeTimer = null;
+    }
+    if (el) {
+        el.classList.remove('visible');
+        closeTimer = setTimeout(() => {
+            if (el.classList.contains('visible')) return;
+            el.style.display = 'none';
+            el.innerHTML = '';
+        }, 150);
+    }
+
+    isOpen = false;
+    selectedIdx = -1;
+    filtered = [];
+
+    const inp = input();
+    if (inp) {
+        inp.setAttribute('aria-expanded', 'false');
+        inp.setAttribute('aria-activedescendant', '');
+    }
+}
+
+export function update(text) {
+    const raw = String(text || '');
+    if (!raw.startsWith('/') || raw.includes(' ') || raw.includes('\n') || looksLikeFilePath(raw)) {
+        close();
+        return;
+    }
+
+    filtered = filterCommands(raw);
+    selectedIdx = filtered.length ? 0 : -1;
+    render();
+}
+
+export function handleKeydown(e) {
+    if (!isOpen) {
+        if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !e.isComposing) {
+            update(input()?.value || '');
+            if (!isOpen) return false;
+            selectedIdx = e.key === 'ArrowUp' ? filtered.length - 1 : 0;
+            render();
+            e.preventDefault();
+            return true;
+        }
+        return false;
+    }
+
+    if (!filtered.length) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            close();
+            return true;
+        }
+        return false;
+    }
+
+    if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        selectedIdx = Math.min(filtered.length - 1, selectedIdx + 1);
+        render();
+        return true;
+    }
+    if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        selectedIdx = Math.max(0, selectedIdx - 1);
+        render();
+        return true;
+    }
+    if (e.key === 'Tab') {
+        e.preventDefault();
+        applySelection(false);
+        return true;
+    }
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+        e.preventDefault();
+        applySelection(true);
+        return true;
+    }
+    if (e.key === 'Escape') {
+        e.preventDefault();
+        close();
+        return true;
+    }
+    return false;
+}
+
+export function handleClick(e) {
+    const item = e.target.closest('.cmd-item');
+    if (!item) return;
+    const idx = parseInt(item.dataset.index || '-1', 10);
+    if (Number.isNaN(idx) || idx < 0) return;
+    selectedIdx = Math.min(idx, filtered.length - 1);
+    applySelection(true);
+}
+
+export function handleOutsideClick(e) {
+    if (!isOpen) return;
+    const el = dropdown();
+    const inp = input();
+    if (!el || !inp) return;
+    if (!el.contains(e.target) && e.target !== inp) {
+        close();
+    }
+}
+
+export function isDropdownOpen() {
+    return isOpen;
+}

package/public/js/features/theme.js

@@ -0,0 +1,40 @@
+// ── Theme Toggle ──
+// Dark/Light theme switching with localStorage persistence
+// Swaps CSS data-theme attribute + highlight.js stylesheet
+
+const STORAGE_KEY = 'theme';
+const HLJS_DARK = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css';
+const HLJS_LIGHT = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css';
+
+export function initTheme() {
+    // Detect: localStorage → OS preference → default dark
+    const saved = localStorage.getItem(STORAGE_KEY);
+    const prefer = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    const theme = saved || prefer;
+    applyTheme(theme);
+
+    document.getElementById('toggleTheme')?.addEventListener('click', toggleTheme);
+}
+
+function toggleTheme() {
+    const current = document.documentElement.getAttribute('data-theme') || 'dark';
+    const next = current === 'dark' ? 'light' : 'dark';
+    applyTheme(next);
+    localStorage.setItem(STORAGE_KEY, next);
+}
+
+function applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+
+    // Update button icon (SVG sun/moon swap)
+    const btn = document.getElementById('toggleTheme');
+    if (btn) {
+        btn.classList.toggle('is-light', theme === 'light');
+    }
+
+    // Swap highlight.js theme
+    const hljsLink = document.getElementById('hljsTheme');
+    if (hljsLink) {
+        hljsLink.href = theme === 'dark' ? HLJS_DARK : HLJS_LIGHT;
+    }
+}

package/public/js/locale.js

@@ -0,0 +1,23 @@
+// ── Web Locale Helpers ──
+
+const LOCALE_KEYS = ['claw_locale', 'claw.locale'];
+
+export function getPreferredLocale() {
+    try {
+        for (const key of LOCALE_KEYS) {
+            const saved = localStorage.getItem(key);
+            if (saved) return saved;
+        }
+    } catch { }
+    return navigator.language || 'ko';
+}
+
+export function syncStoredLocale(locale) {
+    const value = String(locale || '').trim();
+    if (!value) return;
+    try {
+        for (const key of LOCALE_KEYS) {
+            localStorage.setItem(key, value);
+        }
+    } catch { }
+}

package/public/js/main.js

@@ -0,0 +1,281 @@
+// ── App Entry Point ──
+// All event bindings happen here (no inline onclick in HTML)
+
+// ── Global Error Boundary ──
+window.addEventListener('unhandledrejection', (e) => {
+    console.error('[unhandled]', e.reason);
+    e.preventDefault();
+});
+window.addEventListener('error', (e) => {
+    console.error('[error]', e.message, e.filename, e.lineno);
+});
+
+import { connect } from './ws.js';
+import { switchTab, handleSave, loadStats, loadMessages, loadMemory, initMsgCopy } from './ui.js';
+import { sendMessage, handleKey, clearAttachedFiles, removeAttachedFile, clearChat, initDragDrop, initAutoResize } from './features/chat.js';
+import {
+    loadCommands, update as updateSlashDropdown, handleKeydown as handleSlashKeydown,
+    handleClick as handleSlashClick, handleOutsideClick as handleSlashOutsideClick,
+} from './features/slash-commands.js';
+import { loadSkills, toggleSkill, filterSkills } from './features/skills.js';
+import {
+    loadSettings, setPerm, handleModelSelect, applyCustomModel, onCliChange,
+    saveActiveCliSettings, savePerCli, updateSettings, openPromptModal,
+    closePromptModal, savePromptFromModal, syncMcpServers, installMcpGlobal,
+    loadCliStatus, setTelegram, saveTelegramSettings, saveFallbackOrder
+} from './features/settings.js';
+import {
+    loadEmployees, addEmployee, deleteEmployee, updateEmployee,
+    onEmpCliChange, onEmpRoleChange
+} from './features/employees.js';
+import {
+    openHeartbeatModal, closeHeartbeatModal, addHeartbeatJob,
+    removeHeartbeatJob, toggleHeartbeatJob, saveHeartbeatJobs,
+    initHeartbeatBadge
+} from './features/heartbeat.js';
+import {
+    openMemoryModal, closeMemoryModal, switchMemTab, setMemEnabled,
+    saveMemSettings, deleteMemFile, viewMemFile
+} from './features/memory.js';
+import { state } from './state.js';
+import { loadCliRegistry, getCliKeys } from './constants.js';
+import { initAppName } from './features/appname.js';
+import { initSidebar, toggleLeft, toggleRight } from './features/sidebar.js';
+import { initTheme } from './features/theme.js';
+import { initI18n, setLang, getLang, t } from './features/i18n.js';
+
+// ── Chat Actions ──
+document.getElementById('btnSend').addEventListener('click', sendMessage);
+const chatInput = document.getElementById('chatInput');
+chatInput.addEventListener('keydown', (e) => {
+    if (handleSlashKeydown(e)) return;
+    handleKey(e);
+});
+let slashInputRaf = 0;
+chatInput.addEventListener('input', (e) => {
+    if (e.isComposing) return;
+    if (slashInputRaf) cancelAnimationFrame(slashInputRaf);
+    slashInputRaf = requestAnimationFrame(() => {
+        updateSlashDropdown(e.target.value);
+        slashInputRaf = 0;
+    });
+});
+chatInput.addEventListener('cmd-execute', () => {
+    void sendMessage();
+});
+document.getElementById('cmdDropdown')?.addEventListener('click', handleSlashClick);
+document.addEventListener('click', handleSlashOutsideClick);
+document.getElementById('filePreviewClear').addEventListener('click', clearAttachedFiles);
+document.getElementById('filePreviewList').addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-file-idx]');
+    if (btn) removeAttachedFile(+btn.dataset.fileIdx);
+});
+document.querySelector('.btn-attach').addEventListener('click', () => {
+    document.getElementById('fileInput').click();
+});
+
+// ── Left Sidebar ──
+document.getElementById('memorySidebarBtn').addEventListener('click', openMemoryModal);
+document.getElementById('btnClearChat').addEventListener('click', clearChat);
+document.getElementById('hbSidebarBtn').addEventListener('click', openHeartbeatModal);
+
+// Language toggle
+document.getElementById('langToggle')?.addEventListener('click', async () => {
+    const next = getLang() === 'ko' ? 'en' : 'ko';
+    await setLang(next);
+    const btn = document.getElementById('langToggle');
+    if (btn) btn.textContent = `🌐 ${t('lang.' + next)}`;
+    // Reconnect WS with new locale
+    if (state.ws) { state.ws.close(); }
+});
+
+// ── Tab Bar (event delegation) ──
+document.querySelector('.tab-bar').addEventListener('click', (e) => {
+    const btn = e.target.closest('.tab-btn');
+    if (!btn) return;
+    const tabs = [...btn.parentElement.children].filter(c => c.classList.contains('tab-btn'));
+    const idx = tabs.indexOf(btn);
+    const names = ['agents', 'skills', 'settings'];
+    if (names[idx]) switchTab(names[idx], btn);
+});
+
+// ── Save Button ──
+document.querySelector('.sidebar-save-bar .btn-save').addEventListener('click', handleSave);
+
+// ── Agents Tab ──
+document.getElementById('selCli').addEventListener('change', () => onCliChange());
+document.getElementById('selModel').addEventListener('change', () => saveActiveCliSettings());
+document.getElementById('selEffort').addEventListener('change', () => saveActiveCliSettings());
+document.getElementById('permSafe').addEventListener('click', () => setPerm('safe'));
+document.getElementById('permAuto').addEventListener('click', () => setPerm('auto'));
+document.getElementById('inpCwd').addEventListener('change', updateSettings);
+document.querySelector('[data-action="addEmployee"]').addEventListener('click', addEmployee);
+
+// ── Employees (Event Delegation) ──
+document.getElementById('employeesList').addEventListener('click', (e) => {
+    const del = e.target.closest('[data-emp-delete]');
+    if (del) { deleteEmployee(del.dataset.empDelete); return; }
+});
+document.getElementById('employeesList').addEventListener('change', (e) => {
+    const name = e.target.closest('[data-emp-name]');
+    if (name) { updateEmployee(name.dataset.empName, { name: e.target.value }); return; }
+    const cli = e.target.closest('[data-emp-cli]');
+    if (cli) { onEmpCliChange(cli.dataset.empCli, e.target.value); return; }
+    const model = e.target.closest('[data-emp-model]');
+    if (model) {
+        if (e.target.value === '__custom__') {
+            const val = prompt(t('model.promptInput'));
+            if (val?.trim()) {
+                const opt = document.createElement('option');
+                opt.value = val.trim(); opt.textContent = val.trim();
+                const customOpt = e.target.querySelector('option[value="__custom__"]');
+                e.target.insertBefore(opt, customOpt);
+                e.target.value = val.trim();
+                updateEmployee(model.dataset.empModel, { model: val.trim() });
+            } else { e.target.value = 'default'; }
+        } else { updateEmployee(model.dataset.empModel, { model: e.target.value }); }
+        return;
+    }
+    const role = e.target.closest('[data-emp-role]');
+    if (role) { onEmpRoleChange(role.dataset.empRole, e.target.value); return; }
+    const custom = e.target.closest('[data-emp-custom]');
+    if (custom) { updateEmployee(custom.dataset.empCustom, { role: e.target.value }); return; }
+});
+
+// ── Skills Tab (Event Delegation) ──
+document.getElementById('skillsList').addEventListener('click', (e) => {
+    const toggle = e.target.closest('[data-skill-id]');
+    if (toggle) {
+        toggleSkill(toggle.dataset.skillId, toggle.dataset.skillEnabled === 'true');
+    }
+});
+// Skill filter buttons (event delegation)
+document.querySelector('#tabSkills').addEventListener('click', (e) => {
+    const filterBtn = e.target.closest('.skill-filter');
+    if (filterBtn) {
+        const cat = filterBtn.dataset.filter;
+        filterSkills(cat, filterBtn);
+    }
+});
+
+// ── Settings Tab ──
+document.querySelector('[data-action="openPrompt"]').addEventListener('click', openPromptModal);
+document.getElementById('tgOff').addEventListener('click', () => setTelegram(false));
+document.getElementById('tgOn').addEventListener('click', () => setTelegram(true));
+document.getElementById('tgToken').addEventListener('change', saveTelegramSettings);
+document.getElementById('tgChatIds').addEventListener('change', saveTelegramSettings);
+document.getElementById('fallbackOrderList').addEventListener('change', saveFallbackOrder);
+
+// Per-CLI model selects
+function bindPerCliControlEvents() {
+    for (const cli of getCliKeys()) {
+        const cap = cli.charAt(0).toUpperCase() + cli.slice(1);
+        const sel = document.getElementById('model' + cap);
+        if (sel) sel.addEventListener('change', function () { handleModelSelect(cli, this); });
+        const custom = document.getElementById('customModel' + cap);
+        if (custom) custom.addEventListener('change', function () { applyCustomModel(cli, this); });
+        const effort = document.getElementById('effort' + cap);
+        if (effort) effort.addEventListener('change', savePerCli);
+    }
+}
+
+// MCP
+document.querySelector('[data-action="syncMcp"]').addEventListener('click', syncMcpServers);
+document.querySelector('[data-action="installMcp"]').addEventListener('click', installMcpGlobal);
+document.querySelector('[data-action="refreshCli"]').addEventListener('click', () => loadCliStatus(true));
+document.getElementById('cliStatusInterval').addEventListener('change', function () {
+    localStorage.setItem('cliStatusInterval', this.value);
+});
+
+// ── Prompt Modal ──
+document.getElementById('promptModal').addEventListener('click', (e) => closePromptModal(e));
+document.querySelector('#promptModal .modal-box').addEventListener('click', (e) => e.stopPropagation());
+document.querySelector('[data-action="closePrompt"]').addEventListener('click', () => closePromptModal());
+document.querySelector('[data-action="cancelPrompt"]').addEventListener('click', () => closePromptModal());
+document.querySelector('[data-action="savePrompt"]').addEventListener('click', savePromptFromModal);
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePromptModal(); });
+
+// ── Heartbeat Modal ──
+document.getElementById('heartbeatModal').addEventListener('click', (e) => closeHeartbeatModal(e));
+document.querySelector('#heartbeatModal .modal-box').addEventListener('click', (e) => e.stopPropagation());
+document.querySelector('[data-action="closeHeartbeat"]').addEventListener('click', () => closeHeartbeatModal());
+document.querySelector('[data-action="addHeartbeat"]').addEventListener('click', addHeartbeatJob);
+
+// Heartbeat jobs (event delegation)
+document.getElementById('hbJobsList').addEventListener('click', (e) => {
+    const toggle = e.target.closest('[data-hb-toggle]');
+    if (toggle) { toggleHeartbeatJob(+toggle.dataset.hbToggle); return; }
+    const remove = e.target.closest('[data-hb-remove]');
+    if (remove) { removeHeartbeatJob(+remove.dataset.hbRemove); return; }
+});
+document.getElementById('hbJobsList').addEventListener('change', (e) => {
+    const name = e.target.closest('[data-hb-name]');
+    if (name) { state.heartbeatJobs[+name.dataset.hbName].name = e.target.value; saveHeartbeatJobs(); return; }
+    const min = e.target.closest('[data-hb-minutes]');
+    if (min) { state.heartbeatJobs[+min.dataset.hbMinutes].schedule = { kind: 'every', minutes: +e.target.value }; saveHeartbeatJobs(); return; }
+    const prompt = e.target.closest('[data-hb-prompt]');
+    if (prompt) { state.heartbeatJobs[+prompt.dataset.hbPrompt].prompt = e.target.value; saveHeartbeatJobs(); return; }
+});
+
+// ── Memory Modal ──
+document.getElementById('memoryModal').addEventListener('click', (e) => closeMemoryModal(e));
+document.querySelector('#memoryModal .modal-box').addEventListener('click', (e) => e.stopPropagation());
+document.querySelector('[data-action="closeMemory"]').addEventListener('click', () => closeMemoryModal());
+document.getElementById('memTabBtnSettings').addEventListener('click', () => switchMemTab('settings'));
+document.getElementById('memTabBtnFiles').addEventListener('click', () => switchMemTab('files'));
+document.getElementById('memOn').addEventListener('click', () => setMemEnabled(true));
+document.getElementById('memOff').addEventListener('click', () => setMemEnabled(false));
+document.getElementById('memFlushEvery').addEventListener('change', saveMemSettings);
+document.getElementById('memCli').addEventListener('change', saveMemSettings);
+document.getElementById('memModel').addEventListener('change', saveMemSettings);
+document.getElementById('memRetention').addEventListener('change', saveMemSettings);
+
+// Memory files (event delegation)
+document.getElementById('memFilesList').addEventListener('click', (e) => {
+    const del = e.target.closest('[data-mem-delete]');
+    if (del) { e.stopPropagation(); deleteMemFile(del.dataset.memDelete); return; }
+    const view = e.target.closest('[data-mem-view]');
+    if (view) { viewMemFile(view.dataset.memView); return; }
+    const back = e.target.closest('[data-mem-back]');
+    if (back) { openMemoryModal(); return; }
+});
+
+// ── Init ──
+async function bootstrap() {
+    await initI18n();
+    const langBtn = document.getElementById('langToggle');
+    if (langBtn) langBtn.textContent = `🌐 ${t('lang.' + getLang())}`;
+    await loadCliRegistry();
+    bindPerCliControlEvents();
+    connect();
+    initDragDrop();
+    initAutoResize();
+    await loadCommands();
+    await loadSettings();
+    loadCliStatus();
+    loadMemory();
+    // loadMessages() is handled by ws.js onopen (clear + reload)
+    loadEmployees();
+    initHeartbeatBadge();
+    initAppName();
+    initSidebar();
+    initTheme();
+    initMsgCopy();
+}
+
+void bootstrap().catch((err) => {
+    console.error('[bootstrap]', err);
+});
+
+// ── Keyboard: Escape closes modals ──────────────────
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        document.querySelectorAll('.modal-overlay.open').forEach(m => {
+            m.classList.remove('open');
+        });
+    }
+});
+
+// ── Mobile sidebar toggle (sidebar.js functions reuse) ──
+document.getElementById('mobileMenuLeft')?.addEventListener('click', toggleLeft);
+document.getElementById('mobileMenuRight')?.addEventListener('click', toggleRight);