admin/SuperCharged-Claude-Code-Upgrade
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix execution trace panel collapse/expand functionality

Browse Source 
- Expose toggleTracePanel() to global scope for onclick access
- Add localStorage state persistence for collapsed/expanded state
- Add restoreTracePanelState() to remember user preference
- Update onclick handler to safely call global function
- Bump cache-bust version to force browser reload

The trace panel toggle button now works correctly and remembers
its state across page reloads.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
2026-01-22 11:54:06 +00:00
Unverified
parent 3067c6bc24
commit eb0f95ac9e
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
public/claude-ide/index.html
View File

@@ -102,10 +102,10 @@
const panel = document.createElement('div');
panel.id = 'execution-trace-panel';
panel.innerHTML = `
<div style="position: fixed; top: 10px; right: 10px; z-index: 99999; background: rgba(0,0,0,0.95); border: 2px solid #00ff00; border-radius: 8px; font-family: monospace; font-size: 11px; color: #00ff00; max-width: 400px; max-height: 300px; overflow: hidden;">
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #00ff00; cursor: pointer;" onclick="toggleTracePanel()">
<div id="trace-container" style="position: fixed; top: 10px; right: 10px; z-index: 99999; background: rgba(0,0,0,0.95); border: 2px solid #00ff00; border-radius: 8px; font-family: monospace; font-size: 11px; color: #00ff00; max-width: 400px; max-height: 300px; overflow: hidden;">
<div id="trace-header" style="display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #00ff00; cursor: pointer;" onclick="window.toggleTracePanel && window.toggleTracePanel()">
<strong>🔍 EXECUTION TRACE</strong>
<button id="trace-toggle" style="background: transparent; border: 1px solid #00ff00; color: #00ff00; cursor: pointer;">▼</button>
<button id="trace-toggle" style="background: transparent; border: 1px solid #00ff00; color: #00ff00; cursor: pointer; padding: 2px 6px;">▼</button>
</div>
<div id="trace-content" style="padding: 8px; max-height: 250px; overflow-y: auto; font-size: 10px; line-height: 1.4;">
<div style="color: #888;">Waiting for events...</div>
@@ -153,15 +153,41 @@
const content = document.getElementById('trace-content');
const toggle = document.getElementById('trace-toggle');
if (content && toggle) {
if (content.style.display === 'none') {
const isCollapsed = content.style.display === 'none';
if (isCollapsed) {
content.style.display = 'block';
toggle.textContent = '▼';
localStorage.setItem('tracePanelCollapsed', 'false');
} else {
content.style.display = 'none';
toggle.textContent = '▶';
localStorage.setItem('tracePanelCollapsed', 'true');
}
}
}
// Restore collapsed state from localStorage
function restoreTracePanelState() {
const wasCollapsed = localStorage.getItem('tracePanelCollapsed') === 'true';
const content = document.getElementById('trace-content');
const toggle = document.getElementById('trace-toggle');
if (content && toggle && wasCollapsed) {
content.style.display = 'none';
toggle.textContent = '▶';
}
}
}
// Call restore after panel is created
const originalCreateTracePanel = createTracePanel;
createTracePanel = function() {
originalCreateTracePanel();
setTimeout(restoreTracePanelState, 0);
};
// Expose toggleTracePanel globally so onclick can access it
window.toggleTracePanel = toggleTracePanel;
// Initialize on DOM ready
if (document.readyState === 'loading') {
@@ -207,7 +233,7 @@
<script>
(function() {
'use strict';
const EXPECTED_JS_VERSION = '1769082354552'; // Cache bust for sidebar refresh fix
const EXPECTED_JS_VERSION = '1769083000000'; // Cache bust for trace panel collapse fix
const CACHE_BUST_KEY = '_claude_cache_bust';
// Check if we need to force reload