Add comprehensive agent creation system with template prototype

- Create AGENT_CREATION_GUIDE.md with complete step-by-step instructions
- Add agent_template_prototype.html with full CSS framework and JavaScript utilities
- Implement Email Writer agent as demonstration of template system
- Update CLAUDE.md with agent creation workflow and template guidance
- Include Django patterns, form handling, status polling, and marketplace integration
- Provide reusable components: wallet card, processing status, quick access panel
- Ensure responsive design, accessibility, and consistent user experience

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

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

AGENT_CREATION_GUIDE.md

@@ -0,0 +1,487 @@
+# Agent Creation Guide using Template Prototype
+
+This guide provides step-by-step instructions for creating new Django agents using the `agent_template_prototype.html` template system.
+
+## Overview
+
+The NetCop Hub uses a standardized template prototype (`agent_template_prototype.html`) that provides:
+- Complete CSS framework with custom properties
+- JavaScript utilities for common functions
+- Consistent UI components (wallet card, processing status, quick access panel)
+- Responsive design and accessibility features
+- Toast notifications and status management
+
+## Quick Start
+
+### 1. Create Django Agent Structure
+
+```bash
+# Use the built-in Django command
+python manage.py create_agent
+
+# Or create manually:
+mkdir your_agent_name
+cd your_agent_name
+touch __init__.py models.py views.py processor.py urls.py admin.py
+mkdir templates
+mkdir templates/your_agent_name
+```
+
+### 2. Required Files Checklist
+
+- `__init__.py` - Empty Python package file
+- `models.py` - Request model with base fields + agent-specific fields
+- `processor.py` - Inherits from BaseAgentProcessor
+- `views.py` - Detail view with form handling and status polling
+- `urls.py` - URL patterns for detail and status endpoints
+- `admin.py` - Django admin configuration
+- `templates/your_agent_name/detail.html` - Converted template from prototype
+
+## Template Conversion Process
+
+### Step 1: Copy Base Structure from Prototype
+
+Start with the `agent_template_prototype.html` and convert to Django template format:
+
+```html
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Your Agent Name - NetCop Hub{% endblock %}
+
+{% block content %}
+<div class="agent-container">
+    <!-- Copy CSS from prototype within <style> tags -->
+    <style>
+        /* All CSS from agent_template_prototype.html lines 8-632 */
+    </style>
+    
+    <!-- Copy HTML structure -->
+    <!-- Agent Header -->
+    <div class="agent-header">
+        <div>
+            <h1 class="agent-title">Your Agent Name</h1>
+            <p class="agent-subtitle">Description of what your agent does</p>
+        </div>
+        <div class="header-controls">
+            {% include 'components/wallet_card.html' %}
+        </div>
+    </div>
+    
+    <!-- Main agent content -->
+    <!-- ... -->
+</div>
+
+<!-- Copy JavaScript from prototype -->
+<script>
+    /* All JavaScript from agent_template_prototype.html lines 808-967 */
+</script>
+{% endblock %}
+```
+
+### Step 2: Replace Placeholder Sections
+
+Replace the placeholder sections with your agent-specific content:
+
+**Agent Grid Section (lines 704-714 in prototype):**
+```html
+<div class="agent-grid">
+    <div class="agent-widget widget-large">
+        <div class="widget-header">
+            <h3 class="widget-title">
+                <span class="widget-icon">🎯</span>
+                Your Agent Form
+            </h3>
+        </div>
+        <div class="widget-content">
+            {% if user.is_authenticated %}
+                <form method="post" id="agentForm">
+                    {% csrf_token %}
+                    <!-- Your form fields here -->
+                </form>
+            {% else %}
+                <p>Please <a href="{% url 'authentication:login' %}">login</a> to use this agent.</p>
+            {% endif %}
+        </div>
+    </div>
+    
+    <!-- How It Works Widget (keep as-is from prototype) -->
+    <div class="agent-widget widget-small">
+        <!-- Copy from prototype lines 716-744 -->
+    </div>
+</div>
+```
+
+**Results Section (lines 763-774 in prototype):**
+```html
+<div class="agent-grid">
+    <div class="agent-widget widget-wide" id="resultsSection" style="display: none;">
+        <div class="widget-header">
+            <h3 class="widget-title">
+                <span class="widget-icon">📊</span>
+                Results
+            </h3>
+        </div>
+        <div class="widget-content">
+            <div id="resultsContent">
+                <!-- Agent-specific results display -->
+            </div>
+            <div style="display: flex; gap: var(--spacing-md); margin-top: var(--spacing-lg);">
+                <button onclick="copyToClipboard(document.getElementById('resultsContent').textContent)">
+                    📋 Copy Results
+                </button>
+                <button onclick="downloadAsFile(document.getElementById('resultsContent').textContent, 'agent_results.txt')">
+                    💾 Download
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+## Django Implementation Patterns
+
+### Models Structure
+
+Follow this pattern for all agent models:
+
+```python
+from django.db import models
+from django.contrib.auth import get_user_model
+import uuid
+
+User = get_user_model()
+
+class YourAgentRequest(models.Model):
+    """Your Agent request model"""
+    
+    # Base request fields (required for all agents)
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    status = models.CharField(max_length=20, choices=[
+        ('pending', 'Pending'),
+        ('processing', 'Processing'),
+        ('completed', 'Completed'),
+        ('failed', 'Failed'),
+    ], default='pending')
+    cost = models.DecimalField(max_digits=10, decimal_places=2, default=3.00)
+    created_at = models.DateTimeField(auto_now_add=True)
+    processed_at = models.DateTimeField(null=True, blank=True)
+    
+    # Agent-specific fields
+    your_field = models.CharField(max_length=200, help_text="Field description")
+    # ... more fields
+    
+    # Result fields
+    result_content = models.TextField(blank=True, help_text="Generated results")
+    
+    class Meta:
+        verbose_name = "Your Agent Request"
+        verbose_name_plural = "Your Agent Requests"
+        ordering = ['-created_at']
+        
+    def __str__(self):
+        return f"Your Agent - {self.your_field}"
+```
+
+### Views Pattern
+
+```python
+from django.shortcuts import render
+from django.contrib.auth.decorators import login_required
+from django.http import JsonResponse
+from django.views.decorators.http import require_http_methods
+from .models import YourAgentRequest
+from .processor import YourAgentProcessor
+
+@login_required
+def your_agent_detail(request):
+    if request.method == 'POST':
+        # Form validation
+        if not request.POST.get('required_field'):
+            return JsonResponse({'error': 'Required field is missing'}, status=400)
+        
+        # Check wallet balance
+        if request.user.wallet_balance < 3.00:
+            return JsonResponse({'error': 'Insufficient balance'}, status=400)
+        
+        # Create request
+        agent_request = YourAgentRequest.objects.create(
+            user=request.user,
+            your_field=request.POST.get('your_field'),
+            # ... other fields
+        )
+        
+        # Process with agent
+        processor = YourAgentProcessor()
+        processor.process_request(agent_request)
+        
+        return JsonResponse({'success': True, 'request_id': str(agent_request.id)})
+    
+    return render(request, 'your_agent/detail.html', {
+        'agent_cost': 3.00
+    })
+
+@require_http_methods(["GET"])
+def your_agent_status(request, request_id):
+    try:
+        agent_request = YourAgentRequest.objects.get(id=request_id, user=request.user)
+        return JsonResponse({
+            'status': agent_request.status,
+            'result': agent_request.result_content if agent_request.status == 'completed' else None
+        })
+    except YourAgentRequest.DoesNotExist:
+        return JsonResponse({'error': 'Request not found'}, status=404)
+```
+
+### Processor Pattern
+
+```python
+from agent_base.processors import BaseAgentProcessor
+
+class YourAgentProcessor(BaseAgentProcessor):
+    def get_cost(self):
+        return 3.00
+    
+    def prepare_webhook_data(self, request_obj):
+        return {
+            'your_field': request_obj.your_field,
+            # ... other fields
+        }
+    
+    def process_webhook_response(self, request_obj, response_data):
+        if response_data.get('success'):
+            request_obj.result_content = response_data.get('result', '')
+            request_obj.status = 'completed'
+        else:
+            request_obj.status = 'failed'
+        
+        request_obj.save()
+```
+
+## Form Integration with Template
+
+### HTML Form Structure
+
+```html
+<form method="post" id="agentForm">
+    {% csrf_token %}
+    
+    <div style="display: flex; flex-direction: column; gap: var(--spacing-md);">
+        <div>
+            <label for="your_field">Your Field:</label>
+            <input type="text" id="your_field" name="your_field" required>
+        </div>
+        
+        <!-- More form fields -->
+        
+        <button type="submit" 
+                style="padding: var(--spacing-md); background: var(--primary); color: white; border: none; border-radius: var(--radius-md); cursor: pointer;">
+            Process Request ({{ agent_cost }} AED)
+        </button>
+    </div>
+</form>
+```
+
+### JavaScript Form Handling
+
+Add this to your template's JavaScript section:
+
+```javascript
+// Form submission handling
+document.getElementById('agentForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    const formData = new FormData(this);
+    
+    // Show processing status
+    showProcessing();
+    
+    fetch('', {
+        method: 'POST',
+        body: formData,
+        headers: {
+            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            pollStatus(data.request_id);
+        } else {
+            hideProcessing();
+            showToast(data.error || 'Request failed', 'error');
+        }
+    })
+    .catch(error => {
+        hideProcessing();
+        showToast('Network error occurred', 'error');
+    });
+});
+
+// Status polling
+function pollStatus(requestId) {
+    const poll = setInterval(() => {
+        fetch(`status/${requestId}/`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'completed') {
+                    clearInterval(poll);
+                    hideProcessing();
+                    displayResults(data.result);
+                } else if (data.status === 'failed') {
+                    clearInterval(poll);
+                    hideProcessing();
+                    showToast('Processing failed', 'error');
+                }
+            });
+    }, 2000);
+}
+
+// Display results
+function displayResults(result) {
+    document.getElementById('resultsContent').textContent = result;
+    document.getElementById('resultsSection').style.display = 'block';
+    showToast('Results ready!', 'success');
+}
+```
+
+## URL Configuration
+
+### App URLs (`your_agent/urls.py`)
+
+```python
+from django.urls import path
+from . import views
+
+app_name = 'your_agent'
+
+urlpatterns = [
+    path('', views.your_agent_detail, name='detail'),
+    path('status/<uuid:request_id>/', views.your_agent_status, name='status'),
+]
+```
+
+### Main URLs (add to `netcop_hub/urls.py`)
+
+```python
+path('agents/your-agent-slug/', include('your_agent.urls')),
+```
+
+### Settings (add to `INSTALLED_APPS`)
+
+```python
+INSTALLED_APPS = [
+    # ... existing apps
+    'your_agent',
+]
+```
+
+## Database and Marketplace Integration
+
+### 1. Create and Apply Migrations
+
+```bash
+python manage.py makemigrations your_agent
+python manage.py migrate
+```
+
+### 2. Add to Marketplace Catalog
+
+```bash
+python manage.py shell
+```
+
+```python
+from agent_base.models import BaseAgent
+
+BaseAgent.objects.create(
+    name="Your Agent Name",
+    slug="your-agent-slug",
+    description="Description of what your agent does...",
+    category="content",  # or appropriate category
+    price=3.00,
+    icon="🎯",  # appropriate emoji
+    agent_type="webhook"
+)
+```
+
+## Common Components Reference
+
+### Available CSS Components
+
+- **Layout**: `.agent-container`, `.agent-header`, `.agent-grid`
+- **Widgets**: `.agent-widget`, `.widget-header`, `.widget-title`, `.widget-content`
+- **Sizes**: `.widget-large`, `.widget-small`, `.widget-wide`
+- **Wallet**: `.wallet-card` (use `{% include 'components/wallet_card.html' %}`)
+- **Status**: `.processing-status`, `.status-icon`, `.status-title`
+- **Utilities**: `.info-list`, `.placeholder-section`
+
+### Available JavaScript Functions
+
+- `showToast(message, type)` - Display notifications
+- `showProcessing()` / `hideProcessing()` - Processing status
+- `copyToClipboard(text, message)` - Copy functionality
+- `downloadAsFile(text, filename, message)` - Download functionality
+- `toggleQuickAgents()` - Quick access panel
+- `updateWalletBalance(balance)` - Update wallet display
+
+## Testing and Verification
+
+### 1. Django Check
+
+```bash
+python manage.py check
+```
+
+### 2. URL Resolution Test
+
+```bash
+python manage.py shell
+```
+
+```python
+from django.urls import reverse
+print(reverse('your_agent:detail'))
+```
+
+### 3. Agent Marketplace Test
+
+Visit `/marketplace/` to verify your agent appears in the catalog.
+
+## Best Practices
+
+1. **Always inherit CSS and JavaScript** from the prototype - don't modify the template utilities
+2. **Use consistent naming** - follow the existing patterns for models, views, and URLs
+3. **Preserve accessibility** - keep ARIA attributes and keyboard navigation
+4. **Test responsive design** - verify mobile functionality
+5. **Follow security practices** - use CSRF tokens, validate inputs, check permissions
+6. **Maintain consistent pricing** - use decimal values with 2 places
+7. **Handle errors gracefully** - provide meaningful error messages via toast notifications
+
+## Troubleshooting
+
+### Common Issues
+
+1. **CSS not loading**: Ensure all CSS from prototype is copied within `<style>` tags
+2. **JavaScript errors**: Check that all utility functions are included
+3. **Form submission fails**: Verify CSRF token and POST data validation
+4. **Agent not in marketplace**: Check BaseAgent database entry and migrations
+5. **Template not found**: Verify template directory structure matches app name
+
+### Debug Commands
+
+```bash
+# Check database
+python manage.py check_db
+
+# Shell debugging
+python manage.py shell
+
+# View agent catalog
+python manage.py shell
+>>> from agent_base.models import BaseAgent
+>>> BaseAgent.objects.all()
+```
+
+This guide ensures consistent, maintainable agent creation using the proven template prototype system.

CLAUDE.md

@@ -171,21 +171,41 @@ Required environment variables (see `.env.example`):
 - Stripe keys for payment processing
 - Email configuration for password reset
 
+### Agent Creation with Template Prototype
+
+**Quick Agent Creation:**
+- Use `agent_template_prototype.html` as foundation for all new agents
+- Follow detailed guide in `AGENT_CREATION_GUIDE.md`
+- Template provides complete CSS framework, JavaScript utilities, and UI components
+- Ensures consistent user experience across all agents
+
 ### Development Workflow
 
 1. **Adding New Agent:**
    - Use `python manage.py create_agent` command
    - Follow existing agent patterns (inherit from `BaseAgentProcessor`)
+   - **Convert `agent_template_prototype.html` to Django template** - see `AGENT_CREATION_GUIDE.md`
    - Add URL routing in main `urls.py`
    - Agent will automatically appear in marketplace via `BaseAgent` model
 
-2. **Modifying Templates:**
+2. **Template Development:**
-   - Check existing components in `templates/components/`
+   - **ALWAYS use `agent_template_prototype.html` as starting point**
-   - Follow CSS variable system defined in `base.css`
+   - Copy all CSS (lines 8-632) and JavaScript (lines 808-967) from prototype
-   - Use `.hidden` utility class instead of inline `style="display:none"`
+   - Replace placeholder sections with agent-specific content
-   - Respect app-specific template organization (core, agent_base, wallet, etc.)
+   - Use existing components: wallet card, processing status, quick access panel
+   - Follow responsive design patterns and accessibility features
 
-3. **Database Changes:**
+3. **Agent Template Structure:**
+   ```
+   templates/agent_name/detail.html:
+   - Copy complete CSS framework from prototype
+   - Replace "Agent Grid Section" with your form
+   - Replace "Results Section" with your results display  
+   - Keep "How It Works" widget and all JavaScript utilities
+   - Preserve responsive design and accessibility features
+   ```
+
+4. **Database Changes:**
    - Always run migrations after model changes
    - Use `check_db` command to verify configuration
    - Test with `populate_agents` to ensure agent catalog works

agent_template_prototype.html

@@ -0,0 +1,969 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agent Frontend Template Prototype</title>
+    <style>
+        /* Agent Frontend Template - Common Components CSS */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+        * {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary: #000000;
+            --surface: #ffffff;
+            --surface-variant: #f8fafc;
+            --background: #f3f4f6;
+            --outline: #e4e7eb;
+            --outline-variant: #e1e4e7;
+            --on-surface: #1a1a1a;
+            --on-surface-variant: #6b7280;
+            --success: #10b981;
+            --error: #ef4444;
+            --radius-sm: 8px;
+            --radius-md: 12px;
+            --radius-lg: 16px;
+            --spacing-xs: 4px;
+            --spacing-sm: 8px;
+            --spacing-md: 16px;
+            --spacing-lg: 24px;
+            --spacing-xl: 32px;
+            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+            --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
+        }
+
+        html {
+            scrollbar-gutter: stable;
+        }
+
+        body {
+            background: var(--background);
+            color: var(--on-surface);
+            line-height: 1.5;
+            font-weight: 400;
+            margin: 0;
+            padding: 0;
+        }
+
+        /* Layout */
+        .agent-container {
+            margin: 0 auto;
+            padding: var(--spacing-lg);
+            max-width: 1600px;
+        }
+
+        .agent-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-xl);
+        }
+
+        .header-controls {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-lg);
+        }
+
+        .agent-grid {
+            display: flex;
+            gap: var(--spacing-lg);
+            align-items: flex-start;
+            flex-wrap: wrap;
+            margin-bottom: var(--spacing-lg);
+        }
+
+        /* Typography */
+        .agent-title {
+            font-size: 32px;
+            font-weight: 700;
+            color: var(--on-surface);
+            margin: 0;
+            letter-spacing: -0.5px;
+        }
+
+        .agent-subtitle {
+            font-size: 16px;
+            color: var(--on-surface-variant);
+            margin: 4px 0 0 0;
+        }
+
+        /* Widgets */
+        .agent-widget {
+            background: var(--surface);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-xl);
+            border: 1px solid var(--outline-variant);
+            box-shadow: var(--shadow-sm);
+            transition: all 0.2s ease;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .widget-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-lg);
+            padding-bottom: var(--spacing-md);
+            border-bottom: 1px solid var(--outline-variant);
+        }
+
+        .widget-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--on-surface);
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+        }
+
+        .widget-icon {
+            font-size: 20px;
+            padding: 6px;
+            border-radius: var(--radius-sm);
+            background: var(--surface-variant);
+        }
+
+        .widget-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-md);
+        }
+
+        /* Widget Sizes */
+        .widget-large {
+            flex: 1;
+            min-width: 400px;
+        }
+
+        .widget-small {
+            flex: 0 0 280px;
+        }
+
+        .widget-wide {
+            flex: 1 1 100%;
+            width: 100%;
+        }
+
+        /* Wallet Card */
+        .wallet-card {
+            background: linear-gradient(135deg, #000000 0%, #333333 100%);
+            color: white;
+            border-radius: var(--radius-md);
+            padding: var(--spacing-md);
+            border: none;
+            box-shadow: var(--shadow-md);
+            position: relative;
+            overflow: hidden;
+            margin-bottom: 0;
+            min-height: auto;
+        }
+
+        .wallet-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100px;
+            height: 100px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            transform: translate(30px, -30px);
+        }
+
+        .wallet-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-sm);
+        }
+
+        .wallet-title {
+            font-size: 14px;
+            font-weight: 600;
+            margin: 0;
+            opacity: 0.9;
+        }
+
+        .wallet-icon {
+            font-size: 20px;
+        }
+
+        .balance-display {
+            margin-bottom: 0;
+        }
+
+        .balance-amount {
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 1;
+            margin-bottom: 0;
+            letter-spacing: -0.5px;
+        }
+
+        .balance-label {
+            font-size: 12px;
+            opacity: 0.8;
+            font-weight: 400;
+        }
+
+        .wallet-topup-btn {
+            width: 100%;
+            padding: 8px 16px;
+            background: linear-gradient(135deg, #4f46e5, #7c3aed);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            margin-top: 12px;
+        }
+
+        .wallet-topup-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-sm);
+        }
+
+        /* Processing Status */
+        .processing-status {
+            background: var(--surface);
+            border: 1px solid var(--outline-variant);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-xl);
+            text-align: center;
+            display: none;
+        }
+
+        .processing-status.active {
+            display: block;
+        }
+
+        .status-icon {
+            font-size: 48px;
+            margin-bottom: var(--spacing-md);
+            animation: pulse 2s infinite;
+        }
+
+        .status-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--on-surface);
+            margin-bottom: var(--spacing-sm);
+        }
+
+        .status-text {
+            font-size: 14px;
+            color: var(--on-surface-variant);
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        /* Quick Agent Access 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;
+            width: 100%;
+            justify-content: center;
+        }
+
+        .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: min(400px, 90vw);
+            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;
+        }
+
+        /* Placeholder Sections */
+        .placeholder-section {
+            background: var(--surface);
+            border: 2px dashed var(--outline);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-xl);
+            text-align: center;
+            color: var(--on-surface-variant);
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: var(--spacing-lg);
+        }
+
+        .placeholder-title {
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: var(--spacing-sm);
+            color: var(--on-surface);
+        }
+
+        .placeholder-description {
+            font-size: 14px;
+            line-height: 1.5;
+            max-width: 400px;
+        }
+
+        .placeholder-example {
+            background: var(--surface-variant);
+            border-radius: var(--radius-sm);
+            padding: var(--spacing-sm);
+            margin-top: var(--spacing-md);
+            font-size: 12px;
+            font-family: monospace;
+            color: var(--on-surface-variant);
+        }
+
+        /* Info List - For How It Works */
+        .info-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            counter-reset: step-counter;
+        }
+
+        .info-list li {
+            padding: var(--spacing-sm) 0;
+            color: var(--on-surface-variant);
+            font-size: 14px;
+            border-bottom: 1px solid var(--outline-variant);
+            position: relative;
+            padding-left: var(--spacing-lg);
+        }
+
+        .info-list li:last-child {
+            border-bottom: none;
+        }
+
+        .info-list li::before {
+            content: counter(step-counter);
+            counter-increment: step-counter;
+            position: absolute;
+            left: 0;
+            top: var(--spacing-sm);
+            background: var(--primary);
+            color: white;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: 600;
+        }
+
+        /* Toast Notifications */
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: var(--surface);
+            border: 1px solid var(--outline);
+            border-radius: var(--radius-md);
+            padding: var(--spacing-md) var(--spacing-lg);
+            box-shadow: var(--shadow-lg);
+            z-index: 1000;
+            max-width: 400px;
+            font-size: 14px;
+            font-weight: 500;
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast.success {
+            border-color: var(--success);
+            background: #f0fdf4;
+            color: #16a34a;
+        }
+
+        .toast.error {
+            border-color: var(--error);
+            background: #fef2f2;
+            color: #dc2626;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .agent-container {
+                padding: var(--spacing-md);
+            }
+            
+            .agent-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: var(--spacing-sm);
+            }
+            
+            .header-controls {
+                width: 100%;
+                justify-content: space-between;
+            }
+            
+            .agent-title {
+                font-size: 24px;
+            }
+            
+            .agent-grid {
+                flex-direction: column;
+                gap: var(--spacing-md);
+            }
+            
+            .widget-large,
+            .widget-small {
+                min-width: auto;
+                flex: none;
+            }
+            
+            .balance-amount {
+                font-size: 20px;
+            }
+            
+            .quick-agents-panel {
+                width: 100%;
+                max-width: 100%;
+                right: 0;
+                left: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="agent-container">
+        <!-- Agent Header Component -->
+        <div class="agent-header">
+            <div>
+                <h1 class="agent-title">Sample Agent Title</h1>
+                <p class="agent-subtitle">This is the agent subtitle describing what this agent does</p>
+            </div>
+            <div class="header-controls">
+                <!-- Wallet Card Component -->
+                <div class="wallet-card widget-small">
+                    <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">25.50</span> AED
+                        </div>
+                        <div class="balance-label">Available Balance</div>
+                    </div>
+                    <button type="button" class="wallet-topup-btn" onclick="showToast('Top-up feature demo!', 'success')">
+                        💳 Top Up Wallet
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Quick Agent Access Panel Overlay -->
+        <div class="quick-agents-overlay" id="quickAgentsOverlay" onclick="closeQuickAgents()"></div>
+
+        <!-- Quick Agent Access Panel -->
+        <div class="quick-agents-panel" id="quickAgentsPanel">
+            <div class="quick-agents-header">
+                <h3>Quick Access</h3>
+                <button class="close-panel" onclick="closeQuickAgents()" aria-label="Close panel">×</button>
+            </div>
+            <div class="quick-agents-grid">
+                <!-- Sample Agent Cards -->
+                <a href="#" class="quick-agent-card">
+                    <div class="agent-icon">🌤️</div>
+                    <div class="agent-info">
+                        <h4>Weather Reporter</h4>
+                        <p>Get real-time weather data</p>
+                        <span class="agent-price">2.00 AED</span>
+                    </div>
+                </a>
+                <a href="#" class="quick-agent-card">
+                    <div class="agent-icon">📊</div>
+                    <div class="agent-info">
+                        <h4>Data Analyzer</h4>
+                        <p>AI-powered data analysis</p>
+                        <span class="agent-price">5.00 AED</span>
+                    </div>
+                </a>
+                <a href="#" class="quick-agent-card">
+                    <div class="agent-icon">💼</div>
+                    <div class="agent-info">
+                        <h4>Job Posting Generator</h4>
+                        <p>Create professional job postings</p>
+                        <span class="agent-price">4.00 AED</span>
+                    </div>
+                </a>
+            </div>
+            <div class="quick-agents-footer">
+                <a href="#" class="view-all-agents">View All Agents</a>
+            </div>
+        </div>
+
+        <!-- Agent Grid - PLACEHOLDER FOR AGENT-SPECIFIC CONTENT -->
+        <div class="agent-grid">
+            <div class="placeholder-section widget-large" style="flex: 1; margin-right: var(--spacing-lg);">
+                <div class="placeholder-title">🎯 Agent Grid Section</div>
+                <div class="placeholder-description">
+                    This section is where each agent will place their unique form inputs, configuration options, and interaction elements.
+                </div>
+                <div class="placeholder-example">
+                    Examples: File upload forms, text inputs, dropdowns, radio buttons, etc.
+                </div>
+            </div>
+
+            <!-- How It Works Widget - Common Pattern -->
+            <div class="agent-widget widget-small" style="min-width: min(280px, 100%); max-width: min(280px, 100%); margin-left: auto;">
+                <div class="widget-header">
+                    <h3 class="widget-title">
+                        <span class="widget-icon">ℹ️</span>
+                        How It Works
+                    </h3>
+                </div>
+                <div class="widget-content">
+                    <ol class="info-list">
+                        <li>Enter your requirements</li>
+                        <li>Configure options</li>
+                        <li>Process with AI</li>
+                        <li>Get results instantly</li>
+                    </ol>
+                    
+                    <!-- Quick Agents Toggle Button -->
+                    <button class="quick-agent-toggle" onclick="toggleQuickAgents()" 
+                            title="Quick access to other agents"
+                            aria-label="Open quick access panel for other AI agents"
+                            aria-expanded="false"
+                            aria-controls="quickAgentsPanel"
+                            style="margin-top: var(--spacing-md);">
+                        <span class="toggle-icon" aria-hidden="true">🚀</span>
+                        <span class="toggle-text">Explore Other Agents</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Processing Status Component -->
+        <div class="agent-grid">
+            <div id="processingStatus" class="agent-widget widget-wide processing-status">
+                <div class="widget-header">
+                    <h3 class="widget-title">
+                        <span class="widget-icon">⏳</span>
+                        Processing Status
+                    </h3>
+                </div>
+                <div class="widget-content" style="text-align: center;">
+                    <div class="status-icon">⏳</div>
+                    <div class="status-title">Processing your request...</div>
+                    <div class="status-text" id="statusText">Please wait while we analyze your data...</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Results Section - PLACEHOLDER FOR AGENT-SPECIFIC RESULTS -->
+        <div class="agent-grid">
+            <div class="placeholder-section widget-wide">
+                <div class="placeholder-title">📊 Results Section</div>
+                <div class="placeholder-description">
+                    This section is where each agent will display their specific results format, content structure, and action buttons.
+                </div>
+                <div class="placeholder-example">
+                    Examples: Formatted reports, analysis results, generated content, download buttons, etc.
+                </div>
+            </div>
+        </div>
+
+        <!-- Demo Controls -->
+        <div class="agent-grid" style="margin-top: var(--spacing-xl); border-top: 1px solid var(--outline-variant); padding-top: var(--spacing-lg);">
+            <div class="agent-widget widget-wide">
+                <div class="widget-header">
+                    <h3 class="widget-title">
+                        <span class="widget-icon">🧪</span>
+                        Demo Controls
+                    </h3>
+                </div>
+                <div class="widget-content">
+                    <p style="margin-bottom: var(--spacing-md); color: var(--on-surface-variant);">
+                        Test the common components and interactions:
+                    </p>
+                    <div style="display: flex; gap: var(--spacing-md); flex-wrap: wrap;">
+                        <button onclick="showProcessing()" style="padding: var(--spacing-sm) var(--spacing-md); background: var(--primary); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer;">
+                            Show Processing
+                        </button>
+                        <button onclick="hideProcessing()" style="padding: var(--spacing-sm) var(--spacing-md); background: var(--surface); color: var(--on-surface); border: 1px solid var(--outline); border-radius: var(--radius-sm); cursor: pointer;">
+                            Hide Processing
+                        </button>
+                        <button onclick="showToast('Success message!', 'success')" style="padding: var(--spacing-sm) var(--spacing-md); background: var(--success); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer;">
+                            Success Toast
+                        </button>
+                        <button onclick="showToast('Error message!', 'error')" style="padding: var(--spacing-sm) var(--spacing-md); background: var(--error); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer;">
+                            Error Toast
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Agent Frontend Template - Common JavaScript Utilities
+
+        // Quick Agent Access Panel 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');
+                toggle.setAttribute('aria-expanded', 'false');
+                panel.setAttribute('aria-hidden', 'true');
+                overlay.setAttribute('aria-hidden', 'true');
+                document.body.style.overflow = 'auto';
+            } else {
+                // Open panel
+                panel.classList.add('active');
+                overlay.classList.add('active');
+                toggle.classList.add('active');
+                toggle.setAttribute('aria-expanded', 'true');
+                panel.setAttribute('aria-hidden', 'false');
+                overlay.setAttribute('aria-hidden', 'false');
+                document.body.style.overflow = 'hidden';
+            }
+        }
+
+        function closeQuickAgents() {
+            const panel = document.getElementById('quickAgentsPanel');
+            const overlay = document.getElementById('quickAgentsOverlay');
+            const toggle = document.querySelector('.quick-agent-toggle');
+            
+            if (panel && overlay && toggle) {
+                panel.classList.remove('active');
+                overlay.classList.remove('active');
+                toggle.classList.remove('active');
+                toggle.setAttribute('aria-expanded', 'false');
+                panel.setAttribute('aria-hidden', 'true');
+                overlay.setAttribute('aria-hidden', 'true');
+                document.body.style.overflow = 'auto';
+            }
+        }
+
+        // Toast Notification Function
+        function showToast(message, type = 'info') {
+            // Remove existing toasts
+            document.querySelectorAll('.toast').forEach(toast => toast.remove());
+            
+            // Create new toast
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            toast.textContent = message;
+            
+            // Add to page
+            document.body.appendChild(toast);
+            
+            // Show toast with animation
+            setTimeout(() => toast.classList.add('show'), 100);
+            
+            // Auto remove after 3 seconds
+            setTimeout(() => {
+                toast.classList.remove('show');
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+
+        // Processing Status Functions
+        function showProcessing() {
+            const processingStatus = document.getElementById('processingStatus');
+            processingStatus.style.display = 'block';
+            processingStatus.classList.add('active');
+            showToast('Processing started...', 'success');
+        }
+
+        function hideProcessing() {
+            const processingStatus = document.getElementById('processingStatus');
+            processingStatus.style.display = 'none';
+            processingStatus.classList.remove('active');
+            showToast('Processing stopped...', 'success');
+        }
+
+        // Wallet Balance Update Function
+        function updateWalletBalance(newBalance) {
+            if (newBalance !== undefined) {
+                const walletBalance = document.getElementById('walletBalance');
+                if (walletBalance) {
+                    walletBalance.textContent = newBalance.toFixed(2);
+                }
+                showToast(`Wallet updated: ${newBalance.toFixed(2)} AED`, 'success');
+            }
+        }
+
+        // Copy to Clipboard Utility
+        function copyToClipboard(text, successMessage = 'Copied to clipboard!') {
+            navigator.clipboard.writeText(text).then(() => {
+                showToast(`📋 ${successMessage}`, 'success');
+            }).catch(() => {
+                showToast('Failed to copy to clipboard', 'error');
+            });
+        }
+
+        // Download as File Utility
+        function downloadAsFile(text, filename, successMessage = 'File downloaded!') {
+            const blob = new Blob([text], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename || `content-${Date.now()}.txt`;
+            a.click();
+            URL.revokeObjectURL(url);
+            showToast(`💾 ${successMessage}`, 'success');
+        }
+
+        // Close panel on Escape key
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                closeQuickAgents();
+            }
+        });
+
+        // Initialize accessibility features
+        document.addEventListener('DOMContentLoaded', function() {
+            // Set initial ARIA states
+            const quickAgentsButton = document.querySelector('.quick-agent-toggle');
+            if (quickAgentsButton) {
+                quickAgentsButton.setAttribute('aria-expanded', 'false');
+            }
+            
+            const panel = document.getElementById('quickAgentsPanel');
+            const overlay = document.getElementById('quickAgentsOverlay');
+            if (panel) panel.setAttribute('aria-hidden', 'true');
+            if (overlay) overlay.setAttribute('aria-hidden', 'true');
+            
+            // Show welcome message
+            setTimeout(() => {
+                showToast('Agent template prototype loaded successfully!', 'success');
+            }, 500);
+        });
+
+        // Placeholder for agent-specific JavaScript
+        // ========================================
+        // 
+        // Agent-specific functions would go here:
+        // - Form validation
+        // - AJAX requests
+        // - Result processing
+        // - Custom interactions
+        // 
+        // Example structure:
+        // function validateAgentForm() { ... }
+        // function submitAgentRequest() { ... }
+        // function displayAgentResults() { ... }
+        // 
+        // ========================================
+    </script>
+</body>
+</html>

email_writer/admin.py

@@ -0,0 +1,29 @@
+from django.contrib import admin
+from .models import EmailWriterRequest
+
+
+@admin.register(EmailWriterRequest)
+class EmailWriterRequestAdmin(admin.ModelAdmin):
+    list_display = ['id', 'user', 'email_type', 'recipient', 'tone', 'status', 'created_at']
+    list_filter = ['email_type', 'tone', 'length', 'status', 'created_at']
+    search_fields = ['user__username', 'recipient', 'main_message']
+    readonly_fields = ['id', 'created_at', 'processed_at']
+    
+    fieldsets = (
+        ('Request Information', {
+            'fields': ('id', 'user', 'status', 'cost', 'created_at', 'processed_at')
+        }),
+        ('Email Details', {
+            'fields': ('email_type', 'recipient', 'subject', 'main_message', 'tone', 'length')
+        }),
+        ('Results', {
+            'fields': ('email_content',),
+            'classes': ('collapse',)
+        })
+    )
+    
+    def get_readonly_fields(self, request, obj=None):
+        readonly = list(self.readonly_fields)
+        if obj:  # editing an existing object
+            readonly.extend(['user', 'email_type', 'recipient', 'main_message'])
+        return readonly

email_writer/migrations/0001_initial.py

@@ -0,0 +1,129 @@
+# Generated by Django 5.2.4 on 2025-07-24 20:50
+
+import django.db.models.deletion
+import uuid
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="EmailWriterRequest",
+            fields=[
+                (
+                    "id",
+                    models.UUIDField(
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                    ),
+                ),
+                (
+                    "status",
+                    models.CharField(
+                        choices=[
+                            ("pending", "Pending"),
+                            ("processing", "Processing"),
+                            ("completed", "Completed"),
+                            ("failed", "Failed"),
+                        ],
+                        default="pending",
+                        max_length=20,
+                    ),
+                ),
+                (
+                    "cost",
+                    models.DecimalField(decimal_places=2, default=3.0, max_digits=10),
+                ),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+                ("processed_at", models.DateTimeField(blank=True, null=True)),
+                (
+                    "email_type",
+                    models.CharField(
+                        choices=[
+                            ("business", "Business Email"),
+                            ("follow_up", "Follow-up Email"),
+                            ("complaint", "Complaint Email"),
+                            ("thank_you", "Thank You Email"),
+                            ("introduction", "Introduction Email"),
+                            ("meeting_request", "Meeting Request"),
+                            ("apology", "Apology Email"),
+                            ("announcement", "Announcement"),
+                        ],
+                        help_text="Type of email to generate",
+                        max_length=50,
+                    ),
+                ),
+                (
+                    "recipient",
+                    models.CharField(
+                        help_text="Who the email is being sent to", max_length=200
+                    ),
+                ),
+                (
+                    "subject",
+                    models.CharField(
+                        blank=True,
+                        help_text="Email subject (optional - can be auto-generated)",
+                        max_length=200,
+                    ),
+                ),
+                (
+                    "main_message",
+                    models.TextField(help_text="Main content/purpose of the email"),
+                ),
+                (
+                    "tone",
+                    models.CharField(
+                        choices=[
+                            ("professional", "Professional"),
+                            ("friendly", "Friendly"),
+                            ("formal", "Formal"),
+                            ("casual", "Casual"),
+                        ],
+                        default="professional",
+                        help_text="Tone of the email",
+                        max_length=30,
+                    ),
+                ),
+                (
+                    "length",
+                    models.CharField(
+                        choices=[
+                            ("short", "Short (1-2 paragraphs)"),
+                            ("medium", "Medium (3-4 paragraphs)"),
+                            ("long", "Long (5+ paragraphs)"),
+                        ],
+                        default="medium",
+                        help_text="Desired length of the email",
+                        max_length=20,
+                    ),
+                ),
+                (
+                    "email_content",
+                    models.TextField(blank=True, help_text="Generated email content"),
+                ),
+                (
+                    "user",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Email Writer Request",
+                "verbose_name_plural": "Email Writer Requests",
+                "ordering": ["-created_at"],
+            },
+        ),
+    ]

email_writer/models.py

@@ -0,0 +1,90 @@
+from django.db import models
+from django.contrib.auth import get_user_model
+import uuid
+
+User = get_user_model()
+
+
+class EmailWriterRequest(models.Model):
+    """Email Writer agent request model"""
+    
+    # Base request fields
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    status = models.CharField(max_length=20, choices=[
+        ('pending', 'Pending'),
+        ('processing', 'Processing'),
+        ('completed', 'Completed'),
+        ('failed', 'Failed'),
+    ], default='pending')
+    cost = models.DecimalField(max_digits=10, decimal_places=2, default=3.00)
+    created_at = models.DateTimeField(auto_now_add=True)
+    processed_at = models.DateTimeField(null=True, blank=True)
+    
+    # Email content fields
+    email_type = models.CharField(
+        max_length=50,
+        choices=[
+            ('business', 'Business Email'),
+            ('follow_up', 'Follow-up Email'),
+            ('complaint', 'Complaint Email'),
+            ('thank_you', 'Thank You Email'),
+            ('introduction', 'Introduction Email'),
+            ('meeting_request', 'Meeting Request'),
+            ('apology', 'Apology Email'),
+            ('announcement', 'Announcement'),
+        ],
+        help_text="Type of email to generate"
+    )
+    
+    recipient = models.CharField(
+        max_length=200,
+        help_text="Who the email is being sent to"
+    )
+    
+    subject = models.CharField(
+        max_length=200,
+        blank=True,
+        help_text="Email subject (optional - can be auto-generated)"
+    )
+    
+    main_message = models.TextField(
+        help_text="Main content/purpose of the email"
+    )
+    
+    tone = models.CharField(
+        max_length=30,
+        choices=[
+            ('professional', 'Professional'),
+            ('friendly', 'Friendly'),
+            ('formal', 'Formal'),
+            ('casual', 'Casual'),
+        ],
+        default='professional',
+        help_text="Tone of the email"
+    )
+    
+    length = models.CharField(
+        max_length=20,
+        choices=[
+            ('short', 'Short (1-2 paragraphs)'),
+            ('medium', 'Medium (3-4 paragraphs)'),
+            ('long', 'Long (5+ paragraphs)'),
+        ],
+        default='medium',
+        help_text="Desired length of the email"
+    )
+    
+    # Result fields
+    email_content = models.TextField(
+        blank=True,
+        help_text="Generated email content"
+    )
+    
+    class Meta:
+        verbose_name = "Email Writer Request"
+        verbose_name_plural = "Email Writer Requests"
+        ordering = ['-created_at']
+        
+    def __str__(self):
+        return f"Email Writer - {self.email_type} for {self.recipient}"

email_writer/processor.py

@@ -0,0 +1,79 @@
+import json
+from agent_base.processors import BaseAgentProcessor
+from .models import EmailWriterRequest
+
+
+class EmailWriterProcessor(BaseAgentProcessor):
+    """Email Writer agent processor"""
+    
+    model_class = EmailWriterRequest
+    agent_name = "Email Writer"
+    cost = 3.00  # AED per request
+    
+    def prepare_webhook_data(self, request_obj):
+        """Prepare data for webhook processing"""
+        return {
+            'email_type': request_obj.email_type,
+            'recipient': request_obj.recipient,
+            'subject': request_obj.subject,
+            'main_message': request_obj.main_message,
+            'tone': request_obj.tone,
+            'length': request_obj.length,
+        }
+    
+    def process_webhook_response(self, request_obj, webhook_response):
+        """Process webhook response and update request object"""
+        try:
+            if isinstance(webhook_response, str):
+                response_data = json.loads(webhook_response)
+            else:
+                response_data = webhook_response
+            
+            # Extract email content from response
+            email_content = ""
+            
+            # Try different possible response formats
+            if 'email_content' in response_data:
+                email_content = response_data['email_content']
+            elif 'content' in response_data:
+                email_content = response_data['content']
+            elif 'output' in response_data:
+                email_content = response_data['output']
+            elif 'generated_email' in response_data:
+                email_content = response_data['generated_email']
+            elif isinstance(response_data, str):
+                email_content = response_data
+            else:
+                # If no specific field found, try to extract text
+                email_content = str(response_data)
+            
+            # Update request object
+            request_obj.email_content = email_content
+            request_obj.save()
+            
+            return {
+                'success': True,
+                'email_content': email_content,
+                'status': 'completed'
+            }
+            
+        except Exception as e:
+            return {
+                'success': False,
+                'error': f"Failed to process email generation: {str(e)}",
+                'status': 'failed'
+            }
+    
+    def get_result_summary(self, request_obj):
+        """Get a summary of the results for display"""
+        if request_obj.email_content:
+            return {
+                'email_type': request_obj.get_email_type_display(),
+                'recipient': request_obj.recipient,
+                'tone': request_obj.get_tone_display(),
+                'length': request_obj.get_length_display(),
+                'email_content': request_obj.email_content,
+                'has_subject': bool(request_obj.subject),
+                'subject': request_obj.subject
+            }
+        return None

email_writer/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+from . import views
+
+app_name = 'email_writer'
+
+urlpatterns = [
+    path('', views.email_writer_detail, name='detail'),
+    path('status/<int:request_id>/', views.email_writer_status, name='status'),
+]

email_writer/views.py

@@ -0,0 +1,140 @@
+import json
+from django.shortcuts import render
+from django.contrib.auth.decorators import login_required
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+from django.views.decorators.http import require_http_methods
+from django.shortcuts import get_object_or_404
+from django.contrib import messages
+
+from .models import EmailWriterRequest
+from .processor import EmailWriterProcessor
+
+
+def email_writer_detail(request):
+    """Email Writer agent detail page"""
+    context = {
+        'agent_title': 'Email Writer',
+        'agent_subtitle': 'Generate professional emails with AI-powered content creation',
+        'page_title': 'Email Writer Agent - NetCop AI Hub'
+    }
+    
+    if request.method == 'POST':
+        if not request.user.is_authenticated:
+            return JsonResponse({'error': 'Authentication required'}, status=401)
+        
+        # Check if this is an AJAX request
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            try:
+                # Validate form data
+                email_type = request.POST.get('email_type', '').strip()
+                recipient = request.POST.get('recipient', '').strip()
+                main_message = request.POST.get('main_message', '').strip()
+                tone = request.POST.get('tone', 'professional')
+                length = request.POST.get('length', 'medium')
+                subject = request.POST.get('subject', '').strip()
+                
+                # Basic validation
+                if not email_type or not recipient or not main_message:
+                    return JsonResponse({
+                        'error': 'Please fill in all required fields',
+                        'success': False
+                    })
+                
+                if len(main_message) < 10:
+                    return JsonResponse({
+                        'error': 'Main message must be at least 10 characters long',
+                        'success': False
+                    })
+                
+                # Initialize processor
+                processor = EmailWriterProcessor()
+                
+                # Check wallet balance
+                if not processor.check_wallet_balance(request.user):
+                    return JsonResponse({
+                        'error': f'Insufficient wallet balance. You need {processor.cost:.2f} AED.',
+                        'success': False
+                    })
+                
+                # Create request object
+                email_request = EmailWriterRequest.objects.create(
+                    user=request.user,
+                    email_type=email_type,
+                    recipient=recipient,
+                    subject=subject,
+                    main_message=main_message,
+                    tone=tone,
+                    length=length,
+                    status='pending'
+                )
+                
+                # Process the request
+                try:
+                    result = processor.process_request(email_request)
+                    
+                    if result.get('success'):
+                        return JsonResponse({
+                            'success': True,
+                            'request_id': email_request.id,
+                            'message': 'Email generation started successfully',
+                            'wallet_balance': float(request.user.wallet_balance)
+                        })
+                    else:
+                        return JsonResponse({
+                            'error': result.get('error', 'Failed to process email generation'),
+                            'success': False
+                        })
+                        
+                except Exception as e:
+                    return JsonResponse({
+                        'error': f'Processing error: {str(e)}',
+                        'success': False
+                    })
+                
+            except Exception as e:
+                return JsonResponse({
+                    'error': f'Request error: {str(e)}',
+                    'success': False
+                })
+        else:
+            # Handle regular form submission (non-AJAX)
+            messages.error(request, 'Please enable JavaScript for the best experience.')
+    
+    return render(request, 'email_writer/detail.html', context)
+
+
+@require_http_methods(["GET"])
+def email_writer_status(request, request_id):
+    """Check status of email generation request"""
+    if not request.user.is_authenticated:
+        return JsonResponse({'error': 'Authentication required'}, status=401)
+    
+    try:
+        email_request = get_object_or_404(
+            EmailWriterRequest, 
+            id=request_id, 
+            user=request.user
+        )
+        
+        processor = EmailWriterProcessor()
+        status_data = processor.get_request_status(email_request)
+        
+        # Add wallet balance to response
+        status_data['wallet_balance'] = float(request.user.wallet_balance)
+        
+        # If completed, include the email content
+        if status_data.get('status') == 'completed' and email_request.email_content:
+            status_data['email_content'] = email_request.email_content
+            status_data['email_type'] = email_request.get_email_type_display()
+            status_data['recipient'] = email_request.recipient
+            status_data['tone'] = email_request.get_tone_display()
+            status_data['length'] = email_request.get_length_display()
+            status_data['subject'] = email_request.subject
+        
+        return JsonResponse(status_data)
+        
+    except EmailWriterRequest.DoesNotExist:
+        return JsonResponse({'error': 'Request not found'}, status=404)
+    except Exception as e:
+        return JsonResponse({'error': str(e)}, status=500)

netcop_hub/settings.py

@@ -67,6 +67,7 @@ INSTALLED_APPS = [
     'data_analyzer',
     'job_posting_generator',
     'social_ads_generator',
+    'email_writer',
     'five_whys_analyzer',
 ]
 

netcop_hub/urls.py

@@ -28,6 +28,7 @@ urlpatterns = [
     path('agents/data-analyzer/', include('data_analyzer.urls')),
     path('agents/job-posting-generator/', include('job_posting_generator.urls')),
     path('agents/social-ads-generator/', include('social_ads_generator.urls')),
+    path('agents/email-writer/', include('email_writer.urls')),
     path('agents/five-whys-analyzer/', include('five_whys_analyzer.urls')),
     path('', include('core.urls')),
 ]