FailedProxy/Varaverk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give every AI setting a control, and every page one set to draw it with

Browse Source 
The AI tab could show three per-turn checkboxes and no configuration at all;
the forty-three keys behind it were editable only by hand.
This commit is contained in:
Gmer4Lfe
2026-08-11 19:03:12 -04:00
parent f90b23ddd9
commit 2b933c45dd
3 changed files with 441 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/unraid/css/varaverk.css
+52
View File
@@ -513,6 +513,58 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
.vv-cf-none { color: #9a8f6a; font-size: 12px; margin: 0; padding: 8px 10px;
background: #1c1a12; border: 1px solid #33301f; border-left: 3px solid #7a6a3a;
border-radius: 3px; }
/* ── Typed settings controls ──────────────────────────────────────────────────
The controls the conf's own comments ask for: a switch for a boolean, a bounded number for a
number, a list for a documented set of choices. Everything above renders a conf field as a
text box, which is the honest default for a file of shell assignments and the wrong one for
the seventy-two of them that hold true or false.
Extensions of vv-cf-*, not a new family. The nine page-private settings vocabularies in this
plugin exist because each page needed one control the shared set did not have and started a
set of its own; adding the control here is what stops the tenth.
Note vv-cf-num is already taken — it is the row-number gutter, not a number input. */
.vv-cf-ctl { display: flex; align-items: center; gap: 8px; }
.vv-cf-ctl .vv-cf-scalar { flex: 1 1 auto; min-width: 0; }
/* Bounded, so it does not stretch to the width of a path field and invite a paragraph. */
.vv-cf-int { max-width: 150px; flex: 0 0 auto !important; }
.vv-cf-unit { font-size: 11px; color: #5a5a5a; flex-shrink: 0; }
/* Sliding switch, lifted from the settings page — the nicest of the six this plugin had grown,
and the only one that reads as on or off from across a room rather than up close. */
.vv-cf-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
user-select: none; }
.vv-cf-track { width: 32px; height: 18px; border-radius: 9px; background: #222; border: 1px solid #333;
position: relative; transition: background .15s, border-color .15s; flex-shrink: 0; }
.vv-cf-track.on { background: #1a3a1a; border-color: #2d5a2d; }
.vv-cf-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
border-radius: 50%; background: #555; transition: left .15s, background .15s; }
.vv-cf-track.on::after { left: 16px; background: #4caf50; }
/* States the value, not the setting's name — the key is already printed above it. Without this a
switch mid-travel is the only thing saying which way it is pointing. */
.vv-cf-state { font-size: 11px; color: #5a5a5a; font-family: monospace; }
.vv-cf-sel { background: #111; border: 1px solid #333; color: #ddd; padding: 4px 8px;
border-radius: 4px; font-family: monospace; font-size: 12px; max-width: 280px; }
.vv-cf-sel:focus { border-color: #555; outline: none; }
/* What the selected choice means, taken from the comment line that declared it. The confs
already explain each option; repeating that in the page would be a second copy to drift. */
.vv-cf-opthint { font-size: 10px; color: #5a5a5a; font-style: italic; margin-top: 4px; }
/* A credential is editable and not readable. Masked rather than omitted, because a settings page
that silently drops the fields it disapproves of is one you cannot trust to be complete. */
.vv-cf-secret { letter-spacing: .12em; }
.vv-cf-reveal { background: none; border: 1px solid #2e2e2e; color: #5a5a5a; font-size: 10px;
padding: 3px 8px; border-radius: 3px; cursor: pointer; flex-shrink: 0; }
.vv-cf-reveal:hover { color: #aaa; border-color: #4a4a4a; }
/* Touched but not yet saved. The row says so itself rather than relying on a Save button
somewhere else having become enabled. */
.vv-cf-field.dirty { border-left-color: #6a5228; background: #14110a; }
.vv-cf-dot { width: 5px; height: 5px; border-radius: 50%; background: #ffb74d; flex-shrink: 0;
display: none; }
.vv-cf-field.dirty .vv-cf-dot { display: block; }
.vv-custom-empty { color: #666; font-size: 13px; padding: 8px 4px; margin: 0; font-style: italic; }
.vv-custom-count { font-size: 12px; color: #666; margin-left: 8px; flex-shrink: 0; }
.vv-section-sep { font-size: 11px; font-weight: bold; color: #666; text-transform: uppercase;
Plugin/unraid/include/confui.php
+275
View File
@@ -0,0 +1,275 @@
<?php
// ═══════════════════════════════════════════════════════════════════════════════════════════════
// PURPOSE
// Draws a parsed conf field as the control it deserves, and reads the edits back out. One
// implementation for every page that edits settings, so a switch looks and behaves the same
// wherever it is met.
//
// WHY THIS EXISTS
// Ten pages edited settings and nine had written their own vocabulary to do it — nine sets of
// inline CSS, six different toggle switches, and two pages that had both claimed the vv-set-*
// prefix with disjoint class names, so it read as shared and was not. Unraid swaps tabs by AJAX
// without unloading, so two of those stylesheets can be live in one document at once.
//
// Each of them started for the same reason: the shared set could render a conf field as a text
// box and nothing else, and every page eventually needed one control it did not have. The fix
// is not a convention that asks people not to do that again — it is having the control here.
//
// WHAT DECIDES A CONTROL
// Not this file. confform.php infers a widget from the conf itself — the value's shape and the
// comments already written above it — and this renders whatever it was told. That split is
// deliberate: the schema lives in the conf, the appearance lives here, and neither can quietly
// start deciding the other.
//
// DESIGN PRINCIPLES
// The control is a view of the value, never a second copy of it.
// Every control carries data-key, data-file, data-type and data-orig, and the payload is
// rebuilt by reading the DOM at save time. There is no parallel model to fall out of step
// with what is on screen.
//
// Only what changed is sent.
// A field whose value still equals data-orig is omitted. A settings page that submits all
// four hundred fields rewrites four hundred lines to change one, and every one of those
// rewrites is a chance to lose a comment.
//
// A value is returned exactly as it was typed.
// No trimming beyond the edges, no case folding, no normalising true to 1. The conf is
// shell source and the consuming script decides what it means.
//
// OPERATIONAL SAFEGUARDS
// Everything is escaped on the way in.
// Values come from conf files that hold paths, globs and quotes. Rendering goes through
// one escape helper and attributes through another — vvEscHtml does not escape quotes, so
// an attribute needs vvEscAttr or a path containing one closes it and the rest executes.
//
// Secrets render masked and are never pre-filled from a stale read.
// A masked field left untouched sends nothing, so a save cannot round-trip a credential
// back through the browser.
//
// Nothing here writes. The payload goes to api/confform.php, which owns the allowlist, and
// from there to vv_conf_edit(), which owns the lock, the backup and the rollback.
//
// EXPORTS
// vv_conf_ui_assets() the renderer, emitted once per page
//
// DEPENDS ON
// include/confform.php the widget each field was inferred to want
// api/confform.php ?sections= to read, POST changes to write
// css/varaverk.css the vv-cf-* family these classes belong to
// ═══════════════════════════════════════════════════════════════════════════════════════════════
function vv_conf_ui_assets(): void {
static $done = false;
if ($done) return;
$done = true;
?>
<script>
(function () {
if (window.VvConfUI) return;
// The page's own escape helpers where they exist. They are global in Varaverk.page for exactly
// this reason, and a second private copy here is a second thing to fix when one of them is
// found to be wrong.
const esc = s => (window.vvEscHtml ? vvEscHtml(s) : String(s == null ? '' : s)
.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'));
const escA = s => (window.vvEscAttr ? vvEscAttr(s) : String(s == null ? '' : s)
.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
.replace(/"/g,'&quot;').replace(/'/g,'&#39;'));
// Shared by every control. data-orig is what "changed" is measured against, and it is the
// parsed value rather than anything the page derived — so a control that renders a value
// differently than it stores it still compares against the truth.
function attrs(f) {
return ` data-key="${escA(f.key)}" data-file="${escA(f.file)}"`
+ ` data-type="${escA(f.type || 'scalar')}" data-orig="${escA(f.value == null ? '' : f.value)}"`;
}
function boolCtl(f) {
const on = String(f.value).toLowerCase() === 'true';
return `<div class="vv-cf-ctl">
<label class="vv-cf-toggle">
<span class="vv-cf-track${on ? ' on' : ''}"></span>
<input type="checkbox" hidden${attrs(f)} data-ctl="bool"${on ? ' checked' : ''}>
<span class="vv-cf-state">${on ? 'true' : 'false'}</span>
</label>
</div>`;
}
function intCtl(f) {
const min = (f.min !== undefined && f.min !== null) ? ` min="${escA(f.min)}"` : '';
const max = (f.max !== undefined && f.max !== null) ? ` max="${escA(f.max)}"` : '';
const unit = f.unit ? `<span class="vv-cf-unit">${esc(f.unit)}</span>` : '';
return `<div class="vv-cf-ctl">
<input type="number" class="vv-cf-scalar vv-cf-int"${min}${max}
value="${escA(f.value)}"${attrs(f)} data-ctl="int">${unit}
</div>`;
}
function enumCtl(f) {
const cur = String(f.value);
const opts = (f.choices || []).map(c =>
`<option value="${escA(c.value)}"${c.value === cur ? ' selected' : ''}>${esc(c.value)}</option>`
).join('');
// The hint belongs to the selected choice, so it is rebuilt on change rather than listing
// every option's explanation at once — which on a five-way choice is a paragraph.
const hints = {};
(f.choices || []).forEach(c => { if (c.hint) hints[c.value] = c.hint; });
const curHint = hints[cur] || '';
return `<div class="vv-cf-ctl">
<select class="vv-cf-sel"${attrs(f)} data-ctl="enum"
data-hints="${escA(JSON.stringify(hints))}">${opts}</select>
</div><div class="vv-cf-opthint">${esc(curHint)}</div>`;
}
function secretCtl(f) {
// Rendered from the real value so the field is genuinely editable, but typed as a password so
// it is not read over a shoulder or captured in a screenshot of the tab.
return `<div class="vv-cf-ctl">
<input type="password" class="vv-cf-scalar vv-cf-secret" autocomplete="new-password"
value="${escA(f.value)}"${attrs(f)} data-ctl="text">
<button type="button" class="vv-cf-reveal" data-reveal>Show</button>
</div>`;
}
function linesCtl(f) {
const v = String(f.value == null ? '' : f.value);
const n = v.split('\n').length;
const gutter = Array.from({ length: n }, (_, i) => i + 1).join('\n');
return `<div class="vv-cf-arraywrap">
<pre class="vv-cf-lines">${gutter}</pre>
<textarea class="vv-cf-array" rows="${Math.min(Math.max(n, 3), 18)}"${attrs(f)}
data-ctl="text" spellcheck="false">${esc(v)}</textarea>
</div>`;
}
function textCtl(f) {
return `<div class="vv-cf-ctl">
<input type="text" class="vv-cf-scalar" value="${escA(f.value)}"${attrs(f)}
data-ctl="text" spellcheck="false">
</div>`;
}
const CONTROLS = { bool: boolCtl, int: intCtl, enum: enumCtl, secret: secretCtl,
lines: linesCtl, path: textCtl, text: textCtl };
function fieldHtml(f) {
const draw = CONTROLS[f.widget] || textCtl;
// The description is the conf's own comment. It is the only documentation most of these
// settings have, and it is why the form is readable at all.
const desc = f.desc ? `<div class="vv-cf-desc">${esc(f.desc)}</div>` : '';
return `<div class="vv-cf-field" data-field="${escA(f.key)}">
<span class="vv-cf-dot"></span>
<div class="vv-cf-body">
<div class="vv-cf-key">${esc(f.key)}</div>
${desc}
${draw(f)}
</div>
</div>`;
}
function groupHtml(g) {
const fields = (g.fields || []).map(fieldHtml).join('');
if (!fields) return '';
return `<div class="vv-cf-group">
<div class="vv-cf-group-header">${esc(g.subsection || g.name || '')}
<span class="vv-cf-file">${esc(g.file || '')}</span>
</div>
${fields}
</div>`;
}
// Reading a control back. Kept beside the drawing so a new control cannot be added without a
// matching way to read it — the two halves drifting is how a field silently stops saving.
function readCtl(el) {
if (el.dataset.ctl === 'bool') return el.checked ? 'true' : 'false';
return el.value;
}
window.VvConfUI = {
render(into, groups) {
const box = typeof into === 'string' ? document.getElementById(into) : into;
if (!box) return;
const html = (groups || []).map(groupHtml).join('');
box.innerHTML = html || '<p class="vv-cf-empty">Nothing configurable here.</p>';
return box;
},
// Only what actually differs from what was parsed. See the note on partial saves above.
collect(into) {
const box = typeof into === 'string' ? document.getElementById(into) : into;
if (!box) return [];
const out = [];
box.querySelectorAll('[data-ctl]').forEach(el => {
const now = readCtl(el);
if (now === el.dataset.orig) return;
out.push({ file: el.dataset.file, key: el.dataset.key,
type: el.dataset.type || 'scalar', value: now });
});
return out;
},
dirtyCount(into) { return this.collect(into).length; },
// Called after a successful save so the next collect() measures against what is now on disk,
// without a refetch. A reload would also work and would repaint every control the operator
// is looking at, including the one they just changed.
commit(into) {
const box = typeof into === 'string' ? document.getElementById(into) : into;
if (!box) return;
box.querySelectorAll('[data-ctl]').forEach(el => { el.dataset.orig = readCtl(el); });
box.querySelectorAll('.vv-cf-field.dirty').forEach(f => f.classList.remove('dirty'));
},
// One delegated listener for a whole container, however many fields it holds.
wire(into, onChange) {
const box = typeof into === 'string' ? document.getElementById(into) : into;
if (!box || box.dataset.vvWired === '1') return;
box.dataset.vvWired = '1';
const refresh = el => {
const field = el.closest('.vv-cf-field');
if (field) field.classList.toggle('dirty', readCtl(el) !== el.dataset.orig);
if (onChange) onChange();
};
box.addEventListener('input', e => { if (e.target.dataset.ctl) refresh(e.target); });
box.addEventListener('change', e => {
const el = e.target;
if (!el.dataset.ctl) return;
if (el.dataset.ctl === 'bool') {
// The switch and the word beside it are both views of the checkbox, which is the only
// thing actually holding the state.
const wrap = el.closest('.vv-cf-toggle');
if (wrap) {
const track = wrap.querySelector('.vv-cf-track');
const state = wrap.querySelector('.vv-cf-state');
if (track) track.classList.toggle('on', el.checked);
if (state) state.textContent = el.checked ? 'true' : 'false';
}
}
if (el.dataset.ctl === 'enum') {
const hint = el.closest('.vv-cf-body')?.querySelector('.vv-cf-opthint');
if (hint) {
let hints = {};
try { hints = JSON.parse(el.dataset.hints || '{}'); } catch (_) {}
hint.textContent = hints[el.value] || '';
}
}
refresh(el);
});
box.addEventListener('click', e => {
const b = e.target.closest('[data-reveal]');
if (!b) return;
const inp = b.closest('.vv-cf-ctl')?.querySelector('input');
if (!inp) return;
const shown = inp.type === 'text';
inp.type = shown ? 'password' : 'text';
b.textContent = shown ? 'Show' : 'Hide';
});
},
};
})();
</script>
<?php
}
Plugin/unraid/pages/ai.php
+114 -2
View File
@@ -71,6 +71,7 @@
// api/readscript.php source viewer contents
// ═══════════════════════════════════════════════════════════════════════════════════════════════
require_once dirname(__DIR__) . '/include/ai_chat.php';
require_once dirname(__DIR__) . '/include/confui.php';
// Build stamp. The tab bar uses Unraid's localURL, which swaps content by AJAX without tearing
// down the previous page's JavaScript — so a stale copy of this script can keep running, and
@@ -246,9 +247,20 @@ if (is_dir('/var/log/varaverk')) {
border-top:1px solid #1a1a1a; }
.vv-ai-set-r:first-child { border-top:none; }
.vv-ai-set-l { font-size:11px; color:#8a8a8a; min-width:120px; flex-shrink:0; }
/* The line between "this conversation" and "this installation". Heavier than the row separators
above it, because crossing it is the difference between a checkbox and a conf write. */
.vv-ai-conf-wrap { margin-top:12px; border-top:1px solid #2a2a2a; padding-top:10px; }
.vv-ai-conf-h { display:flex; align-items:center; gap:9px; font-size:9px; letter-spacing:.08em;
text-transform:uppercase; color:#6a6a6a; margin-bottom:9px; }
.vv-ai-conf-sub { text-transform:none; letter-spacing:0; font-size:10px; color:#4a4a4a;
font-family:monospace; }
.vv-ai-conf-h .vv-ai-btn { margin-left:auto; padding:3px 12px; font-size:11px; }
/* Scrolls on its own rather than growing the card past the viewport — forty-three fields is
taller than the screen, and the Save button belongs where it can still be reached. */
#vv-ai-conf { max-height:52vh; overflow-y:auto; padding-right:4px; }
.vv-ai-set-d { font-size:10px; color:#4a4a4a; line-height:1.5; }
</style>
<?php vv_ai_chat_assets(); ?>
<?php vv_ai_chat_assets(); vv_conf_ui_assets(); ?>
<div id="vv-ai-wrap">
@@ -404,6 +416,24 @@ vv_ai_chat_markup('vv-ai', [
with the question — seconds for a greeting, ~18s for a substantive one.</div>
</div>
</div>
<!-- Everything above shapes the next question and is forgotten after it. Everything below
is written to master.conf and outlives the tab. One card, because "where do I change
the AI" has one answer — but a hard divider and its own heading, because a control that
edits a file every script sources should never be mistaken for a per-turn checkbox.
Loaded when the card is first opened rather than on page load: forty-three fields off
two conf files is real work, and this card is shut the overwhelming majority of the
time it exists. -->
<div class="vv-ai-conf-wrap">
<div class="vv-ai-conf-h">
Configuration
<span class="vv-ai-conf-sub">written to master.conf</span>
<span class="vv-ai-set-sum" id="vv-ai-conf-sum"></span>
<button class="vv-ai-btn" id="vv-ai-conf-save" type="button" disabled>Save</button>
</div>
<div id="vv-ai-conf"><div class="vv-ai-none">opens when you do</div></div>
</div>
</div>
</div>
</div>
@@ -427,6 +457,10 @@ vv_ai_chat_markup('vv-ai', [
<script>
(function () {
const API = '/plugins/varaverk/api/ai.php';
// The conf form's own endpoint, not this page's. Settings are written by the same guarded path
// the Scheduler uses, so there is one allowlist and one write path rather than an AI-shaped
// copy of both — api/ai.php deliberately has no conf-writing action at all.
const API_CONF = '/plugins/varaverk/api/confform.php';
// The conversation itself — profiles, transcript, composer, source viewer, storage — is
// include/ai_chat.php. What remains on this page is everything that surrounds it and exists
@@ -1048,7 +1082,85 @@ vv_ai_chat_markup('vv-ai', [
}
$('vv-ai-set-t').addEventListener('click', () => {
$('vv-ai-set-t').classList.toggle('open');
$('vv-ai-set-b').classList.toggle('open');
const open = $('vv-ai-set-b').classList.toggle('open');
// First open only. Re-reading on every toggle would discard edits in progress the moment
// someone collapsed the card to look at something else.
if (open) loadConf();
});
// ── AI configuration ────────────────────────────────────────────────────
// The conf sections whose header names AI, drawn by the shared renderer and written back
// through the same endpoint the Scheduler's per-script form uses. Nothing about which fields
// exist, what they are called or what control each gets is decided here — all of it is read
// from master.conf, so a key added tomorrow appears with no change to this page.
let confLoaded = false;
function loadConf() {
if (confLoaded) return;
confLoaded = true;
fetch(API_CONF + '?sections=ai').then(r => r.json())
.then(d => {
if (!d.ok) { $('vv-ai-conf').innerHTML = `<div class="vv-ai-none">${esc(d.error || 'could not be read')}</div>`; return; }
VvConfUI.render('vv-ai-conf', d.groups || []);
VvConfUI.wire('vv-ai-conf', confDirty);
confDirty();
})
.catch(e => {
// Retryable: the flag goes back so reopening the card tries again rather than leaving a
// permanent error where the settings should be.
confLoaded = false;
$('vv-ai-conf').innerHTML = `<div class="vv-ai-none">could not be read: ${esc(String(e))}</div>`;
});
}
function confDirty() {
const n = VvConfUI.dirtyCount('vv-ai-conf');
$('vv-ai-conf-save').disabled = n === 0;
$('vv-ai-conf-sum').innerHTML = n
? `<span class="vv-ai-warn">${n} unsaved</span>`
: '';
}
$('vv-ai-conf-save').addEventListener('click', () => {
const changes = VvConfUI.collect('vv-ai-conf');
if (!changes.length) return;
const btn = $('vv-ai-conf-save');
btn.disabled = true;
$('vv-ai-conf-sum').innerHTML = 'saving…';
// URLSearchParams, not FormData. A multipart POST to this plugin's endpoints hangs with no
// status ever returned — the request leaves the browser and never reaches PHP.
fetch(API_CONF, { method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
body: new URLSearchParams({ changes: JSON.stringify(changes) }) })
.then(r => r.text())
.then(t => {
let d;
try { d = JSON.parse(t); }
catch (_) {
// The CSRF prepend terminates with an empty body, so this is the shape that failure
// takes. Naming it beats a bare parse error.
throw new Error(t.trim() ? 'unparseable response: ' + t.slice(0, 120)
: 'empty response — the request was rejected before the endpoint ran');
}
if (!d.ok) throw new Error(d.error || 'save failed');
// Rebased rather than refetched: a reload would repaint every control including the one
// just edited, and the values on screen are now the values on disk.
VvConfUI.commit('vv-ai-conf');
confDirty();
$('vv-ai-conf-sum').innerHTML =
`<span class="vv-ai-ok">saved ${changes.length} change${changes.length > 1 ? 's' : ''}</span>`;
// The banner reads AI_ENABLED and the rest of the gates, so it is now stale.
loadBanner();
loadQueue();
})
.catch(e => {
// Left dirty on purpose. A refused write changed nothing, and clearing the marks would
// say it had — see the same rule on the findings card.
$('vv-ai-conf-sum').innerHTML = `<span class="vv-ai-bad">${esc(e.message || String(e))}</span>`;
confDirty();
});
});
$('vv-ai-kind').addEventListener('change', setSummary);
$('vv-ai-think').addEventListener('change', setSummary);