quantum-ai-v3/templates/components/quick_agents_panel.html

<div class="quick-agents-overlay" id="quickAgentsOverlay" onclick="closeQuickAgents()" aria-hidden="true"></div>

<div class="quick-agents-panel" id="quickAgentsPanel" role="dialog" aria-labelledby="quickAgentsTitle" aria-hidden="true">
    <div class="quick-agents-header">
        <h3 id="quickAgentsTitle">Quick Access to Other Agents</h3>
        <button class="close-panel" onclick="toggleQuickAgents()" aria-label="Close quick agents panel">×</button>
    </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">
                <h4>Social Ads Generator</h4>
                <p>Create social media ads</p>
            </div>
        </a>

        <a href="/agents/job-posting-generator/" class="quick-agent-card">
            <div class="agent-icon">💼</div>
            <div class="agent-info">
                <h4>Job Posting Generator</h4>
                <p>Create professional job posts</p>
            </div>
        </a>

        <a href="/agents/five-whys-analyzer/" class="quick-agent-card">
            <div class="agent-icon">🤔</div>
            <div class="agent-info">
                <h4>Five Whys Analyzer</h4>
                <p>Problem analysis method</p>
            </div>
        </a>
    </div>

    <div class="quick-agents-footer">
        <a href="{% url 'agent_base:marketplace' %}" class="view-all-agents">View All Agents →</a>
    </div>
</div>