cli-jaw 0.1.11 → 1.0.0

package/public/js/{render.js → render.ts}

@@ -1,18 +1,19 @@
 // ── 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) {
+export function escapeHtml(str: string): string {
     return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
         .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 }
 
 // ── XSS sanitization ──
-export function sanitizeHtml(html) {
+export function sanitizeHtml(html: string): string {
     if (typeof DOMPurify !== 'undefined') {
         return DOMPurify.sanitize(html, {
-            USE_PROFILES: { html: true },
+            USE_PROFILES: { html: true, svg: true, svgFilters: true },
             FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
             FORBID_ATTR: ['onerror', 'onclick', 'onload', 'onmouseover', 'onfocus', 'onblur'],
             ADD_TAGS: ['use'],  // Mermaid SVG compatibility
@@ -26,23 +27,23 @@ export function sanitizeHtml(html) {
 }
 
 // ── Orchestration JSON stripping ──
-function stripOrchestration(text) {
+function stripOrchestration(text: string): string {
     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) {
+function renderMath(html: string): string {
     if (typeof katex === 'undefined') return html;
     // Block math: $$...$$
-    html = html.replace(/\$\$([\s\S]+?)\$\$/g, (_, tex) => {
+    html = html.replace(/\$\$([\s\S]+?)\$\$/g, (_: string, tex: string) => {
         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) => {
+    html = html.replace(/(?<!\$)\$(?!\$)([^\n$]+?)\$(?!\$)/g, (_: string, tex: string) => {
         try {
             return katex.renderToString(tex.trim(), { displayMode: false, throwOnError: false });
         } catch { return `<code>${escapeHtml(tex)}</code>`; }
@@ -51,89 +52,42 @@ function renderMath(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() {
+function renderMermaidBlocks(): void {
     if (typeof mermaid === 'undefined') return;
     document.querySelectorAll('.mermaid-pending').forEach(async (el) => {
         el.classList.remove('mermaid-pending');
-        const code = el.textContent;
+        const code = el.textContent || '';
         const id = `mermaid-${++mermaidId}`;
         try {
             const { svg } = await mermaid.render(id, code);
-            el.innerHTML = svg;
+            el.innerHTML = sanitizeHtml(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';
+        } catch (err: unknown) {
+            const errMsg = (err as { message?: string; str?: string })?.message
+                || (err as { str?: string })?.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:#ef4444;font-size:11px;margin-bottom:4px">⚠️ ${escapeHtml(t('mermaid.renderFail') || 'Mermaid render failed')}</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() {
+function ensureMarked(): boolean {
     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 }) {
+    renderer.code = function ({ text, lang }: { text: string; lang?: string }) {
         // Mermaid
         if (lang === 'mermaid') {
             return `<div class="mermaid-container mermaid-pending">${escapeHtml(text)}</div>`;
@@ -164,25 +118,8 @@ function ensureMarked() {
     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',
-            },
+            theme: 'dark',
+            securityLevel: 'strict',
         });
     }
 
@@ -191,7 +128,7 @@ function ensureMarked() {
 }
 
 // ── Fallback regex renderer (CDN 실패 시) ──
-function renderFallback(text) {
+function renderFallback(text: string): string {
     return escapeHtml(text)
         .replace(/`{3,}(\w*)\n([\s\S]*?)`{3,}/g, '<pre><code>$2</code></pre>')
         .replace(/`([^`]+)`/g, '<code>$1</code>')
@@ -203,54 +140,44 @@ function renderFallback(text) {
 }
 
 // ── Rehighlight all code blocks (call after hljs loads) ──
-export function rehighlightAll() {
+export function rehighlightAll(): void {
     if (typeof hljs === 'undefined') return;
     document.querySelectorAll('.code-block-wrapper pre code').forEach(el => {
-        if (el.dataset.highlighted === 'yes') return;
+        if ((el as HTMLElement).dataset.highlighted === 'yes') return;
         const lang = [...el.classList].find(c => c.startsWith('language-'))?.replace('language-', '');
-        const raw = el.textContent;
+        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';
+            (el as HTMLElement).dataset.highlighted = 'yes';
         } catch { /* ignore */ }
     });
 }
 
 // Poll for hljs load and auto-rehighlight
-(function waitForHljs() {
+(function waitForHljs(): void {
     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() {
+function ensureCopyDelegation(): void {
     if (copyDelegationReady) return;
     copyDelegationReady = true;
-    document.addEventListener('click', (e) => {
-        const label = e.target.closest('.code-lang-label');
+    document.addEventListener('click', (e: MouseEvent) => {
+        const label = (e.target as HTMLElement)?.closest('.code-lang-label') as HTMLElement | null;
         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;
+        navigator.clipboard.writeText(codeEl.textContent || '').then(() => {
+            const orig = label.textContent || '';
             label.textContent = t('code.copied');
             label.classList.add('copied');
             setTimeout(() => {
@@ -262,13 +189,13 @@ function ensureCopyDelegation() {
 }
 
 // ── Main export ──
-export function renderMarkdown(text) {
+export function renderMarkdown(text: string): string {
     const cleaned = stripOrchestration(text);
-    if (!cleaned) return `<em style="color:var(--text-dim)">${t('orchestrator.dispatching')}</em>`;
+    if (!cleaned) return `<em style="color:var(--text-dim)">${escapeHtml(t('orchestrator.dispatching'))}</em>`;
 
-    let html;
+    let html: string;
     if (ensureMarked()) {
-        html = marked.parse(cleaned);
+        html = marked.parse(cleaned) as string;
         // Wrap tables for horizontal scrolling
         html = html.replace(/<table/g, '<div class="table-wrapper"><table').replace(/<\/table>/g, '</table></div>');
     } else {

package/public/js/state.ts

@@ -0,0 +1,38 @@
+// ── Shared State Module ──
+// All modules import this to access/modify shared state.
+// Object reference ensures mutations are seen across modules.
+
+export interface HeartbeatJob {
+    id: string;
+    [key: string]: unknown;
+}
+
+export interface CliStatusCache {
+    [cli: string]: unknown;
+}
+
+export interface AppState {
+    ws: WebSocket | null;
+    agentBusy: boolean;
+    employees: unknown[];
+    allSkills: unknown[];
+    currentSkillFilter: string;
+    currentAgentDiv: HTMLElement | null;
+    attachedFiles: File[];
+    heartbeatJobs: HeartbeatJob[];
+    cliStatusCache: CliStatusCache | null;
+    cliStatusTs: number;
+}
+
+export const state: AppState = {
+    ws: null,
+    agentBusy: false,
+    employees: [],
+    allSkills: [],
+    currentSkillFilter: 'all',
+    currentAgentDiv: null,
+    attachedFiles: [],
+    heartbeatJobs: [],
+    cliStatusCache: null,
+    cliStatusTs: 0,
+};

package/public/js/{ui.js → ui.ts}

@@ -5,43 +5,42 @@ import { getAppName } from './features/appname.js';
 import { t } from './features/i18n.js';
 import { api } from './api.js';
 
-export function setStatus(s) {
+interface ToolLogEntry { icon: string; label: string; }
+interface MessageItem { role: string; content: string; }
+interface MemoryItem { key: string; value: string; }
+
+export function setStatus(s: string): void {
     const badge = document.getElementById('statusBadge');
     const btn = document.getElementById('btnSend');
     state.agentBusy = s === 'running';
-    document.getElementById('typingIndicator').classList.toggle('active', state.agentBusy);
+    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');
+        if (badge) { badge.className = 'status-badge status-running'; badge.textContent = '⏳ running'; }
+        if (btn) { 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');
+        if (badge) { badge.className = 'status-badge status-idle'; badge.textContent = '⚡ idle'; }
+        if (btn) { btn.textContent = '➤'; btn.title = 'Send'; btn.classList.remove('stop-mode'); }
         updateQueueBadge(0);
     }
 }
 
-export function updateQueueBadge(count) {
+export function updateQueueBadge(count: number): void {
     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);
+        const sendBtn = document.getElementById('btnSend');
+        if (sendBtn?.parentElement) sendBtn.parentElement.style.position = 'relative';
+        if (sendBtn) { sendBtn.style.position = 'relative'; sendBtn.appendChild(el); }
     }
-    el.textContent = count > 0 ? count : '';
+    el.textContent = count > 0 ? String(count) : '';
     el.style.display = count > 0 ? 'flex' : 'none';
 }
 
-export function addSystemMsg(text, extraClass, type) {
+export function addSystemMsg(text: string, extraClass?: string, type?: string): void {
     const container = document.getElementById('chatMessages');
+    if (!container) return;
     const div = document.createElement('div');
     const typeClass = type ? ` msg-type-${type}` : '';
     div.className = 'msg msg-system' + typeClass + (extraClass ? ' ' + extraClass : '');
@@ -50,19 +49,19 @@ export function addSystemMsg(text, extraClass, type) {
     container.scrollTop = container.scrollHeight;
 }
 
-export function appendAgentText(text) {
+export function appendAgentText(text: string): void {
     if (!text) return;
     if (!state.currentAgentDiv) {
         state.currentAgentDiv = addMessage('agent', '');
     }
-    const content = state.currentAgentDiv.querySelector('.msg-content');
-    content.textContent += text;
+    const content = (state.currentAgentDiv as HTMLElement)?.querySelector('.msg-content');
+    if (content) content.textContent += text;
     scrollToBottom();
 }
 
 let lastFinalizeTs = 0;
 
-export function finalizeAgent(text, toolLog) {
+export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
     // Guard: prevent double-render when both agent_done + orchestrate_done fire
     const now = Date.now();
     if (!state.currentAgentDiv && now - lastFinalizeTs < 500) return;
@@ -72,17 +71,16 @@ export function finalizeAgent(text, toolLog) {
         if (!state.currentAgentDiv) {
             state.currentAgentDiv = addMessage('agent', '');
         }
-        const content = state.currentAgentDiv.querySelector('.msg-content');
-        state.currentAgentDiv.dataset.rawText = text;
+        const content = (state.currentAgentDiv as HTMLElement)?.querySelector('.msg-content');
         let toolHtml = '';
         if (toolLog && toolLog.length > 0) {
-            const counts = {};
-            toolLog.forEach(t => { counts[t.icon] = (counts[t.icon] || 0) + 1; });
+            const counts: Record<string, number> = {};
+            toolLog.forEach(tl => { counts[tl.icon] = (counts[tl.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');
+            const logLines = toolLog.map(tl => `${tl.icon} ${escapeHtml(tl.label)}`).join('\n');
             toolHtml = `<details class="tool-summary"><summary>${summaryParts}</summary><div class="tool-log">${logLines}</div></details>`;
         }
-        content.innerHTML = toolHtml + renderMarkdown(text);
+        if (content) content.innerHTML = toolHtml + renderMarkdown(text);
     }
     state.currentAgentDiv = null;
     lastFinalizeTs = Date.now();
@@ -90,29 +88,27 @@ export function finalizeAgent(text, toolLog) {
     loadStats();
 }
 
-export function addMessage(role, text) {
+export function addMessage(role: string, text: string): HTMLDivElement {
     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);
+    div.innerHTML = `<div class="msg-label">${role === 'user' ? t('msg.you') : getAppName()}</div><div class="msg-content">${rendered}</div>`;
+    container?.appendChild(div);
     scrollToBottom();
     return div;
 }
 
-export function scrollToBottom() {
+export function scrollToBottom(): void {
     const c = document.getElementById('chatMessages');
-    c.scrollTop = c.scrollHeight;
+    if (c) c.scrollTop = c.scrollHeight;
 }
 
-export function switchTab(name, targetBtn) {
+export function switchTab(name: string, targetBtn: Element): void {
     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');
+    const tabMap: Record<string, string> = { 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()); }
@@ -120,8 +116,8 @@ export function switchTab(name, targetBtn) {
     if (name === 'skills') { import('./features/skills.js').then(m => m.loadSkills()); }
 }
 
-export function handleSave() {
-    const isSettings = document.getElementById('tabSettings').classList.contains('active');
+export function handleSave(): void {
+    const isSettings = document.getElementById('tabSettings')?.classList.contains('active');
     if (isSettings) {
         import('./features/settings.js').then(m => m.savePerCli());
     } else {
@@ -129,38 +125,24 @@ export function handleSave() {
     }
 }
 
-export async function loadStats() {
-    const msgs = await api('/api/messages');
+export async function loadStats(): Promise<void> {
+    const msgs = await api<MessageItem[]>('/api/messages');
     if (!msgs) return;
-    document.getElementById('statMsgs').textContent = t('stat.messages', { count: msgs.length });
+    const el = document.getElementById('statMsgs');
+    if (el) el.textContent = t('stat.messages', { count: msgs.length });
 }
 
-export async function loadMessages() {
-    const msgs = await api('/api/messages');
+export async function loadMessages(): Promise<void> {
+    const msgs = await api<MessageItem[]>('/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() {
+export async function loadMemory(): Promise<void> {
     try {
-        const items = await api('/api/memory');
+        const items = await api<MemoryItem[]>('/api/memory');
         const list = document.getElementById('memoryList');
-        if (!list) return;
+        if (!list || !items) return;
         if (items.length === 0) {
             list.innerHTML = `<li style="color:var(--text-dim)">${t('mem.empty')}</li>`;
             return;
@@ -170,3 +152,18 @@ export async function loadMemory() {
         ).join('');
     } catch { }
 }
+
+// ── Message copy delegation ──
+export function initMsgCopy(): void {
+    document.getElementById('chatMessages')?.addEventListener('click', (e) => {
+        const msgContent = (e.target as HTMLElement)?.closest('.msg-content');
+        if (!msgContent) return;
+        // Double-click to copy (not single click)
+    });
+    document.getElementById('chatMessages')?.addEventListener('dblclick', (e) => {
+        const msgContent = (e.target as HTMLElement)?.closest('.msg-content') as HTMLElement | null;
+        if (!msgContent) return;
+        const text = msgContent.innerText || msgContent.textContent || '';
+        navigator.clipboard.writeText(text).catch(() => { });
+    });
+}

package/public/js/{ws.js → ws.ts}

@@ -3,18 +3,42 @@ import { state } from './state.js';
 import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage } from './ui.js';
 import { t, getLang } from './features/i18n.js';
 
+interface WsMessage {
+    type: string;
+    running?: boolean;
+    status?: string;
+    agentId?: string;
+    phase?: string;
+    phaseLabel?: string;
+    pending?: number;
+    path?: string;
+    round?: number;
+    agentPhases?: { agent?: string; name?: string }[];
+    subtasks?: { agent?: string; name?: string }[];
+    action?: string;
+    icon?: string;
+    label?: string;
+    text?: string;
+    toolLog?: { icon: string; label: string }[];
+    from?: string;
+    to?: string;
+    source?: string;
+    role?: string;
+    content?: string;
+}
+
 // Agent phase state (populated by agent_status events from orchestrator)
-const agentPhaseState = {};
+const agentPhaseState: Record<string, { phase: string; phaseLabel: string }> = {};
 
-export function connect() {
+export function connect(): void {
     state.ws = new WebSocket(`ws://${location.host}?lang=${getLang()}`);
-    state.ws.onmessage = (e) => {
-        const msg = JSON.parse(e.data);
+    state.ws.onmessage = (e: MessageEvent) => {
+        const msg: WsMessage = JSON.parse(e.data as string);
         if (msg.type === 'agent_status') {
             if (msg.running !== undefined) {
                 setStatus(msg.running ? 'running' : 'idle');
             } else {
-                setStatus(msg.status);
+                setStatus(msg.status || 'idle');
             }
             // Track per-agent phase for badge rendering
             if (msg.agentId && msg.phase) {
@@ -24,42 +48,44 @@ export function connect() {
         } else if (msg.type === 'queue_update') {
             updateQueueBadge(msg.pending || 0);
         } else if (msg.type === 'worklog_created') {
-            addSystemMsg(`📋 Worklog: ${msg.path}`);
+            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 }));
+            const names = agents.map(a => a.agent || a.name || '').join(', ');
+            addSystemMsg(t('ws.roundStart', { round: msg.round || 0, count: agents.length, names }));
         } else if (msg.type === 'round_done') {
             if (msg.action === 'complete') {
-                addSystemMsg(t('ws.roundDone', { round: msg.round }));
+                addSystemMsg(t('ws.roundDone', { round: msg.round || 0 }));
             } else if (msg.action === 'next') {
-                addSystemMsg(t('ws.roundNext', { round: msg.round }));
+                addSystemMsg(t('ws.roundNext', { round: msg.round || 0 }));
             } else {
-                addSystemMsg(t('ws.roundRetry', { round: msg.round }));
+                addSystemMsg(t('ws.roundRetry', { round: msg.round || 0 }));
             }
         } else if (msg.type === 'agent_tool') {
-            addSystemMsg(`${msg.icon} ${msg.label}`, 'tool-activity');
+            addSystemMsg(`${msg.icon || ''} ${msg.label || ''}`, 'tool-activity');
         } else if (msg.type === 'agent_output') {
-            appendAgentText(msg.text);
+            appendAgentText(msg.text || '');
         } else if (msg.type === 'agent_fallback') {
-            addSystemMsg(t('ws.fallback', { from: msg.from, to: msg.to }), 'tool-activity');
+            addSystemMsg(t('ws.fallback', { from: msg.from || '', to: msg.to || '' }), 'tool-activity');
         } else if (msg.type === 'agent_done') {
-            finalizeAgent(msg.text, msg.toolLog);
+            finalizeAgent(msg.text || '', msg.toolLog);
         } else if (msg.type === 'orchestrate_done') {
-            finalizeAgent(msg.text);
+            finalizeAgent(msg.text || '');
         } else if (msg.type === 'clear') {
-            document.getElementById('chatMessages').innerHTML = '';
+            const el = document.getElementById('chatMessages');
+            if (el) el.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);
+            addMessage(msg.role === 'assistant' ? 'agent' : (msg.role || 'user'), 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 = '';
+            const el = document.getElementById('chatMessages');
+            if (el) el.innerHTML = '';
             m.loadMessages();
             m.setStatus('idle');
         });
@@ -71,6 +97,6 @@ export function connect() {
     };
 }
 
-export function getAgentPhase(agentId) {
+export function getAgentPhase(agentId: string): { phase: string; phaseLabel: string } | null {
     return agentPhaseState[agentId] || null;
 }

package/public/locales/en.json

@@ -177,5 +177,6 @@
     "code.copy": "Copy",
     "code.copied": "Copied ✓",
     "mcp.noServers": "(no servers configured)",
+    "mermaid.renderFail": "Mermaid render failed",
     "orchestrator.dispatching": "🎯 Dispatching tasks..."
 }

package/public/locales/ko.json

@@ -177,5 +177,6 @@
     "code.copy": "복사",
     "code.copied": "복사됨 ✓",
     "mcp.noServers": "(서버 미설정)",
+    "mermaid.renderFail": "Mermaid 렌더링 실패",
     "orchestrator.dispatching": "🎯 작업 분배 중..."
 }