cli-jaw 0.1.0

package/public/js/features/appname.js

@@ -0,0 +1,43 @@
+// ── Agent Name Customization ──
+// localStorage-based agent display name (message label only)
+// Logo, header, title remain "CLI-JAW" (immutable)
+
+const STORAGE_KEY = 'agentName';
+const DEFAULT_NAME = 'CLI-JAW';
+
+let currentName = DEFAULT_NAME;
+
+export function getAppName() {
+    return currentName;
+}
+
+export function setAppName(name) {
+    currentName = (name || '').trim() || DEFAULT_NAME;
+    localStorage.setItem(STORAGE_KEY, currentName);
+    // Update input field
+    const input = document.getElementById('appNameInput');
+    if (input) input.value = currentName;
+}
+
+export function initAppName() {
+    currentName = localStorage.getItem(STORAGE_KEY) || DEFAULT_NAME;
+
+    // Sync input
+    const input = document.getElementById('appNameInput');
+    if (input) input.value = currentName;
+
+    // Save button
+    document.getElementById('appNameSave')?.addEventListener('click', () => {
+        const inp = document.getElementById('appNameInput');
+        if (inp) setAppName(inp.value);
+    });
+
+    // Enter key
+    document.getElementById('appNameInput')?.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            setAppName(e.target.value);
+            e.target.blur();
+        }
+    });
+}

package/public/js/features/chat.js

@@ -0,0 +1,242 @@
+// ── Chat Feature ──
+import { state } from '../state.js';
+import { addMessage, addSystemMsg, scrollToBottom } from '../ui.js';
+import { getPreferredLocale } from '../locale.js';
+import { t } from './i18n.js';
+import * as slashCmd from './slash-commands.js';
+import { api, apiJson, apiFire } from '../api.js';
+
+export async function sendMessage() {
+    const input = document.getElementById('chatInput');
+    const btn = document.getElementById('btnSend');
+
+    // Stop mode: clicking ■ stops the agent
+    if (btn.classList.contains('stop-mode') && !input.value.trim() && !state.attachedFiles.length) {
+        apiFire('/api/stop', 'POST');
+        return;
+    }
+
+    const text = input.value.trim();
+    if (!text && !state.attachedFiles.length) return;
+
+    // File paths like /Users/junny/... or /tmp/foo — not commands
+    const afterSlash = text.slice(1).trim();
+    const firstToken = afterSlash.split(/\s+/)[0] || '';
+    const isFilePath = firstToken.includes('/') || firstToken.includes('\\');
+
+    if (text.startsWith('/') && !state.attachedFiles.length && !isFilePath) {
+        input.value = '';
+        resetInputHeight();
+        slashCmd.close();
+        try {
+            let signal, timer;
+            if (typeof AbortSignal?.timeout === 'function') {
+                signal = AbortSignal.timeout(10000);
+            } else {
+                const ac = new AbortController();
+                signal = ac.signal;
+                timer = setTimeout(() => ac.abort(), 10000);
+            }
+            const locale = getPreferredLocale();
+            const res = await fetch('/api/command', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept-Language': locale,
+                },
+                body: JSON.stringify({ text, locale }),
+                signal,
+            });
+            if (timer) clearTimeout(timer);
+            const result = await res.json().catch(() => ({}));
+            // not_command → fall through to normal chat
+            if (result?.code === 'not_command') {
+                addMessage('user', text);
+                await apiJson('/api/message', 'POST', { prompt: text });
+                return;
+            }
+            if (!res.ok && !result?.text) throw new Error(`HTTP ${res.status}`);
+            if (result?.code === 'clear_screen') {
+                document.getElementById('chatMessages').innerHTML = '';
+            }
+            if (result?.text) addSystemMsg(result.text, '', result.type);
+        } catch (err) {
+            addSystemMsg(t('chat.cmd.fail', { msg: err.message }), '', 'error');
+        }
+        return;
+    }
+
+    if (state.attachedFiles.length) {
+        const names = state.attachedFiles.map(f => f.name).join(', ');
+        const displayMsg = `[📎 ${names}] ${text}`;
+        addMessage('user', displayMsg);
+        input.value = '';
+        resetInputHeight();
+        try {
+            // Upload all files in parallel
+            const paths = await Promise.all(state.attachedFiles.map(f => uploadFile(f)));
+            let prompt = paths.map(p => t('chat.file.sent', { path: p })).join('\n');
+            if (text) prompt += t('chat.file.sentWithMsg', { text });
+            clearAttachedFiles();
+            await apiJson('/api/message', 'POST', { prompt });
+        } catch (err) {
+            addSystemMsg(t('chat.file.uploadFail', { msg: err.message }));
+            clearAttachedFiles();
+        }
+    } else {
+        addMessage('user', text);
+        input.value = '';
+        resetInputHeight();
+        const res = await fetch('/api/message', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ prompt: text }),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+            addSystemMsg(`❌ ${data.error || t('chat.requestFail', { status: res.status })}`, '', 'error');
+            return;
+        }
+        if (data.queued) {
+            const { updateQueueBadge } = await import('../ui.js');
+            updateQueueBadge(data.pending || 1);
+        } else if (data.continued) {
+            addSystemMsg(t('chat.continue'));
+        }
+    }
+}
+
+export function handleKey(e) {
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); sendMessage(); }
+}
+
+async function uploadFile(file) {
+    const res = await fetch('/api/upload', {
+        method: 'POST',
+        headers: { 'X-Filename': encodeURIComponent(file.name) },
+        body: file,
+    });
+    if (!res.ok) throw new Error('upload failed');
+    const data = await res.json();
+    return data.path;
+}
+
+export function attachFiles(files) {
+    for (const file of files) {
+        // Skip duplicates by name
+        if (state.attachedFiles.some(f => f.name === file.name)) continue;
+        state.attachedFiles.push(file);
+    }
+    renderFilePreview();
+    document.getElementById('chatInput').focus();
+}
+
+export function removeAttachedFile(index) {
+    state.attachedFiles.splice(index, 1);
+    renderFilePreview();
+}
+
+export function clearAttachedFiles() {
+    state.attachedFiles = [];
+    renderFilePreview();
+    document.getElementById('fileInput').value = '';
+}
+
+function renderFilePreview() {
+    const preview = document.getElementById('filePreview');
+    const listEl = document.getElementById('filePreviewList');
+    if (!state.attachedFiles.length) {
+        preview.classList.remove('visible');
+        if (listEl) listEl.innerHTML = '';
+        return;
+    }
+    preview.classList.add('visible');
+    if (!listEl) return;
+    listEl.innerHTML = state.attachedFiles.map((f, i) => {
+        const size = (f.size / 1024).toFixed(1);
+        const isImg = f.type.startsWith('image/');
+        const thumb = isImg ? `<img src="${URL.createObjectURL(f)}" class="file-chip-thumb" alt="">` : '';
+        return `<div class="file-chip">
+            ${thumb}
+            <span class="file-chip-name">📎 ${f.name} (${size}KB)</span>
+            <button class="file-chip-remove" data-file-idx="${i}" title="Remove">✕</button>
+        </div>`;
+    }).join('');
+}
+
+export async function clearChat() {
+    apiFire('/api/clear', 'POST');
+    document.getElementById('chatMessages').innerHTML = '';
+}
+
+// ── Auto-resize textarea ──
+function autoResize(el) {
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+}
+
+export function initAutoResize() {
+    const el = document.getElementById('chatInput');
+    el.addEventListener('input', () => autoResize(el));
+}
+
+export function resetInputHeight() {
+    const el = document.getElementById('chatInput');
+    el.style.height = 'auto';
+}
+
+export function initDragDrop() {
+    const chatArea = document.querySelector('.chat-area');
+    const overlay = document.getElementById('dragOverlay');
+    let dragCounter = 0;
+
+    chatArea.addEventListener('dragenter', (e) => {
+        e.preventDefault();
+        dragCounter++;
+        overlay.classList.add('visible');
+    });
+    chatArea.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        dragCounter--;
+        if (dragCounter <= 0) { dragCounter = 0; overlay.classList.remove('visible'); }
+    });
+    chatArea.addEventListener('dragover', (e) => e.preventDefault());
+    chatArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dragCounter = 0;
+        overlay.classList.remove('visible');
+        const files = [...e.dataTransfer.files];
+        if (files.length) attachFiles(files);
+    });
+
+    document.getElementById('fileInput').addEventListener('change', (e) => {
+        const files = [...e.target.files];
+        if (files.length) attachFiles(files);
+        e.target.value = ''; // allow re-selecting same file
+    });
+
+    // ── Clipboard paste (Cmd+V) ──
+    document.addEventListener('paste', (e) => {
+        const items = e.clipboardData?.items;
+        if (!items) return;
+        const files = [];
+        for (const item of items) {
+            if (item.kind !== 'file') continue;
+            const blob = item.getAsFile();
+            if (!blob) continue;
+            // Pasted images often have no useful name; generate one
+            if (!blob.name || blob.name === 'image.png') {
+                const ts = new Date().toISOString().replace(/[:.]/g, '-');
+                const ext = blob.type.split('/')[1] || 'png';
+                const named = new File([blob], `pasted-${ts}.${ext}`, { type: blob.type });
+                files.push(named);
+            } else {
+                files.push(blob);
+            }
+        }
+        if (files.length) {
+            e.preventDefault();
+            attachFiles(files);
+        }
+    });
+}

package/public/js/features/employees.js

@@ -0,0 +1,120 @@
+// ── Employees Feature ──
+import { state } from '../state.js';
+import { MODEL_MAP, ROLE_PRESETS, getCliKeys } from '../constants.js';
+import { escapeHtml } from '../render.js';
+import { getAgentPhase } from '../ws.js';
+import { t } from './i18n.js';
+import { api, apiJson, apiFire } from '../api.js';
+
+export async function loadEmployees() {
+    const data = await api('/api/employees');
+    state.employees = data || [];
+    renderEmployees();
+}
+
+export function renderEmployees() {
+    const el = document.getElementById('employeesList');
+    if (state.employees.length === 0) {
+        el.innerHTML = `<div style="color:var(--text-dim);font-size:11px;padding:4px 0">${t('emp.addPrompt')}</div>`;
+        return;
+    }
+    const cliKeys = getCliKeys();
+    el.innerHTML = state.employees.map(a => {
+        const models = MODEL_MAP[a.cli] || [];
+        // Legacy role prompt → new preset migration
+        const LEGACY_MAP = {
+            // Legacy Korean roles (backward compat with old DB data)
+            'React/Vue 기반 UI 컴포넌트 개발, 스타일링': 'frontend',
+            'API 서버, DB 스키마, 비즈니스 로직 구현': 'backend',
+            '프론트엔드와 백엔드 모두 담당': 'frontend',
+            'CI/CD, Docker, 인프라 자동화': 'backend',
+            '테스트 작성, 버그 재현, 품질 관리': 'custom',
+            '데이터 파이프라인, ETL, 분석 쿼리': 'data',
+            'API 문서화, README, 가이드 작성': 'docs',
+            // Previous default Korean preset prompts
+            'UI/UX 구현, CSS, 컴포넌트 개발': 'frontend',
+            'API, DB, 서버 로직 구현': 'backend',
+            '데이터 파이프라인, 분석, ML': 'data',
+            '문서화, README, API docs': 'docs',
+            // Phase 6.9: new English preset prompts
+            'UI/UX, CSS, components': 'frontend',
+            'API, DB, server logic': 'backend',
+            'Data pipeline, analysis, ML': 'data',
+            'Documentation, README, API docs': 'docs',
+        };
+        const legacyVal = LEGACY_MAP[a.role];
+        const matched = legacyVal ? ROLE_PRESETS.find(r => r.value === legacyVal) : ROLE_PRESETS.find(r => r.prompt === a.role);
+        const presetVal = matched ? matched.value : (a.role ? 'custom' : 'frontend');
+        const isCustom = presetVal === 'custom';
+
+        return `
+        <div class="settings-group" style="margin-bottom:8px;padding:8px 10px">
+            <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px">
+                <span style="width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0"></span>
+                <input style="flex:1;background:none;border:none;color:var(--text);font-size:12px;font-weight:600;font-family:inherit;outline:none"
+                       value="${escapeHtml(a.name || 'Agent')}"
+                       data-emp-name="${a.id}">
+                <button style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px" data-emp-delete="${a.id}" title="${t('emp.delete')}">✕</button>
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:4px">
+                <div>
+                    <label>CLI</label>
+                    <select data-emp-cli="${a.id}">
+                        ${cliKeys.map(c => `<option${a.cli === c ? ' selected' : ''}>${c}</option>`).join('')}
+                    </select>
+                </div>
+                <div>
+                    <label>Model</label>
+                    <select data-emp-model="${a.id}">
+                        <option value="default"${(!a.model || a.model === 'default') ? ' selected' : ''}>default</option>
+                        ${models.map(m => `<option${a.model === m ? ' selected' : ''}>${m}</option>`).join('')}
+                    </select>
+                </div>
+            </div>
+            <div>
+                <label>Role</label>
+                <select data-emp-role="${a.id}">
+                    ${ROLE_PRESETS.map(r => `<option value="${r.value}"${presetVal === r.value ? ' selected' : ''}>${r.label}</option>`).join('')}
+                </select>
+                <textarea data-emp-custom="${a.id}" style="display:${isCustom ? 'block' : 'none'};margin-top:4px;width:100%;height:40px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-size:10px;font-family:inherit;resize:vertical"
+                          placeholder="${t('emp.customRole')}">${isCustom ? escapeHtml(a.role) : ''}</textarea>
+            </div>
+            <div style="margin-top:4px;font-size:10px;display:flex;align-items:center;gap:6px">
+                <span style="color:${a.status === 'running' ? '#fbbf24' : 'var(--green)'}">● ${a.status || 'idle'}</span>
+                ${(() => { const ps = getAgentPhase(a.id); const p = ps?.phase || a.phase; const pl = ps?.phaseLabel || a.phaseLabel; return p ? `<span style="background:${({ 1: '#60a5fa', 2: '#a78bfa', 3: '#34d399', 4: '#fbbf24', 5: '#f472b6' })[p] || '#888'};color:#000;padding:1px 6px;border-radius:9px;font-size:9px">${pl || 'P' + p}</span>` : ''; })()}
+            </div>
+        </div>`;
+    }).join('');
+}
+
+export async function addEmployee() {
+    await apiJson('/api/employees', 'POST', {});
+}
+
+export async function updateEmployee(id, data) {
+    await apiJson(`/api/employees/${id}`, 'PUT', data);
+}
+
+export async function deleteEmployee(id) {
+    apiFire(`/api/employees/${id}`, 'DELETE');
+}
+
+export function onEmpCliChange(id, cli) {
+    const models = MODEL_MAP[cli] || [];
+    const sel = document.querySelector(`[data-emp-model="${id}"]`);
+    sel.innerHTML = `<option value="default" selected>default</option>` + models.map(m => `<option>${escapeHtml(m)}</option>`).join('') + `<option value="__custom__">${t('emp.customModel')}</option>`;
+    updateEmployee(id, { cli, model: 'default' });
+}
+
+export function onEmpRoleChange(id, presetVal) {
+    const preset = ROLE_PRESETS.find(r => r.value === presetVal);
+    const customEl = document.querySelector(`[data-emp-custom="${id}"]`);
+    if (presetVal === 'custom') {
+        customEl.style.display = 'block';
+        customEl.focus();
+    } else {
+        customEl.style.display = 'none';
+        customEl.value = '';
+        updateEmployee(id, { role: preset?.prompt || '' });
+    }
+}

package/public/js/features/heartbeat.js

@@ -0,0 +1,80 @@
+// ── Heartbeat Feature ──
+import { state } from '../state.js';
+import { t } from './i18n.js';
+import { api, apiJson } from '../api.js';
+import { escapeHtml } from '../render.js';
+
+export async function openHeartbeatModal() {
+    const data = await api('/api/heartbeat');
+    state.heartbeatJobs = data?.jobs || [];
+    renderHeartbeatJobs();
+    document.getElementById('heartbeatModal').classList.add('open');
+}
+
+export function closeHeartbeatModal(e) {
+    if (e && e.target !== e.currentTarget) return;
+    document.getElementById('heartbeatModal').classList.remove('open');
+}
+
+export function renderHeartbeatJobs() {
+    const container = document.getElementById('hbJobsList');
+    if (state.heartbeatJobs.length === 0) {
+        container.innerHTML = `<p style="color:var(--text-dim);font-size:12px;text-align:center">${t('hb.empty')}</p>`;
+    } else {
+        container.innerHTML = state.heartbeatJobs.map((job, i) => `
+            <div class="hb-job-card">
+                <div class="hb-job-header">
+                    <input type="text" value="${escapeHtml(job.name || '')}" placeholder="${t('hb.name')}"
+                        data-hb-name="${i}">
+                    <span style="font-size:11px;color:var(--text-dim)">every</span>
+                    <input type="number" value="${job.schedule?.minutes || 5}" min="1"
+                        data-hb-minutes="${i}">
+                    <span style="font-size:11px;color:var(--text-dim)">min</span>
+                    <button class="hb-toggle ${job.enabled ? 'on' : 'off'}"
+                        data-hb-toggle="${i}"></button>
+                    <button class="hb-del" data-hb-remove="${i}">✕</button>
+                </div>
+                <textarea class="hb-prompt" rows="2" placeholder="${t('hb.prompt')}"
+                    data-hb-prompt="${i}">${escapeHtml(job.prompt || '')}</textarea>
+            </div>
+        `).join('');
+    }
+    const active = state.heartbeatJobs.filter(j => j.enabled).length;
+    document.getElementById('hbSidebarBtn').textContent = `💓 Heartbeat (${active})`;
+}
+
+export function addHeartbeatJob() {
+    state.heartbeatJobs.push({
+        id: 'hb_' + Date.now(),
+        name: '',
+        enabled: true,
+        schedule: { kind: 'every', minutes: 5 },
+        prompt: ''
+    });
+    renderHeartbeatJobs();
+    saveHeartbeatJobs();
+}
+
+export function removeHeartbeatJob(i) {
+    state.heartbeatJobs.splice(i, 1);
+    renderHeartbeatJobs();
+    saveHeartbeatJobs();
+}
+
+export function toggleHeartbeatJob(i) {
+    state.heartbeatJobs[i].enabled = !state.heartbeatJobs[i].enabled;
+    renderHeartbeatJobs();
+    saveHeartbeatJobs();
+}
+
+export async function saveHeartbeatJobs() {
+    await apiJson('/api/heartbeat', 'PUT', { jobs: state.heartbeatJobs });
+}
+
+export async function initHeartbeatBadge() {
+    try {
+        const d = await api('/api/heartbeat');
+        const active = (d?.jobs || []).filter(j => j.enabled).length;
+        document.getElementById('hbSidebarBtn').textContent = `💓 Heartbeat (${active})`;
+    } catch { }
+}

package/public/js/features/i18n.js

@@ -0,0 +1,125 @@
+// ── Frontend i18n module ──
+// Phase 7: client-side translation with lazy-loaded locale JSON
+
+let currentLocale = 'ko';
+let dict = {};  // current locale dictionary
+let fallbackDict = {};  // ko fallback
+
+/**
+ * Initialize i18n: restore from localStorage, detect from browser, load locale
+ */
+export async function initI18n() {
+    let saved = null;
+    try { saved = localStorage.getItem('claw_locale'); } catch { /* Safari private */ }
+
+    if (!saved) {
+        // Detect from browser language
+        const browserLang = (navigator.language || 'ko').split(/[-_]/)[0].toLowerCase();
+        saved = ['en', 'ko'].includes(browserLang) ? browserLang : 'ko';
+    }
+
+    // Always load ko as fallback
+    fallbackDict = await fetchLocale('ko');
+    if (saved === 'ko') {
+        dict = fallbackDict;
+    } else {
+        dict = await fetchLocale(saved);
+    }
+    currentLocale = saved;
+    applyI18n();
+}
+
+/**
+ * Fetch a locale JSON from the server
+ */
+async function fetchLocale(lang) {
+    try {
+        const { api } = await import('../api.js');
+        return await api(`/api/i18n/${lang}`) || {};
+    } catch { return {}; }
+}
+
+/**
+ * Translate a key with optional parameter interpolation
+ * Falls back: dict[key] → fallbackDict[key] → key itself
+ */
+export function t(key, params = {}) {
+    let val = dict[key] ?? fallbackDict[key] ?? key;
+    for (const [k, v] of Object.entries(params)) {
+        val = val.replaceAll(`{${k}}`, String(v));
+    }
+    return val;
+}
+
+/**
+ * Apply translations to all elements with data-i18n attributes
+ */
+export function applyI18n() {
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        if (key) el.textContent = t(key);
+    });
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        const key = el.getAttribute('data-i18n-placeholder');
+        if (key) el.placeholder = t(key);
+    });
+    document.querySelectorAll('[data-i18n-title]').forEach(el => {
+        const key = el.getAttribute('data-i18n-title');
+        if (key) el.title = t(key);
+    });
+    document.querySelectorAll('[data-i18n-aria]').forEach(el => {
+        const key = el.getAttribute('data-i18n-aria');
+        if (key) el.setAttribute('aria-label', t(key));
+    });
+}
+
+/**
+ * Switch language, reload locale, rebind all UI
+ */
+export async function setLang(lang) {
+    if (lang === currentLocale) return;
+    if (lang === 'ko') {
+        dict = fallbackDict;
+    } else {
+        dict = await fetchLocale(lang);
+    }
+    currentLocale = lang;
+    try { localStorage.setItem('claw_locale', lang); } catch { /* Safari private */ }
+    applyI18n();
+
+    // Reload dynamic content that uses t()
+    try {
+        const { loadEmployees } = await import('./employees.js');
+        loadEmployees();
+    } catch { }
+    try {
+        const { loadSkills } = await import('./skills.js');
+        loadSkills();
+    } catch { }
+    try {
+        const { loadCommands } = await import('./slash-commands.js');
+        loadCommands();
+    } catch { }
+    try {
+        const { loadSettings } = await import('./settings.js');
+        loadSettings();
+    } catch { }
+}
+
+/**
+ * Get current locale code
+ */
+export function getLang() {
+    return currentLocale;
+}
+
+/**
+ * fetchWithLocale — wrapper that appends ?locale= to requests
+ */
+export function fetchWithLocale(url, init = {}) {
+    const u = new URL(url, location.origin);
+    if (!u.searchParams.has('locale')) {
+        u.searchParams.set('locale', currentLocale);
+    }
+    return fetch(u.toString(), init);
+}