cli-jaw 1.4.11 → 1.5.0

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

@@ -0,0 +1,78 @@
+// ── STT Settings ──
+import { apiJson } from '../api.js';
+
+export function initSttSettings(sttConfig: Record<string, any>): void {
+    const engine = document.getElementById('sttEngine') as HTMLSelectElement | null;
+    const geminiKey = document.getElementById('sttGeminiKey') as HTMLInputElement | null;
+    const geminiModel = document.getElementById('sttGeminiModel') as HTMLSelectElement | null;
+    const geminiModelCustom = document.getElementById('sttGeminiModelCustom') as HTMLInputElement | 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 ? `✅ 입력됨 ····${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);
+        if (hasOption) { geminiModel.value = saved; }
+        else { geminiModel.value = '__custom__'; if (geminiModelCustom) { geminiModelCustom.value = saved; geminiModelCustom.style.display = ''; } }
+    }
+    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 (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 === '__custom__' ? geminiModelCustom?.value : 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?.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);
+        }
+    }
+
+    // Auto-save on change (selects) and blur (text/password inputs)
+    engine?.addEventListener('change', () => { toggleProviderFields(); saveStt(); });
+    geminiModel?.addEventListener('change', () => {
+        if (geminiModelCustom) geminiModelCustom.style.display = geminiModel.value === '__custom__' ? '' : 'none';
+        if (geminiModel.value !== '__custom__') saveStt();
+    });
+    geminiModelCustom?.addEventListener('blur', 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);
+}

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

@@ -0,0 +1,40 @@
+// ── Telegram Settings ──
+import { apiJson } from '../api.js';
+import type { SettingsData } from './settings-types.js';
+
+export async function saveTelegramSettings(): Promise<void> {
+    const token = (document.getElementById('tgToken') as HTMLInputElement)?.value.trim() || '';
+    const chatIdsRaw = (document.getElementById('tgChatIds') as HTMLInputElement)?.value.trim() || '';
+    const allowedChatIds = chatIdsRaw
+        ? chatIdsRaw.split(',').map(s => parseInt(s.trim(), 10)).filter(n => !isNaN(n))
+        : [];
+    await apiJson('/api/settings', 'PUT', { telegram: { token, allowedChatIds } });
+}
+
+export async function setTelegram(enabled: boolean): Promise<void> {
+    document.getElementById('tgOn')?.classList.toggle('active', enabled);
+    document.getElementById('tgOff')?.classList.toggle('active', !enabled);
+    await apiJson('/api/settings', 'PUT', { telegram: { enabled } });
+}
+
+export async function setForwardAll(enabled: boolean): Promise<void> {
+    document.getElementById('tgForwardOn')?.classList.toggle('active', enabled);
+    document.getElementById('tgForwardOff')?.classList.toggle('active', !enabled);
+    await apiJson('/api/settings', 'PUT', { telegram: { forwardAll: enabled } });
+}
+
+export function loadTelegramSettings(s: SettingsData): void {
+    if (!s.telegram) return;
+    const tg = s.telegram;
+    document.getElementById('tgOn')?.classList.toggle('active', !!tg.enabled);
+    document.getElementById('tgOff')?.classList.toggle('active', !tg.enabled);
+    const tgToken = document.getElementById('tgToken') as HTMLInputElement | null;
+    if (tg.token && tgToken) tgToken.value = tg.token;
+    const tgChatIds = document.getElementById('tgChatIds') as HTMLInputElement | null;
+    if (tg.allowedChatIds?.length && tgChatIds) {
+        tgChatIds.value = tg.allowedChatIds.join(', ');
+    }
+    const fwdOn = tg.forwardAll !== false;
+    document.getElementById('tgForwardOn')?.classList.toggle('active', fwdOn);
+    document.getElementById('tgForwardOff')?.classList.toggle('active', !fwdOn);
+}

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

@@ -0,0 +1,129 @@
+// ── Prompt & Template Modals ──
+import { api, apiJson } from '../api.js';
+
+// ── Prompt Modal ──
+
+export function openPromptModal(): void {
+    api<{ content?: string }>('/api/prompt').then(data => {
+        if (!data) return;
+        const editor = document.getElementById('modalPromptEditor') as HTMLTextAreaElement | null;
+        if (editor) editor.value = data.content || '';
+        document.getElementById('promptModal')?.classList.add('open');
+    });
+}
+
+export function closePromptModal(e?: Event): void {
+    if (e && e.target !== e.currentTarget) return;
+    document.getElementById('promptModal')?.classList.remove('open');
+}
+
+export async function savePromptFromModal(): Promise<void> {
+    const editor = document.getElementById('modalPromptEditor') as HTMLTextAreaElement | null;
+    const content = editor?.value || '';
+    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/settings-types.ts

@@ -0,0 +1,24 @@
+// ── Settings Type Definitions ──
+
+export interface PerCliConfig { model?: string; effort?: string; fastMode?: boolean; contextWindow?: boolean; contextWindowSize?: number; contextCompactLimit?: number; }
+export interface TelegramConfig { enabled?: boolean; token?: string; allowedChatIds?: number[]; forwardAll?: boolean; }
+export interface DiscordConfig { enabled?: boolean; token?: string; guildId?: string; channelIds?: string[]; forwardAll?: boolean; allowBots?: boolean; }
+export interface QuotaWindow { label: string; percent: number; resetsAt?: string | number | null; }
+export interface QuotaEntry {
+    account?: { email?: string; type?: string; plan?: string; tier?: string };
+    windows?: QuotaWindow[];
+    authenticated?: boolean;
+    error?: boolean;
+    reason?: string;
+}
+export interface SettingsData {
+    cli: string; workingDir: string; permissions: string; locale?: string;
+    perCli?: Record<string, PerCliConfig>;
+    activeOverrides?: Record<string, PerCliConfig>;
+    telegram?: TelegramConfig;
+    discord?: DiscordConfig;
+    channel?: 'telegram' | 'discord';
+    fallbackOrder?: string[];
+    memory?: { cli?: string };
+    stt?: { engine?: string; geminiKeySet?: boolean; geminiKeyLast4?: string; geminiModel?: string; whisperModel?: string; openaiKeySet?: boolean; openaiKeyLast4?: string };
+}