🎨 Create themed error pages matching agent UI design

✨ New Features:
- Complete redesign of 404, 500, 403, and 400 error pages
- Agent-themed UI with header, navigation, and widget components
- Component-based architecture using agent-base.css styling
- Responsive design with proper error handling

🔧 Technical Improvements:
- Custom error handlers for production (DEBUG=False)
- Proper Django error view integration
- Authentication-aware error pages (403 shows login options)
- Interactive elements (refresh, go back, contact support)

🎯 UI/UX Enhancements:
- Consistent branding with agent ecosystem
- Quick links to popular agents on 404 page
- System status indicators on 500 page
- Troubleshooting steps on 400 page
- Professional error messaging

Error pages now feel integrated with the platform instead of generic Django errors.

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

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

core/error_views.py

@@ -0,0 +1,38 @@
+from django.shortcuts import render
+from django.http import HttpResponseNotFound, HttpResponseServerError, HttpResponseForbidden, HttpResponseBadRequest
+
+
+def custom_404_view(request, exception):
+    """Custom 404 error page with agent theme"""
+    return HttpResponseNotFound(
+        render(request, '404.html', {
+            'timestamp': '1.0'  # Cache busting for CSS
+        }).content
+    )
+
+
+def custom_500_view(request):
+    """Custom 500 error page with agent theme"""
+    return HttpResponseServerError(
+        render(request, '500.html', {
+            'timestamp': '1.0'  # Cache busting for CSS
+        }).content
+    )
+
+
+def custom_403_view(request, exception):
+    """Custom 403 error page with agent theme"""
+    return HttpResponseForbidden(
+        render(request, '403.html', {
+            'timestamp': '1.0'  # Cache busting for CSS
+        }).content
+    )
+
+
+def custom_400_view(request, exception):
+    """Custom 400 error page with agent theme"""
+    return HttpResponseBadRequest(
+        render(request, '400.html', {
+            'timestamp': '1.0'  # Cache busting for CSS
+        }).content
+    )

netcop_hub/urls.py

@@ -47,3 +47,9 @@ if settings.DEBUG:
         ] + urlpatterns
     except ImportError:
         pass
+
+# Custom error handlers (work in production when DEBUG=False)
+handler404 = 'core.error_views.custom_404_view'
+handler500 = 'core.error_views.custom_500_view'
+handler403 = 'core.error_views.custom_403_view'
+handler400 = 'core.error_views.custom_400_view'

templates/400.html

@@ -0,0 +1,334 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Bad Request - Quantum Tasks AI{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
+{% endblock %}
+
+{% block content %}
+<!-- Agent Header Component -->
+{% include "components/agent_header.html" with agent_title="Bad Request" agent_subtitle="Invalid request format detected" %}
+
+<!-- Quick Agents Panel Component -->
+{% include "components/quick_agents_panel.html" %}
+
+<!-- Error Content -->
+<div class="agent-container">
+    <div class="agent-grid">
+        <!-- Main Error Widget -->
+        <div class="agent-widget widget-large">
+            <div class="agent-widget-header">
+                <h2 class="agent-widget-title">
+                    <span class="agent-icon">⚠️</span>
+                    400 - Bad Request
+                </h2>
+                <p class="agent-widget-subtitle">Request format is invalid or malformed</p>
+            </div>
+            
+            <div class="agent-widget-content">
+                <div class="error-content">
+                    <div class="error-illustration">
+                        <div class="error-icon-large">📝</div>
+                        <p class="error-message">
+                            Your request couldn't be processed because it contains invalid data or is malformed. 
+                            Please check your input and try again.
+                        </p>
+                    </div>
+                    
+                    <div class="error-suggestions">
+                        <h4 class="suggestions-title">Common Issues:</h4>
+                        <div class="suggestions-list">
+                            <div class="suggestion-item">
+                                <span class="suggestion-icon">📄</span>
+                                <span class="suggestion-text">Check file format and size limits</span>
+                            </div>
+                            <div class="suggestion-item">
+                                <span class="suggestion-icon">💬</span>
+                                <span class="suggestion-text">Ensure all required fields are filled</span>
+                            </div>
+                            <div class="suggestion-item">
+                                <span class="suggestion-icon">🔗</span>
+                                <span class="suggestion-text">Verify URL parameters are correct</span>
+                            </div>
+                            <div class="suggestion-item">
+                                <span class="suggestion-icon">🔒</span>
+                                <span class="suggestion-text">Check if you're properly authenticated</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="error-actions">
+                        <div class="button-group">
+                            <button onclick="history.back()" class="btn btn-primary">
+                                <span class="btn-icon">↩️</span>
+                                Go Back
+                            </button>
+                            <a href="{% url 'core:homepage' %}" class="btn btn-secondary">
+                                <span class="btn-icon">🏠</span>
+                                Go Home
+                            </a>
+                        </div>
+                        
+                        <div class="try-again-section">
+                            <p class="try-again-text">Try using our AI agents with proper input:</p>
+                            <div class="agent-shortcuts">
+                                <a href="/agents/data-analyzer/" class="agent-shortcut">
+                                    <span class="shortcut-icon">📊</span>
+                                    Data Analyzer
+                                </a>
+                                <a href="/agents/weather-reporter/" class="agent-shortcut">
+                                    <span class="shortcut-icon">🌤️</span>
+                                    Weather Reporter
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Help Widget -->
+        <div class="agent-widget widget-small">
+            <div class="agent-widget-header">
+                <h3 class="agent-widget-title">
+                    <span class="agent-icon">🛠️</span>
+                    Troubleshooting
+                </h3>
+            </div>
+            <div class="agent-widget-content">
+                <div class="troubleshoot-content">
+                    <div class="troubleshoot-steps">
+                        <div class="troubleshoot-step">
+                            <span class="step-number">1</span>
+                            <span class="step-text">Refresh the page</span>
+                        </div>
+                        <div class="troubleshoot-step">
+                            <span class="step-number">2</span>
+                            <span class="step-text">Check your input data</span>
+                        </div>
+                        <div class="troubleshoot-step">
+                            <span class="step-number">3</span>
+                            <span class="step-text">Clear browser cache</span>
+                        </div>
+                        <div class="troubleshoot-step">
+                            <span class="step-number">4</span>
+                            <span class="step-text">Try a different browser</span>
+                        </div>
+                    </div>
+                    
+                    <div class="help-actions">
+                        <button onclick="window.location.reload()" class="help-btn">
+                            🔄 Refresh Page
+                        </button>
+                        <a href="mailto:support@quantumtaskai.com" class="help-btn">
+                            📧 Contact Support
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+/* 400 Error specific styling that follows agent theme */
+.error-content {
+    text-align: center;
+    padding: var(--spacing-lg);
+}
+
+.error-illustration {
+    margin-bottom: var(--spacing-xl);
+}
+
+.error-icon-large {
+    font-size: 4rem;
+    margin-bottom: var(--spacing-md);
+    line-height: 1;
+}
+
+.error-message {
+    font-size: var(--text-lg);
+    color: var(--on-surface-variant);
+    line-height: 1.6;
+    max-width: 500px;
+    margin: 0 auto var(--spacing-xl);
+}
+
+.error-suggestions {
+    margin-bottom: var(--spacing-xl);
+    text-align: left;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.suggestions-title {
+    font-size: var(--text-lg);
+    color: var(--on-surface);
+    margin-bottom: var(--spacing-md);
+    text-align: center;
+}
+
+.suggestions-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.suggestion-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    background: var(--surface-variant);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--outline-variant);
+}
+
+.suggestion-icon {
+    font-size: var(--text-base);
+    flex-shrink: 0;
+}
+
+.suggestion-text {
+    font-size: var(--text-sm);
+    color: var(--on-surface);
+}
+
+.error-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    align-items: center;
+}
+
+.button-group {
+    display: flex;
+    gap: var(--spacing-md);
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.try-again-section {
+    text-align: center;
+}
+
+.try-again-text {
+    font-size: var(--text-sm);
+    color: var(--on-surface-variant);
+    margin-bottom: var(--spacing-md);
+}
+
+.agent-shortcuts {
+    display: flex;
+    gap: var(--spacing-sm);
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.agent-shortcut {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--surface-variant);
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    color: var(--on-surface);
+    font-size: var(--text-sm);
+    transition: all 0.2s ease;
+    border: 1px solid var(--outline-variant);
+}
+
+.agent-shortcut:hover {
+    background: var(--surface);
+    box-shadow: var(--shadow-sm);
+    transform: translateY(-1px);
+}
+
+.shortcut-icon {
+    font-size: var(--text-base);
+}
+
+.troubleshoot-content {
+    padding: var(--spacing-md);
+}
+
+.troubleshoot-steps {
+    margin-bottom: var(--spacing-lg);
+}
+
+.troubleshoot-step {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) 0;
+    border-bottom: 1px solid var(--outline-variant);
+}
+
+.troubleshoot-step:last-child {
+    border-bottom: none;
+}
+
+.step-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: var(--primary);
+    color: white;
+    border-radius: 50%;
+    font-size: var(--text-xs);
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.step-text {
+    font-size: var(--text-sm);
+    color: var(--on-surface);
+}
+
+.help-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.help-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm);
+    background: var(--surface-variant);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    color: var(--on-surface);
+    font-size: var(--text-sm);
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.help-btn:hover {
+    background: var(--surface);
+    box-shadow: var(--shadow-sm);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .button-group {
+        flex-direction: column;
+        width: 100%;
+    }
+    
+    .agent-shortcuts {
+        flex-direction: column;
+    }
+}
+</style>
+{% endblock %}

templates/403.html

@@ -0,0 +1,212 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Access Denied - Quantum Tasks AI{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
+{% endblock %}
+
+{% block content %}
+<!-- Agent Header Component -->
+{% include "components/agent_header.html" with agent_title="Access Denied" agent_subtitle="You don't have permission to access this resource" %}
+
+<!-- Quick Agents Panel Component -->
+{% include "components/quick_agents_panel.html" %}
+
+<!-- Error Content -->
+<div class="agent-container">
+    <div class="agent-grid">
+        <!-- Main Error Widget -->
+        <div class="agent-widget widget-large">
+            <div class="agent-widget-header">
+                <h2 class="agent-widget-title">
+                    <span class="agent-icon">🛡️</span>
+                    403 - Access Denied
+                </h2>
+                <p class="agent-widget-subtitle">Permission required to access this resource</p>
+            </div>
+            
+            <div class="agent-widget-content">
+                <div class="error-content">
+                    <div class="error-illustration">
+                        <div class="error-icon-large">🔒</div>
+                        <p class="error-message">
+                            You don't have the necessary permissions to access this resource. 
+                            Please log in with the appropriate account or contact support for assistance.
+                        </p>
+                    </div>
+                    
+                    <div class="error-actions">
+                        <div class="button-group">
+                            {% if not user.is_authenticated %}
+                                <a href="{% url 'authentication:login' %}" class="btn btn-primary">
+                                    <span class="btn-icon">🔑</span>
+                                    Login
+                                </a>
+                                <a href="{% url 'authentication:register' %}" class="btn btn-secondary">
+                                    <span class="btn-icon">📝</span>
+                                    Register
+                                </a>
+                            {% else %}
+                                <a href="{% url 'core:homepage' %}" class="btn btn-primary">
+                                    <span class="btn-icon">🏠</span>
+                                    Go Home
+                                </a>
+                                <a href="{% url 'agent_base:marketplace' %}" class="btn btn-secondary">
+                                    <span class="btn-icon">🤖</span>
+                                    Browse AI Agents
+                                </a>
+                            {% endif %}
+                        </div>
+                        
+                        {% if user.is_authenticated %}
+                        <div class="user-info-section">
+                            <p class="user-info-text">
+                                Currently logged in as: <strong>{{ user.username }}</strong>
+                            </p>
+                            <p class="user-info-text">
+                                If you believe this is an error, please contact support.
+                            </p>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Support Widget -->
+        <div class="agent-widget widget-small">
+            <div class="agent-widget-header">
+                <h3 class="agent-widget-title">
+                    <span class="agent-icon">🆘</span>
+                    Need Access?
+                </h3>
+            </div>
+            <div class="agent-widget-content">
+                <div class="support-content">
+                    <p class="support-text">If you need access to this resource:</p>
+                    <div class="support-actions">
+                        {% if not user.is_authenticated %}
+                        <a href="{% url 'authentication:login' %}" class="support-link">
+                            🔐 Login to your account
+                        </a>
+                        <a href="{% url 'authentication:register' %}" class="support-link">
+                            👤 Create new account
+                        </a>
+                        {% endif %}
+                        <a href="mailto:support@quantumtaskai.com" class="support-link">
+                            📧 Contact Support
+                        </a>
+                        <a href="{% url 'agent_base:marketplace' %}" class="support-link">
+                            🤖 View Available Agents
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+/* 403 Error specific styling that follows agent theme */
+.error-content {
+    text-align: center;
+    padding: var(--spacing-lg);
+}
+
+.error-illustration {
+    margin-bottom: var(--spacing-xl);
+}
+
+.error-icon-large {
+    font-size: 4rem;
+    margin-bottom: var(--spacing-md);
+    line-height: 1;
+}
+
+.error-message {
+    font-size: var(--text-lg);
+    color: var(--on-surface-variant);
+    line-height: 1.6;
+    max-width: 500px;
+    margin: 0 auto var(--spacing-xl);
+}
+
+.error-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    align-items: center;
+}
+
+.button-group {
+    display: flex;
+    gap: var(--spacing-md);
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.user-info-section {
+    text-align: center;
+    padding: var(--spacing-md);
+    background: var(--surface-variant);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--outline-variant);
+}
+
+.user-info-text {
+    font-size: var(--text-sm);
+    color: var(--on-surface-variant);
+    margin-bottom: var(--spacing-xs);
+}
+
+.user-info-text:last-child {
+    margin-bottom: 0;
+}
+
+.support-content {
+    padding: var(--spacing-md);
+    text-align: center;
+}
+
+.support-text {
+    color: var(--on-surface-variant);
+    margin-bottom: var(--spacing-md);
+    font-size: var(--text-sm);
+}
+
+.support-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.support-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm);
+    background: var(--surface-variant);
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    color: var(--on-surface);
+    font-size: var(--text-sm);
+    transition: all 0.2s ease;
+    border: 1px solid var(--outline-variant);
+}
+
+.support-link:hover {
+    background: var(--surface);
+    box-shadow: var(--shadow-sm);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .button-group {
+        flex-direction: column;
+        width: 100%;
+    }
+}
+</style>
+{% endblock %}

templates/404.html

@@ -4,90 +4,231 @@
 {% block title %}Page Not Found - Quantum Tasks AI{% endblock %}
 
 {% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
+{% endblock %}
+
+{% block content %}
+<!-- Agent Header Component -->
+{% include "components/agent_header.html" with agent_title="Page Not Found" agent_subtitle="The page you're looking for doesn't exist" %}
+
+<!-- Quick Agents Panel Component -->
+{% include "components/quick_agents_panel.html" %}
+
+<!-- Error Content -->
+<div class="agent-container">
+    <div class="agent-grid">
+        <!-- Main Error Widget -->
+        <div class="agent-widget widget-large">
+            <div class="agent-widget-header">
+                <h2 class="agent-widget-title">
+                    <span class="agent-icon">🔍</span>
+                    404 - Page Not Found
+                </h2>
+                <p class="agent-widget-subtitle">Let's get you back on track</p>
+            </div>
+            
+            <div class="agent-widget-content">
+                <div class="error-content">
+                    <div class="error-illustration">
+                        <div class="error-icon-large">🕵️‍♂️</div>
+                        <p class="error-message">
+                            The page you're looking for doesn't exist or has been moved. 
+                            Our AI agents are ready to help you find what you need!
+                        </p>
+                    </div>
+                    
+                    <div class="error-actions">
+                        <div class="button-group">
+                            <a href="{% url 'core:homepage' %}" class="btn btn-primary">
+                                <span class="btn-icon">🏠</span>
+                                Go Home
+                            </a>
+                            <a href="{% url 'agent_base:marketplace' %}" class="btn btn-secondary">
+                                <span class="btn-icon">🤖</span>
+                                Browse AI Agents
+                            </a>
+                        </div>
+                        
+                        <div class="quick-links">
+                            <p class="quick-links-title">Popular AI Agents:</p>
+                            <div class="quick-links-grid">
+                                <a href="/agents/data-analyzer/" class="quick-link">
+                                    <span class="quick-link-icon">📊</span>
+                                    Data Analyzer
+                                </a>
+                                <a href="/agents/weather-reporter/" class="quick-link">
+                                    <span class="quick-link-icon">🌤️</span>
+                                    Weather Reporter
+                                </a>
+                                <a href="/agents/job-posting-generator/" class="quick-link">
+                                    <span class="quick-link-icon">💼</span>
+                                    Job Generator
+                                </a>
+                                <a href="/agents/social-ads-generator/" class="quick-link">
+                                    <span class="quick-link-icon">📱</span>
+                                    Social Ads
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Help Widget -->
+        <div class="agent-widget widget-small">
+            <div class="agent-widget-header">
+                <h3 class="agent-widget-title">
+                    <span class="agent-icon">💡</span>
+                    Need Help?
+                </h3>
+            </div>
+            <div class="agent-widget-content">
+                <div class="help-content">
+                    <p class="help-text">Can't find what you're looking for?</p>
+                    <div class="help-actions">
+                        <a href="{% url 'agent_base:marketplace' %}" class="help-link">
+                            🔍 Browse All Agents
+                        </a>
+                        <a href="{% url 'core:pricing' %}" class="help-link">
+                            💰 View Pricing
+                        </a>
+                        <a href="mailto:support@quantumtaskai.com" class="help-link">
+                            📧 Contact Support
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <style>
-.error-container {
-    min-height: 60vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
+/* Error-specific styling that follows agent theme */
+.error-content {
     text-align: center;
+    padding: var(--spacing-lg);
 }
 
-.error-icon {
-    font-size: 6rem;
-    color: var(--primary-blue);
-    margin-bottom: 1rem;
+.error-illustration {
+    margin-bottom: var(--spacing-xl);
 }
 
-.error-title {
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: var(--text-primary);
-    margin-bottom: 1rem;
+.error-icon-large {
+    font-size: 4rem;
+    margin-bottom: var(--spacing-md);
+    line-height: 1;
 }
 
 .error-message {
-    font-size: 1.1rem;
-    color: var(--text-secondary);
-    margin-bottom: 2rem;
-    max-width: 600px;
+    font-size: var(--text-lg);
+    color: var(--on-surface-variant);
+    line-height: 1.6;
+    max-width: 500px;
+    margin: 0 auto var(--spacing-xl);
 }
 
 .error-actions {
     display: flex;
-    gap: 1rem;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    align-items: center;
+}
+
+.button-group {
+    display: flex;
+    gap: var(--spacing-md);
     flex-wrap: wrap;
     justify-content: center;
 }
 
-.error-button {
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
+.quick-links {
+    width: 100%;
+    max-width: 600px;
+}
+
+.quick-links-title {
+    font-size: var(--text-sm);
+    color: var(--on-surface-variant);
+    margin-bottom: var(--spacing-md);
+    text-align: center;
+}
+
+.quick-links-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: var(--spacing-sm);
+}
+
+.quick-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--surface-variant);
+    border-radius: var(--radius-sm);
     text-decoration: none;
-    font-weight: 600;
-    transition: all 0.2s;
+    color: var(--on-surface);
+    font-size: var(--text-sm);
+    transition: all 0.2s ease;
+    border: 1px solid var(--outline-variant);
 }
 
-.error-button.primary {
-    background: var(--primary-blue);
-    color: white;
-}
-
-.error-button.primary:hover {
-    background: var(--primary-blue-dark);
+.quick-link:hover {
+    background: var(--surface);
+    box-shadow: var(--shadow-sm);
     transform: translateY(-1px);
 }
 
-.error-button.secondary {
-    background: transparent;
-    color: var(--primary-blue);
-    border: 2px solid var(--primary-blue);
+.quick-link-icon {
+    font-size: var(--text-base);
 }
 
-.error-button.secondary:hover {
-    background: var(--primary-blue);
-    color: white;
+.help-content {
+    text-align: center;
+}
+
+.help-text {
+    color: var(--on-surface-variant);
+    margin-bottom: var(--spacing-md);
+    font-size: var(--text-sm);
+}
+
+.help-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.help-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm);
+    background: var(--surface-variant);
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    color: var(--on-surface);
+    font-size: var(--text-sm);
+    transition: all 0.2s ease;
+    border: 1px solid var(--outline-variant);
+}
+
+.help-link:hover {
+    background: var(--surface);
+    box-shadow: var(--shadow-sm);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .button-group {
+        flex-direction: column;
+        width: 100%;
+    }
+    
+    .quick-links-grid {
+        grid-template-columns: 1fr 1fr;
+    }
 }
 </style>
 {% endblock %}
-
-{% block content %}
-<div class="error-container">
-    <div class="error-icon">🔍</div>
-    <h1 class="error-title">Page Not Found</h1>
-    <p class="error-message">
-        The page you're looking for doesn't exist or has been moved. 
-        Don't worry, let's get you back on track to explore our AI assistants.
-    </p>
-    <div class="error-actions">
-        <a href="{% url 'core:homepage' %}" class="error-button primary">
-            🏠 Go Home
-        </a>
-        <a href="{% url 'agent_base:marketplace' %}" class="error-button secondary">
-            🤖 Browse AI Assistants
-        </a>
-    </div>
-</div>
-{% endblock %}

templates/500.html

@@ -1,108 +1,305 @@
+{% extends 'base.html' %}
 {% load static %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Server Error - Quantum Tasks AI</title>
-    <link rel="stylesheet" href="{% static 'css/base.css' %}">
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            min-height: 100vh;
-            background: var(--gradient-hero);
-            font-family: var(--font-primary);
+
+{% block title %}Server Error - Quantum Tasks AI{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
+{% endblock %}
+
+{% block content %}
+<!-- Agent Header Component -->
+{% include "components/agent_header.html" with agent_title="Server Error" agent_subtitle="We're working to fix this issue" %}
+
+<!-- Quick Agents Panel Component -->
+{% include "components/quick_agents_panel.html" %}
+
+<!-- Error Content -->
+<div class="agent-container">
+    <div class="agent-grid">
+        <!-- Main Error Widget -->
+        <div class="agent-widget widget-large">
+            <div class="agent-widget-header">
+                <h2 class="agent-widget-title">
+                    <span class="agent-icon">⚠️</span>
+                    500 - Server Error
+                </h2>
+                <p class="agent-widget-subtitle">Technical difficulties detected</p>
+            </div>
+            
+            <div class="agent-widget-content">
+                <div class="error-content">
+                    <div class="error-illustration">
+                        <div class="error-icon-large">🔧</div>
+                        <p class="error-message">
+                            We're experiencing technical difficulties. Our AI systems are temporarily unavailable, 
+                            but our team has been notified and is working to resolve the issue.
+                        </p>
+                    </div>
+                    
+                    <div class="error-status">
+                        <div class="status-indicator">
+                            <div class="status-dot pulsing"></div>
+                            <span class="status-text">System monitoring active</span>
+                        </div>
+                    </div>
+                    
+                    <div class="error-actions">
+                        <div class="button-group">
+                            <a href="{% url 'core:homepage' %}" class="btn btn-primary">
+                                <span class="btn-icon">🏠</span>
+                                Go Home
+                            </a>
+                            <a href="{% url 'agent_base:marketplace' %}" class="btn btn-secondary">
+                                <span class="btn-icon">🤖</span>
+                                Browse AI Agents
+                            </a>
+                        </div>
+                        
+                        <div class="retry-section">
+                            <p class="retry-text">You can try refreshing the page in a few minutes</p>
+                            <button onclick="window.location.reload()" class="btn btn-outline">
+                                <span class="btn-icon">🔄</span>
+                                Refresh Page
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Status Widget -->
+        <div class="agent-widget widget-small">
+            <div class="agent-widget-header">
+                <h3 class="agent-widget-title">
+                    <span class="agent-icon">📊</span>
+                    System Status
+                </h3>
+            </div>
+            <div class="agent-widget-content">
+                <div class="status-content">
+                    <div class="status-item">
+                        <span class="status-icon">🟡</span>
+                        <div class="status-info">
+                            <span class="status-name">AI Services</span>
+                            <span class="status-value">Investigating</span>
+                        </div>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-icon">🟢</span>
+                        <div class="status-info">
+                            <span class="status-name">Website</span>
+                            <span class="status-value">Operational</span>
+                        </div>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-icon">🟢</span>
+                        <div class="status-info">
+                            <span class="status-name">Database</span>
+                            <span class="status-value">Operational</span>
+                        </div>
+                    </div>
+                    
+                    <div class="error-details">
+                        <p class="detail-item">
+                            <strong>Error ID:</strong> 
+                            <span class="detail-value">{{ request.META.HTTP_X_REQUEST_ID|default:"N/A" }}</span>
+                        </p>
+                        <p class="detail-item">
+                            <strong>Time:</strong> 
+                            <span class="detail-value" id="error-time"></span>
+                        </p>
+                        <p class="detail-item">
+                            <strong>Support:</strong> 
+                            <a href="mailto:support@quantumtaskai.com" class="support-link">
+                                support@quantumtaskai.com
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+/* 500 Error specific styling that follows agent theme */
+.error-content {
+    text-align: center;
+    padding: var(--spacing-lg);
+}
+
+.error-illustration {
+    margin-bottom: var(--spacing-xl);
+}
+
+.error-icon-large {
+    font-size: 4rem;
+    margin-bottom: var(--spacing-md);
+    line-height: 1;
+}
+
+.error-message {
+    font-size: var(--text-lg);
+    color: var(--on-surface-variant);
+    line-height: 1.6;
+    max-width: 500px;
+    margin: 0 auto var(--spacing-xl);
+}
+
+.error-status {
+    margin-bottom: var(--spacing-xl);
+    display: flex;
+    justify-content: center;
+}
+
+.status-indicator {
     display: flex;
     align-items: center;
-            justify-content: center;
-        }
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--surface-variant);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--outline-variant);
+}
 
-        .error-container {
-            max-width: 600px;
-            padding: 2rem;
-            text-align: center;
-            color: white;
-        }
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--success);
+}
 
-        .error-icon {
-            font-size: 6rem;
-            margin-bottom: 1rem;
-        }
+.status-dot.pulsing {
+    animation: pulse 2s infinite;
+}
 
-        .error-title {
-            font-size: 2.5rem;
-            font-weight: bold;
-            margin-bottom: 1rem;
-        }
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
 
-        .error-message {
-            font-size: 1.1rem;
-            margin-bottom: 2rem;
-            opacity: 0.9;
-            line-height: 1.6;
-        }
+.status-text {
+    font-size: var(--text-sm);
+    color: var(--on-surface);
+}
 
-        .error-actions {
+.error-actions {
     display: flex;
-            gap: 1rem;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    align-items: center;
+}
+
+.button-group {
+    display: flex;
+    gap: var(--spacing-md);
     flex-wrap: wrap;
     justify-content: center;
-        }
+}
 
-        .error-button {
-            padding: 0.75rem 1.5rem;
-            border-radius: 8px;
+.retry-section {
+    text-align: center;
+}
+
+.retry-text {
+    font-size: var(--text-sm);
+    color: var(--on-surface-variant);
+    margin-bottom: var(--spacing-md);
+}
+
+.btn-outline {
+    background: transparent;
+    border: 1px solid var(--outline);
+    color: var(--on-surface);
+}
+
+.btn-outline:hover {
+    background: var(--surface-variant);
+    border-color: var(--outline-variant);
+}
+
+.status-content {
+    padding: var(--spacing-md);
+}
+
+.status-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) 0;
+    border-bottom: 1px solid var(--outline-variant);
+}
+
+.status-item:last-of-type {
+    border-bottom: none;
+}
+
+.status-icon {
+    font-size: var(--text-base);
+}
+
+.status-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+}
+
+.status-name {
+    font-size: var(--text-sm);
+    color: var(--on-surface);
+    font-weight: 500;
+}
+
+.status-value {
+    font-size: var(--text-xs);
+    color: var(--on-surface-variant);
+}
+
+.error-details {
+    margin-top: var(--spacing-md);
+    padding-top: var(--spacing-md);
+    border-top: 1px solid var(--outline-variant);
+}
+
+.detail-item {
+    font-size: var(--text-xs);
+    color: var(--on-surface-variant);
+    margin-bottom: var(--spacing-xs);
+}
+
+.detail-value {
+    color: var(--on-surface);
+    font-family: monospace;
+}
+
+.support-link {
+    color: var(--primary);
     text-decoration: none;
-            font-weight: 600;
-            transition: all 0.2s;
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            backdrop-filter: blur(10px);
-        }
+}
 
-        .error-button:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-        }
+.support-link:hover {
+    text-decoration: underline;
+}
 
-        .error-details {
-            margin-top: 2rem;
-            padding: 1rem;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 8px;
-            font-size: 0.9rem;
-            opacity: 0.8;
+/* Responsive design */
+@media (max-width: 768px) {
+    .button-group {
+        flex-direction: column;
+        width: 100%;
     }
-    </style>
-</head>
-<body>
-    <div class="error-container">
-        <div class="error-icon">⚠️</div>
-        <h1 class="error-title">Server Error</h1>
-        <p class="error-message">
-            We're experiencing technical difficulties. Our team has been notified 
-            and is working to resolve the issue. Please try again in a few minutes.
-        </p>
-        <div class="error-actions">
-            <a href="/" class="error-button">
-                🏠 Go Home
-            </a>
-            <a href="/marketplace/" class="error-button">
-                🤖 Browse AI Assistants
-            </a>
-        </div>
-        <div class="error-details">
-            <p><strong>Error ID:</strong> {{ request.META.HTTP_X_REQUEST_ID|default:"N/A" }}</p>
-            <p><strong>Time:</strong> <span id="error-time"></span></p>
-        </div>
-    </div>
+}
+</style>
 
-    <script>
-        // Display current time
-        document.getElementById('error-time').textContent = new Date().toLocaleString();
-    </script>
-</body>
-</html>
+<script>
+// Display current time
+document.addEventListener('DOMContentLoaded', function() {
+    const timeElement = document.getElementById('error-time');
+    if (timeElement) {
+        timeElement.textContent = new Date().toLocaleString();
+    }
+});
+</script>
+{% endblock %}