# 🧪 ПРОМПТ: Тестирование и Исправление UI Системы Мониторинга Сигналов
## 📋 КОНТЕКСТ ПРОЕКТА
Ты работаешь с **TRADE COPILOT** - AI Trading System для криптовалютной торговли на Bybit.
**Технологический стек:**
- **Backend**: Python (MCP Server), SQLite для хранения сигналов
- **Frontend**: TypeScript, Vite, Vanilla JS компоненты (классы)
- **UI Framework**: Кастомные компоненты без фреймворков
- **Стили**: CSS модули с CSS Custom Properties
**Расположение проекта:**
- Backend: `/Users/Gyber/GYBERNATY-ECOSYSTEM/TRADER-AGENT/mcp_server/`
- Frontend: `/Users/Gyber/GYBERNATY-ECOSYSTEM/TRADER-AGENT/bybit-mcp/webui/`
---
## 🎯 ЧТО БЫЛО ДОБАВЛЕНО
### 1. Система Мониторинга Сигналов
**Новые файлы:**
**Backend:**
- `mcp_server/telegram_bot.py` - добавлен метод `edit_message()`
- `mcp_server/signal_tracker.py` - добавлено хранение `telegram_message_ids`
- `mcp_server/telegram_signal_updater.py` - **НОВЫЙ** класс для обновления Telegram постов
- `mcp_server/signal_price_monitor.py` - интегрировано обновление Telegram
**Frontend:**
- `bybit-mcp/webui/src/components/SignalMonitoringPanel.ts` - **НОВЫЙ** компонент мониторинга
- `bybit-mcp/webui/src/styles/signal-monitoring.css` - **НОВЫЙ** файл стилей
- `bybit-mcp/webui/src/components/MainLayout.ts` - добавлена интеграция компонента
**Документация:**
- `SIGNAL_MONITORING_SYSTEM.md` - полная документация
- `SIGNAL_MONITORING_QUICK_START.md` - быстрый старт
---
## 🐛 ИЗВЕСТНЫЕ ПРОБЛЕМЫ
### TypeScript Ошибки Компиляции:
1. **`AIReasoningViewer.ts`** (строки 269, 271, 273, 275):
```
error TS2339: Property 'style' does not exist on type 'Element'.
```
**Проблема**: Используется `Element` вместо `HTMLElement` для доступа к `style`
2. **`TradingDashboard.ts`** (строка 370):
```
error TS2345: Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
```
**Проблема**: Передается `Element` где требуется `HTMLElement`
3. **`headerMetrics.ts`** (строка 19):
```
error TS6133: 'lastDailyPnl' is declared but its value is never read.
```
**Проблема**: Неиспользуемая переменная
### Потенциальные Проблемы:
4. **SignalMonitoringPanel.ts**:
- Использует `as any` для обхода типов MCP tools
- Может не работать если MCP tools не зарегистрированы
- Нет обработки ошибок при отсутствии данных
5. **MainLayout.ts**:
- Компонент добавлен, но может не отображаться если MainLayout не используется в main.ts
6. **CSS**:
- Стили могут конфликтовать с существующими
- Нет responsive дизайна для мобильных устройств
---
## ✅ ЗАДАЧИ ДЛЯ ТЕБЯ
### ФАЗА 1: Исправление TypeScript Ошибок
1. **Исправить `AIReasoningViewer.ts`:**
- Найти строки 269, 271, 273, 275
- Заменить `Element` на `HTMLElement` или добавить type assertion
- Убедиться что элементы существуют перед доступом к `style`
2. **Исправить `TradingDashboard.ts`:**
- Найти строку 370
- Добавить type assertion `as HTMLElement` или проверку типа
- Убедиться что элемент существует
3. **Исправить `headerMetrics.ts`:**
- Удалить неиспользуемую переменную `lastDailyPnl` или использовать её
### ФАЗА 2: Исправление SignalMonitoringPanel
4. **Улучшить типизацию:**
- Создать правильные типы для MCP tool results
- Убрать `as any` где возможно
- Добавить проверки типов
5. **Добавить обработку ошибок:**
- Обработка случая когда MCP tools недоступны
- Обработка пустых данных
- Показ понятных сообщений об ошибках пользователю
6. **Проверить интеграцию:**
- Убедиться что компонент инициализируется в MainLayout
- Проверить что контейнер существует в DOM
- Добавить fallback если MainLayout не используется
### ФАЗА 3: Тестирование UI
7. **Проверить отображение:**
- Компонент должен отображаться в правой колонке MainLayout
- Статистика должна показываться корректно
- Карточки сигналов должны рендериться правильно
8. **Проверить функциональность:**
- Кнопка обновления работает
- Автообновление работает (каждые 30 секунд)
- Фильтры работают
- Сортировка работает
9. **Проверить стили:**
- Все элементы отображаются корректно
- Цвета соответствуют дизайн-системе
- Анимации работают плавно
- Responsive дизайн работает
### ФАЗА 4: Интеграция с Backend
10. **Проверить MCP Tools:**
- `get_active_signals` должен возвращать список сигналов
- `get_price_snapshots` должен возвращать snapshots для сигнала
- Обработать случаи когда tools не зарегистрированы
11. **Проверить данные:**
- Сигналы загружаются корректно
- Snapshots обогащают данные правильно
- Прогресс к TP рассчитывается правильно
- P/L отображается корректно
### ФАЗА 5: Улучшения
12. **Добавить loading states:**
- Skeleton screens при загрузке
- Spinner при обновлении
- Плавные transitions
13. **Добавить empty states:**
- Красивое отображение когда нет сигналов
- Подсказки что делать
14. **Оптимизировать производительность:**
- Debounce для обновлений
- Виртуализация для больших списков
- Мемоизация вычислений
---
## 🔍 ИНСТРУКЦИИ ПО ТЕСТИРОВАНИЮ
### 1. Запуск Проекта
```bash
# Терминал 1: MCP Server
cd /Users/Gyber/GYBERNATY-ECOSYSTEM/TRADER-AGENT/bybit-mcp
pnpm start:http
# Терминал 2: WebUI Dev Server
cd /Users/Gyber/GYBERNATY-ECOSYSTEM/TRADER-AGENT/bybit-mcp/webui
pnpm dev
```
### 2. Открыть в Браузере
```
http://localhost:3000
```
### 3. Проверить Компонент
1. Открой DevTools (F12)
2. Проверь Console на ошибки
3. Найди компонент SignalMonitoringPanel в DOM
4. Проверь что данные загружаются
5. Проверь что автообновление работает
### 4. Проверить Функциональность
- [ ] Компонент отображается
- [ ] Статистика показывается
- [ ] Сигналы загружаются
- [ ] Карточки сигналов рендерятся
- [ ] Фильтры работают
- [ ] Сортировка работает
- [ ] Автообновление работает
- [ ] Кнопка обновления работает
- [ ] Нет ошибок в консоли
- [ ] Стили применяются корректно
---
## 📝 ЧЕКЛИСТ ИСПРАВЛЕНИЙ
### Критичные (Must Fix):
- [ ] Все TypeScript ошибки исправлены
- [ ] Проект компилируется без ошибок (`pnpm build`)
- [ ] Компонент инициализируется без ошибок
- [ ] Данные загружаются корректно
- [ ] Нет ошибок в консоли браузера
### Важные (Should Fix):
- [ ] Убраны все `as any` где возможно
- [ ] Добавлена обработка ошибок
- [ ] Добавлены loading states
- [ ] Добавлены empty states
- [ ] Улучшена типизация
### Желательные (Nice to Have):
- [ ] Добавлены анимации
- [ ] Оптимизирована производительность
- [ ] Добавлен responsive дизайн
- [ ] Добавлены tooltips
- [ ] Улучшена доступность (a11y)
---
## 🎨 ДИЗАЙН СИСТЕМА
**Цвета:**
```css
--copilot-primary: #00D9FF;
--profit: #00FF88;
--loss: #FF3366;
--bg-primary: #0A0E27;
--bg-secondary: #141B2D;
--bg-card: #1A2132;
```
**Типографика:**
- Font: 'Inter' для UI, 'JetBrains Mono' для данных
- Размеры: от 12px до 48px
**Spacing:**
- От 4px до 64px (--space-1 до --space-16)
**Анимации:**
- Fast: 150ms
- Base: 250ms
- Slow: 350ms
---
## 🔧 ТЕХНИЧЕСКИЕ ДЕТАЛИ
### Структура SignalMonitoringPanel:
```typescript
class SignalMonitoringPanel {
- container: HTMLElement
- updateInterval: NodeJS.Timeout
- signals: Signal[]
- autoUpdateEnabled: boolean
+ constructor(containerId: string)
- initialize(): void
- renderPanel(): void
- setupEventListeners(): void
- loadSignals(): Promise<void>
- enrichSignalsData(): Promise<void>
- renderStats(): void
- renderSignals(): void
- renderSignalCard(signal: Signal): string
- filterSignals(filter: string): void
- sortSignals(sortBy: string): void
- startAutoUpdate(): void
- stopAutoUpdate(): void
}
```
### MCP Tools Используемые:
1. **`get_active_signals`**
- Возвращает: `List[Dict[str, Any]]` - список активных сигналов
- Формат: JSON массив сигналов
2. **`get_price_snapshots`**
- Параметры: `signal_id: str, limit: int`
- Возвращает: `List[Dict[str, Any]]` - список snapshots
### Структура Signal:
```typescript
interface Signal {
signal_id: string;
symbol: string;
side: string;
entry_price: number;
stop_loss: number;
take_profit: number;
current_price?: number;
confluence_score: number;
probability: number;
risk_reward: number;
status: 'active' | 'completed' | 'cancelled';
result?: string;
created_at: string;
unrealized_pnl_pct?: number;
progress_to_tp?: number;
distance_to_sl?: number;
distance_to_tp?: number;
time_in_trade?: string;
}
```
---
## 🚀 ПЛАН ДЕЙСТВИЙ
1. **Прочитай все файлы:**
- `bybit-mcp/webui/src/components/SignalMonitoringPanel.ts`
- `bybit-mcp/webui/src/components/MainLayout.ts`
- `bybit-mcp/webui/src/components/AIReasoningViewer.ts`
- `bybit-mcp/webui/src/components/TradingDashboard.ts`
- `bybit-mcp/webui/src/utils/headerMetrics.ts`
2. **Исправь все TypeScript ошибки:**
- Используй правильные типы
- Добавь type assertions где нужно
- Удали неиспользуемые переменные
3. **Улучши SignalMonitoringPanel:**
- Улучши типизацию
- Добавь обработку ошибок
- Добавь loading/empty states
4. **Протестируй:**
- Запусти проект
- Проверь все функции
- Убедись что нет ошибок
5. **Оптимизируй:**
- Улучши производительность
- Добавь анимации
- Улучши UX
---
## 📋 ФИНАЛЬНЫЙ ЧЕКЛИСТ
После выполнения всех задач:
- [ ] Проект компилируется: `cd bybit-mcp/webui && pnpm build`
- [ ] Нет TypeScript ошибок
- [ ] Нет ошибок в консоли браузера
- [ ] Компонент отображается корректно
- [ ] Все функции работают
- [ ] Стили применяются правильно
- [ ] Данные загружаются и обновляются
- [ ] Код чистый и хорошо структурирован
- [ ] Добавлены комментарии где нужно
- [ ] Документация обновлена
---
## 💡 ДОПОЛНИТЕЛЬНЫЕ УЛУЧШЕНИЯ
Если всё работает, можно добавить:
1. **Графики:**
- Sparklines для прогресса сигналов
- График P/L во времени
2. **Уведомления:**
- Toast уведомления при обновлениях
- Звуковые сигналы при важных событиях
3. **Экспорт:**
- Экспорт списка сигналов в CSV/JSON
- Печать отчета
4. **Фильтры:**
- По символу
- По стороне (LONG/SHORT)
- По статусу
- По диапазону дат
5. **Детали сигнала:**
- Модальное окно с полной информацией
- История изменений цены
- График прогресса
---
## 🎯 ЦЕЛЬ
Создать **идеально работающий** компонент мониторинга сигналов:
- ✅ Без ошибок компиляции
- ✅ Без ошибок в runtime
- ✅ С правильной типизацией
- ✅ С обработкой ошибок
- ✅ С красивым UI
- ✅ С хорошей производительностью
- ✅ С отличным UX
**Начни с исправления TypeScript ошибок, затем протестируй всё и улучши где нужно!**
---
**Удачи! 🚀**
