в процессе, нет аккордиона, нет графика

cmd/server/web/css/style.css

@@ -209,11 +209,13 @@ h1 {
 .accordion-body {
     max-height: 520px;
     overflow: hidden;
-    transition: max-height 0.3s ease;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+    padding: 0;
 }
 
 .accordion-body.collapsed {
     max-height: 0;
+    padding: 0;
 }
 
 .progress-with-signal {
@@ -269,4 +271,15 @@ h1 {
     font-size: 18px;
     font-weight: bold;
     color: #00ff88;
+}
+
+#signalChart {
+    width: 100%;
+    background: #050805;
+    border: 1px solid #00ff88;
+    border-radius: 8px;
+}
+
+#history {
+    margin: 0;
 }

cmd/server/web/dashboard.html

@@ -59,10 +59,14 @@
             <div id="history"></div>
         </div>
     </div>
+    <div class="card wide">
+        <h3>ГРАФИК СИГНАЛА (последние 1000)</h3>
+        <canvas id="signalChart" height="120"></canvas>
+    </div>
 
 </div>
 
-<script src="/js/app.js"></script>
+<script type="module" src="/js/app.js"></script>
 
 </body>
 </html>

cmd/server/web/js/accordion.js

@@ -0,0 +1,19 @@
+// accordion.js
+import { DOM } from "./ui.js";
+
+export function initAccordion() {
+    if (!DOM.historyHeader || !DOM.historyBody) return;
+
+    let open = false;
+
+    DOM.historyBody.classList.add("collapsed");
+
+    DOM.historyHeader.addEventListener("click", () => {
+        open = !open;
+
+        DOM.historyHeader.textContent =
+            (open ? "▼" : "▶") + " ПРИНЯТЫЕ ДАННЫЕ";
+
+        DOM.historyBody.classList.toggle("collapsed", !open);
+    });
+}

cmd/server/web/js/app.js

@@ -1,113 +1,90 @@
-// ===== ACCORDION =====
-const historyHeader = document.getElementById("history-header");
-const historyBody = document.getElementById("history-body");
-let accordionOpen = false;
-historyBody.classList.add("collapsed"); // изначально свёрнут
+import { fetchHealth, fetchHistory } from "./data.js";
+import { state, smooth, addSignal } from "./state.js";
+import {
+    initDOM,
+    setStatus,
+    setMeta,
+    setBars,
+    setSignal,
+    DOM
+} from "./ui.js";
 
-historyHeader.addEventListener("click", () => {
-    accordionOpen = !accordionOpen;
-    historyHeader.textContent = (accordionOpen ? "▼" : "▶") + " ПРИНЯТЫЕ ДАННЫЕ";
-    historyBody.classList.toggle("collapsed", !accordionOpen);
+import { initAccordion } from "./accordion.js";
+import { drawChart } from "./chart.js";
+
+let lastChart = 0;
+
+// ================= INIT =================
+window.addEventListener("DOMContentLoaded", () => {
+    initDOM();
+    initAccordion();
 });
 
-// ===== PROGRESS BAR =====
-function setBar(id, value) {
-    value = Math.max(0, Math.min(100, value));
-    document.getElementById(id).style.width = value + "%";
-}
-
-// ===== SIGNAL ICON (0-3 уровня) =====
-function setSignal(level) {
-    const bars = document.querySelectorAll(".sig-bar");
-    bars.forEach(b => {
-        b.classList.remove("active-1", "active-2", "active-3", "active-4");
-        b.classList.add("dim");
-    });
-
-    if (level >= 3) {
-        bars[0].classList.add("active-1"); bars[0].classList.remove("dim");
-        bars[1].classList.add("active-2"); bars[1].classList.remove("dim");
-        bars[2].classList.add("active-3"); bars[2].classList.remove("dim");
-    } else if (level >= 2) {
-        bars[0].classList.add("active-1"); bars[0].classList.remove("dim");
-        bars[1].classList.add("active-2"); bars[1].classList.remove("dim");
-    } else if (level >= 1) {
-        bars[0].classList.add("active-1"); bars[0].classList.remove("dim");
-    }
-}
-
-// ===== SMOOTHING =====
-let lastValue = 0;
-
-function smoothBar(target) {
-    const alpha = 0.2;
-    lastValue = lastValue + alpha * (target - lastValue);
-    return lastValue;
-}
-
-// ===== MEDIAN FILTER =====
-function median(values) {
-    if (values.length === 0) return 0;
-
-    const sorted = [...values].sort((a, b) => a - b);
-    const mid = Math.floor(sorted.length / 2);
-
-    return sorted.length % 2 !== 0
-        ? sorted[mid]
-        : (sorted[mid - 1] + sorted[mid]) / 2;
-}
-
-// ===== MAIN LOOP =====
+// ================= UPDATE =================
 async function update() {
     try {
-        const r1 = await fetch("/api/health");
-        const r2 = await fetch("/api/history");
-
-        const h = await r1.json();
-        const hist = await r2.json();
+        const [h, hist] = await Promise.all([
+            fetchHealth(),
+            fetchHistory()
+        ]);
 
         // ===== STATUS =====
-        document.getElementById("status").textContent = h.status || "неизвестно";
+        setStatus(h.status || "неизвестно");
 
-        const filled = h.stats?.filled ?? 0;
-        const uptime = Math.round(h.uptime_sec || 0);
-
-        document.getElementById("meta").textContent =
-            "работа: " + uptime + "s | буфер: " + filled;
-
-        // ===== HISTORY =====
         const arr = Array.isArray(hist.bytes) ? hist.bytes : [];
 
-        document.getElementById("history").innerHTML =
-            arr.map((b, i) =>
-                "[" + i + "] " +
-                (Number(b) & 0xFF).toString(2).padStart(8, "0") +
-                " = значение: " + (Number(b) & 0xFF)
-            ).join("<br>");
+        const raw = arr[arr.length - 1] ?? 0;
 
-        // ===== ПОСЛЕДНЕЕ ЗНАЧЕНИЕ (без фильтра) =====
-        const raw = arr.length > 0 ? (arr[arr.length - 1] & 0xFF) : 0;
+        // ===== DECODE =====
+        const value = raw & 0x3F;
+        const level = (raw >> 6) & 0x3;
+        const percent = (value / 63) * 100;
 
-        // ===== ПАРСИНГ БИТ =====
-        const barValue = raw & 0x3F;          // биты 0-5 (0-63)
-        const signalLevel = (raw >> 6) & 0x3; // биты 6-7 (0-3)
+        // ===== STATE =====
+        addSignal(value);
 
-        // ===== PROGRESS BAR (0-63 -> 0-100%) =====
-        const percent = (barValue / 63) * 100;
-        const smooth = smoothBar(percent);
-        setBar("bar1", smooth);
+        // ===== UI =====
+        setBars(smooth(percent));
+        setSignal(level);
 
-        // ===== SIGNAL ICON =====
-        setSignal(signalLevel, raw);
+        // 🔥 ВОТ ЭТО ТЫ ПОТЕРЯЛ
+        if (DOM.lastByte) {
+            DOM.lastByte.textContent = value;
+        }
 
-        // ===== LAST BYTE =====
-        document.getElementById("last-byte").textContent = barValue;
+        // ===== META =====
+        const uptime = Math.round(h.uptime_sec || 0);
+        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);
+
+        setMeta(
+            `работа: ${uptime}s | буфер: ${filled} | ${bps} bit/s (${Bps} B/s)`
+        );
+
+        // ===== HISTORY =====
+        if (DOM.history) {
+            DOM.history.innerHTML = arr
+                .map((b, i) =>
+                    `[${i}] ${(b & 0xFF).toString(2).padStart(8, "0")} = ${b & 0xFF}`
+                )
+                .join("<br>");
+        }
+
+        // ===== CHART =====
+        const now = performance.now();
+
+        if (now - lastChart > 100) {
+            drawChart(state.signalHistory);
+            lastChart = now;
+        }
 
     } catch (e) {
         console.error("UPDATE ERROR:", e);
-        document.getElementById("status").textContent = "СЕРВЕР НЕДОСТУПЕН";
+        setStatus("СЕРВЕР НЕДОСТУПЕН");
     }
 }
 
+// ================= LOOP =================
 setInterval(update, 500);
 update();

cmd/server/web/js/chart.js

@@ -0,0 +1,33 @@
+// chart.js
+let ctx = null;
+
+export function drawChart(canvas, history) {
+    if (!canvas || !history?.length) return;
+
+    const ctx = canvas.getContext("2d");
+
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+
+    const w = canvas.width;
+    const h = canvas.height;
+
+    ctx.clearRect(0, 0, w, h);
+
+    const stepX = w / 1000;
+    const scaleY = h / 63;
+
+    ctx.strokeStyle = "#00ff88";
+    ctx.beginPath();
+
+    for (let i = 0; i < history.length; i++) {
+        const x = i * stepX;
+        const y = h - history[i].value * scaleY; // 👈 FIX
+
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+    }
+
+    ctx.stroke();
+}

cmd/server/web/js/data.js

@@ -0,0 +1,10 @@
+// data.js (API слой)
+export async function fetchHealth() {
+    const r = await fetch("/api/health");
+    return r.json();
+}
+
+export async function fetchHistory() {
+    const r = await fetch("/api/history");
+    return r.json();
+}

cmd/server/web/js/state.js

@@ -0,0 +1,21 @@
+// state.js (вся логика состояния)
+export const state = {
+    maxPoints: 1000,
+    signalHistory: [],
+    smoothValue: 0,
+};
+
+// сглаживание
+export function smooth(target) {
+    state.smoothValue += 0.2 * (target - state.smoothValue);
+    return state.smoothValue;
+}
+
+// добавление в историю
+export function addSignal(value) {
+    state.signalHistory.push(value);
+
+    if (state.signalHistory.length > state.maxPoints) {
+        state.signalHistory.shift();
+    }
+}

cmd/server/web/js/ui.js

@@ -0,0 +1,56 @@
+// ui.js (DOM слой)
+export let DOM = {};
+
+export function initDOM() {
+    DOM.status = document.getElementById("status");
+    DOM.meta = document.getElementById("meta");
+    DOM.latest = document.getElementById("latest");
+    DOM.lastByte = document.getElementById("last-byte");
+    DOM.history = document.getElementById("history");
+    DOM.canvas = document.getElementById("signalChart");
+
+    DOM.bars = document.querySelectorAll(".sig-bar");
+}
+
+export function setStatus(v) {
+    if (DOM.status) DOM.status.textContent = v;
+}
+
+export function setMeta(v) {
+    if (DOM.meta) DOM.meta.textContent = v;
+}
+
+export function setBars(p) {
+    const el = document.getElementById("bar1");
+    if (!el) return;
+    el.style.width = Math.max(0, Math.min(100, p)) + "%";
+}
+
+export function setSignal(level) {
+    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.add("dim");
+    });
+
+    // 1 bar
+    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

@@ -1,99 +1,162 @@
-// internal/adapter/buffer.go
 package adapter
 
 import (
-    "sync"
-    "time"
+	"sync"
+	"sync/atomic"
+	"time"
 )
 
 type RingBuffer struct {
-    mu       sync.RWMutex
-    data     []byte
-    writePtr int
-    count    int
+	mu       sync.RWMutex
+	data     []byte
+	writePtr int
+	count    int
 
-    lastWrite time.Time
+	lastWrite atomic.Int64
+
+	totalBytes atomic.Uint64
+
+	// ===== SPEED =====
+	lastTick  atomic.Int64
+	lastBytes atomic.Uint64
+
+	bytesPerSec atomic.Value // float64
+	bitsPerSec  atomic.Value // float64
 }
 
+// =====================
 func NewRingBuffer(size int) *RingBuffer {
-    return &RingBuffer{
-        data: make([]byte, size),
-        lastWrite: time.Now(),
-    }
+	rb := &RingBuffer{
+		data: make([]byte, size),
+	}
+
+	now := time.Now().UnixNano()
+
+	rb.lastWrite.Store(now)
+	rb.lastTick.Store(now)
+
+	rb.bytesPerSec.Store(float64(0))
+	rb.bitsPerSec.Store(float64(0))
+
+	return rb
 }
 
+// =====================
 func (rb *RingBuffer) Write(b byte) {
-    rb.mu.Lock()
-    defer rb.mu.Unlock()
+	rb.mu.Lock()
 
-    rb.data[rb.writePtr] = b
-    rb.writePtr = (rb.writePtr + 1) % len(rb.data)
+	rb.data[rb.writePtr] = b
+	rb.writePtr = (rb.writePtr + 1) % len(rb.data)
 
-    if rb.count < len(rb.data) {
-        rb.count++
-    }
+	if rb.count < len(rb.data) {
+		rb.count++
+	}
 
-    rb.lastWrite = time.Now()
+	rb.mu.Unlock()
+
+	// ===== ATOMIC STATS =====
+	now := time.Now().UnixNano()
+	rb.lastWrite.Store(now)
+
+	total := rb.totalBytes.Add(1)
+
+	// ===== SPEED CALC =====
+	lastTick := rb.lastTick.Load()
+	if lastTick == 0 {
+		rb.lastTick.Store(now)
+		rb.lastBytes.Store(total)
+		return
+	}
+
+	elapsed := time.Duration(now - lastTick).Seconds()
+	if elapsed < 1.0 {
+		return
+	}
+
+	last := rb.lastBytes.Load()
+	diff := total - last
+
+	bps := float64(diff) / elapsed
+
+	rb.bytesPerSec.Store(bps)
+	rb.bitsPerSec.Store(bps * 8)
+
+	rb.lastTick.Store(now)
+	rb.lastBytes.Store(total)
 }
 
+// =====================
 func (rb *RingBuffer) LastWriteTime() time.Time {
-    rb.mu.RLock()
-    defer rb.mu.RUnlock()
-    return rb.lastWrite
+	return time.Unix(0, rb.lastWrite.Load())
 }
 
+// =====================
 func (rb *RingBuffer) GetLatest() (byte, bool) {
-    rb.mu.RLock()
-    defer rb.mu.RUnlock()
+	rb.mu.RLock()
+	defer rb.mu.RUnlock()
 
-    if rb.count == 0 {
-        return 0, false
-    }
+	if rb.count == 0 {
+		return 0, false
+	}
 
-    idx := rb.writePtr - 1
-    if idx < 0 {
-        idx += len(rb.data)
-    }
+	idx := rb.writePtr - 1
+	if idx < 0 {
+		idx += len(rb.data)
+	}
 
-    return rb.data[idx], true
+	return rb.data[idx], true
 }
 
+// =====================
 func (rb *RingBuffer) GetLast(n int) []byte {
-    rb.mu.RLock()
-    defer rb.mu.RUnlock()
+	rb.mu.RLock()
+	defer rb.mu.RUnlock()
 
-    if n > rb.count {
-        n = rb.count
-    }
+	if n > rb.count {
+		n = rb.count
+	}
 
-    res := make([]byte, n)
+	res := make([]byte, n)
 
-    start := rb.writePtr - n
-    if start < 0 {
-        start += len(rb.data)
-        copy(res, rb.data[start:])
-        copy(res[len(rb.data)-start:], rb.data[:rb.writePtr])
-    } else {
-        copy(res, rb.data[start:rb.writePtr])
-    }
+	start := rb.writePtr - n
 
-    return res
-}
-
-func (rb *RingBuffer) Stats() map[string]interface{} {
-    rb.mu.RLock()
-    defer rb.mu.RUnlock()
-
-    return map[string]interface{}{
-        "size":       len(rb.data),
-        "filled":     rb.count,
-        "last_write": rb.lastWrite,
-    }
+	if start < 0 {
+		start += len(rb.data)
+		copy(res, rb.data[start:])
+		copy(res[len(rb.data)-start:], rb.data[:rb.writePtr])
+	} else {
+		copy(res, rb.data[start:rb.writePtr])
+	}
+
+	return res
 }
 
+// =====================
 func (rb *RingBuffer) IsAlive(timeout time.Duration) bool {
-    rb.mu.RLock()
-    defer rb.mu.RUnlock()
-
-    return time.Since(rb.lastWrite) < timeout
+	return time.Since(time.Unix(0, rb.lastWrite.Load())) < timeout
+}
+
+// =====================
+func (rb *RingBuffer) Stats() map[string]interface{} {
+	rb.mu.RLock()
+	filled := rb.count
+	rb.mu.RUnlock()
+
+	bps, _ := rb.bytesPerSec.Load().(float64)
+	bits, _ := rb.bitsPerSec.Load().(float64)
+
+	total := rb.totalBytes.Load()
+
+	return map[string]interface{}{
+		"size":   len(rb.data),
+		"filled": filled,
+
+		"last_write": time.Unix(0, rb.lastWrite.Load()),
+
+		"total_bytes": total,
+		"total_bits":  total * 8,
+
+		"bytes_per_sec": bps,
+		"bits_per_sec":  bits,
+	}
 }