bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: harden streaming page rendering

Browse Source
This commit is contained in:
a.tolmachev
2026-05-02 10:55:26 +00:00
parent 73bebee8f6
commit 3ec7f34076
3 changed files with 175 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TASKS.md
+5 -7
View File
@@ -2,20 +2,18 @@
## Current
### `feat/distributed-mcp-session-store`
### `feat/frontend-xss-hardening`
Status: in_progress
DoD:
- transport sessions are stored behind a shared store abstraction
- mcp-server no longer depends directly on process-local session storage implementation
- in-memory session store remains available for tests and local fallback
- production mcp-server uses a Postgres-backed transport session store
- expired transport sessions are evicted on read and no longer leak indefinitely
- API-provided values are not rendered into `innerHTML` on user-facing admin pages
- error strings from API responses are rendered through text nodes
- streaming admin pages use DOM construction instead of HTML string concatenation for dynamic cards
## Next
- `feat/runtime-rate-limiting-and-backpressure`
- `feat/distributed-mcp-session-store`
## Backlog
apps/ui/js/async-jobs.js
+90 -39
View File
@@ -33,8 +33,93 @@ document.addEventListener('DOMContentLoaded', function () {
return new Date(value).toLocaleString();
}
function element(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text !== undefined && text !== null) node.textContent = text;
return node;
}
function renderEmpty(title, body) {
list.innerHTML = '<div class="empty-state"><div class="empty-state-title">' + title + '</div><div class="empty-state-text">' + body + '</div></div>';
list.innerHTML = '';
var empty = element('div', 'empty-state');
empty.appendChild(element('div', 'empty-state-title', title));
empty.appendChild(element('div', 'empty-state-text', body));
list.appendChild(empty);
}
function appendMetaItem(parent, label, value) {
var item = element('div', 'resource-meta-item');
item.appendChild(element('div', 'resource-meta-label', label));
item.appendChild(element('div', 'resource-meta-value', value));
parent.appendChild(item);
}
function appendDetailBlock(parent, title, value, dataResultFor) {
var block = element('div', 'resource-detail-block');
block.appendChild(element('div', 'resource-detail-title', title));
var pre = element('pre', 'resource-detail-pre', value);
if (dataResultFor) pre.setAttribute('data-result-for', dataResultFor);
block.appendChild(pre);
parent.appendChild(block);
}
function renderJobCard(item) {
var open = state.openId === item.id;
var card = element('div', 'resource-card');
card.setAttribute('data-job-id', item.id);
var header = element('div', 'resource-card-header');
var headerMain = element('div');
headerMain.appendChild(element('div', 'resource-card-title', item.id));
headerMain.appendChild(element('div', 'resource-card-subtitle', tKey('async_jobs.operation', { operation: item.operation_id })));
var pillRow = element('div', 'resource-pill-row');
pillRow.appendChild(
element('span', 'resource-status-pill ' + String(item.status || '').toLowerCase(), tKey('async_jobs.status.' + item.status))
);
headerMain.appendChild(pillRow);
header.appendChild(headerMain);
var actions = element('div', 'resource-card-actions');
if (item.status === 'created' || item.status === 'running') {
var cancelButton = element('button', 'btn-secondary', tKey('async_jobs.cancel'));
cancelButton.setAttribute('data-action', 'cancel');
cancelButton.setAttribute('data-job-id', item.id);
actions.appendChild(cancelButton);
}
var toggleButton = element(
'button',
'btn-secondary',
open ? tKey('async_jobs.hide_details') : tKey('async_jobs.show_details')
);
toggleButton.setAttribute('data-action', 'toggle');
toggleButton.setAttribute('data-job-id', item.id);
actions.appendChild(toggleButton);
header.appendChild(actions);
card.appendChild(header);
var metaGrid = element('div', 'resource-meta-grid');
appendMetaItem(metaGrid, tKey('async_jobs.meta.created'), formatDateTime(item.created_at));
appendMetaItem(metaGrid, tKey('async_jobs.meta.updated'), formatDateTime(item.updated_at));
appendMetaItem(metaGrid, tKey('async_jobs.meta.finished'), formatDateTime(item.finished_at));
appendMetaItem(metaGrid, tKey('async_jobs.meta.expires'), formatDateTime(item.expires_at));
card.appendChild(metaGrid);
if (open) {
appendDetailBlock(card, tKey('async_jobs.progress'), formatJson(item.progress));
appendDetailBlock(card, tKey('async_jobs.error_preview'), formatJson(item.error));
if (
item.status === 'completed' ||
item.status === 'failed' ||
item.status === 'cancelled' ||
item.status === 'expired'
) {
appendDetailBlock(card, tKey('async_jobs.result'), tKey('async_jobs.result_loading'), item.id);
}
}
return card;
}
function render() {
@@ -55,44 +140,10 @@ document.addEventListener('DOMContentLoaded', function () {
return;
}
list.innerHTML = state.items.map(function(item) {
var open = state.openId === item.id;
var statusLabel = tKey('async_jobs.status.' + item.status);
return [
'<div class="resource-card" data-job-id="' + item.id + '">',
' <div class="resource-card-header">',
' <div>',
' <div class="resource-card-title">' + item.id + '</div>',
' <div class="resource-card-subtitle">' + tKey('async_jobs.operation', { operation: item.operation_id }) + '</div>',
' <div class="resource-pill-row">',
' <span class="resource-status-pill ' + String(item.status || '').toLowerCase() + '">' + statusLabel + '</span>',
' </div>',
' </div>',
' <div class="resource-card-actions">',
item.status === 'created' || item.status === 'running'
? ' <button class="btn-secondary" data-action="cancel" data-job-id="' + item.id + '">' + tKey('async_jobs.cancel') + '</button>'
: '',
' <button class="btn-secondary" data-action="toggle" data-job-id="' + item.id + '">' + (open ? tKey('async_jobs.hide_details') : tKey('async_jobs.show_details')) + '</button>',
' </div>',
' </div>',
' <div class="resource-meta-grid">',
' <div class="resource-meta-item"><div class="resource-meta-label">' + tKey('async_jobs.meta.created') + '</div><div class="resource-meta-value">' + formatDateTime(item.created_at) + '</div></div>',
' <div class="resource-meta-item"><div class="resource-meta-label">' + tKey('async_jobs.meta.updated') + '</div><div class="resource-meta-value">' + formatDateTime(item.updated_at) + '</div></div>',
' <div class="resource-meta-item"><div class="resource-meta-label">' + tKey('async_jobs.meta.finished') + '</div><div class="resource-meta-value">' + formatDateTime(item.finished_at) + '</div></div>',
' <div class="resource-meta-item"><div class="resource-meta-label">' + tKey('async_jobs.meta.expires') + '</div><div class="resource-meta-value">' + formatDateTime(item.expires_at) + '</div></div>',
' </div>',
open
? ' <div class="resource-detail-block"><div class="resource-detail-title">' + tKey('async_jobs.progress') + '</div><pre class="resource-detail-pre">' + formatJson(item.progress) + '</pre></div>'
: '',
open
? ' <div class="resource-detail-block"><div class="resource-detail-title">' + tKey('async_jobs.error_preview') + '</div><pre class="resource-detail-pre">' + formatJson(item.error) + '</pre></div>'
: '',
open && (item.status === 'completed' || item.status === 'failed' || item.status === 'cancelled' || item.status === 'expired')
? ' <div class="resource-detail-block"><div class="resource-detail-title">' + tKey('async_jobs.result') + '</div><pre class="resource-detail-pre" data-result-for="' + item.id + '">' + tKey('async_jobs.result_loading') + '</pre></div>'
: '',
'</div>'
].join('');
}).join('');
list.innerHTML = '';
state.items.forEach(function(item) {
list.appendChild(renderJobCard(item));
});
list.querySelectorAll('[data-action="toggle"]').forEach(function(button) {
button.addEventListener('click', function () {
apps/ui/js/stream-sessions.js
+80 -35
View File
@@ -34,8 +34,83 @@ document.addEventListener('DOMContentLoaded', function () {
return new Date(value).toLocaleString();
}
function element(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text !== undefined && text !== null) node.textContent = text;
return node;
}
function renderEmpty(title, body) {
list.innerHTML = '<div class="empty-state"><div class="empty-state-title">' + title + '</div><div class="empty-state-text">' + body + '</div></div>';
list.innerHTML = '';
var empty = element('div', 'empty-state');
empty.appendChild(element('div', 'empty-state-title', title));
empty.appendChild(element('div', 'empty-state-text', body));
list.appendChild(empty);
}
function appendMetaItem(parent, label, value) {
var item = element('div', 'resource-meta-item');
item.appendChild(element('div', 'resource-meta-label', label));
item.appendChild(element('div', 'resource-meta-value', value));
parent.appendChild(item);
}
function appendDetailBlock(parent, title, value) {
var block = element('div', 'resource-detail-block');
block.appendChild(element('div', 'resource-detail-title', title));
block.appendChild(element('pre', 'resource-detail-pre', formatJson(value)));
parent.appendChild(block);
}
function renderSessionCard(item) {
var open = state.openId === item.id;
var card = element('div', 'resource-card');
card.setAttribute('data-session-id', item.id);
var header = element('div', 'resource-card-header');
var headerMain = element('div');
headerMain.appendChild(element('div', 'resource-card-title', item.id));
headerMain.appendChild(element('div', 'resource-card-subtitle', tKey('stream_sessions.operation', { operation: item.operation_id })));
var pillRow = element('div', 'resource-pill-row');
var statusPill = element('span', 'resource-status-pill ' + String(item.status || '').toLowerCase(), tKey('stream_sessions.status.' + item.status));
pillRow.appendChild(statusPill);
pillRow.appendChild(element('span', 'resource-status-pill', item.mode));
pillRow.appendChild(element('span', 'resource-status-pill', item.protocol));
headerMain.appendChild(pillRow);
header.appendChild(headerMain);
var actions = element('div', 'resource-card-actions');
if (item.status === 'created' || item.status === 'running') {
var stopButton = element('button', 'btn-secondary', tKey('stream_sessions.stop'));
stopButton.setAttribute('data-action', 'stop');
stopButton.setAttribute('data-session-id', item.id);
actions.appendChild(stopButton);
}
var toggleButton = element(
'button',
'btn-secondary',
open ? tKey('stream_sessions.hide_details') : tKey('stream_sessions.show_details')
);
toggleButton.setAttribute('data-action', 'toggle');
toggleButton.setAttribute('data-session-id', item.id);
actions.appendChild(toggleButton);
header.appendChild(actions);
card.appendChild(header);
var metaGrid = element('div', 'resource-meta-grid');
appendMetaItem(metaGrid, tKey('stream_sessions.meta.created'), formatDateTime(item.created_at));
appendMetaItem(metaGrid, tKey('stream_sessions.meta.last_poll'), formatDateTime(item.last_poll_at));
appendMetaItem(metaGrid, tKey('stream_sessions.meta.expires'), formatDateTime(item.expires_at));
appendMetaItem(metaGrid, tKey('stream_sessions.meta.agent'), item.agent_id || '—');
card.appendChild(metaGrid);
if (open) {
appendDetailBlock(card, tKey('stream_sessions.cursor'), item.cursor);
}
return card;
}
function render() {
@@ -56,40 +131,10 @@ document.addEventListener('DOMContentLoaded', function () {
return;
}
list.innerHTML = state.items.map(function(item) {
var open = state.openId === item.id;
var statusLabel = tKey('stream_sessions.status.' + item.status);
return [
'<div class="resource-card" data-session-id="' + item.id + '">',
' <div class="resource-card-header">',
' <div>',
' <div class="resource-card-title">' + item.id + '</div>',
' <div class="resource-card-subtitle">' + tKey('stream_sessions.operation', { operation: item.operation_id }) + '</div>',
' <div class="resource-pill-row">',
' <span class="resource-status-pill ' + String(item.status || '').toLowerCase() + '">' + statusLabel + '</span>',
' <span class="resource-status-pill">' + item.mode + '</span>',
' <span class="resource-status-pill">' + item.protocol + '</span>',
' </div>',
' </div>',
' <div class="resource-card-actions">',
item.status === 'created' || item.status === 'running'
? ' <button class="btn-secondary" data-action="stop" data-session-id="' + item.id + '">' + tKey('stream_sessions.stop') + '</button>'
: '',
' <button class="btn-secondary" data-action="toggle" data-session-id="' + item.id + '">' + (open ? tKey('stream_sessions.hide_details') : tKey('stream_sessions.show_details')) + '</button>',
' </div>',
' </div>',
' <div class="resource-meta-grid">',
' <div class="resource-meta-item"><div class="resource-meta-label">' + tKey('stream_sessions.meta.created') + '</div><div class="resource-meta-value">' + formatDateTime(item.created_at) + '</div></div>',
' <div class="resource-meta-item"><div class="resource-meta-label">' + tKey('stream_sessions.meta.last_poll') + '</div><div class="resource-meta-value">' + formatDateTime(item.last_poll_at) + '</div></div>',
' <div class="resource-meta-item"><div class="resource-meta-label">' + tKey('stream_sessions.meta.expires') + '</div><div class="resource-meta-value">' + formatDateTime(item.expires_at) + '</div></div>',
' <div class="resource-meta-item"><div class="resource-meta-label">' + tKey('stream_sessions.meta.agent') + '</div><div class="resource-meta-value">' + (item.agent_id || '—') + '</div></div>',
' </div>',
open
? ' <div class="resource-detail-block"><div class="resource-detail-title">' + tKey('stream_sessions.cursor') + '</div><pre class="resource-detail-pre">' + formatJson(item.cursor) + '</pre></div>'
: '',
'</div>'
].join('');
}).join('');
list.innerHTML = '';
state.items.forEach(function(item) {
list.appendChild(renderSessionCard(item));
});
list.querySelectorAll('[data-action="toggle"]').forEach(function(button) {
button.addEventListener('click', function () {