agent polling fix

data_analyzer/templates/data_analyzer/detail.html

@@ -687,26 +687,51 @@
         }
     }
 
+    // Track polling and results to prevent duplicates
+    let resultsDisplayed = false;
+    let currentPollInterval = null;
+
     // Poll for results
     function pollForResults(requestId) {
         let pollCount = 0;
         const maxPolls = 60; // 60 seconds maximum for data analysis
+        resultsDisplayed = false; // Reset flag
         
-        const pollInterval = setInterval(() => {
+        // Clear any existing polling
+        if (currentPollInterval) {
+            clearInterval(currentPollInterval);
+            currentPollInterval = null;
+        }
+        
+        currentPollInterval = setInterval(() => {
             pollCount++;
             
             fetch(`/agents/data-analyzer/result/${requestId}/`)
-                .then(response => response.json())
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}`);
+                    }
+                    return response.json();
+                })
                 .then(result => {
                     if (result.status === 'completed' || result.status === 'failed') {
-                        clearInterval(pollInterval);
+                        // Stop polling immediately
+                        clearInterval(currentPollInterval);
+                        currentPollInterval = null;
+                        
+                        // Reset UI
                         document.getElementById('processingStatus').style.display = 'none';
                         document.getElementById('processButton').disabled = false;
                         document.getElementById('processButton').innerHTML = '📊 Analyze Data (5.00 AED)';
                         
+                        // Display results only once
+                        if (!resultsDisplayed) {
+                            resultsDisplayed = true;
                             displayResults(result);
+                        }
                     } else if (pollCount >= maxPolls) {
-                        clearInterval(pollInterval);
+                        clearInterval(currentPollInterval);
+                        currentPollInterval = null;
                         document.getElementById('processingStatus').style.display = 'none';
                         document.getElementById('processButton').disabled = false;
                         document.getElementById('processButton').innerHTML = '📊 Analyze Data (5.00 AED)';
@@ -715,13 +740,12 @@
                 })
                 .catch(error => {
                     console.error('Error polling results:', error);
-                    if (pollCount >= maxPolls) {
+                    clearInterval(currentPollInterval);
-                        clearInterval(pollInterval);
+                    currentPollInterval = null;
                     document.getElementById('processingStatus').style.display = 'none';
                     document.getElementById('processButton').disabled = false;
                     document.getElementById('processButton').innerHTML = '📊 Analyze Data (5.00 AED)';
-                        showToast('❌ Network error - please try again', 'error');
+                    showToast('❌ Network error during processing - please try again', 'error');
-                    }
                 });
         }, 1000);
     }
@@ -729,10 +753,10 @@
     
     function updateWalletBalance(newBalance) {
         // Update wallet balance display
-        const balanceElements = document.querySelectorAll('[data-wallet-balance]');
+        const balanceElement = document.getElementById('walletBalance');
-        balanceElements.forEach(element => {
+        if (balanceElement) {
-            element.textContent = `${newBalance.toFixed(2)} AED`;
+            balanceElement.textContent = `${newBalance.toFixed(2)} AED`;
-        });
+        }
         window.currentWalletBalance = newBalance;
     }
     

docs/agent-polling-guide.md

@@ -0,0 +1,320 @@
+# Agent Polling System Guide
+
+This document explains how to use the reusable polling system for NetCop AI agents.
+
+## Overview
+
+The agent polling system provides a standardized way to handle asynchronous requests in agent templates, with proper cleanup, error handling, and user feedback.
+
+## Key Features
+
+- **Automatic cleanup**: Prevents memory leaks and duplicate polling
+- **Error handling**: Handles network errors and timeouts gracefully
+- **Duplicate prevention**: Ensures results are displayed only once
+- **Progressive feedback**: Shows status steps for better UX
+- **Reusable utilities**: Common functions for wallet updates, toasts, etc.
+
+## Basic Usage
+
+### 1. Include the Script
+
+Add to your agent template's `extra_css` block:
+
+```html
+{% block extra_js %}
+<script src="{% static 'js/agent-polling.js' %}"></script>
+<script>
+// Your agent-specific code here
+</script>
+{% endblock %}
+```
+
+### 2. Set Up Polling
+
+```javascript
+// For agents that use async polling
+function startPolling(requestId) {
+    const poller = window.pollingManager.createPoller('myAgent', {
+        requestId: requestId,
+        statusUrl: `/agents/my-agent/status/${requestId}/`,
+        maxPolls: 30,
+        pollInterval: 1000,
+        onComplete: (result) => {
+            AgentUtils.resetUI({
+                processingStatusId: 'processingStatus',
+                processButtonId: 'processButton',
+                resultsId: 'results',
+                buttonText: '🔄 Generate Again (5.00 AED)'
+            });
+            displayResults(result);
+        },
+        onError: (error) => {
+            AgentUtils.resetUI({
+                processingStatusId: 'processingStatus',
+                processButtonId: 'processButton',
+                buttonText: '🔄 Try Again (5.00 AED)'
+            });
+            AgentUtils.showToast('❌ Network error - please try again', 'error');
+        },
+        onTimeout: () => {
+            AgentUtils.resetUI({
+                processingStatusId: 'processingStatus',
+                processButtonId: 'processButton',
+                buttonText: '🔄 Try Again (5.00 AED)'
+            });
+            AgentUtils.showToast('❌ Processing timeout - please try again', 'error');
+        }
+    });
+    
+    poller.start();
+}
+```
+
+### 3. Handle Form Submission
+
+```javascript
+document.getElementById('myForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    // Validation
+    if (!isFormValid()) {
+        AgentUtils.showToast('Please fill in all required fields', 'error');
+        return;
+    }
+    
+    // Authentication check
+    if (!isAuthenticated) {
+        window.location.href = loginUrl;
+        return;
+    }
+    
+    // Balance check
+    if (userBalance < requiredAmount) {
+        AgentUtils.showToast(`Insufficient balance! You need ${requiredAmount} AED.`, 'error');
+        setTimeout(() => window.location.href = walletUrl, 2000);
+        return;
+    }
+    
+    // Clear any existing polling
+    window.pollingManager.stopAll();
+    
+    // Show processing status
+    AgentUtils.showProcessing({
+        processingStatusId: 'processingStatus',
+        processButtonId: 'processButton',
+        resultsId: 'results',
+        processingText: '⏳ Processing...'
+    });
+    
+    // Start status steps
+    const stepper = new StatusStepper([
+        'Analyzing request...',
+        'Processing data...',
+        'Generating results...',
+        'Finalizing output...'
+    ], 'statusText');
+    stepper.start();
+    
+    // Submit form
+    const formData = new FormData(this);
+    
+    fetch(submitUrl, {
+        method: 'POST',
+        body: formData,
+        headers: { 'X-Requested-With': 'XMLHttpRequest' }
+    })
+    .then(response => response.json())
+    .then(result => {
+        stepper.stop();
+        
+        if (result.success && result.request_id) {
+            // Start polling for async agents
+            startPolling(result.request_id);
+        } else {
+            // Handle immediate response
+            AgentUtils.resetUI({
+                processingStatusId: 'processingStatus',
+                processButtonId: 'processButton',
+                buttonText: '🔄 Try Again (5.00 AED)'
+            });
+            
+            if (result.error) {
+                AgentUtils.showToast(`❌ ${result.error}`, 'error');
+            } else {
+                displayResults(result);
+            }
+        }
+    })
+    .catch(error => {
+        stepper.stop();
+        AgentUtils.resetUI({
+            processingStatusId: 'processingStatus',
+            processButtonId: 'processButton',
+            buttonText: '🔄 Try Again (5.00 AED)'
+        });
+        AgentUtils.showToast('❌ Network error - please try again', 'error');
+    });
+});
+```
+
+### 4. Reset Function
+
+```javascript
+function resetForm() {
+    // Stop all polling
+    window.pollingManager.stopAll();
+    
+    // Reset form
+    document.getElementById('myForm').reset();
+    
+    // Reset UI
+    AgentUtils.resetUI({
+        processingStatusId: 'processingStatus',
+        processButtonId: 'processButton',
+        resultsId: 'results',
+        buttonText: '🚀 Generate (5.00 AED)'
+    });
+    
+    AgentUtils.showToast('Form reset! Ready for another request.', 'success');
+}
+```
+
+## API Reference
+
+### AgentPoller Class
+
+```javascript
+const poller = new AgentPoller({
+    requestId: 'string',      // Request ID to poll
+    statusUrl: 'string',      // Status endpoint URL
+    maxPolls: 30,             // Maximum poll attempts
+    pollInterval: 1000,       // Poll interval in ms
+    onComplete: function(result) {},  // Success callback
+    onError: function(error) {},      // Error callback
+    onTimeout: function() {}          // Timeout callback
+});
+```
+
+### PollingManager
+
+```javascript
+// Create and start a poller
+const poller = window.pollingManager.createPoller('pollerId', config);
+poller.start();
+
+// Stop specific poller
+window.pollingManager.stopPoller('pollerId');
+
+// Stop all pollers
+window.pollingManager.stopAll();
+```
+
+### AgentUtils
+
+```javascript
+// Update wallet balance
+AgentUtils.updateWalletBalance(150.00);
+
+// Reset UI elements
+AgentUtils.resetUI({
+    processingStatusId: 'processingStatus',
+    processButtonId: 'processButton',
+    resultsId: 'results',
+    buttonText: 'Process Again'
+});
+
+// Show processing state
+AgentUtils.showProcessing({
+    processingStatusId: 'processingStatus',
+    processButtonId: 'processButton',
+    resultsId: 'results',
+    processingText: '⏳ Working...'
+});
+
+// Show toast notification
+AgentUtils.showToast('Success message', 'success');
+AgentUtils.showToast('Error message', 'error');
+```
+
+### StatusStepper
+
+```javascript
+const stepper = new StatusStepper([
+    'Step 1...',
+    'Step 2...',
+    'Step 3...'
+], 'statusTextElementId', 800); // 800ms interval
+
+stepper.start();
+stepper.stop();
+```
+
+## Migration Guide
+
+### Converting Existing Agents
+
+1. **Include the script** in your template
+2. **Replace polling logic** with `AgentPoller`
+3. **Use `AgentUtils`** for common operations
+4. **Add proper cleanup** in reset functions
+5. **Use `StatusStepper`** for better UX
+
+### Before (old way):
+
+```javascript
+// Old polling code with potential issues
+let pollInterval = setInterval(() => {
+    fetch(statusUrl)
+        .then(response => response.json())
+        .then(result => {
+            if (result.status === 'completed') {
+                clearInterval(pollInterval);
+                displayResults(result);
+            }
+        });
+}, 1000);
+```
+
+### After (new way):
+
+```javascript
+// New robust polling
+const poller = window.pollingManager.createPoller('agent', {
+    requestId: requestId,
+    statusUrl: statusUrl,
+    onComplete: displayResults,
+    onError: handleError,
+    onTimeout: handleTimeout
+});
+poller.start();
+```
+
+## Best Practices
+
+1. **Always stop existing polling** before starting new requests
+2. **Use unique poller IDs** for different agents/features
+3. **Provide clear error messages** to users
+4. **Set appropriate timeouts** based on expected processing time
+5. **Clean up resources** in reset functions
+6. **Use progressive status steps** for better UX
+7. **Prevent duplicate submissions** with proper state management
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Multiple polling instances**: Use `pollingManager.stopAll()` before starting new requests
+2. **Memory leaks**: Always call `stop()` or use the manager's cleanup methods
+3. **Duplicate results**: The system prevents this automatically
+4. **Network errors**: Handled automatically with proper user feedback
+
+### Debug Mode
+
+Enable debug logging:
+
+```javascript
+// In development
+window.agentPollingDebug = true;
+```
+
+This will log polling activities to the console for debugging.

job_posting_generator/templates/job_posting_generator/detail.html

@@ -4,82 +4,116 @@
 {% block title %}Job Posting Generator Agent - NetCop AI Hub{% endblock %}
 
 {% block extra_css %}
+<!-- Google Fonts - Simple -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="{% static 'css/themes.css' %}">
 <style>
+    /* Modern Typography & Theme System */
+    :root {
+        /* Color System */
+        --bg-color: #ffffff;
+        --text-color: #1a1a1a;
+        --primary-color: #000000;
+        --card-bg: #f8f9fa;
+        --border-color: #e0e0e0;
+        --hover-color: #f0f0f0;
+        --accent-color: #666666;
+        --success-color: #10b981;
+        --error-color: #ef4444;
+        --warning-color: #f59e0b;
+        
+        /* Simple Typography */
+        --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        
+        /* Small, Crisp Font Sizes */
+        --text-xs: 11px;
+        --text-sm: 13px;
+        --text-base: 14px;
+        --text-lg: 16px;
+        --text-xl: 18px;
+        
+        /* Simple Spacing */
+        --space-xs: 4px;
+        --space-sm: 8px;
+        --space-md: 12px;
+        --space-lg: 16px;
+        --space-xl: 24px;
+        
+        /* Simple Properties */
+        --radius: 6px;
+        --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        --transition: 150ms ease;
+    }
+
+    body {
+        font-family: var(--font-primary);
+        font-size: var(--text-base);
+        line-height: 1.4;
+        font-weight: 400;
+    }
+
     .job-posting-page {
-        background: var(--gradient-hero);
+        background: var(--bg-color);
         min-height: calc(100vh - 80px);
-        padding: clamp(20px, 5vw, 40px);
+        padding: var(--space-lg);
         width: 100vw;
         margin-left: calc(-50vw + 50%);
+        color: var(--text-color);
     }
     
     .job-posting-container {
-        max-width: 1280px;
+        max-width: 1200px;
         margin: 0 auto;
         display: grid;
-        grid-template-columns: 1fr 400px;
+        grid-template-columns: 1fr 350px;
-        gap: 24px;
+        gap: var(--space-xl);
         align-items: start;
     }
     
     .card {
-        background: rgba(255, 255, 255, 0.9);
+        background: var(--card-bg);
-        border-radius: 16px;
+        border-radius: var(--radius);
-        padding: 24px;
+        padding: var(--space-lg);
-        border: 1px solid rgba(255, 255, 255, 0.3);
+        border: 1px solid var(--border-color);
-        backdrop-filter: blur(20px);
+        margin-bottom: var(--space-lg);
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-        margin-bottom: 24px;
     }
     
     .section-title {
-        font-size: 18px;
+        font-size: var(--text-lg);
         font-weight: 600;
-        color: var(--text-primary);
+        color: var(--primary-color);
-        margin-bottom: 16px;
+        margin-bottom: var(--space-md);
-        border-bottom: 2px solid var(--border-light);
+        border-bottom: 1px solid var(--border-color);
-        padding-bottom: 8px;
+        padding-bottom: var(--space-sm);
     }
     
     .section-container {
-        margin-bottom: 24px;
+        margin-bottom: var(--space-lg);
-        padding: 16px;
+        padding: var(--space-md);
-        border-radius: 12px;
+        border-radius: var(--radius);
-        border: 1px solid var(--border-light);
+        border: 1px solid var(--border-color);
-    }
-    
-    .basic-info {
-        background: var(--background-light);
-    }
-    
-    .requirements {
-        background: rgba(59, 130, 246, 0.1);
-    }
-    
-    .additional {
-        background: rgba(16, 185, 129, 0.1);
     }
     
     .section-subtitle {
-        font-size: 14px;
+        font-size: var(--text-sm);
         font-weight: 600;
-        color: var(--text-secondary);
+        color: var(--accent-color);
-        margin-bottom: 16px;
+        margin-bottom: var(--space-md);
         text-transform: uppercase;
-        letter-spacing: 0.5px;
     }
     
     .form-input, .form-textarea {
         width: 100%;
-        padding: 12px 16px;
+        padding: var(--space-md);
-        border: 2px solid var(--border-medium);
+        border: 1px solid var(--border-color);
-        border-radius: 12px;
+        border-radius: var(--radius);
-        font-size: 16px;
+        font-size: var(--text-base);
-        transition: border-color 0.2s ease;
+        margin-bottom: var(--space-md);
-        min-height: 44px;
+        background: white;
-        margin-bottom: 16px;
+        color: var(--text-color);
-        font-family: inherit;
-        background: var(--background-light);
     }
     
     .form-textarea {
@@ -89,182 +123,271 @@
     
     .form-input:focus, .form-textarea:focus {
         outline: none;
-        border-color: var(--warning-orange);
+        border-color: var(--primary-color);
-        background: white;
-        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
     }
     
     .form-label {
         display: block;
-        margin-bottom: 8px;
+        margin-bottom: var(--space-xs);
-        font-size: 14px;
+        font-size: var(--text-sm);
-        font-weight: 600;
+        font-weight: 500;
-        color: var(--text-primary);
+        color: var(--text-color);
     }
     
     .processing-status {
-        padding: 20px;
+        padding: var(--space-lg);
-        background: rgba(245, 158, 11, 0.1);
+        background: var(--card-bg);
-        border: 2px solid var(--warning-orange);
+        border: 1px solid var(--primary-color);
-        border-radius: 12px;
+        border-radius: var(--radius);
-        color: var(--warning-orange);
+        color: var(--primary-color);
-        font-weight: 600;
+        font-weight: 500;
         text-align: center;
-        margin-bottom: 24px;
+        margin-bottom: var(--space-lg);
         display: none;
     }
     
     .processing-status .status-icon {
-        font-size: 32px;
+        font-size: var(--text-xl);
-        margin-bottom: 12px;
+        margin-bottom: var(--space-sm);
-        animation: pulse 2s infinite;
+        display: block;
     }
 
-    @keyframes pulse {
+    .processing-status .status-text {
-        0%, 100% { transform: scale(1); }
+        font-size: var(--text-base);
-        50% { transform: scale(1.1); }
+        font-weight: 500;
+        margin-bottom: var(--space-xs);
+    }
+
+    .processing-status .status-detail {
+        font-size: var(--text-sm);
+        opacity: 0.7;
     }
     
     .results-card {
-        background: rgba(255, 255, 255, 0.9);
+        background: var(--card-bg);
-        border-radius: 16px;
+        border-radius: var(--radius);
-        padding: 24px;
+        padding: var(--space-lg);
-        border: 1px solid rgba(255, 255, 255, 0.3);
+        border: 1px solid var(--border-color);
-        backdrop-filter: blur(20px);
+        margin-top: var(--space-lg);
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-        margin-top: 24px;
         display: none;
     }
     
     .results-header {
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: var(--space-sm);
-        margin-bottom: 20px;
+        margin-bottom: var(--space-md);
-        padding-bottom: 16px;
+        padding-bottom: var(--space-sm);
-        border-bottom: 1px solid var(--border-light);
+        border-bottom: 1px solid var(--border-color);
     }
     
     .results-content {
-        background: var(--background-page);
+        background: white;
-        border: 1px solid var(--border-light);
+        border: 1px solid var(--border-color);
-        border-radius: 12px;
+        border-radius: var(--radius);
-        padding: 24px;
+        padding: var(--space-lg);
-        margin-bottom: 20px;
+        margin-bottom: var(--space-md);
-        white-space: pre-line;
+        line-height: 1.6;
-        line-height: 1.7;
+        color: var(--text-color);
-        color: var(--text-primary);
+        font-size: var(--text-base);
-        font-size: 15px;
+    }
+
+    /* Markdown styling for results */
+    .results-content h1,
+    .results-content h2,
+    .results-content h3 {
+        color: var(--primary-color);
+        font-weight: 600;
+        margin: var(--space-lg) 0 var(--space-sm) 0;
+        line-height: 1.3;
+    }
+
+    .results-content h1 {
+        font-size: var(--text-xl);
+        border-bottom: 2px solid var(--border-color);
+        padding-bottom: var(--space-xs);
+    }
+
+    .results-content h2 {
+        font-size: var(--text-lg);
+        margin-top: var(--space-xl);
+    }
+
+    .results-content h3 {
+        font-size: var(--text-base);
+        font-weight: 600;
+    }
+
+    .results-content p {
+        margin: var(--space-sm) 0;
+        line-height: 1.6;
+    }
+
+    .results-content ul,
+    .results-content ol {
+        margin: var(--space-sm) 0;
+        padding-left: var(--space-xl);
+    }
+
+    .results-content li {
+        margin: var(--space-xs) 0;
+        line-height: 1.5;
+    }
+
+    .results-content strong {
+        font-weight: 600;
+        color: var(--primary-color);
+    }
+
+    .results-content em {
+        font-style: italic;
+        color: var(--accent-color);
+    }
+
+    .results-content code {
+        background: var(--card-bg);
+        padding: 2px 4px;
+        border-radius: 3px;
+        font-size: var(--text-sm);
+        color: var(--primary-color);
+    }
+
+    .results-content blockquote {
+        border-left: 3px solid var(--primary-color);
+        margin: var(--space-md) 0;
+        padding-left: var(--space-md);
+        color: var(--accent-color);
+        font-style: italic;
+    }
+
+    .results-content hr {
+        border: none;
+        border-top: 1px solid var(--border-color);
+        margin: var(--space-lg) 0;
     }
     
     .action-buttons {
         display: flex;
-        gap: 12px;
+        gap: var(--space-sm);
-        margin-top: 20px;
+        margin-top: var(--space-md);
         flex-wrap: wrap;
     }
     
     .btn {
-        padding: 16px 32px;
+        padding: var(--space-md);
         border: none;
-        border-radius: 12px;
+        border-radius: var(--radius);
-        font-weight: 600;
+        font-weight: 500;
         cursor: pointer;
-        font-size: 16px;
+        font-size: var(--text-sm);
-        min-height: 48px;
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 8px;
+        gap: var(--space-xs);
-        transition: transform 0.1s ease;
         text-decoration: none;
+        transition: all var(--transition);
+        flex: 1;
+        min-width: 120px;
     }
     
     .btn-primary {
-        background: var(--warning-orange);
+        background: var(--primary-color);
         color: white;
-        flex: 1;
+        box-shadow: var(--shadow);
-        min-width: 120px;
     }
     
     .btn-secondary {
-        background: var(--background-subtle);
+        background: var(--card-bg);
-        color: var(--text-primary);
+        color: var(--primary-color);
-        border: 2px solid var(--border-medium);
+        border: 1px solid var(--border-color);
-        flex: 1;
-        min-width: 120px;
     }
     
     .btn:hover:not(:disabled) {
         transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+
+    .btn-primary:hover:not(:disabled) {
+        background: var(--accent-color);
+    }
+
+    .btn-secondary:hover:not(:disabled) {
+        border-color: var(--primary-color);
+        background: var(--hover-color);
+    }
+    
+    .btn:active {
+        transform: translateY(0);
     }
     
     .btn:disabled {
-        background: var(--text-muted);
+        background: var(--accent-color);
         cursor: not-allowed;
+        opacity: 0.5;
         transform: none;
     }
     
     .wallet-section {
         position: sticky;
-        top: 20px;
+        top: var(--space-lg);
     }
     
     .wallet-balance {
-        font-size: 28px;
+        font-size: var(--text-lg);
-        font-weight: 700;
+        font-weight: 600;
-        color: var(--text-primary);
+        color: var(--primary-color);
-        margin-bottom: 8px;
+        margin-bottom: var(--space-xs);
     }
     
     .balance-label {
-        font-size: 16px;
+        font-size: var(--text-sm);
-        color: var(--text-secondary);
+        color: var(--accent-color);
-        margin-bottom: 20px;
+        margin-bottom: var(--space-lg);
     }
     
     .process-btn {
         width: 100%;
-        margin-bottom: 12px;
+        margin-bottom: var(--space-sm);
     }
     
     .insufficient-balance {
-        background: rgba(239, 68, 68, 0.1);
+        background: var(--card-bg);
-        border: 1px solid rgba(239, 68, 68, 0.3);
+        border: 1px solid var(--border-color);
-        color: var(--error-red);
+        color: var(--primary-color);
-        padding: 12px;
+        padding: var(--space-md);
-        border-radius: 8px;
+        border-radius: var(--radius);
         text-align: center;
-        font-size: 14px;
+        font-size: var(--text-sm);
-        margin-bottom: 12px;
+        margin-bottom: var(--space-sm);
+        font-weight: 500;
     }
     
     .usage-info {
-        padding: 16px;
+        padding: var(--space-md);
-        background: rgba(245, 158, 11, 0.1);
+        background: var(--card-bg);
-        border-radius: 12px;
+        border-radius: var(--radius);
-        border: 1px solid rgba(245, 158, 11, 0.2);
+        border: 1px solid var(--border-color);
     }
     
     .usage-info h4 {
-        margin: 0 0 8px 0;
+        margin: 0 0 var(--space-sm) 0;
-        font-size: 14px;
+        font-size: var(--text-sm);
         font-weight: 600;
-        color: var(--warning-orange);
+        color: var(--primary-color);
     }
     
     .usage-info ul {
         margin: 0;
-        font-size: 12px;
+        font-size: var(--text-xs);
-        color: var(--text-primary);
+        color: var(--text-color);
         line-height: 1.4;
         list-style: none;
         padding-left: 0;
     }
     
     .usage-info li {
-        margin: 4px 0;
+        margin: var(--space-xs) 0;
-        padding-left: 16px;
+        padding-left: var(--space-md);
         position: relative;
     }
     
@@ -272,13 +395,19 @@
         content: "•";
         position: absolute;
         left: 0;
-        color: var(--warning-orange);
+        color: var(--primary-color);
     }
     
-    /* Mobile optimizations */
+    /* Simple Responsive Design */
     @media (max-width: 768px) {
         .job-posting-container {
             grid-template-columns: 1fr;
+            gap: var(--space-lg);
+        }
+        
+        .wallet-section {
+            position: static;
+            order: -1;
         }
         
         .action-buttons {
@@ -288,6 +417,33 @@
         .btn {
             width: 100%;
         }
+
+        .form-input, .form-textarea {
+            font-size: 16px; /* Prevent zoom on iOS */
+        }
+    }
+
+    /* Form Help Text */
+    .form-help {
+        font-size: var(--text-xs);
+        color: var(--accent-color);
+        margin-top: var(--space-xs);
+        opacity: 0.7;
+    }
+
+    .form-group {
+        margin-bottom: var(--space-md);
+    }
+
+    .form-group.error .form-input,
+    .form-group.error .form-textarea {
+        border-color: var(--error-color);
+    }
+
+    /* Simple loading state for buttons */
+    .btn.loading {
+        opacity: 0.6;
+        pointer-events: none;
     }
 </style>
 {% endblock %}
@@ -317,22 +473,32 @@
                     <div class="section-container basic-info">
                         <h4 class="section-subtitle">Basic Information</h4>
                         
-                        <label class="form-label">💼 Job Title *</label>
+                        <div class="form-group">
-                        <input type="text" name="job_title" id="job_title" class="form-input" placeholder="e.g., Senior Software Engineer" required>
+                            <label class="form-label" for="job_title">💼 Job Title *</label>
+                            <input type="text" name="job_title" id="job_title" class="form-input" placeholder="e.g., Senior Software Engineer" required aria-describedby="job_title_help">
+                            <div id="job_title_help" class="form-help">Enter the exact position title you're hiring for</div>
+                        </div>
                         
-                        <label class="form-label">🏢 Company Name *</label>
+                        <div class="form-group">
-                        <input type="text" name="company_name" id="company_name" class="form-input" placeholder="e.g., TechCorp Inc." required>
+                            <label class="form-label" for="company_name">🏢 Company Name *</label>
+                            <input type="text" name="company_name" id="company_name" class="form-input" placeholder="e.g., TechCorp Inc." required aria-describedby="company_name_help">
+                            <div id="company_name_help" class="form-help">Your organization's official name</div>
+                        </div>
                         
-                        <label class="form-label">📝 Job Description *</label>
+                        <div class="form-group">
-                        <textarea name="job_description" id="job_description" class="form-textarea" placeholder="Describe the role, key requirements, company culture, etc." rows="4" required></textarea>
+                            <label class="form-label" for="job_description">📝 Job Description *</label>
+                            <textarea name="job_description" id="job_description" class="form-textarea" placeholder="Describe the role, key requirements, company culture, etc." rows="4" required aria-describedby="job_description_help"></textarea>
+                            <div id="job_description_help" class="form-help">Provide detailed information about the role and what you're looking for</div>
+                        </div>
                     </div>
                     
                     <!-- Job Requirements Section -->
                     <div class="section-container requirements">
                         <h4 class="section-subtitle">Job Requirements</h4>
                         
-                        <label class="form-label">📊 Seniority Level *</label>
+                        <div class="form-group">
-                        <select name="seniority_level" id="seniority_level" class="form-input" required>
+                            <label class="form-label" for="seniority_level">📊 Seniority Level *</label>
+                            <select name="seniority_level" id="seniority_level" class="form-input" required aria-describedby="seniority_help">
                                 <option value="">Select seniority level...</option>
                                 <option value="entry">Entry Level</option>
                                 <option value="mid">Mid Level</option>
@@ -340,9 +506,12 @@
                                 <option value="lead">Lead/Principal</option>
                                 <option value="executive">Executive/C-Level</option>
                             </select>
+                            <div id="seniority_help" class="form-help">Choose the experience level required for this position</div>
+                        </div>
                         
-                        <label class="form-label">📋 Contract Type *</label>
+                        <div class="form-group">
-                        <select name="contract_type" id="contract_type" class="form-input" required>
+                            <label class="form-label" for="contract_type">📋 Contract Type *</label>
+                            <select name="contract_type" id="contract_type" class="form-input" required aria-describedby="contract_help">
                                 <option value="">Select contract type...</option>
                                 <option value="full-time">Full-time</option>
                                 <option value="part-time">Part-time</option>
@@ -350,9 +519,14 @@
                                 <option value="freelance">Freelance</option>
                                 <option value="internship">Internship</option>
                             </select>
+                            <div id="contract_help" class="form-help">Select the type of employment relationship</div>
+                        </div>
                         
-                        <label class="form-label">📍 Location *</label>
+                        <div class="form-group">
-                        <input type="text" name="location" id="location" class="form-input" placeholder="e.g., Dubai, UAE or Remote" required>
+                            <label class="form-label" for="location">📍 Location *</label>
+                            <input type="text" name="location" id="location" class="form-input" placeholder="e.g., Dubai, UAE or Remote" required aria-describedby="location_help">
+                            <div id="location_help" class="form-help">Specify where the role is based or if it's remote</div>
+                        </div>
                     </div>
                     
                     <!-- Additional Details Section -->
@@ -380,16 +554,16 @@
             <!-- Processing Status -->
             <div id="processingStatus" class="processing-status">
                 <div class="status-icon">💼</div>
-                <div style="font-weight: 600; color: var(--warning-orange);">Creating Job Posting...</div>
+                <div class="status-text">Creating Job Posting...</div>
-                <div style="font-size: 14px; color: var(--warning-orange); margin-top: 8px;" id="statusText">Crafting professional job description...</div>
+                <div class="status-detail" id="statusText">Crafting professional job description...</div>
             </div>
             
             <!-- Results -->
             <div id="jobResults" class="results-card">
                 <div class="results-header">
                     <div style="font-size: 24px;">✅</div>
-                    <h3 style="font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0;">Generated Job Posting</h3>
+                    <h3 style="font-size: 20px; font-weight: 600; color: var(--primary-color); margin: 0;">Generated Job Posting</h3>
-                    <div style="background: var(--warning-orange); color: white; padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; margin-left: auto;">✅ Complete</div>
+                    <div style="background: var(--primary-color); color: white; padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; margin-left: auto;">✅ Complete</div>
                 </div>
                 
                 <div class="results-content" id="jobContent">
@@ -399,7 +573,7 @@
                 <div class="action-buttons">
                     <button onclick="copyJobPosting()" class="btn btn-primary">📋 Copy Job Posting</button>
                     <button onclick="downloadJobPosting()" class="btn btn-secondary">💾 Download Posting</button>
-                    <button onclick="resetForm()" class="btn" style="background: var(--warning-orange); color: white;">🔄 Create Another</button>
+                    <button onclick="resetForm()" class="btn" style="background: var(--primary-color); color: white;">🔄 Create Another</button>
                 </div>
             </div>
         </div>
@@ -493,43 +667,128 @@
     function generateJobText() {
         const content = document.querySelector('#jobContent');
         if (content) {
-            return content.textContent || content.innerText || '';
+            // Get text content without HTML tags for clean copying
+            return content.innerText || content.textContent || '';
         }
         return 'No job posting content available';
     }
 
     // Reset form for creating another job posting
     function resetForm() {
+        // Clear any active polling
+        if (currentPollInterval) {
+            clearInterval(currentPollInterval);
+            currentPollInterval = null;
+        }
+        resultsDisplayed = false;
+        
+        // Reset form and UI
         document.getElementById('jobPostingForm').reset();
         document.getElementById('jobResults').style.display = 'none';
         document.getElementById('processingStatus').style.display = 'none';
-        document.getElementById('processButton').disabled = false;
+        const processButton = document.getElementById('processButton');
-        document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+        processButton.disabled = false;
+        processButton.classList.remove('loading');
+        processButton.innerHTML = '💼 Generate Job Posting (4.00 AED)';
+        
         showToast('Form reset! Ready for another job posting.', 'success');
     }
     
-    // Simple toast notification
+    // Toast management - prevent all duplicates
-    function showToast(message, type = 'info') {
+    let toastTimeout = null;
-        const toast = document.createElement('div');
+    let lastToastMessage = '';
-        toast.style.cssText = `
+    let currentToast = null;
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 12px 20px;
-            border-radius: 8px;
-            color: white;
-            font-weight: 600;
-            z-index: 1000;
-            ${type === 'success' ? 'background: var(--success-green);' : 'background: var(--error-red);'}
-        `;
-        toast.textContent = message;
-        document.body.appendChild(toast);
     
-        setTimeout(() => {
+    function showToast(message, type = 'info') {
-            toast.remove();
+        // Prevent duplicate messages
-        }, 3000);
+        if (message === lastToastMessage && currentToast) {
+            return;
         }
         
+        // Clear existing toast
+        if (currentToast) {
+            currentToast.remove();
+            currentToast = null;
+        }
+        
+        // Clear existing timeout
+        if (toastTimeout) {
+            clearTimeout(toastTimeout);
+        }
+        
+        // Store message to prevent duplicates
+        lastToastMessage = message;
+        
+        // Create new toast
+        currentToast = document.createElement('div');
+        currentToast.style.cssText = `
+            position: fixed;
+            top: 16px;
+            right: 16px;
+            padding: 8px 12px;
+            border-radius: 4px;
+            color: white;
+            font-size: 13px;
+            z-index: 1000;
+            max-width: 300px;
+            ${type === 'success' ? 'background: var(--primary-color);' : 'background: var(--accent-color);'}
+        `;
+        currentToast.textContent = message;
+        document.body.appendChild(currentToast);
+        
+        // Auto remove after 2 seconds
+        toastTimeout = setTimeout(() => {
+            if (currentToast) {
+                currentToast.remove();
+                currentToast = null;
+            }
+            lastToastMessage = '';
+        }, 2000);
+    }
+
+    // Form validation with visual feedback
+    function validateField(field) {
+        const isValid = field.value.trim() !== '';
+        const container = field.closest('.form-group') || field.parentElement;
+        
+        if (isValid) {
+            field.style.borderColor = 'var(--success-color)';
+            container.classList.remove('error');
+        } else {
+            field.style.borderColor = 'var(--error-color)';
+            container.classList.add('error');
+        }
+        
+        return isValid;
+    }
+
+    // Progressive form enhancement
+    function initializeFormEnhancements() {
+        const requiredFields = document.querySelectorAll('[required]');
+        
+        requiredFields.forEach(field => {
+            // Real-time validation
+            field.addEventListener('blur', () => validateField(field));
+            
+            // Reset validation on focus
+            field.addEventListener('focus', () => {
+                field.style.borderColor = 'var(--primary-color)';
+                field.closest('.form-group')?.classList.remove('error');
+            });
+            
+            // Auto-resize textareas
+            if (field.tagName === 'TEXTAREA') {
+                field.addEventListener('input', function() {
+                    this.style.height = 'auto';
+                    this.style.height = Math.max(120, this.scrollHeight) + 'px';
+                });
+            }
+        });
+    }
+
+    // Initialize on page load
+    document.addEventListener('DOMContentLoaded', initializeFormEnhancements);
+
     // Update wallet balance display
     function updateWalletBalance(newBalance) {
         const balanceElements = document.querySelectorAll('[data-wallet-balance]');
@@ -539,13 +798,37 @@
         window.currentWalletBalance = newBalance;
     }
 
-    // Display job posting results
+    // Simple markdown to HTML converter
+    function parseMarkdown(text) {
+        return text
+            // Headers
+            .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+            .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+            .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+            // Bold
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            // Italic
+            .replace(/\*(.*?)\*/g, '<em>$1</em>')
+            // Lists
+            .replace(/^- (.*$)/gm, '<li>$1</li>')
+            .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
+            // Line breaks
+            .replace(/\n\n/g, '</p><p>')
+            .replace(/\n/g, '<br>');
+    }
+
+    // Display job posting results with markdown formatting
     function displayResults(result) {
         const resultsContainer = document.getElementById('jobResults');
         const contentContainer = document.getElementById('jobContent');
         
         if (result.success && result.status === 'completed') {
-            contentContainer.textContent = result.content || result.job_posting_content || result.output_text || 'Job posting generated successfully!';
+            const content = result.content || result.job_posting_content || result.output_text || 'Job posting generated successfully!';
+            
+            // Parse and display as HTML with markdown formatting
+            const formattedContent = parseMarkdown(content);
+            contentContainer.innerHTML = '<p>' + formattedContent + '</p>';
+            
             resultsContainer.style.display = 'block';
             
             // Update wallet balance if provided
@@ -559,39 +842,65 @@
         }
     }
 
+    // Track if results have been displayed to prevent duplicates
+    let resultsDisplayed = false;
+    let currentPollInterval = null;
+
     // Poll for results
     function pollForResults(requestId) {
         let pollCount = 0;
         const maxPolls = 30; // 30 seconds maximum
+        resultsDisplayed = false; // Reset flag
         
-        const pollInterval = setInterval(() => {
+        // Clear any existing polling
+        if (currentPollInterval) {
+            clearInterval(currentPollInterval);
+        }
+        
+        currentPollInterval = setInterval(() => {
             pollCount++;
             
             fetch(`/agents/job-posting-generator/status/${requestId}/`)
                 .then(response => response.json())
                 .then(result => {
                     if (result.status === 'completed' || result.status === 'failed') {
-                        clearInterval(pollInterval);
+                        // Stop polling immediately
-                        document.getElementById('processingStatus').style.display = 'none';
+                        clearInterval(currentPollInterval);
-                        document.getElementById('processButton').disabled = false;
+                        currentPollInterval = null;
-                        document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
                         
-                        displayResults(result);
+                        // Reset UI
-                    } else if (pollCount >= maxPolls) {
-                        clearInterval(pollInterval);
                         document.getElementById('processingStatus').style.display = 'none';
-                        document.getElementById('processButton').disabled = false;
+                        const processButton = document.getElementById('processButton');
-                        document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                        processButton.disabled = false;
+                        processButton.classList.remove('loading');
+                        processButton.innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                        
+                        // Display results only once
+                        if (!resultsDisplayed) {
+                            resultsDisplayed = true;
+                            displayResults(result);
+                        }
+                    } else if (pollCount >= maxPolls) {
+                        clearInterval(currentPollInterval);
+                        currentPollInterval = null;
+                        document.getElementById('processingStatus').style.display = 'none';
+                        const processButton = document.getElementById('processButton');
+                        processButton.disabled = false;
+                        processButton.classList.remove('loading');
+                        processButton.innerHTML = '💼 Generate Job Posting (4.00 AED)';
                         showToast('❌ Processing timeout - please try again', 'error');
                     }
                 })
                 .catch(error => {
                     console.error('Error polling results:', error);
                     if (pollCount >= maxPolls) {
-                        clearInterval(pollInterval);
+                        clearInterval(currentPollInterval);
+                        currentPollInterval = null;
                         document.getElementById('processingStatus').style.display = 'none';
-                        document.getElementById('processButton').disabled = false;
+                        const processButton = document.getElementById('processButton');
-                        document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                        processButton.disabled = false;
+                        processButton.classList.remove('loading');
+                        processButton.innerHTML = '💼 Generate Job Posting (4.00 AED)';
                         showToast('❌ Network error - please try again', 'error');
                     }
                 });
@@ -607,6 +916,12 @@
             return;
         }
         
+        // Prevent multiple submissions
+        const processButton = document.getElementById('processButton');
+        if (processButton.disabled) {
+            return; // Already processing
+        }
+        
         // Check user authentication
         {% if not user.is_authenticated %}
         window.location.href = "{% url 'authentication:login' %}";
@@ -623,10 +938,18 @@
             return;
         }
 
-        // Show processing status with steps
+        // Clear any existing polling and reset flags
+        if (currentPollInterval) {
+            clearInterval(currentPollInterval);
+            currentPollInterval = null;
+        }
+        resultsDisplayed = false;
+
+        // Show processing status with enhanced loading
         document.getElementById('processingStatus').style.display = 'block';
-        document.getElementById('processButton').disabled = true;
+        processButton.disabled = true;
-        document.getElementById('processButton').innerHTML = '⏳ Processing...';
+        processButton.classList.add('loading');
+        processButton.innerHTML = '⏳ Processing...';
         document.getElementById('jobResults').style.display = 'none';
         
         const steps = [
@@ -666,8 +989,10 @@
             } else {
                 // Handle immediate response
                 document.getElementById('processingStatus').style.display = 'none';
-                document.getElementById('processButton').disabled = false;
+                const processButton = document.getElementById('processButton');
-                document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                processButton.disabled = false;
+                processButton.classList.remove('loading');
+                processButton.innerHTML = '💼 Generate Job Posting (4.00 AED)';
                 
                 if (result.error) {
                     showToast(`❌ ${result.error}`, 'error');
@@ -680,8 +1005,10 @@
             clearInterval(stepInterval);
             console.error('Error:', error);
             document.getElementById('processingStatus').style.display = 'none';
-            document.getElementById('processButton').disabled = false;
+            const processButton = document.getElementById('processButton');
-            document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+            processButton.disabled = false;
+            processButton.classList.remove('loading');
+            processButton.innerHTML = '💼 Generate Job Posting (4.00 AED)';
             showToast('❌ Network error - please try again', 'error');
         });
     });

social_ads_generator/templates/social_ads_generator/detail.html

@@ -473,6 +473,14 @@
 
     // Reset form for creating another ad
     function resetForm() {
+        // Clear any active polling
+        if (currentPollInterval) {
+            clearInterval(currentPollInterval);
+            currentPollInterval = null;
+        }
+        resultsDisplayed = false;
+        
+        // Reset form and UI
         document.getElementById('socialAdsForm').reset();
         document.getElementById('adResults').style.display = 'none';
         document.getElementById('processingStatus').style.display = 'none';
@@ -532,26 +540,51 @@
         }
     }
 
+    // Track polling and results to prevent duplicates
+    let resultsDisplayed = false;
+    let currentPollInterval = null;
+
     // Poll for results
     function pollForResults(requestId) {
         let pollCount = 0;
         const maxPolls = 30; // 30 seconds maximum
+        resultsDisplayed = false; // Reset flag
         
-        const pollInterval = setInterval(() => {
+        // Clear any existing polling
+        if (currentPollInterval) {
+            clearInterval(currentPollInterval);
+            currentPollInterval = null;
+        }
+        
+        currentPollInterval = setInterval(() => {
             pollCount++;
             
             fetch(`/agents/social-ads-generator/status/${requestId}/`)
-                .then(response => response.json())
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}`);
+                    }
+                    return response.json();
+                })
                 .then(result => {
                     if (result.status === 'completed' || result.status === 'failed') {
-                        clearInterval(pollInterval);
+                        // Stop polling immediately
+                        clearInterval(currentPollInterval);
+                        currentPollInterval = null;
+                        
+                        // Reset UI
                         document.getElementById('processingStatus').style.display = 'none';
                         document.getElementById('processButton').disabled = false;
                         document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)';
                         
+                        // Display results only once
+                        if (!resultsDisplayed) {
+                            resultsDisplayed = true;
                             displayResults(result);
+                        }
                     } else if (pollCount >= maxPolls) {
-                        clearInterval(pollInterval);
+                        clearInterval(currentPollInterval);
+                        currentPollInterval = null;
                         document.getElementById('processingStatus').style.display = 'none';
                         document.getElementById('processButton').disabled = false;
                         document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)';
@@ -560,13 +593,12 @@
                 })
                 .catch(error => {
                     console.error('Error polling results:', error);
-                    if (pollCount >= maxPolls) {
+                    clearInterval(currentPollInterval);
-                        clearInterval(pollInterval);
+                    currentPollInterval = null;
                     document.getElementById('processingStatus').style.display = 'none';
                     document.getElementById('processButton').disabled = false;
                     document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)';
-                        showToast('❌ Network error - please try again', 'error');
+                    showToast('❌ Network error during processing - please try again', 'error');
-                    }
                 });
         }, 1000);
     }
@@ -596,6 +628,13 @@
             return;
         }
 
+        // Clear any existing polling and reset flags
+        if (currentPollInterval) {
+            clearInterval(currentPollInterval);
+            currentPollInterval = null;
+        }
+        resultsDisplayed = false;
+
         // Show processing status with steps
         document.getElementById('processingStatus').style.display = 'block';
         document.getElementById('processButton').disabled = true;

static/css/themes.css

@@ -0,0 +1,231 @@
+/* Lightweight Theme System for Job Posting Generator */
+/* No frameworks - pure CSS variables for clean theme switching */
+
+/* Base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    line-height: 1.6;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: all 0.3s ease;
+}
+
+/* Theme 1: Black & White (Grayscale Minimal) */
+.theme-black-white {
+    --bg-color: #ffffff;
+    --text-color: #1a1a1a;
+    --primary-color: #000000;
+    --card-bg: #f8f9fa;
+    --border-color: #e0e0e0;
+    --hover-color: #f0f0f0;
+    --accent-color: #666666;
+}
+
+/* Theme 2: Blue (Calm and Modern) */
+.theme-blue {
+    --bg-color: #f8fafc;
+    --text-color: #1e293b;
+    --primary-color: #3b82f6;
+    --card-bg: #ffffff;
+    --border-color: #e2e8f0;
+    --hover-color: #f1f5f9;
+    --accent-color: #64748b;
+}
+
+/* Theme 3: Orange (Vibrant and Friendly) */
+.theme-orange {
+    --bg-color: #fffbf7;
+    --text-color: #1c1917;
+    --primary-color: #ea580c;
+    --card-bg: #ffffff;
+    --border-color: #fed7aa;
+    --hover-color: #fff7ed;
+    --accent-color: #a3a3a3;
+}
+
+/* Component Styles Using CSS Variables */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.header {
+    background-color: var(--card-bg);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    margin-bottom: 2rem;
+}
+
+.header h1 {
+    color: var(--primary-color);
+    font-size: 2rem;
+    font-weight: 700;
+    text-align: center;
+}
+
+.card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
+}
+
+.card:hover {
+    background-color: var(--hover-color);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    display: inline-block;
+}
+
+.button:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.button-secondary {
+    background-color: var(--card-bg);
+    color: var(--primary-color);
+    border: 1px solid var(--border-color);
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-label {
+    display: block;
+    color: var(--text-color);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.form-input,
+.form-textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    font-size: 1rem;
+    transition: all 0.2s ease;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.theme-selector {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+}
+
+.theme-selector h3 {
+    margin-bottom: 0.5rem;
+    color: var(--text-color);
+    font-size: 0.9rem;
+}
+
+.theme-buttons {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.theme-btn {
+    width: 30px;
+    height: 30px;
+    border: 2px solid var(--border-color);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.theme-btn.black-white {
+    background: linear-gradient(45deg, #000 50%, #fff 50%);
+}
+
+.theme-btn.blue {
+    background: #3b82f6;
+}
+
+.theme-btn.orange {
+    background: #ea580c;
+}
+
+.theme-btn:hover {
+    transform: scale(1.1);
+    border-color: var(--primary-color);
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.text-accent {
+    color: var(--accent-color);
+}
+
+.text-primary {
+    color: var(--primary-color);
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+    
+    .theme-selector {
+        position: relative;
+        top: auto;
+        right: auto;
+        margin-bottom: 2rem;
+    }
+    
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}

static/js/agent-polling.js

@@ -0,0 +1,243 @@
+/**
+ * Reusable polling system for NetCop AI agents
+ * Handles async request polling with proper cleanup and error handling
+ */
+
+class AgentPoller {
+    constructor(config) {
+        this.requestId = config.requestId;
+        this.statusUrl = config.statusUrl;
+        this.maxPolls = config.maxPolls || 30;
+        this.pollInterval = config.pollInterval || 1000;
+        this.onComplete = config.onComplete;
+        this.onError = config.onError;
+        this.onTimeout = config.onTimeout;
+        
+        // Internal state
+        this.pollCount = 0;
+        this.currentInterval = null;
+        this.isPolling = false;
+        this.resultsDisplayed = false;
+    }
+
+    start() {
+        if (this.isPolling) {
+            console.warn('Poller is already running');
+            return;
+        }
+
+        this.isPolling = true;
+        this.pollCount = 0;
+        this.resultsDisplayed = false;
+
+        // Clear any existing interval
+        this.stop();
+
+        this.currentInterval = setInterval(() => {
+            this.pollCount++;
+            
+            fetch(this.statusUrl)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(result => {
+                    if (result.status === 'completed' || result.status === 'failed') {
+                        this.stop();
+                        
+                        // Display results only once
+                        if (!this.resultsDisplayed) {
+                            this.resultsDisplayed = true;
+                            if (this.onComplete) {
+                                this.onComplete(result);
+                            }
+                        }
+                    } else if (this.pollCount >= this.maxPolls) {
+                        this.stop();
+                        if (this.onTimeout) {
+                            this.onTimeout();
+                        }
+                    }
+                })
+                .catch(error => {
+                    console.error('Error polling results:', error);
+                    this.stop();
+                    if (this.onError) {
+                        this.onError(error);
+                    }
+                });
+        }, this.pollInterval);
+    }
+
+    stop() {
+        if (this.currentInterval) {
+            clearInterval(this.currentInterval);
+            this.currentInterval = null;
+        }
+        this.isPolling = false;
+    }
+
+    isRunning() {
+        return this.isPolling;
+    }
+}
+
+/**
+ * Global polling manager to handle multiple pollers
+ */
+class PollingManager {
+    constructor() {
+        this.pollers = new Map();
+    }
+
+    createPoller(id, config) {
+        // Stop existing poller if any
+        this.stopPoller(id);
+        
+        const poller = new AgentPoller(config);
+        this.pollers.set(id, poller);
+        return poller;
+    }
+
+    stopPoller(id) {
+        const poller = this.pollers.get(id);
+        if (poller) {
+            poller.stop();
+            this.pollers.delete(id);
+        }
+    }
+
+    stopAll() {
+        this.pollers.forEach(poller => poller.stop());
+        this.pollers.clear();
+    }
+}
+
+// Global instance
+window.pollingManager = new PollingManager();
+
+/**
+ * Utility functions for common agent UI operations
+ */
+window.AgentUtils = {
+    // Update wallet balance display
+    updateWalletBalance(newBalance) {
+        const balanceElement = document.querySelector('[data-wallet-balance]') || 
+                              document.getElementById('walletBalance');
+        if (balanceElement) {
+            balanceElement.textContent = `${newBalance.toFixed(2)} AED`;
+        }
+        window.currentWalletBalance = newBalance;
+    },
+
+    // Reset UI to initial state
+    resetUI(config) {
+        const elements = {
+            processingStatus: document.getElementById(config.processingStatusId || 'processingStatus'),
+            processButton: document.getElementById(config.processButtonId || 'processButton'),
+            results: document.getElementById(config.resultsId)
+        };
+
+        if (elements.processingStatus) {
+            elements.processingStatus.style.display = 'none';
+        }
+        
+        if (elements.processButton) {
+            elements.processButton.disabled = false;
+            elements.processButton.innerHTML = config.buttonText || 'Process';
+        }
+
+        if (elements.results) {
+            elements.results.style.display = 'none';
+        }
+    },
+
+    // Show processing status
+    showProcessing(config) {
+        const elements = {
+            processingStatus: document.getElementById(config.processingStatusId || 'processingStatus'),
+            processButton: document.getElementById(config.processButtonId || 'processButton'),
+            results: document.getElementById(config.resultsId)
+        };
+
+        if (elements.processingStatus) {
+            elements.processingStatus.style.display = 'block';
+        }
+        
+        if (elements.processButton) {
+            elements.processButton.disabled = true;
+            elements.processButton.innerHTML = config.processingText || '⏳ Processing...';
+        }
+
+        if (elements.results) {
+            elements.results.style.display = 'none';
+        }
+    },
+
+    // Show toast notification
+    showToast(message, type = 'info') {
+        // Prevent duplicate toasts
+        const existingToast = document.querySelector('.agent-toast');
+        if (existingToast) {
+            existingToast.remove();
+        }
+
+        const toast = document.createElement('div');
+        toast.className = 'agent-toast';
+        toast.style.cssText = `
+            position: fixed;
+            top: 16px;
+            right: 16px;
+            padding: 8px 12px;
+            border-radius: 4px;
+            color: white;
+            font-size: 13px;
+            z-index: 1000;
+            max-width: 300px;
+            font-weight: 500;
+            ${type === 'success' ? 'background: #10b981;' : 'background: #ef4444;'}
+        `;
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.remove();
+            }
+        }, 2000);
+    }
+};
+
+/**
+ * Progressive status steps for better UX
+ */
+window.StatusStepper = class {
+    constructor(steps, statusTextElementId, interval = 800) {
+        this.steps = steps;
+        this.statusTextElement = document.getElementById(statusTextElementId);
+        this.interval = interval;
+        this.currentStep = 0;
+        this.stepInterval = null;
+    }
+
+    start() {
+        this.currentStep = 0;
+        this.stepInterval = setInterval(() => {
+            if (this.currentStep < this.steps.length && this.statusTextElement) {
+                this.statusTextElement.textContent = this.steps[this.currentStep];
+                this.currentStep++;
+            } else {
+                this.stop();
+            }
+        }, this.interval);
+    }
+
+    stop() {
+        if (this.stepInterval) {
+            clearInterval(this.stepInterval);
+            this.stepInterval = null;
+        }
+    }
+};

weather_reporter/templates/weather_reporter/detail.html

@@ -476,8 +476,15 @@
         return 'No weather data available';
     }
 
+    // Track processing state to prevent duplicates
+    let isProcessing = false;
+
     // Reset form for creating another report
     function resetForm() {
+        // Reset processing state
+        isProcessing = false;
+        
+        // Reset form and UI
         document.getElementById('weatherForm').reset();
         document.getElementById('weatherResults').style.display = 'none';
         document.getElementById('processingStatus').style.display = 'none';
@@ -593,6 +600,11 @@
             return;
         }
         
+        // Prevent duplicate submissions
+        if (isProcessing) {
+            return;
+        }
+        
         // Check user authentication
         {% if not user.is_authenticated %}
         window.location.href = "{% url 'authentication:login' %}";
@@ -609,6 +621,9 @@
             return;
         }
 
+        // Set processing state
+        isProcessing = true;
+
         // Show processing status with steps
         document.getElementById('processingStatus').style.display = 'block';
         document.getElementById('processButton').disabled = true;
@@ -646,6 +661,10 @@
         .then(response => response.json())
         .then(result => {
             clearInterval(stepInterval);
+            
+            // Reset processing state
+            isProcessing = false;
+            
             // Handle immediate response (API-based agent)
             document.getElementById('processingStatus').style.display = 'none';
             document.getElementById('processButton').disabled = false;
@@ -662,6 +681,10 @@
         .catch(error => {
             clearInterval(stepInterval);
             console.error('Error:', error);
+            
+            // Reset processing state
+            isProcessing = false;
+            
             document.getElementById('processingStatus').style.display = 'none';
             document.getElementById('processButton').disabled = false;
             document.getElementById('processButton').innerHTML = '🌤️ Get Weather Report (2.00 AED)';