src/ui/components.py

"""
UI Components Module
Reusable UI elements and utilities for the Echo MCP Host.
"""

# Emoji mapping for server types - used across UI
EMOJI_MAP = {
    "agentbell": "🔔",
    "voice": "🔊",
    "filesystem": "📂",
    "github": "🐙",
    "brave": "🌐",
    "playwright": "🎭",
    "context7": "📚",
    "slack": "💬",
    "database": "🗄️",
    "sqlite": "🗄️",
    "postgres": "🐘",
    "docker": "🐳",
    "git": "📦",
    "memory": "🧠",
    "search": "🔍",
    "weather": "🌤️",
    "time": "⏰",
    "calculator": "🔢",
    "email": "📧",
    "calendar": "📅",
}

def get_server_emoji(name: str) -> str:
    """Get emoji for a server based on its name."""
    name_lower = name.lower()
    for key, emoji in EMOJI_MAP.items():
        if key in name_lower:
            return emoji
    return "📦"  # Default package emoji


def create_status_badge(text: str, state: str) -> str:
    """
    Generates the HTML for the Neo-Brutalist status badge.
    
    Args:
        text: Display text (e.g., "READY", "PROCESSING")
        state: 'ready', 'active', 'wait', 'error'
    """
    colors = {
        "ready": "#00FF94",   # Neon Green
        "active": "#FF00F5",  # Neon Pink
        "wait": "#FFF500",    # Neon Yellow
        "error": "#FF3333"    # Red
    }
    bg = colors.get(state, "#FFFFFF")
    
    return f"""
    <div style="display: flex; justify-content: flex-end; width: 100%;">
        <div class="neo-status-badge" style="background-color: {bg};">
            <div class="neo-status-text">{text}</div>
        </div>
    </div>
    """


def create_inspector_mock_html() -> str:
    """
    Returns mock HTML for the Protocol Inspector panel.
    Shows example bidirectional communication logs.
    """
    return """
<div class="inspector-panel">
    <div class="inspector-header">
        <span class="inspector-title">// PROTOCOL_INSPECTOR</span>
        <span class="inspector-status">⏸ IDLE</span>
    </div>
    <div class="inspector-log">
        <div class="log-entry outgoing">
            <span class="log-direction">→ OUT</span>
            <span class="log-method">initialize</span>
            <pre class="log-payload">{"capabilities": {"experimental": {"agentbell_context": true}}}</pre>
        </div>
        <div class="log-entry incoming">
            <span class="log-direction">← IN</span>
            <span class="log-method">initialize (response)</span>
            <pre class="log-payload">{"serverInfo": {"name": "agentbell-server", "version": "1.0.0"}}</pre>
        </div>
        <div class="log-entry outgoing">
            <span class="log-direction">→ OUT</span>
            <span class="log-method">notifications/client_state</span>
            <pre class="log-payload">{"state": "blocking", "reason": "User confirmation required for: rm -rf"}</pre>
        </div>
        <div class="log-entry incoming highlight">
            <span class="log-direction">← IN</span>
            <span class="log-method">notifications/agent_bell/speak</span>
            <pre class="log-payload">{"text": "Warning! High risk command detected. Please confirm."}</pre>
        </div>
    </div>
    <div class="inspector-footer">
        <span>Bidirectional State Sync: <strong style="color: var(--accent-tertiary);">ACTIVE</strong></span>
    </div>
</div>
"""