Merge pull request #45 from thefirehacker/3.5.0_Playground

3.5.0 playground

Author: thefirehacker

Canvas.html

@@ -13,7 +13,7 @@
     worker-src 'self' blob: data:;
     object-src 'none';
   ">
-  <title>Playground - TimeCapsule-SLM</title>
+  <title>Canvas - TimeCapsule-SLM</title>
   <link rel="icon" type="image/png" href="lib/Media/TimeCapsule_04.png">
   <link rel="shortcut icon" type="image/png" href="lib/Media/TimeCapsule_04.png">
   <style>
@@ -1283,9 +1283,21 @@ <h3>🎮 Controls</h3>
         window.AppConfig.initializeGA4();
 
         // Track initial page view
-        window.AppConfig.trackPageView('Playground - TimeCapsule-SLM', window.location.href);
+        window.AppConfig.trackPageView('Canvas Playground - TimeCapsule-SLM', window.location.href);
       }
 
+      // Initialize second navbar for Canvas page
+      setTimeout(() => {
+        if (window.SecondNavbar) {
+          window.SecondNavbar.init('canvas', true); // Force reload to override auto-detection
+          
+          // Update header AI status after navbar is initialized
+          setTimeout(() => {
+            updateHeaderAIStatus();
+          }, 100);
+        }
+      }, 300);
+      
       // Set initial status message for Ollama default
       setTimeout(() => {
         if (typeof updateStatus === 'function') {
@@ -1816,6 +1828,12 @@ <h4 style="color: white; margin-bottom: 10px;">📈 Performance Metrics</h4>
       const connectBtn = document.getElementById('initAIBtn');
       const disconnectBtn = document.getElementById('disconnectAIBtn');
 
+      // Check if header elements exist (second navbar may not be initialized yet)
+      if (!headerStatus) {
+        console.log('Header status element not found - second navbar may not be initialized yet');
+        return;
+      }
+      
       if (aiSession) {
         if (aiSession.type === 'qwen') {
           headerStatus.textContent = '🧠 Qwen2.5 Connected';
@@ -1830,13 +1848,13 @@ <h4 style="color: white; margin-bottom: 10px;">📈 Performance Metrics</h4>
           headerStatus.textContent = `🦙 Ollama Connected`;
           headerStatus.style.color = '#4CAF50';
         }
-        connectBtn.style.display = 'none';
-        disconnectBtn.style.display = 'inline-block';
+        if (connectBtn) connectBtn.style.display = 'none';
+        if (disconnectBtn) disconnectBtn.style.display = 'inline-block';
       } else {
         headerStatus.textContent = 'AI Integration';
         headerStatus.style.color = 'rgba(255,255,255,0.85)';
-        connectBtn.style.display = 'inline-block';
-        disconnectBtn.style.display = 'none';
+        if (connectBtn) connectBtn.style.display = 'inline-block';
+        if (disconnectBtn) disconnectBtn.style.display = 'none';
       }
     }
 
@@ -4382,8 +4400,8 @@ <h3>🎨 Creative Chat Context</h3>
         window.runSketch(editorInstance.getValue());
       }, 1000);
 
-      // Initialize header AI status
-      updateHeaderAIStatus();
+      // Header AI status will be initialized after second navbar loads
+      // (moved to second navbar initialization to avoid null reference errors)
 
       // Make dev logger globally available
       window.devModeActive = devModeActive;

DeepResearch.html

@@ -768,6 +768,195 @@
       color: rgba(255, 255, 255, 0.7);
     }
 
+    /* Troubleshooting Modal Styles */
+    .troubleshooting-modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(5px);
+      z-index: 5000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      box-sizing: border-box;
+      opacity: 1;
+    }
+    
+    .troubleshooting-content {
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+      backdrop-filter: blur(20px);
+      border-radius: 20px;
+      padding: 30px;
+      max-width: 800px;
+      max-height: 90vh;
+      overflow-y: auto;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+      color: white;
+      position: relative;
+    }
+    
+    .troubleshooting-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      padding-bottom: 15px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .troubleshooting-header h2 {
+      margin: 0;
+      color: #ff6b6b;
+      font-size: 24px;
+    }
+    
+    .close-modal {
+      background: rgba(255, 69, 0, 0.7);
+      color: white;
+      border: none;
+      border-radius: 50%;
+      width: 35px;
+      height: 35px;
+      cursor: pointer;
+      font-size: 18px;
+      font-weight: bold;
+      transition: all 0.3s ease;
+    }
+    
+    .close-modal:hover {
+      background: rgba(255, 69, 0, 0.9);
+      transform: scale(1.1);
+    }
+    
+    .error-details {
+      background: rgba(255, 69, 0, 0.1);
+      border: 1px solid rgba(255, 69, 0, 0.3);
+      border-radius: 10px;
+      padding: 15px;
+      margin-bottom: 20px;
+    }
+    
+    .error-details p {
+      margin: 0;
+      color: #ff6b6b;
+      font-family: monospace;
+      font-size: 14px;
+    }
+    
+    .troubleshooting-steps h3 {
+      color: #4facfe;
+      margin-bottom: 15px;
+      font-size: 18px;
+    }
+    
+    .command-group {
+      margin-bottom: 20px;
+      padding: 15px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 10px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    .command-group h4 {
+      color: #fff;
+      margin-bottom: 10px;
+      font-size: 16px;
+    }
+    
+    .command-box {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin: 10px 0;
+      padding: 10px;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    .command-box code {
+      flex: 1;
+      color: #00ff88;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 14px;
+      background: transparent;
+      padding: 0;
+    }
+    
+    .copy-btn {
+      background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      padding: 6px 12px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    
+    .copy-btn:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(79, 172, 254, 0.4);
+    }
+    
+    .command-note {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 12px;
+      margin: 5px 0;
+      font-style: italic;
+    }
+    
+    .troubleshooting-checklist {
+      margin: 20px 0;
+      padding: 15px;
+      background: rgba(76, 175, 80, 0.1);
+      border: 1px solid rgba(76, 175, 80, 0.3);
+      border-radius: 10px;
+    }
+    
+    .troubleshooting-checklist h3 {
+      color: #4caf50;
+      margin-bottom: 10px;
+    }
+    
+    .troubleshooting-checklist ul {
+      list-style: none;
+      padding: 0;
+    }
+    
+    .troubleshooting-checklist li {
+      color: rgba(255, 255, 255, 0.8);
+      margin: 8px 0;
+      font-size: 14px;
+    }
+    
+    .troubleshooting-checklist a {
+      color: #4facfe;
+      text-decoration: none;
+    }
+    
+    .troubleshooting-checklist a:hover {
+      text-decoration: underline;
+    }
+    
+    .troubleshooting-actions {
+      display: flex;
+      gap: 10px;
+      margin-top: 20px;
+      flex-wrap: wrap;
+    }
+    
+    .troubleshooting-actions .btn {
+      flex: 1;
+      min-width: 120px;
+      margin: 0;
+    }
+
     /* User Agreement Modal Styles */
     .user-agreement-modal {
       position: fixed;