Download index.html from brainable/se4: direct link, hf CLI and curl.
- Browser
- Download file 87.5 kB
-
https://huggingface.co/spaces/brainable/se4/resolve/main/index.html
- Command line
-
hf download hf://spaces/brainable/se4/index.html
-
curl -L -o index.html https://huggingface.co/spaces/brainable/se4/resolve/main/index.html
87.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MCP Configuration | AgentBuilder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#00ff9d', | |
| secondary: '#00b4ff', | |
| dark: '#0a0a0a', | |
| darker: '#050505', | |
| light: '#f0f0f0', | |
| gray: { | |
| 800: '#1e1e1e', | |
| 700: '#2d2d2d', | |
| 600: '#3a3a3a', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['Roboto Mono', 'monospace'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'blink': 'blink 1s step-end infinite', | |
| }, | |
| keyframes: { | |
| blink: { | |
| '0%, 100%': { opacity: '1' }, | |
| '50%': { opacity: '0' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .terminal-input::before { | |
| content: '> '; | |
| color: #00ff9d; | |
| } | |
| .code-block { | |
| position: relative; | |
| } | |
| .code-block::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, #00ff9d, #00b4ff); | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 10px rgba(0, 255, 157, 0.5); | |
| } | |
| .glow-effect:hover { | |
| box-shadow: 0 0 15px rgba(0, 255, 157, 0.7); | |
| } | |
| .sidebar-item:hover { | |
| background: linear-gradient(90deg, rgba(0, 255, 157, 0.1) 0%, rgba(0, 255, 157, 0) 100%); | |
| border-left: 2px solid #00ff9d; | |
| } | |
| .sidebar-item.active { | |
| background: linear-gradient(90deg, rgba(0, 255, 157, 0.2) 0%, rgba(0, 255, 157, 0) 100%); | |
| border-left: 2px solid #00ff9d; | |
| } | |
| .tab-item { | |
| position: relative; | |
| } | |
| .tab-item.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: #00ff9d; | |
| } | |
| .status-active { | |
| background-color: rgba(0, 255, 157, 0.1); | |
| color: #00ff9d; | |
| } | |
| .status-draft { | |
| background-color: rgba(0, 180, 255, 0.1); | |
| color: #00b4ff; | |
| } | |
| .status-paused { | |
| background-color: rgba(255, 165, 0, 0.1); | |
| color: #ffa500; | |
| } | |
| .status-error { | |
| background-color: rgba(255, 0, 0, 0.1); | |
| color: #ff5555; | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| background-color: #1e1e1e; | |
| min-width: 160px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border: 1px solid #2d2d2d; | |
| border-radius: 6px; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .dropdown-content a { | |
| color: #f0f0f0; | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| display: block; | |
| font-size: 14px; | |
| } | |
| .dropdown-content a:hover { | |
| background-color: #2d2d2d; | |
| } | |
| .config-section { | |
| border: 1px solid #2d2d2d; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .config-header { | |
| background-color: #1e1e1e; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid #2d2d2d; | |
| cursor: pointer; | |
| } | |
| .config-content { | |
| background-color: #1a1a1a; | |
| padding: 16px; | |
| } | |
| .channel-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .channel-1 { background-color: #00ff9d; } | |
| .channel-2 { background-color: #00b4ff; } | |
| .channel-3 { background-color: #ff00ff; } | |
| .channel-4 { background-color: #ffaa00; } | |
| .channel-5 { background-color: #ff5555; } | |
| .channel-6 { background-color: #aa00ff; } | |
| .slider-thumb::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #00ff9d; | |
| cursor: pointer; | |
| } | |
| .slider-thumb::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #00ff9d; | |
| cursor: pointer; | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #00ff9d; | |
| background-color: #00ff9d; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: rgba(0, 255, 157, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-light font-sans flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-darker border-r border-gray-800 flex flex-col"> | |
| <div class="p-4 border-b border-gray-800 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-dark"></i> | |
| </div> | |
| <h1 class="text-xl font-bold"> | |
| <span class="text-primary">Agent</span>Builder | |
| </h1> | |
| </div> | |
| <div class="p-4 border-b border-gray-800"> | |
| <button class="w-full bg-primary hover:bg-opacity-90 text-dark font-semibold py-2 px-4 rounded-md flex items-center justify-center transition-all"> | |
| <i class="fas fa-save mr-2"></i> Save Configuration | |
| </button> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Configuration Sections</h3> | |
| <a href="#general" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-cog mr-3 text-gray-400"></i> | |
| <span>General Settings</span> | |
| </a> | |
| <a href="#channels" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-sliders-h mr-3 text-gray-400"></i> | |
| <span>Channel Configuration</span> | |
| </a> | |
| <a href="#routing" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-random mr-3 text-gray-400"></i> | |
| <span>Routing Rules</span> | |
| </a> | |
| <a href="#processing" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-microchip mr-3 text-gray-400"></i> | |
| <span>Processing Pipeline</span> | |
| </a> | |
| <a href="#monitoring" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-chart-line mr-3 text-gray-400"></i> | |
| <span>Monitoring & Alerts</span> | |
| </a> | |
| <a href="#api" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-code mr-3 text-gray-400"></i> | |
| <span>API Integration</span> | |
| </a> | |
| <a href="#security" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-lock mr-3 text-gray-400"></i> | |
| <span>Security Settings</span> | |
| </a> | |
| </div> | |
| <div class="p-2 mt-4"> | |
| <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Quick Actions</h3> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-clone mr-3 text-gray-400"></i> | |
| <span>Clone Configuration</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-file-export mr-3 text-gray-400"></i> | |
| <span>Export Config</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-history mr-3 text-gray-400"></i> | |
| <span>Version History</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">John Doe</div> | |
| <div class="text-xs text-gray-500">Admin</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <div class="bg-darker border-b border-gray-800 p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <h2 class="text-xl font-bold"> | |
| <span class="text-primary">MCP</span> Configuration | |
| </h2> | |
| <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded font-mono"> | |
| <span class="text-primary">Multi-Channel Processor</span> v2.4.1 | |
| </div> | |
| <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded"> | |
| <span class="text-primary">Status:</span> <span class="status-active px-2 py-0.5 rounded-full text-xs">Active</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md px-4 py-2 text-sm mr-3 transition-all"> | |
| <i class="fas fa-play mr-2 text-green-500"></i> Start Processor | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md px-4 py-2 text-sm mr-3 transition-all"> | |
| <i class="fas fa-stop mr-2 text-red-500"></i> Stop | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md px-4 py-2 text-sm transition-all"> | |
| <i class="fas fa-redo mr-2 text-secondary"></i> Restart | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- General Settings --> | |
| <div id="general" class="config-section mb-6"> | |
| <div class="config-header flex items-center justify-between"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-cog mr-2 text-primary"></i> General Settings | |
| </h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i> | |
| </div> | |
| <div class="config-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Processor Name</label> | |
| <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="Customer Support MCP"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Processor ID</label> | |
| <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="MCP-CC-2023-001" disabled> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Description</label> | |
| <textarea class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent h-24">Multi-channel processor for handling customer support across email, chat, and social media platforms.</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Owner</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>Support Team</option> | |
| <option>Marketing Team</option> | |
| <option>Operations Team</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Execution Mode</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio text-primary" name="execution_mode" checked> | |
| <span class="ml-2">Real-time</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio text-primary" name="execution_mode"> | |
| <span class="ml-2">Batch</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio text-primary" name="execution_mode"> | |
| <span class="ml-2">Hybrid</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Logging Level</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>Debug</option> | |
| <option selected>Info</option> | |
| <option>Warning</option> | |
| <option>Error</option> | |
| <option>Critical</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Channel Configuration --> | |
| <div id="channels" class="config-section mb-6"> | |
| <div class="config-header flex items-center justify-between"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-sliders-h mr-2 text-primary"></i> Channel Configuration | |
| </h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i> | |
| </div> | |
| <div class="config-content"> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-medium">Input Channels</h4> | |
| <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-plus mr-1"></i> Add Channel | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Channel 1 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="channel-indicator channel-1"></span> | |
| <span class="font-medium">Email</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Type:</span> | |
| <span>SMTP</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Status:</span> | |
| <span>Connected</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Throughput:</span> | |
| <span>12 msg/min</span> | |
| </div> | |
| </div> | |
| <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| Configure | |
| </button> | |
| </div> | |
| <!-- Channel 2 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="channel-indicator channel-2"></span> | |
| <span class="font-medium">Web Chat</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Type:</span> | |
| <span>WebSocket</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Status:</span> | |
| <span>Connected</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Throughput:</span> | |
| <span>24 msg/min</span> | |
| </div> | |
| </div> | |
| <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| Configure | |
| </button> | |
| </div> | |
| <!-- Channel 3 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="channel-indicator channel-3"></span> | |
| <span class="font-medium">Twitter</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-paused text-xs px-2 py-0.5 rounded-full">Paused</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Type:</span> | |
| <span>API</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Status:</span> | |
| <span>Disconnected</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Throughput:</span> | |
| <span>0 msg/min</span> | |
| </div> | |
| </div> | |
| <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| Configure | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-medium">Output Channels</h4> | |
| <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-plus mr-1"></i> Add Channel | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Channel 4 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="channel-indicator channel-4"></span> | |
| <span class="font-medium">CRM System</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Type:</span> | |
| <span>REST API</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Status:</span> | |
| <span>Connected</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Throughput:</span> | |
| <span>18 msg/min</span> | |
| </div> | |
| </div> | |
| <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| Configure | |
| </button> | |
| </div> | |
| <!-- Channel 5 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="channel-indicator channel-5"></span> | |
| <span class="font-medium">Database</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Type:</span> | |
| <span>SQL</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Status:</span> | |
| <span>Connected</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Throughput:</span> | |
| <span>32 msg/min</span> | |
| </div> | |
| </div> | |
| <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| Configure | |
| </button> | |
| </div> | |
| <!-- Channel 6 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="channel-indicator channel-6"></span> | |
| <span class="font-medium">Analytics</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-error text-xs px-2 py-0.5 rounded-full">Error</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Type:</span> | |
| <span>Webhook</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Status:</span> | |
| <span>Connection Failed</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Throughput:</span> | |
| <span>0 msg/min</span> | |
| </div> | |
| </div> | |
| <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| Configure | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Routing Rules --> | |
| <div id="routing" class="config-section mb-6"> | |
| <div class="config-header flex items-center justify-between"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-random mr-2 text-primary"></i> Routing Rules | |
| </h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i> | |
| </div> | |
| <div class="config-content"> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-medium">Routing Table</h4> | |
| <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-plus mr-1"></i> Add Rule | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-gray-800 border border-gray-700 rounded-lg"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="px-4 py-2 text-left text-sm font-medium">Priority</th> | |
| <th class="px-4 py-2 text-left text-sm font-medium">Condition</th> | |
| <th class="px-4 py-2 text-left text-sm font-medium">Input Channel</th> | |
| <th class="px-4 py-2 text-left text-sm font-medium">Output Channel</th> | |
| <th class="px-4 py-2 text-left text-sm font-medium">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-700"> | |
| <td class="px-4 py-3 text-sm">1</td> | |
| <td class="px-4 py-3 text-sm">Content contains "billing"</td> | |
| <td class="px-4 py-3 text-sm">Email, Web Chat</td> | |
| <td class="px-4 py-3 text-sm">Billing Team Queue</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <button class="text-gray-500 hover:text-primary mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700"> | |
| <td class="px-4 py-3 text-sm">2</td> | |
| <td class="px-4 py-3 text-sm">Language is "Spanish"</td> | |
| <td class="px-4 py-3 text-sm">All</td> | |
| <td class="px-4 py-3 text-sm">Spanish Support Team</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <button class="text-gray-500 hover:text-primary mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700"> | |
| <td class="px-4 py-3 text-sm">3</td> | |
| <td class="px-4 py-3 text-sm">Sentiment is "Negative"</td> | |
| <td class="px-4 py-3 text-sm">Twitter, Email</td> | |
| <td class="px-4 py-3 text-sm">Escalation Team</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <button class="text-gray-500 hover:text-primary mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 text-sm">4</td> | |
| <td class="px-4 py-3 text-sm">Default Route</td> | |
| <td class="px-4 py-3 text-sm">All</td> | |
| <td class="px-4 py-3 text-sm">General Support Queue</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <button class="text-gray-500 hover:text-primary mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4">Advanced Routing Options</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Load Balancing Strategy</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>Round Robin</option> | |
| <option selected>Least Connections</option> | |
| <option>Weighted Distribution</option> | |
| <option>Priority Based</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Failover Strategy</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option selected>Automatic Retry</option> | |
| <option>Fallback Channel</option> | |
| <option>Dead Letter Queue</option> | |
| <option>Notify Admin</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Timeout (ms)</label> | |
| <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="5000"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Max Retries</label> | |
| <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="3"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Processing Pipeline --> | |
| <div id="processing" class="config-section mb-6"> | |
| <div class="config-header flex items-center justify-between"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-microchip mr-2 text-primary"></i> Processing Pipeline | |
| </h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i> | |
| </div> | |
| <div class="config-content"> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-4">Pipeline Stages</h4> | |
| <div class="space-y-4"> | |
| <!-- Stage 1 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <span class="text-primary font-mono">1</span> | |
| </div> | |
| <span class="font-medium">Message Validation</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3 pl-11"> | |
| Validates incoming messages for required fields and format compliance. | |
| </div> | |
| <div class="flex items-center space-x-4 pl-11"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> Avg: 12ms | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 98% success | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stage 2 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <span class="text-primary font-mono">2</span> | |
| </div> | |
| <span class="font-medium">Language Detection</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3 pl-11"> | |
| Identifies the language of the message content for proper routing. | |
| </div> | |
| <div class="flex items-center space-x-4 pl-11"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> Avg: 45ms | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 94% accuracy | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stage 3 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <span class="text-primary font-mono">3</span> | |
| </div> | |
| <span class="font-medium">Sentiment Analysis</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3 pl-11"> | |
| Analyzes the emotional tone of messages for priority handling. | |
| </div> | |
| <div class="flex items-center space-x-4 pl-11"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> Avg: 78ms | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 89% accuracy | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stage 4 --> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <span class="text-primary font-mono">4</span> | |
| </div> | |
| <span class="font-medium">Content Classification</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span> | |
| <button class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3 pl-11"> | |
| Categorizes messages into predefined topics for routing. | |
| </div> | |
| <div class="flex items-center space-x-4 pl-11"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> Avg: 112ms | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 92% accuracy | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Stage Button --> | |
| <div class="flex justify-center"> | |
| <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-4 py-2 rounded transition-all flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Processing Stage | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4">Advanced Processing Options</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Max Processing Time (ms)</label> | |
| <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Batch Size</label> | |
| <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="50"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Concurrency Limit</label> | |
| <div class="flex items-center"> | |
| <input type="range" min="1" max="100" value="20" class="slider-thumb w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <span class="ml-3 text-sm">20</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Error Handling</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>Continue on error</option> | |
| <option selected>Skip to next stage</option> | |
| <option>Stop processing</option> | |
| <option>Retry with backoff</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium mb-2">Custom Processing Script</label> | |
| <div class="code-block bg-gray-900 border border-gray-700 rounded-md p-4 font-mono text-sm"> | |
| <div class="text-gray-500 mb-2">// Add custom JavaScript processing logic here</div> | |
| <div class="text-gray-400"> | |
| <span class="text-purple-500">function</span> <span class="text-primary">processMessage</span>(message) {<br> | |
| <span class="text-gray-500">// Your custom logic</span><br> | |
| <span class="text-purple-500">return</span> message;<br> | |
| } | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Monitoring & Alerts --> | |
| <div id="monitoring" class="config-section mb-6"> | |
| <div class="config-header flex items-center justify-between"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-primary"></i> Monitoring & Alerts | |
| </h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i> | |
| </div> | |
| <div class="config-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium mb-4">Performance Metrics</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <label class="text-sm font-medium">Enable Real-time Monitoring</label> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Metrics Collection Interval</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>1 second</option> | |
| <option>5 seconds</option> | |
| <option selected>15 seconds</option> | |
| <option>30 seconds</option> | |
| <option>1 minute</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Retention Period</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>1 day</option> | |
| <option>7 days</option> | |
| <option selected>30 days</option> | |
| <option>90 days</option> | |
| <option>1 year</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4">Alert Configuration</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Error Threshold</label> | |
| <div class="flex items-center"> | |
| <input type="range" min="0" max="100" value="10" class="slider-thumb w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <span class="ml-3 text-sm">10%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Latency Threshold (ms)</label> | |
| <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Notification Channels</label> | |
| <div class="space-y-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-primary" checked> | |
| <span class="ml-2">Email</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-primary" checked> | |
| <span class="ml-2">Slack</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-primary"> | |
| <span class="ml-2">SMS</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-primary"> | |
| <span class="ml-2">Webhook</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <h4 class="font-medium mb-4">Current Performance</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="text-sm text-gray-400 mb-1">Message Throughput</div> | |
| <div class="text-xl font-bold">1,248 <span class="text-sm text-gray-500">msg/min</span></div> | |
| <div class="text-xs text-green-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12% from last hour | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="text-sm text-gray-400 mb-1">Avg Processing Time</div> | |
| <div class="text-xl font-bold">142 <span class="text-sm text-gray-500">ms</span></div> | |
| <div class="text-xs text-red-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8% from last hour | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="text-sm text-gray-400 mb-1">Error Rate</div> | |
| <div class="text-xl font-bold">2.4 <span class="text-sm text-gray-500">%</span></div> | |
| <div class="text-xs text-green-500 mt-1"> | |
| <i class="fas fa-arrow-down mr-1"></i> 0.6% from last hour | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- API Integration --> | |
| <div id="api" class="config-section mb-6"> | |
| <div class="config-header flex items-center justify-between"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-code mr-2 text-primary"></i> API Integration | |
| </h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i> | |
| </div> | |
| <div class="config-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium mb-4">REST API Configuration</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">API Base URL</label> | |
| <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="https://api.agentbuilder.com/v1/mcp"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Authentication Method</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>API Key</option> | |
| <option selected>OAuth 2.0</option> | |
| <option>JWT</option> | |
| <option>Basic Auth</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">API Key</label> | |
| <div class="flex"> | |
| <input type="password" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="sk_live_1234567890abcdef"> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 rounded-r-md"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Rate Limit</label> | |
| <div class="flex items-center space-x-2"> | |
| <input type="number" class="w-20 bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="100"> | |
| <span class="text-sm text-gray-500">requests per minute</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4">Webhook Configuration</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Webhook URL</label> | |
| <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="https://webhook.agentbuilder.com/callback"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Events to Subscribe</label> | |
| <div class="space-y-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-primary" checked> | |
| <span class="ml-2">Message Received</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-primary" checked> | |
| <span class="ml-2">Message Processed</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-primary"> | |
| <span class="ml-2">Error Occurred</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-primary"> | |
| <span class="ml-2">Status Change</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Retry Policy</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>No retry</option> | |
| <option selected>Linear (3 attempts)</option> | |
| <option>Exponential backoff</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Secret Token</label> | |
| <input type="password" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="secret_token_123"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <h4 class="font-medium mb-4">API Documentation</h4> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-book text-primary mr-2"></i> | |
| <span class="font-medium">MCP API Reference</span> | |
| </div> | |
| <a href="#" class="text-sm text-primary hover:underline">View Full Documentation</a> | |
| </div> | |
| <div class="text-sm text-gray-400 mb-3"> | |
| Complete API reference for integrating with this MCP instance programmatically. | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="#" class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded"> | |
| <i class="fas fa-code mr-1"></i> cURL Examples | |
| </a> | |
| <a href="#" class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded"> | |
| <i class="fab fa-js mr-1"></i> JavaScript SDK | |
| </a> | |
| <a href="#" class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded"> | |
| <i class="fab fa-python mr-1"></i> Python Library | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Settings --> | |
| <div id="security" class="config-section mb-6"> | |
| <div class="config-header flex items-center justify-between"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-lock mr-2 text-primary"></i> Security Settings | |
| </h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i> | |
| </div> | |
| <div class="config-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium mb-4">Authentication</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Require Authentication</label> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Allowed IP Ranges</label> | |
| <textarea class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent h-24">192.168.1.0/24 | |
| 10.0.0.0/8 | |
| 172.16.0.0/12</textarea> | |
| <div class="text-xs text-gray-500 mt-1">Enter one IP range per line</div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Session Timeout</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>15 minutes</option> | |
| <option>30 minutes</option> | |
| <option selected>1 hour</option> | |
| <option>4 hours</option> | |
| <option>Never</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4">Data Protection</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Data Encryption</label> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Encryption Method</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" disabled> | |
| <option selected>AES-256</option> | |
| <option>RSA-4096</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Data Retention</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <option>7 days</option> | |
| <option selected>30 days</option> | |
| <option>90 days</option> | |
| <option>1 year</option> | |
| <option>Indefinitely</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <h4 class="font-medium mb-4">Audit Log</h4> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-history text-primary mr-2"></i> | |
| <span class="font-medium">Recent Activity</span> | |
| </div> | |
| <a href="#" class="text-sm text-primary hover:underline">View Full Log</a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead> | |
| <tr class="text-left text-xs text-gray-500"> | |
| <th class="pb-2">Timestamp</th> | |
| <th class="pb-2">User</th> | |
| <th class="pb-2">Action</th> | |
| <th class="pb-2">Details</th> | |
| </tr> | |
| </thead> | |
| <tbody class="text-sm"> | |
| <tr class="border-b border-gray-700"> | |
| <td class="py-2">2023-06-15 14:32:10</td> | |
| <td class="py-2">john.doe</td> | |
| <td class="py-2">Configuration Updated</td> | |
| <td class="py-2">Changed routing rules</td> | |
| </tr> | |
| <tr class="border-b border-gray-700"> | |
| <td class="py-2">2023-06-15 13:45:22</td> | |
| <td class="py-2">system</td> | |
| <td class="py-2">Processor Restarted</td> | |
| <td class="py-2">Manual restart</td> | |
| </tr> | |
| <tr class="border-b border-gray-700"> | |
| <td class="py-2">2023-06-15 11:20:05</td> | |
| <td class="py-2">jane.smith</td> | |
| <td class="py-2">Channel Added</td> | |
| <td class="py-2">Twitter input channel</td> | |
| </tr> | |
| <tr> | |
| <td class="py-2">2023-06-15 09:15:33</td> | |
| <td class="py-2">john.doe</td> | |
| <td class="py-2">Security Settings Updated</td> | |
| <td class="py-2">Enabled data encryption</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Save/Cancel Buttons --> | |
| <div class="flex justify-end space-x-4 mt-8"> | |
| <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md px-6 py-2 text-sm transition-all"> | |
| Cancel | |
| </button> | |
| <button class="bg-primary hover:bg-opacity-90 text-dark font-medium rounded-md px-6 py-2 transition-all"> | |
| <i class="fas fa-save mr-2"></i> Save Configuration | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle config sections | |
| document.querySelectorAll('.config-header').forEach(header => { | |
| header.addEventListener('click', function() { | |
| const content = this.nextElementSibling; | |
| const icon = this.querySelector('.fa-chevron-down'); | |
| if (content.style.display === 'none') { | |
| content.style.display = 'block'; | |
| icon.classList.remove('rotate-180'); | |
| } else { | |
| content.style.display = 'none'; | |
| icon.classList.add('rotate-180'); | |
| } | |
| }); | |
| }); | |
| // Initialize all sections as open | |
| document.querySelectorAll('.config-content').forEach(content => { | |
| content.style.display = 'block'; | |
| }); | |
| // Toggle password visibility | |
| document.querySelectorAll('.fa-eye').forEach(eye => { | |
| eye.addEventListener('click', function() { | |
| const input = this.parentNode.querySelector('input'); | |
| if (input.type === 'password') { | |
| input.type = 'text'; | |
| this.classList.remove('fa-eye'); | |
| this.classList.add('fa-eye-slash'); | |
| } else { | |
| input.type = 'password'; | |
| this.classList.remove('fa-eye-slash'); | |
| this.classList.add('fa-eye'); | |
| } | |
| }); | |
| }); | |
| // Update slider value display | |
| document.querySelectorAll('input[type="range"]').forEach(slider => { | |
| const valueDisplay = slider.nextElementSibling; | |
| slider.addEventListener('input', function() { | |
| valueDisplay.textContent = this.value + (this.getAttribute('min') === '0' ? '%' : ''); | |
| }); | |
| }); | |
| // Sidebar navigation | |
| const sidebarItems = document.querySelectorAll('.sidebar-item'); | |
| sidebarItems.forEach(item => { | |
| item.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetSection = document.querySelector(targetId); | |
| if (targetSection) { | |
| // Close all sections first | |
| document.querySelectorAll('.config-content').forEach(content => { | |
| content.style.display = 'none'; | |
| content.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180'); | |
| }); | |
| // Open target section | |
| targetSection.querySelector('.config-content').style.display = 'block'; | |
| targetSection.querySelector('.fa-chevron-down').classList.add('rotate-180'); | |
| // Scroll to section | |
| targetSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Update active sidebar item | |
| sidebarItems.forEach(i => i.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=brainable/se4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |