From 11f2c0ccb21b8836bfd8a1b0a4a1842f2f0d6845 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Fri, 8 May 2026 21:05:26 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B3=D1=80=D1=83=D0=BF=D0=BF=D0=B8=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BA=D0=B0=20=D1=82=D1=80=D0=B0=D1=84=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D1=81=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=D1=8E=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA?=
 =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/components/LogsPage.jsx | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/web/components/LogsPage.jsx b/src/web/components/LogsPage.jsx
index 1112825..e1c8671 100644
--- a/src/web/components/LogsPage.jsx
+++ b/src/web/components/LogsPage.jsx
@@ -33,11 +33,31 @@ const CATEGORY_BADGE = {
   other:  { cls: '',        label: 'other' },
 };
 
+const TRAFFIC_GROUP_WINDOW_MS = 60_000;
+
+function groupTraffic(list) {
+  const out = [];
+  for (const e of list) {
+    const key = `${e.category}|${e.host}|${e.port}|${e.matchedRule || ''}`;
+    const ts = new Date(e.ts).getTime();
+    const last = out[out.length - 1];
+    if (last && last._key === key && ts - last._lastTs < TRAFFIC_GROUP_WINDOW_MS) {
+      last.count += 1;
+      last._lastTs = ts;
+      last.lastTs = e.ts;
+    } else {
+      out.push({ ...e, _key: key, _lastTs: ts, count: 1, lastTs: e.ts });
+    }
+  }
+  return out;
+}
+
 function TrafficTab() {
   const [traffic, setTraffic] = useState([]);
   const [paused, setPaused] = useState(false);
   const [filter, setFilter] = useState('all'); // all | direct | vpn | block
   const [search, setSearch] = useState('');
+  const [grouped, setGrouped] = useState(true);
   const [autoscroll, setAutoscroll] = useState(true);
   const containerRef = useRef(null);
   const pausedRef = useRef(false);
@@ -72,8 +92,8 @@ function TrafficTab() {
         e.matchedRule?.toLowerCase().includes(s),
       );
     }
-    return list;
-  }, [traffic, filter, search]);
+    return grouped ? groupTraffic(list) : list;
+  }, [traffic, filter, search, grouped]);
 
   useEffect(() => {
     if (!autoscroll || !containerRef.current) return;
@@ -102,6 +122,10 @@ function TrafficTab() {
           <option value="vpn">VPN ({counts.vpn})</option>
           <option value="block">block ({counts.block})</option>
         </select>
+        <label className="checkbox">
+          <input type="checkbox" checked={grouped} onChange={(e) => setGrouped(e.target.checked)} />
+          Группировать
+        </label>
         <label className="checkbox">
           <input type="checkbox" checked={autoscroll} onChange={(e) => setAutoscroll(e.target.checked)} />
           Автоскролл
@@ -131,6 +155,7 @@ function TrafficTab() {
                 <th>Хост / IP</th>
                 <th style={{ width: 55 }}>Порт</th>
                 <th>Правило</th>
+                <th style={{ width: 40 }}></th>
               </tr>
             </thead>
             <tbody>
@@ -149,6 +174,9 @@ function TrafficTab() {
                         ? <span className="badge info" style={{ fontSize: 11 }}>{e.matchedRule}</span>
                         : <span className="muted" style={{ fontSize: 11 }}>—</span>}
                     </td>
+                    <td className="muted text-mono" style={{ textAlign: 'right', fontSize: 11 }}>
+                      {e.count > 1 && <span className="repeat">×{e.count}</span>}
+                    </td>
                   </tr>
                 );
               })}