# 🎨 TRADE COPILOT - UX/UI Design Document
**Версия:** 1.0
**Дата:** 2024
**Статус:** Complete Design Specification
---
## 📋 Содержание
1. [Анализ проекта](#1-анализ-проекта)
2. [Стратегия дизайна](#2-стратегия-дизайна)
3. [Design System](#3-design-system)
4. [Архитектура UI](#4-архитектура-ui)
5. [Детальный дизайн компонентов](#5-детальный-дизайн-компонентов)
6. [План реализации](#6-план-реализации)
---
## 1. Анализ проекта
### 1.1 Текущее состояние
**Технологический стек:**
- Vite + TypeScript
- Vanilla JS компоненты (классы)
- CSS модули (16 файлов стилей)
- TradingView Lightweight Charts (для графиков)
- MCP Client для интеграции с серверами
**Существующие компоненты (14):**
1. `TradingDashboard.ts` - Dashboard с позициями (803 строки)
2. `ChatApp.ts` - AI чат интерфейс (907 строк)
3. `TradingOperationsPanel.ts` - Торговые операции (529 строк)
4. `MarketScannerPanel.ts` - Сканирование рынка (415 строк)
5. `SignalQualityPanel.ts` - Контроль качества сигналов (611 строк)
6. `AIReasoningViewer.ts` - Визуализация AI анализа (362 строки)
7. `AlertsPanel.ts` - Система алертов (267 строк)
8. `ActionHistoryTimeline.ts` - История действий (235 строк)
9. `LiveLogViewer.ts` - Real-time логи (293 строки)
10. `AgentDashboard.ts` - Dashboard агента (436 строк)
11. `MainLayout.ts` - Главный layout (243 строки)
12. `ToolsManager.ts` - Управление MCP tools (710 строк)
13. `DebugConsole.ts` - Debug консоль (208 строк)
14. `DataVerificationPanel.ts` - Панель верификации данных (409 строк)
**Подкомпоненты:**
- `MessageRenderer.ts` - Рендеринг сообщений (322 строки)
- `DataCard.ts` - Карточки данных (506 строк)
**Дизайн-система:**
- `variables.css` - CSS Custom Properties (193 строки)
- 16 CSS модулей для компонентов
- Система цветов, типографики, spacing, анимаций
### 1.2 Выявленные проблемы
**Визуальные:**
- ❌ Отсутствует четкий брендинг "TRADE COPILOT"
- ❌ Нет визуальной иерархии (все элементы одного уровня)
- ❌ Простые таблицы вместо визуализаций
- ❌ Минимальные анимации и micro-interactions
- ❌ Нет premium look & feel
**Функциональные:**
- ⚠️ TradingDashboard использует простые таблицы вместо карточек
- ⚠️ AIReasoningViewer показывает только текстовый вывод
- ⚠️ Отсутствуют мини-графики (sparklines) для позиций
- ⚠️ Нет визуализации confluence scoring
- ⚠️ Простые списки вместо интерактивных элементов
**UX:**
- ⚠️ Нет четкой навигации между функциями
- ⚠️ Отсутствуют quick actions
- ⚠️ Нет визуальной обратной связи при действиях
- ⚠️ Простые loading states
### 1.3 Возможности улучшения
**Премиум дизайн:**
- ✅ Glassmorphism эффекты
- ✅ Градиентные акценты
- ✅ Glow эффекты для AI элементов
- ✅ Smooth animations
- ✅ Micro-interactions
**Визуализация данных:**
- ✅ Sparklines для позиций
- ✅ Circular progress для confluence
- ✅ Bar charts для breakdowns
- ✅ Color coding везде
- ✅ Real-time updates с анимациями
**Брендинг:**
- ✅ Логотип "TRADE COPILOT"
- ✅ Единая цветовая схема
- ✅ Премиум типографика
- ✅ Узнаваемый визуальный стиль
---
## 2. Стратегия дизайна
### 2.1 Принципы дизайна
**1. AI-First**
- Подчеркивать AI возможности системы
- Визуализировать процесс мышления AI
- Показывать confidence scores и reasoning
- Использовать glow эффекты для AI элементов
**2. Premium Quality**
- Выглядеть как профессиональная платформа ($1000+/месяц)
- Высокое качество визуализаций
- Плавные анимации
- Детальная проработка каждого элемента
**3. Data-Dense но Readable**
- Показывать максимум информации
- Но сохранять читаемость
- Четкая визуальная иерархия
- Умное использование цвета и spacing
**4. Real-Time Focus**
- Все данные обновляются в реальном времени
- Визуальные индикаторы изменений
- Smooth transitions
- Loading states везде
**5. User-Friendly**
- Интуитивная навигация
- Quick actions для частых операций
- Понятная обратная связь
- Accessibility (ARIA, keyboard navigation)
### 2.2 Информационная архитектура
**Главные разделы:**
1. **Dashboard (Hero Section)**
- Portfolio Overview
- AI Status
- Active Positions
- Market Overview
2. **AI Chat**
- Chat interface
- Message rendering
- Tool results visualization
- Citations
3. **Trading Operations**
- Place Order
- Close Position
- Modify Position
- Cancel Order
- Validate Entry
4. **Market Analysis**
- Market Scanner
- Asset Analysis
- Technical Indicators
- Pattern Detection
5. **AI Reasoning**
- Analysis Flow
- Confluence Scoring
- Probability Calculation
- Decision Tree
- Self-Check Checklist
6. **Monitoring & Alerts**
- Alerts Panel
- Action History
- Live Logs
- Signal Quality
7. **Tools & Debug**
- MCP Tools Manager
- Debug Console
- Data Verification
### 2.3 Визуальная иерархия
**Приоритет 1 (Hero):**
- Total Balance (48px+)
- Daily P/L (36px+)
- Active Positions Count
- AI Confidence Score
**Приоритет 2 (Secondary):**
- Position Cards (24px для P/L)
- Market Metrics (20px)
- AI Status (18px)
**Приоритет 3 (Tertiary):**
- Labels (14px)
- Secondary info (12px)
- Timestamps (11px)
### 2.4 Пользовательские сценарии
**Сценарий 1: Быстрый анализ рынка**
1. Открыть Market Scanner
2. Quick Scan → Oversold Assets
3. Просмотр результатов
4. Клик "Analyze" на интересном активе
5. Просмотр детального анализа в Chat
**Сценарий 2: Открытие позиции**
1. Найти возможность через Scanner или Chat
2. Клик "New Trade" в header
3. Заполнение формы Place Order
4. Validate Entry
5. Подтверждение и открытие позиции
6. Мониторинг в Trading Dashboard
**Сценарий 3: Мониторинг позиций**
1. Просмотр Active Positions в Dashboard
2. Клик на позицию для деталей
3. Просмотр P/L и прогресса к TP
4. Modify SL/TP при необходимости
5. Close Position когда достигнут TP
**Сценарий 4: AI анализ актива**
1. Запрос в Chat: "Analyze BTCUSDT"
2. AI выполняет multi-step анализ
3. Просмотр Reasoning Process в AIReasoningViewer
4. Просмотр Confluence Score
5. Просмотр Probability и Decision Tree
6. Принятие решения на основе анализа
---
## 3. Design System
### 3.1 Цветовая палитра
```css
/* Primary - AI/System Colors */
--copilot-primary: #00D9FF; /* Яркий циан - основной цвет AI */
--copilot-primary-dark: #0099CC; /* Темный циан */
--copilot-primary-light: #33E0FF; /* Светлый циан */
--copilot-primary-alpha: rgba(0, 217, 255, 0.1);
/* Trading Colors */
--profit: #00FF88; /* Зеленый для прибыли */
--loss: #FF3366; /* Красный для убытков */
--neutral: #FFAA00; /* Оранжевый для нейтрального */
/* Background Colors - Dark Theme */
--bg-primary: #0A0E27; /* Темно-синий фон */
--bg-secondary: #141B2D; /* Вторичный фон */
--bg-tertiary: #1E2538; /* Третичный фон */
--bg-card: #1A2132; /* Фон карточек */
--bg-elevated: #1A2132; /* Фон elevated элементов */
--bg-overlay: rgba(0, 0, 0, 0.7); /* Фон overlay */
/* Text Colors */
--text-primary: #FFFFFF; /* Основной текст */
--text-secondary: #B0B8C8; /* Вторичный текст */
--text-muted: #6B7280; /* Приглушенный текст */
--text-inverse: #FFFFFF; /* Инвертированный текст */
/* Border Colors */
--border-primary: rgba(255, 255, 255, 0.1);
--border-secondary: rgba(255, 255, 255, 0.05);
--border-focus: var(--copilot-primary);
/* Accents */
--accent-purple: #8B5CF6; /* Фиолетовый акцент */
--accent-blue: #3B82F6; /* Синий акцент */
--accent-gradient: linear-gradient(135deg, #00D9FF 0%, #8B5CF6 100%);
```
### 3.2 Типографика
**Font Families:**
```css
--font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
```
**Font Sizes:**
```css
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
```
**Font Weights:**
```css
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```
### 3.3 Spacing System
```css
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
```
### 3.4 Border Radius
```css
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 1rem; /* 16px */
--radius-2xl: 1.5rem; /* 24px */
--radius-full: 9999px;
```
### 3.5 Shadows & Effects
```css
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
--shadow-glow: 0 0 20px rgba(0, 217, 255, 0.3);
--shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
```
### 3.6 Animations & Transitions
```css
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 350ms ease;
--transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
```
### 3.7 Iconography System
**Использование эмодзи как иконок (текущее):**
- 🤖 AI / Agent
- 📊 Analytics / Charts
- 💰 Trading / Money
- ⚡ Actions / Quick
- 🔍 Search / Analysis
- 🚨 Alerts / Critical
- ✅ Success / Check
- ❌ Error / Close
- 📈 Profit / Up
- 📉 Loss / Down
**Рекомендация:** В будущем заменить на SVG иконки для лучшего контроля и масштабирования.
### 3.8 Animation Principles
**Типы анимаций:**
1. **Micro-interactions:**
- Hover: lift (translateY -4px), glow, scale
- Click: ripple effect, scale down
- Focus: ring glow
2. **State Transitions:**
- Loading → Success: fade in + scale
- Error: shake animation
- Updates: blink effect
3. **Data Updates:**
- Number counting: 0 → value
- Progress fill: smooth width transition
- Chart updates: fade in new data
4. **Page Transitions:**
- View switching: fade + slide
- Modal: scale + fade
- Panel: slide from side
### 3.9 Component Library Structure
**Base Components:**
- Button (primary, secondary, danger, ghost)
- Input (text, number, select, checkbox)
- Card (base, elevated, glass)
- Badge (status, count, label)
- Progress (linear, circular)
- Modal (overlay, content, header, footer)
- Tooltip (hover, click)
- Dropdown (menu, select)
**Composite Components:**
- PositionCard
- MetricCard
- AlertCard
- ActionCard
- LogEntry
- ChartPanel
### 3.10 Accessibility Guidelines
**WCAG AA Compliance:**
- Color contrast ratio ≥ 4.5:1 для текста
- Color contrast ratio ≥ 3:1 для UI элементов
- Focus indicators на всех интерактивных элементах
- Keyboard navigation для всех функций
- ARIA labels для screen readers
- Semantic HTML структура
**Keyboard Shortcuts:**
- `Ctrl/Cmd + K` - Focus chat input
- `Ctrl/Cmd + M` - Toggle Agent Dashboard
- `Ctrl/Cmd + D` - Toggle Data Verification
- `Ctrl/Cmd + ` ` - Toggle Debug Console
- `Escape` - Close modals/panels
- `Tab` - Navigate между элементами
---
## 4. Архитектура UI
### 4.1 Глобальная структура
```
┌─────────────────────────────────────────────────┐
│ HEADER (sticky, 64px height) │
│ [Logo] [Metrics] [Quick Actions] [Controls] │
├──────────┬────────────────────────────────────┤
│ SIDEBAR │ MAIN CONTENT AREA │
│ (16rem) │ │
│ │ ┌─────────────────────────────────┐ │
│ [Nav] │ │ VIEW CONTENT │ │
│ │ │ (Chat/Tools/Dashboard) │ │
│ │ └─────────────────────────────────┘ │
│ │ │
│ │ [Overlay Panels] │
│ │ - Trading Operations │
│ │ - Market Scanner │
│ │ - Signal Quality │
│ │ - Agent Dashboard │
│ │ - Data Verification │
└──────────┴────────────────────────────────────┘
│ DEBUG CONSOLE (fixed bottom, collapsible) │
└─────────────────────────────────────────────────┘
```
### 4.2 Grid System
**Основной Grid:**
```css
.main-container {
display: grid;
grid-template-rows: var(--header-height) 1fr;
height: 100vh;
}
.main-content {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
```
**Dashboard Grid:**
```css
.hero-dashboard {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-6);
}
.positions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--space-6);
}
```
### 4.3 Responsive Breakpoints
```css
/* Mobile First Approach */
/* Base: < 768px */
/* Tablet */
@media (min-width: 768px) {
.sidebar { width: var(--sidebar-width); }
}
/* Desktop */
@media (min-width: 1024px) {
.hero-grid { grid-template-columns: 2fr 1fr; }
}
/* Large Desktop */
@media (min-width: 1440px) {
.positions-grid { grid-template-columns: repeat(4, 1fr); }
}
```
### 4.4 Z-index Layers
```css
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
```
### 4.5 User Flows
**Flow 1: Market Analysis → Trade**
```
Market Scanner → Quick Scan → Results → Analyze Asset →
AI Analysis → Confluence Score → Validate Entry →
Place Order → Position Opened → Monitor
```
**Flow 2: Position Management**
```
Trading Dashboard → Position Card → View Details →
Modify SL/TP → Confirm → Position Updated →
Monitor → Close Position
```
**Flow 3: AI Reasoning Review**
```
Chat Request → AI Analysis → Reasoning Viewer →
Step-by-step Review → Confluence Breakdown →
Probability Check → Decision Tree → Final Decision
```
---
## 5. Детальный дизайн компонентов
### 5.1 Header Component
**HTML Structure:**
```html
<header class="header">
<div class="header-content">
<!-- Logo Section -->
<div class="logo">
<div class="logo-icon">🤖</div>
<div class="logo-text">
<h1 class="logo-title">TRADE COPILOT</h1>
<span class="logo-subtitle">AI Trading System</span>
</div>
<span class="version">v1.0.0</span>
</div>
<!-- Metrics Bar -->
<div class="header-metrics">
<div class="metric-item">
<span class="metric-label">Balance</span>
<span class="metric-value" id="header-balance">$0.00</span>
</div>
<!-- ... more metrics ... -->
</div>
<!-- Actions -->
<div class="header-actions">
<button class="quick-action-btn primary">New Trade</button>
<!-- ... more actions ... -->
</div>
</div>
</header>
```
**CSS Styles:**
```css
.header {
position: sticky;
top: 0;
height: var(--header-height);
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
border-bottom: 1px solid var(--border-primary);
box-shadow: var(--shadow-md);
z-index: var(--z-sticky);
backdrop-filter: blur(10px);
background-color: rgba(20, 27, 45, 0.95);
}
.logo-title {
font-size: var(--text-xl);
font-weight: var(--font-bold);
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.quick-action-btn.primary {
background: var(--accent-gradient);
color: var(--text-inverse);
box-shadow: var(--shadow-glow);
}
.quick-action-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(0, 217, 255, 0.4);
}
```
**Улучшения:**
- ✅ Добавить pulse анимацию для logo-icon когда AI активен
- ✅ Добавить counting animation для метрик
- ✅ Добавить glow эффект для primary кнопок
- ✅ Улучшить responsive поведение (скрывать метрики на мобильных)
### 5.2 TradingDashboard Component
**Текущий статус:**
- Использует простые таблицы для позиций
- Базовые карточки для portfolio
- Минимальные визуализации
**Улучшенный дизайн:**
**Portfolio Overview Card:**
```html
<div class="portfolio-overview-card">
<div class="portfolio-header-section">
<div>
<div class="portfolio-label">Total Portfolio Value</div>
<div class="portfolio-main-value" id="balance-value">$30.00</div>
<div class="portfolio-change-section positive">
<span>+0.00%</span>
<span>📈</span>
</div>
</div>
<button class="refresh-btn hover-lift">🔄</button>
</div>
<div class="portfolio-sparkline" id="portfolio-sparkline"></div>
</div>
```
**Position Card (Enhanced):**
```html
<div class="position-card-enhanced profitable" data-symbol="BTCUSDT">
<div class="position-card-header">
<div class="position-symbol-section">
<div class="symbol-icon-large">BT</div>
<div>
<div class="symbol-name-large">BTCUSDT</div>
<span class="side-badge-large long">LONG</span>
</div>
</div>
<span class="status-indicator status-healthy">🟢</span>
</div>
<div class="position-prices-section">
<div class="price-item-enhanced">
<div class="price-label-enhanced">Entry</div>
<div class="price-value-enhanced">$50,000.00</div>
</div>
<div class="price-item-enhanced">
<div class="price-label-enhanced">Current</div>
<div class="price-value-enhanced positive">$51,000.00</div>
</div>
</div>
<div class="position-pnl-section">
<div class="pnl-value-large positive">+$100.00</div>
<div class="pnl-percentage-large positive">+2.00%</div>
<div class="pnl-progress-enhanced">
<div class="pnl-progress-bar-enhanced" style="width: 50%"></div>
</div>
</div>
<div class="position-sparkline-enhanced" id="sparkline-BTCUSDT"></div>
<div class="position-actions-enhanced">
<button class="action-btn view-details">👁️ Details</button>
<button class="action-btn close-position">❌ Close</button>
</div>
</div>
```
**CSS Enhancements:**
```css
.position-card-enhanced {
background: var(--bg-card);
border: 2px solid var(--border-primary);
border-radius: var(--radius-xl);
padding: var(--space-6);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.position-card-enhanced.profitable {
border-left: 4px solid var(--profit);
}
.position-card-enhanced.losing {
border-left: 4px solid var(--loss);
}
.position-card-enhanced:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--copilot-primary);
}
.position-card-enhanced:hover .position-actions-enhanced {
opacity: 1;
}
.pnl-value-large {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
font-family: var(--font-family-mono);
}
.pnl-value-large.positive {
color: var(--profit);
}
.pnl-value-large.negative {
color: var(--loss);
}
```
**Улучшения:**
- ✅ Заменить таблицы на карточки
- ✅ Добавить mini sparklines для каждой позиции
- ✅ Добавить progress bars для прогресса к TP
- ✅ Улучшить hover эффекты
- ✅ Добавить counting animations для P/L
### 5.3 ChatApp Component
**Текущий статус:**
- Базовый чат интерфейс
- Простой рендеринг сообщений
- Базовая поддержка markdown
**Улучшенный дизайн:**
**Message Card:**
```html
<div class="chat-message" data-message-id="msg_123">
<div class="message-header">
<div class="message-avatar user">U</div>
<span class="message-name">You</span>
<span class="message-time">14:32:15</span>
</div>
<div class="message-content user">
Analyze BTCUSDT
</div>
</div>
<div class="chat-message" data-message-id="msg_124">
<div class="message-header">
<div class="message-avatar">AI</div>
<span class="message-name">Assistant</span>
<span class="message-time">14:32:18</span>
</div>
<div class="message-content">
<!-- Markdown content -->
<div class="message-text">
<h3>BTCUSDT Analysis</h3>
<p>Current price: $50,000</p>
<!-- ... -->
</div>
<!-- Data Card if tool result -->
<div class="message-data-card">
<!-- DataCard component -->
</div>
<!-- Citations -->
<div class="message-citations">
<span class="citation-ref" data-reference-id="REF001">[REF001]</span>
</div>
</div>
</div>
```
**CSS Enhancements:**
```css
.chat-message {
margin-bottom: var(--space-6);
animation: fadeIn 0.3s ease-out;
}
.message-content {
background-color: var(--bg-secondary);
padding: var(--space-4);
border-radius: var(--radius-lg);
margin-left: 2.5rem;
border: 1px solid var(--border-primary);
}
.message-content.user {
background-color: var(--copilot-primary);
color: var(--text-inverse);
margin-left: 0;
margin-right: 2.5rem;
}
.citation-ref {
color: var(--copilot-primary);
text-decoration: underline;
cursor: pointer;
transition: color var(--transition-base);
}
.citation-ref:hover {
color: var(--copilot-primary-light);
text-decoration: none;
}
```
**Улучшения:**
- ✅ Улучшить стили сообщений
- ✅ Добавить анимации появления
- ✅ Улучшить рендеринг markdown
- ✅ Добавить hover эффекты для citations
- ✅ Улучшить DataCard интеграцию
### 5.4 AIReasoningViewer Component
**Текущий статус:**
- Базовый текстовый вывод
- Простые progress bars
- Минимальная визуализация
**Улучшенный дизайн:**
**Confluence Score Circular Progress:**
```html
<div class="confluence-circular">
<div class="circular-progress" style="--progress: 8.5">
<div class="circular-value">8.5</div>
</div>
</div>
```
**CSS:**
```css
.circular-progress {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(--profit) 0deg,
var(--profit) calc(var(--progress) * 36deg),
var(--bg-tertiary) calc(var(--progress) * 36deg),
var(--bg-tertiary) 360deg
);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.circular-progress::before {
content: '';
position: absolute;
width: 80%;
height: 80%;
border-radius: 50%;
background: var(--bg-card);
}
.circular-value {
position: relative;
z-index: 1;
font-size: var(--text-4xl);
font-weight: var(--font-bold);
color: var(--text-primary);
font-family: var(--font-family-mono);
}
```
**Analysis Flow Steps:**
```html
<div class="analysis-flow">
<div class="flow-step">
<div class="step-badge completed">1</div>
<div class="step-content">
<div class="step-content-title">BTC Analysis</div>
<div class="step-content-details">Checked BTC trend...</div>
<div class="step-content-time">0.5s</div>
</div>
</div>
<!-- ... more steps ... -->
</div>
```
**Улучшения:**
- ✅ Добавить circular progress для confluence
- ✅ Улучшить визуализацию analysis flow
- ✅ Добавить анимации для step transitions
- ✅ Улучшить decision tree visualization
- ✅ Добавить интерактивность
### 5.5 TradingOperationsPanel Component
**Текущий статус:**
- Функциональные формы
- Базовые стили
- Простые результаты
**Улучшенный дизайн:**
**Form Enhancements:**
```css
.trading-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form-group label {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
}
.form-group input,
.form-group select {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-primary);
font-size: var(--text-base);
transition: all var(--transition-base);
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--copilot-primary);
box-shadow: 0 0 0 3px var(--copilot-primary-alpha);
}
.btn-primary {
padding: var(--space-3) var(--space-6);
background: var(--accent-gradient);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-lg);
font-weight: var(--font-semibold);
cursor: pointer;
transition: all var(--transition-base);
box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(0, 217, 255, 0.4);
}
```
**Улучшения:**
- ✅ Улучшить стили форм
- ✅ Добавить focus states
- ✅ Улучшить кнопки
- ✅ Добавить loading states
- ✅ Улучшить результаты операций
### 5.6 MarketScannerPanel Component
**Текущий статус:**
- Функциональные quick scans
- Базовые карточки результатов
- Простые стили
**Улучшенный дизайн:**
**Opportunity Card:**
```html
<div class="opportunity-card" data-symbol="ETHUSDT">
<div class="card-header">
<div class="symbol-info">
<h4>ETHUSDT</h4>
<span class="side-badge long">LONG</span>
</div>
<div class="score-badge high">8.5</div>
</div>
<div class="card-body">
<div class="price-info">
<div class="price-item">
<span class="label">Price:</span>
<span class="value">$3,000.00</span>
</div>
<!-- ... more price info ... -->
</div>
<div class="entry-plan">
<div class="plan-item">
<span class="label">Entry:</span>
<span class="value">$2,950.00</span>
</div>
<!-- ... more plan items ... -->
</div>
<div class="probability-bar">
<div class="prob-label">Probability: 75%</div>
<div class="prob-bar">
<div class="prob-fill" style="width: 75%"></div>
</div>
</div>
</div>
<div class="card-actions">
<button class="btn-secondary analyze-btn">Analyze</button>
<button class="btn-primary trade-btn">Trade</button>
</div>
</div>
```
**CSS:**
```css
.opportunity-card {
background: var(--bg-card);
border: 2px solid var(--border-primary);
border-radius: var(--radius-xl);
padding: var(--space-6);
transition: all var(--transition-base);
}
.opportunity-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--copilot-primary);
}
.score-badge.high {
background: rgba(0, 255, 136, 0.2);
color: var(--profit);
border: 1px solid var(--profit);
}
.probability-bar {
margin-top: var(--space-4);
}
.prob-bar {
height: 8px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
overflow: hidden;
}
.prob-fill {
height: 100%;
background: var(--accent-gradient);
border-radius: var(--radius-full);
transition: width var(--transition-slow);
}
```
**Улучшения:**
- ✅ Улучшить карточки возможностей
- ✅ Добавить цветовое кодирование score
- ✅ Улучшить probability bars
- ✅ Добавить hover эффекты
- ✅ Улучшить кнопки действий
### 5.7 SignalQualityPanel Component
**Текущий статус:**
- Функциональные метрики
- Простые таблицы
- Базовые стили
**Улучшенный дизайн:**
**Metrics Grid:**
```html
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-icon">📊</div>
<div class="metric-label">Total Signals</div>
<div class="metric-value">42</div>
<div class="metric-change positive">+5 today</div>
</div>
<!-- ... more metrics ... -->
</div>
```
**CSS:**
```css
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
}
.metric-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: var(--radius-lg);
padding: var(--space-6);
text-align: center;
transition: all var(--transition-base);
}
.metric-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--copilot-primary);
}
.metric-value {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
font-family: var(--font-family-mono);
}
```
**Улучшения:**
- ✅ Улучшить метрики карточки
- ✅ Добавить иконки
- ✅ Добавить hover эффекты
- ✅ Улучшить таблицу сигналов
- ✅ Добавить цветовое кодирование
### 5.8 AlertsPanel Component
**Текущий статус:**
- Функциональные алерты
- Простые карточки
- Базовые стили
**Улучшенный дизайн:**
**Alert Card:**
```html
<div class="alert-item alert-critical" data-id="alert-123">
<div class="alert-icon">🚨</div>
<div class="alert-content">
<div class="alert-message">Position at risk: BTCUSDT</div>
<div class="alert-meta">
<span class="alert-symbol">BTCUSDT</span>
<span class="alert-time">2m ago</span>
</div>
</div>
<button class="alert-dismiss">✕</button>
</div>
```
**CSS:**
```css
.alert-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background: var(--bg-card);
border-left: 4px solid;
border-radius: var(--radius-md);
margin-bottom: var(--space-2);
animation: slideInRight 0.3s ease-out;
}
.alert-item.alert-critical {
border-left-color: var(--loss);
background: rgba(255, 51, 102, 0.1);
}
.alert-item.alert-warning {
border-left-color: var(--neutral);
background: rgba(255, 170, 0, 0.1);
}
.alert-item.alert-info {
border-left-color: var(--copilot-primary);
background: rgba(0, 217, 255, 0.1);
}
.alert-item.alert-success {
border-left-color: var(--profit);
background: rgba(0, 255, 136, 0.1);
}
```
**Улучшения:**
- ✅ Улучшить цветовое кодирование
- ✅ Добавить slide-in анимации
- ✅ Улучшить dismiss анимации
- ✅ Добавить звуковые уведомления
- ✅ Улучшить группировку
### 5.9 ActionHistoryTimeline Component
**Текущий статус:**
- Функциональная временная шкала
- Простые карточки действий
- Базовые фильтры
**Улучшенный дизайн:**
**Timeline Visualization:**
```html
<div class="timeline-list">
<div class="timeline-item action-trading" data-id="action-123">
<div class="timeline-time">14:32:15</div>
<div class="timeline-icon">⚡</div>
<div class="timeline-content">
<div class="timeline-message">
<span class="action-symbol">BTCUSDT</span>
Position opened: LONG @ $50,000
</div>
<button class="toggle-details">Details ▼</button>
<div class="action-details hidden">
<pre>{...}</pre>
</div>
</div>
</div>
<!-- ... more items ... -->
</div>
```
**CSS:**
```css
.timeline-list {
position: relative;
padding-left: var(--space-8);
}
.timeline-list::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-primary);
}
.timeline-item {
position: relative;
padding: var(--space-4);
margin-bottom: var(--space-4);
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-primary);
}
.timeline-item::before {
content: '';
position: absolute;
left: -30px;
top: 50%;
width: 20px;
height: 2px;
background: var(--border-primary);
}
.timeline-icon {
position: absolute;
left: -40px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--bg-card);
border: 2px solid var(--border-primary);
display: flex;
align-items: center;
justify-content: center;
}
```
**Улучшения:**
- ✅ Добавить визуальную временную шкалу
- ✅ Улучшить карточки действий
- ✅ Добавить цветовое кодирование
- ✅ Улучшить expand/collapse
- ✅ Добавить smooth scroll
### 5.10 LiveLogViewer Component
**Текущий статус:**
- Функциональный лог-вьюер
- Базовое форматирование
- Простые фильтры
**Улучшенный дизайн:**
**Log Entry:**
```html
<div class="log-entry log-error">
<span class="log-time">14:32:15.123</span>
<span class="log-level">[ERROR]</span>
<span class="log-source">bybit-trading</span>
<span class="log-message">Failed to place order</span>
<button class="log-data-toggle">📋</button>
</div>
```
**CSS:**
```css
.log-entry {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
margin-bottom: var(--space-1);
border-left: 3px solid;
border-radius: var(--radius-sm);
font-family: var(--font-family-mono);
font-size: var(--text-xs);
}
.log-entry.log-error {
border-left-color: var(--loss);
background: rgba(255, 51, 102, 0.1);
}
.log-entry.log-warning {
border-left-color: var(--neutral);
background: rgba(255, 170, 0, 0.1);
}
.log-entry.log-info {
border-left-color: var(--copilot-primary);
background: rgba(0, 217, 255, 0.1);
}
.log-time {
color: var(--text-muted);
min-width: 100px;
}
.log-level {
font-weight: var(--font-bold);
min-width: 60px;
}
```
**Улучшения:**
- ✅ Улучшить цветовое кодирование
- ✅ Улучшить форматирование
- ✅ Добавить expand для длинных сообщений
- ✅ Улучшить фильтры
- ✅ Добавить smooth scroll
### 5.11 AgentDashboard Component
**Текущий статус:**
- Функциональные метрики
- Простые карточки
- Базовые стили
**Улучшенный дизайн:**
**Stats Grid:**
```html
<div class="stats-grid">
<div class="stat-item">
<span class="stat-label">Conversations:</span>
<span class="stat-value">12</span>
</div>
<!-- ... more stats ... -->
</div>
```
**CSS:**
```css
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
}
.stat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4);
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-primary);
}
.stat-value {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--copilot-primary);
font-family: var(--font-family-mono);
}
```
**Улучшения:**
- ✅ Улучшить метрики карточки
- ✅ Добавить иконки
- ✅ Добавить hover эффекты
- ✅ Улучшить анализ список
- ✅ Добавить визуализации
### 5.12 MainLayout Component
**Текущий статус:**
- 3-колоночный layout
- Resizable панели
- Базовые стили
**Улучшенный дизайн:**
**Layout Structure:**
```html
<div class="main-layout split">
<div class="layout-column column-left" style="width: 40%">
<!-- Chat + AI Reasoning -->
</div>
<div class="column-resizer" data-resizer="left"></div>
<div class="layout-column column-center" style="width: 35%">
<!-- Trading Dashboard + Charts -->
</div>
<div class="column-resizer" data-resizer="center"></div>
<div class="layout-column column-right" style="width: 25%">
<!-- Alerts + History + Logs -->
</div>
</div>
```
**CSS:**
```css
.main-layout {
display: flex;
height: 100%;
position: relative;
}
.layout-column {
display: flex;
flex-direction: column;
overflow: hidden;
}
.column-resizer {
width: 4px;
background: var(--border-primary);
cursor: col-resize;
transition: background var(--transition-base);
}
.column-resizer:hover {
background: var(--copilot-primary);
}
```
**Улучшения:**
- ✅ Улучшить resizer стили
- ✅ Добавить hover эффекты
- ✅ Улучшить responsive поведение
- ✅ Добавить keyboard shortcuts
- ✅ Улучшить сохранение preferences
### 5.13 ToolsManager Component
**Текущий статус:**
- Функциональный менеджер tools
- Базовые карточки
- Простые результаты
**Улучшенный дизайн:**
**Tool Card:**
```html
<div class="tool-card" data-tool="get_ticker">
<div class="tool-header">
<h4>get_ticker</h4>
<button class="test-tool-btn">Test</button>
</div>
<p class="tool-description">Get real-time ticker information</p>
<div class="tool-params">
<!-- Parameters form -->
</div>
<div class="tool-result" id="result-get_ticker">
<!-- Result display -->
</div>
</div>
```
**CSS:**
```css
.tool-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: var(--radius-xl);
padding: var(--space-6);
transition: all var(--transition-base);
}
.tool-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--copilot-primary);
}
.test-tool-btn {
padding: var(--space-2) var(--space-4);
background: var(--copilot-primary);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-weight: var(--font-medium);
cursor: pointer;
transition: all var(--transition-base);
}
.test-tool-btn:hover {
background: var(--copilot-primary-dark);
transform: translateY(-1px);
}
```
**Улучшения:**
- ✅ Улучшить карточки tools
- ✅ Добавить hover эффекты
- ✅ Улучшить результаты display
- ✅ Добавить DataCard интеграцию
- ✅ Улучшить loading states
### 5.14 DebugConsole Component
**Текущий статус:**
- Функциональная консоль
- Базовое форматирование
- Простые фильтры
**Улучшенный дизайн:**
**Console Styles:**
```css
.debug-console {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1a1a1a;
color: #e0e0e0;
border-top: 2px solid #333;
font-family: var(--font-family-mono);
font-size: 12px;
z-index: 1000;
transition: transform 0.3s ease;
}
.debug-console.visible {
transform: translateY(0);
height: 40vh;
}
.debug-console.hidden {
transform: translateY(calc(100% - 40px));
}
.debug-log-entry {
margin-bottom: 4px;
padding: 4px 8px;
border-radius: 4px;
border-left: 3px solid;
}
.debug-log-entry.debug-log-error {
background: rgba(220, 53, 69, 0.1);
border-left-color: #dc3545;
}
```
**Улучшения:**
- ✅ Улучшить цветовое кодирование
- ✅ Улучшить форматирование
- ✅ Добавить expand для данных
- ✅ Улучшить фильтры
- ✅ Добавить smooth transitions
### 5.15 DataVerificationPanel Component
**Текущий статус:**
- Функциональная панель
- Простые карточки citations
- Базовые стили
**Улучшенный дизайн:**
**Citation Item:**
```html
<div class="citation-item" data-reference-id="REF001">
<div class="citation-header">
<span class="reference-id">REF001</span>
<span class="tool-name">get_ticker</span>
<span class="timestamp">2m ago</span>
</div>
<div class="key-metrics">
<div class="metric-item metric-high">
<span class="metric-label">Price:</span>
<span class="metric-value">$50,000</span>
</div>
<!-- ... more metrics ... -->
</div>
<div class="citation-actions">
<button class="btn-view-details">View Details</button>
<button class="btn-copy-data">Copy Data</button>
</div>
</div>
```
**CSS:**
```css
.citation-item {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: var(--radius-lg);
padding: var(--space-4);
margin-bottom: var(--space-3);
transition: all var(--transition-base);
}
.citation-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--copilot-primary);
}
.metric-item.metric-high {
background: rgba(0, 255, 136, 0.1);
border-left: 3px solid var(--profit);
}
```
**Улучшения:**
- ✅ Улучшить карточки citations
- ✅ Добавить цветовое кодирование метрик
- ✅ Улучшить modal для details
- ✅ Добавить hover эффекты
- ✅ Улучшить кнопки действий
---
## 6. План реализации
### 6.1 Фаза 1: Foundation (2-3 часа)
**Задачи:**
1. ✅ Расширить `variables.css` с новыми переменными
2. ✅ Создать `base.css` с reset и базовыми стилями
3. ✅ Обновить `header.css` с брендингом
4. ✅ Создать utility classes
**Файлы для изменения:**
- `bybit-mcp/webui/src/styles/variables.css` - расширить
- `bybit-mcp/webui/src/styles/base.css` - создать/обновить
- `bybit-mcp/webui/src/styles/header.css` - обновить
### 6.2 Фаза 2: Dashboard Enhancement (3-4 часа)
**Задачи:**
1. ✅ Обновить `TradingDashboard.ts` - карточки вместо таблиц
2. ✅ Добавить sparklines для позиций
3. ✅ Улучшить Portfolio Overview Card
4. ✅ Добавить AI Status Card
**Файлы для изменения:**
- `bybit-mcp/webui/src/components/TradingDashboard.ts` - обновить
- `bybit-mcp/webui/src/styles/dashboard.css` - обновить
- `bybit-mcp/webui/src/styles/cards.css` - обновить
### 6.3 Фаза 3: Component Enhancements (4-5 часов)
**Задачи:**
1. ✅ Улучшить `AIReasoningViewer.ts` - circular progress, flow visualization
2. ✅ Улучшить `ChatApp.ts` - message styles, citations
3. ✅ Улучшить `TradingOperationsPanel.ts` - form styles
4. ✅ Улучшить `MarketScannerPanel.ts` - opportunity cards
5. ✅ Улучшить остальные компоненты
**Файлы для изменения:**
- Все компоненты в `bybit-mcp/webui/src/components/`
- Соответствующие CSS файлы
### 6.4 Фаза 4: Polish & Animations (2-3 часа)
**Задачи:**
1. ✅ Добавить micro-interactions
2. ✅ Добавить loading states
3. ✅ Добавить error states
4. ✅ Добавить success feedback
5. ✅ Оптимизировать animations
**Файлы для изменения:**
- `bybit-mcp/webui/src/styles/animations.css` - расширить
- Все компоненты - добавить состояния
### 6.5 Фаза 5: Testing & Optimization (1-2 часа)
**Задачи:**
1. ✅ Browser testing (Chrome, Firefox, Safari)
2. ✅ Performance optimization
3. ✅ Accessibility check
4. ✅ Mobile responsiveness
5. ✅ Code review
### 6.6 Примеры кода для интеграции
**Расширение variables.css:**
```css
/* Добавить в variables.css */
/* Iconography */
--icon-size-sm: 16px;
--icon-size-md: 24px;
--icon-size-lg: 32px;
--icon-size-xl: 48px;
/* Component specific */
--card-padding: var(--space-6);
--card-border-width: 2px;
--button-height: 40px;
--input-height: 40px;
/* Animation durations */
--animation-fast: 150ms;
--animation-base: 250ms;
--animation-slow: 350ms;
```
**Обновление TradingDashboard:**
```typescript
// В TradingDashboard.ts добавить методы для sparklines
private renderPositionSparklines(): void {
this.positions.forEach(pos => {
const sparklineContainer = this.container.querySelector(`#sparkline-${pos.symbol}`);
if (sparklineContainer) {
const sparklineData = this.generateSparklineData(pos);
Sparkline.render({
values: sparklineData,
color: pos.unrealized_pnl_pct >= 0 ? 'var(--profit)' : 'var(--loss)',
width: 350,
height: 50
}, sparklineContainer as HTMLElement);
}
});
}
```
**Обновление AIReasoningViewer:**
```typescript
// В AIReasoningViewer.ts добавить circular progress
private renderConfluenceCircular(score: number): void {
const circularEl = this.container.querySelector('.confluence-circular');
if (circularEl) {
circularEl.style.setProperty('--progress', score.toString());
// Update value
const valueEl = circularEl.querySelector('.circular-value');
if (valueEl) {
valueEl.textContent = score.toFixed(1);
}
}
}
```
### 6.7 Интеграция с существующим кодом
**Сохранение обратной совместимости:**
- ✅ Все существующие классы остаются
- ✅ Новые классы добавляются с префиксом `enhanced-`
- ✅ Постепенная миграция компонентов
- ✅ Feature flags для новых стилей
**Миграционная стратегия:**
1. Добавить новые стили параллельно старым
2. Обновить компоненты по одному
3. Тестировать каждый компонент отдельно
4. Удалить старые стили после миграции
### 6.8 Тестирование
**Чеклист тестирования:**
- [ ] Все компоненты рендерятся корректно
- [ ] Все анимации работают плавно
- [ ] Все интерактивные элементы реагируют
- [ ] Responsive дизайн работает на всех размерах
- [ ] Accessibility проверки пройдены
- [ ] Performance оптимизирован
- [ ] Browser compatibility проверена
---
## 7. Заключение
Этот дизайн-документ предоставляет полную спецификацию для трансформации UI в премиум интерфейс TRADE COPILOT. Все компоненты детально описаны с примерами кода, CSS стилей и HTML структур.
**Следующие шаги:**
1. Реализовать Фазу 1 (Foundation)
2. Постепенно обновлять компоненты
3. Тестировать на каждом этапе
4. Собирать feedback и итерировать
**Критерии успеха:**
- ✅ UI выглядит как premium платформа
- ✅ Все компоненты улучшены согласно спецификации
- ✅ Анимации плавные и профессиональные
- ✅ Брендинг "TRADE COPILOT" узнаваем
- ✅ Пользовательский опыт значительно улучшен
---
**Версия документа:** 1.0
**Дата создания:** 2024
**Статус:** Complete Design Specification