Fix dashboard ID handling and output rendering performance
This commit is contained in:
parent
48a01641c4
commit
5ff684824a
1 changed files with 14 additions and 5 deletions
|
|
@ -301,6 +301,7 @@
|
|||
cwd: data.cwd,
|
||||
command: data.command,
|
||||
output: '',
|
||||
outputRenderedLength: 0,
|
||||
expanded: false,
|
||||
});
|
||||
renderSessions();
|
||||
|
|
@ -341,9 +342,11 @@
|
|||
}
|
||||
|
||||
window.toggleSession = (sessionId) => {
|
||||
const session = state.sessions.get(sessionId);
|
||||
const session = state.sessions.get(Number(sessionId));
|
||||
if (session) {
|
||||
session.expanded = !session.expanded;
|
||||
// Reset rendered length when collapsing or expanding (element gets recreated)
|
||||
session.outputRenderedLength = 0;
|
||||
renderSessions();
|
||||
}
|
||||
};
|
||||
|
|
@ -356,7 +359,7 @@
|
|||
|
||||
$sessions.innerHTML = Array.from(state.sessions.values()).map(s => `
|
||||
<div class="session ${s.expanded ? 'expanded' : ''}" data-session="${s.id}">
|
||||
<div class="session-header" onclick="toggleSession(${s.id})">
|
||||
<div class="session-header" onclick="toggleSession('${s.id}')">
|
||||
<div class="session-info">
|
||||
<div class="session-command">${escapeHtml(s.command || 'claude')}</div>
|
||||
<div class="session-cwd">${escapeHtml(s.cwd || '~')}</div>
|
||||
|
|
@ -376,7 +379,12 @@
|
|||
|
||||
const $output = document.getElementById(`output-${sessionId}`);
|
||||
if ($output) {
|
||||
$output.textContent = session.output;
|
||||
// Append only new content since last render
|
||||
const newChunk = session.output.slice(session.outputRenderedLength);
|
||||
if (newChunk) {
|
||||
$output.textContent += newChunk;
|
||||
session.outputRenderedLength = session.output.length;
|
||||
}
|
||||
if (session.expanded) {
|
||||
$output.parentElement.scrollTop = $output.parentElement.scrollHeight;
|
||||
}
|
||||
|
|
@ -393,14 +401,15 @@
|
|||
<div class="prompt" data-prompt="${p.id}">
|
||||
<div class="prompt-text">${escapeHtml(p.text)}</div>
|
||||
<div class="prompt-actions">
|
||||
<button class="btn btn-approve" onclick="respondToPrompt(${p.id}, 'approve')">Approve</button>
|
||||
<button class="btn btn-reject" onclick="respondToPrompt(${p.id}, 'reject')">Reject</button>
|
||||
<button class="btn btn-approve" onclick="respondToPrompt('${p.id}', 'approve')">Approve</button>
|
||||
<button class="btn btn-reject" onclick="respondToPrompt('${p.id}', 'reject')">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
window.respondToPrompt = async (promptId, action) => {
|
||||
promptId = Number(promptId);
|
||||
try {
|
||||
const res = await fetch(`/api/prompts/${promptId}/${action}`, {
|
||||
method: 'POST',
|
||||
|
|
|
|||
Loading…
Reference in a new issue