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

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);
-  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;
+  z-index: 10000;
   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;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
+  justify-content: space-between;
+  padding: 20px 30px;
   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);
-  margin-bottom: 6px;
-  font-size: 12px;
+  color: var(--accent);
+  margin-bottom: 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;
-  font-size: 11px;
-  margin-top: 4px;
+  gap: 12px 20px;
+  font-size: 12px;
+  margin-top: 8px;
 }
 
 .help-tooltip-hotkey {
   background: var(--chip);
   border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 2px 6px;
+  border-radius: 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;
-  padding-top: 8px;
-  border-top: 1px solid var(--border);
-  font-size: 11px;
+  font-size: 12px;
   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,40 +2797,102 @@ 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-logo">LB</div>
-            <div class="help-tooltip-title">LogBoard+</div>
+            <div class="help-tooltip-header-content">
+              <div class="help-tooltip-logo">LB</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-section">
-            <div class="help-tooltip-section-title">О проекте</div>
-            <div class="help-tooltip-content">
-              Веб-интерфейс для мониторинга логов Docker контейнеров в реальном времени с поддержкой мультивыбора и автоматического обновления.
+          <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">
+                    <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>
+                
+                <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">]</div>
+                    <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-hotkey">Ctrl+F</div>
+                    <div class="help-tooltip-description">Фокус на фильтр</div>
+                  </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-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">]</div>
-              <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+B</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 class="help-tooltip-description">Мультивыбор контейнеров</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 class="help-tooltip-author">
-            Автор: <a href="https://devops.org.ru" target="_blank">Сергей Антропов</a>
           </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.onclose = ()=> setWsState(Object.keys(state.open).length? 'on':'off');
-  ws.onerror = ()=> setWsState('err');
+  ws.onopen = ()=> {
+    console.log(`WebSocket ${id}: Соединение открыто`);
+    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', () => {
-      clearTimeout(tooltipTimeout);
-      tooltipTimeout = setTimeout(() => {
-        showHelpTooltip();
-      }, 300); // Задержка 300мс перед показом
+    // Показ модального окна при клике
+    els.helpBtn.addEventListener('click', () => {
+      showHelpTooltip();
     });
 
-    // Скрытие tooltip при уходе мыши
-    els.helpBtn.addEventListener('mouseleave', () => {
-      clearTimeout(tooltipTimeout);
-      tooltipTimeout = setTimeout(() => {
+    // Кнопка закрытия модального окна
+    const helpTooltipClose = document.getElementById('helpTooltipClose');
+    if (helpTooltipClose) {
+      helpTooltipClose.addEventListener('click', () => {
         hideHelpTooltip();
-      }, 200); // Задержка 200мс перед скрытием
-    });
+      });
+    }
 
-    // Показ tooltip при наведении на сам tooltip
-    helpTooltip.addEventListener('mouseenter', () => {
-      clearTimeout(tooltipTimeout);
-    });
-
-    // Скрытие tooltip при уходе мыши с tooltip
-    helpTooltip.addEventListener('mouseleave', () => {
-      clearTimeout(tooltipTimeout);
-      tooltipTimeout = setTimeout(() => {
+    // Закрытие по Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
         hideHelpTooltip();
-      }, 200);
+      }
+    });
+
+    // Закрытие по клику вне модального окна
+    helpTooltip.addEventListener('click', (e) => {
+      if (e.target === helpTooltip) {
+        hideHelpTooltip();
+      }
     });
   }
 
@@ -7431,13 +7731,117 @@ window.addEventListener('keydown', async (e)=>{
     e.preventDefault();
     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) {