Добавление корректного статуса

cmd/server/web/css/style.css

@@ -17,26 +17,22 @@ h1 {
 }
 
 /* ===== GRID ===== */
-
 .grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
 }
 
-/* Desktop */
 @media (min-width: 900px) {
     .grid {
         grid-template-columns: 1fr 1fr;
     }
-
     .wide {
         grid-column: span 2;
     }
 }
 
 /* ===== CARD ===== */
-
 .card {
     border: 1px solid #00ff88;
     border-radius: 10px;
@@ -51,107 +47,39 @@ h1 {
 }
 
 /* ===== STATUS ===== */
-
 #status {
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 8px;
 }
 
+/* СТАТУСЫ - ЦВЕТА */
+.status-ok {
+    color: #00ff88 !important;
+}
+
+.status-lost {
+    color: #ffffff !important;
+    animation: blink 1.5s infinite;
+}
+
+.status-error {
+    color: #ff4444 !important;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.2; }
+}
+
+/* ===== META ===== */
 #meta {
     font-size: 14px;
     opacity: 0.8;
     word-break: break-word;
 }
 
-/* ===== LATEST ===== */
-
-#latest {
-    font-size: 36px;
-    font-weight: bold;
-    margin-bottom: 12px;
-}
-
-/* ===== BITS ===== */
-
-#bits {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-}
-
-.bit {
-    height: 52px;
-    border: 1px solid #00ff88;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 22px;
-    font-weight: bold;
-}
-
-.bit.on {
-    background: #00ff88;
-    color: #000;
-}
-
-/* Tablet/Desktop */
-@media (min-width: 700px) {
-    #bits {
-        grid-template-columns: repeat(8, 1fr);
-    }
-}
-
-/* ===== HISTORY ===== */
-
-#history {
-    font-size: 13px;
-    line-height: 1.35;
-    max-height: 420px;
-    overflow-y: auto;
-    white-space: nowrap;
-    padding-right: 4px;
-}
-
-/* Desktop */
-@media (min-width: 900px) {
-    #history {
-        font-size: 12px;
-        max-height: 520px;
-    }
-}
-
-/* ===== PHONE ===== */
-
-@media (max-width: 500px) {
-
-    h1 {
-        font-size: 18px;
-    }
-
-    #status {
-        font-size: 22px;
-    }
-
-    #latest {
-        font-size: 30px;
-    }
-
-    .bit {
-        height: 44px;
-        font-size: 18px;
-    }
-
-    #history {
-        font-size: 16px;
-        line-height: 1.5;
-        max-height: 55vh;
-    }
-}
-
 /* ===== PROGRESS BARS ===== */
-
 .progress-row {
     margin-bottom: 16px;
 }
@@ -174,6 +102,18 @@ h1 {
         0 0 4px rgba(0,0,0,0.8);
 }
 
+.progress-with-signal {
+    display: flex;
+    align-items: center;
+    gap: 0;
+}
+
+.progress-90 {
+    flex: 0 0 86%;
+    margin-right: 10px;
+}
+
+/* ЗАЛИВКА ПРОГРЕСС-БАРА */
 .fill {
     height: 100%;
     width: 0%;
@@ -184,49 +124,11 @@ h1 {
     transition: width 0.25s linear;
 }
 
-/* mobile */
+/* Заливка при потере связи */
-
+.fill.no-connection {
-@media (max-width: 500px) {
+    background: #555555 !important;
-    .progress {
+    box-shadow: none !important;
-        height: 30px;
+    width: 0% !important;
-        padding: 5px;
-    }
-
-    .progress-label {
-        font-size: 15px;
-    }
-}
-
-.accordion-header {
-    cursor: pointer;
-    user-select: none;
-}
-
-.accordion-header:hover {
-    opacity: 0.7;
-}
-
-.accordion-body {
-    max-height: 520px;
-    overflow: hidden;
-    transition: max-height 0.3s ease, padding 0.3s ease;
-    padding: 0;
-}
-
-.accordion-body.collapsed {
-    max-height: 0;
-    padding: 0;
-}
-
-.progress-with-signal {
-    display: flex;
-    align-items: center;
-    gap: 0;
-}
-
-.progress-90 {
-    flex: 0 0 86%;
-    margin-right: 10px;
 }
 
 /* ===== SIGNAL ICON ===== */
@@ -252,27 +154,35 @@ h1 {
 .sig-bar-2 { height: 66%; }
 .sig-bar-3 { height: 100%; }
 
-/* Активные — зелёная заливка */
+/* Неактивные сигнальные бары */
-.sig-bar.active-1,
-.sig-bar.active-2,
-.sig-bar.active-3,
-.sig-bar.active-4 {
-    background-color: #00ff88;
-    border-color: #00ff88;
-}
-
-/* Неактивные — прозрачные, только контур */
 .sig-bar.dim {
     background-color: transparent;
     border-color: #1a3a1a;
 }
 
+/* Активные сигнальные бары */
+.sig-bar.active-1,
+.sig-bar.active-2,
+.sig-bar.active-3 {
+    background-color: #00ff88;
+    border-color: #00ff88;
+}
+
+/* Нет связи - сигнальные бары */
+.sig-bar.no-connection {
+    background-color: #555555 !important;
+    border-color: #555555 !important;
+    opacity: 0.3 !important;
+}
+
+/* ===== LAST BYTE ===== */
 #last-byte {
     font-size: 18px;
     font-weight: bold;
     color: #00ff88;
 }
 
+/* ===== CHART ===== */
 #signalChart {
     width: 100%;
     background: #050805;
@@ -280,26 +190,62 @@ h1 {
     border-radius: 8px;
 }
 
+/* ===== HISTORY ===== */
 #history {
+    font-size: 13px;
+    line-height: 1.35;
+    max-height: 420px;
+    overflow-y: auto;
+    white-space: nowrap;
+    padding-right: 4px;
     margin: 0;
 }
 
+/* ===== ACCORDION ===== */
 .accordion-header {
     cursor: pointer;
     user-select: none;
-    transition: background-color 0.2s;
+    padding: 10px 0;
+    margin: 0;
 }
 
 .accordion-header:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+    opacity: 0.7;
 }
 
 .accordion-body {
+    max-height: 520px;
     overflow: hidden;
-    transition: max-height 0.3s ease-out;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
-    max-height: 2000px;
 }
 
 .accordion-body.collapsed {
     max-height: 0;
+    opacity: 0;
+}
+
+/* ===== MOBILE ===== */
+@media (max-width: 500px) {
+    h1 {
+        font-size: 18px;
+    }
+
+    #status {
+        font-size: 22px;
+    }
+
+    .progress {
+        height: 30px;
+        padding: 5px;
+    }
+
+    .progress-label {
+        font-size: 15px;
+    }
+
+    #history {
+        font-size: 16px;
+        line-height: 1.5;
+        max-height: 55vh;
+    }
 }

cmd/server/web/js/app.js

@@ -14,6 +14,7 @@ import { initAccordion } from "./accordion.js";
 import { drawChart } from "./chart.js";
 
 let lastChart = 0;
+let connectionLost = false;
 
 // ================= INIT =================
 window.addEventListener("DOMContentLoaded", () => {
@@ -30,10 +31,17 @@ async function update() {
         ]);
 
         // ===== STATUS =====
-        setStatus(h.status || "неизвестно");
+        const isOnline = h.pipe_alive && h.has_data;
+
+        if (isOnline) {
+            setStatus("На связи");
+            connectionLost = false;
+        } else {
+            setStatus("Нет связи", true); // true = lost connection
+            connectionLost = true;
+        }
 
         const arr = Array.isArray(hist.bytes) ? hist.bytes : [];
-
         const raw = arr[arr.length - 1] ?? 0;
 
         // ===== DECODE =====
@@ -45,11 +53,17 @@ async function update() {
         addSignal(value);
 
         // ===== UI =====
-        setBars(smooth(percent));
+        if (isOnline) {
-        setSignal(level);
+            setBars(smooth(percent));
+            setSignal(level);
+        } else {
+            // При потере связи - сбрасываем индикаторы
+            setBars(0, true); // true = no connection
+            setSignal(0, true); // true = no connection
+        }
 
         if (DOM.lastByte) {
-            DOM.lastByte.textContent = value;
+            DOM.lastByte.textContent = isOnline ? value : "--";
         }
 
         // ===== META =====
@@ -57,9 +71,10 @@ async function update() {
         const filled = h.stats?.filled ?? 0;
         const bps = Math.round(h.stats?.bits_per_sec ?? 0);
         const Bps = Math.round(h.stats?.bytes_per_sec ?? 0);
+        const idle = Math.round((h.last_data_ms || 0) / 1000);
 
         setMeta(
-            `работа: ${uptime}s | буфер: ${filled} | ${bps} bit/s (${Bps} B/s)`
+            `работа: ${uptime}s | буфер: ${filled} | ${bps} bit/s (${Bps} B/s) | idle: ${idle}s`
         );
 
         // ===== HISTORY =====
@@ -74,14 +89,20 @@ async function update() {
         // ===== CHART =====
         const now = performance.now();
 
-        if (now - lastChart > 100) {
+        if (now - lastChart > 100 && DOM.canvas) {
-            drawChart(state.signalHistory);
+            drawChart(DOM.canvas, state.signalHistory);
             lastChart = now;
         }
 
     } catch (e) {
         console.error("UPDATE ERROR:", e);
-        setStatus("СЕРВЕР НЕДОСТУПЕН");
+        setStatus("СЕРВЕР НЕДОСТУПЕН", true);
+        setBars(0, true);
+        setSignal(0, true);
+
+        if (DOM.lastByte) {
+            DOM.lastByte.textContent = "--";
+        }
     }
 }
 

cmd/server/web/js/ui.js

@@ -9,48 +9,76 @@ export function initDOM() {
     DOM.history = document.getElementById("history");
     DOM.canvas = document.getElementById("signalChart");
     DOM.bars = document.querySelectorAll(".sig-bar");
+    DOM.barFill = document.getElementById("bar1");
 
+    // Аккордеон
     DOM.historyHeader = document.getElementById("history-header");
     DOM.historyBody = document.getElementById("history-body");
 }
 
-export function setStatus(v) {
+export function setStatus(v, isError = false) {
-    if (DOM.status) DOM.status.textContent = v;
+    if (!DOM.status) return;
+
+    DOM.status.textContent = v;
+
+    // Стили для статуса
+    DOM.status.classList.remove("status-ok", "status-error", "status-lost");
+
+    if (isError) {
+        if (v === "Нет связи") {
+            DOM.status.classList.add("status-lost");
+        } else {
+            DOM.status.classList.add("status-error");
+        }
+    } else {
+        DOM.status.classList.add("status-ok");
+    }
 }
 
 export function setMeta(v) {
     if (DOM.meta) DOM.meta.textContent = v;
 }
 
-export function setBars(p) {
+export function setBars(p, noConnection = false) {
-    const el = document.getElementById("bar1");
+    const el = DOM.barFill;
     if (!el) return;
-    el.style.width = Math.max(0, Math.min(100, p)) + "%";
+
+    if (noConnection) {
+        // При потере связи - сбрасываем и делаем серым
+        el.style.width = "0%";
+        el.classList.add("no-connection");
+    } else {
+        el.classList.remove("no-connection");
+        el.style.width = Math.max(0, Math.min(100, p)) + "%";
+    }
 }
 
-export function setSignal(level) {
+export function setSignal(level, noConnection = false) {
     const bars = DOM.bars;
     if (!bars || bars.length < 3) return;
 
-    // reset
+    // Сброс
     bars.forEach(b => {
-        b.classList.remove("active-1", "active-2", "active-3");
+        b.classList.remove("active-1", "active-2", "active-3", "dim", "no-connection");
-        b.classList.add("dim");
+
+        if (noConnection) {
+            b.classList.add("no-connection");
+        } else {
+            b.classList.add("dim");
+        }
     });
 
-    // 1 bar
+    if (noConnection) return;
+
+    // Уровни сигнала
     if (level >= 1) {
         bars[0].classList.add("active-1");
         bars[0].classList.remove("dim");
     }
-
-    // 2 bar
     if (level >= 2) {
         bars[1].classList.add("active-2");
         bars[1].classList.remove("dim");
     }
-
-    // 3 bar
     if (level >= 3) {
         bars[2].classList.add("active-3");
         bars[2].classList.remove("dim");

internal/adapter/buffer.go

@@ -17,26 +17,33 @@ type RingBuffer struct {
 	totalBytes atomic.Uint64
 
 	// ===== SPEED =====
-	lastTick  atomic.Int64
+	speedMu      sync.Mutex
-	lastBytes atomic.Uint64
+	lastCalcTime time.Time
+	lastCalcBytes uint64
 
-	bytesPerSec atomic.Value // float64
+	// Текущие значения скорости
-	bitsPerSec  atomic.Value // float64
+	currentBPS atomic.Value // float64
+	currentBPSBits atomic.Value // float64
+
+	// Для скользящего окна
+	recentBytes []timestampedByte
+	recentMu    sync.Mutex
+}
+
+type timestampedByte struct {
+	timestamp time.Time
 }
 
 // =====================
 func NewRingBuffer(size int) *RingBuffer {
 	rb := &RingBuffer{
-		data: make([]byte, size),
+		data:          make([]byte, size),
+		lastCalcTime:  time.Now(),
+		recentBytes:   make([]timestampedByte, 0, 1000), // храним последние 1000 байт
 	}
 
-	now := time.Now().UnixNano()
+	rb.currentBPS.Store(float64(0))
-
+	rb.currentBPSBits.Store(float64(0))
-	rb.lastWrite.Store(now)
-	rb.lastTick.Store(now)
-
-	rb.bytesPerSec.Store(float64(0))
-	rb.bitsPerSec.Store(float64(0))
 
 	return rb
 }
@@ -55,34 +62,103 @@ func (rb *RingBuffer) Write(b byte) {
 	rb.mu.Unlock()
 
 	// ===== ATOMIC STATS =====
-	now := time.Now().UnixNano()
+	now := time.Now()
-	rb.lastWrite.Store(now)
+	rb.lastWrite.Store(now.UnixNano())
+	rb.totalBytes.Add(1)
 
-	total := rb.totalBytes.Add(1)
+	// ===== SPEED CALC (обновляем редко) =====
+	rb.updateSpeedPeriodically(now)
 
-	// ===== SPEED CALC =====
+	// ===== Для скользящего окна =====
-	lastTick := rb.lastTick.Load()
+	rb.addTimestampedByte(now)
-	if lastTick == 0 {
+}
-		rb.lastTick.Store(now)
+
-		rb.lastBytes.Store(total)
+// Периодическое обновление скорости (простое среднее)
+func (rb *RingBuffer) updateSpeedPeriodically(now time.Time) {
+	rb.speedMu.Lock()
+	defer rb.speedMu.Unlock()
+
+	elapsed := now.Sub(rb.lastCalcTime)
+
+	// Обновляем не чаще чем раз в 250мс
+	if elapsed < 250*time.Millisecond {
 		return
 	}
 
-	elapsed := time.Duration(now - lastTick).Seconds()
+	currentTotal := rb.totalBytes.Load()
-	if elapsed < 1.0 {
+	bytesInPeriod := currentTotal - rb.lastCalcBytes
-		return
+
+	if elapsed.Seconds() > 0 {
+		bps := float64(bytesInPeriod) / elapsed.Seconds()
+		rb.currentBPS.Store(bps)
+		rb.currentBPSBits.Store(bps * 8)
 	}
 
-	last := rb.lastBytes.Load()
+	rb.lastCalcTime = now
-	diff := total - last
+	rb.lastCalcBytes = currentTotal
+}
 
-	bps := float64(diff) / elapsed
+// Скользящее окно
+func (rb *RingBuffer) addTimestampedByte(now time.Time) {
+	rb.recentMu.Lock()
+	defer rb.recentMu.Unlock()
 
-	rb.bytesPerSec.Store(bps)
+	// Добавляем новую запись
-	rb.bitsPerSec.Store(bps * 8)
+	rb.recentBytes = append(rb.recentBytes, timestampedByte{timestamp: now})
 
-	rb.lastTick.Store(now)
+	// Удаляем старые записи (старше 1 секунды)
-	rb.lastBytes.Store(total)
+	cutoff := now.Add(-1 * time.Second)
+	cutIdx := 0
+	for i, tb := range rb.recentBytes {
+		if tb.timestamp.After(cutoff) {
+			cutIdx = i
+			break
+		}
+	}
+
+	if cutIdx > 0 {
+		rb.recentBytes = rb.recentBytes[cutIdx:]
+	}
+
+	// Вычисляем скорость на основе скользящего окна
+	if len(rb.recentBytes) > 1 {
+		windowDuration := rb.recentBytes[len(rb.recentBytes)-1].timestamp.Sub(rb.recentBytes[0].timestamp)
+		if windowDuration.Seconds() > 0 {
+			bps := float64(len(rb.recentBytes)) / windowDuration.Seconds()
+			rb.currentBPS.Store(bps)
+			rb.currentBPSBits.Store(bps * 8)
+		}
+	}
+}
+
+// Получить скорость на основе скользящего окна (альтернативный метод)
+func (rb *RingBuffer) GetWindowSpeed() (bytesPerSec, bitsPerSec float64) {
+	rb.recentMu.Lock()
+	defer rb.recentMu.Unlock()
+
+	now := time.Now()
+	cutoff := now.Add(-1 * time.Second)
+
+	// Считаем байты за последнюю секунду
+	count := 0
+	for i := len(rb.recentBytes) - 1; i >= 0; i-- {
+		if rb.recentBytes[i].timestamp.Before(cutoff) {
+			break
+		}
+		count++
+	}
+
+	if count > 0 {
+		// Находим время самого старого байта в окне
+		oldest := rb.recentBytes[len(rb.recentBytes)-count].timestamp
+		duration := now.Sub(oldest).Seconds()
+		if duration > 0 {
+			bytesPerSec = float64(count) / duration
+			bitsPerSec = bytesPerSec * 8
+		}
+	}
+
+	return
 }
 
 // =====================
@@ -142,8 +218,8 @@ func (rb *RingBuffer) Stats() map[string]interface{} {
 	filled := rb.count
 	rb.mu.RUnlock()
 
-	bps, _ := rb.bytesPerSec.Load().(float64)
+	bps, _ := rb.currentBPS.Load().(float64)
-	bits, _ := rb.bitsPerSec.Load().(float64)
+	bits, _ := rb.currentBPSBits.Load().(float64)
 
 	total := rb.totalBytes.Load()
 
@@ -159,4 +235,4 @@ func (rb *RingBuffer) Stats() map[string]interface{} {
 		"bytes_per_sec": bps,
 		"bits_per_sec":  bits,
 	}
-}
+}