Fix multiple critical bugs: continueSessionInChat, projects link, mode buttons

Bug fixes:
- Add missing showLoadingOverlay/hideLoadingOverlay functions to ide.js
  (previously only existed in sessions-landing.js, causing continueSessionInChat to fail)
- Add loading overlay CSS styles to main style.css
- Fix Projects button URL: /projects -> /claude/ide?view=projects
- Add ?view= URL parameter handling in ide.js initialization
- Add missing Native mode button to chat view (now has 3 modes: Chat, Native, Terminal)

These fixes resolve:
1. "Continue in Chat" button not working in sessions view
2. Projects button in landing page nav taking to wrong URL
3. Missing "Native" mode button (user referred to as "Full Stack mode")
4. Loading overlay not displaying in IDE

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

public/claude-ide/chat-enhanced.css

@@ -473,3 +473,99 @@
     transform: translateY(-8px);
   }
 }
+
+/* ============================================
+   Chat Mode Buttons (Chat/Terminal)
+   ============================================ */
+
+.chat-modes-bar {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #0d0d0d;
+  border-bottom: 1px solid #333;
+  align-items: center;
+}
+
+.mode-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: #1a1a1a;
+  border: 2px solid #333;
+  border-radius: 8px;
+  color: #888;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.mode-btn:hover {
+  background: #252525;
+  border-color: #444;
+  color: #e0e0e0;
+}
+
+.mode-btn.active {
+  background: rgba(74, 158, 255, 0.15);
+  border-color: #4a9eff;
+  color: #4a9eff;
+}
+
+.mode-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.mode-label {
+  font-size: 14px;
+}
+
+/* Mobile Responsiveness for Mode Buttons */
+@media (max-width: 768px) {
+  .chat-modes-bar {
+    padding: 10px 12px;
+    gap: 6px;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .mode-btn {
+    flex: 1;
+    min-width: 0;
+    padding: 8px 12px;
+    font-size: 13px;
+    justify-content: center;
+  }
+
+  .mode-icon {
+    font-size: 16px;
+  }
+
+  .mode-label {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 480px) {
+  .chat-modes-bar {
+    padding: 8px;
+    gap: 4px;
+  }
+
+  .mode-btn {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .mode-btn .mode-label {
+    display: none;
+  }
+
+  .mode-btn .mode-icon {
+    font-size: 18px;
+  }
+}

public/claude-ide/ide.js

@@ -16,11 +16,12 @@ document.addEventListener('DOMContentLoaded', () => {
     initNavigation();
     connectWebSocket();
 
-    // Check URL params for session, prompt, and project
+    // Check URL params for session, prompt, project, and view
     const urlParams = new URLSearchParams(window.location.search);
     const sessionId = urlParams.get('session');
     const prompt = urlParams.get('prompt');
     const project = urlParams.get('project');
+    const view = urlParams.get('view');
 
     // Parse project parameter if present
     if (project) {
@@ -49,6 +50,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 }, 1000);
             }
         }, 500);
+    } else if (view) {
+        // Switch to the specified view
+        switchView(view);
     } else {
         // Default to chat view
         switchView('chat');
@@ -1044,6 +1048,49 @@ function escapeHtml(text) {
     return div.innerHTML;
 }
 
+/**
+ * Show loading overlay
+ * @param {string} message - The message to display
+ */
+function showLoadingOverlay(message = 'Loading...') {
+    let overlay = document.getElementById('loading-overlay');
+
+    if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.id = 'loading-overlay';
+        overlay.className = 'loading-overlay';
+        overlay.innerHTML = `
+            <div class="loading-spinner"></div>
+            <p class="loading-text">${escapeHtml(message)}</p>
+        `;
+        document.body.appendChild(overlay);
+    } else {
+        // Update message if provided
+        const textElement = overlay.querySelector('.loading-text');
+        if (textElement) {
+            textElement.textContent = message;
+        }
+    }
+
+    overlay.classList.remove('hidden');
+    setTimeout(() => {
+        overlay.classList.add('visible');
+    }, 10);
+}
+
+/**
+ * Hide loading overlay
+ */
+function hideLoadingOverlay() {
+    const overlay = document.getElementById('loading-overlay');
+    if (overlay) {
+        overlay.classList.remove('visible');
+        setTimeout(() => {
+            overlay.classList.add('hidden');
+        }, 300);
+    }
+}
+
 /**
  * Show toast notification
  * @param {string} message - The message to display

public/claude-ide/index.html

@@ -165,6 +165,22 @@
                             </div>
                         </div>
                     </div>
+                    <!-- Chat Mode Buttons -->
+                    <div class="chat-modes-bar" id="chat-modes-bar">
+                        <button class="mode-btn active" data-mode="auto" onclick="setChatMode('auto')" title="Chat Mode - AI assisted conversations">
+                            <span class="mode-icon">💬</span>
+                            <span class="mode-label">Chat</span>
+                        </button>
+                        <button class="mode-btn" data-mode="native" onclick="setChatMode('native')" title="Native Mode - Commands execute directly on your system">
+                            <span class="mode-icon">⚡</span>
+                            <span class="mode-label">Native</span>
+                        </button>
+                        <button class="mode-btn" data-mode="webcontainer" onclick="setChatMode('webcontainer')" title="Terminal Mode - Persistent terminal session">
+                            <span class="mode-icon">🖥️</span>
+                            <span class="mode-label">Terminal</span>
+                        </button>
+                    </div>
+
                     <div class="chat-input-container">
                         <div class="chat-input-wrapper">
                             <textarea id="chat-input"

public/claude-landing.html

@@ -108,7 +108,7 @@
         <div class="nav-logo">Claude Code</div>
         <div class="nav-links">
             <a href="/claude/" class="nav-link active">Sessions</a>
-            <a href="/projects" class="nav-link">Projects</a>
+            <a href="/claude/ide?view=projects" class="nav-link">Projects</a>
             <button class="nav-logout" onclick="logout()">Logout</button>
         </div>
     </nav>

public/css/style.css

@@ -484,3 +484,45 @@ body {
     font-size: 0.85rem;
     color: var(--text-secondary);
 }
+
+/* === Loading Overlay === */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.loading-overlay.hidden {
+    display: none;
+}
+
+.loading-overlay.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.loading-spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid #333;
+    border-top-color: #4a9eff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+.loading-text {
+    margin-top: 1rem;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+}