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
@@ -17,3 +17,4 @@
|
||||
@import url("./pages/sentinel.css");
|
||||
@import url("./pages/bifrost.css");
|
||||
@import url("./pages/loki.css");
|
||||
@import url("./pages/llm.css");
|
||||
|
||||
425
web/css/pages/llm.css
Normal file
425
web/css/pages/llm.css
Normal file
@@ -0,0 +1,425 @@
|
||||
/* ==========================================================================
|
||||
llm.css — LLM Chat & LLM Config SPA pages
|
||||
========================================================================== */
|
||||
|
||||
/* ── LLM Chat ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.llmc-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--h-topbar, 56px) - var(--h-bottombar, 56px));
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.llmc-header {
|
||||
background: var(--c-panel);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.llmc-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--muted-off);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.llmc-dot.online { background: var(--ok); }
|
||||
.llmc-dot.offline { background: var(--danger); }
|
||||
|
||||
.llmc-title {
|
||||
font-size: 13px;
|
||||
color: var(--acid);
|
||||
letter-spacing: 2px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.llmc-status {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.llmc-btn-ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--c-border);
|
||||
color: var(--muted);
|
||||
padding: 3px 10px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: border-color .15s, color .15s;
|
||||
}
|
||||
.llmc-btn-ghost:hover { border-color: var(--acid); color: var(--ink); }
|
||||
.llmc-btn-ghost.active { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in oklab, var(--accent-2) 8%, transparent); }
|
||||
|
||||
.llmc-clear-btn { margin-left: auto; }
|
||||
|
||||
.llmc-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.llmc-msg {
|
||||
max-width: 88%;
|
||||
padding: 9px 13px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.llmc-msg.user {
|
||||
background: color-mix(in oklab, var(--ok) 8%, transparent);
|
||||
border: 1px solid color-mix(in oklab, var(--ok) 25%, transparent);
|
||||
align-self: flex-end;
|
||||
color: color-mix(in oklab, var(--ok) 85%, var(--ink) 15%);
|
||||
}
|
||||
.llmc-msg.assistant {
|
||||
background: color-mix(in oklab, var(--accent-2) 6%, transparent);
|
||||
border: 1px solid color-mix(in oklab, var(--accent-2) 20%, transparent);
|
||||
align-self: flex-start;
|
||||
}
|
||||
.llmc-msg.system {
|
||||
background: transparent;
|
||||
border: 1px dashed var(--c-border);
|
||||
align-self: center;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
.llmc-msg-role {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 3px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.llmc-msg.user .llmc-msg-role { color: color-mix(in oklab, var(--ok) 70%, var(--muted)); }
|
||||
.llmc-msg.assistant .llmc-msg-role { color: var(--acid); }
|
||||
|
||||
.llmc-thinking {
|
||||
align-self: flex-start;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
padding: 6px 16px;
|
||||
border-left: 2px solid var(--danger);
|
||||
font-family: 'Courier New', monospace;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.llmc-disabled-msg {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.llmc-disabled-msg a { color: var(--acid); }
|
||||
|
||||
.llmc-input-row {
|
||||
background: var(--c-panel);
|
||||
border-top: 1px solid var(--c-border);
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.llmc-input {
|
||||
flex: 1;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--c-border);
|
||||
color: var(--ink);
|
||||
padding: 9px 12px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 12px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
height: 44px;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.llmc-input:focus { border-color: var(--acid); }
|
||||
|
||||
.llmc-send-btn {
|
||||
background: var(--danger);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
letter-spacing: 1px;
|
||||
transition: background .15s;
|
||||
}
|
||||
.llmc-send-btn:hover { background: color-mix(in oklab, var(--danger) 80%, white 20%); }
|
||||
.llmc-send-btn:disabled { background: var(--muted-off); cursor: not-allowed; }
|
||||
|
||||
/* ── LLM Config ───────────────────────────────────────────────────────── */
|
||||
|
||||
.llmcfg-page {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
color: var(--ink);
|
||||
background: var(--bg);
|
||||
min-height: calc(100vh - var(--h-topbar, 56px) - var(--h-bottombar, 56px));
|
||||
}
|
||||
|
||||
.llmcfg-header {
|
||||
background: var(--c-panel);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.llmcfg-title {
|
||||
font-size: 13px;
|
||||
color: var(--acid);
|
||||
letter-spacing: 2px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.llmcfg-nav-link {
|
||||
margin-left: auto;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
.llmcfg-nav-link:hover { color: var(--ink); }
|
||||
|
||||
.llmcfg-container {
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.llmcfg-section {
|
||||
background: var(--c-panel);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.llmcfg-section-title {
|
||||
padding: 10px 14px;
|
||||
background: var(--c-panel-2);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
font-size: 11px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--acid);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.llmcfg-badge {
|
||||
font-size: 10px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.llmcfg-badge.on { background: var(--ok); color: #000; }
|
||||
.llmcfg-badge.off { background: var(--c-border); color: var(--muted); }
|
||||
|
||||
.llmcfg-body {
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.llmcfg-subsection-title {
|
||||
font-size: 10px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--c-border);
|
||||
padding-top: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.llmcfg-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.llmcfg-label {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.llmcfg-input,
|
||||
.llmcfg-select {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--c-border);
|
||||
color: var(--ink);
|
||||
padding: 7px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
.llmcfg-input:focus,
|
||||
.llmcfg-select:focus { border-color: var(--acid); }
|
||||
.llmcfg-input[type="password"] { letter-spacing: 2px; }
|
||||
|
||||
.llmcfg-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.llmcfg-row .llmcfg-field { flex: 1; }
|
||||
|
||||
.llmcfg-toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.llmcfg-toggle-label {
|
||||
font-size: 12px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.llmcfg-toggle {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.llmcfg-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
|
||||
.llmcfg-slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--c-border-strong);
|
||||
transition: .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.llmcfg-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
background: var(--muted-off);
|
||||
transition: .2s;
|
||||
}
|
||||
.llmcfg-toggle input:checked + .llmcfg-slider { background: var(--danger); }
|
||||
.llmcfg-toggle input:checked + .llmcfg-slider::before { transform: translateX(20px); background: white; }
|
||||
|
||||
.llmcfg-tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 7px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.llmcfg-tool-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
}
|
||||
.llmcfg-tool-item input[type="checkbox"] { accent-color: var(--acid); }
|
||||
|
||||
.llmcfg-status-row {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--c-border);
|
||||
padding-top: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.llmcfg-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.llmcfg-btn {
|
||||
padding: 7px 16px;
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--c-border);
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1px;
|
||||
transition: border-color .15s, color .15s;
|
||||
}
|
||||
.llmcfg-btn:hover { border-color: var(--acid); color: var(--acid); }
|
||||
.llmcfg-btn.primary { background: var(--danger); border-color: var(--danger); color: white; }
|
||||
.llmcfg-btn.primary:hover { background: color-mix(in oklab, var(--danger) 80%, white 20%); border-color: inherit; color: white; }
|
||||
.llmcfg-btn.compact { padding: 5px 10px; flex-shrink: 0; }
|
||||
|
||||
/* LaRuche discovery row */
|
||||
.llmcfg-url-row { display: flex; gap: 6px; align-items: center; }
|
||||
.llmcfg-url-row .llmcfg-input { flex: 1; }
|
||||
|
||||
/* Model selector row */
|
||||
.llmcfg-model-row { display: flex; gap: 6px; align-items: center; }
|
||||
.llmcfg-model-row .llmcfg-select { flex: 1; }
|
||||
|
||||
.llmcfg-discovery-row {
|
||||
font-size: 11px;
|
||||
padding: 4px 0;
|
||||
min-height: 18px;
|
||||
}
|
||||
.llmcfg-disc-found { color: var(--ok); }
|
||||
.llmcfg-disc-searching { color: var(--muted); }
|
||||
.llmcfg-disc-off { color: var(--danger); opacity: .7; }
|
||||
|
||||
/* LaRuche default model info */
|
||||
.llmcfg-laruche-default {
|
||||
font-size: 11px;
|
||||
padding: 2px 0 0;
|
||||
min-height: 14px;
|
||||
}
|
||||
.llmcfg-laruche-default-label {
|
||||
color: var(--muted);
|
||||
}
|
||||
.llmcfg-laruche-default-value {
|
||||
color: #facc15;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Personality & Prompts textarea */
|
||||
.llmcfg-textarea {
|
||||
width: 100%;
|
||||
min-height: 70px;
|
||||
resize: vertical;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 4px;
|
||||
color: var(--ink);
|
||||
padding: 7px 10px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.llmcfg-textarea:focus { border-color: var(--acid); }
|
||||
.llmcfg-textarea::placeholder { color: var(--muted); opacity: 0.5; font-size: 0.65rem; }
|
||||
.llmcfg-reset-btn {
|
||||
margin-top: 4px;
|
||||
font-size: 0.6rem;
|
||||
padding: 2px 8px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.llmcfg-reset-btn:hover { opacity: 1; }
|
||||
@@ -291,6 +291,42 @@
|
||||
background: var(--c-cancel);
|
||||
}
|
||||
|
||||
/* Origin badge — who queued this action */
|
||||
.scheduler-container .originBadge {
|
||||
display: inline-block;
|
||||
font-size: .68rem;
|
||||
letter-spacing: .5px;
|
||||
padding: .1rem .5rem;
|
||||
border-radius: 2px;
|
||||
font-weight: 600;
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
.scheduler-container .origin-llm {
|
||||
background: color-mix(in oklab, var(--danger) 18%, transparent);
|
||||
color: var(--danger);
|
||||
border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
|
||||
}
|
||||
.scheduler-container .origin-ai {
|
||||
background: color-mix(in oklab, var(--accent-2, #a78bfa) 15%, transparent);
|
||||
color: var(--accent-2, #a78bfa);
|
||||
border: 1px solid color-mix(in oklab, var(--accent-2, #a78bfa) 30%, transparent);
|
||||
}
|
||||
.scheduler-container .origin-mcp {
|
||||
background: color-mix(in oklab, var(--acid) 12%, transparent);
|
||||
color: var(--acid);
|
||||
border: 1px solid color-mix(in oklab, var(--acid) 25%, transparent);
|
||||
}
|
||||
.scheduler-container .origin-manual {
|
||||
background: color-mix(in oklab, var(--ok) 12%, transparent);
|
||||
color: var(--ok);
|
||||
border: 1px solid color-mix(in oklab, var(--ok) 25%, transparent);
|
||||
}
|
||||
.scheduler-container .origin-heuristic {
|
||||
background: color-mix(in oklab, var(--muted) 12%, transparent);
|
||||
color: var(--muted);
|
||||
border: 1px solid color-mix(in oklab, var(--muted) 25%, transparent);
|
||||
}
|
||||
|
||||
/* Collapsed */
|
||||
.scheduler-container .card.collapsed .kv,
|
||||
.scheduler-container .card.collapsed .tags,
|
||||
@@ -334,8 +370,7 @@
|
||||
height: 80px;
|
||||
object-fit: contain;
|
||||
border-radius: 6px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--c-border);
|
||||
|
||||
}
|
||||
|
||||
.scheduler-container .card.status-running .actionIcon {
|
||||
|
||||
@@ -364,3 +364,32 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── AI Sentinel elements ─────────────────────────────── */
|
||||
.sentinel-ai-btn {
|
||||
background: rgba(168, 85, 247, .1) !important;
|
||||
border-color: rgba(168, 85, 247, .3) !important;
|
||||
color: #c084fc !important;
|
||||
}
|
||||
.sentinel-ai-btn:hover {
|
||||
background: rgba(168, 85, 247, .2) !important;
|
||||
}
|
||||
.sentinel-ai-result {
|
||||
margin: 4px 0 0;
|
||||
padding: 6px 8px;
|
||||
background: rgba(168, 85, 247, .06);
|
||||
border: 1px solid rgba(168, 85, 247, .15);
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.4;
|
||||
display: none;
|
||||
}
|
||||
.sentinel-ai-result.active { display: block; }
|
||||
.sentinel-ai-summary {
|
||||
padding: 8px;
|
||||
background: rgba(59, 130, 246, .06);
|
||||
border: 1px solid rgba(59, 130, 246, .15);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -404,6 +404,41 @@ body.console-docked .app-container {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Bjorn comment lines */
|
||||
.comment-line {
|
||||
color: #4ade80;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.comment-icon {
|
||||
display: inline-block;
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
flex-shrink: 0;
|
||||
opacity: .85;
|
||||
vertical-align: middle;
|
||||
object-fit: contain;
|
||||
}
|
||||
.comment-status {
|
||||
opacity: .55;
|
||||
font-size: .9em;
|
||||
}
|
||||
.comment-llm-badge {
|
||||
display: inline-block;
|
||||
font-size: .7em;
|
||||
font-weight: 700;
|
||||
letter-spacing: .5px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, rgba(168,85,247,.35), rgba(168,85,247,.2));
|
||||
border: 1px solid rgba(168,85,247,.5);
|
||||
color: #c4b5fd;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Console font slider row */
|
||||
.console-fontrow {
|
||||
flex-basis: 100%;
|
||||
@@ -723,17 +758,121 @@ body.console-docked .app-container {
|
||||
transform: scale(.96);
|
||||
}
|
||||
|
||||
/* QuickPanel rows & signal */
|
||||
/* ---- QuickPanel Tab Bar ---- */
|
||||
.qp-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin: 0 16px 12px;
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qp-tab {
|
||||
padding: 8px 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color .2s ease, border-color .2s ease;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.qp-tab:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.qp-tab.active {
|
||||
color: var(--acid);
|
||||
border-bottom-color: var(--acid);
|
||||
}
|
||||
|
||||
.qp-tab-icon {
|
||||
font-size: 15px;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.qp-tab.active .qp-tab-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ---- QuickPanel rows & cards ---- */
|
||||
.qprow {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 10px;
|
||||
background: var(--grad-qprow);
|
||||
border-radius: 12px;
|
||||
background: var(--grad-qprow, color-mix(in oklab, var(--c-panel, #0d1520) 80%, transparent));
|
||||
margin-bottom: 6px;
|
||||
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, border-color .15s ease;
|
||||
animation: qpSlideIn .25s ease forwards;
|
||||
animation-delay: calc(var(--i, 0) * 40ms);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.qprow:hover {
|
||||
border-color: var(--c-border-strong, var(--c-border));
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.qprow.connected {
|
||||
border-left: 3px solid var(--acid);
|
||||
}
|
||||
|
||||
@keyframes qpSlideIn {
|
||||
from { transform: translateY(8px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ---- WiFi card layout ---- */
|
||||
.wifi-card {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wifi-card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wifi-card-ssid {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wifi-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wifi-card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.wifi-connected-chip {
|
||||
font-size: 11px;
|
||||
color: var(--acid);
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* ---- Signal bars ---- */
|
||||
.sig {
|
||||
display: inline-grid;
|
||||
grid-auto-flow: column;
|
||||
@@ -742,19 +881,124 @@ body.console-docked .app-container {
|
||||
}
|
||||
|
||||
.sig i {
|
||||
width: 4px;
|
||||
width: 5px;
|
||||
height: 6px;
|
||||
display: block;
|
||||
background: var(--c-slot);
|
||||
border: 1px solid var(--c-border);
|
||||
border-bottom: none;
|
||||
border-radius: 2px 2px 0 0;
|
||||
transition: background .2s ease;
|
||||
}
|
||||
|
||||
.sig i.on {
|
||||
background: var(--acid);
|
||||
}
|
||||
|
||||
/* ---- Known network cards ---- */
|
||||
.known-card {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.known-card-grip {
|
||||
cursor: grab;
|
||||
color: var(--muted);
|
||||
font-size: 16px;
|
||||
padding: 4px 2px;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.known-card-grip:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.known-card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.known-card-ssid {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.known-card-priority {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.known-card-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---- Drag & Drop ---- */
|
||||
.qprow.dragging {
|
||||
opacity: .4;
|
||||
transform: scale(.97);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.drag-placeholder {
|
||||
height: 3px;
|
||||
background: var(--acid);
|
||||
border-radius: 99px;
|
||||
margin: 2px 0;
|
||||
box-shadow: 0 0 8px color-mix(in oklab, var(--acid) 50%, transparent);
|
||||
animation: qpSlideIn .15s ease forwards;
|
||||
}
|
||||
|
||||
/* ---- Multi-select ---- */
|
||||
.known-select-cb {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--acid);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-mode .known-select-cb {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.edit-mode .known-card-grip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qp-batch-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px 16px;
|
||||
background: color-mix(in oklab, var(--c-panel, #0d1520) 95%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
border-top: 1px solid var(--c-border-strong);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
animation: qpSlideUp .2s ease forwards;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@keyframes qpSlideUp {
|
||||
from { transform: translateY(100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ---- Bluetooth cards ---- */
|
||||
.btlist .qprow {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
@@ -763,6 +1007,78 @@ body.console-docked .app-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bt-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bt-device-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bt-device-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bt-device-mac {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.bt-state-chips {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.bt-chip {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 99px;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.bt-chip-paired {
|
||||
background: color-mix(in oklab, var(--acid-2, #18f0ff) 14%, transparent);
|
||||
border: 1px solid color-mix(in oklab, var(--acid-2, #18f0ff) 40%, transparent);
|
||||
color: var(--acid-2, #18f0ff);
|
||||
}
|
||||
|
||||
.bt-chip-trusted {
|
||||
background: color-mix(in oklab, var(--ok, #2cff7e) 14%, transparent);
|
||||
border: 1px solid color-mix(in oklab, var(--ok, #2cff7e) 40%, transparent);
|
||||
color: var(--ok, #2cff7e);
|
||||
}
|
||||
|
||||
.bt-chip-connected {
|
||||
background: color-mix(in oklab, var(--acid) 14%, transparent);
|
||||
border: 1px solid color-mix(in oklab, var(--acid) 40%, transparent);
|
||||
color: var(--acid);
|
||||
}
|
||||
|
||||
.bt-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bt-type {
|
||||
@@ -770,6 +1086,105 @@ body.console-docked .app-container {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---- State dot ---- */
|
||||
.state-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.state-on {
|
||||
background: var(--acid);
|
||||
box-shadow: 0 0 6px color-mix(in oklab, var(--acid) 60%, transparent);
|
||||
}
|
||||
|
||||
.state-off {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
/* ---- QP Section headers ---- */
|
||||
.qp-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px 4px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.qp-section-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---- QP icon buttons ---- */
|
||||
.qp-icon-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
transition: background .15s ease, color .15s ease, border-color .15s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.qp-icon-btn:hover {
|
||||
background: var(--white-06);
|
||||
border-color: var(--white-12);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.qp-icon-btn.danger:hover {
|
||||
color: var(--danger, #ff3b3b);
|
||||
border-color: color-mix(in oklab, var(--danger, #ff3b3b) 30%, transparent);
|
||||
}
|
||||
|
||||
/* ---- QP toolbar ---- */
|
||||
.qp-toolbar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 16px 8px;
|
||||
}
|
||||
|
||||
.qp-toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ---- QP loading spinner on buttons ---- */
|
||||
.qp-btn-loading {
|
||||
pointer-events: none;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.qp-btn-loading::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid currentColor;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: qpSpin .6s linear infinite;
|
||||
margin-left: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes qpSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ---- Actions Dropdown ---- */
|
||||
.actions {
|
||||
position: relative;
|
||||
@@ -2248,3 +2663,69 @@ input[type="color"].theme-input {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Console footer (chat input) ────────────────────────── */
|
||||
.console-footer {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border-top: 1px solid var(--c-border);
|
||||
flex-shrink: 0;
|
||||
background: var(--c-panel, #1a1a1e);
|
||||
}
|
||||
.console-input {
|
||||
flex: 1;
|
||||
background: var(--bg, #09090b);
|
||||
border: 1px solid var(--c-border, #2a2a2e);
|
||||
border-radius: 4px;
|
||||
color: var(--ink, #fafafa);
|
||||
padding: 4px 8px;
|
||||
resize: none;
|
||||
font-family: var(--font-mono, 'Courier New', monospace);
|
||||
font-size: var(--console-font, 11px);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.console-input:focus { border-color: var(--acid, #22c55e); outline: none; }
|
||||
.console-send-btn {
|
||||
padding: 4px 10px;
|
||||
background: var(--acid, #22c55e);
|
||||
color: var(--bg, #09090b);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: var(--console-font, 11px);
|
||||
font-weight: 600;
|
||||
}
|
||||
.console-send-btn:hover { opacity: 0.8; }
|
||||
|
||||
/* ── Console bubble mode ────────────────────────────────── */
|
||||
.console.bubble-mode .console-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.console-bubble-bjorn {
|
||||
margin: 3px 8px 3px 4px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 12px 12px 12px 4px;
|
||||
background: rgba(34, 197, 94, .12);
|
||||
color: var(--ink, #fafafa);
|
||||
max-width: 85%;
|
||||
align-self: flex-start;
|
||||
word-break: break-word;
|
||||
font-size: var(--console-font, 11px);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.console-bubble-bjorn.llm { background: rgba(168, 85, 247, .12); }
|
||||
.console-bubble-user {
|
||||
margin: 3px 4px 3px 8px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 12px 12px 4px 12px;
|
||||
background: rgba(59, 130, 246, .12);
|
||||
color: var(--ink, #fafafa);
|
||||
max-width: 85%;
|
||||
align-self: flex-end;
|
||||
margin-left: auto;
|
||||
word-break: break-word;
|
||||
font-size: var(--console-font, 11px);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -1249,5 +1249,66 @@
|
||||
"loki.quick_placeholder": "Quick type text here...",
|
||||
"loki.quick_send": "Type",
|
||||
"loki.quick_sent": "Text sent to target",
|
||||
"loki.quick_error": "Failed to send text"
|
||||
"loki.quick_error": "Failed to send text",
|
||||
|
||||
"nav.llm_chat": "LLM Chat",
|
||||
"nav.llm_config": "LLM & MCP",
|
||||
|
||||
"llm_chat.checking": "checking...",
|
||||
"llm_chat.disabled": "LLM disabled",
|
||||
"llm_chat.online": "online",
|
||||
"llm_chat.unavailable": "unavailable",
|
||||
"llm_chat.disabled_msg": "LLM is disabled. Enable it in",
|
||||
"llm_chat.settings_link": "Settings → LLM Bridge",
|
||||
"llm_chat.thinking": "Bjorn is thinking...",
|
||||
"llm_chat.placeholder": "Ask Bjorn anything about the network...",
|
||||
"llm_chat.send": "SEND",
|
||||
"llm_chat.clear_history": "Clear history",
|
||||
"llm_chat.orch_log": "Orch Log",
|
||||
"llm_chat.orch_title": "View LLM Orchestrator reasoning log",
|
||||
"llm_chat.back_chat": "← Back to chat",
|
||||
"llm_chat.session_started": "Session started. Type a question or command.",
|
||||
"llm_chat.history_cleared": "History cleared.",
|
||||
"llm_chat.back_to_chat": "Back to chat. Type a question or command.",
|
||||
"llm_chat.loading_log": "Loading LLM Orchestrator reasoning log…",
|
||||
"llm_chat.no_log": "No reasoning log yet. Enable llm_orchestrator_log_reasoning in config and run a cycle.",
|
||||
"llm_chat.log_header": "Orchestrator log",
|
||||
"llm_chat.log_error": "Error loading reasoning log",
|
||||
"llm_chat.error": "Error",
|
||||
"llm_chat.net_error": "Network error",
|
||||
|
||||
"llm_cfg.enable_bridge": "Enable LLM Bridge",
|
||||
"llm_cfg.epd_comments": "LLM comments on EPD display",
|
||||
"llm_cfg.backend": "BACKEND PRIORITY",
|
||||
"llm_cfg.laruche_discovery": "Auto-discover LaRuche nodes via mDNS",
|
||||
"llm_cfg.laruche_url": "LARUCHE NODE URL (optional — overrides discovery)",
|
||||
"llm_cfg.ollama_url": "OLLAMA URL",
|
||||
"llm_cfg.ollama_model": "MODEL",
|
||||
"llm_cfg.provider": "PROVIDER",
|
||||
"llm_cfg.api_model": "MODEL",
|
||||
"llm_cfg.api_key": "API KEY",
|
||||
"llm_cfg.api_key_placeholder":"Leave empty to keep current",
|
||||
"llm_cfg.base_url": "CUSTOM BASE URL (OpenRouter / proxy)",
|
||||
"llm_cfg.timeout": "TIMEOUT (s)",
|
||||
"llm_cfg.max_tokens_chat": "MAX TOKENS (chat)",
|
||||
"llm_cfg.max_tokens_epd": "MAX TOKENS (EPD comment)",
|
||||
"llm_cfg.api_key_set": "API key: set",
|
||||
"llm_cfg.api_key_not_set": "API key: not set",
|
||||
"llm_cfg.save_llm": "SAVE LLM CONFIG",
|
||||
"llm_cfg.test_connection": "TEST CONNECTION",
|
||||
"llm_cfg.enable_mcp": "Enable MCP Server",
|
||||
"llm_cfg.transport": "TRANSPORT",
|
||||
"llm_cfg.mcp_port": "PORT (HTTP SSE only)",
|
||||
"llm_cfg.exposed_tools": "EXPOSED TOOLS",
|
||||
"llm_cfg.mcp_running": "Server running on port",
|
||||
"llm_cfg.mcp_stopped": "Server not running.",
|
||||
"llm_cfg.save_mcp": "SAVE MCP CONFIG",
|
||||
"llm_cfg.saved_llm": "LLM config saved.",
|
||||
"llm_cfg.saved_mcp": "MCP config saved.",
|
||||
"llm_cfg.mcp_enabled": "MCP server enabled.",
|
||||
"llm_cfg.mcp_disabled": "MCP server disabled.",
|
||||
"llm_cfg.testing": "Testing…",
|
||||
"llm_cfg.test_failed": "Failed",
|
||||
"llm_cfg.error": "Error",
|
||||
"llm_cfg.save_error": "Save error"
|
||||
}
|
||||
|
||||
@@ -932,5 +932,66 @@
|
||||
"loki.quick_placeholder": "Taper du texte ici...",
|
||||
"loki.quick_send": "Taper",
|
||||
"loki.quick_sent": "Texte envoyé à la cible",
|
||||
"loki.quick_error": "Échec de l'envoi"
|
||||
"loki.quick_error": "Échec de l'envoi",
|
||||
|
||||
"nav.llm_chat": "Chat LLM",
|
||||
"nav.llm_config": "LLM & MCP",
|
||||
|
||||
"llm_chat.checking": "vérification...",
|
||||
"llm_chat.disabled": "LLM désactivé",
|
||||
"llm_chat.online": "en ligne",
|
||||
"llm_chat.unavailable": "indisponible",
|
||||
"llm_chat.disabled_msg": "Le LLM est désactivé. Activez-le dans",
|
||||
"llm_chat.settings_link": "Paramètres → LLM Bridge",
|
||||
"llm_chat.thinking": "Bjorn réfléchit...",
|
||||
"llm_chat.placeholder": "Demandez à Bjorn n'importe quoi sur le réseau...",
|
||||
"llm_chat.send": "ENVOYER",
|
||||
"llm_chat.clear_history": "Effacer l'historique",
|
||||
"llm_chat.orch_log": "Log Orch",
|
||||
"llm_chat.orch_title": "Voir le log de raisonnement de l'orchestrateur LLM",
|
||||
"llm_chat.back_chat": "← Retour au chat",
|
||||
"llm_chat.session_started": "Session démarrée. Posez une question ou une commande.",
|
||||
"llm_chat.history_cleared": "Historique effacé.",
|
||||
"llm_chat.back_to_chat": "Retour au chat. Posez une question ou une commande.",
|
||||
"llm_chat.loading_log": "Chargement du log de raisonnement…",
|
||||
"llm_chat.no_log": "Aucun log de raisonnement. Activez llm_orchestrator_log_reasoning dans la config.",
|
||||
"llm_chat.log_header": "Log orchestrateur",
|
||||
"llm_chat.log_error": "Erreur lors du chargement du log",
|
||||
"llm_chat.error": "Erreur",
|
||||
"llm_chat.net_error": "Erreur réseau",
|
||||
|
||||
"llm_cfg.enable_bridge": "Activer le LLM Bridge",
|
||||
"llm_cfg.epd_comments": "Commentaires LLM sur l'écran EPD",
|
||||
"llm_cfg.backend": "PRIORITÉ BACKEND",
|
||||
"llm_cfg.laruche_discovery": "Découverte automatique LaRuche via mDNS",
|
||||
"llm_cfg.laruche_url": "URL NŒUD LARUCHE (optionnel — override découverte)",
|
||||
"llm_cfg.ollama_url": "URL OLLAMA",
|
||||
"llm_cfg.ollama_model": "MODÈLE",
|
||||
"llm_cfg.provider": "FOURNISSEUR",
|
||||
"llm_cfg.api_model": "MODÈLE",
|
||||
"llm_cfg.api_key": "CLÉ API",
|
||||
"llm_cfg.api_key_placeholder":"Laisser vide pour conserver la clé actuelle",
|
||||
"llm_cfg.base_url": "URL DE BASE PERSONNALISÉE (OpenRouter / proxy)",
|
||||
"llm_cfg.timeout": "TIMEOUT (s)",
|
||||
"llm_cfg.max_tokens_chat": "TOKENS MAX (chat)",
|
||||
"llm_cfg.max_tokens_epd": "TOKENS MAX (commentaire EPD)",
|
||||
"llm_cfg.api_key_set": "Clé API : définie",
|
||||
"llm_cfg.api_key_not_set": "Clé API : non définie",
|
||||
"llm_cfg.save_llm": "SAUVEGARDER CONFIG LLM",
|
||||
"llm_cfg.test_connection": "TESTER LA CONNEXION",
|
||||
"llm_cfg.enable_mcp": "Activer le serveur MCP",
|
||||
"llm_cfg.transport": "TRANSPORT",
|
||||
"llm_cfg.mcp_port": "PORT (HTTP SSE uniquement)",
|
||||
"llm_cfg.exposed_tools": "OUTILS EXPOSÉS",
|
||||
"llm_cfg.mcp_running": "Serveur actif sur le port",
|
||||
"llm_cfg.mcp_stopped": "Serveur arrêté.",
|
||||
"llm_cfg.save_mcp": "SAUVEGARDER CONFIG MCP",
|
||||
"llm_cfg.saved_llm": "Configuration LLM sauvegardée.",
|
||||
"llm_cfg.saved_mcp": "Configuration MCP sauvegardée.",
|
||||
"llm_cfg.mcp_enabled": "Serveur MCP activé.",
|
||||
"llm_cfg.mcp_disabled": "Serveur MCP désactivé.",
|
||||
"llm_cfg.testing": "Test en cours…",
|
||||
"llm_cfg.test_failed": "Échec",
|
||||
"llm_cfg.error": "Erreur",
|
||||
"llm_cfg.save_error": "Erreur de sauvegarde"
|
||||
}
|
||||
@@ -108,6 +108,7 @@
|
||||
</span>
|
||||
<button class="btn" id="modeToggle" aria-pressed="true">Auto</button>
|
||||
<button class="btn" id="attackToggle">Attack ▾</button>
|
||||
<button class="btn" id="consoleBubbleToggle" title="Toggle bubble mode">💬</button>
|
||||
<button class="btn" id="clearLogs" data-i18n="console.clear">Clear</button>
|
||||
<button class="btn" id="closeConsole">X</button>
|
||||
<div id="consoleFontRow" class="console-fontrow">
|
||||
@@ -117,6 +118,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="console-body" id="logout" role="log" aria-live="polite"></div>
|
||||
<div class="console-footer" id="console-chat-footer" style="display:none">
|
||||
<textarea id="consoleInput" class="console-input" placeholder="Chat with Bjorn..." rows="1"></textarea>
|
||||
<button id="consoleSend" class="console-send-btn">➤</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- QuickPanel (WiFi/Bluetooth management) -->
|
||||
|
||||
@@ -63,6 +63,8 @@ function bootUI() {
|
||||
router.route('/bifrost', () => import('./pages/bifrost.js'));
|
||||
router.route('/loki', () => import('./pages/loki.js'));
|
||||
router.route('/bjorn', () => import('./pages/bjorn.js'));
|
||||
router.route('/llm-chat', () => import('./pages/llm-chat.js'));
|
||||
router.route('/llm-config', () => import('./pages/llm-config.js'));
|
||||
|
||||
// 404 fallback
|
||||
router.setNotFound((container, path) => {
|
||||
@@ -415,7 +417,9 @@ const PAGES = [
|
||||
{ path: '/bifrost', icon: 'network.png', label: 'nav.bifrost' },
|
||||
{ path: '/loki', icon: 'actions_launcher.png', label: 'nav.loki' },
|
||||
{ path: '/ai-dashboard', icon: 'ai_dashboard.png', label: 'nav.ai_dashboard' },
|
||||
{ path: '/bjorn-debug', icon: 'database.png', label: 'Bjorn Debug' },
|
||||
{ path: '/bjorn-debug', icon: 'database.png', label: 'Bjorn Debug' },
|
||||
{ path: '/llm-chat', icon: 'ai.png', label: 'nav.llm_chat' },
|
||||
{ path: '/llm-config', icon: 'ai_dashboard.png', label: 'nav.llm_config' },
|
||||
];
|
||||
|
||||
function wireLauncher() {
|
||||
|
||||
@@ -48,6 +48,9 @@ let isUserScrolling = false;
|
||||
let autoScroll = true;
|
||||
let lineBuffer = []; // lines held while user is scrolled up
|
||||
let isDocked = false;
|
||||
let consoleMode = 'log'; // 'log' | 'bubble'
|
||||
const CONSOLE_SESSION_ID = 'console';
|
||||
const LS_CONSOLE_MODE = 'bjorn_console_mode';
|
||||
|
||||
/* Cached DOM refs (populated in init) */
|
||||
let elConsole = null;
|
||||
@@ -194,6 +197,34 @@ function ensureDockButton() {
|
||||
* @returns {string} HTML string
|
||||
*/
|
||||
function processLogLine(line) {
|
||||
// 0. Bjorn comments — green line with icon + optional (LLM) badge
|
||||
const cmLLM = line.match(/\[LLM_COMMENT\]\s*\(([^)]*)\)\s*(.*)/);
|
||||
const cmTPL = !cmLLM && line.match(/\[COMMENT\]\s*\(([^)]*)\)\s*(.*)/);
|
||||
if (cmLLM || cmTPL) {
|
||||
const isLLM = !!cmLLM;
|
||||
const m = cmLLM || cmTPL;
|
||||
const status = m[1];
|
||||
const text = m[2];
|
||||
|
||||
// Bubble mode — render as chat bubble
|
||||
if (consoleMode === 'bubble') {
|
||||
const cls = isLLM ? 'console-bubble-bjorn llm' : 'console-bubble-bjorn';
|
||||
return `<div class="${cls}"><img src="/web/images/icon-60x60.png" class="comment-icon" alt="" style="width:14px;height:14px;vertical-align:middle;margin-right:4px">${text}</div>`;
|
||||
}
|
||||
|
||||
const badge = isLLM ? '<span class="comment-llm-badge">LLM</span>' : '';
|
||||
return `<span class="comment-line">${badge}<span class="comment-status">${status}</span> <img src="/web/images/icon-60x60.png" class="comment-icon" alt=""> ${text}</span>`;
|
||||
}
|
||||
|
||||
// 0b. User chat messages (from console chat) — bubble mode
|
||||
const userChat = line.match(/\[USER_CHAT\]\s*(.*)/);
|
||||
if (userChat) {
|
||||
if (consoleMode === 'bubble') {
|
||||
return `<div class="console-bubble-user">${userChat[1]}</div>`;
|
||||
}
|
||||
return `<span class="comment-line"><span class="comment-status">YOU</span> ${userChat[1]}</span>`;
|
||||
}
|
||||
|
||||
// 1. Highlight *.py filenames
|
||||
line = line.replace(
|
||||
/\b([\w\-]+\.py)\b/g,
|
||||
@@ -900,6 +931,34 @@ export function init() {
|
||||
elFontInput.addEventListener('input', () => setFont(elFontInput.value));
|
||||
}
|
||||
|
||||
/* -- Bubble mode toggle ------------------------------------------ */
|
||||
try { consoleMode = localStorage.getItem(LS_CONSOLE_MODE) || 'log'; } catch { /* ignore */ }
|
||||
syncBubbleMode();
|
||||
|
||||
const bubbleBtn = $('#consoleBubbleToggle');
|
||||
if (bubbleBtn) {
|
||||
bubbleBtn.addEventListener('click', () => {
|
||||
consoleMode = consoleMode === 'log' ? 'bubble' : 'log';
|
||||
try { localStorage.setItem(LS_CONSOLE_MODE, consoleMode); } catch { /* ignore */ }
|
||||
syncBubbleMode();
|
||||
});
|
||||
}
|
||||
|
||||
/* -- Console chat input ----------------------------------------- */
|
||||
const chatFooter = $('#console-chat-footer');
|
||||
const chatInput = $('#consoleInput');
|
||||
const chatSend = $('#consoleSend');
|
||||
|
||||
if (chatInput && chatSend) {
|
||||
chatSend.addEventListener('click', () => sendConsoleChat(chatInput));
|
||||
chatInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendConsoleChat(chatInput);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* -- Close / Clear ----------------------------------------------- */
|
||||
const btnClose = $('#closeConsole');
|
||||
if (btnClose) btnClose.addEventListener('click', closeConsole);
|
||||
@@ -1003,3 +1062,54 @@ async function checkAutostart() {
|
||||
// It can still be opened manually by the user.
|
||||
closeConsole();
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Bubble mode & console chat */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function syncBubbleMode() {
|
||||
const bubbleBtn = $('#consoleBubbleToggle');
|
||||
const chatFooter = $('#console-chat-footer');
|
||||
const consoleEl = $('#console');
|
||||
|
||||
if (bubbleBtn) {
|
||||
bubbleBtn.textContent = consoleMode === 'bubble' ? '\uD83D\uDCDD' : '\uD83D\uDCAC';
|
||||
bubbleBtn.title = consoleMode === 'bubble' ? 'Switch to log mode' : 'Switch to bubble mode';
|
||||
}
|
||||
if (chatFooter) {
|
||||
chatFooter.style.display = consoleMode === 'bubble' ? '' : 'none';
|
||||
}
|
||||
if (consoleEl) {
|
||||
consoleEl.classList.toggle('bubble-mode', consoleMode === 'bubble');
|
||||
}
|
||||
}
|
||||
|
||||
async function sendConsoleChat(inputEl) {
|
||||
if (!inputEl) return;
|
||||
const msg = inputEl.value.trim();
|
||||
if (!msg) return;
|
||||
inputEl.value = '';
|
||||
|
||||
// Show user message in console
|
||||
if (consoleMode === 'bubble') {
|
||||
appendLogHtml(`<div class="console-bubble-user">${msg}</div>`);
|
||||
} else {
|
||||
appendLogHtml(`<span class="comment-line"><span class="comment-status">YOU</span> ${msg}</span>`);
|
||||
}
|
||||
|
||||
// Call LLM
|
||||
try {
|
||||
const data = await api.post('/api/llm/chat', { message: msg, session_id: CONSOLE_SESSION_ID });
|
||||
if (data?.status === 'ok' && data.response) {
|
||||
if (consoleMode === 'bubble') {
|
||||
appendLogHtml(`<div class="console-bubble-bjorn llm"><img src="/web/images/icon-60x60.png" class="comment-icon" alt="" style="width:14px;height:14px;vertical-align:middle;margin-right:4px">${data.response}</div>`);
|
||||
} else {
|
||||
appendLogHtml(`<span class="comment-line"><span class="comment-llm-badge">LLM</span><span class="comment-status">BJORN</span> <img src="/web/images/icon-60x60.png" class="comment-icon" alt=""> ${data.response}</span>`);
|
||||
}
|
||||
} else {
|
||||
appendLogHtml(`<span class="loglvl error">Chat error: ${data?.message || 'unknown'}</span>`);
|
||||
}
|
||||
} catch (e) {
|
||||
appendLogHtml(`<span class="loglvl error">Chat error: ${e.message}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -45,6 +45,11 @@ export class ResourceTracker {
|
||||
this._listeners.push({ target, event, handler, options });
|
||||
}
|
||||
|
||||
/** Shorthand alias for trackEventListener. */
|
||||
on(target, event, handler, options) {
|
||||
return this.trackEventListener(target, event, handler, options);
|
||||
}
|
||||
|
||||
/* -- AbortControllers (for fetch) -- */
|
||||
trackAbortController() {
|
||||
const ac = new AbortController();
|
||||
|
||||
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