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>