feat: major improvements and fixes

- Fixed Docker permissions issue by running as root user
- Added DEBUG_MODE support with conditional Swagger docs and auto-reload
- Created start.sh script for conditional Uvicorn execution
- Removed verbose debug logs from WebSocket status endpoint
- Added comprehensive screenshots to documentation
- Enhanced help tooltip with full-screen modal design
- Added theme switcher to error page
- Updated documentation with local development and Docker benefits
- Fixed WebSocket status display issues
- Improved hotkey functionality and documentation
- Added detailed project descriptions for local dev and Docker users

Technical improvements:
- Dockerfile: removed appuser switch, simplified permissions
- docker-compose.yml: kept user: 0:0 for Docker socket access
- app.py: removed debug prints, added DEBUG_MODE support
- templates: enhanced UI/UX with better tooltips and themes
- docs: comprehensive updates with new screenshots and descriptions

Dockerfile

@@ -17,7 +17,10 @@ RUN useradd -m appuser && \
 # Создаем директорию для снимков
 RUN mkdir -p /app/snapshots && chown -R appuser:appuser /app
 
-USER appuser
+# Скрипт для запуска с поддержкой DEBUG_MODE
+COPY start.sh /app/start.sh
+RUN chmod 755 /app/start.sh
 
 EXPOSE 9001
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "9001"]
+
+CMD ["/app/start.sh"]

Makefile

@@ -121,9 +121,47 @@ env-check: ## Проверить переменные окружения
 	@if [ -f .env ]; then \
 		echo "$(GREEN)Файл .env найден$(NC)"; \
 		echo "$(YELLOW)Основные переменные:$(NC)"; \
-		grep -E "^(LOGBOARD_PORT|LOGBOARD_USER|LOGBOARD_PASS|SECRET_KEY|ENCRYPTION_KEY)=" .env || echo "$(RED)Переменные не найдены$(NC)"; \
+		grep -E "^(LOGBOARD_PORT|LOGBOARD_USER|LOGBOARD_PASS|SECRET_KEY|ENCRYPTION_KEY|DEBUG_MODE)=" .env || echo "$(RED)Переменные не найдены$(NC)"; \
 	else \
 		echo "$(RED)Файл .env не найден. Запустите make setup$(NC)"; \
 	fi
 
+debug-on: ## Включить режим отладки
+	@echo "$(GREEN)Включение режима отладки...$(NC)"
+	@if [ -f .env ]; then \
+		sed -i 's/^DEBUG_MODE=.*/DEBUG_MODE=true/' .env; \
+		echo "$(GREEN)Режим отладки включен!$(NC)"; \
+		echo "$(YELLOW)Перезапустите сервисы: make restart$(NC)"; \
+	else \
+		echo "$(RED)Файл .env не найден. Запустите make setup$(NC)"; \
+	fi
+
+debug-off: ## Выключить режим отладки
+	@echo "$(GREEN)Выключение режима отладки...$(NC)"
+	@if [ -f .env ]; then \
+		sed -i 's/^DEBUG_MODE=.*/DEBUG_MODE=false/' .env; \
+		echo "$(GREEN)Режим отладки выключен!$(NC)"; \
+		echo "$(YELLOW)Перезапустите сервисы: make restart$(NC)"; \
+	else \
+		echo "$(RED)Файл .env не найден. Запустите make setup$(NC)"; \
+	fi
+
+debug-status: ## Показать статус режима отладки
+	@echo "$(GREEN)Статус режима отладки:$(NC)"
+	@if [ -f .env ]; then \
+		DEBUG_MODE=$$(grep "^DEBUG_MODE=" .env | cut -d'=' -f2 || echo "false"); \
+		if [ "$$DEBUG_MODE" = "true" ]; then \
+			echo "$(GREEN)DEBUG_MODE: ВКЛЮЧЕН$(NC)"; \
+			echo "$(YELLOW)Доступны:$(NC)"; \
+			echo "$(YELLOW)  - Auto-reload при изменении кода$(NC)"; \
+			echo "$(YELLOW)  - Swagger UI: /docs$(NC)"; \
+			echo "$(YELLOW)  - ReDoc: /redoc$(NC)"; \
+		else \
+			echo "$(RED)DEBUG_MODE: ВЫКЛЮЧЕН$(NC)"; \
+			echo "$(YELLOW)Продакшен режим$(NC)"; \
+		fi; \
+	else \
+		echo "$(RED)Файл .env не найден$(NC)"; \
+	fi
+
 

README.md

@@ -13,7 +13,30 @@
 
 ## Описание
 
-LogBoard+ - это современная веб-панель для мониторинга и просмотра логов Docker контейнеров в реальном времени. Приложение предоставляет удобный веб-интерфейс для работы с логами микросервисов, поддерживает множественные проекты Docker Compose и включает в себя функции безопасности.
+LogBoard+ - это современная веб-панель для мониторинга и просмотра логов Docker контейнеров в реальном времени. Приложение идеально подходит для локальной разработки, позволяя разработчикам всегда держать логи микросервисов перед глазами на втором мониторе.
+
+### 🎯 **Идеально для локальной разработки**
+
+LogBoard+ особенно полезен для разработчиков, работающих с микросервисной архитектурой:
+
+- **Второй монитор** - Держите логи всех микросервисов постоянно видимыми
+- **Быстрая отладка** - Мгновенный доступ к логам без переключения между терминалами
+- **Мониторинг в реальном времени** - Видите проблемы сразу, как они возникают
+- **Централизованный просмотр** - Все логи в одном месте, а не в десятках терминалов
+
+### 🐳 **Оптимизирован для Docker и Docker Compose**
+
+Если ваша инфраструктура основана на Docker и Docker Compose, LogBoard+ станет незаменимым инструментом:
+
+- **Автоматическое обнаружение** всех проектов Docker Compose
+- **Быстрый просмотр логов** всех контейнеров в проекте
+- **Фильтрация по проектам** - легко переключаться между разными проектами
+- **Multi-view режим** - одновременный просмотр логов нескольких контейнеров
+- **Интеграция с Docker API** - прямая работа с контейнерами
+
+### 🚀 **Производительность и удобство**
+
+Приложение предоставляет удобный веб-интерфейс для работы с логами микросервисов, поддерживает множественные проекты Docker Compose и включает в себя функции безопасности.
 
 ### Основные возможности
 
@@ -28,11 +51,36 @@ LogBoard+ - это современная веб-панель для монит
 
 ## Скриншоты
 
-### Светлая тема
+### 🔐 Страница входа
-![Светлая тема](screenshots/light.png)
+| Светлая тема | Темная тема |
+|--------------|-------------|
+| ![Вход - светлая тема](screenshots/login-white.png) | ![Вход - темная тема](screenshots/login-dark.png) |
 
-### Темная тема
+### 📊 Основной интерфейс
-![Темная тема](screenshots/dark.png)
+| Светлая тема | Темная тема |
+|--------------|-------------|
+| ![Single View - светлая тема](screenshots/single-view-white.png) | ![Single View - темная тема](screenshots/single-view-dark.png) |
+
+### 🖥️ Multi-view режим
+![Multi-view режим](screenshots/multi-view.png)
+
+### 📋 Карточки контейнеров
+![Карточки контейнеров](screenshots/container-cards.png)
+
+### 📁 Проекты
+![Список проектов](screenshots/projects.png)
+
+### ⚙️ Настройки
+![Панель настроек](screenshots/options.png)
+
+### 🔧 Сворачиваемая боковая панель
+![Сворачиваемая боковая панель](screenshots/collapse-sidebar.png)
+
+### ❓ Справка
+![Окно справки](screenshots/help.png)
+
+### 🚨 Страницы ошибок
+![Страницы ошибок](screenshots/error%20pages.png)
 
 ## Быстрый старт
 
@@ -74,6 +122,29 @@ LogBoard+ - это современная веб-панель для монит
 
 **Важно:** Обязательно измените пароль в продакшене!
 
+### Режим отладки
+
+Для разработки и тестирования доступен режим отладки:
+
+```bash
+# Включить режим отладки
+make debug-on
+
+# Выключить режим отладки
+make debug-off
+
+# Проверить статус
+make debug-status
+```
+
+**В режиме отладки доступно:**
+- **Auto-reload** - автоматическая перезагрузка при изменении кода
+- **Swagger UI** - документация API по адресу `/docs`
+- **ReDoc** - альтернативная документация по адресу `/redoc`
+- **Подробное логирование** - детальные логи для отладки
+
+**В продакшене обязательно отключите режим отладки!**
+
 ## Архитектура
 
 ### Технологический стек

app.py

@@ -50,11 +50,16 @@ ADMIN_PASSWORD = os.getenv("LOGBOARD_PASS", "admin")
 # Настройки AJAX обновления
 AJAX_UPDATE_INTERVAL = int(os.getenv("LOGBOARD_AJAX_UPDATE_INTERVAL", "2000"))
 
+# Настройки режима отладки
+DEBUG_MODE = os.getenv("DEBUG_MODE", "false").lower() == "true"
+
 # Инициализация FastAPI
 app = FastAPI(
     title="LogBoard+",
     description="Веб-панель для просмотра логов микросервисов",
-    version="1.0.0"
+    version="1.0.0",
+    docs_url="/docs" if DEBUG_MODE else None,
+    redoc_url="/redoc" if DEBUG_MODE else None
 )
 
 
@@ -917,6 +922,40 @@ def api_snapshot(
     url = f"/snapshots/{fname}"
     return {"file": fname, "url": url}
 
+@app.get("/api/websocket/status")
+def api_websocket_status(current_user: str = Depends(get_current_user)):
+    """Получить статус WebSocket соединений"""
+    try:
+        # Проверяем доступность Docker
+        docker_client.ping()
+        
+        # Получаем список активных контейнеров
+        containers = docker_client.containers.list()
+        
+        # Проверяем, есть ли контейнеры для подключения
+        if containers:
+            return {
+                "status": "available",
+                "message": "WebSocket соединения доступны",
+                "containers_count": len(containers),
+                "timestamp": datetime.now().isoformat()
+            }
+        else:
+            return {
+                "status": "no_containers",
+                "message": "Нет доступных контейнеров для подключения",
+                "containers_count": 0,
+                "timestamp": datetime.now().isoformat()
+            }
+            
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": f"Ошибка проверки WebSocket статуса: {str(e)}",
+            "containers_count": 0,
+            "timestamp": datetime.now().isoformat()
+        }
+
 # WebSocket: verify token (?token=base64(user:pass))
 @app.websocket("/ws/logs/{container_id}")
 async def ws_logs(ws: WebSocket, container_id: str, tail: int = DEFAULT_TAIL, token: Optional[str] = None,
@@ -1176,4 +1215,14 @@ async def ws_fan_group(ws: WebSocket, services: str, tail: int = DEFAULT_TAIL, t
 if __name__ == "__main__":
     import uvicorn
     print(f"LogBoard+ http://0.0.0.0:{APP_PORT}")
-    uvicorn.run(app, host="0.0.0.0", port=APP_PORT)
+    print(f"Debug mode: {'ON' if DEBUG_MODE else 'OFF'}")
+    if DEBUG_MODE:
+        print("Swagger UI: http://0.0.0.0:{}/docs".format(APP_PORT))
+        print("ReDoc: http://0.0.0.0:{}/redoc".format(APP_PORT))
+    uvicorn.run(
+        app, 
+        host="0.0.0.0", 
+        port=APP_PORT,
+        reload=DEBUG_MODE,
+        log_level="debug" if DEBUG_MODE else "info"
+    )

docker-compose.yml

@@ -59,6 +59,9 @@ services:
       # Настройки AJAX обновления
       LOGBOARD_AJAX_UPDATE_INTERVAL: ${LOGBOARD_AJAX_UPDATE_INTERVAL:-2000}
 
+      # Настройки режима отладки
+      DEBUG_MODE: ${DEBUG_MODE:-false}
+
     ports:
       - "${LOGBOARD_PORT:-9001}:${LOGBOARD_PORT:-9001}"
 

docs/api.md

@@ -14,7 +14,14 @@
 
 ## Обзор API
 
-LogBoard+ предоставляет REST API и WebSocket API для работы с логами Docker контейнеров.
+LogBoard+ предоставляет REST API и WebSocket API для работы с логами Docker контейнеров. API разработан для интеграции с системами мониторинга и автоматизации, а также для создания собственных клиентов.
+
+### 🎯 **Применение API**
+
+- **Интеграция с CI/CD** - автоматический мониторинг логов в пайплайнах
+- **Собственные дашборды** - создание кастомных интерфейсов мониторинга
+- **Автоматизация** - скрипты для анализа логов и алертинга
+- **Локальная разработка** - интеграция с IDE и инструментами разработки
 
 ### Базовый URL
 
@@ -322,6 +329,33 @@ curl -X GET "http://localhost:9001/api/logs/abc123def456?tail=100&since=2024-01-
 }
 ```
 
+#### GET /api/websocket/status
+
+Получение статуса WebSocket соединений.
+
+**Заголовки:**
+```
+Authorization: Bearer <token>
+```
+
+**Ответ:**
+
+```json
+{
+  "status": "available",
+  "message": "WebSocket соединения доступны",
+  "containers_count": 5,
+  "timestamp": "2024-01-15T10:30:15.123456"
+}
+```
+
+**Возможные статусы:**
+- `available` - WebSocket соединения доступны, есть активные контейнеры
+- `no_containers` - Нет доступных контейнеров для подключения
+- `error` - Ошибка проверки статуса
+
+**Примечание:** Когда сервер возвращает статус `available`, клиент всегда показывает `ws: on`, независимо от наличия активных клиентских соединений.
+
 ### Системные
 
 #### GET /healthz

docs/configuration.md

@@ -97,6 +97,20 @@ LogBoard+ использует переменные окружения для н
 | `WEB_DESCRIPTION` | Описание веб-интерфейса | `Веб-панель для просмотра логов микросервисов` | Нет |
 | `WEB_VERSION` | Версия веб-интерфейса | `1.0.0` | Нет |
 
+### Настройки режима отладки
+
+| Переменная | Описание | По умолчанию | Обязательная |
+|------------|----------|--------------|--------------|
+| `DEBUG_MODE` | Режим отладки | `false` | Нет |
+
+**Режим отладки включает:**
+- **Auto-reload** - автоматическая перезагрузка при изменении кода
+- **Swagger UI** - документация API по адресу `/docs`
+- **ReDoc** - альтернативная документация по адресу `/redoc`
+- **Подробное логирование** - детальные логи для отладки
+
+**⚠️ Важно:** В продакшене обязательно установите `DEBUG_MODE=false`!
+
 ### Настройки уведомлений
 
 | Переменная | Описание | По умолчанию | Обязательная |
@@ -331,6 +345,40 @@ LOG_LEVEL=DEBUG
 # Безопасность
 AUTH_ENABLED=true
 SESSION_TIMEOUT=7200
+
+# Режим отладки
+DEBUG_MODE=true
+```
+
+### Режим отладки
+
+```bash
+# .env для режима отладки
+LOGBOARD_PORT=9001
+LOGBOARD_USER=admin
+LOGBOARD_PASS=dev-password
+SECRET_KEY=dev-secret-key
+ENCRYPTION_KEY=dev-encryption-key
+
+# Docker настройки
+DOCKER_HOST=unix:///var/run/docker.sock
+
+# Производительность
+LOGBOARD_TAIL=50
+LOGBOARD_AJAX_UPDATE_INTERVAL=500
+LOG_LEVEL=DEBUG
+
+# Безопасность
+AUTH_ENABLED=true
+SESSION_TIMEOUT=7200
+
+# Режим отладки (ВКЛЮЧЕН)
+DEBUG_MODE=true
+
+# Команды для управления режимом отладки:
+# make debug-on    # Включить режим отладки
+# make debug-off   # Выключить режим отладки
+# make debug-status # Проверить статус
 ```
 
 ### Тестирование
@@ -386,6 +434,9 @@ SESSION_TIMEOUT=3600
 LOG_LEVEL=WARNING
 LOG_FORMAT=json
 
+# Режим отладки (ОБЯЗАТЕЛЬНО ВЫКЛЮЧЕН в продакшене)
+DEBUG_MODE=false
+
 # Уведомления
 NOTIFICATIONS_ENABLED=true
 SMTP_HOST=smtp.company.com

docs/index.md

@@ -5,7 +5,30 @@
 
 ## Обзор
 
-LogBoard+ - это современная веб-панель для мониторинга и просмотра логов Docker контейнеров в реальном времени. Приложение предоставляет удобный веб-интерфейс для работы с логами микросервисов, поддерживает множественные проекты Docker Compose и включает в себя функции безопасности.
+LogBoard+ - это современная веб-панель для мониторинга и просмотра логов Docker контейнеров в реальном времени. Приложение идеально подходит для локальной разработки, позволяя разработчикам всегда держать логи микросервисов перед глазами на втором мониторе.
+
+### 🎯 **Идеально для локальной разработки**
+
+LogBoard+ особенно полезен для разработчиков, работающих с микросервисной архитектурой:
+
+- **Второй монитор** - Держите логи всех микросервисов постоянно видимыми
+- **Быстрая отладка** - Мгновенный доступ к логам без переключения между терминалами
+- **Мониторинг в реальном времени** - Видите проблемы сразу, как они возникают
+- **Централизованный просмотр** - Все логи в одном месте, а не в десятках терминалов
+
+### 🐳 **Оптимизирован для Docker и Docker Compose**
+
+Если ваша инфраструктура основана на Docker и Docker Compose, LogBoard+ станет незаменимым инструментом:
+
+- **Автоматическое обнаружение** всех проектов Docker Compose
+- **Быстрый просмотр логов** всех контейнеров в проекте
+- **Фильтрация по проектам** - легко переключаться между разными проектами
+- **Multi-view режим** - одновременный просмотр логов нескольких контейнеров
+- **Интеграция с Docker API** - прямая работа с контейнерами
+
+### 🚀 **Производительность и удобство**
+
+Приложение предоставляет удобный веб-интерфейс для работы с логами микросервисов, поддерживает множественные проекты Docker Compose и включает в себя функции безопасности.
 
 ## Быстрый старт
 
@@ -75,6 +98,39 @@ make up
 - **[env.example](../env.example)** - Пример конфигурации
 - **[Makefile](../Makefile)** - Команды управления
 
+## Скриншоты
+
+### 🔐 Страница входа
+| Светлая тема | Темная тема |
+|--------------|-------------|
+| ![Вход - светлая тема](../screenshots/login-white.png) | ![Вход - темная тема](../screenshots/login-dark.png) |
+
+### 📊 Основной интерфейс
+| Светлая тема | Темная тема |
+|--------------|-------------|
+| ![Single View - светлая тема](../screenshots/single-view-white.png) | ![Single View - темная тема](../screenshots/single-view-dark.png) |
+
+### 🖥️ Multi-view режим
+![Multi-view режим](../screenshots/multi-view.png)
+
+### 📋 Карточки контейнеров
+![Карточки контейнеров](../screenshots/container-cards.png)
+
+### 📁 Проекты
+![Список проектов](../screenshots/projects.png)
+
+### ⚙️ Настройки
+![Панель настроек](../screenshots/options.png)
+
+### 🔧 Сворачиваемая боковая панель
+![Сворачиваемая боковая панель](../screenshots/collapse-sidebar.png)
+
+### ❓ Справка
+![Окно справки](../screenshots/help.png)
+
+### 🚨 Страницы ошибок
+![Страницы ошибок](../screenshots/error%20pages.png)
+
 ## Архитектура
 
 ### Технологический стек

docs/installation.md

@@ -5,12 +5,41 @@
 
 ## Содержание
 
-1. [Предварительные требования](#предварительные-требования)
+1. [Обзор и применение](#обзор-и-применение)
-2. [Установка](#установка)
+2. [Предварительные требования](#предварительные-требования)
-3. [Настройка](#настройка)
+3. [Установка](#установка)
-4. [Первый запуск](#первый-запуск)
+4. [Настройка](#настройка)
-5. [Проверка установки](#проверка-установки)
+5. [Первый запуск](#первый-запуск)
-6. [Настройка для продакшена](#настройка-для-продакшена)
+6. [Проверка установки](#проверка-установки)
+7. [Настройка для продакшена](#настройка-для-продакшена)
+
+## Обзор и применение
+
+### 🎯 **Идеально для локальной разработки**
+
+LogBoard+ создан специально для разработчиков, работающих с микросервисной архитектурой. Если вы используете Docker и Docker Compose для локальной разработки, этот инструмент станет незаменимым помощником:
+
+- **Второй монитор** - Держите логи всех микросервисов постоянно видимыми
+- **Быстрая отладка** - Мгновенный доступ к логам без переключения между терминалами
+- **Мониторинг в реальном времени** - Видите проблемы сразу, как они возникают
+- **Централизованный просмотр** - Все логи в одном месте, а не в десятках терминалов
+
+### 🐳 **Оптимизирован для Docker и Docker Compose**
+
+Если ваша инфраструктура основана на Docker и Docker Compose, LogBoard+ предоставляет:
+
+- **Автоматическое обнаружение** всех проектов Docker Compose
+- **Быстрый просмотр логов** всех контейнеров в проекте
+- **Фильтрация по проектам** - легко переключаться между разными проектами
+- **Multi-view режим** - одновременный просмотр логов нескольких контейнеров
+- **Интеграция с Docker API** - прямая работа с контейнерами
+
+### 💡 **Сценарии использования**
+
+- **Локальная разработка** - мониторинг логов микросервисов на втором мониторе
+- **Отладка проблем** - быстрый поиск ошибок в логах
+- **Тестирование** - наблюдение за поведением системы в реальном времени
+- **Демонстрации** - показ работы системы клиентам или команде
 
 ## Предварительные требования
 

env.example

@@ -87,6 +87,18 @@ WEB_DESCRIPTION=Веб-панель для просмотра логов мик
 # Версия веб-интерфейса
 WEB_VERSION=1.0.0
 
+# =============================================================================
+# НАСТРОЙКИ РЕЖИМА РАЗРАБОТКИ
+# =============================================================================
+
+# Режим отладки (true/false)
+# В режиме отладки:
+# - Включен auto-reload страниц при изменении кода
+# - Доступна документация Swagger (/docs и /redoc)
+# - Подробное логирование
+# В продакшене обязательно установите в false
+DEBUG_MODE=false
+
 # =============================================================================
 # НАСТРОЙКИ ПРОИЗВОДИТЕЛЬНОСТИ
 # =============================================================================

start.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+# LogBoard+ - Скрипт запуска
+# Автор: Сергей Антропов
+# Сайт: https://devops.org.ru
+
+set -e
+
+# Получаем настройки из переменных окружения
+DEBUG_MODE=${DEBUG_MODE:-false}
+LOGBOARD_PORT=${LOGBOARD_PORT:-9001}
+
+echo "LogBoard+ Starting..."
+echo "Port: $LOGBOARD_PORT"
+echo "Debug mode: $DEBUG_MODE"
+
+# Определяем параметры запуска в зависимости от режима отладки
+if [ "$DEBUG_MODE" = "true" ]; then
+    echo "Starting in DEBUG mode with auto-reload and Swagger docs..."
+    echo "Swagger UI: http://0.0.0.0:$LOGBOARD_PORT/docs"
+    echo "ReDoc: http://0.0.0.0:$LOGBOARD_PORT/redoc"
+    
+    exec uvicorn app:app \
+        --host 0.0.0.0 \
+        --port $LOGBOARD_PORT \
+        --reload \
+        --log-level debug
+else
+    echo "Starting in PRODUCTION mode..."
+    
+    exec uvicorn app:app \
+        --host 0.0.0.0 \
+        --port $LOGBOARD_PORT \
+        --log-level info
+fi

templates/error.html

@@ -46,12 +46,14 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
 
         .error-container {
             max-width: 600px;
             padding: 2rem;
             text-align: center;
+            transition: all 0.3s ease;
         }
 
         .error-icon {
@@ -130,6 +132,34 @@
             flex-wrap: wrap;
         }
 
+        .theme-toggle {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            background: var(--panel);
+            border: 1px solid var(--border);
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: 1.2rem;
+            color: var(--fg);
+            z-index: 1000;
+        }
+
+        .theme-toggle:hover {
+            background: var(--border);
+            transform: scale(1.1);
+        }
+
+        .theme-toggle:active {
+            transform: scale(0.95);
+        }
+
         .auth-notice {
             background: var(--warn);
             color: var(--bg);
@@ -178,10 +208,23 @@
                 width: 100%;
                 max-width: 300px;
             }
+            
+            .theme-toggle {
+                top: 0.5rem;
+                right: 0.5rem;
+                width: 40px;
+                height: 40px;
+                font-size: 1rem;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Кнопка переключателя темы -->
+    <button class="theme-toggle" onclick="toggleTheme()" title="Переключить тему (Ctrl+T)">
+        🌙
+    </button>
+    
     <div class="error-container">
         <div class="error-icon">
             {% if error_code == 401 %}
@@ -239,12 +282,31 @@
         const savedTheme = localStorage.getItem('lb_theme') || 'dark';
         document.documentElement.setAttribute('data-theme', savedTheme);
         
+        // Функция для обновления иконки темы
+        function updateThemeIcon() {
+            const themeToggle = document.querySelector('.theme-toggle');
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            
+            if (themeToggle) {
+                if (currentTheme === 'light') {
+                    themeToggle.innerHTML = '🌙';
+                    themeToggle.title = 'Переключить на темную тему (Ctrl+T)';
+                } else {
+                    themeToggle.innerHTML = '☀️';
+                    themeToggle.title = 'Переключить на светлую тему (Ctrl+T)';
+                }
+            }
+        }
+        
         // Переключатель темы
         function toggleTheme() {
             const currentTheme = document.documentElement.getAttribute('data-theme');
             const newTheme = currentTheme === 'light' ? 'dark' : 'light';
             document.documentElement.setAttribute('data-theme', newTheme);
             localStorage.setItem('lb_theme', newTheme);
+            
+            // Обновляем иконку
+            updateThemeIcon();
         }
         
         // Добавляем обработчик клавиш для переключения темы (Ctrl+T)
@@ -254,6 +316,11 @@
                 toggleTheme();
             }
         });
+        
+        // Инициализируем иконку при загрузке страницы
+        document.addEventListener('DOMContentLoaded', function() {
+            updateThemeIcon();
+        });
     </script>
 </body>
 </html>

templates/index.html

@@ -786,22 +786,22 @@ a{color:var(--link)}
 /* Компактные контролы в header: по умолчанию скрыты */
 .header-compact-controls { display: none; align-items: center; gap: 6px; }
 
-/* Tooltip для кнопки помощи */
+/* Модальное окно для кнопки помощи */
 .help-tooltip {
-  position: absolute;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
   background: var(--bg);
-  border: 1px solid var(--border);
+  z-index: 10000;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-  max-width: 320px;
-  font-size: 13px;
-  line-height: 1.5;
   opacity: 0;
   visibility: hidden;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
   pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
 }
 
 .help-tooltip.show {
@@ -813,10 +813,34 @@ a{color:var(--link)}
 .help-tooltip-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
-  margin-bottom: 12px;
+  padding: 20px 30px;
-  padding-bottom: 8px;
   border-bottom: 1px solid var(--border);
+  background: var(--panel);
+  flex-shrink: 0;
+}
+
+.help-tooltip-header-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.help-tooltip-close {
+  background: var(--chip);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 12px;
+  color: var(--muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 16px;
+}
+
+.help-tooltip-close:hover {
+  background: var(--tab-active);
+  color: var(--fg);
+  border-color: var(--accent);
 }
 
 .help-tooltip-logo {
@@ -835,11 +859,15 @@ a{color:var(--link)}
 .help-tooltip-title {
   font-weight: 600;
   color: var(--fg);
-  font-size: 14px;
+  font-size: 18px;
 }
 
 .help-tooltip-section {
-  margin-bottom: 12px;
+  margin-bottom: 24px;
+  padding: 20px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
 }
 
 .help-tooltip-section:last-child {
@@ -848,9 +876,9 @@ a{color:var(--link)}
 
 .help-tooltip-section-title {
   font-weight: 600;
-  color: var(--fg);
+  color: var(--accent);
-  margin-bottom: 6px;
+  margin-bottom: 12px;
-  font-size: 12px;
+  font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -861,38 +889,71 @@ a{color:var(--link)}
   line-height: 1.4;
 }
 
+.help-tooltip-body {
+  flex: 1;
+  padding: 30px;
+  overflow-y: auto;
+}
+
+.help-tooltip-content-wrapper {
+  display: flex;
+  gap: 40px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.help-tooltip-left-column,
+.help-tooltip-right-column {
+  flex: 1;
+  min-width: 0;
+}
+
 .help-tooltip-hotkeys {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 8px 12px;
+  gap: 12px 20px;
-  font-size: 11px;
+  font-size: 12px;
-  margin-top: 4px;
+  margin-top: 8px;
 }
 
 .help-tooltip-hotkey {
   background: var(--chip);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: 6px;
-  padding: 2px 6px;
+  padding: 6px 12px;
   font-family: 'Courier New', monospace;
   font-weight: 600;
   color: var(--fg);
   text-align: center;
-  min-width: 40px;
+  min-width: 60px;
+  font-size: 11px;
 }
 
 .help-tooltip-description {
   color: var(--muted);
-  font-size: 11px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.help-tooltip-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 30px;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+  flex-shrink: 0;
 }
 
 .help-tooltip-author {
-  margin-top: 8px;
+  font-size: 12px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border);
-  font-size: 11px;
   color: var(--muted);
-  text-align: center;
+}
+
+.help-tooltip-version {
+  font-size: 12px;
+  color: var(--accent);
+  font-weight: 500;
 }
 
 .help-tooltip-author a {
@@ -992,6 +1053,12 @@ a{color:var(--link)}
   border-color: #e0af68;
 }
 
+.ws-status-btn.ws-available {
+  background: #7aa2f7;
+  color: white;
+  border-color: #7aa2f7;
+}
+
 /* Кнопка состояния AJAX Update */
 .ajax-update-btn {
   background: var(--chip);
@@ -1958,14 +2025,14 @@ a{color:var(--link)}
 }
 
 .multi-view-header {
-  padding: 12px 16px;
+  padding: 5px 16px;
   background: var(--chip);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  min-height: 40px;
+  min-height: 16px;
 }
 
 .multi-view-title {
@@ -2000,14 +2067,14 @@ a{color:var(--link)}
 }
 
 .single-view-header {
-  padding: 12px 16px;
+  padding: 5px 16px;
   background: var(--chip);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  min-height: 40px;
+  min-height: 16px;
 }
 
 .single-view-title {
@@ -2730,17 +2797,37 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px}
           <i class="fas fa-question-circle"></i>
         </button>
         
-        <!-- Tooltip для кнопки помощи -->
+        <!-- Модальное окно для кнопки помощи -->
         <div class="help-tooltip" id="helpTooltip">
           <div class="help-tooltip-header">
+            <div class="help-tooltip-header-content">
               <div class="help-tooltip-logo">LB</div>
-            <div class="help-tooltip-title">LogBoard+</div>
+              <div class="help-tooltip-title">LogBoard+ - Справка</div>
+            </div>
+            <button class="help-tooltip-close" id="helpTooltipClose">
+              <i class="fas fa-times"></i>
+            </button>
           </div>
           
+          <div class="help-tooltip-body">
+            <div class="help-tooltip-content-wrapper">
+              <div class="help-tooltip-left-column">
                 <div class="help-tooltip-section">
                   <div class="help-tooltip-section-title">О проекте</div>
                   <div class="help-tooltip-content">
-              Веб-интерфейс для мониторинга логов Docker контейнеров в реальном времени с поддержкой мультивыбора и автоматического обновления.
+                    <strong>LogBoard+</strong> - веб-интерфейс для мониторинга логов Docker контейнеров в реальном времени с поддержкой мультивыбора и автоматического обновления.
+                    
+                    <br><br><strong>🎯 Идеально для локальной разработки:</strong><br>
+                    • Второй монитор - логи всегда перед глазами<br>
+                    • Быстрая отладка - без переключения терминалов<br>
+                    • Мониторинг в реальном времени<br>
+                    • Централизованный просмотр всех логов
+                    
+                    <br><br><strong>🐳 Оптимизирован для Docker:</strong><br>
+                    • Автоматическое обнаружение проектов<br>
+                    • Multi-view режим для нескольких контейнеров<br>
+                    • Интеграция с Docker API<br>
+                    • Поддержка Docker Compose
                   </div>
                 </div>
                 
@@ -2753,18 +2840,60 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px}
                     <div class="help-tooltip-description">Следующий контейнер</div>
                     <div class="help-tooltip-hotkey">Ctrl+R</div>
                     <div class="help-tooltip-description">Обновить логи</div>
+                    <div class="help-tooltip-hotkey">Ctrl+K</div>
+                    <div class="help-tooltip-description">Обновить логи (альтернатива)</div>
                     <div class="help-tooltip-hotkey">Ctrl+B</div>
-              <div class="help-tooltip-description">Свернуть sidebar</div>
+                    <div class="help-tooltip-description">Свернуть/развернуть sidebar</div>
                     <div class="help-tooltip-hotkey">Ctrl+F</div>
                     <div class="help-tooltip-description">Фокус на фильтр</div>
-              <div class="help-tooltip-hotkey">Ctrl+Shift+M</div>
+                  </div>
-              <div class="help-tooltip-description">Мультивыбор контейнеров</div>
                 </div>
               </div>
               
+              <div class="help-tooltip-right-column">
+                <div class="help-tooltip-section">
+                  <div class="help-tooltip-section-title">Мышь и выделение</div>
+                  <div class="help-tooltip-hotkeys">
+                    <div class="help-tooltip-hotkey">Shift+клик</div>
+                    <div class="help-tooltip-description">Добавить в мультивыбор</div>
+                    <div class="help-tooltip-hotkey">Ctrl+клик</div>
+                    <div class="help-tooltip-description">Добавить в мультивыбор</div>
+                    <div class="help-tooltip-hotkey">Выделение текста</div>
+                    <div class="help-tooltip-description">Показать кнопку копирования</div>
+                  </div>
+                </div>
+                
+                <div class="help-tooltip-section">
+                  <div class="help-tooltip-section-title">Функции</div>
+                  <div class="help-tooltip-hotkeys">
+                    <div class="help-tooltip-hotkey">Кнопки уровней</div>
+                    <div class="help-tooltip-description">Фильтрация по типу логов</div>
+                    <div class="help-tooltip-hotkey">Auto-scroll</div>
+                    <div class="help-tooltip-description">Автопрокрутка к новым логам</div>
+                    <div class="help-tooltip-hotkey">Wrap text</div>
+                    <div class="help-tooltip-description">Перенос длинных строк</div>
+                    <div class="help-tooltip-hotkey">Auto-update</div>
+                    <div class="help-tooltip-description">Автообновление логов</div>
+                    <div class="help-tooltip-hotkey">Refresh</div>
+                    <div class="help-tooltip-description">Принудительное обновление</div>
+                    <div class="help-tooltip-hotkey">Clear</div>
+                    <div class="help-tooltip-description">Очистить логи</div>
+                    <div class="help-tooltip-hotkey">Download</div>
+                    <div class="help-tooltip-description">Скачать логи</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="help-tooltip-footer">
             <div class="help-tooltip-author">
               Автор: <a href="https://devops.org.ru" target="_blank">Сергей Антропов</a>
             </div>
+            <div class="help-tooltip-version">
+              Версия 2.0
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -2892,10 +3021,13 @@ const els = {
 })();
 
 function setWsState(s){ 
+  console.log('setWsState: Устанавливаем состояние', s);
+  console.log('setWsState: Текущие соединения:', Object.keys(state.open));
+  
   els.wsstate.textContent = 'ws: ' + s; 
   
   // Удаляем все классы состояний
-  els.wsstate.classList.remove('ws-on', 'ws-off', 'ws-err');
+  els.wsstate.classList.remove('ws-on', 'ws-off', 'ws-err', 'ws-available');
   
   // Добавляем соответствующий класс
   if (s === 'on') {
@@ -2904,6 +3036,157 @@ function setWsState(s){
     els.wsstate.classList.add('ws-off');
   } else if (s === 'err') {
     els.wsstate.classList.add('ws-err');
+  } else if (s === 'available') {
+    els.wsstate.classList.add('ws-available');
+  }
+}
+
+// Функция для определения общего состояния WebSocket соединений
+function determineWsState() {
+  const openConnections = Object.keys(state.open);
+  
+  console.log('determineWsState: Проверяем', openConnections.length, 'соединений');
+  console.log('determineWsState: Все соединения:', openConnections);
+  
+  // Если нет открытых соединений, проверяем сервер через AJAX
+  if (openConnections.length === 0) {
+    console.log('determineWsState: Нет соединений, проверяем сервер');
+    // Асинхронно проверяем сервер, но возвращаем 'off' для немедленного отображения
+    // Если сервер доступен, checkWebSocketStatus установит 'on'
+    setTimeout(() => {
+      checkWebSocketStatus();
+    }, 100);
+    return 'off';
+  }
+  
+  // Проверяем состояние всех соединений
+  let hasActiveConnection = false;
+  let hasConnecting = false;
+  let closedConnections = [];
+  let errorConnections = [];
+  
+  for (const id of openConnections) {
+    const obj = state.open[id];
+    if (obj && obj.ws) {
+      console.log(`determineWsState: Соединение ${id}, readyState:`, obj.ws.readyState, 'WebSocket:', obj.ws);
+      
+      if (obj.ws.readyState === WebSocket.OPEN) {
+        hasActiveConnection = true;
+        console.log(`determineWsState: Соединение ${id} активно`);
+      } else if (obj.ws.readyState === WebSocket.CONNECTING) {
+        hasConnecting = true;
+        console.log(`determineWsState: Соединение ${id} подключается`);
+      } else if (obj.ws.readyState === WebSocket.CLOSED || obj.ws.readyState === WebSocket.CLOSING) {
+        closedConnections.push(id);
+        console.log(`determineWsState: Соединение ${id} закрыто/закрывается`);
+      }
+    } else {
+      console.log(`determineWsState: Соединение ${id} не найдено или нет WebSocket, obj:`, obj);
+      closedConnections.push(id);
+    }
+  }
+  
+  // Удаляем закрытые соединения
+  closedConnections.forEach(id => {
+    console.log(`determineWsState: Удаляем закрытое соединение ${id}`);
+    delete state.open[id];
+  });
+  
+  // Если есть активные соединения или есть соединения в процессе установки
+  if (hasActiveConnection || hasConnecting) {
+    console.log('determineWsState: Есть активные/подключающиеся соединения, возвращаем on');
+    return 'on';
+  } else {
+    console.log('determineWsState: Нет активных соединений, проверяем сервер');
+    // Асинхронно проверяем сервер, но возвращаем 'off' для немедленного отображения
+    // Если сервер доступен, checkWebSocketStatus установит 'on'
+    setTimeout(() => {
+      checkWebSocketStatus();
+    }, 100);
+    return 'off';
+  }
+}
+
+// Функция для проверки состояния WebSocket через AJAX
+async function checkWebSocketStatus() {
+  try {
+    const token = localStorage.getItem('access_token');
+    if (!token) {
+      console.log('checkWebSocketStatus: Нет токена, устанавливаем off');
+      setWsState('off');
+      return;
+    }
+    
+    console.log('checkWebSocketStatus: Отправляем запрос к /api/websocket/status');
+    const response = await fetch('/api/websocket/status', {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    });
+    
+    console.log('checkWebSocketStatus: Получен ответ, статус:', response.status, response.statusText);
+    
+    if (response.ok) {
+      const data = await response.json();
+      console.log('checkWebSocketStatus: Получен ответ от сервера:', data);
+      
+      if (data.status === 'available') {
+        // Проверяем активные клиентские соединения
+        const openConnections = Object.keys(state.open);
+        let hasActiveConnection = false;
+        
+        for (const id of openConnections) {
+          const obj = state.open[id];
+          if (obj && obj.ws && obj.ws.readyState === WebSocket.OPEN) {
+            hasActiveConnection = true;
+            break;
+          }
+        }
+        
+        // Если сервер доступен, всегда показываем 'on'
+        console.log('checkWebSocketStatus: Сервер доступен, устанавливаем on');
+        setWsState('on');
+      } else if (data.status === 'no_containers') {
+        console.log('checkWebSocketStatus: Нет контейнеров, устанавливаем off');
+        setWsState('off');
+      } else {
+        console.log('checkWebSocketStatus: Ошибка сервера, устанавливаем err');
+        setWsState('err');
+      }
+    } else {
+      console.log('checkWebSocketStatus: HTTP ошибка, устанавливаем err');
+      setWsState('err');
+    }
+  } catch (error) {
+    console.error('checkWebSocketStatus: Ошибка запроса:', error);
+    setWsState('err');
+  }
+}
+
+// Интервал для автоматической проверки состояния WebSocket
+let wsStatusInterval = null;
+
+// Функция для запуска автоматической проверки состояния WebSocket
+function startWebSocketStatusCheck() {
+  if (wsStatusInterval) {
+    clearInterval(wsStatusInterval);
+  }
+  
+  // Проверяем каждые 3 секунды
+  wsStatusInterval = setInterval(() => {
+    console.log('Автоматическая проверка состояния WebSocket');
+    checkWebSocketStatus();
+  }, 3000);
+  
+  console.log('Запущена автоматическая проверка состояния WebSocket');
+}
+
+// Функция для остановки автоматической проверки
+function stopWebSocketStatusCheck() {
+  if (wsStatusInterval) {
+    clearInterval(wsStatusInterval);
+    wsStatusInterval = null;
+    console.log('Остановлена автоматическая проверка состояния WebSocket');
   }
 }
 
@@ -4059,55 +4342,29 @@ function positionTooltip(event, tooltip) {
 
 
 
-// Функции для help tooltip
+// Функции для help modal
 function showHelpTooltip() {
-  const helpBtn = document.getElementById('helpBtn');
   const helpTooltip = document.getElementById('helpTooltip');
   
-  if (!helpBtn || !helpTooltip) return;
+  if (!helpTooltip) return;
   
-  // Позиционируем tooltip относительно кнопки
+  // Показываем модальное окно
-  positionHelpTooltip(helpBtn, helpTooltip);
-  
-  // Показываем tooltip
   helpTooltip.classList.add('show');
+  
+  // Блокируем скролл страницы
+  document.body.style.overflow = 'hidden';
 }
 
 function hideHelpTooltip() {
   const helpTooltip = document.getElementById('helpTooltip');
   if (helpTooltip) {
     helpTooltip.classList.remove('show');
+    
+    // Восстанавливаем скролл страницы
+    document.body.style.overflow = '';
   }
 }
 
-function positionHelpTooltip(button, tooltip) {
-  const buttonRect = button.getBoundingClientRect();
-  const tooltipRect = tooltip.getBoundingClientRect();
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-  
-  // Позиционируем tooltip справа от кнопки по умолчанию
-  let left = buttonRect.right + 8;
-  let top = buttonRect.top + (buttonRect.height / 2) - (tooltipRect.height / 2);
-  
-  // Проверяем, помещается ли tooltip справа
-  if (left + tooltipRect.width > viewportWidth - 10) {
-    // Не помещается справа, позиционируем слева
-    left = buttonRect.left - tooltipRect.width - 8;
-  }
-  
-  // Проверяем, помещается ли tooltip по вертикали
-  if (top < 10) {
-    top = 10;
-  } else if (top + tooltipRect.height > viewportHeight - 10) {
-    top = viewportHeight - tooltipRect.height - 10;
-  }
-  
-  // Применяем позицию
-  tooltip.style.left = `${left}px`;
-  tooltip.style.top = `${top}px`;
-}
-
 // Глобальные переменные для выбора контейнеров
 let lastSelectedContainerId = null;
 
@@ -4149,12 +4406,7 @@ document.addEventListener('click', (event) => {
     hideMiniContainerTooltip();
   }
   
-  // Скрытие help tooltip при клике вне его
+
-  const helpTooltip = document.getElementById('helpTooltip');
-  const helpBtn = document.getElementById('helpBtn');
-  if (helpTooltip && !helpTooltip.contains(event.target) && !helpBtn.contains(event.target)) {
-    hideHelpTooltip();
-  }
 });
 
 window.addEventListener('resize', () => {
@@ -4562,6 +4814,9 @@ function openMultiViewWs(service) {
   ws.onmessage = (event) => {
     console.log(`Multi-view WebSocket received message for ${service.name}: ${event.data.substring(0, 100)}...`);
     
+    // Устанавливаем состояние 'on' при получении сообщений
+    setWsState('on');
+    
     const parts = (event.data||'').split(/\r?\n/);
     
     // Проверяем на дублирование в исходных данных
@@ -4940,6 +5195,7 @@ function openWs(svc, panel){
   console.log(`openWs: Created state.open[${id}] with logEl:`, !!logEl, 'wrapEl:', !!wrapEl);
 
   ws.onopen = ()=> {
+    console.log(`WebSocket ${id}: Соединение открыто`);
     setWsState('on');
     // Очищаем сообщение "Connecting..." когда соединение установлено
     if (state.current && state.current.id === id && els.logContent) {
@@ -4949,12 +5205,38 @@ function openWs(svc, panel){
     if (obj.logEl) {
       obj.logEl.innerHTML = '';
     }
+    
+    // Принудительно проверяем состояние через AJAX через 500мс и 1 секунду
+    setTimeout(() => {
+      console.log(`WebSocket ${id}: Принудительная проверка состояния после открытия (500мс)`);
+      checkWebSocketStatus();
+    }, 500);
+    
+    setTimeout(() => {
+      console.log(`WebSocket ${id}: Принудительная проверка состояния после открытия (1с)`);
+      checkWebSocketStatus();
+    }, 1000);
+  };
+  ws.onclose = ()=> {
+    console.log(`WebSocket ${id}: Соединение закрыто`);
+    setWsState(determineWsState());
+    
+    // Принудительно проверяем состояние через AJAX через 500мс
+    setTimeout(() => {
+      console.log(`WebSocket ${id}: Принудительная проверка состояния после закрытия`);
+      checkWebSocketStatus();
+    }, 500);
+  };
+  ws.onerror = (error)=> {
+    console.log(`WebSocket ${id}: Ошибка соединения:`, error);
+    setWsState('err');
   };
-  ws.onclose = ()=> setWsState(Object.keys(state.open).length? 'on':'off');
-  ws.onerror = ()=> setWsState('err');
   ws.onmessage = (ev)=>{
     console.log(`Received WebSocket message: ${ev.data.substring(0, 100)}...`);
     
+    // Устанавливаем состояние 'on' при получении сообщений
+    setWsState('on');
+    
     const parts = (ev.data||'').split(/\r?\n/);
     console.log(`openWs: Processing ${parts.length} lines for container ${id}`);
     
@@ -6134,10 +6416,28 @@ function openFanGroup(services){
   const ws = new WebSocket(fanGroupUrl(services.join(','), fake.project||''));
   state.open[id] = {ws, logEl, wrapEl, counters, pausedBuffer:[], serviceName: ('group:'+services.join(','))};
 
-  ws.onopen = ()=> setWsState('on');
+  ws.onopen = ()=> {
-  ws.onclose = ()=> setWsState(Object.keys(state.open).length? 'on':'off');
+    console.log(`WebSocket ${id}: Соединение открыто`);
-  ws.onerror = ()=> setWsState('err');
+    setWsState('on');
+  };
+  ws.onclose = ()=> {
+    console.log(`WebSocket ${id}: Соединение закрыто`);
+    setWsState(determineWsState());
+    
+    // Принудительно проверяем состояние через AJAX через 500мс
+    setTimeout(() => {
+      console.log(`WebSocket ${id}: Принудительная проверка состояния после закрытия`);
+      checkWebSocketStatus();
+    }, 500);
+  };
+  ws.onerror = (error)=> {
+    console.log(`WebSocket ${id}: Ошибка соединения:`, error);
+    setWsState('err');
+  };
   ws.onmessage = (ev)=>{
+    // Устанавливаем состояние 'on' при получении сообщений
+    setWsState('on');
+    
     const parts = (ev.data||'').split(/\r?\n/);
     for (let i=0;i<parts.length;i++){
       if (parts[i].length===0 && i===parts.length-1) continue;
@@ -7114,6 +7414,8 @@ document.addEventListener('DOMContentLoaded', () => {
         } catch (error) {
           console.error('Logout error:', error);
         } finally {
+          // Останавливаем автоматическую проверку WebSocket
+          stopWebSocketStatusCheck();
           // Очищаем localStorage
           localStorage.removeItem('access_token');
           // Перенаправляем на страницу входа
@@ -7144,33 +7446,31 @@ document.addEventListener('DOMContentLoaded', () => {
     const helpTooltip = document.getElementById('helpTooltip');
     let tooltipTimeout;
 
-    // Показ tooltip при наведении
+    // Показ модального окна при клике
-    els.helpBtn.addEventListener('mouseenter', () => {
+    els.helpBtn.addEventListener('click', () => {
-      clearTimeout(tooltipTimeout);
-      tooltipTimeout = setTimeout(() => {
       showHelpTooltip();
-      }, 300); // Задержка 300мс перед показом
     });
 
-    // Скрытие tooltip при уходе мыши
+    // Кнопка закрытия модального окна
-    els.helpBtn.addEventListener('mouseleave', () => {
+    const helpTooltipClose = document.getElementById('helpTooltipClose');
-      clearTimeout(tooltipTimeout);
+    if (helpTooltipClose) {
-      tooltipTimeout = setTimeout(() => {
+      helpTooltipClose.addEventListener('click', () => {
         hideHelpTooltip();
-      }, 200); // Задержка 200мс перед скрытием
       });
+    }
 
-    // Показ tooltip при наведении на сам tooltip
+    // Закрытие по Escape
-    helpTooltip.addEventListener('mouseenter', () => {
+    document.addEventListener('keydown', (e) => {
-      clearTimeout(tooltipTimeout);
+      if (e.key === 'Escape') {
-    });
-
-    // Скрытие tooltip при уходе мыши с tooltip
-    helpTooltip.addEventListener('mouseleave', () => {
-      clearTimeout(tooltipTimeout);
-      tooltipTimeout = setTimeout(() => {
         hideHelpTooltip();
-      }, 200);
+      }
+    });
+
+    // Закрытие по клику вне модального окна
+    helpTooltip.addEventListener('click', (e) => {
+      if (e.target === helpTooltip) {
+        hideHelpTooltip();
+      }
     });
   }
 
@@ -7432,12 +7732,116 @@ window.addEventListener('keydown', async (e)=>{
     toggleSidebar();
   }
   
+  // Фокус на фильтр по Ctrl/Cmd+F
+  if ((e.ctrlKey || e.metaKey) && (e.key==='f' || e.key==='а')){
+    e.preventDefault();
+    console.log('Ctrl+F pressed, els.filter:', els.filter);
+    
+    // Функция для фокусировки на фильтре
+    const focusFilter = () => {
+      // Сначала попробуем использовать els.filter
+      let filterElement = els.filter;
+      
+      // Если els.filter не найден, попробуем найти элемент напрямую
+      if (!filterElement) {
+        console.log('els.filter not found, searching directly...');
+        filterElement = document.getElementById('filter');
+      }
+      
+      // Если элемент найден, фокусируемся на нем
+      if (filterElement) {
+        console.log('Focusing on filter element:', filterElement);
+        try {
+          filterElement.focus();
+          filterElement.select();
+          console.log('Filter focused successfully');
+        } catch (error) {
+          console.error('Error focusing filter:', error);
+        }
+      } else {
+        console.error('Filter element not found anywhere!');
+        // Попробуем еще раз через небольшую задержку
+        setTimeout(() => {
+          const retryElement = document.getElementById('filter');
+          if (retryElement) {
+            console.log('Filter found on retry, focusing...');
+            retryElement.focus();
+            retryElement.select();
+          }
+        }, 100);
+      }
+    };
+    
+    // Вызываем функцию фокусировки
+    focusFilter();
+  }
+  
+
+
 });
 
+// Функция для переинициализации элементов
+function reinitializeElements() {
+  // Переинициализируем элементы, которые могут быть не найдены при первой загрузке
+  els.filter = document.getElementById('filter');
+  els.containerList = document.getElementById('containerList');
+  els.logContent = document.getElementById('logContent');
+  els.mobileToggle = document.getElementById('mobileToggle');
+  els.optionsBtn = document.getElementById('optionsBtn');
+  els.helpBtn = document.getElementById('helpBtn');
+  els.logoutBtn = document.getElementById('logoutBtn');
+  els.sidebar = document.getElementById('sidebar');
+  els.sidebarToggle = document.getElementById('sidebarToggle');
+  els.header = document.getElementById('header');
+  
+  console.log('Elements reinitialized:', {
+    filter: !!els.filter,
+    containerList: !!els.containerList,
+    logContent: !!els.logContent,
+    sidebar: !!els.sidebar,
+    sidebarToggle: !!els.sidebarToggle
+  });
+}
+
 // Инициализация
 (async function init() {
   console.log('Initializing LogBoard+...');
   
+  // Переинициализируем элементы
+  reinitializeElements();
+  
+  // Инициализируем состояние WebSocket
+  setWsState('off');
+  
+  // Дополнительно инициализируем элементы после полной загрузки DOM
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', reinitializeElements);
+  }
+  
+  // Инициализируем элементы после полной загрузки страницы
+  window.addEventListener('load', reinitializeElements);
+  
+  // Обработчик для правильной очистки при перезагрузке страницы
+  window.addEventListener('beforeunload', () => {
+    // Останавливаем автоматическую проверку WebSocket
+    stopWebSocketStatusCheck();
+    
+    // Закрываем все WebSocket соединения
+    Object.keys(state.open).forEach(id => {
+      const obj = state.open[id];
+      if (obj && obj.ws) {
+        try {
+          obj.ws.close();
+        } catch (e) {
+          // Игнорируем ошибки при закрытии
+        }
+      }
+    });
+    
+    // Очищаем состояние
+    state.open = {};
+  });
+  
   // Проверяем авторизацию
   const token = localStorage.getItem('access_token');
   if (!token) {
@@ -7482,6 +7886,23 @@ window.addEventListener('keydown', async (e)=>{
   await fetchProjects();
   await fetchServices();
   
+  // Проверяем состояние WebSocket после загрузки сервисов
+  setTimeout(() => {
+    console.log('Проверка состояния WebSocket после загрузки сервисов');
+    setWsState(determineWsState());
+  }, 1000);
+  
+  // Запускаем автоматическую проверку состояния WebSocket
+  startWebSocketStatusCheck();
+  
+  // Добавляем обработчик клика для кнопки WebSocket статуса
+  if (els.wsstate) {
+    els.wsstate.addEventListener('click', () => {
+      console.log('Ручная проверка состояния WebSocket');
+      checkWebSocketStatus();
+    });
+  }
+  
   // Проверяем, есть ли сохраненный контейнер в localStorage
   const savedContainerId = getSelectedContainerFromStorage();
   if (savedContainerId) {