cli-jaw 1.2.9 → 1.3.0-preview.0

package/public/index.html

@@ -89,6 +89,7 @@
             </div>
             <button class="sidebar-hb-btn" id="btnClearChat">/clear</button>
             <button class="sidebar-hb-btn" id="hbSidebarBtn">💓 Heartbeat (0)</button>
+            <button class="sidebar-hb-btn" data-action="openTemplates">📝 프롬프트 템플릿</button>
             <button class="sidebar-hb-btn" id="langToggle" title="한국어 ⇄ English">🌐 한국어</button>
         </div>
     </nav>
@@ -136,6 +137,8 @@
                 style="display:none"></div>
             <button class="btn-attach" data-i18n-title="btn.attach" title="파일 첨부">📎</button>
             <input type="file" id="fileInput" hidden multiple>
+            <button class="btn-voice" id="btnVoice" data-i18n-title="voice.start" title="음성 녹음">🎤</button>
+            <span class="voice-timer" id="voiceTimer" style="display:none">00:00</span>
             <textarea class="chat-input" id="chatInput" rows="1" data-i18n-placeholder="input.placeholder"
                 placeholder="메시지 입력..." aria-label="Chat message input" aria-haspopup="listbox" aria-expanded="false"
                 aria-controls="cmdDropdown" aria-autocomplete="list" aria-activedescendant=""></textarea>
@@ -484,6 +487,44 @@
         <button id="mobileMenuRight" aria-label="Open settings">⚙️ Settings</button>
     </div>
 
+    <!-- Template Editor Modal (Node Map + Editor 2-view) -->
+    <div class="modal-overlay" id="templateModal" role="dialog" aria-modal="true" aria-label="Prompt templates">
+        <div class="modal-box" style="width:640px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column">
+            <div class="modal-header">
+                <span id="templateModalTitle">📝 프롬프트 구조</span>
+                <button data-action="closeTemplate"
+                    style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px">✕</button>
+            </div>
+            <!-- View 1: Node Map -->
+            <div id="templateTreeView" style="flex:1;overflow-y:auto;padding:12px 16px">
+                <div id="templateTree"></div>
+                <div style="padding:8px 0;font-size:11px;color:var(--text-dim)">
+                    🔒 클릭하면 프롬프트 내용 확인 · ⚠️ 개발자 모드에서 편집
+                </div>
+            </div>
+            <!-- View 2: Editor (hidden by default) -->
+            <div id="templateEditorView" style="display:none;flex-direction:column">
+                <div style="display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border)">
+                    <button id="templateBack"
+                        style="background:none;border:1px solid var(--border);color:var(--text-dim);padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px">←
+                        뒤로</button>
+                    <span id="templateEditorLabel" style="flex:1;font-size:12px;color:var(--text-dim)"></span>
+                    <button id="templateDevToggle"
+                        style="background:var(--bg);border:1px solid var(--border);color:var(--text-dim);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px">🔧
+                        개발자 모드</button>
+                </div>
+                <textarea class="modal-textarea" id="templateEditor" readonly
+                    style="flex:1;min-height:350px;font-family:var(--font-mono);font-size:12px"></textarea>
+                <div class="modal-footer">
+                    <span id="templateVars"
+                        style="color:var(--text-dim);font-size:10px;margin-right:auto"></span>
+                    <button class="btn-save" data-action="saveTemplate" style="display:none"
+                        id="templateSaveBtn">💾 저장</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script type="module" src="/dist/bundle.js"></script>
 </body>
 

package/public/js/features/chat.ts

@@ -251,3 +251,28 @@ export function initDragDrop(): void {
         }
     });
 }
+
+/** Upload recorded voice blob and send to /api/voice for STT */
+export async function sendVoiceToServer(blob: Blob, ext: string, mime: string): Promise<void> {
+    addMessage('user', '🎤 [음성 메시지]');
+    try {
+        const res = await fetch('/api/voice', {
+            method: 'POST',
+            headers: {
+                'Content-Type': mime,
+                'X-Voice-Ext': ext,
+            },
+            body: blob,
+        });
+        if (!res.ok) {
+            const data = await res.json().catch(() => ({}));
+            throw new Error(data.error || `HTTP ${res.status}`);
+        }
+        const result = await res.json().catch(() => null);
+        if (result?.text) {
+            addSystemMsg(`🎤 STT (${result.engine}, ${result.elapsed?.toFixed(1)}s): "${result.text.slice(0, 100)}"`, '', 'info');
+        }
+    } catch (err) {
+        addSystemMsg(t('voice.sttFail', { msg: (err as Error).message }), '', 'error');
+    }
+}

package/public/js/features/settings.ts

@@ -495,7 +495,6 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             if (parts.length) accountLine = `<div style="font-size:10px;color:var(--text-dim);margin:2px 0 4px 16px">${escapeHtml(parts.join(' · '))}</div>`;
         }
 
-        // Auth hint when CLI is not available OR not authenticated
         let authHint = '';
         if (!info.available || dotClass === 'warn') {
             const hint = AUTH_HINTS[name];
@@ -534,7 +533,7 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             <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">${name}</span>
+                    <span class="cli-name" style="font-weight:600">${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>` : ''}
                 </div>
                 ${accountLine}
                 ${authHint}
@@ -544,6 +543,24 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
     }
 
     if (el) el.innerHTML = html;
+
+    // Copilot keychain refresh handler — shows each token source result
+    const kcBtn = document.getElementById('copilotKeychainBtn');
+    if (kcBtn) {
+        kcBtn.addEventListener('click', async () => {
+            const btn = kcBtn as HTMLButtonElement;
+            btn.disabled = true;
+            btn.textContent = '⏳';
+            try {
+                const res = await api<{ ok: boolean }>('/api/copilot/refresh', { method: 'POST' });
+                btn.textContent = res?.ok ? '✅' : '❌';
+                if (res?.ok) await loadCliStatus(true);
+            } catch {
+                btn.textContent = '❌';
+            }
+            setTimeout(() => { btn.textContent = '🔑'; btn.disabled = false; }, 2000);
+        });
+    }
 }
 
 // ── Prompt Modal ──
@@ -567,3 +584,107 @@ export async function savePromptFromModal(): Promise<void> {
     await apiJson('/api/prompt', 'PUT', { content });
     document.getElementById('promptModal')?.classList.remove('open');
 }
+
+// ── Template Modal (Node Map + Editor) ──
+
+interface TemplateInfo { id: string; filename: string; content: string; }
+interface TreeNode { id: string; label: string; emoji: string; children: string[]; }
+let _templates: TemplateInfo[] = [];
+let _devMode = false;
+
+export async function openTemplateModal(): Promise<void> {
+    const data = await api<{ templates: TemplateInfo[]; tree: TreeNode[] }>('/api/prompt-templates');
+    if (!data) return;
+    _templates = data.templates;
+    _devMode = false;
+    renderTree(data.tree);
+    showTemplateView('tree');
+    document.getElementById('templateModal')?.classList.add('open');
+}
+
+function renderTree(tree: TreeNode[]): void {
+    const container = document.getElementById('templateTree');
+    if (!container) return;
+    container.innerHTML = '';
+    for (const group of tree) {
+        const main = document.createElement('div');
+        main.style.cssText = 'background:var(--bg);border:1px solid var(--accent);border-radius:6px;padding:8px 10px;margin:8px 0 4px;font-size:12px;color:var(--accent);font-weight:600';
+        main.textContent = `${group.emoji} ${group.label}`;
+        container.appendChild(main);
+        for (const childId of group.children) {
+            const tmpl = _templates.find(t => t.id === childId);
+            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.addEventListener('mouseenter', () => { node.style.borderColor = 'var(--accent2)'; });
+            node.addEventListener('mouseleave', () => { node.style.borderColor = 'var(--border)'; });
+            node.addEventListener('click', () => { openTemplateEditor(tmpl); });
+            container.appendChild(node);
+        }
+    }
+}
+
+function openTemplateEditor(tmpl: TemplateInfo): void {
+    const editor = document.getElementById('templateEditor') as HTMLTextAreaElement;
+    editor.value = tmpl.content;
+    editor.dataset.templateId = tmpl.id;
+    editor.readOnly = true;
+    _devMode = false;
+    const label = document.getElementById('templateEditorLabel');
+    if (label) label.textContent = `📄 ${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 = '🔧 개발자 모드'; }
+    const title = document.getElementById('templateModalTitle');
+    if (title) title.textContent = `📄 ${tmpl.filename}`;
+    showTemplateView('editor');
+}
+
+export function toggleDevMode(): void {
+    if (!_devMode) {
+        if (!confirm('⚠️ 프롬프트를 직접 수정하면 예상치 못한 동작이 발생할 수 있습니다.\n계속하시겠습니까?')) return;
+    }
+    _devMode = !_devMode;
+    const editor = document.getElementById('templateEditor') as HTMLTextAreaElement;
+    editor.readOnly = !_devMode;
+    const saveBtn = document.getElementById('templateSaveBtn');
+    if (saveBtn) saveBtn.style.display = _devMode ? '' : 'none';
+    const toggle = document.getElementById('templateDevToggle');
+    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' : '🔧 개발자 모드';
+    }
+}
+
+export async function saveTemplateFromModal(): Promise<void> {
+    const editor = document.getElementById('templateEditor') as HTMLTextAreaElement;
+    const id = editor.dataset.templateId;
+    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); }
+    const t = _templates.find(x => x.id === id);
+    if (t) t.content = editor.value;
+}
+
+function showTemplateView(view: 'tree' | 'editor'): void {
+    const treeView = document.getElementById('templateTreeView');
+    const editorView = document.getElementById('templateEditorView');
+    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 = '📝 프롬프트 구조';
+}
+
+export function templateGoBack(): void { showTemplateView('tree'); }
+
+export function closeTemplateModal(e?: Event): void {
+    if (e && e.target !== e.currentTarget) return;
+    document.getElementById('templateModal')?.classList.remove('open');
+}

package/public/js/features/voice-recorder.ts

@@ -0,0 +1,150 @@
+// ── Voice Recorder Feature ──
+// Cross-platform: Chrome/Firefox/Edge (webm/opus), Safari (mp4/aac)
+import { state } from '../state.js';
+import { addSystemMsg } from '../ui.js';
+import { t } from './i18n.js';
+import { sendVoiceToServer } from './chat.js';
+
+let mediaRecorder: MediaRecorder | null = null;
+let chunks: Blob[] = [];
+let recordingStream: MediaStream | null = null;
+let timerInterval: ReturnType<typeof setInterval> | null = null;
+let startTime = 0;
+
+/** Pick best supported MIME type for cross-platform */
+function pickMime(): string {
+    if (typeof MediaRecorder === 'undefined') return '';
+    const candidates = [
+        'audio/webm;codecs=opus',   // Chrome, Firefox, Edge
+        'audio/mp4',                 // Safari (macOS/iOS)
+        'audio/ogg;codecs=opus',     // Firefox fallback
+    ];
+    for (const m of candidates) {
+        if (MediaRecorder.isTypeSupported(m)) return m;
+    }
+    return ''; // browser default
+}
+
+/** Classify getUserMedia errors into user-friendly messages */
+function classifyMicError(err: unknown): string {
+    const e = err as DOMException;
+    switch (e.name) {
+        case 'NotAllowedError':
+            return t('voice.micDenied');
+        case 'NotFoundError':
+            return t('voice.micNotFound');
+        case 'NotReadableError':
+        case 'AbortError':
+            return t('voice.micBusy');
+        default:
+            if (e instanceof TypeError || !navigator.mediaDevices) {
+                return t('voice.httpsRequired');
+            }
+            return t('voice.micDenied');
+    }
+}
+
+export async function startRecording(): Promise<void> {
+    if (state.isRecording) return;
+
+    // Feature detection
+    if (typeof MediaRecorder === 'undefined' || !navigator.mediaDevices?.getUserMedia) {
+        addSystemMsg(t('voice.unsupported'), '', 'error');
+        return;
+    }
+
+    try {
+        recordingStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    } catch (err) {
+        addSystemMsg(classifyMicError(err), '', 'error');
+        return;
+    }
+
+    const mimeType = pickMime();
+    const options: MediaRecorderOptions = mimeType ? { mimeType } : {};
+    mediaRecorder = new MediaRecorder(recordingStream, options);
+    chunks = [];
+
+    mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunks.push(e.data);
+    };
+
+    mediaRecorder.onerror = () => {
+        stopRecording();
+        addSystemMsg(t('voice.interrupted'), '', 'error');
+    };
+
+    mediaRecorder.onstop = async () => {
+        const actualMime = mediaRecorder?.mimeType || mimeType || 'audio/webm';
+        const ext = actualMime.includes('mp4') ? '.m4a'
+                  : actualMime.includes('ogg') ? '.ogg'
+                  : '.webm';
+        const blob = new Blob(chunks, { type: actualMime });
+        chunks = [];
+        releaseStream();
+
+        if (blob.size > 20 * 1024 * 1024) {
+            addSystemMsg(t('voice.tooLarge'), '', 'error');
+            return;
+        }
+        if (blob.size < 1000) {
+            addSystemMsg(t('voice.tooShort'), '', 'error');
+            return;
+        }
+
+        await sendVoiceToServer(blob, ext, actualMime);
+    };
+
+    // iOS Safari: no timeslice support → call start() without args
+    mediaRecorder.start();
+    state.isRecording = true;
+    startTime = Date.now();
+    updateRecordingUI(true);
+    startTimer();
+}
+
+export function stopRecording(): void {
+    if (!state.isRecording || !mediaRecorder) return;
+    if (mediaRecorder.state === 'recording') {
+        mediaRecorder.stop();
+    }
+    state.isRecording = false;
+    stopTimer();
+    updateRecordingUI(false);
+}
+
+export function toggleRecording(): void {
+    if (state.isRecording) stopRecording();
+    else startRecording();
+}
+
+function releaseStream(): void {
+    recordingStream?.getTracks().forEach(track => track.stop());
+    recordingStream = null;
+}
+
+function startTimer(): void {
+    const el = document.getElementById('voiceTimer');
+    if (!el) return;
+    el.style.display = 'inline';
+    timerInterval = setInterval(() => {
+        const sec = Math.floor((Date.now() - startTime) / 1000);
+        const m = String(Math.floor(sec / 60)).padStart(2, '0');
+        const s = String(sec % 60).padStart(2, '0');
+        el.textContent = `${m}:${s}`;
+    }, 500);
+}
+
+function stopTimer(): void {
+    if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
+    const el = document.getElementById('voiceTimer');
+    if (el) { el.style.display = 'none'; el.textContent = '00:00'; }
+}
+
+function updateRecordingUI(recording: boolean): void {
+    const btn = document.getElementById('btnVoice');
+    if (!btn) return;
+    btn.classList.toggle('recording', recording);
+    btn.textContent = recording ? '⏹' : '🎤';
+    btn.title = recording ? t('voice.stop') : t('voice.start');
+}

package/public/js/main.ts

@@ -22,7 +22,8 @@ import {
     loadSettings, setPerm, handleModelSelect, applyCustomModel, onCliChange,
     saveActiveCliSettings, savePerCli, updateSettings, openPromptModal,
     closePromptModal, savePromptFromModal, syncMcpServers, installMcpGlobal,
-    loadCliStatus, setTelegram, setForwardAll, saveTelegramSettings, saveFallbackOrder
+    loadCliStatus, setTelegram, setForwardAll, saveTelegramSettings, saveFallbackOrder,
+    openTemplateModal, saveTemplateFromModal, closeTemplateModal, templateGoBack, toggleDevMode
 } from './features/settings.js';
 import {
     loadEmployees, addEmployee, deleteEmployee, updateEmployee,
@@ -43,6 +44,7 @@ import { initAppName } from './features/appname.js';
 import { initSidebar, toggleLeft, toggleRight } from './features/sidebar.js';
 import { initTheme } from './features/theme.js';
 import { initI18n, setLang, getLang, t } from './features/i18n.js';
+import { toggleRecording } from './features/voice-recorder.js';
 
 // ── Chat Actions ──
 document.getElementById('btnSend')?.addEventListener('click', sendMessage);
@@ -73,6 +75,7 @@ document.getElementById('filePreviewList')?.addEventListener('click', (e) => {
 document.querySelector('.btn-attach')?.addEventListener('click', () => {
     (document.getElementById('fileInput') as HTMLInputElement | null)?.click();
 });
+document.getElementById('btnVoice')?.addEventListener('click', () => toggleRecording());
 
 // ── Left Sidebar ──
 document.getElementById('memorySidebarBtn')?.addEventListener('click', openMemoryModal);
@@ -195,6 +198,15 @@ document.querySelector('[data-action="cancelPrompt"]')?.addEventListener('click'
 document.querySelector('[data-action="savePrompt"]')?.addEventListener('click', savePromptFromModal);
 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePromptModal(); });
 
+// ── Template Modal ──
+document.querySelector('[data-action="openTemplates"]')?.addEventListener('click', openTemplateModal);
+document.querySelector('[data-action="saveTemplate"]')?.addEventListener('click', saveTemplateFromModal);
+document.querySelector('[data-action="closeTemplate"]')?.addEventListener('click', () => closeTemplateModal());
+document.getElementById('templateModal')?.addEventListener('click', (e) => closeTemplateModal(e));
+document.querySelector('#templateModal .modal-box')?.addEventListener('click', (e) => e.stopPropagation());
+document.getElementById('templateBack')?.addEventListener('click', templateGoBack);
+document.getElementById('templateDevToggle')?.addEventListener('click', toggleDevMode);
+
 // ── Heartbeat Modal ──
 document.getElementById('heartbeatModal')?.addEventListener('click', (e) => closeHeartbeatModal(e));
 document.querySelector('#heartbeatModal .modal-box')?.addEventListener('click', (e) => e.stopPropagation());

package/public/js/state.ts

@@ -25,6 +25,7 @@ export interface AppState {
     heartbeatJobs: HeartbeatJob[];
     cliStatusCache: CliStatusCache | null;
     cliStatusTs: number;
+    isRecording: boolean;
 }
 
 export const state: AppState = {
@@ -39,4 +40,5 @@ export const state: AppState = {
     cliStatusCache: null,
     cliStatusTs: 0,
     orcState: 'IDLE',
+    isRecording: false,
 };

package/public/locales/en.json

@@ -94,6 +94,21 @@
     "tg.imageCaption": "[📷 Image] {caption}",
     "tg.imageFail": "❌ Image processing failed: {msg}",
     "tg.fileFail": "❌ File processing failed: {msg}",
+    "tg.voiceFail": "❌ Voice transcription failed: {msg}",
+    "tg.voiceEmpty": "🤔 Couldn't understand the voice message. Please try again.",
+    "voice.start": "Record voice",
+    "voice.stop": "Stop recording",
+    "voice.micDenied": "🎤 Microphone access denied. Please allow microphone in browser settings.",
+    "voice.micNotFound": "🎤 No microphone found. Please connect a microphone.",
+    "voice.micBusy": "🎤 Microphone is in use by another app.",
+    "voice.httpsRequired": "🎤 Voice recording requires HTTPS or localhost.",
+    "voice.unsupported": "🎤 Voice recording is not supported in this browser.",
+    "voice.interrupted": "⚠️ Recording was interrupted.",
+    "voice.tooLarge": "⚠️ Recording too large (max 20MB).",
+    "voice.tooShort": "⚠️ Recording too short.",
+    "voice.sttFail": "❌ Voice recognition failed: {msg}",
+    "copilot.keychain": "🔑 Keychain",
+    "copilot.keychainHint": "Re-read Copilot token from macOS Keychain",
     "tg.timeout": "⏰ Timeout (20 min no response)",
     "tg.noResponse": "No response",
     "tg.connected": "🦈 Jaw Agent connected! Send a message and the AI agent will respond.",

package/public/locales/ko.json

@@ -94,6 +94,21 @@
     "tg.imageCaption": "[📷 이미지] {caption}",
     "tg.imageFail": "❌ 이미지 처리 실패: {msg}",
     "tg.fileFail": "❌ 파일 처리 실패: {msg}",
+    "tg.voiceFail": "❌ 음성 인식 실패: {msg}",
+    "tg.voiceEmpty": "🤔 음성을 인식하지 못했어요. 다시 시도해주세요.",
+    "voice.start": "음성 녹음",
+    "voice.stop": "녹음 중지",
+    "voice.micDenied": "🎤 마이크 접근이 거부됐어요. 브라우저 설정에서 마이크를 허용해 주세요.",
+    "voice.micNotFound": "🎤 마이크를 찾을 수 없어요. 마이크를 연결해 주세요.",
+    "voice.micBusy": "🎤 마이크가 다른 앱에서 사용 중이에요.",
+    "voice.httpsRequired": "🎤 음성 녹음은 HTTPS 또는 localhost에서만 가능해요.",
+    "voice.unsupported": "🎤 이 브라우저에서는 음성 녹음을 지원하지 않아요.",
+    "voice.interrupted": "⚠️ 녹음이 중단됐어요.",
+    "voice.tooLarge": "⚠️ 녹음이 너무 길어요 (최대 20MB).",
+    "voice.tooShort": "⚠️ 녹음이 너무 짧아요.",
+    "voice.sttFail": "❌ 음성 인식 실패: {msg}",
+    "copilot.keychain": "🔑 키체인",
+    "copilot.keychainHint": "macOS 키체인에서 Copilot 토큰을 다시 읽습니다",
     "tg.timeout": "⏰ 시간 초과 (20분 무응답)",
     "tg.noResponse": "응답 없음",
     "tg.connected": "🦈 Jaw Agent 연결됨! 메시지를 보내면 AI 에이전트가 응답합니다.",