ai-spel/ai-spel-frontend
1
0
Fork 0
Code Issues Pull Requests Actions 14 Packages Projects Releases Wiki Activity

Add collapsible JSON tree to admin views
Build and publish frontend / publish (push) Successful in 54s
Details

Browse Source
This commit is contained in:
Ein Anderssono
2026-10-24 03:29:54 +02:00
parent 4101be2447
commit 06dea70ed1
3 changed files with 206 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+179 -50
View File
@@ -36,21 +36,39 @@
#admin-content .admin-simple-conversation article > .admin-story-reply { display: block; margin-block: .85rem; white-space: pre-wrap; } #admin-content .admin-simple-conversation article > .admin-story-reply { display: block; margin-block: .85rem; white-space: pre-wrap; }
#admin-content .admin-simple-conversation article > .admin-story-player { font-weight: 650; } #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; } #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-view { box-sizing: border-box; margin-block: .65rem; padding: .65rem; border: 1px solid #cbd5e1; border-radius: .4rem; background: #f8fafc; color: #1e293b; font: .88rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.json-token-key { color: #075985; font-weight: 700; } .json-tree-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: .6rem; }
.json-token-string { color: #166534; } .json-tree-tools button { font-size: .88rem; padding: .3rem .55rem; }
.json-token-number { color: #6d28d9; font-weight: 650; } .json-tree, .json-children { display: grid; gap: .3rem; }
.json-token-boolean { color: #b45309; font-weight: 750; } .json-children { margin-inline-start: .7rem; padding-inline-start: .65rem; border-inline-start: 2px solid #cbd5e1; }
.json-token-null { color: #be123c; font-style: italic; } .json-node { min-width: 0; }
.json-token-punctuation { color: #64748b; } .json-node > summary { cursor: pointer; padding: .3rem .45rem; border-radius: .25rem; background: #e2e8f0; overflow-wrap: anywhere; }
.json-node > summary:focus-visible, .json-tree-tools button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.json-label { color: #075985; font-weight: 750; }
.json-kind { color: #475569; font-size: .86em; }
.json-entry { display: grid; grid-template-columns: minmax(8rem, .35fr) minmax(0, 1fr); gap: .5rem; padding: .2rem .45rem; border-radius: .2rem; overflow-wrap: anywhere; }
.json-entry:nth-child(even) { background: #f1f5f9; }
.json-key { color: #075985; font-weight: 700; }
.json-value-string { color: #166534; white-space: pre-wrap; }
.json-value-number { color: #6d28d9; font-weight: 650; }
.json-value-boolean { color: #b45309; font-weight: 750; }
.json-value-null { color: #be123c; font-style: italic; }
.json-empty { padding: .25rem .65rem; color: #475569; font-style: italic; }
.json-long-value { border-inline-start: 2px solid #94a3b8; margin-inline-start: .5rem; }
.json-long-value > summary { cursor: pointer; padding: .3rem .45rem; overflow-wrap: anywhere; }
.json-long-text { margin: .2rem .5rem .5rem; padding: .5rem; max-height: 24rem; overflow: auto; background: #e2e8f0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 42rem) { .json-entry { grid-template-columns: 1fr; gap: .05rem; } }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.json-view { border-color: #475569; background: #111827; color: #e5e7eb; } .json-view { border-color: #475569; background: #111827; color: #e5e7eb; }
.json-token-key { color: #7dd3fc; } .json-children { border-inline-start-color: #475569; }
.json-token-string { color: #86efac; } .json-node > summary { background: #263244; }
.json-token-number { color: #c4b5fd; } .json-label, .json-key { color: #7dd3fc; }
.json-token-boolean { color: #fcd34d; } .json-kind, .json-empty { color: #cbd5e1; }
.json-token-null { color: #fda4af; } .json-entry:nth-child(even), .json-long-text { background: #1f2937; }
.json-token-punctuation { color: #94a3b8; } .json-value-string { color: #86efac; }
.json-value-number { color: #c4b5fd; }
.json-value-boolean { color: #fcd34d; }
.json-value-null { color: #fda4af; }
} }
#admin-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; } #admin-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
#player-search { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; } #player-search { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
@@ -638,43 +656,154 @@
parent.append(element); parent.append(element);
return element; return element;
} }
function appendFormattedJson(pre, value, stringAsText = false) { function renderJsonTree(container, value) {
pre.className = 'json-view'; container.className = 'json-view';
pre.setAttribute('aria-label', 'Formaterat JSON-svar'); container.setAttribute('aria-label', 'Utfällbart JSON-svar');
const code = document.createElement('code'); const tree = document.createElement('div');
if (stringAsText && typeof value === 'string') { tree.className = 'json-tree';
code.textContent = value; const nodeValues = new WeakMap();
pre.replaceChildren(code); const controls = document.createElement('div');
return pre; controls.className = 'json-tree-tools';
const expand = document.createElement('button');
expand.type = 'button';
expand.textContent = 'Öppna alla block';
const collapse = document.createElement('button');
collapse.type = 'button';
collapse.textContent = 'Fäll ihop nästlade block';
controls.append(expand, collapse);
container.replaceChildren(controls, tree);
const isGroup = item => item !== null && typeof item === 'object';
const groupSummary = item => Array.isArray(item)
? `Lista · ${item.length} ${item.length === 1 ? 'post' : 'poster'}`
: `Objekt · ${Object.keys(item).length} fält`;
const addLeaf = (parent, label, item) => {
if (typeof item === 'string' && item.length > 180) {
const details = document.createElement('details');
details.className = 'json-long-value';
const summary = document.createElement('summary');
summary.append(document.createTextNode(`${label ? `${label} · ` : ''}Text · ${item.length} tecken · `));
const preview = document.createElement('span');
preview.className = 'json-value-string';
preview.textContent = `${item.slice(0, 100)}${item.length > 100 ? '…' : ''}`;
summary.append(preview);
const fullText = document.createElement('div');
fullText.className = 'json-long-text';
fullText.textContent = item;
details.append(summary, fullText);
parent.append(details);
return;
} }
const source = JSON.stringify(value, null, '\t') ?? 'null'; const row = document.createElement('div');
const tokens = /(\"(?:\\.|[^\"\\])*\"(?=\s*:))|(\"(?:\\.|[^\"\\])*\")|(-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b)|(\bnull\b)|([{}\[\],:])|(\s+)/g; row.className = 'json-entry';
let offset = 0; if (label) {
for (const match of source.matchAll(tokens)) { const key = document.createElement('span');
if (match.index > offset) code.append(document.createTextNode(source.slice(offset, match.index))); key.className = 'json-key';
const token = match[0]; key.textContent = label;
if (match[7]) { row.append(key);
code.append(document.createTextNode(token)); }
const valueNode = document.createElement('span');
const type = item === null ? 'null' : typeof item;
valueNode.className = `json-value-${type === 'boolean' ? 'boolean' : type}`;
valueNode.textContent = typeof item === 'string' ? JSON.stringify(item) : String(item);
row.append(valueNode);
parent.append(row);
};
const populate = (details, item, depth) => {
if (details.dataset.loaded === 'true') return;
details.dataset.loaded = 'true';
const children = document.createElement('div');
children.className = 'json-children';
if (depth >= 64) {
const note = document.createElement('div');
note.className = 'json-empty';
note.textContent = 'Ytterligare nästling döljs efter 64 nivåer.';
children.append(note);
} else { } else {
const span = document.createElement('span'); const entries = Array.isArray(item)
span.className = match[1] ? 'json-token-key' ? item.map((child, index) => [`[${index}]`, child])
: match[2] ? 'json-token-string' : Object.entries(item);
: match[3] ? 'json-token-number' if (entries.length === 0) {
: match[4] ? 'json-token-boolean' const empty = document.createElement('div');
: match[5] ? 'json-token-null' : 'json-token-punctuation'; empty.className = 'json-empty';
span.textContent = token; empty.textContent = Array.isArray(item) ? 'Listan är tom.' : 'Objektet saknar fält.';
code.append(span); children.append(empty);
} }
offset = match.index + token.length; for (const [key, child] of entries) {
if (isGroup(child)) {
const nested = document.createElement('details');
nested.className = 'json-node';
nodeValues.set(nested, child);
nested.dataset.depth = String(depth + 1);
const nestedSummary = document.createElement('summary');
const label = document.createElement('span');
label.className = 'json-label';
label.textContent = key;
const kind = document.createElement('span');
kind.className = 'json-kind';
kind.textContent = ` · ${groupSummary(child)}`;
nestedSummary.append(label, kind);
nested.append(nestedSummary);
nested.addEventListener('toggle', () => {
if (nested.open) populate(nested, child, depth + 1);
});
children.append(nested);
} else {
addLeaf(children, key, child);
} }
if (offset < source.length) code.append(document.createTextNode(source.slice(offset))); }
pre.replaceChildren(code); }
return pre; details.append(children);
};
if (isGroup(value)) {
const root = document.createElement('details');
root.className = 'json-node json-root';
root.open = true;
const summary = document.createElement('summary');
const label = document.createElement('span');
label.className = 'json-label';
label.textContent = 'Innehåll';
const kind = document.createElement('span');
kind.className = 'json-kind';
kind.textContent = ` · ${groupSummary(value)}`;
summary.append(label, kind);
root.append(summary);
root.addEventListener('toggle', () => {
if (root.open) populate(root, value, 0);
});
populate(root, value, 0);
tree.append(root);
expand.addEventListener('click', () => {
const openAll = details => {
details.open = true;
if (details === root || details.dataset.loaded === 'true') {
const childGroups = [...details.querySelectorAll(':scope > .json-children > details.json-node')];
for (const child of childGroups) {
if (child.dataset.loaded !== 'true') {
if (nodeValues.has(child)) populate(child, nodeValues.get(child), Number(child.dataset.depth || 1));
}
openAll(child);
}
}
};
openAll(root);
});
collapse.addEventListener('click', () => {
for (const nested of tree.querySelectorAll('details.json-node:not(.json-root)')) nested.open = false;
root.open = true;
});
} else {
addLeaf(tree, '', value);
expand.disabled = true;
collapse.disabled = true;
}
return container;
} }
function adminJson(title, value, parent = adminContent) { function adminJson(title, value, parent = adminContent) {
const details = adminElement('details', undefined, parent); const details = adminElement('details', undefined, parent);
adminElement('summary', title, details); adminElement('summary', title, details);
appendFormattedJson(adminElement('pre', undefined, details), value); renderJsonTree(adminElement('div', undefined, details), value);
return details; return details;
} }
async function loadAdminPlayers(query = '', offset = 0) { async function loadAdminPlayers(query = '', offset = 0) {
@@ -914,7 +1043,7 @@
adminElement('p', 'Redigera profilens JSON. Kända spelvärden valideras av Rust; okända framtida egenskaper bevaras som JSON. Värld och position visas som referens och ändras inte här.'); adminElement('p', 'Redigera profilens JSON. Kända spelvärden valideras av Rust; okända framtida egenskaper bevaras som JSON. Värld och position visas som referens och ändras inte här.');
const profileForm = adminElement('form'); const profileForm = adminElement('form');
const profileLabel = adminElement('label', 'NPC-profil i JSON', profileForm); const profileLabel = adminElement('label', 'NPC-profil i JSON', profileForm);
const profileInput = document.createElement('textarea'); profileInput.rows = 18; profileInput.cols = 80; profileInput.required = true; profileInput.value = JSON.stringify(npc.profile, null, 2); profileLabel.append(profileInput); const profileInput = document.createElement('textarea'); profileInput.rows = 18; profileInput.cols = 80; profileInput.required = true; profileInput.value = JSON.stringify(npc.profile, null, '\t'); profileLabel.append(profileInput);
const profileSave = adminElement('button', 'Spara egenskaper', profileForm); profileSave.type = 'submit'; const profileSave = adminElement('button', 'Spara egenskaper', profileForm); profileSave.type = 'submit';
const profileStatus = adminElement('p'); profileStatus.setAttribute('role', 'status'); const profileStatus = adminElement('p'); profileStatus.setAttribute('role', 'status');
profileForm.addEventListener('submit', async event => { profileForm.addEventListener('submit', async event => {
@@ -1211,9 +1340,9 @@
const addValue = (name, value) => { const addValue = (name, value) => {
const valueHeading = document.createElement('strong'); const valueHeading = document.createElement('strong');
valueHeading.textContent = name; valueHeading.textContent = name;
const pre = document.createElement('pre'); const json = document.createElement('div');
appendFormattedJson(pre, value ?? 'Ingen uppgift sparad', true); renderJsonTree(json, value === undefined ? 'Ingen uppgift sparad' : value);
card.append(valueHeading, pre); card.append(valueHeading, json);
}; };
addValue('Indata', input); addValue('Indata', input);
addValue('Utdata', output); addValue('Utdata', output);
@@ -1271,10 +1400,10 @@
const raw = document.createElement('details'); const raw = document.createElement('details');
raw.className = 'trace-raw'; raw.className = 'trace-raw';
const rawSummary = document.createElement('summary'); const rawSummary = document.createElement('summary');
rawSummary.textContent = 'Visa all rå spårdata'; rawSummary.textContent = 'Visa hela spårdata';
const pre = document.createElement('pre'); const json = document.createElement('div');
appendFormattedJson(pre, group); renderJsonTree(json, group);
raw.append(rawSummary, pre); raw.append(rawSummary, json);
details.append(summary, chain, raw); details.append(summary, chain, raw);
debugTrace.append(details); debugTrace.append(details);
} }
scripts/check-frontend.sh
+6 -4
View File
@@ -99,10 +99,12 @@ grep -q 'id="debug-panel"' index.html
grep -q "query AdminPlayerTrace" index.html grep -q "query AdminPlayerTrace" index.html
grep -q 'adminPlayerTrace(accountId: \$accountId, limit: \$limit, offset: \$offset)' index.html grep -q 'adminPlayerTrace(accountId: \$accountId, limit: \$limit, offset: \$offset)' index.html
grep -q 'function renderDecisionTrace' index.html grep -q 'function renderDecisionTrace' index.html
grep -q 'appendFormattedJson(pre, group)' index.html grep -q 'function renderJsonTree' index.html
grep -Fq "JSON.stringify(value, null, '\\t')" index.html grep -q "'Öppna alla block'" index.html
grep -q 'json-token-key' index.html grep -q "'Fäll ihop nästlade block'" index.html
grep -q 'json-token-string' index.html grep -q "nested.className = 'json-node'" index.html
grep -q 'json-value-string' index.html
grep -q "setAttribute('aria-label', 'Utfällbart JSON-svar')" index.html
grep -q 'debug-enabled' index.html grep -q 'debug-enabled' index.html
grep -q '/api/admin/players?' index.html grep -q '/api/admin/players?' index.html
grep -q 'Välj konto att följa' index.html grep -q 'Välj konto att följa' index.html
tests/admin-conversation-trace.test.cjs
+19 -10
View File
@@ -44,14 +44,23 @@ test('admin can switch to a storyteller-only reading view and return to diagnost
}); });
test('admin JSON responses use tab-indented syntax-colored accessible output', () => { test('admin JSON responses are readable as accessible collapsible trees', () => {
assert.match(page, /function appendFormattedJson/); assert.match(page, /function renderJsonTree/);
assert.match(page, /JSON\.stringify\(value, null, '\\t'\)/); assert.match(page, /nested\.className = 'json-node'/);
assert.match(page, /json-token-key/); assert.match(page, /const nodeValues = new WeakMap\(\)/);
assert.match(page, /json-token-string/); assert.match(page, /nodeValues\.set\(nested, child\)/);
assert.match(page, /json-token-number/); assert.match(page, /groupSummary/);
assert.match(page, /json-token-boolean/); assert.match(page, /Lista · \$\{item\.length\}/);
assert.match(page, /json-token-null/); assert.match(page, /Objekt · \$\{Object\.keys\(item\)\.length\} fält/);
assert.match(page, /setAttribute\('aria-label', 'Formaterat JSON-svar'\)/); assert.match(page, /Öppna alla block/);
assert.match(page, /appendFormattedJson\(pre, group\)/); assert.match(page, /Fäll ihop nästlade block/);
assert.match(page, /setAttribute\('aria-label', 'Utfällbart JSON-svar'\)/);
assert.match(page, /json-value-string/);
assert.match(page, /json-value-number/);
assert.match(page, /json-value-boolean/);
assert.match(page, /json-value-null/);
assert.match(page, /renderJsonTree\(json, group\)/);
assert.match(page, /rawSummary\.textContent = 'Visa hela spårdata'/);
assert.match(page, /JSON\.stringify\(npc\.profile, null, '\\t'\)/);
assert.doesNotMatch(page, /jsnview|cdn\.jsdelivr/);
}); });