fix: preserve collapsible subsection state across polling re-renders

- Use stable section IDs (without Date.now()) so collapse state can be
  tracked across re-renders
- Snapshot collapsed state before innerHTML replacement, restore after
- Prevents the 10s polling from expanding all subsections every time
This commit is contained in:
2026-05-02 16:17:26 +03:00
parent c5e49c73df
commit 4e28236b06

View File

@@ -162,6 +162,14 @@ function renderPromptEntry(entry) {
// Parse full_prompt into sections // Parse full_prompt into sections
const sections = parsePromptSections(entry.full_prompt || ''); const sections = parsePromptSections(entry.full_prompt || '');
// Snapshot which subsections are currently collapsed (before re-render)
const sectionIds = ['system', 'context', 'conversation', 'response'];
const collapsedState = {};
sectionIds.forEach(id => {
const el = document.getElementById(`prompt-section-${id}`);
collapsedState[id] = el && el.classList.contains('collapsed');
});
// Build display HTML with collapsible subsections // Build display HTML with collapsible subsections
let displayHtml = ''; let displayHtml = '';
@@ -192,6 +200,16 @@ function renderPromptEntry(entry) {
const displayEl = document.getElementById('prompt-display'); const displayEl = document.getElementById('prompt-display');
displayEl.innerHTML = displayHtml; displayEl.innerHTML = displayHtml;
// Restore collapsed state from snapshot
sectionIds.forEach(id => {
const el = document.getElementById(`prompt-section-${id}`);
if (el && collapsedState[id]) {
el.classList.add('collapsed');
const header = el.previousElementSibling;
if (header) header.innerHTML = header.innerHTML.replace('▼', '▶');
}
});
// Also set the raw text into the <pre> for copy functionality // Also set the raw text into the <pre> for copy functionality
let rawText = entry.full_prompt || ''; let rawText = entry.full_prompt || '';
if (entry.response) { if (entry.response) {
@@ -244,12 +262,12 @@ function parsePromptSections(fullPrompt) {
} }
function buildCollapsibleSection(title, content, sectionId) { function buildCollapsibleSection(title, content, sectionId) {
const uniqueId = `prompt-section-${sectionId}-${Date.now()}`; const id = `prompt-section-${sectionId}`;
return ` return `
<div class="prompt-subsection-header" onclick="togglePromptSubsection('${uniqueId}')"> <div class="prompt-subsection-header" onclick="togglePromptSubsection('${id}')">
${escapeHtml(title)} ${escapeHtml(title)}
</div> </div>
<div class="prompt-subsection-body" id="${uniqueId}"> <div class="prompt-subsection-body" id="${id}">
<pre style="white-space: pre-wrap; word-break: break-word; background: #1a1a1a; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.4; margin: 0.25rem 0;">${escapeHtml(content)}</pre> <pre style="white-space: pre-wrap; word-break: break-word; background: #1a1a1a; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.4; margin: 0.25rem 0;">${escapeHtml(content)}</pre>
</div>`; </div>`;
} }