<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bybit MCP WebUI</title>
<meta name="description" content="Modern web interface for Bybit MCP server with AI chat capabilities" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Preload critical CSS to prevent layout shift -->
<link rel="preload" href="/src/styles/main.css" as="style" />
</head>
<body>
<div id="app">
<!-- Loading spinner -->
<div id="loading" class="loading-container">
<div class="loading-spinner"></div>
<p>Loading Bybit MCP WebUI...</p>
</div>
<!-- Main application container -->
<div id="main-container" class="main-container hidden">
<!-- Header -->
<header class="header">
<div class="header-content">
<div class="logo">
<h1>Bybit MCP</h1>
<span class="version">v1.0.0</span>
</div>
<div class="header-controls">
<button id="agent-dashboard-btn" class="agent-dashboard-btn" aria-label="Agent Dashboard">
<span class="dashboard-icon">🤖</span>
</button>
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
<span class="theme-icon">🌙</span>
</button>
<button id="settings-btn" class="settings-btn" aria-label="Settings">
<span class="settings-icon">⚙️</span>
</button>
</div>
</div>
</header>
<!-- Main content area -->
<main class="main-content">
<!-- Sidebar -->
<aside class="sidebar">
<nav class="nav-menu">
<button class="nav-item active" data-view="chat">
<span class="nav-icon">💬</span>
<span class="nav-label">AI Chat</span>
</button>
<button class="nav-item" data-view="tools">
<span class="nav-icon">🔧</span>
<span class="nav-label">MCP Tools</span>
</button>
<button class="nav-item" data-view="dashboard">
<span class="nav-icon">🤖</span>
<span class="nav-label">Agent Dashboard</span>
</button>
</nav>
</aside>
<!-- Content area -->
<section class="content-area">
<!-- Chat View -->
<div id="chat-view" class="view active">
<div class="chat-container">
<div class="chat-messages" id="chat-messages">
<div class="welcome-message">
<h2>Welcome to Bybit MCP AI Assistant</h2>
<p>Ask me anything about cryptocurrency markets, trading data, or technical analysis!</p>
<div class="example-queries">
<button class="example-query">What's the current BTC price?</button>
<button class="example-query">Check for XRPUSDT order blocks in the 30 minute window</button>
<button class="example-query">Review XRPUSDT over the past week, where is the price likely to go in the next day?</button>
<button class="example-query">Analyse XRPUSDT with ML-RSI</button>
<button class="example-query">Compare XRPUSDT RSI with ML-RSI</button>
<button class="example-query">Show me the latest price candles for XRPUSDT</button>
</div>
</div>
</div>
<div class="chat-input-container">
<div class="chat-input-wrapper">
<textarea
id="chat-input"
class="chat-input"
placeholder="Ask about markets, trading data, or technical analysis..."
rows="1"
></textarea>
<button id="send-btn" class="send-btn" disabled>
<span class="send-icon">➤</span>
</button>
</div>
<div class="input-status">
<span id="connection-status" class="connection-status">🔴 Disconnected</span>
<span id="typing-indicator" class="typing-indicator hidden">AI is typing...</span>
</div>
</div>
</div>
</div>
<!-- Tools View -->
<div id="tools-view" class="view">
<div class="tools-container">
<h2>MCP Tools</h2>
<div class="tools-grid" id="tools-grid">
<!-- Tools will be populated dynamically -->
</div>
</div>
</div>
<!-- Dashboard View -->
<div id="dashboard-view" class="view">
<div class="dashboard-container">
<h2>Agent Dashboard</h2>
<div id="dashboard-content-wrapper">
<!-- Agent dashboard will be embedded here -->
</div>
</div>
</div>
</section>
</main>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h2>Settings</h2>
<button id="close-settings" class="close-btn">×</button>
</div>
<div class="modal-body">
<div class="settings-section">
<h3>AI Configuration</h3>
<label for="ai-endpoint">AI Endpoint:</label>
<input type="url" id="ai-endpoint" placeholder="https://ollama.example.com" />
<label for="ai-model">Model:</label>
<input type="text" id="ai-model" placeholder="qwen3-30b-a3b-ud-nothink-128k:q4_k_xl" />
</div>
<div class="settings-section">
<h3>MCP Server</h3>
<label for="mcp-endpoint">MCP Endpoint:</label>
<input type="url" id="mcp-endpoint" placeholder="(auto-detect current domain)" />
</div>
<div class="settings-section">
<h3>Agent Settings</h3>
<label class="checkbox-label">
<input type="checkbox" id="agent-mode-enabled" />
<span>Enable Agent Mode</span>
<small>Use multi-step reasoning agent instead of simple AI chat</small>
</label>
<label for="max-iterations">Max Iterations:</label>
<input type="number" id="max-iterations" min="1" max="20" value="5" />
<label for="tool-timeout">Tool Timeout (ms):</label>
<input type="number" id="tool-timeout" min="5000" max="120000" step="1000" value="30000" />
<label class="checkbox-label">
<input type="checkbox" id="show-workflow-steps" />
<span>Show Workflow Steps</span>
<small>Display agent reasoning process</small>
</label>
<label class="checkbox-label">
<input type="checkbox" id="show-tool-calls" />
<span>Show Tool Calls</span>
<small>Display tool execution details</small>
</label>
<label class="checkbox-label">
<input type="checkbox" id="enable-debug-mode" />
<span>Debug Mode</span>
<small>Enable verbose logging</small>
</label>
</div>
</div>
<div class="modal-footer">
<button id="save-settings" class="save-btn">Save Settings</button>
</div>
</div>
</div>
<!-- Agent Dashboard -->
<div id="agent-dashboard-container"></div>
<!-- Data Verification Panel -->
<div id="verification-panel-container"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
