✨ Enhance marketplace with modern design and authentication

- Redesign agent cards with sleek modern styling (white cards, gradient shadows)
- Implement authentication-aware UI: blue "Try Now" vs black "Login to Try"
- Add login_required decorator to agent detail views for security
- Fix quick agents panel to show only 3 working agents
- Update PDF Summarizer reset functionality to properly clear file uploads
- Remove category badges for unauthenticated users to prevent layout issues

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

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

CLAUDE.md

@@ -225,4 +225,4 @@ gunicorn netcop_hub.wsgi:application
 4. Check WorkflowRequest/WorkflowResponse creation
 
 ---
-Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: 2025-07-31 19:18:31
+Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: 2025-07-31 22:55:38

agents/templates/agents/marketplace.html

@@ -129,102 +129,137 @@
 
 .agents-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-    gap: var(--spacing-lg);
+    gap: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
 .agent-card {
-    background: var(--surface);
+    background: #ffffff;
-    border: 2px solid var(--outline-variant);
+    border: 1px solid #e5e7eb;
-    border-radius: var(--radius-lg);
+    border-radius: 16px;
-    padding: var(--spacing-lg);
+    padding: 0;
-    transition: all 0.3s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    text-decoration: none;
     color: inherit;
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: relative;
     overflow: hidden;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
 .agent-card:hover {
-    border-color: var(--primary);
+    transform: translateY(-2px);
-    transform: translateY(-4px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    box-shadow: var(--shadow-lg);
+    border-color: #d1d5db;
-    background: var(--surface-variant);
 }
 
 .agent-header {
+    padding: 24px 24px 0 24px;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
-    gap: var(--spacing-md);
+    gap: 16px;
-    margin-bottom: var(--spacing-md);
+    margin-bottom: 16px;
 }
 
 .agent-icon {
-    font-size: 2.5rem;
+    font-size: 32px;
-    width: 60px;
+    width: 56px;
-    height: 60px;
+    height: 56px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--surface-variant);
+    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-    border-radius: var(--radius-md);
+    border-radius: 14px;
-    border: 2px solid var(--outline-variant);
+    flex-shrink: 0;
+    border: none;
+}
+
+.agent-info {
+    flex: 1;
+    min-width: 0;
 }
 
 .agent-info h3 {
-    font-size: 1.2rem;
+    font-size: 20px;
-    font-weight: 600;
+    font-weight: 700;
-    color: var(--on-surface);
+    color: #111827;
-    margin: 0 0 var(--spacing-xs) 0;
+    margin: 0 0 4px 0;
+    line-height: 1.3;
+    letter-spacing: -0.025em;
 }
 
 .agent-price {
-    font-size: 1rem;
+    font-size: 16px;
-    font-weight: 700;
+    font-weight: 600;
-    color: var(--primary);
+    color: #059669;
     margin: 0;
+    opacity: 0.9;
 }
 
 .agent-description {
-    color: var(--on-surface-variant);
+    color: #6b7280;
-    line-height: 1.5;
+    line-height: 1.6;
-    margin-bottom: var(--spacing-lg);
+    margin: 0 24px 24px 24px;
-    font-size: 14px;
+    font-size: 15px;
+    font-weight: 400;
 }
 
 .agent-footer {
+    padding: 20px 24px 24px 24px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     margin-top: auto;
+    border-top: 1px solid #f3f4f6;
+    background: #fafafa;
 }
 
 .agent-category {
-    background: var(--surface-variant);
+    background: #f3f4f6;
-    color: var(--on-surface-variant);
+    color: #6b7280;
-    padding: 4px 12px;
+    padding: 6px 12px;
-    border-radius: var(--radius-sm);
+    border-radius: 20px;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 500;
     text-transform: capitalize;
+    letter-spacing: 0.025em;
 }
 
 .try-btn {
-    background: var(--primary);
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
     color: white;
-    padding: 8px 16px;
+    padding: 10px 20px;
-    border-radius: var(--radius-sm);
+    border-radius: 10px;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 600;
     border: none;
     cursor: pointer;
     transition: all 0.2s ease;
+    box-shadow: 0 2px 4px 0 rgba(59, 130, 246, 0.3);
+    letter-spacing: 0.025em;
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
 }
 
 .try-btn:hover {
-    background: var(--primary-dark);
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
-    transform: scale(1.05);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px 0 rgba(59, 130, 246, 0.4);
+    color: white;
+}
+
+.try-btn.login-required {
+    background: linear-gradient(135deg, #000000 0%, #1f1f1f 100%);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+}
+
+.try-btn.login-required:hover {
+    background: linear-gradient(135deg, #1f1f1f 0%, #000000 100%);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
+    color: white;
 }
 
 .no-results {
@@ -256,11 +291,51 @@
     
     .agents-grid {
         grid-template-columns: 1fr;
+        gap: 16px;
+        padding: 0 16px;
     }
     
     .category-filter {
         justify-content: center;
     }
+    
+    .agent-header {
+        padding: 20px 20px 0 20px;
+        gap: 12px;
+    }
+    
+    .agent-icon {
+        width: 48px;
+        height: 48px;
+        font-size: 28px;
+    }
+    
+    .agent-info h3 {
+        font-size: 18px;
+    }
+    
+    .agent-description {
+        margin: 0 20px 20px 20px;
+        font-size: 14px;
+    }
+    
+    .agent-footer {
+        padding: 16px 20px 20px 20px;
+        flex-direction: column;
+        gap: 12px;
+        align-items: stretch;
+    }
+    
+    .agent-category {
+        text-align: center;
+    }
+    
+    .try-btn {
+        width: 100%;
+        text-align: center;
+        padding: 12px 20px;
+        border-radius: 12px;
+    }
 }
 </style>
 {% endblock %}
@@ -318,7 +393,7 @@
     {% if agents %}
         <div class="agents-grid">
             {% for agent in agents %}
-                <a href="{% url 'agents:detail' agent.slug %}" class="agent-card">
+                <div class="agent-card">
                     <div class="agent-header">
                         <div class="agent-icon">{{ agent.category.icon }}</div>
                         <div class="agent-info">
@@ -328,10 +403,16 @@
                     </div>
                     <p class="agent-description">{{ agent.short_description }}</p>
                     <div class="agent-footer">
+                        {% if user.is_authenticated %}
                             <span class="agent-category">{{ agent.category.name }}</span>
-                        <button class="try-btn">Try Now →</button>
+                            <a href="{% url 'agents:detail' agent.slug %}" class="try-btn">Try Now →</a>
-                    </div>
+                        {% else %}
+                            <a href="{% url 'authentication:login' %}?next={% url 'agents:detail' agent.slug %}" class="try-btn login-required" style="width: 100%;">
+                                🔐 Login to Try
                             </a>
+                        {% endif %}
+                    </div>
+                </div>
             {% endfor %}
         </div>
     {% else %}

agents/views.py

@@ -183,6 +183,7 @@ def format_agent_message(agent_slug, input_data):
 
 
 # Web interface views
+@login_required
 def agent_detail_view(request, slug):
     """Render agent detail page with dynamic form"""
     agent = get_object_or_404(Agent, slug=slug, is_active=True)

docs_update_summary.txt

@@ -1,14 +1,13 @@
 === Documentation Auto-Update Summary ===
-Update Date: 2025-07-31 19:18:31
+Update Date: 2025-07-31 22:55:38
 
 Recent Commits:
+  - 4424780 🧹 Clean up marketplace to keep only 3 working agents
   - 400f2b7 📄 Add PDF Summarizer agent with advanced file upload system
   - cf8583d 💼 Add Job Posting Generator agent with comprehensive form schema
-  - 27a1c7d 📚 Auto-update documentation after agents app implementation
 
 Agents Changes:
-  - agents/management/commands/create_pdf_summarizer_agent.py
+  - agents/templates/agents/marketplace.html
-  - agents/templates/agents/agent_detail.html
   - static/js/agents-core.js
 
 Documentation Changes:

static/js/agents-core.js

@@ -534,6 +534,24 @@ function resetForm() {
         }
     });
     
+    // Reset file upload UI components
+    const fileUploadContainers = document.querySelectorAll('.file-upload-container');
+    fileUploadContainers.forEach(container => {
+        const input = container.querySelector('.form-file-input');
+        const label = container.querySelector('.file-upload-label');
+        const selectedDiv = container.querySelector('.file-selected');
+        
+        if (input) {
+            input.value = '';
+        }
+        if (label) {
+            label.style.display = 'block';
+        }
+        if (selectedDiv) {
+            selectedDiv.style.display = 'none';
+        }
+    });
+    
     // Scroll back to form
     const formSection = document.getElementById('agentForm');
     if (formSection) {

templates/components/quick_agents_panel.html

@@ -7,22 +7,6 @@
     </div>
 
     <div class="quick-agents-grid">
-        <a href="/agents/data-analyzer/" class="quick-agent-card">
-            <div class="agent-icon">📊</div>
-            <div class="agent-info">
-                <h4>Data Analyzer</h4>
-                <p>AI-powered data analysis</p>
-            </div>
-        </a>
-
-        <a href="/agents/weather-reporter/" class="quick-agent-card">
-            <div class="agent-icon">🌤️</div>
-            <div class="agent-info">
-                <h4>Weather Reporter</h4>
-                <p>Worldwide weather forecasts</p>
-            </div>
-        </a>
-
         <a href="/agents/social-ads-generator/" class="quick-agent-card">
             <div class="agent-icon">📢</div>
             <div class="agent-info">
@@ -39,11 +23,11 @@
             </div>
         </a>
 
-        <a href="/agents/five-whys-analyzer/" class="quick-agent-card">
+        <a href="/agents/pdf-summarizer/" class="quick-agent-card">
-            <div class="agent-icon">🤔</div>
+            <div class="agent-icon">📄</div>
             <div class="agent-info">
-                <h4>Five Whys Analyzer</h4>
+                <h4>PDF Summarizer</h4>
-                <p>Problem analysis method</p>
+                <p>Analyze and summarize PDFs</p>
             </div>
         </a>
     </div>

workflows/templates/workflows/components/quick_agents_panel.html

@@ -35,11 +35,11 @@
                 </div>
             </a>
 
-            <a href="/agents/data-analyzer/" class="quick-agent-card">
+            <a href="/agents/pdf-summarizer/" class="quick-agent-card">
-                <div class="agent-icon">📊</div>
+                <div class="agent-icon">📄</div>
                 <div class="agent-info">
-                    <h4>Data Analyzer</h4>
+                    <h4>PDF Summarizer</h4>
-                    <p>AI-powered data analysis</p>
+                    <p>Analyze and summarize PDFs</p>
                 </div>
             </a>
         {% endif %}