cli-jaw 1.5.0 → 1.6.2

package/public/js/diagram/widget-validator.ts

@@ -0,0 +1,82 @@
+// ── Widget HTML Validator ──
+// Client-side validation for AI-generated diagram-html before iframe injection.
+// Defense-in-depth layer on top of sandbox="allow-scripts" + CSP.
+
+const CDN_ALLOWLIST = [
+  'cdnjs.cloudflare.com',
+  'cdn.jsdelivr.net',
+  'unpkg.com',
+  'esm.sh',
+  'fonts.googleapis.com',
+  'fonts.gstatic.com',
+];
+
+const DANGEROUS_PATTERNS: readonly RegExp[] = [
+  /\beval\s*\(/,
+  /\bnew\s+Function\s*\(/,
+  /\bdocument\.cookie\b/,
+  /\bwindow\.opener\b/,
+  /\bwindow\.top\b/,
+  /\bparent\.postMessage\b(?!.*jaw-)/,
+  /\blocation\.href\s*=/,
+  /\bwindow\.location\b/,
+  /\bsetTimeout\s*\(\s*["'`]/,
+  /\bsetInterval\s*\(\s*["'`]/,
+  /\.constructor\s*\.\s*constructor/,
+  /\bdocument\.write\s*\(/,
+  /\binsertAdjacentHTML\s*\(/,
+  /\bimport\s*\(/,
+];
+
+// No warn-only patterns currently — innerHTML removed (too common in onerror fallbacks)
+const WARN_PATTERNS: readonly RegExp[] = [];
+
+export interface ValidationResult {
+  valid: boolean;
+  reason?: string;
+  warnings: string[];
+}
+
+export function validateWidgetHtml(html: string): ValidationResult {
+  const warnings: string[] = [];
+
+  // 1. Size cap (redundant with activateWidgets but defense-in-depth)
+  if (html.length > 524_288) {
+    return { valid: false, reason: 'Payload too large (>512KB)', warnings };
+  }
+
+  // 2. External URL validation — only allowlisted CDN domains
+  const urlPattern = /(?:src|href)\s*=\s*["']https?:\/\/([^/"']+)/gi;
+  let match;
+  while ((match = urlPattern.exec(html)) !== null) {
+    const domain = match[1];
+    if (!CDN_ALLOWLIST.some(a => domain === a || domain.endsWith('.' + a))) {
+      return { valid: false, reason: `Blocked domain: ${domain}`, warnings };
+    }
+  }
+
+  // 3. CSS url() with external resources
+  const cssUrlPattern = /url\s*\(\s*['"]?https?:\/\/([^)'"]+)/gi;
+  while ((match = cssUrlPattern.exec(html)) !== null) {
+    const domain = match[1].split('/')[0];
+    if (!CDN_ALLOWLIST.some(a => domain === a || domain.endsWith('.' + a))) {
+      warnings.push(`CSS url() references external domain: ${domain}`);
+    }
+  }
+
+  // 4. Dangerous patterns — block
+  for (const pattern of DANGEROUS_PATTERNS) {
+    if (pattern.test(html)) {
+      return { valid: false, reason: `Dangerous pattern: ${pattern.source}`, warnings };
+    }
+  }
+
+  // 5. Warning-only patterns
+  for (const pattern of WARN_PATTERNS) {
+    if (pattern.test(html)) {
+      warnings.push(`DOM sink detected: ${pattern.source}`);
+    }
+  }
+
+  return { valid: true, warnings };
+}

package/public/js/features/chat.ts

@@ -8,12 +8,18 @@ import { api, apiJson, apiFire } from '../api.js';
 import { escapeHtml } from '../render.js';
 import { getVirtualScroll } from '../virtual-scroll.js';
 import { clearCache } from './idb-cache.js';
+import { ICONS } from '../icons.js';
 
 let activeObjectURLs: string[] = [];
 
 interface CommandResult { code?: string; text?: string; type?: string; }
 interface MessageResult { queued?: boolean; pending?: number; continued?: boolean; error?: string; }
 
+function getCommandTimeoutMs(text: string): number {
+    // Native compaction can take materially longer than the default command round-trip.
+    return /^\/compact(?:\s|$)/i.test(String(text || '').trim()) ? 5 * 60 * 1000 : 10_000;
+}
+
 export async function sendMessage(): Promise<void> {
     const input = document.getElementById('chatInput') as HTMLTextAreaElement | null;
     const btn = document.getElementById('btnSend');
@@ -41,12 +47,13 @@ export async function sendMessage(): Promise<void> {
         slashCmd.close();
         try {
             let signal: AbortSignal; let timer: ReturnType<typeof setTimeout> | undefined;
+            const timeoutMs = getCommandTimeoutMs(text);
             if (typeof AbortSignal?.timeout === 'function') {
-                signal = AbortSignal.timeout(10000);
+                signal = AbortSignal.timeout(timeoutMs);
             } else {
                 const ac = new AbortController();
                 signal = ac.signal;
-                timer = setTimeout(() => ac.abort(), 10000);
+                timer = setTimeout(() => ac.abort(), timeoutMs);
             }
             const locale = getPreferredLocale();
             const res = await fetch('/api/command', {
@@ -72,7 +79,7 @@ export async function sendMessage(): Promise<void> {
                 const chatEl = document.getElementById('chatMessages');
                 if (chatEl) chatEl.innerHTML = '';
             }
-            if (result?.text) addSystemMsg(result.text, '', result.type);
+            if (result?.text) addSystemMsg(escapeHtml(result.text), '', result.type);
         } catch (err) {
             addSystemMsg(t('chat.cmd.fail', { msg: (err as Error).message }), '', 'error');
         }
@@ -81,7 +88,7 @@ export async function sendMessage(): Promise<void> {
 
     if (state.attachedFiles.length) {
         const names = state.attachedFiles.map((f: File) => f.name).join(', ');
-        const displayMsg = `[📎 ${names}] ${text}`;
+        const displayMsg = `📎 [${names}] ${text}`;
         addMessage('user', displayMsg);
         input.value = '';
         resetInputHeight();
@@ -107,7 +114,7 @@ export async function sendMessage(): Promise<void> {
         });
         const data: MessageResult = await res.json().catch(() => ({}));
         if (!res.ok) {
-            addSystemMsg(`❌ ${data.error || t('chat.requestFail', { status: res.status })}`, '', 'error');
+            addSystemMsg(`${ICONS.error} ${escapeHtml(data.error || t('chat.requestFail', { status: res.status }))}`, '', 'error');
             return;
         }
         if (data.queued) {
@@ -182,8 +189,8 @@ function renderFilePreview(): void {
         }
         return `<div class="file-chip">
             ${thumb}
-            <span class="file-chip-name">📎 ${escapeHtml(f.name)} (${size}KB)</span>
-            <button class="file-chip-remove" data-file-idx="${i}" title="Remove">✕</button>
+            <span class="file-chip-name">${ICONS.paperclip} ${escapeHtml(f.name)} (${size}KB)</span>
+            <button class="file-chip-remove" data-file-idx="${i}" title="Remove">${ICONS.close}</button>
         </div>`;
     }).join('');
 }
@@ -198,10 +205,15 @@ export async function clearChat(): Promise<void> {
     clearCache().catch(() => {});
 }
 
-// ── Auto-resize textarea ──
+// ── Auto-resize textarea (RAF-batched to avoid blocking input) ──
+let resizeRaf = 0;
 function autoResize(el: HTMLTextAreaElement): void {
-    el.style.height = 'auto';
-    el.style.height = el.scrollHeight + 'px';
+    if (resizeRaf) return;
+    resizeRaf = requestAnimationFrame(() => {
+        resizeRaf = 0;
+        el.style.height = 'auto';
+        el.style.height = el.scrollHeight + 'px';
+    });
 }
 
 export function initAutoResize(): void {
@@ -280,7 +292,7 @@ export async function sendVoiceToServer(blob: Blob, ext: string, mime: string):
 
     // Build user-facing display message
     const displayParts: string[] = ['🎤 [음성 메시지]'];
-    if (pendingFiles.length) displayParts.push(`[📎 ${pendingFiles.map(f => f.name).join(', ')}]`);
+    if (pendingFiles.length) displayParts.push(`📎 [${pendingFiles.map(f => f.name).join(', ')}]`);
     if (pendingText) displayParts.push(pendingText);
     addMessage('user', displayParts.join(' '));
 
@@ -306,7 +318,7 @@ export async function sendVoiceToServer(blob: Blob, ext: string, mime: string):
         const sttResult = await sttRes.json().catch(() => null);
         if (!sttResult?.text) throw new Error('Empty STT result');
 
-        addSystemMsg(`🎤 STT (${sttResult.engine}, ${sttResult.elapsed?.toFixed(1)}s): "${sttResult.text.slice(0, 100)}"`, '', 'info');
+        addSystemMsg(`${ICONS.mic} STT (${escapeHtml(sttResult.engine || '')}, ${sttResult.elapsed?.toFixed(1)}s): "${escapeHtml(sttResult.text.slice(0, 100))}"`, '', 'info');
 
         // Step 2: Upload pending files (if any)
         let filePaths: string[] = [];

package/public/js/features/employees.ts

@@ -6,6 +6,7 @@ import { escapeHtml } from '../render.js';
 import { getAgentPhase } from '../ws.js';
 import { t } from './i18n.js';
 import { api, apiJson, apiFire } from '../api.js';
+import { ICONS } from '../icons.js';
 
 interface Employee {
     id: string;
@@ -80,7 +81,7 @@ export function renderEmployees(): void {
                 <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="${escapeHtml(a.id)}">
-                <button style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px" data-emp-delete="${escapeHtml(a.id)}" title="${t('emp.delete')}">✕</button>
+                <button style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px" data-emp-delete="${escapeHtml(a.id)}" title="${t('emp.delete')}">${ICONS.close}</button>
             </div>
             <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:4px">
                 <div>
@@ -108,7 +109,7 @@ export function renderEmployees(): void {
                           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)'}">● ${escapeHtml(a.status || 'idle')}</span>
+                <span style="color:${a.status === 'running' ? '#fbbf24' : 'var(--green)'}"><span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;vertical-align:middle;margin-right:4px"></span>${escapeHtml(a.status || 'idle')}</span>
                 ${phaseBadge}
             </div>
         </div>`;

package/public/js/features/heartbeat.ts

@@ -4,6 +4,7 @@ import type { HeartbeatJob, HeartbeatSchedule } from '../state.js';
 import { t } from './i18n.js';
 import { api, apiJson } from '../api.js';
 import { escapeHtml } from '../render.js';
+import { ICONS } from '../icons.js';
 import {
     validateHeartbeatScheduleInput,
     type HeartbeatScheduleValidationCode,
@@ -55,7 +56,7 @@ export function renderHeartbeatJobs(): void {
                             data-hb-name="${i}">
                         <button class="hb-toggle ${job.enabled ? 'on' : 'off'}"
                             data-hb-toggle="${i}" aria-label="${escapeHtml(String(job.name || 'job') + ' toggle')}"></button>
-                        <button class="hb-del" data-hb-remove="${i}">✕</button>
+                        <button class="hb-del" data-hb-remove="${i}">${ICONS.close}</button>
                     </div>
                     <div class="hb-job-schedule">
                         <select data-hb-kind="${i}">
@@ -76,7 +77,7 @@ export function renderHeartbeatJobs(): void {
     }
     const active = jobs.filter(j => j.enabled).length;
     const btn = document.getElementById('hbSidebarBtn');
-    if (btn) btn.textContent = `💓 Heartbeat (${active})`;
+    if (btn) btn.innerHTML = `${ICONS.heartPulse} Heartbeat (${active})`;
 }
 
 export function addHeartbeatJob(): void {
@@ -127,7 +128,7 @@ export async function initHeartbeatBadge(): Promise<void> {
         const d = await api<HeartbeatData>('/api/heartbeat');
         const active = (d?.jobs || []).map(normalizeHeartbeatJob).filter(j => j.enabled).length;
         const btn = document.getElementById('hbSidebarBtn');
-        if (btn) btn.textContent = `💓 Heartbeat (${active})`;
+        if (btn) btn.innerHTML = `${ICONS.heartPulse} Heartbeat (${active})`;
     } catch { /* ignore */ }
 }
 

package/public/js/features/memory.ts

@@ -1,6 +1,7 @@
 // ── Memory Feature ──
 import { escapeHtml } from '../render.js';
 import { api, apiJson } from '../api.js';
+import { ICONS } from '../icons.js';
 
 interface MemoryFile {
     name: string;
@@ -74,7 +75,7 @@ function syncSidebarBadge(status: AdvancedMemoryStatus | null, basicCount: numbe
         : status?.state === 'not_initialized'
             ? 'Indexing'
             : (status?.state || `(${basicCount})`);
-    sideBtn.textContent = `🧠 Memory · ${state}`;
+    sideBtn.innerHTML = `${ICONS.brain} Memory · ${escapeHtml(state)}`;
 }
 
 function renderStatusBanner(status: AdvancedMemoryStatus | null) {
@@ -174,7 +175,7 @@ function renderBasicFiles(files: MemoryFile[]) {
                 <span style="font-size:12px;font-family:monospace">${escapeHtml(f.name)}</span>
                 <span style="font-size:10px;color:var(--accent);margin-left:6px">${f.entries} entries</span>
             </div>
-            <button data-mem-delete="${escapeHtml(f.name)}" style="background:none;border:none;color:#f55;cursor:pointer;font-size:14px">🗑️</button>
+            <button data-mem-delete="${escapeHtml(f.name)}" style="background:none;border:none;color:#f55;cursor:pointer;font-size:14px">${ICONS.trash}</button>
         </div>
     `).join('');
 }
@@ -331,7 +332,7 @@ export async function viewMemFile(name: string): Promise<void> {
     container.innerHTML = `
         <div style="margin-bottom:8px;display:flex;justify-content:space-between;align-items:center">
             <span style="font-size:12px;font-weight:600">${escapeHtml(data.name)}</span>
-            <button data-mem-back style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:11px">← back</button>
+            <button data-mem-back style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:11px">${ICONS.arrowLeft} back</button>
         </div>
         <pre style="background:var(--bg);padding:8px;border-radius:4px;font-size:11px;white-space:pre-wrap;max-height:50vh;overflow-y:auto;color:var(--text)">${escapeHtml(data.content)}</pre>
     `;

package/public/js/features/process-block.ts

@@ -2,6 +2,7 @@
 // Collapsible panel showing tool/thinking activity during agent responses.
 
 import { escapeHtml } from '../render.js';
+import { ICONS } from '../icons.js';
 
 export interface ProcessStep {
     id: string;
@@ -23,13 +24,13 @@ export interface ProcessBlockState {
 function buildSummaryText(steps: ProcessStep[]): string {
     const counts: Record<string, number> = {};
     for (const s of steps) {
-        const key = s.type === 'thinking' ? '💭 Thinking'
-            : s.type === 'search' ? '🔍 Search'
-            : '🔧 Tool';
+        const key = s.type === 'thinking' ? `${ICONS.thinking} Thinking`
+            : s.type === 'search' ? `${ICONS.search} Search`
+            : `${ICONS.tool} Tool`;
         counts[key] = (counts[key] || 0) + 1;
     }
     return Object.entries(counts)
-        .map(([k, n]) => n > 1 ? `${k}×${n}` : k)
+        .map(([k, n]) => n > 1 ? `${k}&times;${n}` : k)
         .join(' + ');
 }
 
@@ -68,7 +69,7 @@ function renderStep(step: ProcessStep): string {
                     <span class="process-step-label">${label}</span>
                     ${snippetHtml}
                 </span>
-                <span class="process-step-chevron">▸</span>
+                <span class="process-step-chevron">${ICONS.chevronRight}</span>
             </button>
             <div class="process-step-details collapsed" id="${detailId}">
                 <pre class="process-step-full">${escapeHtml(detail)}</pre>
@@ -87,9 +88,9 @@ function blockShell(summaryText = '', collapsed = false): string {
     return `<div class="process-block${collapsed ? ' collapsed' : ''}">
         <button class="process-summary" aria-expanded="${collapsed ? 'false' : 'true'}">
             <span class="process-dot ${collapsed ? 'done' : 'running'}"></span>
-            <span class="process-summary-text">${escapeHtml(summaryText)}</span>
+            <span class="process-summary-text">${summaryText}</span>
             <span class="process-duration"></span>
-            <span class="process-chevron">${collapsed ? '▸' : '▾'}</span>
+            <span class="process-chevron">${collapsed ? ICONS.chevronRight : ICONS.chevronDown}</span>
         </button>
         <div class="process-details">
             <div class="process-steps-inner"></div>
@@ -106,7 +107,7 @@ function toggleStepDetails(toggle: HTMLElement): void {
     details.classList.toggle('collapsed', !expanding);
     wrapper.classList.toggle('expanded', expanding);
     toggle.setAttribute('aria-expanded', expanding ? 'true' : 'false');
-    if (chevron) chevron.textContent = expanding ? '▾' : '▸';
+    if (chevron) chevron.innerHTML = expanding ? ICONS.chevronDown : ICONS.chevronRight;
 }
 
 export function bindProcessBlockInteractions(root: HTMLElement): void {
@@ -129,7 +130,7 @@ export function bindProcessBlockInteractions(root: HTMLElement): void {
             block.classList.toggle('collapsed', !expanding);
             summary.setAttribute('aria-expanded', expanding ? 'true' : 'false');
             const chevron = summary.querySelector('.process-chevron');
-            if (chevron) chevron.textContent = expanding ? '▾' : '▸';
+            if (chevron) chevron.innerHTML = expanding ? ICONS.chevronDown : ICONS.chevronRight;
         }
     });
     root.dataset.processBlockBound = '1';
@@ -153,7 +154,7 @@ export function buildProcessBlockHtml(steps: ProcessStep[], collapsed = true): s
 
 function updateSummary(pb: ProcessBlockState): void {
     const summaryText = pb.element.querySelector('.process-summary-text');
-    if (summaryText) summaryText.textContent = buildSummaryText(pb.steps);
+    if (summaryText) summaryText.innerHTML = buildSummaryText(pb.steps);
 
     const anyRunning = pb.steps.some(s => s.status === 'running');
     const dot = pb.element.querySelector('.process-dot');
@@ -223,7 +224,7 @@ export function collapseBlock(pb: ProcessBlockState): void {
     const btn = pb.element.querySelector('.process-summary');
     if (btn) btn.setAttribute('aria-expanded', 'false');
     const chevron = pb.element.querySelector('.process-chevron');
-    if (chevron) chevron.textContent = '▸';
+    if (chevron) chevron.innerHTML = ICONS.chevronRight;
 
     for (const step of pb.steps) {
         if (step.status === 'running') step.status = 'done';

package/public/js/features/settings-cli-status.ts

@@ -3,6 +3,8 @@ import { api } from '../api.js';
 import { escapeHtml } from '../render.js';
 import { t } from './i18n.js';
 import { state } from '../state.js';
+import { ICONS } from '../icons.js';
+import { providerIcon } from '../provider-icons.js';
 import type { QuotaEntry } from './settings-types.js';
 
 export async function loadCliStatus(force = false): Promise<void> {
@@ -113,14 +115,15 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             }).join('');
         } else if (q?.error && info.available) {
             const msg = q.reason === 'rate_limited' ? 'Rate limited — retry in a moment' : 'Usage data unavailable';
-            windowsHtml = `<div style="font-size:10px;color:var(--text-dim);margin:2px 0 0 16px;opacity:0.7">⚠ ${msg}</div>`;
+            windowsHtml = `<div style="font-size:10px;color:var(--text-dim);margin:2px 0 0 16px;opacity:0.7">${ICONS.warning} ${msg}</div>`;
         }
 
         html += `
             <div class="settings-group" style="margin-bottom:6px;padding:8px 10px">
                 <div class="cli-status-row">
                     <span class="cli-dot ${dotClass}"></span>
-                    <span class="cli-name" style="font-weight:600">${escapeHtml(name)}</span>${name === 'copilot' ? `<button id="copilotKeychainBtn" style="font-size:9px;margin-left:6px;padding:1px 5px;background:var(--border);color:var(--text-dim);border:1px solid var(--text-dim);border-radius:3px;cursor:pointer;vertical-align:middle;line-height:1" title="${t('copilot.keychainHint')}">🔑</button>` : ''}
+                    <span class="cli-provider-icon" aria-hidden="true">${providerIcon(name) || ''}</span>
+                    <span class="cli-name" style="font-weight:600">${escapeHtml(name)}</span>${name === 'copilot' ? `<button id="copilotKeychainBtn" style="font-size:9px;margin-left:6px;padding:1px 5px;background:var(--border);color:var(--text-dim);border:1px solid var(--text-dim);border-radius:3px;cursor:pointer;vertical-align:middle;line-height:1" title="${t('copilot.keychainHint')}">${ICONS.key}</button>` : ''}
                 </div>
                 ${accountLine}
                 ${authHint}
@@ -140,7 +143,7 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
     if (!hasReadyCli && allEntries.length > 0 && el) {
         el.insertAdjacentHTML('afterbegin',
             `<div style="padding:8px 10px;margin-bottom:8px;background:#fbbf2422;border:1px solid #fbbf24;border-radius:6px;font-size:11px;color:#fbbf24">
-                ⚠ ${t('cli.noReadyCli')}
+                ${ICONS.warning} ${t('cli.noReadyCli')}
             </div>`
         );
     }
@@ -150,15 +153,15 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
         kcBtn.addEventListener('click', async () => {
             const btn = kcBtn as HTMLButtonElement;
             btn.disabled = true;
-            btn.textContent = '⏳';
+            btn.innerHTML = ICONS.hourglass;
             try {
                 const res = await api<{ ok: boolean }>('/api/copilot/refresh', { method: 'POST' });
-                btn.textContent = res?.ok ? '✅' : '❌';
+                btn.innerHTML = res?.ok ? ICONS.check : ICONS.error;
                 if (res?.ok) await loadCliStatus(true);
             } catch {
-                btn.textContent = '❌';
+                btn.innerHTML = ICONS.error;
             }
-            setTimeout(() => { btn.textContent = '🔑'; btn.disabled = false; }, 2000);
+            setTimeout(() => { btn.innerHTML = ICONS.key; btn.disabled = false; }, 2000);
         });
     }
 }

package/public/js/features/settings-core.ts

@@ -10,6 +10,7 @@ import { loadTelegramSettings } from './settings-telegram.js';
 import { loadDiscordSettings } from './settings-discord.js';
 import { loadActiveChannel, loadFallbackOrder } from './settings-channel.js';
 import { loadMcpServers } from './settings-mcp.js';
+import { providerIcon } from '../provider-icons.js';
 
 function toCap(cli: string): string {
     return cli.charAt(0).toUpperCase() + cli.slice(1);
@@ -150,7 +151,10 @@ export async function loadSettings(): Promise<void> {
     const cwdEl = document.getElementById('inpCwd');
     if (cwdEl) cwdEl.textContent = s.workingDir;
     const headerEl = document.getElementById('headerCli');
-    if (headerEl) headerEl.textContent = s.cli;
+    if (headerEl) {
+        const icon = providerIcon(s.cli);
+        headerEl.innerHTML = icon ? `${icon} ${escapeHtml(s.cli)}` : escapeHtml(s.cli);
+    }
     setPerm(s.permissions, false);
 
     if (s.perCli) {
@@ -214,7 +218,10 @@ export async function updateSettings(): Promise<void> {
         cli: (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude',
     };
     const hdr = document.getElementById('headerCli');
-    if (hdr) hdr.textContent = s.cli;
+    if (hdr) {
+        const ico = providerIcon(s.cli);
+        hdr.innerHTML = ico ? `${ico} ${escapeHtml(s.cli)}` : escapeHtml(s.cli);
+    }
     await apiJson('/api/settings', 'PUT', s);
 }
 
@@ -295,7 +302,10 @@ export function onCliChange(save = true): void {
     const modelSel = document.getElementById('selModel') as HTMLSelectElement | null;
     setSelectOptions(modelSel, models, { includeCustom: true, includeDefault: true });
     const hdrCli = document.getElementById('headerCli');
-    if (hdrCli) hdrCli.textContent = cli;
+    if (hdrCli) {
+        const ico = providerIcon(cli);
+        hdrCli.innerHTML = ico ? `${ico} ${escapeHtml(cli)}` : escapeHtml(cli);
+    }
     syncActiveEffortOptions(cli);
 
     const oldInput = document.getElementById('selModelCustom');

package/public/js/features/settings-discord.ts

@@ -30,6 +30,12 @@ export async function setDiscordAllowBots(allow: boolean): Promise<void> {
     await apiJson('/api/settings', 'PUT', { discord: { allowBots: allow } });
 }
 
+export async function setDiscordMentionOnly(enabled: boolean): Promise<void> {
+    document.getElementById('dcMentionOn')?.classList.toggle('active', enabled);
+    document.getElementById('dcMentionOff')?.classList.toggle('active', !enabled);
+    await apiJson('/api/settings', 'PUT', { discord: { mentionOnly: enabled } });
+}
+
 export function loadDiscordSettings(s: SettingsData): void {
     if (!s.discord) return;
     const dc = s.discord;
@@ -49,4 +55,7 @@ export function loadDiscordSettings(s: SettingsData): void {
     const allowBots = !!dc.allowBots;
     document.getElementById('dcAllowBotsOn')?.classList.toggle('active', allowBots);
     document.getElementById('dcAllowBotsOff')?.classList.toggle('active', !allowBots);
+    const mentionOnly = !!dc.mentionOnly;
+    document.getElementById('dcMentionOn')?.classList.toggle('active', mentionOnly);
+    document.getElementById('dcMentionOff')?.classList.toggle('active', !mentionOnly);
 }

package/public/js/features/settings-mcp.ts

@@ -2,6 +2,7 @@
 import { api, apiJson } from '../api.js';
 import { escapeHtml } from '../render.js';
 import { t } from './i18n.js';
+import { ICONS } from '../icons.js';
 
 interface McpData { servers: Record<string, { command: string; args?: string[] }>; }
 interface McpSyncResult { results: Record<string, boolean>; }
@@ -29,12 +30,12 @@ export async function syncMcpServers(): Promise<void> {
     resultEl.textContent = t('mcp.syncing');
     try {
         const d = await apiJson('/api/mcp/sync', 'POST', {}) as McpSyncResult | null;
-        if (!d) { resultEl.textContent = '❌ sync failed'; return; }
+        if (!d) { resultEl.innerHTML = `${ICONS.error} sync failed`; return; }
         const r = d.results || {};
         resultEl.innerHTML = Object.entries(r).map(([k, v]) =>
-            `${v ? '✅' : '⏭️'} ${escapeHtml(k)}`
+            `${v ? ICONS.check : ICONS.skip} ${escapeHtml(k)}`
         ).join(' &nbsp; ');
-    } catch (e) { resultEl.textContent = '❌ ' + (e as Error).message; }
+    } catch (e) { resultEl.innerHTML = `${ICONS.error} ${escapeHtml((e as Error).message)}`; }
 }
 
 export async function installMcpGlobal(): Promise<void> {
@@ -44,11 +45,11 @@ export async function installMcpGlobal(): Promise<void> {
     resultEl.textContent = t('mcp.installing');
     try {
         const d = await apiJson('/api/mcp/install', 'POST', {}) as McpInstallResult | null;
-        if (!d) { resultEl.textContent = '❌ install failed'; return; }
+        if (!d) { resultEl.innerHTML = `${ICONS.error} install failed`; return; }
         resultEl.innerHTML = Object.entries(d.results || {}).map(([k, v]) => {
-            const icon = v.status === 'installed' ? '✅' : v.status === 'skip' ? '⏭️' : '❌';
-            return `${icon} <b>${escapeHtml(k)}</b>: ${escapeHtml(v.status)}${v.bin ? ' → ' + escapeHtml(v.bin) : ''}`;
+            const ic = v.status === 'installed' ? ICONS.check : v.status === 'skip' ? ICONS.skip : ICONS.error;
+            return `${ic} <b>${escapeHtml(k)}</b>: ${escapeHtml(v.status)}${v.bin ? ` ${ICONS.arrowRight} ` + escapeHtml(v.bin) : ''}`;
         }).join('<br>');
         loadMcpServers();
-    } catch (e) { resultEl.textContent = '❌ ' + (e as Error).message; }
+    } catch (e) { resultEl.innerHTML = `${ICONS.error} ${escapeHtml((e as Error).message)}`; }
 }

package/public/js/features/settings-stt.ts

@@ -13,7 +13,7 @@ export function initSttSettings(sttConfig: Record<string, any>): void {
     const vertexJson = document.getElementById('sttVertexJson') as HTMLTextAreaElement | null;
 
     if (engine) engine.value = sttConfig.engine || 'auto';
-    if (geminiKey) geminiKey.placeholder = sttConfig.geminiKeySet ? `✅ 입력됨 ····${sttConfig.geminiKeyLast4 || ''}` : 'AIza...';
+    if (geminiKey) geminiKey.placeholder = sttConfig.geminiKeySet ? `✓ 입력됨 ····${sttConfig.geminiKeyLast4 || ''}` : 'AIza...';
     if (geminiModel) {
         const saved = sttConfig.geminiModel || 'gemini-2.5-flash-lite';
         const hasOption = Array.from(geminiModel.options).some(o => o.value === saved);
@@ -22,7 +22,7 @@ export function initSttSettings(sttConfig: Record<string, any>): void {
     }
     if (whisperModel) whisperModel.value = sttConfig.whisperModel || 'mlx-community/whisper-large-v3-turbo';
     if (openaiBaseUrl) openaiBaseUrl.value = sttConfig.openaiBaseUrl || '';
-    if (openaiKey) openaiKey.placeholder = sttConfig.openaiKeySet ? `✅ 입력됨 ····${sttConfig.openaiKeyLast4 || ''}` : 'sk-...';
+    if (openaiKey) openaiKey.placeholder = sttConfig.openaiKeySet ? `✓ 입력됨 ····${sttConfig.openaiKeyLast4 || ''}` : 'sk-...';
     if (openaiModel) openaiModel.value = sttConfig.openaiModel || '';
     if (vertexJson) vertexJson.value = sttConfig.vertexConfig || '';
 
@@ -55,8 +55,8 @@ export function initSttSettings(sttConfig: Record<string, any>): void {
         console.log('[stt] saving:', { engine: patch.stt.engine, hasGeminiKey: !!patch.stt.geminiApiKey, hasOpenaiKey: !!patch.stt.openaiApiKey });
         try {
             await apiJson('/api/settings', 'PUT', patch);
-            if (geminiKey?.value) { const l4 = geminiKey.value.slice(-4); geminiKey.value = ''; geminiKey.placeholder = `✅ 입력됨 ····${l4}`; }
-            if (openaiKey?.value) { const l4 = openaiKey.value.slice(-4); openaiKey.value = ''; openaiKey.placeholder = `✅ 입력됨 ····${l4}`; }
+            if (geminiKey?.value) { const l4 = geminiKey.value.slice(-4); geminiKey.value = ''; geminiKey.placeholder = `✓ 입력됨 ····${l4}`; }
+            if (openaiKey?.value) { const l4 = openaiKey.value.slice(-4); openaiKey.value = ''; openaiKey.placeholder = `✓ 입력됨 ····${l4}`; }
         } catch (e) {
             console.error('[stt] save failed:', e);
         }

package/public/js/features/settings-templates.ts

@@ -1,5 +1,7 @@
 // ── Prompt & Template Modals ──
 import { api, apiJson } from '../api.js';
+import { ICONS } from '../icons.js';
+import { escapeHtml } from '../render.js';
 
 // ── Prompt Modal ──
 
@@ -55,7 +57,7 @@ function renderTree(tree: TreeNode[]): void {
             if (!tmpl) continue;
             const node = document.createElement('div');
             node.style.cssText = 'background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;margin:2px 0 2px 24px;font-size:12px;cursor:pointer;transition:border-color .15s';
-            node.textContent = `📄 ${tmpl.filename}`;
+            node.innerHTML = `${ICONS.file} ${escapeHtml(tmpl.filename)}`;
             node.addEventListener('mouseenter', () => { node.style.borderColor = 'var(--accent2)'; });
             node.addEventListener('mouseleave', () => { node.style.borderColor = 'var(--border)'; });
             node.addEventListener('click', () => { openTemplateEditor(tmpl); });
@@ -71,22 +73,22 @@ function openTemplateEditor(tmpl: TemplateInfo): void {
     editor.readOnly = true;
     _devMode = false;
     const label = document.getElementById('templateEditorLabel');
-    if (label) label.textContent = `📄 ${tmpl.filename}`;
+    if (label) label.innerHTML = `${ICONS.file} ${escapeHtml(tmpl.filename)}`;
     const vars = tmpl.content.match(/\{\{[A-Z_]+\}\}/g);
     const varsEl = document.getElementById('templateVars');
     if (varsEl) varsEl.textContent = vars ? `vars: ${[...new Set(vars)].join(', ')}` : 'no variables';
     const saveBtn = document.getElementById('templateSaveBtn');
     if (saveBtn) saveBtn.style.display = 'none';
     const toggle = document.getElementById('templateDevToggle');
-    if (toggle) { toggle.style.color = 'var(--text-dim)'; toggle.style.borderColor = 'var(--border)'; toggle.textContent = '🔧 개발자 모드'; }
+    if (toggle) { toggle.style.color = 'var(--text-dim)'; toggle.style.borderColor = 'var(--border)'; toggle.innerHTML = `${ICONS.tool} 개발자 모드`; }
     const title = document.getElementById('templateModalTitle');
-    if (title) title.textContent = `📄 ${tmpl.filename}`;
+    if (title) title.innerHTML = `${ICONS.file} ${escapeHtml(tmpl.filename)}`;
     showTemplateView('editor');
 }
 
 export function toggleDevMode(): void {
     if (!_devMode) {
-        if (!confirm('⚠️ 프롬프트를 직접 수정하면 예상치 못한 동작이 발생할 수 있습니다.\n계속하시겠습니까?')) return;
+        if (!confirm('⚠ 프롬프트를 직접 수정하면 예상치 못한 동작이 발생할 수 있습니다.\n계속하시겠습니까?')) return;
     }
     _devMode = !_devMode;
     const editor = document.getElementById('templateEditor') as HTMLTextAreaElement;
@@ -97,7 +99,7 @@ export function toggleDevMode(): void {
     if (toggle) {
         toggle.style.color = _devMode ? 'var(--stop-btn)' : 'var(--text-dim)';
         toggle.style.borderColor = _devMode ? 'var(--stop-btn)' : 'var(--border)';
-        toggle.textContent = _devMode ? '🔓 개발자 모드 ON' : '🔧 개발자 모드';
+        toggle.innerHTML = _devMode ? `${ICONS.lockOpen} 개발자 모드 ON` : `${ICONS.tool} 개발자 모드`;
     }
 }
 
@@ -107,7 +109,7 @@ export async function saveTemplateFromModal(): Promise<void> {
     if (!id) return;
     await apiJson(`/api/prompt-templates/${id}`, 'PUT', { content: editor.value });
     const label = document.getElementById('templateEditorLabel');
-    if (label) { label.textContent = '✅ 저장 + 핫리로드 완료!'; setTimeout(() => { label.textContent = `📄 ${id}.md`; }, 2000); }
+    if (label) { label.innerHTML = `${ICONS.check} 저장 + 핫리로드 완료!`; setTimeout(() => { label.innerHTML = `${ICONS.file} ${escapeHtml(id)}.md`; }, 2000); }
     const t = _templates.find(x => x.id === id);
     if (t) t.content = editor.value;
 }
@@ -118,7 +120,7 @@ function showTemplateView(view: 'tree' | 'editor'): void {
     if (treeView) treeView.style.display = view === 'tree' ? '' : 'none';
     if (editorView) editorView.style.display = view === 'editor' ? 'flex' : 'none';
     const title = document.getElementById('templateModalTitle');
-    if (title && view === 'tree') title.textContent = '📝 프롬프트 구조';
+    if (title && view === 'tree') title.innerHTML = `${ICONS.plan} 프롬프트 구조`;
 }
 
 export function templateGoBack(): void { showTemplateView('tree'); }