From 17703a430e66e776309354313b2ff04eced37a8e Mon Sep 17 00:00:00 2001
From: uroma <uroma@rommark.dev>
Date: Tue, 20 Jan 2026 05:56:07 +0000
Subject: [PATCH] feat: make Terminal Debug Panel collapsible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add collapse/expand functionality to debug panel with:
- Toggle button with arrow icon (▼/▶)
- Smooth CSS transitions (0.3s ease-in-out)
- localStorage persistence for collapsed state
- Hover effects for better UX (header background, button invert)
- Accessible with aria-label
- Click anywhere on header to toggle

The panel remembers its collapsed state across page refreshes.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 public/claude-ide/index.html | 58 ++++++++++++++++++++++++++++++++----
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/public/claude-ide/index.html b/public/claude-ide/index.html
index b75b6f46..87e28206 100644
--- a/public/claude-ide/index.html
+++ b/public/claude-ide/index.html
@@ -225,13 +225,16 @@
                     </div>
                 </div>
 
-                <!-- Debug Panel - Always visible for debugging -->
-                <div id="terminal-debug-panel" style="margin: 20px; padding: 15px; background: #1a1a1a; border: 1px solid #ff6b6b; border-radius: 8px; font-family: monospace; font-size: 12px; color: #e0e0e0;">
-                    <div style="margin-bottom: 10px;">
+                <!-- Debug Panel - Collapsible -->
+                <div id="terminal-debug-panel" style="margin: 20px; background: #1a1a1a; border: 1px solid #ff6b6b; border-radius: 8px; font-family: monospace; font-size: 12px; color: #e0e0e0; overflow: hidden; transition: max-height 0.3s ease-in-out;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; cursor: pointer;" onclick="toggleDebugPanel()" id="debug-panel-header" onmouseover="this.style.background='#2a2a2a'" onmouseout="this.style.background='transparent'">
                         <h3 style="margin: 0; color: #ff6b6b;">🐛 Terminal Debug Panel</h3>
+                        <button id="debug-panel-toggle" style="background: transparent; border: 1px solid #ff6b6b; color: #ff6b6b; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.2s ease;" aria-label="Toggle debug panel" onmouseover="this.style.background='#ff6b6b'; this.style.color='#1a1a1a'" onmouseout="this.style.background='transparent'; this.style.color='#ff6b6b'">▼</button>
                     </div>
-                    <div id="terminal-debug-content" style="max-height: 300px; overflow-y: auto;">
-                        <div style="color: #888;">Waiting for terminal activity...</div>
+                    <div id="terminal-debug-content-wrapper" style="overflow: hidden; transition: max-height 0.3s ease-in-out;">
+                        <div id="terminal-debug-content" style="max-height: 300px; overflow-y: auto; padding: 0 15px 15px 15px;">
+                            <div style="color: #888;">Waiting for terminal activity...</div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -322,5 +325,50 @@
     <script src="/claude/claude-ide/preview-manager.js"></script>
     <script src="/claude/claude-ide/chat-enhanced.js"></script>
     <script src="/claude/claude-ide/terminal.js"></script>
+
+    <!-- Debug Panel Toggle Script -->
+    <script>
+        // Debug panel collapse state
+        let debugPanelCollapsed = localStorage.getItem('debugPanelCollapsed') === 'true';
+
+        // Initialize debug panel state on page load
+        function initDebugPanel() {
+            const panel = document.getElementById('terminal-debug-panel');
+            const contentWrapper = document.getElementById('terminal-debug-content-wrapper');
+            const toggle = document.getElementById('debug-panel-toggle');
+
+            if (debugPanelCollapsed) {
+                contentWrapper.style.maxHeight = '0px';
+                toggle.textContent = '▶';
+                toggle.style.transform = 'rotate(-90deg)';
+            } else {
+                contentWrapper.style.maxHeight = '315px'; // 300px content + 15px padding
+                toggle.textContent = '▼';
+                toggle.style.transform = 'rotate(0deg)';
+            }
+        }
+
+        // Toggle debug panel collapse/expand
+        function toggleDebugPanel() {
+            debugPanelCollapsed = !debugPanelCollapsed;
+            localStorage.setItem('debugPanelCollapsed', debugPanelCollapsed);
+
+            const contentWrapper = document.getElementById('terminal-debug-content-wrapper');
+            const toggle = document.getElementById('debug-panel-toggle');
+
+            if (debugPanelCollapsed) {
+                contentWrapper.style.maxHeight = '0px';
+                toggle.textContent = '▶';
+                toggle.style.transform = 'rotate(-90deg)';
+            } else {
+                contentWrapper.style.maxHeight = '315px'; // 300px content + 15px padding
+                toggle.textContent = '▼';
+                toggle.style.transform = 'rotate(0deg)';
+            }
+        }
+
+        // Initialize on page load
+        document.addEventListener('DOMContentLoaded', initDebugPanel);
+    </script>
 </body>
 </html>