|
|
|
@@ -31,9 +31,27 @@
|
|
|
|
|
#admin-content article > .admin-story-reply { display: none; }
|
|
|
|
|
#admin-content .admin-simple-conversation > h2,
|
|
|
|
|
#admin-content .admin-simple-conversation > p:not(.admin-story-empty),
|
|
|
|
|
#admin-content .admin-simple-conversation article > :not(.admin-story-reply) { display: none; }
|
|
|
|
|
#admin-content .admin-simple-conversation article > :not(.admin-story-player):not(.admin-story-reply) { display: none; }
|
|
|
|
|
#admin-content .admin-simple-conversation article > .admin-story-player,
|
|
|
|
|
#admin-content .admin-simple-conversation article > .admin-story-reply { display: block; margin-block: .85rem; white-space: pre-wrap; }
|
|
|
|
|
#admin-content pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; }
|
|
|
|
|
#admin-content .admin-simple-conversation article > .admin-story-player { font-weight: 650; }
|
|
|
|
|
#admin-content pre, #debug-trace pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; }
|
|
|
|
|
.json-view { box-sizing: border-box; margin-block: .65rem; padding: .8rem; border: 1px solid #cbd5e1; border-radius: .4rem; background: #f8fafc; color: #1e293b; tab-size: 2; font: .84rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
|
|
|
.json-token-key { color: #075985; font-weight: 700; }
|
|
|
|
|
.json-token-string { color: #166534; }
|
|
|
|
|
.json-token-number { color: #6d28d9; font-weight: 650; }
|
|
|
|
|
.json-token-boolean { color: #b45309; font-weight: 750; }
|
|
|
|
|
.json-token-null { color: #be123c; font-style: italic; }
|
|
|
|
|
.json-token-punctuation { color: #64748b; }
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
.json-view { border-color: #475569; background: #111827; color: #e5e7eb; }
|
|
|
|
|
.json-token-key { color: #7dd3fc; }
|
|
|
|
|
.json-token-string { color: #86efac; }
|
|
|
|
|
.json-token-number { color: #c4b5fd; }
|
|
|
|
|
.json-token-boolean { color: #fcd34d; }
|
|
|
|
|
.json-token-null { color: #fda4af; }
|
|
|
|
|
.json-token-punctuation { color: #94a3b8; }
|
|
|
|
|
}
|
|
|
|
|
#admin-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
|
|
|
|
|
#player-search { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
|
|
|
|
|
body.debug-layout { max-width: none; margin: 0; padding: .5rem; height: 100vh; overflow: hidden; }
|
|
|
|
@@ -184,6 +202,22 @@
|
|
|
|
|
if (!response.ok) throw new Error(body?.error || `HTTP ${response.status}`);
|
|
|
|
|
return body;
|
|
|
|
|
}
|
|
|
|
|
async function graphqlQuery(query, variables = {}) {
|
|
|
|
|
const response = await request('/graphql', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {'content-type': 'application/json'},
|
|
|
|
|
body: JSON.stringify({query, variables}),
|
|
|
|
|
});
|
|
|
|
|
if (response.errors?.length) throw new Error(response.errors[0].message || 'GraphQL-förfrågan misslyckades');
|
|
|
|
|
return response.data;
|
|
|
|
|
}
|
|
|
|
|
async function getAdminTrace(accountId = null, limit = 200, offset = 0) {
|
|
|
|
|
const data = await graphqlQuery(
|
|
|
|
|
'query AdminPlayerTrace($accountId: String, $limit: Int!, $offset: Int!) { adminPlayerTrace(accountId: $accountId, limit: $limit, offset: $offset) }',
|
|
|
|
|
{accountId, limit, offset},
|
|
|
|
|
);
|
|
|
|
|
return data.adminPlayerTrace;
|
|
|
|
|
}
|
|
|
|
|
function appendLine(role, content, options = {}) {
|
|
|
|
|
const line = document.createElement('li');
|
|
|
|
|
line.dataset.role = role;
|
|
|
|
@@ -604,10 +638,43 @@
|
|
|
|
|
parent.append(element);
|
|
|
|
|
return element;
|
|
|
|
|
}
|
|
|
|
|
function appendFormattedJson(pre, value, stringAsText = false) {
|
|
|
|
|
pre.className = 'json-view';
|
|
|
|
|
pre.setAttribute('aria-label', 'Formaterat JSON-svar');
|
|
|
|
|
const code = document.createElement('code');
|
|
|
|
|
if (stringAsText && typeof value === 'string') {
|
|
|
|
|
code.textContent = value;
|
|
|
|
|
pre.replaceChildren(code);
|
|
|
|
|
return pre;
|
|
|
|
|
}
|
|
|
|
|
const source = JSON.stringify(value, null, '\t') ?? 'null';
|
|
|
|
|
const tokens = /(\"(?:\\.|[^\"\\])*\"(?=\s*:))|(\"(?:\\.|[^\"\\])*\")|(-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b)|(\bnull\b)|([{}\[\],:])|(\s+)/g;
|
|
|
|
|
let offset = 0;
|
|
|
|
|
for (const match of source.matchAll(tokens)) {
|
|
|
|
|
if (match.index > offset) code.append(document.createTextNode(source.slice(offset, match.index)));
|
|
|
|
|
const token = match[0];
|
|
|
|
|
if (match[7]) {
|
|
|
|
|
code.append(document.createTextNode(token));
|
|
|
|
|
} else {
|
|
|
|
|
const span = document.createElement('span');
|
|
|
|
|
span.className = match[1] ? 'json-token-key'
|
|
|
|
|
: match[2] ? 'json-token-string'
|
|
|
|
|
: match[3] ? 'json-token-number'
|
|
|
|
|
: match[4] ? 'json-token-boolean'
|
|
|
|
|
: match[5] ? 'json-token-null' : 'json-token-punctuation';
|
|
|
|
|
span.textContent = token;
|
|
|
|
|
code.append(span);
|
|
|
|
|
}
|
|
|
|
|
offset = match.index + token.length;
|
|
|
|
|
}
|
|
|
|
|
if (offset < source.length) code.append(document.createTextNode(source.slice(offset)));
|
|
|
|
|
pre.replaceChildren(code);
|
|
|
|
|
return pre;
|
|
|
|
|
}
|
|
|
|
|
function adminJson(title, value, parent = adminContent) {
|
|
|
|
|
const details = adminElement('details', undefined, parent);
|
|
|
|
|
adminElement('summary', title, details);
|
|
|
|
|
adminElement('pre', JSON.stringify(value, null, 2), details);
|
|
|
|
|
appendFormattedJson(adminElement('pre', undefined, details), value);
|
|
|
|
|
return details;
|
|
|
|
|
}
|
|
|
|
|
async function loadAdminPlayers(query = '', offset = 0) {
|
|
|
|
@@ -659,7 +726,7 @@
|
|
|
|
|
adminJson(`${profile.username} · profil och biografi`, profile);
|
|
|
|
|
adminTraceOffset = 0;
|
|
|
|
|
adminSimpleConversation = false;
|
|
|
|
|
const trace = await request(`/api/admin/players/${encodeURIComponent(accountId)}/trace?limit=200&offset=0`);
|
|
|
|
|
const trace = await getAdminTrace(accountId, 200, 0);
|
|
|
|
|
renderAdminConversations(trace, accountId);
|
|
|
|
|
}
|
|
|
|
|
function renderAdminConversations(trace, accountId, existingRoot, hasMoreOverride) {
|
|
|
|
@@ -701,7 +768,11 @@
|
|
|
|
|
let showedPlayerInput = false;
|
|
|
|
|
for (const event of group.events) {
|
|
|
|
|
const payload = event.payload || {};
|
|
|
|
|
if (payload.player_message) { adminElement('p', `Spelaren: ${payload.player_message}`, card); showedPlayerInput = true; }
|
|
|
|
|
if (payload.player_message) {
|
|
|
|
|
const playerLine = adminElement('p', `Spelaren: ${payload.player_message}`, card);
|
|
|
|
|
playerLine.className = 'admin-story-player';
|
|
|
|
|
showedPlayerInput = true;
|
|
|
|
|
}
|
|
|
|
|
const reply = payload.reply || payload.npc_reply;
|
|
|
|
|
if (reply) {
|
|
|
|
|
const story = adminElement('p', `Berättelsen: ${reply}`, card);
|
|
|
|
@@ -722,9 +793,15 @@
|
|
|
|
|
}
|
|
|
|
|
if (!showedPlayerInput) {
|
|
|
|
|
const failedTurnInput = [...group.interactions].reverse().map(latestPlayerText).find(Boolean);
|
|
|
|
|
if (failedTurnInput) adminElement('p', `Spelaren: ${failedTurnInput}`, card);
|
|
|
|
|
if (failedTurnInput) {
|
|
|
|
|
const playerLine = adminElement('p', `Spelaren: ${failedTurnInput}`, card);
|
|
|
|
|
playerLine.className = 'admin-story-player';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
for (const message of group.messages) {
|
|
|
|
|
const playerLine = adminElement('p', `Spelare: ${message.message}`, card);
|
|
|
|
|
playerLine.className = 'admin-story-player';
|
|
|
|
|
}
|
|
|
|
|
for (const message of group.messages) adminElement('p', `Spelarmeddelande: ${message.message}`, card);
|
|
|
|
|
for (const interaction of group.interactions) {
|
|
|
|
|
if (!interaction.response) continue;
|
|
|
|
|
const button = adminElement('button', `AI-svar · ${interaction.prompt_id} · ${interaction.outcome}: ${interaction.response}`, card);
|
|
|
|
@@ -748,7 +825,7 @@
|
|
|
|
|
older.disabled = true;
|
|
|
|
|
older.textContent = 'Hämtar äldre samtal…';
|
|
|
|
|
adminTraceOffset += trace.limit || 200;
|
|
|
|
|
const next = await request(`/api/admin/players/${encodeURIComponent(accountId)}/trace?limit=${trace.limit || 200}&offset=${adminTraceOffset}`);
|
|
|
|
|
const next = await getAdminTrace(accountId, trace.limit || 200, adminTraceOffset);
|
|
|
|
|
const merge = (key, idKey) => [...(trace[key] || []), ...(next[key] || [])].filter((item, index, all) => all.findIndex(candidate => candidate[idKey] === item[idKey]) === index);
|
|
|
|
|
renderAdminConversations({events: merge('events', 'event_id'), ai_interactions: merge('ai_interactions', 'id'), player_messages: merge('player_messages', 'id'), limit: next.limit, offset: next.offset}, accountId, root, next.has_more);
|
|
|
|
|
});
|
|
|
|
@@ -1000,12 +1077,53 @@
|
|
|
|
|
messageField.disabled = false;
|
|
|
|
|
messageField.focus();
|
|
|
|
|
}
|
|
|
|
|
function savedDialogueLine(line) {
|
|
|
|
|
const element = document.createElement('li');
|
|
|
|
|
element.dataset.role = line.role === 'user' ? 'user' : line.role === 'system' ? 'system' : 'assistant';
|
|
|
|
|
element.textContent = `${line.speaker || (line.role === 'user' ? 'Du' : 'Berättelsen')}: ${line.content}`;
|
|
|
|
|
return element;
|
|
|
|
|
}
|
|
|
|
|
function dialogueLinesFromPage(page) {
|
|
|
|
|
return page.edges.flatMap(edge => edge.node.lines);
|
|
|
|
|
}
|
|
|
|
|
function addOlderDialogueControl(cursor) {
|
|
|
|
|
const item = document.createElement('li');
|
|
|
|
|
item.dataset.role = 'system';
|
|
|
|
|
const button = document.createElement('button');
|
|
|
|
|
button.type = 'button';
|
|
|
|
|
button.textContent = 'Hämta äldre konversation';
|
|
|
|
|
button.addEventListener('click', async () => {
|
|
|
|
|
button.disabled = true;
|
|
|
|
|
button.textContent = 'Hämtar äldre konversation…';
|
|
|
|
|
try {
|
|
|
|
|
const page = (await graphqlQuery(
|
|
|
|
|
'query OlderDialogue($before: String!) { dialogue(first: 50, before: $before) { edges { cursor node { lines { role content speaker } } } pageInfo { hasPreviousPage startCursor } } }',
|
|
|
|
|
{before: cursor},
|
|
|
|
|
)).dialogue;
|
|
|
|
|
const oldLines = dialogueLinesFromPage(page);
|
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
|
|
|
for (const line of oldLines) fragment.append(savedDialogueLine(line));
|
|
|
|
|
item.remove();
|
|
|
|
|
transcript.prepend(fragment);
|
|
|
|
|
if (page.pageInfo.hasPreviousPage && page.pageInfo.startCursor) addOlderDialogueControl(page.pageInfo.startCursor);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
button.disabled = false;
|
|
|
|
|
button.textContent = `Kunde inte hämta äldre repliker: ${error.message}. Försök igen`;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
item.append(button);
|
|
|
|
|
transcript.prepend(item);
|
|
|
|
|
}
|
|
|
|
|
async function loadSavedDialogue() {
|
|
|
|
|
const lines = await request('/api/dialogue');
|
|
|
|
|
const page = (await graphqlQuery(
|
|
|
|
|
'query CurrentDialogue { dialogue(first: 100) { edges { cursor node { lines { role content speaker } } } pageInfo { hasPreviousPage startCursor } } }',
|
|
|
|
|
)).dialogue;
|
|
|
|
|
const lines = dialogueLinesFromPage(page);
|
|
|
|
|
transcript.replaceChildren();
|
|
|
|
|
latestAssistantText = '';
|
|
|
|
|
latestAssistantText = [...lines].reverse().find(line => line.role === 'assistant')?.content || '';
|
|
|
|
|
latestPlayerAction = [...lines].reverse().find(line => line.role === 'user')?.content || '';
|
|
|
|
|
for (const line of lines) appendLine(line.role === 'user' ? 'user' : line.role === 'system' ? 'system' : 'assistant', line.content, {speaker: line.speaker, speak: false});
|
|
|
|
|
for (const line of lines) transcript.append(savedDialogueLine(line));
|
|
|
|
|
if (page.pageInfo.hasPreviousPage && page.pageInfo.startCursor) addOlderDialogueControl(page.pageInfo.startCursor);
|
|
|
|
|
refreshActionTools();
|
|
|
|
|
if (lines.length > 0 && latestAssistantText && location.pathname !== '/admin') {
|
|
|
|
|
voiceController?.speak(latestAssistantText, {role: 'narrator', voiceIdentity: 'neutral'});
|
|
|
|
@@ -1094,7 +1212,7 @@
|
|
|
|
|
const valueHeading = document.createElement('strong');
|
|
|
|
|
valueHeading.textContent = name;
|
|
|
|
|
const pre = document.createElement('pre');
|
|
|
|
|
pre.textContent = typeof value === 'string' ? value : JSON.stringify(value ?? 'Ingen uppgift sparad', null, 2);
|
|
|
|
|
appendFormattedJson(pre, value ?? 'Ingen uppgift sparad', true);
|
|
|
|
|
card.append(valueHeading, pre);
|
|
|
|
|
};
|
|
|
|
|
addValue('Indata', input);
|
|
|
|
@@ -1155,7 +1273,7 @@
|
|
|
|
|
const rawSummary = document.createElement('summary');
|
|
|
|
|
rawSummary.textContent = 'Visa all rå spårdata';
|
|
|
|
|
const pre = document.createElement('pre');
|
|
|
|
|
pre.textContent = JSON.stringify(group, null, 2);
|
|
|
|
|
appendFormattedJson(pre, group);
|
|
|
|
|
raw.append(rawSummary, pre);
|
|
|
|
|
details.append(summary, chain, raw);
|
|
|
|
|
debugTrace.append(details);
|
|
|
|
@@ -1166,7 +1284,7 @@
|
|
|
|
|
debugRefreshBusy = true;
|
|
|
|
|
debugStatus.textContent = 'Hämtar revisionsloggad spårning…';
|
|
|
|
|
try {
|
|
|
|
|
const trace = await request('/api/admin/self/trace?limit=200');
|
|
|
|
|
const trace = await getAdminTrace(null, 200, 0);
|
|
|
|
|
renderDecisionTrace(trace);
|
|
|
|
|
debugStatus.textContent = `Visar ${debugTrace.childElementCount} korrelerade händelsegrupper. Uppdaterad ${new Date().toLocaleTimeString('sv-SE')}.`;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
Gitea Actions