mirror of
https://github.com/infinition/Bjorn.git
synced 2026-03-17 17:41:03 +00:00
Add LLM configuration and MCP server management UI and backend functionality
- Implemented a new SPA page for LLM Bridge and MCP Server settings in `llm-config.js`. - Added functionality for managing LLM and MCP configurations, including toggling, saving settings, and testing connections. - Created HTTP endpoints in `llm_utils.py` for handling LLM chat, status checks, and MCP server configuration. - Integrated model fetching from LaRuche and Ollama backends. - Enhanced error handling and logging for better debugging and user feedback.
This commit is contained in:
infinition
253
web/js/pages/llm-chat.js
Normal file
253
web/js/pages/llm-chat.js
Normal file
@@ -0,0 +1,253 @@
|
||||
/**
|
||||
* llm-chat — LLM Chat SPA page
|
||||
* Chat interface with LLM bridge + orchestrator reasoning log.
|
||||
*/
|
||||
import { ResourceTracker } from '../core/resource-tracker.js';
|
||||
import { api } from '../core/api.js';
|
||||
import { el, $, empty, escapeHtml } from '../core/dom.js';
|
||||
import { t } from '../core/i18n.js';
|
||||
|
||||
const PAGE = 'llm-chat';
|
||||
|
||||
/* ── State ─────────────────────────────────────────────── */
|
||||
|
||||
let tracker = null;
|
||||
let root = null;
|
||||
let llmEnabled = false;
|
||||
let orchMode = false;
|
||||
const sessionId = 'chat-' + Math.random().toString(36).slice(2, 8);
|
||||
|
||||
/* ── Lifecycle ─────────────────────────────────────────── */
|
||||
|
||||
export async function mount(container) {
|
||||
tracker = new ResourceTracker(PAGE);
|
||||
root = buildShell();
|
||||
container.appendChild(root);
|
||||
bindEvents();
|
||||
await checkStatus();
|
||||
sysMsg(t('llm_chat.session_started'));
|
||||
}
|
||||
|
||||
export function unmount() {
|
||||
if (tracker) { tracker.cleanupAll(); tracker = null; }
|
||||
root = null;
|
||||
llmEnabled = false;
|
||||
orchMode = false;
|
||||
}
|
||||
|
||||
/* ── Shell ─────────────────────────────────────────────── */
|
||||
|
||||
function buildShell() {
|
||||
return el('div', { class: 'llmc-page' }, [
|
||||
|
||||
/* Header */
|
||||
el('div', { class: 'llmc-header' }, [
|
||||
el('span', { class: 'llmc-dot', id: 'llmc-dot' }),
|
||||
el('span', { class: 'llmc-title' }, ['BJORN / CHAT']),
|
||||
el('span', { class: 'llmc-status', id: 'llmc-status' }, [t('llm_chat.checking')]),
|
||||
el('button', { class: 'llmc-btn-ghost', id: 'llmc-orch-btn', title: t('llm_chat.orch_title') },
|
||||
[t('llm_chat.orch_log')]),
|
||||
el('button', { class: 'llmc-btn-ghost llmc-clear-btn', id: 'llmc-clear-btn' },
|
||||
[t('llm_chat.clear_history')]),
|
||||
el('button', { class: 'llmc-btn-ghost', id: 'llmc-cfg-btn', title: 'LLM Settings' },
|
||||
['\u2699']),
|
||||
]),
|
||||
|
||||
/* Messages */
|
||||
el('div', { class: 'llmc-messages', id: 'llmc-messages' }, [
|
||||
el('div', { class: 'llmc-disabled-msg', id: 'llmc-disabled-msg', style: 'display:none' }, [
|
||||
t('llm_chat.disabled_msg') + ' ',
|
||||
el('a', { href: '#/llm-config' }, [t('llm_chat.settings_link')]),
|
||||
'.',
|
||||
]),
|
||||
]),
|
||||
|
||||
/* Thinking */
|
||||
el('div', { class: 'llmc-thinking', id: 'llmc-thinking', style: 'display:none' }, [
|
||||
'▌ ', t('llm_chat.thinking'),
|
||||
]),
|
||||
|
||||
/* Input row */
|
||||
el('div', { class: 'llmc-input-row', id: 'llmc-input-row' }, [
|
||||
el('textarea', {
|
||||
class: 'llmc-input', id: 'llmc-input',
|
||||
placeholder: t('llm_chat.placeholder'),
|
||||
rows: '1',
|
||||
}),
|
||||
el('button', { class: 'llmc-send-btn', id: 'llmc-send-btn' }, [t('llm_chat.send')]),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
/* ── Events ────────────────────────────────────────────── */
|
||||
|
||||
function bindEvents() {
|
||||
const sendBtn = $('#llmc-send-btn', root);
|
||||
const clearBtn = $('#llmc-clear-btn', root);
|
||||
const orchBtn = $('#llmc-orch-btn', root);
|
||||
const input = $('#llmc-input', root);
|
||||
|
||||
const cfgBtn = $('#llmc-cfg-btn', root);
|
||||
|
||||
if (sendBtn) tracker.on(sendBtn, 'click', send);
|
||||
if (clearBtn) tracker.on(clearBtn, 'click', clearHistory);
|
||||
if (orchBtn) tracker.on(orchBtn, 'click', toggleOrchLog);
|
||||
if (cfgBtn) tracker.on(cfgBtn, 'click', () => { window.location.hash = '#/llm-config'; });
|
||||
|
||||
if (input) {
|
||||
tracker.on(input, 'keydown', (e) => {
|
||||
// Auto-resize
|
||||
input.style.height = 'auto';
|
||||
input.style.height = Math.min(input.scrollHeight, 120) + 'px';
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
send();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Status ────────────────────────────────────────────── */
|
||||
|
||||
async function checkStatus() {
|
||||
try {
|
||||
const data = await api.get('/api/llm/status', { timeout: 5000, retries: 0 });
|
||||
if (!data) throw new Error('no data');
|
||||
|
||||
llmEnabled = data.enabled === true;
|
||||
const dot = $('#llmc-dot', root);
|
||||
const status = $('#llmc-status', root);
|
||||
const disMsg = $('#llmc-disabled-msg', root);
|
||||
const sendBtn = $('#llmc-send-btn', root);
|
||||
|
||||
if (!llmEnabled) {
|
||||
if (dot) dot.className = 'llmc-dot offline';
|
||||
if (status) status.textContent = t('llm_chat.disabled');
|
||||
if (disMsg) disMsg.style.display = '';
|
||||
if (sendBtn) sendBtn.disabled = true;
|
||||
} else {
|
||||
if (dot) dot.className = 'llmc-dot online';
|
||||
const backend = data.laruche_url
|
||||
? 'LaRuche @ ' + data.laruche_url
|
||||
: (data.backend || 'auto');
|
||||
if (status) status.textContent = t('llm_chat.online') + ' · ' + backend;
|
||||
if (disMsg) disMsg.style.display = 'none';
|
||||
if (sendBtn) sendBtn.disabled = false;
|
||||
}
|
||||
} catch {
|
||||
const status = $('#llmc-status', root);
|
||||
if (status) status.textContent = t('llm_chat.unavailable');
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Chat ──────────────────────────────────────────────── */
|
||||
|
||||
async function send() {
|
||||
const input = $('#llmc-input', root);
|
||||
const sendBtn = $('#llmc-send-btn', root);
|
||||
if (!input) return;
|
||||
|
||||
const msg = input.value.trim();
|
||||
if (!msg) return;
|
||||
input.value = '';
|
||||
input.style.height = '44px';
|
||||
|
||||
appendMsg('user', msg);
|
||||
setThinking(true);
|
||||
if (sendBtn) sendBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const data = await api.post('/api/llm/chat', { message: msg, session_id: sessionId });
|
||||
setThinking(false);
|
||||
if (data?.status === 'ok') {
|
||||
appendMsg('assistant', data.response);
|
||||
} else {
|
||||
sysMsg(t('llm_chat.error') + ': ' + (data?.message || 'unknown'));
|
||||
}
|
||||
} catch (e) {
|
||||
setThinking(false);
|
||||
sysMsg(t('llm_chat.net_error') + ': ' + e.message);
|
||||
} finally {
|
||||
if (sendBtn) sendBtn.disabled = !llmEnabled;
|
||||
}
|
||||
}
|
||||
|
||||
async function clearHistory() {
|
||||
await api.post('/api/llm/clear_history', { session_id: sessionId });
|
||||
const msgs = $('#llmc-messages', root);
|
||||
if (!msgs) return;
|
||||
empty(msgs);
|
||||
const disMsg = $('#llmc-disabled-msg', root);
|
||||
if (disMsg) msgs.appendChild(disMsg);
|
||||
sysMsg(t('llm_chat.history_cleared'));
|
||||
}
|
||||
|
||||
/* ── Orch log ──────────────────────────────────────────── */
|
||||
|
||||
async function toggleOrchLog() {
|
||||
orchMode = !orchMode;
|
||||
const orchBtn = $('#llmc-orch-btn', root);
|
||||
const inputRow = $('#llmc-input-row', root);
|
||||
const msgs = $('#llmc-messages', root);
|
||||
|
||||
if (orchMode) {
|
||||
if (orchBtn) { orchBtn.classList.add('active'); orchBtn.textContent = t('llm_chat.back_chat'); }
|
||||
if (inputRow) inputRow.style.display = 'none';
|
||||
if (msgs) empty(msgs);
|
||||
await loadOrchLog();
|
||||
} else {
|
||||
if (orchBtn) { orchBtn.classList.remove('active'); orchBtn.textContent = t('llm_chat.orch_log'); }
|
||||
if (inputRow) inputRow.style.display = '';
|
||||
if (msgs) empty(msgs);
|
||||
sysMsg(t('llm_chat.back_to_chat'));
|
||||
}
|
||||
}
|
||||
|
||||
async function loadOrchLog() {
|
||||
sysMsg(t('llm_chat.loading_log'));
|
||||
try {
|
||||
const data = await api.get('/api/llm/reasoning', { timeout: 10000, retries: 0 });
|
||||
const msgs = $('#llmc-messages', root);
|
||||
if (!msgs) return;
|
||||
empty(msgs);
|
||||
|
||||
if (!data?.messages?.length) {
|
||||
sysMsg(t('llm_chat.no_log'));
|
||||
return;
|
||||
}
|
||||
sysMsg(t('llm_chat.log_header') + ' — ' + data.count + ' message(s)');
|
||||
for (const m of data.messages) {
|
||||
appendMsg(m.role === 'user' ? 'user' : 'assistant', m.content || '');
|
||||
}
|
||||
} catch (e) {
|
||||
sysMsg(t('llm_chat.log_error') + ': ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Helpers ───────────────────────────────────────────── */
|
||||
|
||||
function appendMsg(role, text) {
|
||||
const msgs = $('#llmc-messages', root);
|
||||
if (!msgs) return;
|
||||
const labels = { user: 'YOU', assistant: 'BJORN' };
|
||||
const roleLabel = labels[role] || role.toUpperCase();
|
||||
const div = el('div', { class: 'llmc-msg ' + role }, [
|
||||
el('div', { class: 'llmc-msg-role' }, [roleLabel]),
|
||||
document.createTextNode(text),
|
||||
]);
|
||||
msgs.appendChild(div);
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
}
|
||||
|
||||
function sysMsg(text) {
|
||||
const msgs = $('#llmc-messages', root);
|
||||
if (!msgs) return;
|
||||
const div = el('div', { class: 'llmc-msg system' }, [text]);
|
||||
msgs.appendChild(div);
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
}
|
||||
|
||||
function setThinking(on) {
|
||||
const el = $('#llmc-thinking', root);
|
||||
if (el) el.style.display = on ? '' : 'none';
|
||||
}
|
||||
682
web/js/pages/llm-config.js
Normal file
682
web/js/pages/llm-config.js
Normal file
@@ -0,0 +1,682 @@
|
||||
/**
|
||||
* llm-config — LLM Bridge & MCP Server settings SPA page
|
||||
*/
|
||||
import { ResourceTracker } from '../core/resource-tracker.js';
|
||||
import { api } from '../core/api.js';
|
||||
import { el, $, empty, toast } from '../core/dom.js';
|
||||
import { t } from '../core/i18n.js';
|
||||
|
||||
const PAGE = 'llm-config';
|
||||
|
||||
const ALL_TOOLS = [
|
||||
'get_hosts', 'get_vulnerabilities', 'get_credentials',
|
||||
'get_action_history', 'get_status', 'run_action', 'query_db',
|
||||
];
|
||||
|
||||
/* ── State ─────────────────────────────────────────────── */
|
||||
|
||||
let tracker = null;
|
||||
let root = null;
|
||||
|
||||
/* ── Lifecycle ─────────────────────────────────────────── */
|
||||
|
||||
export async function mount(container) {
|
||||
tracker = new ResourceTracker(PAGE);
|
||||
root = buildShell();
|
||||
container.appendChild(root);
|
||||
bindEvents();
|
||||
await loadAll();
|
||||
}
|
||||
|
||||
export function unmount() {
|
||||
if (tracker) { tracker.cleanupAll(); tracker = null; }
|
||||
root = null;
|
||||
}
|
||||
|
||||
/* ── Shell ─────────────────────────────────────────────── */
|
||||
|
||||
function buildShell() {
|
||||
return el('div', { class: 'llmcfg-page' }, [
|
||||
|
||||
/* Page header */
|
||||
el('div', { class: 'llmcfg-header' }, [
|
||||
el('span', { class: 'llmcfg-title' }, ['BJORN / LLM & MCP SETTINGS']),
|
||||
el('a', { class: 'llmcfg-nav-link', href: '#/llm-chat' }, ['→ ' + t('nav.llm_chat')]),
|
||||
]),
|
||||
|
||||
el('div', { class: 'llmcfg-container' }, [
|
||||
|
||||
/* ── LLM Bridge section ──────────────────────────── */
|
||||
el('div', { class: 'llmcfg-section' }, [
|
||||
el('div', { class: 'llmcfg-section-title' }, [
|
||||
'LLM BRIDGE',
|
||||
el('span', { class: 'llmcfg-badge off', id: 'llm-badge' }, ['OFF']),
|
||||
]),
|
||||
el('div', { class: 'llmcfg-body' }, [
|
||||
|
||||
toggleRow('llm_enabled', t('llm_cfg.enable_bridge')),
|
||||
toggleRow('llm_comments_enabled', t('llm_cfg.epd_comments')),
|
||||
|
||||
fieldEl(t('llm_cfg.backend'), el('select', { id: 'llm_backend', class: 'llmcfg-select' }, [
|
||||
el('option', { value: 'auto' }, ['Auto (LaRuche → Ollama → API)']),
|
||||
el('option', { value: 'laruche' }, ['LaRuche only']),
|
||||
el('option', { value: 'ollama' }, ['Ollama only']),
|
||||
el('option', { value: 'api' }, ['External API only']),
|
||||
])),
|
||||
|
||||
subsectionTitle('LARUCHE / LAND'),
|
||||
toggleRow('llm_laruche_discovery', t('llm_cfg.laruche_discovery')),
|
||||
el('div', { class: 'llmcfg-discovery-row', id: 'laruche-discovery-status' }),
|
||||
fieldEl(t('llm_cfg.laruche_url'),
|
||||
el('div', { class: 'llmcfg-url-row' }, [
|
||||
el('input', { type: 'text', id: 'llm_laruche_url', class: 'llmcfg-input',
|
||||
placeholder: 'Auto-detected via mDNS or enter manually' }),
|
||||
el('button', { class: 'llmcfg-btn compact', id: 'laruche-use-discovered',
|
||||
style: 'display:none' }, ['Use']),
|
||||
])),
|
||||
fieldEl('LaRuche Model',
|
||||
el('div', { class: 'llmcfg-model-row' }, [
|
||||
el('select', { id: 'llm_laruche_model', class: 'llmcfg-select' }, [
|
||||
el('option', { value: '' }, ['Default (server decides)']),
|
||||
]),
|
||||
el('button', { class: 'llmcfg-btn compact', id: 'laruche-refresh-models' }, ['⟳ Refresh']),
|
||||
])),
|
||||
el('div', { class: 'llmcfg-laruche-default', id: 'laruche-default-model' }),
|
||||
|
||||
subsectionTitle('OLLAMA (LOCAL)'),
|
||||
fieldEl(t('llm_cfg.ollama_url'),
|
||||
el('input', { type: 'text', id: 'llm_ollama_url', class: 'llmcfg-input',
|
||||
placeholder: 'http://127.0.0.1:11434' })),
|
||||
fieldEl(t('llm_cfg.ollama_model'),
|
||||
el('div', { class: 'llmcfg-model-row' }, [
|
||||
el('select', { id: 'llm_ollama_model', class: 'llmcfg-select' }, [
|
||||
el('option', { value: '' }, ['Default']),
|
||||
]),
|
||||
el('button', { class: 'llmcfg-btn compact', id: 'ollama-refresh-models' }, ['⟳ Refresh']),
|
||||
])),
|
||||
|
||||
subsectionTitle('EXTERNAL API'),
|
||||
el('div', { class: 'llmcfg-row' }, [
|
||||
fieldEl(t('llm_cfg.provider'), el('select', { id: 'llm_api_provider', class: 'llmcfg-select' }, [
|
||||
el('option', { value: 'anthropic' }, ['Anthropic (Claude)']),
|
||||
el('option', { value: 'openai' }, ['OpenAI']),
|
||||
el('option', { value: 'openrouter' }, ['OpenRouter']),
|
||||
])),
|
||||
fieldEl(t('llm_cfg.api_model'),
|
||||
el('input', { type: 'text', id: 'llm_api_model', class: 'llmcfg-input',
|
||||
placeholder: 'claude-haiku-4-5-20251001' })),
|
||||
]),
|
||||
fieldEl(t('llm_cfg.api_key'),
|
||||
el('input', { type: 'password', id: 'llm_api_key', class: 'llmcfg-input',
|
||||
placeholder: t('llm_cfg.api_key_placeholder') })),
|
||||
fieldEl(t('llm_cfg.base_url'),
|
||||
el('input', { type: 'text', id: 'llm_api_base_url', class: 'llmcfg-input',
|
||||
placeholder: 'https://openrouter.ai/api' })),
|
||||
|
||||
el('div', { class: 'llmcfg-row' }, [
|
||||
fieldEl(t('llm_cfg.timeout'),
|
||||
el('input', { type: 'number', id: 'llm_timeout_s', class: 'llmcfg-input',
|
||||
min: '5', max: '120', value: '30' })),
|
||||
fieldEl(t('llm_cfg.max_tokens_chat'),
|
||||
el('input', { type: 'number', id: 'llm_max_tokens', class: 'llmcfg-input',
|
||||
min: '50', max: '4096', value: '500' })),
|
||||
fieldEl(t('llm_cfg.max_tokens_epd'),
|
||||
el('input', { type: 'number', id: 'llm_comment_max_tokens', class: 'llmcfg-input',
|
||||
min: '20', max: '200', value: '80' })),
|
||||
]),
|
||||
|
||||
el('div', { class: 'llmcfg-status-row', id: 'llm-status-row' }),
|
||||
|
||||
el('div', { class: 'llmcfg-actions' }, [
|
||||
el('button', { class: 'llmcfg-btn primary', id: 'llm-save-btn' }, [t('llm_cfg.save_llm')]),
|
||||
el('button', { class: 'llmcfg-btn', id: 'llm-test-btn' }, [t('llm_cfg.test_connection')]),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
||||
/* ── LLM Orchestrator section ────────────────────── */
|
||||
el('div', { class: 'llmcfg-section' }, [
|
||||
el('div', { class: 'llmcfg-section-title' }, [
|
||||
'LLM ORCHESTRATOR',
|
||||
el('span', { class: 'llmcfg-badge off', id: 'orch-badge' }, ['OFF']),
|
||||
]),
|
||||
el('div', { class: 'llmcfg-body' }, [
|
||||
|
||||
fieldEl('Mode', el('select', { id: 'llm_orchestrator_mode', class: 'llmcfg-select' }, [
|
||||
el('option', { value: 'none' }, ['Disabled']),
|
||||
el('option', { value: 'advisor' }, ['Advisor (suggest 1 action per cycle)']),
|
||||
el('option', { value: 'autonomous' }, ['Autonomous (full agentic loop)']),
|
||||
])),
|
||||
|
||||
el('div', { class: 'llmcfg-row' }, [
|
||||
fieldEl('Cycle interval (s)',
|
||||
el('input', { type: 'number', id: 'llm_orchestrator_interval_s', class: 'llmcfg-input',
|
||||
min: '30', max: '600', value: '60' })),
|
||||
fieldEl('Max actions / cycle',
|
||||
el('input', { type: 'number', id: 'llm_orchestrator_max_actions', class: 'llmcfg-input',
|
||||
min: '1', max: '10', value: '3' })),
|
||||
]),
|
||||
|
||||
toggleRow('llm_orchestrator_log_reasoning', 'Log reasoning to chat history'),
|
||||
toggleRow('llm_orchestrator_skip_if_no_change', 'Skip cycle when nothing changed'),
|
||||
|
||||
el('div', { class: 'llmcfg-status-row', id: 'orch-status-row' }),
|
||||
|
||||
el('div', { class: 'llmcfg-actions' }, [
|
||||
el('button', { class: 'llmcfg-btn primary', id: 'orch-save-btn' }, ['SAVE ORCHESTRATOR']),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
||||
/* ── Personality & Prompts section ───────────────── */
|
||||
el('div', { class: 'llmcfg-section' }, [
|
||||
el('div', { class: 'llmcfg-section-title' }, ['PERSONALITY & PROMPTS']),
|
||||
el('div', { class: 'llmcfg-body' }, [
|
||||
|
||||
fieldEl('Operator Name',
|
||||
el('input', { type: 'text', id: 'llm_user_name', class: 'llmcfg-input',
|
||||
placeholder: 'Your name (Bjorn will address you)' })),
|
||||
fieldEl('About you',
|
||||
el('textarea', { id: 'llm_user_bio', class: 'llmcfg-textarea', rows: '2',
|
||||
placeholder: 'Brief description (e.g. security researcher, pentester, sysadmin...)' })),
|
||||
|
||||
fieldEl('Chat System Prompt',
|
||||
el('div', {}, [
|
||||
el('textarea', { id: 'llm_system_prompt_chat', class: 'llmcfg-textarea', rows: '4',
|
||||
placeholder: 'Loading default prompt...' }),
|
||||
el('button', { class: 'llmcfg-btn compact llmcfg-reset-btn', id: 'reset-prompt-chat' },
|
||||
['Reset to default']),
|
||||
])),
|
||||
|
||||
fieldEl('Comment System Prompt (EPD)',
|
||||
el('div', {}, [
|
||||
el('textarea', { id: 'llm_system_prompt_comment', class: 'llmcfg-textarea', rows: '3',
|
||||
placeholder: 'Loading default prompt...' }),
|
||||
el('button', { class: 'llmcfg-btn compact llmcfg-reset-btn', id: 'reset-prompt-comment' },
|
||||
['Reset to default']),
|
||||
])),
|
||||
|
||||
el('div', { class: 'llmcfg-actions' }, [
|
||||
el('button', { class: 'llmcfg-btn primary', id: 'prompts-save-btn' }, ['SAVE PERSONALITY']),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
||||
/* ── MCP Server section ──────────────────────────── */
|
||||
el('div', { class: 'llmcfg-section' }, [
|
||||
el('div', { class: 'llmcfg-section-title' }, [
|
||||
'MCP SERVER',
|
||||
el('span', { class: 'llmcfg-badge off', id: 'mcp-badge' }, ['OFF']),
|
||||
]),
|
||||
el('div', { class: 'llmcfg-body' }, [
|
||||
|
||||
toggleRow('mcp_enabled', t('llm_cfg.enable_mcp')),
|
||||
|
||||
el('div', { class: 'llmcfg-row' }, [
|
||||
fieldEl(t('llm_cfg.transport'), el('select', { id: 'mcp_transport', class: 'llmcfg-select' }, [
|
||||
el('option', { value: 'http' }, ['HTTP SSE (LAN accessible)']),
|
||||
el('option', { value: 'stdio' }, ['stdio (Claude Desktop)']),
|
||||
])),
|
||||
fieldEl(t('llm_cfg.mcp_port'),
|
||||
el('input', { type: 'number', id: 'mcp_port', class: 'llmcfg-input',
|
||||
min: '1024', max: '65535', value: '8765' })),
|
||||
]),
|
||||
|
||||
fieldEl(t('llm_cfg.exposed_tools'),
|
||||
el('div', { class: 'llmcfg-tools-grid', id: 'tools-grid' })),
|
||||
|
||||
el('div', { class: 'llmcfg-status-row', id: 'mcp-status-row' }),
|
||||
|
||||
el('div', { class: 'llmcfg-actions' }, [
|
||||
el('button', { class: 'llmcfg-btn primary', id: 'mcp-save-btn' }, [t('llm_cfg.save_mcp')]),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
/* ── Builder helpers ───────────────────────────────────── */
|
||||
|
||||
function toggleRow(id, label) {
|
||||
return el('div', { class: 'llmcfg-toggle-row' }, [
|
||||
el('span', { class: 'llmcfg-toggle-label' }, [label]),
|
||||
el('label', { class: 'llmcfg-toggle' }, [
|
||||
el('input', { type: 'checkbox', id }),
|
||||
el('span', { class: 'llmcfg-slider' }),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
function fieldEl(label, input) {
|
||||
return el('div', { class: 'llmcfg-field' }, [
|
||||
el('label', { class: 'llmcfg-label' }, [label]),
|
||||
input,
|
||||
]);
|
||||
}
|
||||
|
||||
function subsectionTitle(text) {
|
||||
return el('div', { class: 'llmcfg-subsection-title' }, [text]);
|
||||
}
|
||||
|
||||
/* ── Events ────────────────────────────────────────────── */
|
||||
|
||||
function bindEvents() {
|
||||
const saveLlmBtn = $('#llm-save-btn', root);
|
||||
const testLlmBtn = $('#llm-test-btn', root);
|
||||
const saveMcpBtn = $('#mcp-save-btn', root);
|
||||
const mcpToggle = $('#mcp_enabled', root);
|
||||
|
||||
const saveOrchBtn = $('#orch-save-btn', root);
|
||||
|
||||
if (saveLlmBtn) tracker.on(saveLlmBtn, 'click', saveLLM);
|
||||
if (testLlmBtn) tracker.on(testLlmBtn, 'click', testLLM);
|
||||
if (saveMcpBtn) tracker.on(saveMcpBtn, 'click', saveMCP);
|
||||
if (saveOrchBtn) tracker.on(saveOrchBtn, 'click', saveOrch);
|
||||
if (mcpToggle) tracker.on(mcpToggle, 'change', () => toggleMCP(mcpToggle.checked));
|
||||
|
||||
const savePromptsBtn = $('#prompts-save-btn', root);
|
||||
if (savePromptsBtn) tracker.on(savePromptsBtn, 'click', savePrompts);
|
||||
|
||||
const resetChat = $('#reset-prompt-chat', root);
|
||||
if (resetChat) tracker.on(resetChat, 'click', () => {
|
||||
const ta = $('#llm_system_prompt_chat', root);
|
||||
if (ta) { ta.value = ''; toast('Prompt reset — save to apply'); }
|
||||
});
|
||||
const resetComment = $('#reset-prompt-comment', root);
|
||||
if (resetComment) tracker.on(resetComment, 'click', () => {
|
||||
const ta = $('#llm_system_prompt_comment', root);
|
||||
if (ta) { ta.value = ''; toast('Prompt reset — save to apply'); }
|
||||
});
|
||||
|
||||
const larucheRefresh = $('#laruche-refresh-models', root);
|
||||
if (larucheRefresh) tracker.on(larucheRefresh, 'click', () => refreshModels('laruche'));
|
||||
|
||||
const ollamaRefresh = $('#ollama-refresh-models', root);
|
||||
if (ollamaRefresh) tracker.on(ollamaRefresh, 'click', () => refreshModels('ollama'));
|
||||
}
|
||||
|
||||
/* ── Data ──────────────────────────────────────────────── */
|
||||
|
||||
async function loadAll() {
|
||||
try {
|
||||
const [llmR, mcpR] = await Promise.all([
|
||||
api.get('/api/llm/config', { timeout: 8000 }),
|
||||
api.get('/api/mcp/status', { timeout: 8000 }),
|
||||
]);
|
||||
|
||||
if (llmR) applyLLMConfig(llmR);
|
||||
if (mcpR) applyMCPConfig(mcpR);
|
||||
|
||||
} catch (e) {
|
||||
toast('Load error: ' + e.message, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function applyLLMConfig(cfg) {
|
||||
const boolKeys = ['llm_enabled', 'llm_comments_enabled', 'llm_laruche_discovery'];
|
||||
const textKeys = ['llm_backend', 'llm_laruche_url', 'llm_ollama_url',
|
||||
'llm_api_provider', 'llm_api_model', 'llm_api_base_url',
|
||||
'llm_timeout_s', 'llm_max_tokens', 'llm_comment_max_tokens',
|
||||
'llm_user_name', 'llm_user_bio',
|
||||
'llm_system_prompt_chat', 'llm_system_prompt_comment'];
|
||||
|
||||
for (const k of boolKeys) {
|
||||
const el = $(('#' + k), root);
|
||||
if (el) el.checked = !!cfg[k];
|
||||
}
|
||||
for (const k of textKeys) {
|
||||
const el = $(('#' + k), root);
|
||||
if (el && cfg[k] !== undefined) el.value = cfg[k];
|
||||
}
|
||||
|
||||
// Set default prompts as placeholders
|
||||
const chatPromptEl = $('#llm_system_prompt_chat', root);
|
||||
if (chatPromptEl && cfg.llm_default_prompt_chat) {
|
||||
chatPromptEl.placeholder = cfg.llm_default_prompt_chat;
|
||||
}
|
||||
const commentPromptEl = $('#llm_system_prompt_comment', root);
|
||||
if (commentPromptEl && cfg.llm_default_prompt_comment) {
|
||||
commentPromptEl.placeholder = cfg.llm_default_prompt_comment;
|
||||
}
|
||||
|
||||
const badge = $('#llm-badge', root);
|
||||
if (badge) {
|
||||
badge.textContent = cfg.llm_enabled ? 'ON' : 'OFF';
|
||||
badge.className = 'llmcfg-badge ' + (cfg.llm_enabled ? 'on' : 'off');
|
||||
}
|
||||
|
||||
const statusRow = $('#llm-status-row', root);
|
||||
if (statusRow) {
|
||||
statusRow.textContent = cfg.llm_api_key_set
|
||||
? t('llm_cfg.api_key_set')
|
||||
: t('llm_cfg.api_key_not_set');
|
||||
}
|
||||
|
||||
// LaRuche mDNS discovery status
|
||||
const discRow = $('#laruche-discovery-status', root);
|
||||
const useBtn = $('#laruche-use-discovered', root);
|
||||
const urlEl = $('#llm_laruche_url', root);
|
||||
const discovered = cfg.laruche_discovered_url || '';
|
||||
|
||||
if (discRow) {
|
||||
if (discovered) {
|
||||
discRow.innerHTML = '';
|
||||
discRow.appendChild(el('span', { class: 'llmcfg-disc-found' },
|
||||
['\u2705 LaRuche discovered: ' + discovered]));
|
||||
} else if (cfg.laruche_discovery_active === false && cfg.llm_laruche_discovery) {
|
||||
discRow.innerHTML = '';
|
||||
discRow.appendChild(el('span', { class: 'llmcfg-disc-searching' },
|
||||
['\u23F3 mDNS scanning... no LaRuche node found yet']));
|
||||
} else if (!cfg.llm_laruche_discovery) {
|
||||
discRow.innerHTML = '';
|
||||
discRow.appendChild(el('span', { class: 'llmcfg-disc-off' },
|
||||
['\u26A0 mDNS discovery disabled']));
|
||||
}
|
||||
}
|
||||
|
||||
if (useBtn && urlEl) {
|
||||
if (discovered && urlEl.value !== discovered) {
|
||||
useBtn.style.display = '';
|
||||
useBtn.onclick = () => {
|
||||
urlEl.value = discovered;
|
||||
useBtn.style.display = 'none';
|
||||
toast('LaRuche URL applied — click Save to persist');
|
||||
};
|
||||
} else {
|
||||
useBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-populate empty URL field with discovered URL
|
||||
if (urlEl && discovered && !urlEl.value) {
|
||||
urlEl.value = discovered;
|
||||
}
|
||||
|
||||
// ── Model selectors ──
|
||||
// Set saved model values on the selects (even before refresh populates full list)
|
||||
for (const k of ['llm_laruche_model', 'llm_ollama_model']) {
|
||||
const sel = $(('#' + k), root);
|
||||
if (sel && cfg[k]) {
|
||||
// Ensure the saved value exists as an option
|
||||
if (!sel.querySelector('option[value="' + CSS.escape(cfg[k]) + '"]')) {
|
||||
sel.appendChild(el('option', { value: cfg[k] }, [cfg[k] + ' (saved)']));
|
||||
}
|
||||
sel.value = cfg[k];
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-fetch LaRuche models if we have a URL
|
||||
const larucheUrl = urlEl?.value || discovered;
|
||||
if (larucheUrl) {
|
||||
refreshModels('laruche').catch(() => {});
|
||||
}
|
||||
|
||||
// ── Orchestrator fields (included in same config response) ──
|
||||
const orchMode = $('#llm_orchestrator_mode', root);
|
||||
if (orchMode && cfg.llm_orchestrator_mode !== undefined) orchMode.value = cfg.llm_orchestrator_mode;
|
||||
|
||||
const orchInterval = $('#llm_orchestrator_interval_s', root);
|
||||
if (orchInterval && cfg.llm_orchestrator_interval_s !== undefined) orchInterval.value = cfg.llm_orchestrator_interval_s;
|
||||
|
||||
const orchMax = $('#llm_orchestrator_max_actions', root);
|
||||
if (orchMax && cfg.llm_orchestrator_max_actions !== undefined) orchMax.value = cfg.llm_orchestrator_max_actions;
|
||||
|
||||
for (const k of ['llm_orchestrator_log_reasoning', 'llm_orchestrator_skip_if_no_change']) {
|
||||
const cb = $(('#' + k), root);
|
||||
if (cb) cb.checked = !!cfg[k];
|
||||
}
|
||||
|
||||
const orchBadge = $('#orch-badge', root);
|
||||
if (orchBadge) {
|
||||
const mode = cfg.llm_orchestrator_mode || 'none';
|
||||
const label = mode === 'none' ? 'OFF' : mode.toUpperCase();
|
||||
orchBadge.textContent = label;
|
||||
orchBadge.className = 'llmcfg-badge ' + (mode === 'none' ? 'off' : 'on');
|
||||
}
|
||||
|
||||
const orchStatus = $('#orch-status-row', root);
|
||||
if (orchStatus) {
|
||||
const mode = cfg.llm_orchestrator_mode || 'none';
|
||||
if (mode === 'none') {
|
||||
orchStatus.textContent = 'Orchestrator disabled — LLM has no role in scheduling';
|
||||
} else if (mode === 'advisor') {
|
||||
orchStatus.textContent = 'Advisor mode — LLM suggests 1 action per cycle';
|
||||
} else {
|
||||
orchStatus.textContent = 'Autonomous mode — LLM runs full agentic loop every '
|
||||
+ (cfg.llm_orchestrator_interval_s || 60) + 's';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyMCPConfig(cfg) {
|
||||
const enabledEl = $('#mcp_enabled', root);
|
||||
const portEl = $('#mcp_port', root);
|
||||
const transEl = $('#mcp_transport', root);
|
||||
const badge = $('#mcp-badge', root);
|
||||
const statusRow = $('#mcp-status-row', root);
|
||||
|
||||
if (enabledEl) enabledEl.checked = !!cfg.enabled;
|
||||
if (portEl) portEl.value = cfg.port || 8765;
|
||||
if (transEl && cfg.transport) transEl.value = cfg.transport;
|
||||
|
||||
buildToolsGrid(cfg.allowed_tools || ALL_TOOLS);
|
||||
|
||||
const running = cfg.running;
|
||||
if (badge) {
|
||||
badge.textContent = running ? 'RUNNING' : (cfg.enabled ? 'ENABLED' : 'OFF');
|
||||
badge.className = 'llmcfg-badge ' + (running ? 'on' : 'off');
|
||||
}
|
||||
if (statusRow) {
|
||||
statusRow.textContent = running
|
||||
? t('llm_cfg.mcp_running') + ' ' + (cfg.port || 8765) + ' (' + (cfg.transport || 'http') + ')'
|
||||
: t('llm_cfg.mcp_stopped');
|
||||
}
|
||||
}
|
||||
|
||||
function buildToolsGrid(enabled) {
|
||||
const grid = $('#tools-grid', root);
|
||||
if (!grid) return;
|
||||
empty(grid);
|
||||
for (const name of ALL_TOOLS) {
|
||||
const label = el('label', { class: 'llmcfg-tool-item' }, [
|
||||
el('input', { type: 'checkbox', id: 'tool_' + name,
|
||||
checked: enabled.includes(name) ? 'checked' : undefined }),
|
||||
document.createTextNode(name),
|
||||
]);
|
||||
grid.appendChild(label);
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectedTools() {
|
||||
return ALL_TOOLS.filter(n => $(('#tool_' + n), root)?.checked);
|
||||
}
|
||||
|
||||
/* ── Model Selector ────────────────────────────────────── */
|
||||
|
||||
async function refreshModels(backend) {
|
||||
const selectId = backend === 'laruche' ? 'llm_laruche_model' : 'llm_ollama_model';
|
||||
const selectEl = $(('#' + selectId), root);
|
||||
if (!selectEl) return;
|
||||
|
||||
toast('Fetching ' + backend + ' models…');
|
||||
try {
|
||||
const res = await api.get('/api/llm/models?backend=' + backend, { timeout: 15000 });
|
||||
if (res?.status === 'ok' && Array.isArray(res.models)) {
|
||||
populateModelSelect(selectEl, res.models, selectEl.value);
|
||||
toast(res.models.length + ' model(s) found');
|
||||
|
||||
// Show LaRuche default model info
|
||||
if (backend === 'laruche') {
|
||||
const infoEl = $('#laruche-default-model', root);
|
||||
if (infoEl) {
|
||||
if (res.default_model) {
|
||||
infoEl.innerHTML = '';
|
||||
infoEl.appendChild(el('span', { class: 'llmcfg-laruche-default-label' },
|
||||
['\u26A1 LaRuche default: ']));
|
||||
infoEl.appendChild(el('span', { class: 'llmcfg-laruche-default-value' },
|
||||
[res.default_model]));
|
||||
} else {
|
||||
infoEl.textContent = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
toast('No models returned: ' + (res?.message || 'unknown error'));
|
||||
}
|
||||
} catch (e) {
|
||||
toast('Error fetching models: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function populateModelSelect(selectEl, models, currentValue) {
|
||||
const prev = currentValue || selectEl.value || '';
|
||||
empty(selectEl);
|
||||
selectEl.appendChild(el('option', { value: '' }, ['Default (server decides)']));
|
||||
for (const m of models) {
|
||||
const name = m.name || '?';
|
||||
const sizeMB = m.size ? ' (' + (m.size / 1e9).toFixed(1) + 'G)' : '';
|
||||
selectEl.appendChild(el('option', { value: name }, [name + sizeMB]));
|
||||
}
|
||||
// Restore previous selection if it still exists
|
||||
if (prev) {
|
||||
selectEl.value = prev;
|
||||
// If the value didn't match any option, it resets to ''
|
||||
if (!selectEl.value && prev) {
|
||||
// Add it as a custom option so user doesn't lose their setting
|
||||
selectEl.appendChild(el('option', { value: prev }, [prev + ' (saved)']));
|
||||
selectEl.value = prev;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Actions ───────────────────────────────────────────── */
|
||||
|
||||
async function saveLLM() {
|
||||
const payload = {};
|
||||
|
||||
for (const k of ['llm_enabled', 'llm_comments_enabled', 'llm_laruche_discovery']) {
|
||||
const el = $(('#' + k), root);
|
||||
payload[k] = el ? el.checked : false;
|
||||
}
|
||||
for (const k of ['llm_backend', 'llm_laruche_url', 'llm_laruche_model',
|
||||
'llm_ollama_url', 'llm_ollama_model',
|
||||
'llm_api_provider', 'llm_api_model', 'llm_api_base_url']) {
|
||||
const el = $(('#' + k), root);
|
||||
if (el) payload[k] = el.value;
|
||||
}
|
||||
for (const k of ['llm_timeout_s', 'llm_max_tokens', 'llm_comment_max_tokens']) {
|
||||
const el = $(('#' + k), root);
|
||||
if (el) payload[k] = parseInt(el.value) || undefined;
|
||||
}
|
||||
const keyEl = $('#llm_api_key', root);
|
||||
if (keyEl?.value) payload.llm_api_key = keyEl.value;
|
||||
|
||||
try {
|
||||
const res = await api.post('/api/llm/config', payload);
|
||||
if (res?.status === 'ok') {
|
||||
toast(t('llm_cfg.saved_llm'));
|
||||
await loadAll();
|
||||
} else {
|
||||
toast(t('llm_cfg.error') + ': ' + res?.message);
|
||||
}
|
||||
} catch (e) {
|
||||
toast(t('llm_cfg.save_error') + ': ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function savePrompts() {
|
||||
const payload = {};
|
||||
for (const k of ['llm_user_name', 'llm_user_bio', 'llm_system_prompt_chat', 'llm_system_prompt_comment']) {
|
||||
const el = $(('#' + k), root);
|
||||
if (el) payload[k] = el.value || '';
|
||||
}
|
||||
try {
|
||||
const res = await api.post('/api/llm/config', payload);
|
||||
if (res?.status === 'ok') {
|
||||
toast('Personality & prompts saved');
|
||||
await loadAll();
|
||||
} else {
|
||||
toast(t('llm_cfg.error') + ': ' + res?.message);
|
||||
}
|
||||
} catch (e) {
|
||||
toast(t('llm_cfg.save_error') + ': ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function testLLM() {
|
||||
toast(t('llm_cfg.testing'));
|
||||
try {
|
||||
const res = await api.post('/api/llm/chat', { message: 'ping', session_id: 'test' });
|
||||
if (res?.status === 'ok') {
|
||||
toast('OK — ' + (res.response || '').slice(0, 60));
|
||||
} else {
|
||||
toast(t('llm_cfg.test_failed') + ': ' + (res?.message || 'no response'));
|
||||
}
|
||||
} catch (e) {
|
||||
toast(t('llm_cfg.error') + ': ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleMCP(enabled) {
|
||||
try {
|
||||
const res = await api.post('/api/mcp/toggle', { enabled });
|
||||
if (res?.status === 'ok') {
|
||||
toast(enabled ? t('llm_cfg.mcp_enabled') : t('llm_cfg.mcp_disabled'));
|
||||
await loadAll();
|
||||
} else {
|
||||
toast(t('llm_cfg.error') + ': ' + res?.message);
|
||||
}
|
||||
} catch (e) {
|
||||
toast(t('llm_cfg.error') + ': ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function saveOrch() {
|
||||
const payload = {};
|
||||
const modeEl = $('#llm_orchestrator_mode', root);
|
||||
if (modeEl) payload.llm_orchestrator_mode = modeEl.value;
|
||||
|
||||
for (const k of ['llm_orchestrator_interval_s', 'llm_orchestrator_max_actions']) {
|
||||
const inp = $(('#' + k), root);
|
||||
if (inp) payload[k] = parseInt(inp.value) || undefined;
|
||||
}
|
||||
for (const k of ['llm_orchestrator_log_reasoning', 'llm_orchestrator_skip_if_no_change']) {
|
||||
const cb = $(('#' + k), root);
|
||||
if (cb) payload[k] = cb.checked;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await api.post('/api/llm/config', payload);
|
||||
if (res?.status === 'ok') {
|
||||
toast('Orchestrator config saved');
|
||||
await loadAll();
|
||||
} else {
|
||||
toast(t('llm_cfg.error') + ': ' + res?.message);
|
||||
}
|
||||
} catch (e) {
|
||||
toast(t('llm_cfg.save_error') + ': ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function saveMCP() {
|
||||
const portEl = $('#mcp_port', root);
|
||||
const transEl = $('#mcp_transport', root);
|
||||
const payload = {
|
||||
allowed_tools: getSelectedTools(),
|
||||
port: parseInt(portEl?.value) || 8765,
|
||||
transport: transEl?.value || 'http',
|
||||
};
|
||||
try {
|
||||
const res = await api.post('/api/mcp/config', payload);
|
||||
if (res?.status === 'ok') {
|
||||
toast(t('llm_cfg.saved_mcp'));
|
||||
await loadAll();
|
||||
} else {
|
||||
toast(t('llm_cfg.error') + ': ' + res?.message);
|
||||
}
|
||||
} catch (e) {
|
||||
toast(t('llm_cfg.save_error') + ': ' + e.message);
|
||||
}
|
||||
}
|
||||
@@ -382,6 +382,35 @@ function startClock() {
|
||||
clockTimer = setInterval(updateCountdowns, 1000);
|
||||
}
|
||||
|
||||
/* ── origin badge resolver ── */
|
||||
function _resolveOrigin(r) {
|
||||
const md = r.metadata || {};
|
||||
const trigger = (r.trigger_source || md.trigger_source || '').toLowerCase();
|
||||
const method = (md.decision_method || '').toLowerCase();
|
||||
const origin = (md.decision_origin || '').toLowerCase();
|
||||
|
||||
// LLM orchestrator (autonomous or advisor)
|
||||
if (trigger === 'llm_autonomous' || origin === 'llm' || method === 'llm_autonomous')
|
||||
return { label: 'LLM', cls: 'llm' };
|
||||
if (trigger === 'llm_advisor' || method === 'llm_advisor')
|
||||
return { label: 'LLM Advisor', cls: 'llm' };
|
||||
// AI model (ML-based decision)
|
||||
if (method === 'ai_confirmed' || method === 'ai_boosted' || origin === 'ai_confirmed')
|
||||
return { label: 'AI', cls: 'ai' };
|
||||
// MCP (external tool call)
|
||||
if (trigger === 'mcp' || trigger === 'mcp_tool')
|
||||
return { label: 'MCP', cls: 'mcp' };
|
||||
// Manual (UI or API)
|
||||
if (trigger === 'ui' || trigger === 'manual' || trigger === 'api')
|
||||
return { label: 'Manual', cls: 'manual' };
|
||||
// Scheduler heuristic (default)
|
||||
if (trigger === 'scheduler' || trigger === 'trigger_event' || method === 'heuristic')
|
||||
return { label: 'Heuristic', cls: 'heuristic' };
|
||||
// Fallback: show trigger if known
|
||||
if (trigger) return { label: trigger, cls: 'heuristic' };
|
||||
return null;
|
||||
}
|
||||
|
||||
/* ── card ── */
|
||||
function cardEl(r) {
|
||||
const cs = r._computed_status;
|
||||
@@ -407,6 +436,12 @@ function cardEl(r) {
|
||||
el('span', { class: `badge status-${cs}` }, [cs]),
|
||||
]));
|
||||
|
||||
/* origin badge — shows who queued this action */
|
||||
const origin = _resolveOrigin(r);
|
||||
if (origin) {
|
||||
children.push(el('div', { class: 'originBadge origin-' + origin.cls }, [origin.label]));
|
||||
}
|
||||
|
||||
/* chips */
|
||||
const chips = [];
|
||||
if (r.hostname) chips.push(chipEl(r.hostname, 195));
|
||||
|
||||
@@ -81,6 +81,10 @@ function buildShell() {
|
||||
class: 'sentinel-toggle', id: 'sentinel-clear',
|
||||
style: 'padding:3px 8px;font-size:0.65rem',
|
||||
}, [t('sentinel.clearAll')]),
|
||||
el('button', {
|
||||
class: 'sentinel-toggle sentinel-ai-btn', id: 'sentinel-ai-summary',
|
||||
style: 'padding:3px 8px;font-size:0.65rem;display:none',
|
||||
}, ['\uD83E\uDDE0 AI Summary']),
|
||||
]),
|
||||
]),
|
||||
el('div', { class: 'sentinel-panel-body', id: 'sentinel-events' }, [
|
||||
@@ -218,6 +222,25 @@ function bindEvents() {
|
||||
saveDevice(devSave.dataset.devSave);
|
||||
return;
|
||||
}
|
||||
|
||||
// AI Analyze event
|
||||
const aiAnalyze = e.target.closest('[data-ai-analyze]');
|
||||
if (aiAnalyze) {
|
||||
analyzeEvent(parseInt(aiAnalyze.dataset.aiAnalyze));
|
||||
return;
|
||||
}
|
||||
|
||||
// AI Summary
|
||||
if (e.target.closest('#sentinel-ai-summary')) {
|
||||
summarizeEvents();
|
||||
return;
|
||||
}
|
||||
|
||||
// AI Generate rule
|
||||
if (e.target.closest('#sentinel-ai-gen-rule')) {
|
||||
generateRuleFromAI();
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -314,6 +337,10 @@ function paintEvents() {
|
||||
if (!container) return;
|
||||
empty(container);
|
||||
|
||||
// Show AI Summary button when there are enough unread events
|
||||
const aiSumBtn = $('#sentinel-ai-summary', root);
|
||||
if (aiSumBtn) aiSumBtn.style.display = unreadCount > 3 ? '' : 'none';
|
||||
|
||||
if (events.length === 0) {
|
||||
container.appendChild(
|
||||
el('div', {
|
||||
@@ -338,6 +365,12 @@ function paintEvents() {
|
||||
el('span', { class: 'sentinel-event-title' }, [escapeHtml(ev.title)]),
|
||||
]),
|
||||
el('div', { style: 'display:flex;align-items:center;gap:6px;flex-shrink:0' }, [
|
||||
el('button', {
|
||||
class: 'sentinel-toggle sentinel-ai-btn',
|
||||
'data-ai-analyze': ev.id,
|
||||
style: 'padding:1px 6px;font-size:0.55rem',
|
||||
title: 'AI Analyze',
|
||||
}, ['\uD83E\uDDE0']),
|
||||
el('span', { class: 'sentinel-event-time' }, [formatTime(ev.timestamp)]),
|
||||
...(isUnread ? [
|
||||
el('button', {
|
||||
@@ -360,6 +393,7 @@ function paintEvents() {
|
||||
[ev.ip_address])
|
||||
] : []),
|
||||
]),
|
||||
el('div', { class: 'sentinel-ai-result', id: `ai-result-${ev.id}` }),
|
||||
]);
|
||||
container.appendChild(card);
|
||||
}
|
||||
@@ -382,12 +416,16 @@ function paintSidebar() {
|
||||
/* ── Rules ─────────────────────────────────────────────── */
|
||||
|
||||
function paintRules(container) {
|
||||
// Add rule button
|
||||
// Add rule button + AI generate
|
||||
container.appendChild(
|
||||
el('button', {
|
||||
class: 'sentinel-toggle', id: 'sentinel-add-rule',
|
||||
style: 'align-self:flex-start;margin-bottom:4px',
|
||||
}, ['+ ' + t('sentinel.addRule')])
|
||||
el('div', { style: 'display:flex;gap:6px;margin-bottom:4px;flex-wrap:wrap' }, [
|
||||
el('button', {
|
||||
class: 'sentinel-toggle', id: 'sentinel-add-rule',
|
||||
}, ['+ ' + t('sentinel.addRule')]),
|
||||
el('button', {
|
||||
class: 'sentinel-toggle sentinel-ai-btn', id: 'sentinel-ai-gen-rule',
|
||||
}, ['\uD83E\uDDE0 Generate Rule']),
|
||||
])
|
||||
);
|
||||
|
||||
if (rules.length === 0) {
|
||||
@@ -732,6 +770,81 @@ async function saveNotifiers() {
|
||||
} catch (err) { toast(err.message, 3000, 'error'); }
|
||||
}
|
||||
|
||||
/* ── AI Functions ──────────────────────────────────────── */
|
||||
|
||||
async function analyzeEvent(eventId) {
|
||||
const resultEl = $(`#ai-result-${eventId}`, root);
|
||||
if (!resultEl) return;
|
||||
|
||||
// Toggle: if already showing, hide
|
||||
if (resultEl.classList.contains('active')) {
|
||||
resultEl.classList.remove('active');
|
||||
return;
|
||||
}
|
||||
|
||||
resultEl.textContent = '\u23F3 Analyzing...';
|
||||
resultEl.classList.add('active');
|
||||
|
||||
try {
|
||||
const res = await api.post('/api/sentinel/analyze', { event_ids: [eventId] });
|
||||
if (res?.status === 'ok') {
|
||||
resultEl.textContent = res.analysis;
|
||||
} else {
|
||||
resultEl.textContent = '\u274C ' + (res?.message || 'Analysis failed');
|
||||
}
|
||||
} catch (e) {
|
||||
resultEl.textContent = '\u274C Error: ' + e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function summarizeEvents() {
|
||||
const btn = $('#sentinel-ai-summary', root);
|
||||
if (btn) btn.textContent = '\u23F3 Summarizing...';
|
||||
|
||||
try {
|
||||
const res = await api.post('/api/sentinel/summarize', {});
|
||||
if (res?.status === 'ok') {
|
||||
// Show summary at the top of the event feed
|
||||
const container = $('#sentinel-events', root);
|
||||
if (container) {
|
||||
const existing = container.querySelector('.sentinel-ai-summary');
|
||||
if (existing) existing.remove();
|
||||
const summary = el('div', { class: 'sentinel-ai-summary' }, [
|
||||
el('div', { style: 'font-weight:600;font-size:0.7rem;margin-bottom:4px;color:var(--acid)' },
|
||||
['\uD83E\uDDE0 AI Summary']),
|
||||
el('div', { style: 'font-size:0.7rem;white-space:pre-wrap' }, [res.summary]),
|
||||
]);
|
||||
container.insertBefore(summary, container.firstChild);
|
||||
}
|
||||
toast('Summary generated');
|
||||
} else {
|
||||
toast('Summary failed: ' + (res?.message || 'unknown'), 3000, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
toast('Error: ' + e.message, 3000, 'error');
|
||||
} finally {
|
||||
if (btn) btn.textContent = '\uD83E\uDDE0 AI Summary';
|
||||
}
|
||||
}
|
||||
|
||||
async function generateRuleFromAI() {
|
||||
const desc = prompt('Describe the rule you want (e.g. "alert when a new device joins my network"):');
|
||||
if (!desc || !desc.trim()) return;
|
||||
|
||||
toast('\u23F3 Generating rule...');
|
||||
try {
|
||||
const res = await api.post('/api/sentinel/suggest-rule', { description: desc.trim() });
|
||||
if (res?.status === 'ok' && res.rule) {
|
||||
showRuleEditor(res.rule);
|
||||
toast('Rule generated — review and save');
|
||||
} else {
|
||||
toast('Could not generate rule: ' + (res?.message || res?.raw || 'unknown'), 4000, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
toast('Error: ' + e.message, 3000, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Helpers ───────────────────────────────────────────── */
|
||||
|
||||
function formatEventType(type) {
|
||||
|
||||
Reference in New Issue
Block a user