608 lines
24 KiB
JavaScript
608 lines
24 KiB
JavaScript
// Generated, do not edit. sha256:9d5e374482da80f40653036b5e206e6d6ff98a8d9dbf55c030df645a418ea367
|
|
import {
|
|
listAiToolCalls, countAiToolCalls, lastAiToolCallAt, aiToolCallMessages,
|
|
} from '../data/ai-audit.js';
|
|
import { tableViewCfg, getPref, setPref } from '../data/preferences.js';
|
|
import { t, localeTag } from '../i18n/index.js';
|
|
import { fmtInt } from '../ui/format.js';
|
|
import { esc } from '../ui/escape.js';
|
|
import { alertHtml } from '../ui/alert.js';
|
|
import { renderTable } from '../ui/table.js';
|
|
import { refreshAttention } from '../ui/attention.js';
|
|
import { CHEVRON, COPY, CHECK } from '../ui/icons.js';
|
|
import { expanders } from '../ui/expand.js';
|
|
import * as dialog from '../ui/dialog.js';
|
|
import { cachedPortfolioName } from '../portfolio.js';
|
|
import { CONFIG } from '../../shared/config.js';
|
|
|
|
function moment(iso) {
|
|
if (!iso) return '';
|
|
const d = new Date(iso);
|
|
if (Number.isNaN(d.getTime())) return iso;
|
|
return d.toLocaleString(localeTag(), { dateStyle: 'short', timeStyle: 'medium' });
|
|
}
|
|
|
|
function dag(iso) {
|
|
if (!iso) return '';
|
|
const d = new Date(iso);
|
|
if (Number.isNaN(d.getTime())) return iso;
|
|
return d.toLocaleDateString(localeTag(), { dateStyle: 'short' });
|
|
}
|
|
|
|
function deelGroep(velden) {
|
|
if (velden == null) return t('ai.sharedUnknown');
|
|
return velden.length ? t('ai.sharedSome') : t('ai.sharedNothing');
|
|
}
|
|
|
|
function gedeeld(velden) {
|
|
if (velden == null) return `<span class="t-muted">${t('ai.sharedUnknown')}</span>`;
|
|
if (!velden.length) return `<span class="t-muted">${t('ai.sharedNothing')}</span>`;
|
|
return velden.map(v => `<code>${esc(v)}</code>`).join(', ');
|
|
}
|
|
|
|
function notitie(json) {
|
|
if (!json) return '';
|
|
try {
|
|
const args = JSON.parse(json);
|
|
if (args && typeof args.note === 'string' && args.note) return esc(args.note);
|
|
} catch { }
|
|
return '';
|
|
}
|
|
|
|
async function koppelGegevens() {
|
|
try {
|
|
const res = await fetch('/api/mcp/config');
|
|
if (!res.ok) return null;
|
|
const cfg = await res.json();
|
|
return cfg && typeof cfg.snippet === 'string' ? cfg : null;
|
|
} catch { return null; }
|
|
}
|
|
|
|
async function dryTools() {
|
|
try {
|
|
const res = await fetch('/api/mcp/tools');
|
|
if (!res.ok) return [];
|
|
const data = await res.json();
|
|
return Array.isArray(data.tools) ? data.tools : [];
|
|
} catch { return []; }
|
|
}
|
|
|
|
const scopeTekst = scope => {
|
|
try { return t(`ai.dryScope.${scope}`); } catch { return scope; }
|
|
};
|
|
|
|
const gezieneVerwijzingen = new Set();
|
|
|
|
const VERWIJZING = /\b[a-z]+:[0-9a-f]{6}\b/g;
|
|
|
|
function onthoudVerwijzingen(tekst) {
|
|
for (const m of String(tekst || '').matchAll(VERWIJZING)) gezieneVerwijzingen.add(m[0]);
|
|
}
|
|
|
|
const VERWIJZING_VELDEN = new Set(['handle']);
|
|
|
|
function dryArgVelden(tool) {
|
|
const schema = tool && tool.inputSchema;
|
|
const props = schema && schema.properties ? Object.entries(schema.properties) : [];
|
|
if (!props.length) return '';
|
|
const verplicht = new Set(Array.isArray(schema.required) ? schema.required : []);
|
|
|
|
const velden = props.map(([naam, spec]) => {
|
|
const nodig = verplicht.has(naam);
|
|
const label = `${esc(naam)}${nodig ? ` <span class="t-muted">(${t('ai.dryArgRequired')})</span>` : ''}`;
|
|
const bediening = Array.isArray(spec.enum)
|
|
? `<select class="input" data-arg="${esc(naam)}">
|
|
<option value="">${t('ai.dryArgPick')}</option>
|
|
${spec.enum.map(w => `<option value="${esc(w)}">${esc(w)}</option>`).join('')}
|
|
</select>`
|
|
: tekstVeld(naam, spec);
|
|
return `<label class="form-field">
|
|
<span class="form-label">${label}</span>
|
|
${bediening}
|
|
</label>`;
|
|
}).join('');
|
|
|
|
const hulp = props.some(([naam]) => VERWIJZING_VELDEN.has(naam))
|
|
? `<div class="t-body-sm t-muted" style="margin-top:0.4rem">${
|
|
gezieneVerwijzingen.size ? t('ai.dryArgHandleSome') : t('ai.dryArgHandleNone')}</div>`
|
|
: '';
|
|
|
|
return `<div class="t-body-sm t-muted" style="margin-top:0.6rem">${t('ai.dryArgs')}</div>
|
|
<div class="flex" style="gap:0.5rem;align-items:flex-end;margin-top:0.3rem;flex-wrap:wrap">${velden}</div>
|
|
${hulp}`;
|
|
}
|
|
|
|
function tekstVeld(naam, spec) {
|
|
const suggesties = VERWIJZING_VELDEN.has(naam) ? [...gezieneVerwijzingen].sort() : [];
|
|
const lijstId = `dry-lijst-${naam}`;
|
|
return `<input type="text" class="input" data-arg="${esc(naam)}"
|
|
${spec.maxLength ? `maxlength="${Number(spec.maxLength)}"` : ''}
|
|
${suggesties.length ? `list="${esc(lijstId)}"` : ''}
|
|
placeholder="${esc(spec.description || '')}">
|
|
${suggesties.length
|
|
? `<datalist id="${esc(lijstId)}">${suggesties.map(v => `<option value="${esc(v)}"></option>`).join('')}</datalist>`
|
|
: ''}`;
|
|
}
|
|
|
|
function dryBlok(tools, expandAttr) {
|
|
if (!tools.length) return '';
|
|
const opties = tools.map(x =>
|
|
`<option value="${esc(x.name)}">${esc(x.title || x.name)} (${scopeTekst(x.scope)})</option>`).join('');
|
|
return `
|
|
<details class="card-flat ai-sec" style="margin-bottom:0.8rem" ${expandAttr}>
|
|
<summary><span class="chev-btn">${CHEVRON}</span><span>${t('ai.dryTitle')}</span></summary>
|
|
<div style="margin-top:0.6rem">
|
|
<div class="t-body-sm t-muted">${t('ai.dryIntro')}</div>
|
|
<div class="flex" style="gap:0.5rem;align-items:flex-end;margin-top:0.6rem;flex-wrap:wrap">
|
|
<label class="form-field">
|
|
<span class="form-label">${t('ai.dryPick')}</span>
|
|
<select id="dry-tool" class="input">${opties}</select>
|
|
</label>
|
|
<button type="button" class="btn btn-secondary btn-sm btn--field" id="dry-run">${t('ai.dryRun')}</button>
|
|
<span class="t-body-sm t-muted" id="dry-melding"></span>
|
|
</div>
|
|
<div id="dry-args">${dryArgVelden(tools[0])}</div>
|
|
<div id="dry-uitslag" style="margin-top:0.8rem"></div>
|
|
</div>
|
|
</details>`;
|
|
}
|
|
|
|
function dryUitslag(r) {
|
|
const detail = r.detail ? `<div class="t-body-sm t-muted">${esc(r.detail)}</div>` : '';
|
|
return `
|
|
<div class="flex" style="gap:1.5rem;flex-wrap:wrap;margin-bottom:0.5rem">
|
|
<div><div class="t-body-sm t-muted">${t('ai.result')}</div><div>${
|
|
r.outcome === 'error' ? `<span class="t-neg">${t('ai.error')}</span>` : t(`ai.${r.outcome}`)}</div></div>
|
|
<div><div class="t-body-sm t-muted">${t('ai.shared')}</div><div>${gedeeld(r.fieldsShared)}</div></div>
|
|
<div><div class="t-body-sm t-muted">${t('ai.characters')}</div><div>${
|
|
r.charactersOut == null ? '' : fmtInt(r.charactersOut)}</div></div>
|
|
</div>
|
|
${detail}
|
|
<div class="t-body-sm t-muted" style="margin-top:0.5rem">${t('ai.dryResult')}</div>
|
|
${tekstBlok(r.text)}`;
|
|
}
|
|
|
|
function tekstBlok(tekst) {
|
|
return `<pre style="overflow-x:auto;white-space:pre-wrap"><code>${esc(tekst)}</code></pre>`;
|
|
}
|
|
|
|
const gesprekLade = (inhoud) => `<div class="ai-gesprek">${inhoud}</div>`;
|
|
|
|
function gesprekBlok(regels) {
|
|
if (!regels.length) return `<div class="t-body-sm t-muted">${t('ai.noConversation')}</div>`;
|
|
const blokken = regels.map(m => {
|
|
const label = t(m.kind === 'request' ? 'ai.msgRequest' : 'ai.msgResponse');
|
|
return `<div style="margin-bottom:0.6rem">
|
|
<div class="t-body-sm t-muted">${label}, ${esc(moment(m.occurredAt))}</div>
|
|
${tekstBlok(m.text)}
|
|
</div>`;
|
|
}).join('');
|
|
return blokken;
|
|
}
|
|
|
|
function bindDry(el, tools) {
|
|
const knop = el.querySelector('#dry-run');
|
|
if (!knop) return;
|
|
const keuze = el.querySelector('#dry-tool');
|
|
const melding = el.querySelector('#dry-melding');
|
|
const uitslag = el.querySelector('#dry-uitslag');
|
|
const argVak = el.querySelector('#dry-args');
|
|
const toolVan = naam => tools.find(x => x.name === naam) || null;
|
|
|
|
keuze.addEventListener('change', () => {
|
|
argVak.innerHTML = dryArgVelden(toolVan(keuze.value));
|
|
uitslag.innerHTML = '';
|
|
melding.textContent = '';
|
|
});
|
|
|
|
function werkSuggestiesBij() {
|
|
for (const veld of argVak.querySelectorAll('[data-arg]')) {
|
|
if (!VERWIJZING_VELDEN.has(veld.dataset.arg)) continue;
|
|
const lijstId = `dry-lijst-${veld.dataset.arg}`;
|
|
let lijst = argVak.querySelector(`#${lijstId}`);
|
|
if (!lijst) {
|
|
lijst = document.createElement('datalist');
|
|
lijst.id = lijstId;
|
|
veld.after(lijst);
|
|
veld.setAttribute('list', lijstId);
|
|
}
|
|
lijst.innerHTML = [...gezieneVerwijzingen].sort()
|
|
.map(v => `<option value="${esc(v)}"></option>`).join('');
|
|
}
|
|
}
|
|
|
|
function argumenten() {
|
|
const uit = {};
|
|
for (const veld of argVak.querySelectorAll('[data-arg]')) {
|
|
const w = veld.value.trim();
|
|
if (w) uit[veld.dataset.arg] = w;
|
|
}
|
|
return uit;
|
|
}
|
|
|
|
function ontbreekt(tool) {
|
|
const nodig = tool?.inputSchema?.required;
|
|
if (!Array.isArray(nodig)) return false;
|
|
const ingevuld = argumenten();
|
|
return nodig.some(naam => !ingevuld[naam]);
|
|
}
|
|
|
|
knop.addEventListener('click', async () => {
|
|
if (ontbreekt(toolVan(keuze.value))) { melding.textContent = t('ai.dryNeedsArg'); return; }
|
|
knop.disabled = true;
|
|
melding.textContent = t('ai.dryBusy');
|
|
try {
|
|
const res = await fetch('/api/mcp/dry-run', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ tool: keuze.value, arguments: argumenten() }),
|
|
});
|
|
if (!res.ok) throw new Error(t('ai.dryFail'));
|
|
const r = await res.json();
|
|
uitslag.innerHTML = dryUitslag(r);
|
|
melding.textContent = '';
|
|
const voor = gezieneVerwijzingen.size;
|
|
onthoudVerwijzingen(r.text);
|
|
if (gezieneVerwijzingen.size !== voor) werkSuggestiesBij();
|
|
} catch (e) {
|
|
melding.textContent = e.message || t('ai.dryFail');
|
|
} finally {
|
|
knop.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
const cel = (kop, waarde) =>
|
|
`<span class="ai-stat"><span class="t-body-sm t-muted">${kop}</span><span>${waarde}</span></span>`;
|
|
|
|
function schuifCel(kop, id, aan, hint) {
|
|
return cel(kop,
|
|
`<span class="toggle-switch" id="${id}-wrap" role="switch" aria-checked="${aan ? 'true' : 'false'}"`
|
|
+ ` title="${esc(hint)}" style="cursor:pointer">`
|
|
+ `<input type="checkbox" id="${id}" tabindex="-1" disabled${aan ? ' checked' : ''}>`
|
|
+ `<span class="toggle-track"></span></span>`);
|
|
}
|
|
|
|
function tellerCellen(telling, laatste) {
|
|
if (!telling) return '';
|
|
return cel(t('ai.total'), fmtInt(telling.total))
|
|
+ cel(t('ai.ok'), fmtInt(telling.byOutcome.ok))
|
|
+ cel(t('ai.refused'), fmtInt(telling.byOutcome.refused))
|
|
+ cel(t('ai.error'), fmtInt(telling.byOutcome.error))
|
|
+ cel(t('ai.lastAt'), esc(moment(laatste)));
|
|
}
|
|
|
|
function bedieningsBlok(standen, telling, laatste) {
|
|
const { actief, lezen, schrijven, besturen, onbewerkt } = standen;
|
|
return `<span class="ai-stats">`
|
|
+ `<span class="ai-schuiven">`
|
|
+ schuifCel(t('ai.activeHead'), 'ai-active', actief, actief ? t('ai.activeOn') : t('ai.activeOff'))
|
|
+ schuifCel(t('ai.switchHead'), 'ai-read', lezen, lezen ? t('ai.switchOn') : t('ai.switchOff'))
|
|
+ schuifCel(t('ai.writeHead'), 'ai-write', schrijven, schrijven ? t('ai.writeOn') : t('ai.writeOff'))
|
|
+ schuifCel(t('ai.controlHead'), 'ai-control', besturen, besturen ? t('ai.controlOn') : t('ai.controlOff'))
|
|
+ schuifCel(t('ai.rawHead'), 'ai-raw', onbewerkt, onbewerkt ? t('ai.rawOn') : t('ai.rawOff'))
|
|
+ `</span>`
|
|
+ `<span class="ai-tellers">${tellerCellen(telling, laatste)}</span>`
|
|
+ `</span>`;
|
|
}
|
|
|
|
function precisieBlok(standen) {
|
|
const { emmerAandeel, emmerTotaal, emmerBedrag, emmerAantal } = standen;
|
|
return `
|
|
<div class="mt-md">
|
|
<div class="t-label">${t('ai.precisionTitle')}</div>
|
|
<div class="t-body-sm t-muted mt-sm">${t('ai.precisionIntro')}</div>
|
|
<span class="ai-schuiven mt-sm">
|
|
${schuifCel(t('ai.sharesHead'), 'ai-bshares', emmerAandeel,
|
|
emmerAandeel ? t('ai.sharesOn') : t('ai.sharesOff'))}
|
|
${schuifCel(t('ai.totalsHead'), 'ai-btotals', emmerTotaal,
|
|
emmerTotaal ? t('ai.totalsOn') : t('ai.totalsOff'))}
|
|
${schuifCel(t('ai.amountsHead'), 'ai-bamounts', emmerBedrag,
|
|
emmerBedrag ? t('ai.amountsOn') : t('ai.amountsOff'))}
|
|
${schuifCel(t('ai.quantitiesHead'), 'ai-bquantities', emmerAantal,
|
|
emmerAantal ? t('ai.quantitiesOn') : t('ai.quantitiesOff'))}
|
|
</span>
|
|
<span class="form-hint t-neg" id="ai-bshares-stand"></span>
|
|
<span class="form-hint t-neg" id="ai-btotals-stand"></span>
|
|
<span class="form-hint t-neg" id="ai-bamounts-stand"></span>
|
|
<span class="form-hint t-neg" id="ai-bquantities-stand"></span>
|
|
<div class="t-body-sm t-muted mt-sm">${t('ai.precisionCombo')}</div>
|
|
</div>`;
|
|
}
|
|
|
|
function koppelBlok(cfg, expandAttr, bediening, standen) {
|
|
if (!cfg) return `<div class="t-body-sm t-muted">${t('ai.connectFail')}</div>`;
|
|
return `
|
|
<details class="card-flat ai-sec" style="margin-bottom:0.8rem" ${expandAttr}>
|
|
<summary>
|
|
<span class="chev-btn">${CHEVRON}</span>
|
|
<span>${t('ai.connectTitle')}</span>
|
|
<span class="form-hint t-neg" id="ai-active-stand" style="margin-top:0"></span>
|
|
<span class="form-hint t-neg" id="ai-read-stand" style="margin-top:0"></span>
|
|
<span class="form-hint t-neg" id="ai-write-stand" style="margin-top:0"></span>
|
|
<span class="form-hint t-neg" id="ai-control-stand" style="margin-top:0"></span>
|
|
<span class="form-hint t-neg" id="ai-raw-stand" style="margin-top:0"></span>
|
|
${bediening}
|
|
</summary>
|
|
<div style="margin-top:0.6rem">
|
|
<div class="t-body-sm t-muted">${esc(portefeuilleRegel())}</div>
|
|
<div class="t-body-sm t-muted mt-sm">${t('ai.revoke')}</div>
|
|
<div class="t-body-sm t-muted mt-sm">${t('ai.rawHint')}</div>
|
|
${precisieBlok(standen)}
|
|
<div class="t-body-sm t-muted mt-md">${t('ai.connectIntro')}</div>
|
|
<div class="codeblock">
|
|
<div class="codeblock-tools">
|
|
<button type="button" class="codeblock-copy" id="mcp-config-copy"
|
|
aria-label="${esc(t('ai.connectCopy'))}" title="${esc(t('ai.connectCopy'))}">${COPY}</button>
|
|
<span class="codeblock-tag">JSON</span>
|
|
</div>
|
|
<pre><code id="mcp-config">${esc(cfg.snippet)}</code></pre>
|
|
</div>
|
|
<span class="t-body-sm t-muted" id="mcp-config-melding"></span>
|
|
<div class="t-body-sm t-muted" style="margin-top:0.6rem">
|
|
${t('ai.connectFile')} ${t('ai.connectRestart')} ${t('ai.controlHint')}
|
|
</div>
|
|
</div>
|
|
</details>`;
|
|
}
|
|
|
|
function bindSchuif(el, { wrapId, vakId, standId, scope, key, aanTekst, uitTekst, faalTekst, bevestigAan = null }) {
|
|
const wrap = el.querySelector(`#${wrapId}`);
|
|
if (!wrap) return;
|
|
const vak = el.querySelector(`#${vakId}`);
|
|
const stand = el.querySelector(`#${standId}`);
|
|
|
|
const toon = (aan, melding = '') => {
|
|
if (vak) vak.checked = aan;
|
|
wrap.setAttribute('aria-checked', aan ? 'true' : 'false');
|
|
wrap.title = aan ? aanTekst : uitTekst;
|
|
if (stand) stand.textContent = melding;
|
|
};
|
|
|
|
wrap.addEventListener('click', async (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const aan = wrap.getAttribute('aria-checked') !== 'true';
|
|
if (aan && bevestigAan && !await bevestigAan()) return;
|
|
toon(aan);
|
|
try {
|
|
await setPref(scope, key, aan ? 1 : 0);
|
|
} catch {
|
|
toon(!aan, faalTekst);
|
|
}
|
|
});
|
|
}
|
|
|
|
function bindSchuiven(el) {
|
|
bindSchuif(el, {
|
|
wrapId: 'ai-active-wrap', vakId: 'ai-active', standId: 'ai-active-stand',
|
|
scope: 'ai', key: 'enabled',
|
|
aanTekst: t('ai.activeOn'), uitTekst: t('ai.activeOff'), faalTekst: t('ai.switchFail'),
|
|
});
|
|
bindSchuif(el, {
|
|
wrapId: 'ai-read-wrap', vakId: 'ai-read', standId: 'ai-read-stand',
|
|
scope: 'ai', key: 'allow_read',
|
|
aanTekst: t('ai.switchOn'), uitTekst: t('ai.switchOff'), faalTekst: t('ai.switchFail'),
|
|
});
|
|
bindSchuif(el, {
|
|
wrapId: 'ai-write-wrap', vakId: 'ai-write', standId: 'ai-write-stand',
|
|
scope: 'ai', key: 'allow_write',
|
|
aanTekst: t('ai.writeOn'), uitTekst: t('ai.writeOff'), faalTekst: t('ai.switchFail'),
|
|
});
|
|
bindSchuif(el, {
|
|
wrapId: 'ai-control-wrap', vakId: 'ai-control', standId: 'ai-control-stand',
|
|
scope: 'ai', key: 'allow_control',
|
|
aanTekst: t('ai.controlOn'), uitTekst: t('ai.controlOff'), faalTekst: t('ai.switchFail'),
|
|
});
|
|
bindSchuif(el, {
|
|
wrapId: 'ai-raw-wrap', vakId: 'ai-raw', standId: 'ai-raw-stand',
|
|
scope: 'ai', key: 'allow_raw',
|
|
aanTekst: t('ai.rawOn'), uitTekst: t('ai.rawOff'), faalTekst: t('ai.switchFail'),
|
|
bevestigAan: () => dialog.confirm({
|
|
message: t('ai.rawConfirm').replace('{naam}', cachedPortfolioName() || '?'),
|
|
danger: true,
|
|
}),
|
|
});
|
|
|
|
for (const [id, key] of [
|
|
['ai-bshares', 'bucket_shares'],
|
|
['ai-btotals', 'bucket_totals'],
|
|
['ai-bamounts', 'bucket_amounts'],
|
|
['ai-bquantities', 'bucket_quantities'],
|
|
]) {
|
|
const stam = key.replace('bucket_', '');
|
|
bindSchuif(el, {
|
|
wrapId: `${id}-wrap`, vakId: id, standId: `${id}-stand`,
|
|
scope: 'ai', key,
|
|
aanTekst: t(`ai.${stam}On`), uitTekst: t(`ai.${stam}Off`), faalTekst: t('ai.switchFail'),
|
|
});
|
|
}
|
|
}
|
|
|
|
function portefeuilleRegel() {
|
|
const naam = cachedPortfolioName();
|
|
return naam ? t('ai.scope').replace('{naam}', naam) : t('ai.rawHint');
|
|
}
|
|
|
|
const BEVESTIGING_MS = 2000;
|
|
|
|
function bindKopieer(el, cfg) {
|
|
const knop = el.querySelector('#mcp-config-copy');
|
|
if (!knop || !cfg) return;
|
|
const melding = el.querySelector('#mcp-config-melding');
|
|
let terug = null;
|
|
const herstel = () => {
|
|
knop.classList.remove('is-done');
|
|
knop.innerHTML = COPY;
|
|
knop.setAttribute('aria-label', t('ai.connectCopy'));
|
|
knop.setAttribute('title', t('ai.connectCopy'));
|
|
if (melding) melding.textContent = '';
|
|
};
|
|
knop.addEventListener('click', () => {
|
|
navigator.clipboard.writeText(cfg.snippet)
|
|
.then(() => {
|
|
knop.classList.add('is-done');
|
|
knop.innerHTML = CHECK;
|
|
knop.setAttribute('aria-label', t('ai.connectCopied'));
|
|
knop.setAttribute('title', t('ai.connectCopied'));
|
|
if (melding) melding.textContent = '';
|
|
})
|
|
.catch(() => {
|
|
knop.classList.remove('is-done');
|
|
knop.innerHTML = COPY;
|
|
if (melding) melding.textContent = t('ai.connectCopyFail');
|
|
})
|
|
.finally(() => { clearTimeout(terug); terug = setTimeout(herstel, BEVESTIGING_MS); });
|
|
});
|
|
}
|
|
|
|
let live = null;
|
|
let liveGebonden = false;
|
|
const gesprekken = new Map();
|
|
|
|
function bindLive() {
|
|
if (liveGebonden) return;
|
|
liveGebonden = true;
|
|
document.addEventListener('ai-activity-changed', async () => {
|
|
if (!live || !live.el || !live.el.isConnected) { live = null; return; }
|
|
let regels, telling, laatste;
|
|
try {
|
|
[regels, telling, laatste] = await Promise.all([
|
|
listAiToolCalls(CONFIG.AI.AUDIT_PAGE_SIZE), countAiToolCalls(), lastAiToolCallAt(),
|
|
]);
|
|
} catch { return; }
|
|
if (!live.el.isConnected) { live = null; return; }
|
|
|
|
live.tabel.refresh(regels);
|
|
const tellers = live.el.querySelector('.ai-tellers');
|
|
if (tellers) tellers.innerHTML = tellerCellen(telling, laatste);
|
|
await markeerGezien(regels);
|
|
});
|
|
}
|
|
|
|
async function markeerGezien(regels) {
|
|
const hoogste = regels.reduce((n, r) => Math.max(n, Number(r.id) || 0), 0);
|
|
if (!hoogste) return;
|
|
try {
|
|
await setPref('ai', 'seen_call_id', hoogste);
|
|
await refreshAttention();
|
|
} catch { }
|
|
}
|
|
|
|
export async function render(el) {
|
|
let regels, telling, laatste;
|
|
try {
|
|
[regels, telling, laatste] = await Promise.all([
|
|
listAiToolCalls(CONFIG.AI.AUDIT_PAGE_SIZE), countAiToolCalls(), lastAiToolCallAt(),
|
|
]);
|
|
} catch (err) {
|
|
el.innerHTML = alertHtml({ kind: 'error', body: err.message });
|
|
return;
|
|
}
|
|
|
|
const cfg = await koppelGegevens();
|
|
const tools = await dryTools();
|
|
const lezen = await getPref('ai', 'allow_read', 1).then(v => v !== 0).catch(() => true);
|
|
const uitBijTwijfel = (sleutel) => getPref('ai', sleutel, 0).then(v => v === 1).catch(() => false);
|
|
const aanBijTwijfel = (sleutel) => getPref('ai', sleutel, 1).then(v => v !== 0).catch(() => true);
|
|
const standen = {
|
|
actief: await getPref('ai', 'enabled', 1).then(v => v !== 0).catch(() => true),
|
|
lezen,
|
|
schrijven: await uitBijTwijfel('allow_write'),
|
|
besturen: await uitBijTwijfel('allow_control'),
|
|
onbewerkt: await uitBijTwijfel('allow_raw'),
|
|
emmerAandeel: await aanBijTwijfel('bucket_shares'),
|
|
emmerTotaal: await aanBijTwijfel('bucket_totals'),
|
|
emmerBedrag: await aanBijTwijfel('bucket_amounts'),
|
|
emmerAantal: await aanBijTwijfel('bucket_quantities'),
|
|
};
|
|
|
|
const expand = await expanders('ai', { connect: !telling.total, dryRun: false });
|
|
|
|
if (!telling.total) {
|
|
el.innerHTML = `${koppelBlok(cfg, expand.attr('connect'), bedieningsBlok(standen, null), standen)}${dryBlok(tools, expand.attr('dryRun'))}
|
|
${alertHtml({ kind: 'neutral', body: t('ai.notConnected'),
|
|
extra: `<div class="t-body-sm t-muted" style="margin-top:0.5rem">${t('ai.howTo')}</div>` })}`;
|
|
bindSchuiven(el);
|
|
bindKopieer(el, cfg);
|
|
bindDry(el, tools);
|
|
expand.bind(el);
|
|
return;
|
|
}
|
|
|
|
el.innerHTML = `${koppelBlok(cfg, expand.attr('connect'), bedieningsBlok(standen, telling, laatste), standen)}`
|
|
+ `${dryBlok(tools, expand.attr('dryRun'))}<div id="tbl"></div>`;
|
|
bindSchuiven(el);
|
|
bindKopieer(el, cfg);
|
|
bindDry(el, tools);
|
|
expand.bind(el);
|
|
gesprekken.clear();
|
|
|
|
const tabel = renderTable(el.querySelector('#tbl'), {
|
|
columns: [
|
|
{
|
|
key: 'when', label: t('ai.when'), sortable: true,
|
|
sortValue: r => r.occurredAt || '',
|
|
render: r => esc(moment(r.occurredAt)),
|
|
group: { value: r => dag(r.occurredAt), label: v => v },
|
|
},
|
|
{
|
|
key: 'what', label: t('ai.what'), sortable: true, text: true,
|
|
sortValue: r => r.tool || '',
|
|
render: r => {
|
|
const note = notitie(r.arguments);
|
|
const detail = r.detail ? `<div class="t-body-sm t-muted">${esc(r.detail)}</div>` : '';
|
|
const noteRegel = note ? `<div class="t-body-sm t-muted">"${note}"</div>` : '';
|
|
return `<code>${esc(r.tool)}</code>${noteRegel}${detail}`;
|
|
},
|
|
group: { value: r => r.tool || '', label: v => v },
|
|
},
|
|
{
|
|
key: 'who', label: t('ai.who'), sortable: true,
|
|
sortValue: r => r.client || '',
|
|
render: r => (r.client ? esc(r.client) : `<span class="t-muted">${t('ai.unknownClient')}</span>`),
|
|
group: { value: r => r.client || t('ai.unknownClient'), label: v => v },
|
|
},
|
|
{
|
|
key: 'shared', label: t('ai.shared'), sortable: true, text: true,
|
|
sortValue: r => (r.fieldsShared == null ? -1 : r.fieldsShared.length),
|
|
render: r => gedeeld(r.fieldsShared),
|
|
group: { value: r => deelGroep(r.fieldsShared), label: v => v },
|
|
},
|
|
{
|
|
key: 'characters', label: t('ai.characters'), align: 'num', sortable: true,
|
|
sortValue: r => r.charactersOut ?? -1,
|
|
render: r => (r.charactersOut == null ? '' : fmtInt(r.charactersOut)),
|
|
},
|
|
{
|
|
key: 'result', label: t('ai.result'), sortable: true,
|
|
sortValue: r => r.outcome || '',
|
|
render: r => (r.outcome === 'error'
|
|
? `<span class="t-neg">${t(`ai.${r.outcome}`)}</span>` : t(`ai.${r.outcome}`)),
|
|
group: { value: r => t(`ai.${r.outcome}`), label: v => v },
|
|
},
|
|
],
|
|
rows: regels,
|
|
idKey: 'id',
|
|
rowExpansion: (row) => gesprekLade(gesprekken.get(row.id) ?? `<div class="t-body-sm t-muted">${t('ai.conversation')}</div>`),
|
|
onExpansionMount: async (row, host) => {
|
|
if (gesprekken.has(row.id)) { host.innerHTML = gesprekLade(gesprekken.get(row.id)); return; }
|
|
try {
|
|
gesprekken.set(row.id, gesprekBlok(await aiToolCallMessages(row.id)));
|
|
} catch {
|
|
host.innerHTML = gesprekLade(`<div class="t-body-sm t-muted">${t('ai.conversationFail')}</div>`);
|
|
return;
|
|
}
|
|
host.innerHTML = gesprekLade(gesprekken.get(row.id));
|
|
},
|
|
...(await tableViewCfg('ai', { key: 'when', dir: 'desc' })),
|
|
noneLabel: t('table.none'),
|
|
collapsibleGroups: true,
|
|
emptyText: t('ai.noRows'),
|
|
});
|
|
|
|
live = { el, tabel };
|
|
bindLive();
|
|
await markeerGezien(regels);
|
|
}
|