cli-jaw 0.1.0

package/public/js/render.js

@@ -0,0 +1,294 @@
+// ── Render Helpers ──
+// Modular markdown rendering: marked.js + highlight.js + KaTeX + Mermaid
+// All libs loaded via CDN (defer), graceful fallback if unavailable
+import { t } from './features/i18n.js';
+
+export function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+// ── XSS sanitization ──
+export function sanitizeHtml(html) {
+    if (typeof DOMPurify !== 'undefined') {
+        return DOMPurify.sanitize(html, {
+            USE_PROFILES: { html: true },
+            FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
+            FORBID_ATTR: ['onerror', 'onclick', 'onload', 'onmouseover', 'onfocus', 'onblur'],
+            ADD_TAGS: ['use'],  // Mermaid SVG compatibility
+        });
+    }
+    // CDN fallback: regex-based stripping
+    return html
+        .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+        .replace(/\bon\w+\s*=/gi, 'data-removed=')
+        .replace(/javascript\s*:/gi, 'about:blank');
+}
+
+// ── Orchestration JSON stripping ──
+function stripOrchestration(text) {
+    let cleaned = text.replace(/```json\n[\s\S]*?\n```/g, '');
+    cleaned = cleaned.replace(/\{[\s\S]*"subtasks"\s*:\s*\[[\s\S]*?\]\s*\}/g, '').trim();
+    return cleaned;
+}
+
+// ── KaTeX inline/block math ──
+function renderMath(html) {
+    if (typeof katex === 'undefined') return html;
+    // Block math: $$...$$
+    html = html.replace(/\$\$([\s\S]+?)\$\$/g, (_, tex) => {
+        try {
+            return katex.renderToString(tex.trim(), { displayMode: true, throwOnError: false });
+        } catch { return `<code>${escapeHtml(tex)}</code>`; }
+    });
+    // Inline math: $...$  (avoid matching currency like $10)
+    html = html.replace(/(?<!\$)\$(?!\$)([^\n$]+?)\$(?!\$)/g, (_, tex) => {
+        try {
+            return katex.renderToString(tex.trim(), { displayMode: false, throwOnError: false });
+        } catch { return `<code>${escapeHtml(tex)}</code>`; }
+    });
+    return html;
+}
+
+// ── Mermaid deferred rendering ──
+// NOTE: No DOMPurify on mermaid SVG — mermaid.render() with securityLevel:'loose'
+// handles its own sanitization. DOMPurify strips foreignObject/style tags needed for text.
+let mermaidId = 0;
+
+function renderMermaidBlocks() {
+    if (typeof mermaid === 'undefined') return;
+    document.querySelectorAll('.mermaid-pending').forEach(async (el) => {
+        el.classList.remove('mermaid-pending');
+        const code = el.textContent;
+        const id = `mermaid-${++mermaidId}`;
+        try {
+            const { svg } = await mermaid.render(id, code);
+            el.innerHTML = svg;
+            el.classList.add('mermaid-rendered');
+            // Store raw SVG for overlay (before zoom button is appended)
+            const rawSvg = el.innerHTML;
+            // Add zoom button
+            const zoomBtn = document.createElement('button');
+            zoomBtn.className = 'mermaid-zoom-btn';
+            zoomBtn.textContent = '⛶';
+            zoomBtn.title = 'Expand diagram';
+            zoomBtn.addEventListener('click', () => openMermaidOverlay(rawSvg));
+            el.appendChild(zoomBtn);
+        } catch (err) {
+            const errMsg = err?.message || err?.str || 'Unknown error';
+            el.innerHTML = `
+                <div style="border:1px solid #ef4444;border-radius:6px;padding:8px;margin:4px 0">
+                    <div style="color:#ef4444;font-size:11px;margin-bottom:4px">⚠️ Mermaid 렌더링 실패</div>
+                    <div style="color:#fbbf24;font-size:10px;margin-bottom:6px">${escapeHtml(errMsg.slice(0, 200))}</div>
+                    <pre style="margin:0;font-size:11px;overflow-x:auto"><code>${escapeHtml(code)}</code></pre>
+                </div>`;
+        }
+    });
+}
+// ── Mermaid popup overlay ──
+function openMermaidOverlay(svgHtml) {
+    // Remove existing overlay if any
+    document.getElementById('mermaidOverlay')?.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'mermaidOverlay';
+    overlay.className = 'mermaid-overlay';
+    overlay.innerHTML = `
+        <div class="mermaid-overlay-backdrop"></div>
+        <div class="mermaid-overlay-content">
+            <button class="mermaid-overlay-close">✕</button>
+            <div class="mermaid-overlay-svg">${svgHtml}</div>
+        </div>`;
+    document.body.appendChild(overlay);
+
+    // Make SVG fill the popup
+    const svgEl = overlay.querySelector('svg');
+    if (svgEl) {
+        svgEl.removeAttribute('width');
+        svgEl.removeAttribute('height');
+        svgEl.style.width = '100%';
+        svgEl.style.height = 'auto';
+        svgEl.style.maxHeight = '85vh';
+    }
+
+    const close = () => overlay.remove();
+    overlay.querySelector('.mermaid-overlay-backdrop').addEventListener('click', close);
+    overlay.querySelector('.mermaid-overlay-close').addEventListener('click', (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        close();
+    });
+    document.addEventListener('keydown', function handler(e) {
+        if (e.key === 'Escape') { close(); document.removeEventListener('keydown', handler); }
+    });
+}
+
+// ── marked.js configuration ──
+let markedReady = false;
+
+function ensureMarked() {
+    if (markedReady) return true;
+    if (typeof marked === 'undefined') return false;
+
+    const renderer = new marked.Renderer();
+
+    // Code blocks: highlight.js + mermaid detection
+    renderer.code = function ({ text, lang }) {
+        // Mermaid
+        if (lang === 'mermaid') {
+            return `<div class="mermaid-container mermaid-pending">${escapeHtml(text)}</div>`;
+        }
+        // Highlight.js
+        let highlighted = escapeHtml(text);
+        if (typeof hljs !== 'undefined' && lang && hljs.getLanguage(lang)) {
+            try {
+                highlighted = hljs.highlight(text, { language: lang }).value;
+            } catch { /* fallback to escaped */ }
+        } else if (typeof hljs !== 'undefined') {
+            try {
+                highlighted = hljs.highlightAuto(text).value;
+            } catch { /* fallback */ }
+        }
+        const labelText = lang ? escapeHtml(lang) : t('code.copy');
+        const label = `<span class="code-lang-label" data-lang="${lang ? escapeHtml(lang) : ''}">${labelText}</span>`;
+        return `<div class="code-block-wrapper">${label}<pre><code class="hljs${lang ? ` language-${escapeHtml(lang)}` : ''}">${highlighted}</code></pre></div>`;
+    };
+
+    marked.setOptions({
+        renderer,
+        gfm: true,
+        breaks: true,
+    });
+
+    // Init mermaid
+    if (typeof window.mermaid !== 'undefined') {
+        window.mermaid.initialize({
+            startOnLoad: false,
+            theme: 'base',
+            securityLevel: 'loose',
+            themeVariables: {
+                darkMode: true,
+                background: '#0f172a',
+                primaryColor: '#1e3a5f',
+                primaryTextColor: '#e2e8f0',
+                primaryBorderColor: '#38bdf8',
+                lineColor: '#94a3b8',
+                secondaryColor: '#1e293b',
+                tertiaryColor: '#0f172a',
+                textColor: '#e2e8f0',
+                mainBkg: '#1e293b',
+                nodeBorder: '#38bdf8',
+                clusterBkg: '#1e293b',
+                titleColor: '#e2e8f0',
+                edgeLabelBackground: '#1e293b',
+                nodeTextColor: '#e2e8f0',
+            },
+        });
+    }
+
+    markedReady = true;
+    return true;
+}
+
+// ── Fallback regex renderer (CDN 실패 시) ──
+function renderFallback(text) {
+    return escapeHtml(text)
+        .replace(/`{3,}(\w*)\n([\s\S]*?)`{3,}/g, '<pre><code>$2</code></pre>')
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/^### (.+)$/gm, '<div style="font-weight:700;margin:8px 0 4px">$1</div>')
+        .replace(/^## (.+)$/gm, '<div style="font-weight:700;font-size:14px;margin:10px 0 4px">$1</div>')
+        .replace(/^# (.+)$/gm, '<div style="font-weight:700;font-size:16px;margin:12px 0 4px">$1</div>')
+        .replace(/\n/g, '<br>');
+}
+
+// ── Rehighlight all code blocks (call after hljs loads) ──
+export function rehighlightAll() {
+    if (typeof hljs === 'undefined') return;
+    document.querySelectorAll('.code-block-wrapper pre code').forEach(el => {
+        if (el.dataset.highlighted === 'yes') return;
+        const lang = [...el.classList].find(c => c.startsWith('language-'))?.replace('language-', '');
+        const raw = el.textContent;
+        try {
+            if (lang && hljs.getLanguage(lang)) {
+                el.innerHTML = hljs.highlight(raw, { language: lang }).value;
+            } else {
+                el.innerHTML = hljs.highlightAuto(raw).value;
+            }
+            el.dataset.highlighted = 'yes';
+        } catch { /* ignore */ }
+    });
+}
+
+// Poll for hljs load and auto-rehighlight
+(function waitForHljs() {
+    if (typeof hljs !== 'undefined') { rehighlightAll(); return; }
+    setTimeout(waitForHljs, 200);
+})();
+
+// Poll for mermaid load and render pending blocks
+(function waitForMermaid() {
+    if (typeof mermaid !== 'undefined') {
+        ensureMarked(); // ensure mermaid.initialize() runs
+        renderMermaidBlocks();
+        return;
+    }
+    setTimeout(waitForMermaid, 300);
+})();
+
+// ── Copy button event delegation (one-time setup) ──
+let copyDelegationReady = false;
+
+function ensureCopyDelegation() {
+    if (copyDelegationReady) return;
+    copyDelegationReady = true;
+    document.addEventListener('click', (e) => {
+        const label = e.target.closest('.code-lang-label');
+        if (!label) return;
+        const wrapper = label.closest('.code-block-wrapper');
+        if (!wrapper) return;
+        const codeEl = wrapper.querySelector('pre code');
+        if (!codeEl) return;
+        navigator.clipboard.writeText(codeEl.textContent).then(() => {
+            const orig = label.textContent;
+            label.textContent = t('code.copied');
+            label.classList.add('copied');
+            setTimeout(() => {
+                label.textContent = orig;
+                label.classList.remove('copied');
+            }, 1500);
+        }).catch(() => { /* clipboard API fail silently */ });
+    });
+}
+
+// ── Main export ──
+export function renderMarkdown(text) {
+    const cleaned = stripOrchestration(text);
+    if (!cleaned) return `<em style="color:var(--text-dim)">${t('orchestrator.dispatching')}</em>`;
+
+    let html;
+    if (ensureMarked()) {
+        html = marked.parse(cleaned);
+        // Wrap tables for horizontal scrolling
+        html = html.replace(/<table/g, '<div class="table-wrapper"><table').replace(/<\/table>/g, '</table></div>');
+    } else {
+        html = renderFallback(cleaned);
+    }
+
+    // KaTeX math
+    html = renderMath(html);
+
+    // XSS sanitization
+    html = sanitizeHtml(html);
+
+    // Schedule mermaid rendering (needs DOM)
+    requestAnimationFrame(() => {
+        renderMermaidBlocks();
+        rehighlightAll();
+    });
+
+    // Ensure copy delegation is set up
+    ensureCopyDelegation();
+
+    return html;
+}

package/public/js/state.js

@@ -0,0 +1,16 @@
+// ── Shared State Module ──
+// All modules import this to access/modify shared state.
+// Object reference ensures mutations are seen across modules.
+
+export const state = {
+    ws: null,
+    agentBusy: false,
+    employees: [],
+    allSkills: [],
+    currentSkillFilter: 'all',
+    currentAgentDiv: null,
+    attachedFiles: [],
+    heartbeatJobs: [],
+    cliStatusCache: null,
+    cliStatusTs: 0,
+};

package/public/js/ui.js

@@ -0,0 +1,172 @@
+// ── UI Utilities ──
+import { state } from './state.js';
+import { renderMarkdown, escapeHtml } from './render.js';
+import { getAppName } from './features/appname.js';
+import { t } from './features/i18n.js';
+import { api } from './api.js';
+
+export function setStatus(s) {
+    const badge = document.getElementById('statusBadge');
+    const btn = document.getElementById('btnSend');
+    state.agentBusy = s === 'running';
+    document.getElementById('typingIndicator').classList.toggle('active', state.agentBusy);
+    if (s === 'running') {
+        badge.className = 'status-badge status-running';
+        badge.textContent = '⏳ running';
+        btn.textContent = '■';
+        btn.title = t('btn.stop');
+        btn.classList.add('stop-mode');
+    } else {
+        badge.className = 'status-badge status-idle';
+        badge.textContent = '⚡ idle';
+        btn.textContent = '➤';
+        btn.title = 'Send';
+        btn.classList.remove('stop-mode');
+        updateQueueBadge(0);
+    }
+}
+
+export function updateQueueBadge(count) {
+    let el = document.getElementById('queueBadge');
+    if (!el) {
+        el = document.createElement('span');
+        el.id = 'queueBadge';
+        el.style.cssText = 'position:absolute;top:-6px;right:-6px;background:#f80;color:#fff;border-radius:50%;font-size:11px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-weight:bold';
+        document.getElementById('btnSend').parentElement.style.position = 'relative';
+        document.getElementById('btnSend').style.position = 'relative';
+        document.getElementById('btnSend').appendChild(el);
+    }
+    el.textContent = count > 0 ? count : '';
+    el.style.display = count > 0 ? 'flex' : 'none';
+}
+
+export function addSystemMsg(text, extraClass, type) {
+    const container = document.getElementById('chatMessages');
+    const div = document.createElement('div');
+    const typeClass = type ? ` msg-type-${type}` : '';
+    div.className = 'msg msg-system' + typeClass + (extraClass ? ' ' + extraClass : '');
+    div.textContent = text;
+    container.appendChild(div);
+    container.scrollTop = container.scrollHeight;
+}
+
+export function appendAgentText(text) {
+    if (!text) return;
+    if (!state.currentAgentDiv) {
+        state.currentAgentDiv = addMessage('agent', '');
+    }
+    const content = state.currentAgentDiv.querySelector('.msg-content');
+    content.textContent += text;
+    scrollToBottom();
+}
+
+let lastFinalizeTs = 0;
+
+export function finalizeAgent(text, toolLog) {
+    // Guard: prevent double-render when both agent_done + orchestrate_done fire
+    const now = Date.now();
+    if (!state.currentAgentDiv && now - lastFinalizeTs < 500) return;
+
+    document.querySelectorAll('.msg-system.tool-activity').forEach(el => el.remove());
+    if (text) {
+        if (!state.currentAgentDiv) {
+            state.currentAgentDiv = addMessage('agent', '');
+        }
+        const content = state.currentAgentDiv.querySelector('.msg-content');
+        state.currentAgentDiv.dataset.rawText = text;
+        let toolHtml = '';
+        if (toolLog && toolLog.length > 0) {
+            const counts = {};
+            toolLog.forEach(t => { counts[t.icon] = (counts[t.icon] || 0) + 1; });
+            const summaryParts = Object.entries(counts).map(([icon, n]) => `${icon}×${n}`).join(' ');
+            const logLines = toolLog.map(t => `${t.icon} ${escapeHtml(t.label)}`).join('\n');
+            toolHtml = `<details class="tool-summary"><summary>${summaryParts}</summary><div class="tool-log">${logLines}</div></details>`;
+        }
+        content.innerHTML = toolHtml + renderMarkdown(text);
+    }
+    state.currentAgentDiv = null;
+    lastFinalizeTs = Date.now();
+    setStatus('idle');
+    loadStats();
+}
+
+export function addMessage(role, text) {
+    const container = document.getElementById('chatMessages');
+    const div = document.createElement('div');
+    div.className = `msg msg-${role}`;
+    div.dataset.rawText = text;
+    const rendered = renderMarkdown(text);
+    const copyBtn = '<span class="msg-copy" title="Copy raw text"></span>';
+    div.innerHTML = `<div class="msg-label">${role === 'user' ? t('msg.you') : getAppName()}</div><div class="msg-content">${rendered}</div>${copyBtn}`;
+    container.appendChild(div);
+    scrollToBottom();
+    return div;
+}
+
+export function scrollToBottom() {
+    const c = document.getElementById('chatMessages');
+    c.scrollTop = c.scrollHeight;
+}
+
+export function switchTab(name, targetBtn) {
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+    const tabMap = { agents: 'tabAgents', settings: 'tabSettings', skills: 'tabSkills' };
+    document.getElementById(tabMap[name]).classList.add('active');
+    if (targetBtn) targetBtn.classList.add('active');
+    // Lazy-load tab content
+    if (name === 'settings') { import('./features/settings.js').then(m => m.loadSettings()); }
+    if (name === 'agents') { import('./features/employees.js').then(m => m.loadEmployees()); }
+    if (name === 'skills') { import('./features/skills.js').then(m => m.loadSkills()); }
+}
+
+export function handleSave() {
+    const isSettings = document.getElementById('tabSettings').classList.contains('active');
+    if (isSettings) {
+        import('./features/settings.js').then(m => m.savePerCli());
+    } else {
+        import('./features/settings.js').then(m => m.updateSettings());
+    }
+}
+
+export async function loadStats() {
+    const msgs = await api('/api/messages');
+    if (!msgs) return;
+    document.getElementById('statMsgs').textContent = t('stat.messages', { count: msgs.length });
+}
+
+export async function loadMessages() {
+    const msgs = await api('/api/messages');
+    if (!msgs) return;
+    msgs.forEach(m => addMessage(m.role === 'assistant' ? 'agent' : m.role, m.content));
+}
+
+// ── Copy button delegation ──
+export function initMsgCopy() {
+    document.getElementById('chatMessages').addEventListener('click', async (e) => {
+        const btn = e.target.closest('.msg-copy');
+        if (!btn) return;
+        const msg = btn.closest('.msg');
+        const raw = msg?.dataset?.rawText || msg?.querySelector('.msg-content')?.innerText || '';
+        try {
+            await navigator.clipboard.writeText(raw);
+            btn.classList.add('copied');
+            setTimeout(() => { btn.classList.remove('copied'); }, 1500);
+        } catch { setTimeout(() => { }, 1500); }
+    });
+}
+
+export async function loadMemory() {
+    try {
+        const items = await api('/api/memory');
+        const list = document.getElementById('memoryList');
+        if (!list) return;
+        if (items.length === 0) {
+            list.innerHTML = `<li style="color:var(--text-dim)">${t('mem.empty')}</li>`;
+            return;
+        }
+        list.innerHTML = items.map(m =>
+            `<li><span class="memory-key">${escapeHtml(m.key)}</span>: ${escapeHtml(m.value)}</li>`
+        ).join('');
+    } catch { }
+}

package/public/js/ws.js

@@ -0,0 +1,76 @@
+// ── WebSocket Connection ──
+import { state } from './state.js';
+import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage } from './ui.js';
+import { t, getLang } from './features/i18n.js';
+
+// Agent phase state (populated by agent_status events from orchestrator)
+const agentPhaseState = {};
+
+export function connect() {
+    state.ws = new WebSocket(`ws://${location.host}?lang=${getLang()}`);
+    state.ws.onmessage = (e) => {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'agent_status') {
+            if (msg.running !== undefined) {
+                setStatus(msg.running ? 'running' : 'idle');
+            } else {
+                setStatus(msg.status);
+            }
+            // Track per-agent phase for badge rendering
+            if (msg.agentId && msg.phase) {
+                agentPhaseState[msg.agentId] = { phase: msg.phase, phaseLabel: msg.phaseLabel || '' };
+                import('./features/employees.js').then(m => m.loadEmployees());
+            }
+        } else if (msg.type === 'queue_update') {
+            updateQueueBadge(msg.pending || 0);
+        } else if (msg.type === 'worklog_created') {
+            addSystemMsg(`📋 Worklog: ${msg.path}`);
+        } else if (msg.type === 'round_start') {
+            const agents = (msg.agentPhases || msg.subtasks || []);
+            const names = agents.map(a => a.agent || a.name).join(', ');
+            addSystemMsg(t('ws.roundStart', { round: msg.round, count: agents.length, names }));
+        } else if (msg.type === 'round_done') {
+            if (msg.action === 'complete') {
+                addSystemMsg(t('ws.roundDone', { round: msg.round }));
+            } else if (msg.action === 'next') {
+                addSystemMsg(t('ws.roundNext', { round: msg.round }));
+            } else {
+                addSystemMsg(t('ws.roundRetry', { round: msg.round }));
+            }
+        } else if (msg.type === 'agent_tool') {
+            addSystemMsg(`${msg.icon} ${msg.label}`, 'tool-activity');
+        } else if (msg.type === 'agent_output') {
+            appendAgentText(msg.text);
+        } else if (msg.type === 'agent_fallback') {
+            addSystemMsg(t('ws.fallback', { from: msg.from, to: msg.to }), 'tool-activity');
+        } else if (msg.type === 'agent_done') {
+            finalizeAgent(msg.text, msg.toolLog);
+        } else if (msg.type === 'orchestrate_done') {
+            finalizeAgent(msg.text);
+        } else if (msg.type === 'clear') {
+            document.getElementById('chatMessages').innerHTML = '';
+        } else if (msg.type === 'agent_added' || msg.type === 'agent_updated' || msg.type === 'agent_deleted') {
+            import('./features/employees.js').then(m => m.loadEmployees());
+        } else if (msg.type === 'new_message' && msg.source === 'telegram') {
+            addMessage(msg.role === 'assistant' ? 'agent' : msg.role, msg.content);
+        }
+    };
+    state.ws.onopen = () => {
+        console.log('[ws] connected');
+        // Restore state: reload messages to stay in sync after reconnect
+        import('./ui.js').then(m => {
+            document.getElementById('chatMessages').innerHTML = '';
+            m.loadMessages();
+            m.setStatus('idle');
+        });
+    };
+    state.ws.onclose = () => {
+        console.log('[ws] disconnected, reconnecting in 2s...');
+        setStatus('idle');
+        setTimeout(connect, 2000);
+    };
+}
+
+export function getAgentPhase(agentId) {
+    return agentPhaseState[agentId] || null;
+}