From eb0f95ac9e5234ab8eedae29c4ce0acac00cd853 Mon Sep 17 00:00:00 2001
From: uroma <uroma@rommark.dev>
Date: Thu, 22 Jan 2026 11:54:06 +0000
Subject: [PATCH] Fix execution trace panel collapse/expand functionality

- 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>
---
 public/claude-ide/index.html | 36 +++++++++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/public/claude-ide/index.html b/public/claude-ide/index.html
index 849cc19e..3f244f01 100644
--- a/public/claude-ide/index.html
+++ b/public/claude-ide/index.html
@@ -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,16 +153,42 @@
             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') {
             document.addEventListener('DOMContentLoaded', createTracePanel);
@@ -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