cli-jaw 1.3.0-preview.2 → 1.3.0-preview.4

package/public/index.html

@@ -139,6 +139,7 @@
             <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>
+            <button class="btn-voice-cancel" id="btnVoiceCancel" style="display:none" title="취소">✕</button>
             <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>
@@ -375,29 +376,52 @@
                     <select id="sttEngine">
                         <option value="auto">Auto (Gemini → Whisper)</option>
                         <option value="gemini">Gemini only</option>
+                        <option value="openai">OpenAI Compatible</option>
+                        <option value="vertex">Vertex AI</option>
                         <option value="whisper">Whisper only (local)</option>
                     </select>
                 </div>
-                <div class="settings-row sub-row">
+                <div class="settings-row sub-row stt-gemini">
                     <label data-i18n="stt.geminiKey">Gemini API Key</label>
                     <input type="password" id="sttGeminiKey" placeholder="AIza..."
                         style="width:100%;font-size:11px;padding:4px">
                 </div>
-                <div class="settings-row sub-row">
+                <div class="settings-row sub-row stt-gemini">
                     <label data-i18n="stt.geminiModel">Gemini 모델</label>
                     <select id="sttGeminiModel">
+                        <option value="gemini-3.1-flash-lite">gemini-3.1-flash-lite (fastest)</option>
                         <option value="gemini-2.5-flash-lite">gemini-2.5-flash-lite (fast)</option>
                         <option value="gemini-2.5-flash">gemini-2.5-flash (balanced)</option>
                         <option value="gemini-2.5-pro">gemini-2.5-pro (accurate)</option>
                     </select>
                 </div>
-                <div class="settings-row sub-row">
+                <!-- OpenAI Compatible -->
+                <div class="settings-row sub-row stt-openai" style="display:none">
+                    <label data-i18n="stt.openaiBaseUrl">Base URL</label>
+                    <input type="text" id="sttOpenaiBaseUrl" placeholder="https://api.groq.com/openai"
+                        style="width:100%;font-size:11px;padding:4px">
+                </div>
+                <div class="settings-row sub-row stt-openai" style="display:none">
+                    <label data-i18n="stt.openaiKey">API Key</label>
+                    <input type="password" id="sttOpenaiKey" placeholder="sk-..."
+                        style="width:100%;font-size:11px;padding:4px">
+                </div>
+                <div class="settings-row sub-row stt-openai" style="display:none">
+                    <label data-i18n="stt.openaiModel">Model</label>
+                    <input type="text" id="sttOpenaiModel" placeholder="whisper-large-v3"
+                        style="width:100%;font-size:11px;padding:4px">
+                </div>
+                <!-- Vertex AI -->
+                <div class="settings-row sub-row stt-vertex" style="display:none">
+                    <label data-i18n="stt.vertexConfig">Vertex AI Config (JSON)</label>
+                    <textarea id="sttVertexJson" rows="4" placeholder='{"project_id":"...","location":"us-central1","credentials":{...}}'
+                        style="width:100%;font-size:11px;padding:4px;font-family:var(--font-mono)"></textarea>
+                </div>
+                <div class="settings-row sub-row stt-whisper">
                     <label data-i18n="stt.whisperModel">Whisper 모델</label>
                     <input type="text" id="sttWhisperModel" placeholder="mlx-community/..."
                         style="width:100%;font-size:11px;padding:4px">
                 </div>
-                <button class="btn-clear" style="width:100%;margin:4px 0;padding:6px;font-size:11px"
-                    id="sttSave" data-i18n="stt.save">💾 STT 설정 저장</button>
                 <small style="font-size:9px;color:var(--text-dim)" data-i18n="stt.shortcutHint">
                     ⌨️ Ctrl+Shift+Space (⌘+Shift+Space on Mac)</small>
             </div>

package/public/js/features/settings.ts

@@ -8,7 +8,7 @@ import { api, apiJson, apiFire } from '../api.js';
 
 interface PerCliConfig { model?: string; effort?: string; }
 interface TelegramConfig { enabled?: boolean; token?: string; allowedChatIds?: number[]; forwardAll?: boolean; }
-interface QuotaWindow { label: string; percent: number; }
+interface QuotaWindow { label: string; percent: number; resetsAt?: string | number | null; }
 interface QuotaEntry {
     account?: { email?: string; type?: string; plan?: string; tier?: string };
     windows?: QuotaWindow[];
@@ -190,31 +190,65 @@ function initSttSettings(sttConfig: Record<string, any>): void {
     const geminiKey = document.getElementById('sttGeminiKey') as HTMLInputElement | null;
     const geminiModel = document.getElementById('sttGeminiModel') as HTMLSelectElement | null;
     const whisperModel = document.getElementById('sttWhisperModel') as HTMLInputElement | null;
+    const openaiBaseUrl = document.getElementById('sttOpenaiBaseUrl') as HTMLInputElement | null;
+    const openaiKey = document.getElementById('sttOpenaiKey') as HTMLInputElement | null;
+    const openaiModel = document.getElementById('sttOpenaiModel') as HTMLInputElement | null;
+    const vertexJson = document.getElementById('sttVertexJson') as HTMLTextAreaElement | null;
 
     if (engine) engine.value = sttConfig.engine || 'auto';
     if (geminiKey) geminiKey.placeholder = sttConfig.geminiKeySet ? '••••••••' : 'AIza...';
     if (geminiModel) geminiModel.value = sttConfig.geminiModel || 'gemini-2.5-flash-lite';
     if (whisperModel) whisperModel.value = sttConfig.whisperModel || 'mlx-community/whisper-large-v3-turbo';
-
-    const btn = document.getElementById('sttSave');
-    if (btn && !btn.dataset.bound) {
-        btn.dataset.bound = '1';
-        btn.addEventListener('click', async () => {
-            const patch: Record<string, any> = {
-                stt: {
-                    engine: engine?.value || 'auto',
-                    geminiModel: geminiModel?.value || 'gemini-2.5-flash-lite',
-                    whisperModel: whisperModel?.value || '',
-                },
-            };
-            if (geminiKey?.value) patch.stt.geminiApiKey = geminiKey.value;
+    if (openaiBaseUrl) openaiBaseUrl.value = sttConfig.openaiBaseUrl || '';
+    if (openaiKey) openaiKey.placeholder = sttConfig.openaiKeySet ? '••••••••' : 'sk-...';
+    if (openaiModel) openaiModel.value = sttConfig.openaiModel || '';
+    if (vertexJson) vertexJson.value = sttConfig.vertexConfig || '';
+
+    function toggleProviderFields() {
+        const v = engine?.value || 'auto';
+        const showGemini = v === 'auto' || v === 'gemini';
+        const showOpenai = v === 'openai';
+        const showVertex = v === 'vertex';
+        const showWhisper = v === 'auto' || v === 'whisper';
+        document.querySelectorAll('.stt-gemini').forEach(el => (el as HTMLElement).style.display = showGemini ? '' : 'none');
+        document.querySelectorAll('.stt-openai').forEach(el => (el as HTMLElement).style.display = showOpenai ? '' : 'none');
+        document.querySelectorAll('.stt-vertex').forEach(el => (el as HTMLElement).style.display = showVertex ? '' : 'none');
+        document.querySelectorAll('.stt-whisper').forEach(el => (el as HTMLElement).style.display = showWhisper ? '' : 'none');
+    }
+    toggleProviderFields();
+
+    async function saveStt() {
+        const patch: Record<string, any> = {
+            stt: {
+                engine: engine?.value || 'auto',
+                geminiModel: geminiModel?.value || 'gemini-2.5-flash-lite',
+                whisperModel: whisperModel?.value || '',
+                openaiBaseUrl: openaiBaseUrl?.value || '',
+                openaiModel: openaiModel?.value || '',
+                vertexConfig: vertexJson?.value || '',
+            },
+        };
+        if (geminiKey?.value) patch.stt.geminiApiKey = geminiKey.value;
+        if (openaiKey?.value) patch.stt.openaiApiKey = openaiKey.value;
+        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) {
-                geminiKey.value = '';
-                geminiKey.placeholder = '••••••••';
-            }
-        });
+            if (geminiKey?.value) { geminiKey.value = ''; geminiKey.placeholder = '••••••••'; }
+            if (openaiKey?.value) { openaiKey.value = ''; openaiKey.placeholder = '••••••••'; }
+        } catch (e) {
+            console.error('[stt] save failed:', e);
+        }
     }
+
+    // Auto-save on change (selects) and blur (text/password inputs)
+    engine?.addEventListener('change', () => { toggleProviderFields(); saveStt(); });
+    geminiModel?.addEventListener('change', saveStt);
+    geminiKey?.addEventListener('blur', () => { if (geminiKey.value) saveStt(); });
+    openaiKey?.addEventListener('blur', () => { if (openaiKey.value) saveStt(); });
+    openaiBaseUrl?.addEventListener('blur', saveStt);
+    openaiModel?.addEventListener('blur', saveStt);
+    whisperModel?.addEventListener('blur', saveStt);
+    vertexJson?.addEventListener('blur', saveStt);
 }
 
 interface McpData { servers: Record<string, { command: string; args?: string[] }>; }
@@ -553,13 +587,25 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             windowsHtml = q.windows.map(w => {
                 const pct = Math.round(w.percent);
                 const barColor = pct > 80 ? '#ef4444' : pct > 50 ? '#fbbf24' : '#38bdf8';
+                const shortLabel = w.label.replace('-hour', 'h').replace('-day', 'd').replace(' Sonnet', '').replace(' Opus', '');
+                let resetStr = '';
+                if (w.resetsAt) {
+                    const d = new Date(typeof w.resetsAt === 'number' ? w.resetsAt * 1000 : w.resetsAt);
+                    const now = new Date();
+                    if (d.toDateString() === now.toDateString()) {
+                        resetStr = `${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`;
+                    } else {
+                        resetStr = `${d.getMonth() + 1}/${d.getDate()}`;
+                    }
+                }
                 return `
-                    <div style="display:flex;align-items:center;gap:6px;margin-left:16px;font-size:10px;color:var(--text-dim)">
-                        <span style="width:42px">${w.label}</span>
+                    <div style="display:flex;align-items:center;gap:4px;margin-left:16px;font-size:10px;color:var(--text-dim)">
+                        <span style="width:18px">${shortLabel}</span>
                         <div style="flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden">
                             <div style="width:${pct}%;height:100%;background:${barColor};border-radius:2px"></div>
                         </div>
-                        <span style="width:28px;text-align:right">${pct}%</span>
+                        <span style="width:24px;text-align:right">${pct}%</span>
+                        ${resetStr ? `<span style="width:30px;text-align:right;opacity:0.6">${resetStr}</span>` : ''}
                     </div>
                 `;
             }).join('');

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

@@ -5,6 +5,8 @@ import { addSystemMsg } from '../ui.js';
 import { t } from './i18n.js';
 import { sendVoiceToServer } from './chat.js';
 
+let cancelled = false;
+
 let mediaRecorder: MediaRecorder | null = null;
 let chunks: Blob[] = [];
 let recordingStream: MediaStream | null = null;
@@ -75,6 +77,12 @@ export async function startRecording(): Promise<void> {
     };
 
     mediaRecorder.onstop = async () => {
+        if (cancelled) {
+            chunks = [];
+            releaseStream();
+            cancelled = false;
+            return;
+        }
         const actualMime = mediaRecorder?.mimeType || mimeType || 'audio/webm';
         const ext = actualMime.includes('mp4') ? '.m4a'
                   : actualMime.includes('ogg') ? '.ogg'
@@ -113,6 +121,17 @@ export function stopRecording(): void {
     updateRecordingUI(false);
 }
 
+export function cancelRecording(): void {
+    if (!state.isRecording || !mediaRecorder) return;
+    cancelled = true;
+    if (mediaRecorder.state === 'recording') {
+        mediaRecorder.stop();
+    }
+    state.isRecording = false;
+    stopTimer();
+    updateRecordingUI(false);
+}
+
 export function toggleRecording(): void {
     if (state.isRecording) stopRecording();
     else startRecording();
@@ -143,8 +162,13 @@ function stopTimer(): void {
 
 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');
+    const cancelBtn = document.getElementById('btnVoiceCancel');
+    if (btn) {
+        btn.classList.toggle('recording', recording);
+        btn.textContent = recording ? '⏹' : '🎤';
+        btn.title = recording ? t('voice.stop') : t('voice.start');
+    }
+    if (cancelBtn) {
+        cancelBtn.style.display = recording ? 'inline-block' : 'none';
+    }
 }

package/public/js/main.ts

@@ -44,7 +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';
+import { toggleRecording, cancelRecording } from './features/voice-recorder.js';
 
 // ── Chat Actions ──
 document.getElementById('btnSend')?.addEventListener('click', sendMessage);
@@ -76,6 +76,7 @@ document.querySelector('.btn-attach')?.addEventListener('click', () => {
     (document.getElementById('fileInput') as HTMLInputElement | null)?.click();
 });
 document.getElementById('btnVoice')?.addEventListener('click', () => toggleRecording());
+document.getElementById('btnVoiceCancel')?.addEventListener('click', () => cancelRecording());
 
 // ── Left Sidebar ──
 document.getElementById('memorySidebarBtn')?.addEventListener('click', openMemoryModal);
@@ -196,7 +197,7 @@ document.querySelector('#promptModal .modal-box')?.addEventListener('click', (e)
 document.querySelector('[data-action="closePrompt"]')?.addEventListener('click', () => closePromptModal());
 document.querySelector('[data-action="cancelPrompt"]')?.addEventListener('click', () => closePromptModal());
 document.querySelector('[data-action="savePrompt"]')?.addEventListener('click', savePromptFromModal);
-document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePromptModal(); });
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !state.isRecording) closePromptModal(); });
 
 // ── Template Modal ──
 document.querySelector('[data-action="openTemplates"]')?.addEventListener('click', openTemplateModal);
@@ -283,6 +284,11 @@ void bootstrap().catch((err: unknown) => {
 // ── Keyboard: Escape closes modals ──────────────────
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
+        if (state.isRecording) {
+            e.preventDefault();
+            cancelRecording();
+            return;
+        }
         document.querySelectorAll('.modal-overlay.open').forEach(m => {
             m.classList.remove('open');
         });

package/public/locales/en.json

@@ -118,6 +118,10 @@
     "stt.save": "💾 Save STT Settings",
     "stt.saved": "✅ Saved",
     "stt.shortcutHint": "⌨️ Ctrl+Shift+Space (⌘+Shift+Space on Mac)",
+    "stt.openaiBaseUrl": "Base URL",
+    "stt.openaiKey": "API Key",
+    "stt.openaiModel": "Model",
+    "stt.vertexConfig": "Vertex AI Config (JSON)",
     "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

@@ -118,6 +118,10 @@
     "stt.save": "💾 STT 설정 저장",
     "stt.saved": "✅ 저장됨",
     "stt.shortcutHint": "⌨️ Ctrl+Shift+Space (Mac: ⌘+Shift+Space)",
+    "stt.openaiBaseUrl": "Base URL",
+    "stt.openaiKey": "API Key",
+    "stt.openaiModel": "모델",
+    "stt.vertexConfig": "Vertex AI 설정 (JSON)",
     "tg.timeout": "⏰ 시간 초과 (20분 무응답)",
     "tg.noResponse": "응답 없음",
     "tg.connected": "🦈 Jaw Agent 연결됨! 메시지를 보내면 AI 에이전트가 응답합니다.",