Add quick agent access toggle button to data analyzer

- Create toggle button in header for quick access to other agents
- Add slide-out panel with grid of available agents (Weather Reporter, Job Posting Generator, Social Ads Generator, Five Whys Analyzer)
- Include agent icons, names, descriptions, and pricing information
- Add mobile-responsive design with full-width panel on small screens
- Implement toggle functionality with JavaScript (open/close with button, overlay click, or Escape key)
- Add smooth animations and hover effects
- Include "View All Agents" link to marketplace
- Enhance user experience with quick navigation between agents

🤖 Generated with [Claude Code](https://claude.ai/code)

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

data_analyzer/templates/data_analyzer/detail.html

@@ -58,6 +58,12 @@ body {
     margin-bottom: var(--spacing-xl);
 }
 
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-lg);
+}
+
 .agent-grid {
     display: flex;
     gap: var(--spacing-lg);
@@ -770,6 +776,208 @@ body {
     border: 1px solid #fecaca;
 }
 
+/* Quick Agent Access Toggle & Panel */
+.quick-agent-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: var(--surface);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--radius-md);
+    color: var(--on-surface);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.quick-agent-toggle:hover {
+    background: var(--surface-variant);
+    border-color: var(--primary);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm);
+}
+
+.quick-agent-toggle.active {
+    background: var(--primary);
+    color: white;
+    border-color: var(--primary);
+}
+
+.toggle-icon {
+    font-size: 16px;
+    transition: transform 0.2s ease;
+}
+
+.quick-agent-toggle.active .toggle-icon {
+    transform: rotate(180deg);
+}
+
+.quick-agents-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 400px;
+    height: 100vh;
+    background: var(--surface);
+    border-left: 1px solid var(--outline);
+    box-shadow: var(--shadow-lg);
+    z-index: 1000;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    overflow-y: auto;
+}
+
+.quick-agents-panel.active {
+    transform: translateX(0);
+}
+
+.quick-agents-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-lg);
+    border-bottom: 1px solid var(--outline-variant);
+    background: var(--surface-variant);
+}
+
+.quick-agents-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--on-surface);
+}
+
+.close-panel {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: var(--on-surface-variant);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--radius-sm);
+    transition: all 0.2s ease;
+}
+
+.close-panel:hover {
+    background: var(--surface);
+    color: var(--on-surface);
+}
+
+.quick-agents-grid {
+    padding: var(--spacing-lg);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.quick-agent-card {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    color: var(--on-surface);
+    transition: all 0.2s ease;
+    background: var(--surface);
+}
+
+.quick-agent-card:hover {
+    background: var(--surface-variant);
+    border-color: var(--primary);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm);
+}
+
+.agent-icon {
+    font-size: 24px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--surface-variant);
+    border-radius: var(--radius-md);
+    flex-shrink: 0;
+}
+
+.agent-info {
+    flex: 1;
+}
+
+.agent-info h4 {
+    margin: 0 0 4px 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--on-surface);
+}
+
+.agent-info p {
+    margin: 0;
+    font-size: 12px;
+    color: var(--on-surface-variant);
+    line-height: 1.4;
+}
+
+.agent-price {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--primary);
+    background: rgba(0, 0, 0, 0.05);
+    padding: 2px 8px;
+    border-radius: var(--radius-sm);
+    margin-top: 4px;
+    display: inline-block;
+}
+
+.quick-agents-footer {
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-top: 1px solid var(--outline-variant);
+    background: var(--surface-variant);
+}
+
+.view-all-agents {
+    display: block;
+    text-align: center;
+    padding: var(--spacing-md);
+    background: var(--primary);
+    color: white;
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.view-all-agents:hover {
+    background: #333333;
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm);
+}
+
+/* Overlay for mobile */
+.quick-agents-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.quick-agents-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
 /* Toast Notifications */
 .toast {
     position: fixed;
@@ -902,6 +1110,24 @@ body {
         margin-top: 0; /* Remove margin since we're positioned below header */
     }
     
+    .header-controls {
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .quick-agent-toggle {
+        flex: 1;
+        margin-right: var(--spacing-md);
+        justify-content: center;
+    }
+    
+    .quick-agents-panel {
+        width: 100%;
+        max-width: 100%;
+        right: 0;
+        left: 0;
+    }
+    
     .agent-title {
         font-size: 24px;
     }
@@ -974,20 +1200,76 @@ body {
             <h1 class="agent-title">Data Analyzer</h1>
             <p class="agent-subtitle">Upload your data file and get AI-powered analysis with advanced insights</p>
         </div>
-        <div class="wallet-card" style="margin-bottom: 0; min-width: 280px; max-width: 280px;">
+        <div class="header-controls">
-            <div class="wallet-header">
+            <!-- Quick Agent Access Toggle -->
-                <h3 class="wallet-title">Your Wallet</h3>
+            <button class="quick-agent-toggle" onclick="toggleQuickAgents()" title="Quick access to other agents">
-                <div class="wallet-icon">💳</div>
+                <span class="toggle-icon">🚀</span>
-            </div>
+                <span class="toggle-text">Other Agents</span>
-            <div class="balance-display">
+            </button>
-                <div class="balance-amount">
+            
-                    <span id="walletBalance">{{ user.wallet_balance|floatformat:2 }}</span> AED
+            <div class="wallet-card" style="margin-bottom: 0; min-width: 280px; max-width: 280px;">
+                <div class="wallet-header">
+                    <h3 class="wallet-title">Your Wallet</h3>
+                    <div class="wallet-icon">💳</div>
+                </div>
+                <div class="balance-display">
+                    <div class="balance-amount">
+                        <span id="walletBalance">{{ user.wallet_balance|floatformat:2 }}</span> AED
+                    </div>
+                    <div class="balance-label">Available Balance</div>
                 </div>
-                <div class="balance-label">Available Balance</div>
             </div>
         </div>
     </div>
 
+    <!-- Quick Agent Access Panel -->
+    <div class="quick-agents-overlay" id="quickAgentsOverlay" onclick="closeQuickAgents()"></div>
+    <div class="quick-agents-panel" id="quickAgentsPanel">
+        <div class="quick-agents-header">
+            <h3>Quick Access to Other Agents</h3>
+            <button class="close-panel" onclick="toggleQuickAgents()">×</button>
+        </div>
+        <div class="quick-agents-grid">
+            <a href="/agents/weather-reporter/" class="quick-agent-card">
+                <div class="agent-icon">🌤️</div>
+                <div class="agent-info">
+                    <h4>Weather Reporter</h4>
+                    <p>Real-time weather info</p>
+                    <span class="agent-price">2.0 AED</span>
+                </div>
+            </a>
+            
+            <a href="/agents/job-posting-generator/" class="quick-agent-card">
+                <div class="agent-icon">💼</div>
+                <div class="agent-info">
+                    <h4>Job Posting Generator</h4>
+                    <p>Create professional job posts</p>
+                    <span class="agent-price">3.0 AED</span>
+                </div>
+            </a>
+            
+            <a href="/agents/social-ads-generator/" class="quick-agent-card">
+                <div class="agent-icon">📱</div>
+                <div class="agent-info">
+                    <h4>Social Ads Generator</h4>
+                    <p>Engaging social media ads</p>
+                    <span class="agent-price">4.0 AED</span>
+                </div>
+            </a>
+            
+            <a href="/agents/five-whys-analyzer/" class="quick-agent-card">
+                <div class="agent-icon">🔍</div>
+                <div class="agent-info">
+                    <h4>Five Whys Analyzer</h4>
+                    <p>Root cause analysis</p>
+                    <span class="agent-price">8.0 AED</span>
+                </div>
+            </a>
+        </div>
+        <div class="quick-agents-footer">
+            <a href="{% url 'core:marketplace' %}" class="view-all-agents">View All Agents →</a>
+        </div>
+    </div>
 
     <!-- Agent Grid -->
     <div class="agent-grid">
@@ -1602,5 +1884,46 @@ function initializeAgent() {
     // Any agent-specific initialization can go here
     console.log('Agent initialized');
 }
+
+// Quick Agent Access Toggle Functions
+function toggleQuickAgents() {
+    const panel = document.getElementById('quickAgentsPanel');
+    const overlay = document.getElementById('quickAgentsOverlay');
+    const toggle = document.querySelector('.quick-agent-toggle');
+    
+    const isActive = panel.classList.contains('active');
+    
+    if (isActive) {
+        // Close panel
+        panel.classList.remove('active');
+        overlay.classList.remove('active');
+        toggle.classList.remove('active');
+        document.body.style.overflow = 'auto';
+    } else {
+        // Open panel
+        panel.classList.add('active');
+        overlay.classList.add('active');
+        toggle.classList.add('active');
+        document.body.style.overflow = 'hidden';
+    }
+}
+
+function closeQuickAgents() {
+    const panel = document.getElementById('quickAgentsPanel');
+    const overlay = document.getElementById('quickAgentsOverlay');
+    const toggle = document.querySelector('.quick-agent-toggle');
+    
+    panel.classList.remove('active');
+    overlay.classList.remove('active');
+    toggle.classList.remove('active');
+    document.body.style.overflow = 'auto';
+}
+
+// Close panel with Escape key
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeQuickAgents();
+    }
+});
 </script>
 {% endblock %}