Refactor audio playback logic in FakeAdminResponder to ensure that audio plays on start

Update frontend to show packet offsets

See merge request packmate/Packmate!21

.dockerignore

@@ -6,3 +6,4 @@ docker-compose.yml
 Dockerfile_*
 data
 README*
+references_for_redisign

.env.example

@@ -0,0 +1,33 @@
+# Default mode - intercept live traffic
+PACKMATE_MODE=LIVE
+# Alternative modes:
+# Parse pcap file:
+# PACKMATE_MODE=FILE
+# Just show already captured streams:
+# PACKMATE_MODE=VIEW
+
+# Local IP on network interface or in pcap file to tell incoming packets from outgoing
+PACKMATE_LOCAL_IP=192.168.137.147
+# Username for the web interface
+PACKMATE_WEB_LOGIN=SomeUser
+# Password for the web interface
+PACKMATE_WEB_PASSWORD=SomeSecurePassword
+
+# Settings for PACKMATE_MODE=LIVE
+# Interface to capture on:
+PACKMATE_INTERFACE=eth0
+
+# Settings for PACKMATE_MODE=FILE
+# Name of the file in pcaps directory to parse:
+# PACKMATE_PCAP_FILE=dump.pcap
+
+# Delete old streams (except for those marked favorite). Recommended to keep enabled
+PACKMATE_OLD_STREAMS_CLEANUP_ENABLED=true
+# How often to do the cleanup (best to keep the interval low)
+PACKMATE_OLD_STREAMS_CLEANUP_INTERVAL=5
+# Stream older than this value (in minutes) will be deleted
+PACKMATE_OLD_STREAMS_CLEANUP_THRESHOLD=240
+
+# Optional settings:
+# PACKMATE_DB_PASSWORD=K604YnL3G1hp2RDkCZNjGpxbyNpNHTRb
+# BUILD_TAG=latest

.gitea/workflows/build.yml

@@ -0,0 +1,41 @@
+name: Build and push image
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  docker-build:
+    runs-on: [self-hosted, linux, x64, docker]
+    env:
+      IMAGE_NAME: cr.danosito.com/0xb00b5/0xb00b5-packmate
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Login to registry
+        run: |
+          echo "${{ vars.REGISTRY_PASSWORD }}" | docker login cr.danosito.com \
+            -u "${{ vars.REGISTRY_USER }}" --password-stdin
+
+
+      - name: Build image
+        env:
+          IMAGE_TAG: ${{ gitea.sha }}
+        run: |
+          docker build \
+            -f docker/Dockerfile_app \
+            -t "${IMAGE_NAME}:${IMAGE_TAG}" \
+            -t "${IMAGE_NAME}:latest" \
+            .
+
+      - name: Push image
+        env:
+          IMAGE_TAG: ${{ gitea.sha }}
+        run: |
+          docker push "${IMAGE_NAME}:${IMAGE_TAG}"
+          docker push "${IMAGE_NAME}:latest"

.gitignore

@@ -1,4 +1,4 @@
-src/main/resources/static/*
+references_for_redisign
 *.pcap
 data
 

.gitlab-ci.yml

@@ -1,24 +0,0 @@
-docker-build:
-  image: docker:latest
-  stage: build
-  variables:
-    GIT_SUBMODULE_STRATEGY: normal
-  services:
-    - docker:dind
-  before_script:
-    - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
-  script:
-    - touch .env
-    - |
-      if [[ "$CI_COMMIT_BRANCH" == "$CI_DEFAULT_BRANCH" ]]; then # master
-        export BUILD_TAG=latest
-        echo "Running on default branch '$CI_DEFAULT_BRANCH'"
-      else # tag
-        export BUILD_TAG="$CI_COMMIT_TAG"
-        echo "Running on tag = $BUILD_TAG"
-      fi
-    - docker compose build
-    - docker compose push
-  only:
-    - master
-    - tags

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "frontend"]
-	path = frontend
-	url = https://gitlab.com/packmate/packmate-frontend.git

README.md

@@ -1,10 +1,10 @@
 <div align="center">
 
-# Packmate
+# 0xb00b5 team Packmate
 </div>
 
 ### [[EN](README_EN.md) | RU]
-Утилита перехвата и анализа трафика для CTF.
+Утилита перехвата и анализа трафика для CTF, переосмысленная в пиксельном неоне.
 
 #### Фичи:
 * Поддерживает перехват живого трафика и обработку pcap файлов
@@ -23,27 +23,31 @@
 * Разархивирует GZIP в HTTP на лету
 * Разархивирует сжатые WebSockets
 * Расшифровывает TLS на RSA при наличии приватного ключа
+* Обманка для входа `admin:admin` с режимами `fun` и `fake_packets`, чтобы любопытные так и не добрались до настоящих пакетов
 
 ![Скриншот главного окна](screenshots/Screenshot.png)
 
+### Обманка admin:admin
+Для входа с кредами `admin:admin` добавлена обманка (включена по умолчанию). Управляется через переменные `PACKMATE_FAKE_ADMIN_ENABLED` и `PACKMATE_FAKE_ADMIN_MODE` (`fun` или `fake_packets`) и не дает добраться до настоящего интерфейса.
+
 ## Быстрый запуск
-Для быстрого запуска Packmate следует использовать [этот стартер](https://gitlab.com/packmate/starter/-/blob/master/README.md).
+Для быстрого запуска 0xb00b5 team Packmate следует использовать [этот стартер](https://gitlab.com/packmate/starter/-/blob/master/README.md).
 
 ## Полный запуск
-Ниже следует инструкция для тех, кто хочет собрать Packmate самостоятельно.
+Ниже следует инструкция для тех, кто хочет собрать 0xb00b5 team Packmate самостоятельно.
 
 ### Клонирование
 Поскольку этот репозиторий содержит фронтенд как git submodule, его необходимо клонировать так:
 ```bash
-git clone --recurse-submodules https://gitlab.com/packmate/Packmate.git
+git clone --recurse-submodules https://git.danosito.com/0xb00b5/0xb00b5-packmate.git
 
 # Или, на старых версиях git
-git clone --recursive https://gitlab.com/packmate/Packmate.git
+git clone --recursive https://git.danosito.com/0xb00b5/0xb00b5-packmate.git
 ```
 
 Если репозиторий уже был склонирован без подмодулей, необходимо выполнить:
 ```bash
-git pull  # Забираем свежую версию мастер-репы из gitlab
+git pull  # Забираем свежую версию мастер-репы
 git submodule update --init --recursive
 ```
 
@@ -56,7 +60,7 @@ git submodule update --init --recursive
 sudo docker compose up --build -d
 ```
 
-При успешном запуске Packmate будет видно с любого хоста на порту `65000`.
+При успешном запуске 0xb00b5 team Packmate будет видно с любого хоста на порту `65000`.
 БД будет слушать на порту 65001, но будет разрешать подключения только с localhost.
 
 ## Использование
@@ -64,5 +68,5 @@ sudo docker compose up --build -d
 
 <div align="right">
 
-*desu~*
+*@danosito*
 </div>

README_EN.md

@@ -1,10 +1,10 @@
 <div align="center">
 
-# Packmate
+# 0xb00b5 team Packmate
 </div>
 
 ### [EN | [RU](README.md)]
-Advanced network traffic flow analyzer for A/D CTFs.
+Advanced network traffic flow analyzer for A/D CTFs with a pixel-neon twist.
 
 #### Features:
 * Can monitor live traffic or analyze pcap files
@@ -23,22 +23,26 @@ Advanced network traffic flow analyzer for A/D CTFs.
 * Can automatically decompress GZIPed HTTP
 * Can automatically deflate WebSockets with permessages-deflate extension
 * Can automatically decrypt TLS with RSA using given private key (like Wireshark)
+* Decoy login for `admin:admin` with `fun` and `fake_packets` modes so snoopers never see the real data
 
 ![Main window](screenshots/Screenshot.png)
 
+### Admin:admin decoy
+The admin:admin credentials now trigger a decoy (enabled by default). Configure it via `PACKMATE_FAKE_ADMIN_ENABLED` and `PACKMATE_FAKE_ADMIN_MODE` (`fun` or `fake_packets`) to keep everyone away from the real interface.
+
 ## Quick Start
-To quickly start using Packmate, use [this starter](https://gitlab.com/packmate/starter/-/blob/master/README_EN.md).
+To quickly start using 0xb00b5 team Packmate, use [this starter](https://gitlab.com/packmate/starter/-/blob/master/README_EN.md).
 
 ## Full Build
-Below are the instructions for those who want to build Packmate on their own.
+Below are the instructions for those who want to build 0xb00b5 team Packmate on their own.
 
 ### Cloning
 As this repository contains frontend part as a git submodule, it has to be cloned like this:
 ```bash
-git clone --recurse-submodules https://gitlab.com/packmate/Packmate.git
+git clone --recurse-submodules https://git.danosito.com/0xb00b5/0xb00b5-packmate.git
 
 # Or if you have older git
-git clone --recursive https://gitlab.com/packmate/Packmate.git
+git clone --recursive https://git.danosito.com/0xb00b5/0xb00b5-packmate.git
 ```
 
 If the repository was already cloned without submodule, just run:
@@ -56,7 +60,7 @@ After filling in env file you can launch the app:
 sudo docker-compose up --build -d
 ```
 
-If everything went fine, Packmate will be available on port `65000` from any host.
+If everything went fine, 0xb00b5 team Packmate will be available on port `65000` from any host.
 Database with listen on port 65001, but will only accept connections from localhost.
 
 ## Usage

build.gradle.kts

@@ -46,6 +46,8 @@ dependencies {
     implementation(group = "org.bouncycastle", name = "bcprov-jdk15on", version = "1.70")
     implementation(group = "org.bouncycastle", name = "bctls-jdk15on", version = "1.70")
     implementation(group = "org.modelmapper", name = "modelmapper", version = "3.1.1")
+    implementation("com.athaydes.rawhttp:rawhttp-core:2.5.2")
+
     compileOnly("org.jetbrains:annotations:24.0.1")
     compileOnly("org.projectlombok:lombok")
     runtimeOnly("org.springframework.boot:spring-boot-devtools")

docker-compose.yml

@@ -6,19 +6,25 @@ services:
       LOCAL_IP: ${PACKMATE_LOCAL_IP}
       MODE: ${PACKMATE_MODE:-LIVE}
       PCAP_FILE: ${PACKMATE_PCAP_FILE:-}
-      WEB_LOGIN: ${PACKMATE_WEB_LOGIN:-BinaryBears}
+      WEB_LOGIN: ${PACKMATE_WEB_LOGIN:-0xb00b5}
-      WEB_PASSWORD: ${PACKMATE_WEB_PASSWORD:-123456}
+      WEB_PASSWORD: ${PACKMATE_WEB_PASSWORD:-87654321}
+      FAKE_ADMIN_AUTH_ENABLED: ${PACKMATE_FAKE_ADMIN_ENABLED:-true}
+      FAKE_ADMIN_MODE: ${PACKMATE_FAKE_ADMIN_MODE:-fun}
       OLD_STREAMS_CLEANUP_ENABLED: ${PACKMATE_OLD_STREAMS_CLEANUP_ENABLED:-false}
       OLD_STREAMS_CLEANUP_INTERVAL: ${PACKMATE_OLD_STREAMS_CLEANUP_INTERVAL:-5}
       OLD_STREAMS_CLEANUP_THRESHOLD: ${PACKMATE_OLD_STREAMS_CLEANUP_THRESHOLD:-240}
     env_file:
       - .env
+    cap_add:
+      - NET_ADMIN
+      - NET_RAW
+    privileged: true
     container_name: packmate-app
     build:
       context: .
       dockerfile: docker/Dockerfile_app
     network_mode: "host"
-    image: registry.gitlab.com/packmate/packmate:${BUILD_TAG:-latest}
+    image: cr.danosito.com/0xb00b5/0xb00b5-packmate:${BUILD_TAG:-latest}
     volumes:
       - "./pcaps/:/app/pcaps/:ro"
       - "./rsa_keys/:/app/rsa_keys/:ro"
@@ -43,4 +49,4 @@ services:
       test: [ "CMD-SHELL", "pg_isready -U packmate -p 65001" ]
       interval: 2s
       timeout: 5s
-      retries: 15
+      retries: 15

docker/Dockerfile_app

@@ -1,5 +1,6 @@
 FROM node:19-alpine
 WORKDIR /tmp/build/
+RUN apk add --no-cache python3 make g++
 COPY ./frontend/ .
 RUN export NODE_OPTIONS=--openssl-legacy-provider && npm install && npm run build
 
@@ -17,11 +18,15 @@ COPY --from=1 /tmp/compile/build/libs/packmate-*-SNAPSHOT.jar app.jar
 CMD [ "java", "-Djava.net.preferIPv4Stack=true", "-Djava.net.preferIPv4Addresses=true",  \
       "-jar", "/app/app.jar", "--spring.datasource.url=jdbc:postgresql://127.0.0.1:65001/packmate", \
       "--spring.datasource.password=${DB_PASSWORD}", \
-      "--capture-mode=${MODE}", "--pcap-file=${PCAP_FILE}", \
+      "--packmate.capture-mode=${MODE}", "--packmate.pcap-file=${PCAP_FILE}", \
-      "--interface-name=${INTERFACE}", "--local-ip=${LOCAL_IP}", "--account-login=${WEB_LOGIN}", \
+      "--packmate.interface-name=${INTERFACE}", "--packmate.local-ip=${LOCAL_IP}", \
-      "--old-streams-cleanup-enabled=${OLD_STREAMS_CLEANUP_ENABLED}", "--cleanup-interval=${OLD_STREAMS_CLEANUP_INTERVAL}", \
+      "--packmate.web.account-login=${WEB_LOGIN}", "--packmate.web.account-password=${WEB_PASSWORD}", \
-      "--old-streams-threshold=${OLD_STREAMS_CLEANUP_THRESHOLD}", \
+      "--packmate.web.fake-admin.enabled=${FAKE_ADMIN_AUTH_ENABLED}", \
-      "--account-password=${WEB_PASSWORD}", "--server.port=65000", "--server.address=0.0.0.0" \
+      "--packmate.web.fake-admin.mode=${FAKE_ADMIN_MODE}", \
+      "--packmate.cleanup.enabled=${OLD_STREAMS_CLEANUP_ENABLED}", \
+      "--packmate.cleanup.interval=${OLD_STREAMS_CLEANUP_INTERVAL}", \
+      "--packmate.cleanup.threshold=${OLD_STREAMS_CLEANUP_THRESHOLD}", \
+      "--server.port=65000", "--server.address=0.0.0.0" \
 ]
 
-EXPOSE 65000
+EXPOSE 65000

docs/SETUP.md

@@ -1,6 +1,6 @@
 ## Настройка
 
-Packmate использует настройки из файла `.env` (в той же папке, что и `docker-compose.yml`)
+0xb00b5 team Packmate использует настройки из файла `.env` (в той же папке, что и `docker-compose.yml`)
 
 ### Основные настройки
 ```dotenv
@@ -10,13 +10,17 @@ PACKMATE_LOCAL_IP=10.20.1.1
 PACKMATE_WEB_LOGIN=SomeUser
 # Пароль для web-авторизации
 PACKMATE_WEB_PASSWORD=SomeSecurePassword
+# Включает обманку при вводе admin:admin
+PACKMATE_FAKE_ADMIN_ENABLED=true
+# fun или fake_packets - варианты обманки
+PACKMATE_FAKE_ADMIN_MODE=fun
 ```
 
 ### Режим работы
-Packmate поддерживает три основных режима работы: `LIVE`, `FILE` и `VIEW`.
+0xb00b5 team Packmate поддерживает три основных режима работы: `LIVE`, `FILE` и `VIEW`.
-1. `LIVE` - это основной режим работы во время CTF. Packmate обрабатывает живой трафик и сразу выводит результаты.
+1. `LIVE` - это основной режим работы во время CTF. 0xb00b5 team Packmate обрабатывает живой трафик и сразу выводит результаты.
-2. `FILE` - обрабатывает трафик из pcap файлов. Полезен для анализа трафика с прошедших CTF, где не был запущен Packmate, или тех, где невозможно запустить его на вулнбоксе.
+2. `FILE` - обрабатывает трафик из pcap файлов. Полезен для анализа трафика с прошедших CTF, где не был запущен 0xb00b5 team Packmate, или тех, где невозможно запустить его на вулнбоксе.
-3. `VIEW` - Packmate не обрабатывает трафик, а только показывает уже обработанные стримы. Полезен для разборов после завершения CTF.
+3. `VIEW` - 0xb00b5 team Packmate не обрабатывает трафик, а только показывает уже обработанные стримы. Полезен для разборов после завершения CTF.
 
 <details>
   <summary>Настройка LIVE</summary>
@@ -52,7 +56,7 @@ PACKMATE_PCAP_FILE=dump.pcap
 <details>
   <summary>Настройка VIEW</summary>
 
-В этом режиме Packmate просто показывает уже имеющиеся данные. 
+В этом режиме 0xb00b5 team Packmate просто показывает уже имеющиеся данные. 
 
 ```dotenv
 # Режим работы - просмотр
@@ -62,7 +66,7 @@ PACKMATE_MODE=VIEW
 </details>
 
 ### Очистка БД
-На крупных CTF через какое-то время накапливается большое количество трафика. Это замедляет работу Packmate и занимает много места на диске.
+На крупных CTF через какое-то время накапливается большое количество трафика. Это замедляет работу 0xb00b5 team Packmate и занимает много места на диске.
 
 Для оптимизации работы, рекомендуется включить регулярную очистку БД от старых стримов. Это будет работать только в режиме `LIVE`.
 ```dotenv
@@ -79,11 +83,11 @@ PACKMATE_OLD_STREAMS_CLEANUP_THRESHOLD=240
 ```dotenv
 # Пароль от БД. Из-за того, что БД принимает подключения только с localhost, менять его необязательно, но можно, для дополнительной безопасности.
 PACKMATE_DB_PASSWORD=K604YnL3G1hp2RDkCZNjGpxbyNpNHTRb
-# Версия Packmate. Можно изменить, если нужно использовать другой образ из docker registry.
+# Версия 0xb00b5 team Packmate. Можно изменить, если нужен другой тег образа из cr.danosito.com/danosito/0xb00b5-packmate.
 BUILD_TAG=latest
 ```
 
 Чтобы использовать расшифровку TLS (с RSA), нужно положить соответствующий приватный ключ, который
 использовался для генерации сертификата, в папку `rsa_keys`.
 
-Файлы БД сохраняются в ./data, поэтому для обнуления базы нужно удалить эту папку.
+Файлы БД сохраняются в ./data, поэтому для обнуления базы нужно удалить эту папку.

docs/SETUP_EN.md

@@ -1,6 +1,6 @@
 ## Setup
 
-Packmate uses properties from the `.env` file (in the same directory as `docker-compose.yml`)
+0xb00b5 team Packmate uses properties from the `.env` file (in the same directory as `docker-compose.yml`)
 
 ### Primary settings
 ```dotenv
@@ -10,13 +10,17 @@ PACKMATE_LOCAL_IP=10.20.1.1
 PACKMATE_WEB_LOGIN=SomeUser
 # Password for the web interface
 PACKMATE_WEB_PASSWORD=SomeSecurePassword
+# Enable decoy flow for admin:admin login
+PACKMATE_FAKE_ADMIN_ENABLED=true
+# fun or fake_packets - pick the decoy flavor
+PACKMATE_FAKE_ADMIN_MODE=fun
 ```
 
 ### Modes of operation
-Packmate supports 3 modes of operation: `LIVE`, `FILE` и `VIEW`.
+0xb00b5 team Packmate supports 3 modes of operation: `LIVE`, `FILE` и `VIEW`.
-1. `LIVE` - the usual mode during a CTF. Packmate processes live traffic and instantly displays the results.
+1. `LIVE` - the usual mode during a CTF. 0xb00b5 team Packmate processes live traffic and instantly displays the results.
-2. `FILE` - processes traffic from pcap files. Useful to analyze traffic from past CTFs where Packmate wasn't launched, or CTFs where it's impossible to use it on the vulnbox.
+2. `FILE` - processes traffic from pcap files. Useful to analyze traffic from past CTFs where 0xb00b5 team Packmate wasn't launched, or CTFs where it's impossible to use it on the vulnbox.
-3. `VIEW` - Packmate does not process any traffic, but simply shows already processed streams. Useful for post-game analyses.
+3. `VIEW` - 0xb00b5 team Packmate does not process any traffic, but simply shows already processed streams. Useful for post-game analyses.
 
 <details>
   <summary>LIVE setup</summary>
@@ -52,7 +56,7 @@ PACKMATE_PCAP_FILE=dump.pcap
 <details>
   <summary>VIEW setup</summary>
 
-In that mode, Packmate simply shows already existing data.
+In that mode, 0xb00b5 team Packmate simply shows already existing data.
 
 ```dotenv
 # Mode: viewing the data
@@ -62,7 +66,7 @@ PACKMATE_MODE=VIEW
 </details>
 
 ### Database cleanup
-On large CTFsб after some time a lot of traffic will pile up. This can slow Packmate down and take a lot of drive space.
+On large CTFsб after some time a lot of traffic will pile up. This can slow 0xb00b5 team Packmate down and take a lot of drive space.
 
 To optimize the workflow, it is recommended to enable periodical database cleanup of old streams. It will only work in the `LIVE` mode.
 ```dotenv
@@ -79,10 +83,10 @@ PACKMATE_OLD_STREAMS_CLEANUP_THRESHOLD=240
 ```dotenv
 # Database password. Considering it only listens on localhost, it's not mandatory to change it, but you can do it for additional security.
 PACKMATE_DB_PASSWORD=K604YnL3G1hp2RDkCZNjGpxbyNpNHTRb
-# Packmate version. Change it if you want to use a different version from the docker registry.
+# 0xb00b5 team Packmate version. Change it if you want to use a different tag from cr.danosito.com/danosito/0xb00b5-packmate.
 BUILD_TAG=latest
 ```
 
 To use the TLS decryption, you have to put the matching private key in the `rsa_keys` directory.
 
-Database files are being saved in `./data`, so to reset the database, you need to delete this directory.
+Database files are being saved in `./data`, so to reset the database, you need to delete this directory.

frontend/.gitignore

@@ -0,0 +1,86 @@
+.idea
+cmake-build-debug/
+cmake-build-release/
+*.iws
+out/
+.idea_modules/
+atlassian-ide-plugin.xml
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+*.bak
+/.tgitconfig
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pids
+*.pid
+*.seed
+*.pid.lock
+lib-cov
+coverage
+.nyc_output
+.grunt
+bower_components
+.lock-wscript
+build/Release
+node_modules/
+jspm_packages/
+typings/
+.npm
+.eslintcache
+.node_repl_history
+*.tgz
+.yarn-integrity
+.env
+.next
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+*.stackdump
+[Dd]esktop.ini
+$RECYCLE.BIN/
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+*.lnk
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-v][a-z]
+[._]sw[a-p]
+Session.vim
+.netrwhist
+*~
+tags
+[._]*.un~
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+*.elc
+auto-save-list
+tramp
+.\#*
+.org-id-locations
+*_archive
+*_flymake.*
+/eshell/history
+/eshell/lastdir
+/elpa/
+*.rel
+/auto/
+.cask/
+dist/
+flycheck_*.el
+/server/
+.projectile
+.dir-locals.el
+.fuse_hidden*
+.directory
+.Trash-*
+.nfs*
+$*$

frontend/README.md

@@ -0,0 +1,29 @@
+# packmate-frontend
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	presets: [
+		'@vue/app',
+	],
+	plugins: [
+		'@babel/plugin-proposal-optional-chaining',
+	],
+};

frontend/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "packmate-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.4.0",
+    "bootstrap": "^4.6.2",
+    "bootstrap-darkmode": "^0.9.1",
+    "bootstrap-vue": "^2.23.1",
+    "core-js": "^3.26.1",
+    "idb": "^5.0.8",
+    "sockjs-client": "^1.6.1",
+    "vue": "^2.6.14",
+    "vue-infinite-loading": "^2.4.5",
+    "vue-router": "^3.6.5",
+    "vuex": "^3.6.2",
+    "vuex-persistedstate": "^3.2.1",
+    "vuex-shared-mutations": "^1.0.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-service": "^4.3.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^8.0.0",
+    "sass-loader": "^10.4.1",
+    "vue-template-compiler": "^2.7.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "indent": [
+        "off"
+      ],
+      "no-mixed-spaces-and-tabs": "off",
+      "comma-dangle": [
+        "warn",
+        {
+          "arrays": "always",
+          "objects": "always",
+          "imports": "always",
+          "exports": "always",
+          "functions": "never"
+        }
+      ],
+      "no-console": "off"
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

frontend/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#afd9f0</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

frontend/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="utf-8">
+	<meta content="IE=edge" http-equiv="X-UA-Compatible">
+	<title>0xb00b5 team Packmate</title>
+
+	<meta name="author" content="@danosito">
+
+	<meta content="width=device-width,initial-scale=1.0" name="viewport">
+	<!--suppress HtmlUnknownTarget -->
+	<link href="<%= BASE_URL %>favicon.ico" rel="icon">
+</head>
+<body>
+<noscript>
+	<strong>Please enable JavaScript to continue!!</strong>
+</noscript>
+<div id="app"></div>
+</body>
+</html>

frontend/public/safari-pinned-tab.svg

@@ -0,0 +1,135 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1453.000000pt" height="1453.000000pt" viewBox="0 0 1453.000000 1453.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,1453.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M7065 14523 c-1372 -40 -2685 -458 -3825 -1216 -157 -105 -420 -294
+-420 -303 0 -2 17 3 38 11 20 8 84 26 142 40 58 14 148 39 200 54 127 39 219
+58 314 66 44 4 100 13 124 20 25 8 81 17 126 21 44 3 89 11 99 16 95 49 332
+73 722 73 306 -1 463 -10 636 -40 167 -28 298 -56 404 -85 44 -12 103 -27 130
+-34 60 -16 250 -77 320 -104 28 -11 86 -33 130 -50 175 -66 550 -246 619 -296
+17 -13 67 -44 111 -70 44 -26 102 -61 129 -78 l49 -32 47 17 c88 31 191 13
+245 -43 l28 -29 51 46 c69 62 286 203 366 238 36 16 70 32 75 36 10 7 190 82
+290 121 108 42 410 138 433 138 8 0 28 6 45 14 74 32 376 88 657 120 368 43
+516 44 1020 6 413 -30 709 -73 915 -133 100 -28 208 -97 265 -170 45 -55 45
+-64 11 -142 -10 -22 -30 -69 -44 -105 -67 -171 -218 -472 -339 -680 -99 -168
+-127 -225 -128 -254 0 -10 30 -52 68 -94 117 -130 132 -147 132 -154 0 -5 -30
+-56 -66 -115 -37 -60 -80 -133 -97 -163 l-29 -54 13 -106 c17 -136 15 -322 -4
+-430 -18 -94 -51 -233 -61 -248 -3 -5 -12 -57 -21 -115 -11 -82 -22 -122 -50
+-176 -40 -81 -39 -76 -22 -93 12 -12 35 -47 179 -269 59 -90 124 -186 228
+-337 24 -34 64 -86 89 -115 25 -29 69 -80 96 -112 67 -79 238 -252 298 -299
+104 -84 198 -144 317 -205 126 -63 185 -100 177 -108 -5 -4 -168 10 -302 27
+-174 21 -383 102 -532 206 -37 26 -81 57 -98 68 -51 36 -118 98 -163 150 -59
+71 -58 69 -75 102 -14 25 -16 26 -17 8 0 -12 5 -46 11 -75 6 -30 17 -88 24
+-129 7 -41 23 -127 35 -190 25 -135 46 -281 60 -435 6 -60 17 -171 25 -245 8
+-74 17 -227 20 -340 3 -113 10 -234 15 -270 5 -36 12 -361 16 -723 6 -514 4
+-679 -6 -755 -15 -117 -5 -231 36 -387 14 -55 30 -122 35 -150 5 -27 14 -59
+19 -70 5 -11 21 -55 35 -97 57 -171 195 -440 297 -582 15 -21 30 -55 34 -75 3
+-20 19 -49 34 -66 37 -39 59 -94 49 -120 -7 -18 -8 -18 -8 -2 -2 36 -77 134
+-206 268 -121 125 -211 233 -277 334 -114 176 -160 253 -217 370 -76 158 -129
+292 -157 400 -6 22 -10 -1 -15 -85 -11 -185 -39 -500 -49 -560 -6 -30 -14 -84
+-19 -120 -20 -141 -42 -266 -51 -290 -5 -14 -12 -45 -16 -70 -3 -24 -10 -51
+-14 -60 -4 -8 -15 -40 -24 -70 -8 -30 -24 -72 -35 -93 l-19 -38 59 -112 c32
+-62 66 -126 74 -144 34 -73 147 -194 252 -270 29 -21 54 -43 56 -48 3 -7 -48
+-9 -147 -7 -125 3 -164 7 -227 27 -75 23 -179 73 -210 101 -8 8 -20 14 -26 14
+-24 0 -203 227 -203 258 0 6 -4 12 -8 12 -4 0 -14 16 -21 35 -15 44 -27 45
+-34 3 -3 -18 -13 -67 -21 -108 -8 -41 -19 -97 -25 -125 -9 -47 -40 -144 -61
+-190 -49 -111 -60 -139 -60 -151 0 -8 -4 -14 -10 -14 -5 0 -10 -5 -10 -11 0
+-14 -72 -124 -134 -204 -79 -103 -216 -211 -346 -275 -36 -17 -73 -35 -82 -41
+-10 -5 -24 -9 -31 -9 -7 0 -29 -11 -47 -25 -20 -15 -36 -21 -38 -15 -4 11 56
+118 111 199 29 43 161 298 184 356 22 57 113 322 113 331 0 3 -28 -15 -62 -39
+-93 -66 -223 -138 -308 -171 -41 -15 -84 -32 -95 -37 -18 -7 -178 -49 -189
+-49 -7 0 -98 -158 -119 -205 -23 -53 -38 -164 -25 -188 5 -10 8 -20 6 -22 -14
+-14 -74 70 -99 137 -41 111 -64 391 -39 477 5 19 7 37 5 40 -3 2 -59 -51 -126
+-119 -117 -120 -180 -209 -249 -350 -12 -25 -26 -53 -31 -63 -5 -9 -12 -37
+-15 -61 l-6 -43 88 -5 c107 -6 186 -41 249 -109 22 -24 80 -88 129 -142 139
+-152 297 -276 471 -367 44 -23 99 -55 123 -71 24 -16 47 -29 53 -29 5 0 14
+-11 20 -24 9 -18 26 -28 78 -41 36 -9 104 -28 151 -42 162 -48 179 -52 287
+-56 153 -6 377 -46 513 -91 54 -17 75 -20 125 -13 108 15 388 22 510 14 66 -4
+206 -11 310 -15 189 -8 190 -8 260 -42 125 -60 200 -115 256 -187 29 -38 56
+-72 61 -78 10 -11 305 279 472 465 1000 1111 1631 2489 1815 3965 111 884 56
+1797 -159 2654 -293 1167 -851 2216 -1656 3111 -124 138 -431 444 -564 561
+-775 687 -1713 1214 -2692 1514 -605 185 -1213 288 -1858 315 -135 5 -276 9
+-315 8 -38 -1 -110 -3 -160 -5z"/>
+<path d="M2499 12743 c-148 -127 -480 -454 -623 -613 -1067 -1189 -1702 -2650
+-1846 -4242 -43 -480 -29 -1086 35 -1568 198 -1471 822 -2821 1811 -3920 137
+-152 430 -443 579 -574 106 -94 110 -96 119 -74 21 50 111 196 156 253 42 52
+61 67 138 104 50 23 114 50 144 59 68 20 327 28 418 11 36 -6 94 -15 130 -20
+36 -4 124 -18 195 -29 72 -12 158 -25 193 -30 54 -8 152 -34 204 -55 13 -5 21
+0 29 18 6 14 21 28 33 32 18 5 569 26 764 29 46 1 72 5 72 12 0 7 15 23 33 36
+54 41 222 138 239 138 8 0 22 7 29 16 7 9 40 37 74 62 58 45 485 466 555 548
+19 23 67 78 105 124 39 45 80 86 93 91 31 12 84 11 116 -1 23 -8 26 -7 26 14
+0 19 -27 65 -50 86 -9 8 -72 90 -98 128 -14 21 -42 70 -63 111 l-37 73 -7 -33
+c-9 -46 -46 -158 -62 -189 -7 -14 -13 -29 -13 -35 0 -18 -44 -98 -93 -172 -81
+-121 -197 -214 -197 -157 0 13 -67 149 -85 172 -92 115 -132 161 -139 161 -5
+1 -37 27 -71 58 -35 32 -69 63 -76 68 -24 18 -86 55 -93 55 -7 0 46 -114 57
+-118 4 -2 7 -8 7 -14 0 -5 17 -40 39 -76 105 -182 127 -232 101 -232 -5 0 -10
+4 -10 8 0 5 -10 14 -22 19 -62 29 -319 251 -360 310 -16 24 -37 51 -47 61 -21
+21 -66 79 -113 147 -28 42 -103 193 -145 295 -8 21 -11 14 -16 -48 -8 -79 -45
+-261 -57 -277 -4 -5 -11 -26 -15 -45 -4 -19 -11 -39 -15 -45 -4 -5 -13 -28
+-20 -50 -35 -108 -220 -355 -266 -355 -13 0 -26 -4 -29 -10 -3 -5 -34 -26 -68
+-46 -70 -41 -77 -48 -77 -87 0 -16 -4 -26 -10 -22 -15 9 -12 73 3 82 40 24
+110 216 126 343 6 41 15 106 21 143 10 58 9 71 -3 85 -18 20 -127 181 -127
+187 0 2 -13 23 -29 47 -16 24 -42 66 -57 94 -16 28 -60 104 -99 168 -111 186
+-308 565 -330 636 -4 14 -10 27 -14 30 -3 3 -14 21 -23 40 l-17 35 0 -60 c0
+-107 60 -452 88 -505 5 -9 12 -31 16 -50 4 -19 11 -39 15 -45 4 -5 11 -26 15
+-45 19 -90 158 -362 271 -530 48 -71 85 -132 83 -135 -6 -5 -145 86 -241 158
+-128 97 -297 286 -298 335 0 6 -3 12 -8 12 -7 0 -38 56 -65 120 -9 19 -25 57
+-36 83 -11 26 -23 63 -27 83 -3 19 -10 36 -14 39 -5 3 -11 24 -15 48 -4 23
+-11 47 -16 53 -4 5 -13 44 -19 85 -6 40 -17 83 -23 94 -16 28 -22 822 -7 965
+6 58 16 164 21 235 6 72 17 153 24 180 20 73 28 132 17 120 -5 -5 -23 -35 -39
+-65 -50 -92 -58 -105 -70 -113 -7 -4 -13 -12 -13 -18 0 -13 -41 -72 -58 -82
+-6 -4 -12 -14 -12 -20 0 -17 -188 -217 -204 -217 -7 0 -24 -10 -37 -21 -45
+-41 -214 -145 -259 -161 -25 -9 -76 -19 -114 -22 -38 -4 -82 -14 -98 -22 -16
+-8 -33 -12 -38 -9 -15 9 16 36 74 66 70 35 96 51 118 72 10 9 23 17 28 17 6 0
+10 5 10 11 0 7 11 22 24 34 42 39 114 152 167 263 65 137 63 131 95 237 15 50
+30 95 35 100 4 6 10 28 14 50 4 22 13 46 19 54 14 18 13 241 -2 250 -5 3 -13
+38 -17 76 -3 39 -10 79 -15 90 -5 11 -14 67 -20 125 -6 58 -15 140 -20 183
+-45 362 -43 1174 4 1477 8 52 18 124 22 160 3 35 10 71 15 80 4 8 12 44 18 80
+12 83 66 302 80 330 5 9 12 31 16 50 4 19 13 46 21 60 7 14 31 70 54 125 22
+55 45 108 50 117 19 34 9 36 -47 8 -117 -57 -191 -86 -263 -101 -25 -6 -54
+-14 -65 -20 -58 -27 -335 -42 -460 -24 -80 11 -194 72 -302 163 -80 66 -71 73
+47 42 56 -15 316 -8 333 9 6 6 24 11 40 11 16 0 43 6 60 14 18 8 61 27 97 42
+36 16 83 39 105 51 22 13 51 28 65 35 14 7 27 15 30 18 3 3 16 11 30 18 48 24
+70 39 126 83 31 24 90 71 132 104 43 33 82 64 89 70 6 5 28 21 47 35 42 29 42
+45 3 113 -42 75 -57 115 -76 212 -34 173 -2 389 109 725 27 82 60 213 60 237
+0 6 -20 35 -44 63 -48 56 -58 90 -44 156 11 48 32 11 -207 359 -126 183 -363
+575 -408 675 -13 30 -36 80 -50 110 -60 129 -66 151 -52 198 7 23 12 42 10 42
+-1 0 -54 -44 -116 -97z"/>
+<path d="M6445 1929 c-5 -7 -25 -8 -56 -4 -29 4 -49 3 -49 -3 0 -5 -35 -12
+-77 -16 -80 -6 -212 -31 -248 -46 -11 -4 -36 -14 -55 -21 -19 -7 -53 -24 -75
+-39 -46 -30 -58 -37 -142 -86 -35 -19 -65 -40 -69 -45 -3 -5 13 -48 36 -97 62
+-131 68 -143 90 -200 11 -29 20 -62 20 -73 0 -11 16 -47 35 -80 19 -33 38 -72
+41 -87 4 -15 10 -31 14 -37 14 -18 32 -174 28 -240 -3 -54 -1 -65 12 -65 15 0
+145 40 190 58 14 6 59 20 100 32 41 12 84 25 95 30 51 20 248 80 266 80 11 0
+52 14 91 30 107 46 113 40 38 -35 -27 -28 -50 -54 -50 -58 0 -4 -46 -54 -102
+-110 -104 -103 -238 -259 -238 -276 0 -5 -3 -11 -8 -13 -7 -3 -27 -30 -133
+-177 -18 -24 -49 -76 -69 -115 -20 -39 -44 -84 -54 -99 -10 -15 -17 -29 -15
+-32 13 -13 474 -67 765 -89 l70 -6 11 68 c15 90 43 205 54 216 5 6 9 17 9 26
+0 23 103 221 159 305 25 38 61 99 79 135 18 35 40 74 50 85 29 35 132 252 132
+279 0 9 4 16 9 16 5 0 14 21 20 46 10 40 74 126 84 113 10 -12 27 -70 32 -109
+7 -46 38 -152 60 -205 7 -16 16 -41 20 -55 3 -14 12 -38 20 -55 7 -16 18 -41
+23 -55 24 -55 75 -158 105 -211 35 -62 137 -221 147 -229 3 -3 20 -34 37 -70
+18 -36 48 -88 67 -117 19 -29 37 -65 41 -81 3 -17 14 -37 24 -46 17 -15 29
+-15 167 4 182 25 536 89 547 100 7 7 -67 111 -85 118 -4 2 -8 8 -8 14 0 11
+-88 121 -101 126 -5 2 -9 8 -9 13 0 5 -19 33 -42 62 -24 29 -54 68 -68 86 -14
+18 -34 45 -46 59 -32 41 -124 171 -124 176 0 3 -19 33 -43 68 -24 35 -53 82
+-65 106 l-22 42 28 0 c15 -1 54 -7 87 -15 33 -8 83 -19 110 -25 28 -6 57 -15
+66 -20 9 -5 33 -12 53 -15 20 -4 53 -16 73 -26 21 -11 48 -19 60 -19 13 0 23
+-4 23 -9 0 -5 13 -11 29 -14 16 -4 56 -19 89 -35 l60 -28 6 60 c3 32 6 85 6
+117 0 33 4 59 9 59 4 0 11 25 14 56 3 31 11 62 16 67 6 6 11 19 11 29 0 10 4
+18 8 18 4 0 15 28 25 63 10 34 49 124 87 199 72 141 83 184 53 195 -10 4 -37
+19 -60 35 -23 15 -45 28 -49 28 -8 0 -22 6 -169 75 -44 21 -100 40 -125 43
+-25 2 -50 8 -55 13 -6 4 -51 13 -100 19 -50 7 -100 17 -113 23 -26 12 -340 -5
+-407 -23 -100 -26 -153 -44 -194 -62 -38 -18 -55 -20 -146 -14 -56 3 -127 13
+-157 21 -30 7 -74 12 -99 10 -99 -8 -216 -28 -246 -42 -29 -13 -37 -13 -75 0
+-64 22 -148 45 -193 53 -22 3 -51 13 -64 21 -14 9 -59 18 -108 21 -46 3 -86 9
+-89 13 -8 13 -192 11 -199 -2z"/>
+</g>
+</svg>

frontend/public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+    "name": "Packmate",
+    "short_name": "Packmate",
+    "start_url": ".",
+    "description": "Packet monitoring tool for CTFs.",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#afd9f0",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

frontend/src/App.vue

@@ -0,0 +1,310 @@
+<template>
+	<div id="app">
+		<div class="bg-lines"></div>
+		<Navbar/>
+		<div class="container-fluid app-frame">
+			<div class="row">
+				<transition name="fade" mode="out-in">
+					<router-view name="sidebar" ref="sidebar"/>
+				</transition>
+				<main role="main" class="col-sm-9 ml-sm-auto px-4 app-main">
+					<transition name="fade" mode="out-in">
+						<router-view name="content"/>
+					</transition>
+				</main>
+			</div>
+		</div>
+		<Settings/>
+	</div>
+</template>
+
+<!--suppress JSUnresolvedVariable -->
+<script>
+	export const DB_OBJSTORE_COUNTERS_HISTORY = 'countersHistory';
+
+	import Navbar from './components/Navbar';
+	import Settings from './views/Settings';
+	import SockJS from 'sockjs-client';
+	import {openDB,} from 'idb';
+
+	export default {
+		data() {
+			return {
+				websocket: null,
+				db: null,
+			};
+		},
+		mounted() {
+			this.connectWs();
+			openDB('packmate', 1, {
+				upgrade(db, oldVersion, newVersion) {
+					console.info('[IDB] Creating new database! Old rev %d, new rev %d',
+						oldVersion, newVersion);
+					db.createObjectStore(DB_OBJSTORE_COUNTERS_HISTORY, {
+						autoIncrement: false,
+						keyPath: null,
+					});
+				},
+			})
+				.then(db => {
+					this.db = db;
+				})
+				.catch(e => {
+					console.error('[IDB] Failed to open DB!', e);
+				});
+		},
+		beforeDestroy() {
+			this.websocket?.close();
+		},
+		methods: {
+			connectWs() {
+				if (this.websocket !== null) return;
+				this.websocket = new SockJS(this.$http.defaults.baseURL + '/ws');
+				this.websocket.onopen = () => {
+					console.info('[WS] Connected');
+				};
+				this.websocket.onclose = (ev) => {
+					console.info('[WS] Disconnected', ev.code, ev.reason);
+					this.websocket = null;
+					if (ev.code === 1008) {
+						console.info('[WS] Security timeout, reconnecting...');
+						this.connectWs();
+					}
+					if (ev.code !== 1000) { // Normal closure
+						setTimeout(this.connectWs, 3000);
+						console.info('[WS] Reconnecting...');
+					}
+				};
+				this.websocket.onmessage = (ev) => {
+					const parsed = JSON.parse(ev.data);
+
+					switch (parsed.type) {
+						case 'NEW_STREAM': {
+							this.$refs.sidebar.addStreamFromWs(parsed.value);
+							break;
+						}
+						case 'SAVE_SERVICE': {
+							this.addServiceFromWs(parsed.value);
+							break;
+						}
+						case 'DELETE_SERVICE': {
+							this.deleteServiceFromWs(parsed.value);
+							break;
+						}
+						case 'SAVE_PATTERN': {
+							this.addPatternFromWs(parsed.value);
+							break;
+						}
+						case 'COUNTERS_UPDATE': {
+							const data = parsed.value;
+							this.$store.commit('setCurrentPacketsCount', data.totalPackets);
+							this.$store.commit('setCurrentStreamsCount', data.totalStreams);
+							this.$store.commit('setCurrentServicesPacketsCount', data.servicesPackets);
+							this.$store.commit('setCurrentServicesStreamsCount', data.servicesStreams);
+
+							console.debug('Adding new counters to DB', parsed.value);
+							const tx = this.db.transaction(DB_OBJSTORE_COUNTERS_HISTORY, 'readwrite');
+							tx.store.add({
+								newPacketsCount: data.totalPackets,
+								newStreamsCount: data.totalStreams,
+								servicesPackets: data.servicesPackets,
+								servicesStreams: data.servicesStreams,
+							}, Date.now()).then(() => {
+								console.debug('[IDB] Added entry');
+							}).catch(e => {
+								console.error('[IDB] Failed to add entry!', e);
+							});
+							break;
+						}
+						case 'ENABLE_PATTERN': {
+							this.togglePatternFromWs(parsed.value, true);
+							break;
+						}
+						case 'DISABLE_PATTERN': {
+							this.togglePatternFromWs(parsed.value, false);
+							break;
+						}
+						case 'PCAP_STARTED': {
+							this.$store.commit('startPcap');
+							this.$bvToast.toast(`Pcap file processing started`, {
+								title: 'Notification',
+								variant: 'info',
+								autoHideDelay: 5000,
+							});
+							break;
+						}
+						case 'PCAP_STOPPED': {
+							this.$bvToast.toast(`All streams processed`, {
+								title: 'Notification',
+								variant: 'success',
+								autoHideDelay: 5000,
+							});
+							break;
+						}
+						case 'FINISH_LOOKBACK': {
+							console.debug('Lookback completed');
+							this.$bvToast.toast(`Lookback completed`, {
+								title: 'Notification',
+								variant: 'success',
+								autoHideDelay: 5000,
+							});
+							this.$refs.sidebar.streams = [];
+							this.$refs.sidebar.$refs.infiniteLoader.stateChanger.reset();
+							break;
+						}
+						default: {
+							console.error('[WS] Event is not implemented!', parsed);
+							break;
+						}
+					}
+				};
+				this.websocket.onerror = (ev) => {
+					console.warn('[WS] Error', ev);
+				};
+			},
+			addPatternFromWs(pattern) {
+				const foundIndex = this.$store.state.patterns.findIndex(el => el.id === pattern.id);
+				if (foundIndex === -1) {
+					this.$store.commit('addPattern', pattern);
+					return;
+				}
+
+				let newPatterns = this.$store.state.patterns.slice();
+				newPatterns.splice(foundIndex, 1, pattern);
+				this.$store.commit('setPatterns', newPatterns);
+			},
+			togglePatternFromWs(id, enabled) {
+				this.$store.state.patterns.forEach(pattern => {
+					if (pattern.id === id) {
+						pattern.enabled = enabled;
+					}
+				});
+			},
+			addServiceFromWs(service) {
+				const foundIndex = this.$store.state.services.findIndex(el => el.port === service.port);
+				if (foundIndex === -1) {
+          this.$store.commit('addService', service);
+					return;
+				}
+
+				let newServices = this.$store.state.services.slice();
+        newServices.splice(foundIndex, 1, service);
+        this.$store.commit('setServices', newServices);
+			},
+			deleteServiceFromWs(port) {
+        this.$store.commit('setServices', this.$store.state.services.filter(o => o.port !== port));
+      },
+		},
+		components: {
+			Settings,
+			Navbar,
+		},
+	};
+</script>
+
+<style>
+	/* cyrillic-ext */
+	@font-face {
+		font-family: 'Open Sans';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
+		unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+	}
+
+	/* cyrillic */
+	@font-face {
+		font-family: 'Open Sans';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
+		unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+	}
+
+	/* greek-ext */
+	@font-face {
+		font-family: 'Open Sans';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
+		unicode-range: U+1F00-1FFF;
+	}
+
+	/* greek */
+	@font-face {
+		font-family: 'Open Sans';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
+		unicode-range: U+0370-03FF;
+	}
+
+	/* vietnamese */
+	@font-face {
+		font-family: 'Open Sans';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
+		unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+	}
+
+	/* latin-ext */
+	@font-face {
+		font-family: 'Open Sans';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
+		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+	}
+
+	/* latin */
+	@font-face {
+		font-family: 'Open Sans';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
+		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	}
+
+	html * {
+		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		font-size: .875rem;
+	}
+
+	body {
+		overflow-y: scroll;
+	}
+
+	/*noinspection CssUnusedSymbol*/
+	.fade-enter-active, .fade-leave-active {
+		transition: opacity .3s;
+	}
+
+	/*noinspection CssUnusedSymbol*/
+	.fade-enter, .fade-leave-to {
+		opacity: 0;
+	}
+
+	/* Patterns dropdown fix */
+	/*noinspection CssUnusedSymbol*/
+	.dropdown-menu.show {
+		position: fixed !important;
+		/*transform: translate3d(15px, 38px, 0) !important;*/
+		transform: none !important;
+		left: 15px !important;
+		top: 38px !important;
+	}
+
+	[role="main"] {
+		padding-top: 55px; /* Space for fixed navbar */
+	}
+</style>

frontend/src/assets/neon.css

@@ -0,0 +1,309 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;600&display=swap');
+
+:root {
+    --bg: #05030a;
+    --bg-2: #0a0a18;
+    --panel: rgba(9, 7, 18, 0.9);
+    --panel-strong: rgba(14, 10, 24, 0.95);
+    --accent: #c66bff;
+    --accent-2: #7a1dff;
+    --text: #e6e0ff;
+    --muted: #9b90c8;
+    --mono-font: 'JetBrains Mono', 'Ubuntu Mono', monospace;
+    --pixel-font: 'Press Start 2P', 'JetBrains Mono', monospace;
+}
+
+[data-theme="light"] {
+    --bg: #f0eaff;
+    --bg-2: #e6ddff;
+    --panel: rgba(245, 240, 255, 0.9);
+    --panel-strong: rgba(235, 227, 255, 0.95);
+    --text: #1a1233;
+    --muted: #5d4d80;
+}
+
+* {
+    box-sizing: border-box;
+    scrollbar-width: none;
+}
+
+*::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+body {
+    background:
+            radial-gradient(circle at 18% 24%, rgba(198, 107, 255, 0.18), transparent 25%),
+            radial-gradient(circle at 82% 12%, rgba(122, 29, 255, 0.12), transparent 25%),
+            linear-gradient(135deg, #020107 0%, #0a0820 50%, #03010b 100%);
+    color: var(--text);
+    font-family: var(--pixel-font);
+    letter-spacing: 0.6px;
+    min-height: 100vh;
+}
+
+body[data-theme="light"] {
+    background: linear-gradient(135deg, #f0eaff 0%, #e6ddff 40%, #f6f1ff 100%);
+}
+
+#app {
+    position: relative;
+}
+
+.bg-lines {
+    position: fixed;
+    inset: 0;
+    background-image: linear-gradient(rgba(122, 29, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(198, 107, 255, 0.12) 1px, transparent 1px);
+    background-size: 120px 120px;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.container-fluid.app-frame {
+    padding-top: 84px;
+    position: relative;
+    z-index: 1;
+}
+
+.neon-navbar {
+    background: var(--panel-strong) !important;
+    border-bottom: 1px solid rgba(122, 29, 255, 0.45);
+    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55), 0 0 28px rgba(122, 29, 255, 0.35);
+    padding: 12px 18px;
+}
+
+.navbar-brand {
+    font-family: var(--pixel-font);
+    letter-spacing: 1px;
+    color: var(--accent) !important;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.navbar-brand .brand-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent), var(--accent-2));
+    box-shadow: 0 0 10px rgba(122, 29, 255, 0.65);
+}
+
+.navbar-sub {
+    font-size: 10px;
+    color: var(--muted);
+    margin-left: 6px;
+}
+
+.navbar-metrics {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-left: 12px;
+    flex-wrap: wrap;
+}
+
+.metric-chip {
+    background: rgba(122, 29, 255, 0.12);
+    border: 1px solid rgba(122, 29, 255, 0.28);
+    color: var(--text);
+    padding: 8px 10px;
+    border-radius: 10px;
+    display: grid;
+    grid-template-columns: auto auto;
+    column-gap: 8px;
+    align-items: center;
+    font-size: 11px;
+    box-shadow: 0 0 14px rgba(122, 29, 255, 0.24);
+}
+
+.metric-chip .label {
+    color: var(--muted);
+}
+
+.metric-chip .value {
+    color: var(--accent);
+}
+
+.navbar-nav .nav-link,
+.neon-tab {
+    color: var(--text) !important;
+    border-radius: 12px;
+    padding: 8px 10px;
+    margin: 4px 4px;
+    transition: all .2s ease;
+    background: transparent;
+}
+
+.navbar-nav .nav-link:hover,
+.navbar-nav .nav-item.active > .nav-link,
+.neon-tab:hover {
+    background: rgba(122, 29, 255, 0.24);
+    box-shadow: 0 0 16px rgba(122, 29, 255, 0.28);
+    color: #fff !important;
+}
+
+.navbar-cogs > i {
+    color: var(--muted);
+}
+
+.navbar-cogs > i:hover {
+    color: var(--accent);
+}
+
+.app-main {
+    background: var(--panel);
+    border: 1px solid rgba(122, 29, 255, 0.35);
+    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45), 0 0 38px rgba(122, 29, 255, 0.18);
+    border-radius: 18px;
+    padding: 28px;
+    margin-bottom: 24px;
+    min-height: calc(100vh - 120px);
+}
+
+.sidebar {
+    background: var(--panel);
+    border-right: 1px solid rgba(122, 29, 255, 0.25);
+    box-shadow: inset -10px 0 24px rgba(0, 0, 0, 0.35);
+    min-height: calc(100vh - 84px);
+    padding-top: 14px;
+}
+
+.sidebar .btn {
+    font-family: var(--pixel-font);
+    letter-spacing: 0.6px;
+    border-radius: 10px;
+    border-color: rgba(122, 29, 255, 0.35);
+    color: var(--text);
+}
+
+.sidebar .btn-outline-primary,
+.sidebar .btn-outline-info,
+.sidebar .btn-outline-success,
+.sidebar .btn-outline-warning {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.sidebar .btn:hover {
+    box-shadow: 0 0 12px rgba(122, 29, 255, 0.3);
+}
+
+.sidebar-sticky {
+    padding: 8px 6px 14px;
+    max-height: calc(100vh - 180px);
+    overflow-y: auto;
+}
+
+.stream-item {
+    margin: 8px 0;
+    border-radius: 14px;
+    border: 1px solid rgba(122, 29, 255, 0.25);
+    background: linear-gradient(125deg, rgba(122, 29, 255, 0.12), rgba(7, 4, 15, 0.9));
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
+}
+
+.stream-item .nav-link {
+    color: var(--text) !important;
+    padding: 12px;
+}
+
+.stream-item .nav-link:hover {
+    background: rgba(122, 29, 255, 0.12);
+}
+
+.highlight {
+    border-color: rgba(122, 29, 255, 0.55);
+    box-shadow: 0 0 12px rgba(122, 29, 255, 0.35);
+}
+
+.legend-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 14px;
+    margin-bottom: 18px;
+    font-size: 12px;
+}
+
+.legend-pill {
+    padding: 8px 10px;
+    border-radius: 10px;
+    border: 1px solid rgba(122, 29, 255, 0.35);
+    background: rgba(122, 29, 255, 0.12);
+    box-shadow: 0 0 12px rgba(122, 29, 255, 0.2);
+    color: var(--text);
+}
+
+.packet-outgoing, .packet-incoming {
+    border-radius: 16px;
+    padding: 14px;
+    margin-bottom: 14px;
+    border: 1px solid rgba(122, 29, 255, 0.28);
+}
+
+.packet-incoming {
+    background: radial-gradient(circle at 18% 20%, rgba(122, 29, 255, 0.16), rgba(9, 7, 18, 0.92));
+}
+
+.packet-outgoing {
+    background: radial-gradient(circle at 18% 20%, rgba(255, 106, 213, 0.12), rgba(10, 17, 40, 0.9));
+}
+
+.packet-incoming div,
+.packet-outgoing div {
+    font-size: 11px;
+    color: var(--muted);
+    font-family: var(--pixel-font);
+}
+
+.packet-incoming button,
+.packet-outgoing button {
+    color: var(--accent);
+}
+
+.packet-incoming p,
+.packet-outgoing p {
+    font-family: var(--mono-font);
+    font-size: 13px;
+    background: rgba(0, 0, 0, 0.22);
+    padding: 12px;
+    border-radius: 10px;
+    color: var(--text);
+    box-shadow: inset 0 0 12px rgba(0,0,0,0.35);
+}
+
+.btn, .form-control, .custom-select, .page-link {
+    font-family: var(--pixel-font);
+    letter-spacing: 0.5px;
+}
+
+.modal-content {
+    background: var(--panel);
+    color: var(--text);
+    border: 1px solid rgba(122, 29, 255, 0.35);
+    box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
+}
+
+.dropdown-menu {
+    background: var(--panel);
+    color: var(--text);
+}
+
+.dropdown-item {
+    color: var(--text);
+}
+
+.dropdown-item:hover {
+    background: rgba(122, 29, 255, 0.18);
+}
+
+.toast {
+    background: var(--panel-strong);
+    color: var(--text);
+    border: 1px solid rgba(255, 106, 213, 0.22);
+}
+
+.theme-toggle {
+    margin-left: auto;
+}

frontend/src/components/Navbar.vue

@@ -0,0 +1,183 @@
+<template>
+	<nav class="navbar navbar-dark navbar-expand fixed-top bg-dark flex-md-nowrap p-0 shadow neon-navbar">
+		<div class="d-flex align-items-center pl-3">
+			<span class="navbar-brand mb-0 ml-2">
+				<span class="brand-dot"></span>
+				0xb00b5 PM
+			</span>
+		</div>
+
+		<div class="navbar-metrics">
+			<span class="metric-chip">
+				<span class="label">SPM</span>
+				<span class="value">{{ this.$store.state.currentStreamsCount }}</span>
+			</span>
+			<span class="metric-chip">
+				<span class="label">PPS</span>
+				<span class="value">{{ packetsPerStream }}</span>
+			</span>
+		</div>
+
+		<PatternsDropdown ref="patternsDropdown"/>
+
+    <span v-if="this.$route.query.pattern" class="navbar-text navbar-nowrap">
+      {{ selectedPatternText }}
+    </span>
+
+		<div class="navbar-collapse collapse">
+			<ul class="navbar-nav px-1 mr-auto">
+				<li class="nav-item text-nowrap">
+					<router-link class="nav-link" :to="{name:'stream', params: {}, query: $route.query}" exact>All</router-link>
+				</li>
+				<template v-for="service in this.$store.state.services">
+					<router-link :key="service.port" tag="li" class="nav-item text-nowrap edit-button"
+								 :to="{name:'stream', params: {servicePort: service.port}, query: $route.query}">
+						<a class="nav-link">
+							{{service.name}} #{{service.port}}
+							({{ getSpmForService(service.port) }}
+							<u title="Streams per minute">SPM</u>)
+						</a>
+
+						<a class="nav-link pl-0" style="cursor: pointer" @click.stop.prevent="editService(service)">
+							<i class="fas fa-pencil-alt"/>
+						</a>
+					</router-link>
+				</template>
+				<li class="nav-item text-nowrap" style="padding-left: 1em;">
+					<div class="my-2 mr-3 navbar-cogs" style="cursor: pointer;"
+						 @click.stop.prevent="showAddService">
+						<i class="fas fa-plus-circle"/>
+					</div>
+				</li>
+			</ul>
+
+			<div class="my-2 my-lg-0 mr-3 navbar-cogs" style="cursor: pointer;"
+				 @click.stop.prevent="showSettings">
+				<i class="fas fa-cogs"/>
+			</div>
+		</div>
+		<ServiceModal :creating="serviceModalIsCreating" :initial-service="serviceModalEditingService"
+					  @service-update-needed="updateServices"/>
+	</nav>
+</template>
+
+<script>
+	import PatternsDropdown from './PatternsDropdown';
+	import ServiceModal from '../views/ServiceModal';
+
+	export default {
+		name: 'Navbar',
+		computed: {
+			packetsPerStream: function() {
+				let streams = this.$store.state.currentStreamsCount;
+				let packets = this.$store.state.currentPacketsCount;
+
+				if (streams === 0) {
+					return 0;
+				} else {
+					let pps = packets / streams;
+					return Math.round((pps + Number.EPSILON) * 10) / 10;
+				}
+			},
+      selectedPatternText: function () {
+			  let selected = this.$route.query.pattern;
+			  if (typeof selected === 'string') {
+			    selected = parseInt(selected);
+        }
+
+        let pattern = this.$store.state.patterns.find(o => o.id === selected);
+        if (pattern) {
+          return `[Selected: ${pattern.name}]`;
+        } else {
+          return '[Invalid pattern]';
+        }
+      },
+		},
+		data() {
+			return {
+				serviceModalIsCreating: true,
+				serviceModalEditingService: {},
+			};
+		},
+		mounted() {
+			this.updateServices();
+		},
+		methods: {
+			getSpmForService(port) {
+				return this.$store.state.currentServicesStreamsCount[port] ?? 0;
+			},
+			editService(service) {
+				this.serviceModalIsCreating = false;
+				this.serviceModalEditingService = {};
+				this.$nextTick(() => {
+					this.serviceModalEditingService = service;
+					this.$bvModal.show('serviceModal');
+				});
+			},
+			showSettings() {
+				this.$bvModal.show('settingsModal');
+				console.debug('Showing settings...');
+			},
+			showAddService() {
+				this.serviceModalIsCreating = true;
+				this.serviceModalEditingService = {};
+				this.$bvModal.show('serviceModal');
+				console.debug('Showing addService...');
+			},
+			updateServices() {
+				this.$http.get('service/')
+					.then(r => this.$store.commit('setServices', r.data))
+					.catch(e => {
+						this.$bvToast.toast(`Failed to load services: ${e}`, {
+							title: 'Error',
+							variant: 'danger',
+						});
+						console.error('Failed to load services:', e);
+					});
+			},
+		},
+		components: {
+			ServiceModal,
+			PatternsDropdown,
+		},
+	};
+</script>
+
+<style scoped>
+	.nav-link {
+		transition: all .3s;
+		color: var(--text) !important;
+	}
+
+	.edit-button {
+		display: inherit;
+	}
+
+	.navbar-cogs > i {
+		transition: all .3s;
+		color: var(--muted);
+	}
+
+	.navbar-cogs > i:hover {
+		color: var(--accent);
+	}
+
+	.navbar-nowrap {
+		white-space: nowrap;
+	}
+
+	nav {
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	u {
+		text-underline-position: under;
+		text-decoration-style: dotted;
+	}
+
+	nav::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+	}
+</style>

frontend/src/components/Packet.vue

@@ -0,0 +1,229 @@
+<template>
+	<div :class="{'packet-incoming': packet.incoming, 'packet-outgoing': !packet.incoming}">
+		<div>#{{ packet.id }} at {{ dateToText(packet.timestamp) }}
+			<template v-if="offset !== null"> (+{{ offset }} ms)</template>
+			{{ printPacketFlags(packet) }}
+			<button @click.prevent="copyRaw" class="btn btn-link copy-btn">Copy HEX</button>
+			<button @click.prevent="copyText" class="btn btn-link copy-btn">Copy text</button>
+			<button @click.prevent="copyPythonBytes" class="btn btn-link copy-btn">Copy as Python bytes</button>
+		</div>
+		<p v-if="!this.$store.state.hexdumpMode"
+			 class="pt-2 pb-2 mb-3"
+			 v-html="stringdata"/>
+		<p v-else
+			 class="pt-2 pb-2 mb-3"
+			 v-html="hexdata"/>
+	</div>
+</template>
+
+<!--suppress JSUnresolvedVariable, JSDeprecatedSymbols -->
+<script>
+	export default {
+		name: 'Packet',
+		props: {
+			packet: {
+				id: Number(),
+				matches: Array(),
+				timestamp: Number(),
+				incoming: Boolean(),
+				ungzipped: Boolean(),
+				webSocketParsed: Boolean(),
+				tlsDecrypted: Boolean(),
+				content: String(),
+			},
+			offset: Number(),
+		},
+		computed: {
+			hexdata() {
+				const dataString = this.atou(this.packet.content);
+				const dump = this.hexdump(dataString, this.$store.state.hexdumpBlockSize, this.$store.state.hexdumpLineNumberBase);
+				return this.escapeHtml(dump)
+					.split('\n')
+					.join('<br>'); // Replace all \n to <br>
+			},
+			stringdata() {
+				const dataString = this.atou(this.packet.content);
+				const dump = this.highlightPatterns(dataString);
+				return this.escapeHtml(dump)
+					.split('\n')
+					.join('<br>');
+			},
+		},
+		methods: {
+			atou(b64) {
+				const text = atob(b64);
+				const length = text.length;
+				const bytes = new Uint8Array(length);
+				for (let i = 0; i < length; i++) {
+					bytes[i] = text.charCodeAt(i);
+				}
+				const decoder = new TextDecoder();
+				return decoder.decode(bytes);
+			},
+			printPacketFlags(packet) {
+				let flags = [];
+
+				if (packet.ungzipped) {
+					flags.push('GZIP');
+				}
+
+				if (packet.webSocketParsed) {
+					flags.push('WS');
+				}
+
+				if (packet.tlsDecrypted) {
+					flags.push('TLS');
+				}
+
+				return flags.join(' ');
+			},
+			hexdump(buffer, blockSize, lineNumberBase) {
+				blockSize = parseInt(blockSize, 10) || 16;
+				lineNumberBase = parseInt(lineNumberBase, 10) || 10;
+				let lines = [];
+				const hex = '0123456789ABCDEF';
+				for (let b = 0; b < buffer.length; b += blockSize) {
+					const block = buffer.slice(b, Math.min(b + blockSize, buffer.length));
+					const addr = ('0000000000' + b.toString(lineNumberBase)).slice(-10);
+					let codes = block.split('').map(ch => {
+						const code = ch.charCodeAt(0);
+						return ' ' + hex[(0xF0 & code) >> 4] + hex[0x0F & code];
+					}).join('');
+					codes += ' ..'.repeat(blockSize - block.length);
+					// eslint-disable-next-line no-control-regex
+					let chars = block.replace(/[\x00-\x1F]/g, '.');
+					chars += ' '.repeat(blockSize - block.length);
+					lines.push(addr + ':' + codes + ' |' + chars + '|');
+				}
+				return lines.join('\n');
+			},
+			dateToText(unixTimestamp) {
+				return new Date(unixTimestamp).toLocaleDateString('ru-RU', {
+					month: '2-digit',
+					day: '2-digit',
+					hour: '2-digit',
+					minute: '2-digit',
+					second: '2-digit',
+				});
+			},
+			escapeHtml(in_) {
+				return in_.replace(/(<span style="background-color: #(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})">|<\/span>)|[&<>"'/]/g, ($0, $1) => {
+					const entityMap = {
+						'&': '&amp;',
+						'<': '&lt;',
+						'>': '&gt;',
+						'"': '&quot;',
+						'\'': '&#39;',
+						'/': '&#x2F;',
+					};
+
+					return $1 ? $1 : entityMap[$0];
+				});
+			},
+			highlightPatterns(raw) {
+				const patterns = this.$store.state.patterns.reduce((obj, item) => {
+					obj[item.id] = item;
+					return obj;
+				}, {}); // Array to object
+				let offset = 0;
+				this.packet.matches
+					.filter(match => !patterns[match.patternId].deleted)
+					.sort((a, b) => a.startPosition - b.startPosition)
+					.forEach(match => {
+						const pattern = patterns[match.patternId];
+						if (!pattern) {
+							console.info(`Pattern #${match.patternId} does not exist`);
+							return;
+						}
+						const firstTag = `<span style="background-color: ${pattern.color}">`;
+						const secondTag = '</span>';
+
+						const positionStart = match.startPosition + offset;
+						raw = raw.substring(0, positionStart) + firstTag + raw.substring(positionStart);
+						offset += firstTag.length;
+
+						const positionEnd = match.endPosition + offset + 1;
+						raw = raw.substring(0, positionEnd) + secondTag + raw.substring(positionEnd);
+						offset += secondTag.length;
+					});
+				return raw;
+			},
+
+			copyPythonBytes() {
+				const data = 'b\'' + atob(this.packet.content)
+					.split('')
+					.map((aChar) => {
+						return '\\x' + ('0' + aChar.charCodeAt(0).toString(16)).slice(-2);
+					})
+					.join('') + '\'';
+				this.copyContent(data);
+			},
+			copyRaw() {
+				this.copyContent(Buffer.from(this.packet.content, 'base64').toString('hex'));
+			},
+			copyText() {
+				this.copyContent(atob(this.packet.content));
+			},
+			copyContent(data) {
+				const tempEl = document.createElement('textarea');
+				tempEl.value = data; // Chrome
+				tempEl.textContent = data; // Firefox
+				document.body.appendChild(tempEl);
+				tempEl.select();
+				const result = document.execCommand('copy');
+				document.body.removeChild(tempEl);
+				console.debug('Copy result is', result);
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	.copy-btn {
+		margin-left: 10px;
+		font-family: var(--pixel-font);
+		font-size: 10px;
+		letter-spacing: 0.4px;
+		padding-left: 6px;
+		padding-right: 6px;
+	}
+</style>
+
+<style scoped>
+	.packet-outgoing {
+		background: linear-gradient(135deg, rgba(255, 106, 213, 0.12), rgba(14, 18, 40, 0.85));
+		border: 1px solid rgba(255, 106, 213, 0.35);
+		box-shadow: 0 0 14px rgba(255, 106, 213, 0.2);
+	}
+
+	.packet-incoming {
+		background: linear-gradient(135deg, rgba(94, 242, 255, 0.16), rgba(14, 18, 40, 0.85));
+		border: 1px solid rgba(94, 242, 255, 0.35);
+		box-shadow: 0 0 14px rgba(94, 242, 255, 0.18);
+	}
+
+	div {
+		font-size: 11px;
+		color: var(--muted);
+		font-family: var(--pixel-font);
+	}
+
+	p {
+		font-family: var(--mono-font);
+		font-size: 13px;
+		margin-bottom: 10px;
+		padding: 10px 12px;
+		word-break: break-word;
+		background: rgba(0, 0, 0, 0.25);
+		border-radius: 10px;
+		color: var(--text);
+	}
+
+	button {
+		padding: 0;
+		top: -0.1em;
+		position: relative;
+		margin-left: 5px;
+		color: var(--accent);
+	}
+</style>

frontend/src/components/PatternsDropdown.vue

@@ -0,0 +1,229 @@
+<template>
+	<b-dropdown no-flip text="Patterns" variant="dark" class="patterns-dropdown">
+		<li role="presentation" style="padding-left: 0.5em; padding-right: 0.5em;">
+			<button role="menuitem" type="button" class="btn btn-sm btn-primary btn-block"
+					@click.stop.prevent="showAddPattern">
+				<i class="fas fa-plus"/>
+			</button>
+		</li>
+		<b-dropdown-divider/>
+		<b-dropdown-item-button @click.stop.prevent="resetPatternSelection">
+			<strong>All streams</strong>
+		</b-dropdown-item-button>
+		<b-dropdown-item-button v-for="pattern in existingPatterns"
+								:key="pattern.id" @click.stop.prevent="openPattern(pattern)"
+								:class="{ 'ignore-pattern' : pattern.actionType === 'IGNORE' }">
+
+			<strong v-if="pattern.enabled" :style="getPatternColor">{{ pattern.name }}</strong>
+			<s v-else :style="`color: ${pattern.color};`">{{ pattern.name }}</s>:
+
+			<code>{{ getSearchTypeValue(pattern.searchType, pattern.value) }}</code>;
+
+      <template v-if="pattern.actionType === 'FIND'">search </template>
+      <template v-else>ignore </template>
+
+			<template v-if="pattern.directionType === 'BOTH'">anywhere </template>
+			<template v-else-if="pattern.directionType === 'INPUT'">in request </template>
+			<template v-else>in response </template>
+
+			<template v-if="pattern.serviceId === null">of any service</template>
+			<template v-else>of service {{ getServiceName(pattern.serviceId) }} #{{ pattern.serviceId }}</template>
+
+			<div class="float-right" style="margin-left: 2em;">
+				<button type="button" class="btn btn-outline-info btn-sm mr-1"
+								@click.stop.prevent="showEditPattern(pattern)"
+								title="Edit pattern">
+					<i class="fas fa-edit"></i>
+				</button>
+
+				<button v-if="pattern.actionType === 'FIND'" type="button" class="btn btn-outline-warning btn-sm mr-1"
+								@click.stop.prevent="showLookBack(pattern)"
+								title="Apply pattern to older streams">
+					<i class="fas fa-backward"></i>
+				</button>
+
+				<button v-if="pattern.enabled" type="button" class="btn btn-outline-danger btn-sm mr-1"
+						@click.stop.prevent="togglePattern(pattern)"
+						title="Stop matching streams with this pattern">
+					<i class="fas fa-pause"></i>
+				</button>
+				<button v-else type="button" class="btn btn-outline-success btn-sm mr-1"
+						@click.stop.prevent="togglePattern(pattern)"
+						title="Start matching streams with this pattern again">
+					<i class="fas fa-play"></i>
+				</button>
+
+				<button type="button" class="btn btn-outline-danger btn-sm"
+								@click.stop.prevent="deletePattern(pattern)"
+								title="Permanently delete this pattern">
+					<i class="fas fa-trash"></i>
+				</button>
+			</div>
+		</b-dropdown-item-button>
+
+		<PatternModal :creating="patternModalIsCreating" :initial-pattern="patternModalEditingPattern" />
+		<LookBack :pattern-id="patternIdForLookback" />
+	</b-dropdown>
+</template>
+<!--suppress JSUnresolvedReference -->
+<script>
+	import PatternModal from '@/views/PatternModal.vue';
+	import LookBack from '@/views/LookBack.vue';
+
+	export default {
+		name: 'PatternsDropdown',
+		components: {LookBack, PatternModal, },
+		data() {
+			return {
+				patternModalIsCreating: true,
+				patternModalEditingPattern: {},
+				patternIdForLookback: 0,
+			};
+		},
+		mounted() {
+			this.updatePatterns();
+		},
+		computed: {
+			existingPatterns: function () {
+				return this.$store.state.patterns.filter(p => !p.deleted)
+			},
+		},
+		methods: {
+			getSearchTypeValue(searchType, value) {
+				if (searchType === 'REGEX') return `/${value}/`;
+				else if (searchType === 'SUBSTRING') return `'${value}'`;
+				else return `0x${value}`;
+			},
+    	getPatternColor(pattern) {
+				if (pattern.actionType === 'FIND') {
+					return `color: ${pattern.color};`;
+				} else {
+					return `color: inherit;`;
+				}
+    	},
+			getServiceName(port) {
+				return this.$store.state.services.find(o => o.port === port)?.name ?? '<Deleted service>'
+			},
+			showAddPattern() {
+				this.patternModalIsCreating = true;
+				this.patternModalEditingPattern = {};
+				this.$bvModal.show('patternModal');
+				console.debug('Showing patternModal (create)');
+			},
+			showEditPattern(pattern) {
+				this.patternModalIsCreating = false;
+				this.patternModalEditingPattern = {};
+				this.$nextTick(() => {
+					this.patternModalEditingPattern = pattern;
+					this.$bvModal.show('patternModal');
+					console.debug('Showing patternModal (edit)');
+				});
+			},
+			showLookBack(pattern) {
+				this.patternIdForLookback = pattern.id;
+				this.$bvModal.show('lookBackModal');
+			},
+			updatePatterns() {
+				this.$http.get('pattern/')
+					.then(r => this.$store.commit('setPatterns', r.data))
+					.catch(e => {
+						this.$bvToast.toast(`Failed to load patterns: ${e}`, {
+							title: 'Error',
+							variant: 'danger',
+						});
+						console.error('Failed to load patterns:', e);
+					});
+			},
+			openPattern(pattern) {
+				if (pattern.actionType === 'IGNORE') {
+					return;
+				}
+
+				console.debug('Opening pattern w/ id', pattern.id);
+				this.$router.push({
+					name: 'stream',
+					params: this.$route.params,
+					query: {pattern: pattern.id,},
+				}, () => {});
+			},
+			resetPatternSelection() {
+				console.debug('Resetting pattern selection');
+				this.$router.push({
+					name: 'stream',
+					params: this.$route.params,
+				}, () => {});
+			},
+			togglePattern(pattern) {
+				const enabled = !pattern.enabled;
+				console.debug('Toggling pattern', pattern);
+				this.$http.post(`pattern/${pattern.id}/enable`, null, {
+					params: {
+						enabled,
+					},
+				})
+					.then(response => {
+						const data = response.data;
+						console.debug('Done toggling pattern', data);
+						this.$emit('patternAddComplete');
+					}).catch(e => {
+					this.$bvToast.toast(`Failed to toggle pattern: ${e}`, {
+						title: 'Error',
+						variant: 'danger',
+					});
+					console.error('Failed to toggle pattern', e);
+				});
+			},
+			deletePattern(pattern) {
+				console.debug('Deleting pattern', pattern);
+
+				this.$http.delete(`pattern/${pattern.id}`, null)
+						.then(() => {
+							console.debug('Done deleting pattern');
+							this.$emit('patternAddComplete');
+						}).catch(e => {
+							this.$bvToast.toast(`Failed to delete pattern: ${e}`, {
+								title: 'Error',
+								variant: 'danger',
+							});
+							console.error('Failed to delete pattern', e);
+						});
+			},
+		},
+	};
+</script>
+<style scoped>
+	code {
+		font-family: "Ubuntu Mono", "Lucida Console", monospace;
+		font-size: 100%;
+	}
+
+	.patterns-dropdown {
+		display: inline-flex;
+		width: 128px !important;
+		min-width: 128px !important;
+		max-width: 128px !important;
+		flex: 0 0 128px !important;
+		flex-shrink: 0 !important;
+		box-sizing: border-box;
+	}
+
+	.patterns-dropdown > .btn {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 9.8px;
+		letter-spacing: 0.05px;
+		min-width: 128px !important;
+		width: 128px !important;
+		max-width: 128px !important;
+		flex: 0 0 128px !important;
+		padding-left: 8px;
+		padding-right: 8px;
+		white-space: nowrap;
+	}
+</style>
+<style>
+	.ignore-pattern button {
+		cursor: default !important;
+	}
+</style>

frontend/src/components/Sidebar.vue

@@ -0,0 +1,272 @@
+<template>
+	<nav class="col-sm-3 d-none d-sm-block sidebar">
+		<div class="m-2 d-flex flex-wrap align-items-center" style="gap: 6px;">
+			<button type="button" class="btn btn-sm"
+					:title="this.$store.state.pause ? 'Continue' : 'Pause new streams'"
+					:class="this.$store.state.pause ? 'btn-danger' : 'btn-outline-success'"
+					@click.stop.prevent="togglePause">
+				<i :class="this.$store.state.pause ? 'fas fa-play' : 'fas fa-pause'"/>
+			</button>
+			<button type="button" class="btn btn-sm ml-1"
+					:title="this.$store.state.displayFavoritesOnly ? 'Show all streams' : 'Show only favorite streams'"
+					:class="this.$store.state.displayFavoritesOnly ? 'btn-danger' : 'btn-outline-danger'"
+					@click.stop.prevent="toggleFavorites">
+				<i class="fas fa-star"/>
+			</button>
+			<button type="button" class="btn btn-outline-primary btn-sm ml-1"
+					:title="this.$store.state.hexdumpMode ? 'Switch to text view' : 'Switch to hexdump view'"
+					@click.stop.prevent="toggleHexdump">
+				<i :class="this.$store.state.hexdumpMode ? 'far fa-file-code' : 'fas fa-align-left'"/>
+			</button>
+			<button type="button" class="btn btn-sm btn-outline-warning ml-1" v-if="!this.$store.state.pcapStarted"
+					title="Start pcap file processing"
+					@click.stop.prevent="startPcap">
+				<i class="fas fa-arrow-circle-down"/>
+			</button>
+			<button type="button" class="btn btn-sm btn-outline-info" style="float: right;"
+					title="Scroll to top"
+					@click.stop.prevent="scrollUp">
+				<i class="fas fa-angle-double-up"/>
+			</button>
+		</div>
+		<div class="sidebar-sticky">
+			<ul class="nav flex-column">
+				<SidebarStream v-for="stream in streams"
+							   :key="stream.id"
+							   :stream="stream"/>
+				<infinite-loading @infinite="infiniteLoadingHandler" ref="infiniteLoader"/>
+			</ul>
+		</div>
+	</nav>
+</template>
+
+<script>
+import SidebarStream from './SidebarStream';
+
+export default {
+		name: 'Sidebar',
+		props: ['servicePort', 'streamId',],
+		data() {
+			return {
+				streams: [],
+				navigationKeysCallback: (e) => {
+					if (!e.ctrlKey) return;
+					if (e.key === 'ArrowUp') {
+						e.preventDefault();
+						const index = this.streams.findIndex(e => e.id === this.$route.params.streamId);
+						const newStream = this.streams[index - 1];
+						if (!newStream) return;
+						const newId = newStream.id;
+						this.$router.push({
+							name: 'stream',
+							params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+							query: this.$route.query,
+						});
+						document.getElementById(`stream-${newId}`).scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'center',
+						});
+					} else if (e.key === 'ArrowDown') {
+						e.preventDefault();
+						const index = this.streams.findIndex(e => e.id === this.$route.params.streamId);
+						const newStream = this.streams[index + 1];
+						if (!newStream) return;
+						const newId = newStream.id;
+						this.$router.push({
+							name: 'stream',
+							params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+							query: this.$route.query,
+						});
+						document.getElementById(`stream-${newId}`).scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'center',
+						});
+					} else if (e.key === 'Home') {
+						const newStream = this.streams[0];
+						if (!newStream) return;
+						const newId = newStream.id;
+						this.$router.push({
+							name: 'stream',
+							params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+							query: this.$route.query,
+						});
+						document.getElementById(`stream-${newId}`).scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'center',
+						});
+					} else if (e.key === 'End') {
+						const newStream = this.streams[this.streams.length - 1];
+						if (!newStream) return;
+						const newId = newStream.id;
+						this.$router.push({
+							name: 'stream',
+							params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+							query: this.$route.query,
+						});
+						document.getElementById(`stream-${newId}`).scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'center',
+						});
+					}
+				},
+			};
+		},
+		watch: {
+			'$route.params.servicePort': function () {
+				console.debug('Port reselected');
+				this.streams = [];
+				this.$refs.infiniteLoader.stateChanger.reset();
+			},
+			'$route.query.pattern': function () {
+				console.debug('Pattern selected');
+				this.streams = [];
+				this.$refs.infiniteLoader.stateChanger.reset();
+			},
+		},
+		methods: {
+			infiniteLoadingHandler($state) {
+				const ourStreams = this.streams;
+				const pageSize = this.$store.state.pageSize;
+
+				let startsFrom;
+				if (ourStreams?.length && ourStreams[ourStreams.length - 1]) {
+					startsFrom = ourStreams[ourStreams.length - 1].id;
+				} else {
+					startsFrom = null;
+				}
+
+				this.$http.post(`/stream/${this.$route?.params?.servicePort || 'all'}`, {
+					startingFrom: startsFrom,
+					pageSize: pageSize,
+					pattern: this.$route.query.pattern ? {id: this.$route.query.pattern,} : null,
+					favorites: this.$store.state.displayFavoritesOnly,
+				}).then(r => {
+					const data = r.data;
+					if (data?.length === 0) {
+						console.log('Finished loading streams (empty page)');
+						return $state.complete();
+					}
+
+					if (data[0]?.id === this.streams[0]?.id) {
+						console.log('Finished loading streams (overlap detected)');
+						return $state.complete();
+					}
+
+					this.streams.push(...data);
+
+					if (data.length < pageSize) {
+						// this was the last page
+						console.log('Finished loading streams (last page was not full)');
+						$state.complete();
+					} else {
+						console.log('Loaded another page of streams');
+						$state.loaded()
+					}
+				}).catch(e => {
+					this.$bvToast.toast(`Failed to load portion of streams: ${e}`, {
+						title: 'Error',
+						variant: 'danger',
+					});
+					console.error('Failed to load portion of streams:', e);
+					return $state.error();
+				});
+			},
+			toggleFavorites() {
+				this.$store.commit('toggleDisplayFavoritesOnly');
+				this.streams = [];
+				this.$refs.infiniteLoader.stateChanger.reset();
+			},
+			togglePause() {
+				this.$store.commit('togglePause');
+			},
+			toggleHexdump() {
+				this.$store.commit('toggleHexdumpMode');
+			},
+			startPcap() {
+				this.$http.post('pcap/start')
+					.then(() => {
+						this.$store.commit('startPcap');
+					}).catch(e => {
+						this.$bvToast.toast(`Failed to start pcap: ${e}`, {
+							title: 'Error',
+							variant: 'danger',
+						});
+						console.error('Failed to start pcap', e);
+					});
+			},
+			addStreamFromWs(stream) {
+				const currentPort = parseInt(this.$route?.params?.servicePort, 10);
+				if (currentPort && currentPort !== stream.service) return;
+				if (this.$store.state.displayFavoritesOnly || this.$store.state.pause) return;
+				if (this.$route.query.pattern && !stream.foundPatterns.some(e => e.id === this.$route.query.pattern)) {
+					return;
+				}
+
+				this.streams.unshift(stream);
+			},
+			scrollUp() {
+				const newStream = this.streams[0];
+				if (!newStream) return;
+				const newId = newStream.id;
+				this.$router.push({
+					name: 'stream',
+					params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+					query: this.$route.query,
+				});
+				document.getElementById(`stream-${newId}`).scrollIntoView({
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'center',
+				});
+			},
+		},
+		mounted() {
+			document.addEventListener('keydown', this.navigationKeysCallback);
+
+			this.$http.get('pcap/started')
+				.then(r => this.$store.state.pcapStarted = r.data)
+				.catch(e => {
+					console.error('Failed to get pcap status, defaulting to true:', e);
+					this.$store.state.pcapStarted = true;
+				});
+		},
+		beforeDestroy() {
+			document.removeEventListener('keydown', this.navigationKeysCallback);
+		},
+		components: {
+			SidebarStream,
+		},
+	};
+</script>
+
+<style scoped>
+	.sidebar {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 100; /* Behind the navbar */
+		padding: 40px 0 0; /* Height of navbar */
+		box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+	}
+
+	.sidebar-sticky {
+		position: relative;
+		top: 0;
+		height: calc(100vh - 85px);
+		/*padding-top: .5rem;*/
+		overflow-x: hidden;
+		overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+	}
+
+	@supports (position: sticky) {
+		.sidebar-sticky {
+			position: sticky;
+		}
+	}
+
+</style>

frontend/src/components/SidebarStream.vue

@@ -0,0 +1,147 @@
+<template>
+	<li :id="`stream-${stream.id}`" class="nav-item stream-item" :class="{highlight: favorite0}">
+		<router-link class="nav-link"
+					 :to="{name: 'stream', params: {servicePort: this.stream.service, streamId: this.stream.id}, query: this.$route.query}">
+			<a @click.stop.prevent="toggleFavorite">
+				<i class="fa-star" style="color: #DC3545" :class="favorite0 ? 'fas' : 'far'"/>
+			</a>
+			{{ stream.id }} {{ stream.protocol }}
+			<template v-if="stream.ttl">TTL {{ stream.ttl }}</template>
+      <template v-if="shouldShowServiceName"><br/>{{ getServiceName(stream.service) }} #{{stream.service}}</template>
+			<br/>
+			{{ dateToText(stream.startTimestamp) }}
+			<template v-if="!dateMatches(stream.startTimestamp, stream.endTimestamp)">
+				- {{ dateToText(stream.endTimestamp, dayMatches(stream.startTimestamp, stream.endTimestamp)) }}
+			</template>
+			<template v-if="stream.userAgentHash"><br/>UA: {{ stream.userAgentHash }}</template>
+			<br/>
+			{{ stream.sizeBytes }} bytes in {{ stream.packetsCount }} packets
+			<br/>
+			<span v-for="pattern in notDeletedFoundPatterns"
+				  :key="pattern.id"
+				  :style="`color: ${pattern.color};`">
+				{{ pattern.name }}
+			</span>
+		</router-link>
+	</li>
+</template>
+
+<script>
+	export default {
+		name: 'SidebarStream',
+		props: {
+			stream: {
+				id: Number(),
+				protocol: String(),
+				service: Number(),
+				startTimestamp: Number(),
+				endTimestamp: Number(),
+				foundPatternsIds: Array(),
+				favorite: Boolean(),
+				ttl: Number(),
+				userAgentHash: String(),
+				sizeBytes: Number(),
+				packetsCount: Number(),
+			},
+		},
+    computed: {
+		  shouldShowServiceName: function () {
+        return this.$route?.params?.servicePort === undefined;
+      },
+			foundPatterns: function () {
+				return this.$store.state.patterns.filter(p => this.stream.foundPatternsIds.includes(p.id));
+			},
+			notDeletedFoundPatterns: function () {
+				return this.foundPatterns.filter(p => !p.deleted);
+			},
+    },
+		data: function () {
+			return {
+				favorite0: this.stream.favorite,
+        getServiceName: function (port) {
+          return this.$store.state.services.find(o => o.port === port)?.name ?? '<Deleted service>'
+        },
+			};
+		},
+		methods: {
+			dateToText(unixTimestamp, short = false) {
+				const date = new Date(unixTimestamp);
+				const options = {
+					hour: '2-digit',
+					minute: '2-digit',
+					second: '2-digit',
+				};
+				if (!short && !this.isToday(date)) {
+					options.month = '2-digit';
+					options.day = '2-digit';
+					return date.toLocaleDateString('ru-RU', options);
+				}
+				return date.toLocaleTimeString('ru-RU', options);
+			},
+
+			isToday(someDate) {
+				const today = new Date();
+				return someDate.getDate() === today.getDate() &&
+					someDate.getMonth() === today.getMonth() &&
+					someDate.getFullYear() === today.getFullYear();
+			},
+
+			dayMatches(rFirst, rSecond) {
+				const first = new Date(rFirst);
+				const second = new Date(rSecond);
+
+				return first.getDate() === second.getDate() &&
+					first.getMonth() === second.getMonth() &&
+					first.getFullYear() === second.getFullYear();
+			},
+
+			dateMatches(rFirst, rSecond) {
+				const first = new Date(rFirst);
+				const second = new Date(rSecond);
+				return first.getDate() === second.getDate() &&
+					first.getMonth() === second.getMonth() &&
+					first.getFullYear() === second.getFullYear() &&
+					first.getHours() === second.getHours() &&
+					first.getMinutes() === second.getMinutes() &&
+					first.getSeconds() === second.getSeconds();
+			},
+
+			toggleFavorite() {
+				this.$http.post(`stream/${this.stream.id}/${this.favorite0 ? 'unfavorite' : 'favorite'}`)
+					.then(() => this.favorite0 = !this.favorite0)
+					.catch(e => {
+						this.$bvToast.toast(`Failed to fav service: ${e}`, {
+							title: 'Error',
+							variant: 'danger',
+						});
+						console.error('Failed to fav service', e);
+					});
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	.nav-link {
+		font-weight: 600;
+		color: var(--text);
+		font-family: var(--pixel-font);
+		font-size: 12px;
+		line-height: 1.35;
+	}
+
+	/*noinspection CssUnusedSymbol*/
+	.nav-link.active {
+		color: var(--accent);
+		text-shadow: 0 0 10px rgba(94, 242, 255, 0.35);
+	}
+
+	.highlight {
+		background: rgba(255, 106, 213, 0.18);
+		box-shadow: 0 0 12px rgba(255, 106, 213, 0.28);
+	}
+
+	.stream-item {
+		transition: all .3s;
+	}
+</style>

frontend/src/components/ThemeButton.vue

@@ -0,0 +1,127 @@
+<template>
+	<div>
+		<input
+				@change="toggleTheme"
+				id="checkbox"
+				type="checkbox"
+				class="switch-checkbox"
+		/>
+		<label for="checkbox" class="switch-label">
+			<span class="checkbox-emoji">🌙</span>
+			<span class="checkbox-emoji">☀️</span>
+			<div
+					class="switch-toggle"
+					:class="{ 'switch-toggle-checked': chosenTheme === 'dark' }"
+			></div>
+		</label>
+	</div>
+</template>
+
+<script>
+
+export default {
+	mounted() {
+		this.initTheme();
+	},
+
+	computed: {
+		chosenTheme: {
+			get() {
+				return this.$store.state.theme || this.detectTheme();
+			},
+
+			set(theme) {
+				this.$store.commit('setTheme', theme);
+				this.displayTheme(theme);
+			},
+		},
+	},
+
+	methods: {
+		toggleTheme() {
+			const activeTheme = this.chosenTheme;
+
+			if (activeTheme === "light") {
+				this.chosenTheme = 'dark';
+			} else {
+				this.chosenTheme = 'light';
+			}
+
+			console.debug('Toggling theme from ', activeTheme, ' to ', this.chosenTheme);
+		},
+
+		initTheme() {
+			this.displayTheme(this.chosenTheme);
+		},
+
+		detectTheme() {
+			return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		},
+
+		displayTheme(theme) {
+			document.body.setAttribute('data-theme', theme);
+		},
+	},
+};
+</script>
+
+<style scoped>
+.switch-checkbox {
+	display: none;
+}
+
+.switch-label {
+	align-items: center;
+	background: var(--button-text-primary-color);
+	border: calc(var(--button-element-size) * 0.025) solid var(--button-accent-color);
+	border-radius: var(--button-element-size);
+	cursor: pointer;
+	display: flex;
+	font-size: calc(var(--button-element-size) * 0.3);
+	height: calc(var(--button-element-size) * 0.35);
+	position: relative;
+	padding: calc(var(--button-element-size) * 0.1);
+	transition: background 0.5s ease;
+	justify-content: space-between;
+	width: var(--button-element-size);
+	z-index: 1;
+	box-sizing: content-box;
+}
+
+.switch-toggle {
+	position: absolute;
+	background-color: var(--button-background-color-primary);
+	border-radius: 50%;
+	top: calc(var(--button-element-size) * 0.07);
+	left: calc(var(--button-element-size) * 0.07);
+	height: calc(var(--button-element-size) * 0.4);
+	width: calc(var(--button-element-size) * 0.4);
+	transform: translateX(0);
+	transition: transform 0.3s ease, background-color 0.5s ease;
+}
+
+.switch-toggle-checked {
+	transform: translateX(calc(var(--button-element-size) * 0.6)) !important;
+}
+
+.checkbox-emoji {
+	color: transparent;
+	text-shadow: 0 0 0 var(--button-background-color-primary);
+}
+
+>>> {
+	--button-element-size: 3rem;
+
+	--button-background-color-primary: var(--panel);
+	--button-background-color-secondary: var(--bg-2);
+	--button-accent-color: var(--accent-2);
+	--button-text-primary-color: var(--text);
+}
+
+[data-theme=light] * {
+	--button-background-color-primary: #f0f4ff;
+	--button-background-color-secondary: #e4ebff;
+	--button-accent-color: var(--accent);
+	--button-text-primary-color: #0d1b2f;
+}
+</style>

frontend/src/main.js

@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
+import Axios from 'axios';
+import InfiniteLoading from 'vue-infinite-loading';
+import App from './App.vue';
+import router from './router';
+
+import store from './store';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+import '@fortawesome/fontawesome-free/css/all.css';
+import "bootstrap-darkmode/scss/darktheme.scss";
+import './assets/neon.css';
+
+Vue.config.productionTip = false;
+Vue.use(BootstrapVue);
+Vue.use(InfiniteLoading, {
+	slots: {
+		noResults: 'No results...',
+		noMore: 'No more data',
+		error: 'An error has occurred!',
+		errorBtnText: 'Retry',
+	},
+	props: {
+		spinner: 'waveDots',
+	},
+});
+
+const axiosInstance = Axios.create({
+	baseURL: '/api', // TO!DO: edit for release!
+	// baseURL: 'http://192.168.79.131:65000/api',
+	headers: {
+		'Accept': 'application/json',
+		'Content-Type': 'application/json',
+	},
+	timeout: 5000,
+	withCredentials: true,
+	maxContentLength: 20000,
+});
+// noinspection JSUnusedGlobalSymbols
+Vue.prototype.$http = axiosInstance;
+
+// noinspection JSUnusedGlobalSymbols
+new Vue({
+	router,
+	store,
+	render: h => h(App),
+}).$mount('#app');

frontend/src/objectAssignDeep.js

@@ -0,0 +1,118 @@
+// https://github.com/saikojosh/Object-Assign-Deep/blob/master/objectAssignDeep.js
+
+/*
+ * A unified way of returning a string that describes the type of the given variable.
+ */
+function getTypeOf(input) {
+
+	if (input === null) {
+		return 'null';
+	} else if (typeof input === 'undefined') {
+		return 'undefined';
+	} else if (typeof input === 'object') {
+		return (Array.isArray(input) ? 'array' : 'object');
+	}
+
+	return typeof input;
+
+}
+
+/*
+ * Branching logic which calls the correct function to clone the given value base on its type.
+ */
+function cloneValue(value) {
+
+	// The value is an object so let's clone it.
+	if (getTypeOf(value) === 'object') {
+		return quickCloneObject(value);
+	}
+
+	// The value is an array so let's clone it.
+	else if (getTypeOf(value) === 'array') {
+		return quickCloneArray(value);
+	}
+
+	// Any other value can just be copied.
+	return value;
+
+}
+
+/*
+ * Enumerates the given array and returns a new array, with each of its values cloned (i.e. references broken).
+ */
+function quickCloneArray(input) {
+	return input.map(cloneValue);
+}
+
+/*
+ * Enumerates the properties of the given object (ignoring the prototype chain) and returns a new object, with each of
+ * its values cloned (i.e. references broken).
+ */
+function quickCloneObject(input) {
+
+	const output = {};
+
+	for (const key in input) {
+		if (!Object.prototype.hasOwnProperty.call(input, key)) {
+			continue;
+		}
+
+		output[key] = cloneValue(input[key]);
+	}
+
+	return output;
+
+}
+
+/*
+ * Does the actual deep merging.
+ */
+function executeDeepMerge(target, _objects = [], _options = {}) {
+
+	const options = {
+		arrayBehaviour: _options.arrayBehaviour || 'replace',  // Can be "merge" or "replace".
+	};
+
+	// Ensure we have actual objects for each.
+	const objects = _objects.map(object => object || {});
+	const output = target || {};
+
+	// Enumerate the objects and their keys.
+	for (let oindex = 0; oindex < objects.length; oindex++) {
+		const object = objects[oindex];
+		const keys = Object.keys(object);
+
+		for (let kindex = 0; kindex < keys.length; kindex++) {
+			const key = keys[kindex];
+			const value = object[key];
+			const type = getTypeOf(value);
+			const existingValueType = getTypeOf(output[key]);
+
+			if (type === 'object') {
+				if (existingValueType !== 'undefined') {
+					const existingValue = (existingValueType === 'object' ? output[key] : {});
+					output[key] = executeDeepMerge({}, [existingValue, quickCloneObject(value),], options);
+				} else {
+					output[key] = quickCloneObject(value);
+				}
+			} else if (type === 'array') {
+				if (existingValueType === 'array') {
+					const newValue = quickCloneArray(value);
+					output[key] = (options.arrayBehaviour === 'merge' ? output[key].concat(newValue) : newValue);
+				} else {
+					output[key] = quickCloneArray(value);
+				}
+			} else {
+				output[key] = value;
+			}
+
+		}
+	}
+
+	return output;
+
+}
+
+export function objectAssignDeep(target, ...objects) {
+	return executeDeepMerge(target, objects);
+}

frontend/src/router.js

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import ContentStream from './views/ContentStream';
+import Sidebar from './components/Sidebar';
+
+Vue.use(Router);
+
+export default new Router({
+	routes: [
+		{
+			path: '/:servicePort?/:streamId?',
+			name: 'stream',
+			props: true,
+			components: {
+				sidebar: Sidebar,
+				content: ContentStream,
+			},
+		},
+	],
+	linkActiveClass: 'active',
+});

frontend/src/store.js

@@ -0,0 +1,89 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createMutationsSharer from 'vuex-shared-mutations';
+import createPersistedState from 'vuex-persistedstate';
+
+Vue.use(Vuex);
+
+// noinspection JSUnusedLocalSymbols,JSUnusedGlobalSymbols
+export default new Vuex.Store({
+	state: {
+		theme: null,
+
+		hexdumpBlockSize: 16,
+		hexdumpLineNumberBase: 10,
+		pageSize: 25,
+		displayFavoritesOnly: false,
+		pause: false,
+		pcapStarted: true,
+
+		hexdumpMode: false,
+
+		serviceModalName: '',
+		serviceModalId: 0,
+
+		patterns: [],
+		services: [],
+
+		currentPacketsCount: 0,
+		currentStreamsCount: 0,
+		currentServicesPacketsCount: {},
+		currentServicesStreamsCount: {},
+	},
+	mutations: {
+		setTheme: (s, p) => s.theme = p,
+		setHexdumpBlockSize: (s, p) => s.hexdumpBlockSize = p,
+		setHexdumpLineNumberBase: (s, p) => s.hexdumpLineNumberBase = p,
+		setPageSize: (s, p) => s.pageSize = p,
+		// eslint-disable-next-line no-unused-vars
+		toggleDisplayFavoritesOnly: (s, p) => s.displayFavoritesOnly = !s.displayFavoritesOnly,
+		// eslint-disable-next-line no-unused-vars
+		togglePause: (s, p) => s.pause = !s.pause,
+		// eslint-disable-next-line no-unused-vars
+		startPcap: (s, p) => s.pcapStarted = true,
+		// eslint-disable-next-line no-unused-vars
+		toggleHexdumpMode: (s, p) => s.hexdumpMode = !s.hexdumpMode,
+
+		setServiceModalName: (s, p) => s.serviceModalName = p,
+		setServiceModalId: (s, p) => s.serviceModalId = p,
+
+		setPatterns: (s, p) => s.patterns = p,
+		addPattern: (s, p) => s.patterns.push(p),
+
+		setServices: (s, p) => s.services = p,
+		addService: (s, p) => s.services.push(p),
+
+		setCurrentPacketsCount: (s, p) => s.currentPacketsCount = p,
+		setCurrentStreamsCount: (s, p) => s.currentStreamsCount = p,
+		setCurrentServicesPacketsCount: (s, p) => s.currentServicesPacketsCount = p,
+		setCurrentServicesStreamsCount: (s, p) => s.currentServicesStreamsCount = p,
+	},
+	actions: {},
+	plugins: [
+		createPersistedState(),
+		createMutationsSharer({
+			// eslint-disable-next-line no-unused-vars
+			predicate: (mutation, state) => {
+				console.debug('Got mutation:', mutation);
+				const mName = mutation?.type;
+				const process = mName !== 'toggleDisplayFavoritesOnly'
+					&& mName !== 'setTheme'
+					&& mName !== 'setServiceModalName'
+					&& mName !== 'setServiceModalId'
+					&& mName !== 'togglePause'
+					&& mName !== 'startPcap'
+					&& mName !== 'toggleHexdumpMode'
+					&& mName !== 'setPatterns'
+					&& mName !== 'addPattern'
+					&& mName !== 'setServices'
+					&& mName !== 'addService'
+					&& mName !== 'setCurrentPacketsCount'
+					&& mName !== 'setCurrentStreamsCount'
+					&& mName !== 'setCurrentServicesPacketsCount'
+					&& mName !== 'setCurrentServicesStreamsCount';
+				console.debug('Processing?', process);
+				return process;
+			},
+		}),
+	],
+});

frontend/src/views/ContentStream.vue

@@ -0,0 +1,126 @@
+<template>
+	<div>
+		<div class="legend-bar">
+			<div class="d-flex align-items-center" style="gap: 10px;">
+				<span class="legend-pill request-pill">Request</span>
+				<span class="legend-pill response-pill">Response</span>
+			</div>
+		</div>
+		<Packet v-for="packetWithOffset in packetsWithOffsets"
+				:key="packetWithOffset.packet.id"
+				:packet="packetWithOffset.packet"
+				:offset="packetWithOffset.offset" />
+		<infinite-loading @infinite="infiniteLoadingHandler" ref="infiniteLoader">
+			<span slot="no-results"></span>
+		</infinite-loading>
+	</div>
+</template>
+
+<script>
+	import Packet from '../components/Packet';
+
+	export default {
+		name: 'ContentStream',
+		props: ['servicePort', 'streamId',],
+		data() {
+			return {
+				packets: [],
+			};
+		},
+		computed: {
+			packetsWithOffsets: function() {
+				return this.packets.map((el, i) => {
+					let offset = null;
+
+					if (i !== 0) {
+						offset = el.timestamp - this.packets[i - 1].timestamp;
+					}
+
+					return {packet: el, offset: offset,}
+				})
+			},
+		},
+		watch: {
+			'$route.params.streamId': function () {
+				this.packets = [];
+				this.$refs.infiniteLoader.stateChanger.reset();
+			},
+		},
+		methods: {
+			infiniteLoadingHandler($state) {
+				if (!this.$route.params.streamId) return $state.complete();
+
+				const packets = this.packets;
+				const pageSize = this.$store.state.pageSize;
+				let startsFrom;
+				if (packets && packets.length && packets[packets.length - 1]) {
+					startsFrom = packets[packets.length - 1].id;
+				} else {
+					startsFrom = null;
+				}
+
+				this.$http.post(`packet/${this.$route.params.streamId}`, {
+					startingFrom: startsFrom,
+					pageSize: pageSize,
+				}).then(response => {
+					const data = response.data;
+					if (data.length === 0) {
+						console.log('Finished loading packets (empty page)');
+						return $state.complete();
+					}
+
+					if (data[0] && this.packets[0] && data[0].id === this.packets[0].id) {
+						console.log('Finished loading packets (overlap detected)');
+						return $state.complete();
+					}
+
+					this.packets.push(...data);
+
+					if (data.length < pageSize) {
+						// this was the last page
+						console.log('Finished loading packets (last page was not full)');
+						$state.complete();
+					} else {
+						console.log('Loaded another page of packets');
+						$state.loaded();
+					}
+				}).catch(e => {
+					this.$bvToast.toast(`Failed to load portion of packets: ${e}`, {
+						title: 'Error',
+						variant: 'danger',
+					});
+					console.error('Failed to load portion of packets:', e);
+					return $state.error();
+				});
+			},
+		},
+		components: {
+			Packet,
+		},
+	};
+</script>
+
+<style>
+	:root {
+		--response-packet-color: rgba(255, 106, 213, 0.16);
+		--request-packet-color: rgba(94, 242, 255, 0.2);
+	}
+
+	:root [data-theme=dark] {
+		color-scheme: dark;
+		--response-packet-color: rgba(255, 106, 213, 0.16);
+		--request-packet-color: rgba(94, 242, 255, 0.2);
+	}
+
+	.request-pill {
+		border-color: rgba(94, 242, 255, 0.45);
+		color: #c9f8ff;
+		background: rgba(94, 242, 255, 0.1);
+	}
+
+	.response-pill {
+		border-color: rgba(255, 106, 213, 0.45);
+		color: #ffd6f6;
+		background: rgba(255, 106, 213, 0.1);
+	}
+</style>

frontend/src/views/LookBack.vue

@@ -0,0 +1,57 @@
+<template>
+	<b-modal @ok="lookBack" id="lookBackModal"
+					 title="Search into the past"
+					 cancel-title="Cancel"
+					 centered scrollable>
+		<form ref="lookBackForm">
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Minutes"
+					description="How far into the past do we want to look"
+					label-for="lookback-minutes">
+				<b-form-input @keydown.native.enter="lookBack" id="lookback-minutes" required v-model="minutes"/>
+			</b-form-group>
+		</form>
+	</b-modal>
+</template>
+
+<script>
+export default {
+	name: 'LookBack',
+	props: {
+		patternId: Number,
+	},
+	data() {
+		return {
+			minutes: 5,
+		};
+	},
+	methods: {
+		checkValidity() {
+			return this.$refs.lookBackForm.reportValidity();
+		},
+
+		lookBack(ev) {
+			ev.preventDefault();
+			if (!this.checkValidity()) {
+				console.debug('Form is invalid');
+				return;
+			}
+			console.debug(`Looking back with pattern ${this.patternId}`);
+
+			this.$http.post(`pattern/${this.patternId}/lookback`, this.minutes)
+					.then(() => {
+						console.debug('Lookback started');
+						this.$bvModal.hide('lookBackModal');
+					}).catch(e => {
+				this.$bvToast.toast(`Failed to start lookback: ${e}`, {
+					title: 'Error',
+					variant: 'danger',
+				});
+				console.error('Failed to start lookback', e);
+			});
+		},
+	},
+};
+</script>

frontend/src/views/PatternModal.vue

@@ -0,0 +1,205 @@
+<template>
+	<b-modal @ok="addPattern" @cancel="reset" id="patternModal"
+			 :title="creating ? 'Creating pattern' : 'Editing pattern'"
+			 cancel-title="Cancel"
+			 centered scrollable>
+		<form ref="addPatternForm">
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Name"
+					description="It is displayed in the list and highlighted in the packet contents"
+					label-for="pattern-name">
+				<b-form-input @keydown.native.enter="addPattern" id="pattern-name" required v-model="newPattern.name"/>
+			</b-form-group>
+
+			<b-form-group
+					v-if="creating"
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Pattern"
+					description="Substring, RegEx or bytes"
+					label-for="pattern-value">
+				<b-form-input @keydown.native.enter="addPattern" @keydown="validateKey"
+							  id="pattern-value" required v-model="newPattern.value"
+							  :placeholder="getPlaceholder()"/>
+			</b-form-group>
+
+      <b-form-group
+					v-if="creating"
+          label-cols-sm="4"
+          label-cols-lg="3"
+          label="Search action"
+          description="What to do with matching streams"
+          label-for="pattern-actionType">
+        <b-form-select id="pattern-actionType" required v-model="newPattern.actionType">
+          <option value="FIND" selected>Highlight found pattern</option>
+          <option value="IGNORE">Ignore matching streams</option>
+        </b-form-select>
+      </b-form-group>
+
+			<b-form-group v-if="newPattern.actionType === 'FIND'"
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Color"
+					description="The highlight color of the pattern in the packets and streams"
+					label-for="pattern-color">
+				<b-form-input id="pattern-color" required type="color" v-model="newPattern.color"/>
+			</b-form-group>
+
+			<b-form-group
+					v-if="creating"
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Search method"
+					description="The way to search for patterns in packets"
+					label-for="pattern-searchType">
+				<b-form-select id="pattern-searchType" required v-model="newPattern.searchType">
+					<option value="REGEX" selected>Regular expression</option>
+					<option value="SUBSTRING">Substring</option>
+					<option value="SUBBYTES">Bytes</option>
+				</b-form-select>
+			</b-form-group>
+
+			<b-form-group
+					v-if="creating"
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Search type"
+					description="In which packets to search for a pattern"
+					label-for="pattern-type">
+				<b-form-select id="pattern-type" required v-model="newPattern.directionType">
+					<option value="INPUT">Request</option>
+					<option value="OUTPUT">Response</option>
+					<option value="BOTH" selected>Anywhere</option>
+				</b-form-select>
+			</b-form-group>
+
+			<b-form-group
+					v-if="creating"
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Service"
+					description="Apply this pattern only to the specific service"
+					label-for="pattern-service">
+				<b-form-select id="pattern-service" :options="serviceOptions"
+											 v-model="newPattern.serviceId"></b-form-select>
+			</b-form-group>
+		</form>
+	</b-modal>
+</template>
+
+<script>
+
+const hexRegex = /[0-9A-Fa-f ]/;
+const defaultPattern = {
+	name: '',
+	value: '',
+	color: '#FF7474',
+	searchType: 'SUBSTRING',
+	directionType: 'BOTH',
+	actionType: 'FIND',
+	serviceId: null,
+};
+
+	export default {
+		name: 'PatternModal',
+		props: {
+			creating: Boolean,
+
+			initialPattern: {
+				name: String,
+				value: String,
+				color: String,
+				searchType: String,
+				directionType: String,
+				actionType: String,
+				serviceId: Number,
+			},
+		},
+		data() {
+			return {
+				newPattern: {},
+			};
+		},
+		watch: {
+			initialPattern() {
+				console.debug('initialService changed, reassigning...', this.initialPattern);
+				this.newPattern = {...defaultPattern, ...this.initialPattern,};
+			},
+		},
+		computed: {
+			serviceOptions: function () {
+				let services = this.$store.state.services;
+				let options = services.map(service => {
+					return {
+						value: service.port,
+						text: `${service.name} #${service.port}`,
+					}
+				});
+
+				return [
+						{ value: null, text: 'Any service', },
+						...options,
+				];
+			},
+		},
+		methods: {
+			getPlaceholder() {
+				if (this.newPattern.searchType === 'REGEX') return '[A-Z0-9]{31}=';
+				else if (this.newPattern.searchType === 'SUBSTRING') return 'HTTP/2';
+				else return 'DEAD BEEF 1337';
+			},
+			validateKey(e) {
+				console.log('', e);
+				if (this.newPattern.searchType !== 'SUBBYTES') return;
+				if (!hexRegex.test(e?.key)) {
+					e.preventDefault();
+				}
+			},
+
+			checkValidity() {
+				return this.$refs.addPatternForm.reportValidity();
+			},
+
+			reset() {
+				this.newPattern = {...defaultPattern,};
+			},
+
+			addPattern(ev) {
+				ev.preventDefault();
+				if (!this.checkValidity()) {
+					console.debug('Form is invalid');
+					return;
+				}
+				console.debug('Adding/editing pattern...', this.newPattern);
+
+				if (this.newPattern.searchType === 'SUBBYTES') {
+					this.newPattern.value = this.newPattern.value.replace(/\s+/g, '').toLowerCase();
+				}
+
+				let url;
+				if (this.creating) {
+					url = 'pattern/'
+				} else {
+					url = 'pattern/' + this.newPattern.id
+				}
+
+				this.$http.post(url, this.newPattern)
+					.then(response => {
+						const data = response.data;
+						console.debug('Done adding/editing pattern', data);
+						this.$emit('patternAddComplete');
+						this.reset();
+						this.$bvModal.hide('patternModal');
+					}).catch(e => {
+					this.$bvToast.toast(`Failed to add pattern: ${e}`, {
+						title: 'Error',
+						variant: 'danger',
+					});
+					console.error('Failed to add pattern', e);
+				});
+			},
+		},
+	};
+</script>

frontend/src/views/ServiceModal.vue

@@ -0,0 +1,186 @@
+<template>
+	<b-modal id="serviceModal" size="lg"
+			 :title="creating ? 'Creating service' : 'Editing service'"
+			 centered scrollable @ok.prevent="submit">
+		<b-form ref="serviceForm">
+			<b-form-group label-cols-sm="4"
+						  label="Name"
+						  label-for="service-name">
+				<b-form-input id="service-name" required v-model="service.name"
+							  @keyup.enter.stop.prevent="submit"/>
+			</b-form-group>
+
+			<b-form-group v-if="creating"
+						  label-cols-sm="4"
+						  label="Port"
+						  label-for="service-port">
+				<b-form-input id="service-port" required
+							  type="number" min="1" max="65535" v-model.number="service.port"
+							  @keyup.enter.stop.prevent="submit"/>
+			</b-form-group>
+
+			<b-form-group label-cols-sm="4"
+						  label="Is an HTTP service"
+						  label-for="service-is-http">
+				<b-form-checkbox id="service-is-http" required
+                  v-model="service.http" />
+			</b-form-group>
+
+			<b-form-group label-cols-sm="4"
+						  label="Apply urldecode"
+						  label-for="service-urldecode">
+				<b-form-checkbox id="service-urldecode" required
+								 v-model="service.urldecodeHttpRequests"/>
+			</b-form-group>
+
+			<b-form-group label-cols-sm="4"
+						  label="Merge adjacent packets"
+						  label-for="service-mergeAdjacent">
+				<b-form-checkbox id="service-mergeAdjacent" required
+								 v-model="service.mergeAdjacentPackets"/>
+			</b-form-group>
+
+			<b-form-group label-cols-sm="4"
+						label="Inflate WebSockets"
+						label-for="service-inflateWS">
+				<b-form-checkbox id="service-inflateWS" required
+								 v-model="service.parseWebSockets"/>
+			</b-form-group>
+
+			<b-form-group label-cols-sm="4"
+						  label="Decrypt TLS (TLS_RSA_WITH_AES only)"
+						  label-for="service-decryptTls">
+				<b-form-checkbox id="service-decryptTls" required
+								 v-model="service.decryptTls"/>
+			</b-form-group>
+
+			<b-button v-if="!creating" variant="danger" @click="deleteService">Delete</b-button>
+		</b-form>
+	</b-modal>
+</template>
+
+<script>
+	import {objectAssignDeep,} from '@/objectAssignDeep';
+
+	export default {
+		name: 'ServiceModal',
+		props: {
+			creating: Boolean,
+
+			initialService: {
+				name: String,
+				port: Number,
+				http: Boolean,
+				urldecodeHttpRequests: Boolean,
+				mergeAdjacentPackets: Boolean,
+				parseWebSockets: Boolean,
+				decryptTls: Boolean,
+			},
+		},
+		data() {
+			return {
+				service: {},
+			};
+		},
+		watch: {
+			initialService() {
+				console.debug('initialService changed, reassigning...', this.initialService);
+				this.service = objectAssignDeep({}, this.initialService);
+			},
+		},
+		methods: {
+			submit() {
+				if (!this.$refs.serviceForm.reportValidity()) {
+					return;
+				}
+				console.debug('Submitting service...', this.service, this.creating);
+
+				let url;
+
+				if (this.creating) {
+					url = 'service/';
+				} else {
+					url = 'service/' + this.initialService.port
+				}
+
+				this.$http.post(url, this.service)
+					.then(response => {
+						console.info('Done editing/creating service', response.data);
+						this.$emit('service-update-needed');
+						this.$bvModal.hide('serviceModal');
+					})
+					.catch(e => {
+						this.$bvToast.toast(`Failed to ${this.creating ? 'create' : 'edit'} service: ${e}`, {
+							title: 'Error',
+							variant: 'danger',
+						});
+						console.error('Failed to edit/create service', e);
+					});
+			},
+			deleteService() {
+				this.$http.delete(`service/${this.service.port}`)
+						.then(() => {
+							console.info('Done deleting service', this.service);
+							this.$emit('service-update-needed');
+							this.$bvModal.hide('serviceModal');
+						}).catch(e => {
+					this.$bvToast.toast(`Failed to delete service: ${e}`, {
+						title: 'Error',
+						variant: 'danger',
+					});
+					console.error('Failed to delete service', e);
+				});
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	.form-control {
+		background: rgba(122, 29, 255, 0.06);
+		border: 1px solid rgba(122, 29, 255, 0.5);
+		color: var(--accent);
+		font-family: var(--pixel-font);
+		font-size: 11px;
+		letter-spacing: 0.5px;
+		box-shadow: none;
+	}
+
+	.form-control:focus {
+		background: rgba(122, 29, 255, 0.12);
+		border-color: rgba(198, 107, 255, 0.9);
+		color: var(--text);
+		box-shadow: 0 0 12px rgba(198, 107, 255, 0.25);
+	}
+
+	::v-deep .custom-control-input:focus ~ .custom-control-label::before {
+		box-shadow: 0 0 8px rgba(198, 107, 255, 0.5);
+	}
+
+	::v-deep .custom-checkbox .custom-control-label::before {
+		border: 1px solid rgba(122, 29, 255, 0.7);
+		background: rgba(122, 29, 255, 0.08);
+		box-shadow: inset 0 0 0 1px rgba(198, 107, 255, 0.25);
+	}
+
+	::v-deep .custom-control-label::after {
+		background-size: 100% 100%;
+	}
+
+	::v-deep .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
+		background: rgba(122, 29, 255, 0.25);
+		border-color: rgba(198, 107, 255, 0.9);
+		box-shadow: 0 0 10px rgba(198, 107, 255, 0.35);
+	}
+
+	::v-deep .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
+		background: transparent;
+		content: "";
+		left: -1.3rem;
+		top: 0.2rem;
+		width: 1rem;
+		height: 1rem;
+		opacity: 1;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='2' y='8' width='2' height='2' fill='%23c66bff'/%3E%3Crect x='4' y='10' width='2' height='2' fill='%23c66bff'/%3E%3Crect x='6' y='8' width='2' height='2' fill='%23c66bff'/%3E%3Crect x='8' y='6' width='2' height='2' fill='%23c66bff'/%3E%3Crect x='10' y='4' width='2' height='2' fill='%23c66bff'/%3E%3C/svg%3E");
+	}
+</style>

frontend/src/views/Settings.vue

@@ -0,0 +1,63 @@
+<template>
+	<b-modal id="settingsModal" title="Settings" centered scrollable ok-only>
+		<b-form-group
+				label-cols-sm="4"
+				label-cols-lg="3"
+				description="The number of bytes to display in the binary representation of the packet"
+				label="HEX block width"
+				label-for="settings-hexdumpBlockSize">
+			<b-form-input type="number" id="settings-hexdumpBlockSize" v-model.number="hexdumpBlockSize"/>
+		</b-form-group>
+		<b-form-group
+				label-cols-sm="4"
+				label-cols-lg="3"
+				description="The number system used in line numbers of a binary representation of a packet"
+				label="Line numbering"
+				label-for="settings-hexdumpLineNumberBase">
+			<b-form-select id="settings-hexdumpLineNumberBase" v-model="hexdumpLineNumberBase">
+				<option :value="10" selected>Decimal</option>
+				<option :value="16">Hexadecimal</option>
+			</b-form-select>
+		</b-form-group>
+		<b-form-group
+				label-cols-sm="4"
+				label-cols-lg="3"
+				description="The number of streams to download at a time"
+				label="Page size"
+				label-for="settings-pageSize">
+			<b-form-input type="number" id="settings-pageSize" v-model.number="pageSize"/>
+		</b-form-group>
+	</b-modal>
+</template>
+
+<script>
+	export default {
+		name: 'Settings',
+		computed: {
+			hexdumpBlockSize: {
+				get() {
+					return this.$store.state.hexdumpBlockSize;
+				},
+				set(v) {
+					this.$store.commit('setHexdumpBlockSize', v);
+				},
+			},
+			hexdumpLineNumberBase: {
+				get() {
+					return this.$store.state.hexdumpLineNumberBase;
+				},
+				set(v) {
+					this.$store.commit('setHexdumpLineNumberBase', v);
+				},
+			},
+			pageSize: {
+				get() {
+					return this.$store.state.pageSize;
+				},
+				set(v) {
+					this.$store.commit('setPageSize', v);
+				},
+			},
+		},
+	};
+</script>

frontend/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	lintOnSave: false,
+};

src/main/java/ru/serega6531/packmate/configuration/ApplicationConfiguration.java

@@ -5,19 +5,19 @@ import org.modelmapper.ModelMapper;
 import org.modelmapper.TypeMap;
 import org.pcap4j.core.PcapNativeException;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.beans.factory.annotation.Value;
+import org.springframework.boot.context.properties.ConfigurationPropertiesScan;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.scheduling.annotation.EnableAsync;
 import org.springframework.scheduling.annotation.EnableScheduling;
 import ru.serega6531.packmate.model.Pattern;
 import ru.serega6531.packmate.model.Stream;
-import ru.serega6531.packmate.model.enums.CaptureMode;
 import ru.serega6531.packmate.model.pojo.StreamDto;
 import ru.serega6531.packmate.pcap.FilePcapWorker;
 import ru.serega6531.packmate.pcap.LivePcapWorker;
 import ru.serega6531.packmate.pcap.NoOpPcapWorker;
 import ru.serega6531.packmate.pcap.PcapWorker;
+import ru.serega6531.packmate.properties.PackmateProperties;
 import ru.serega6531.packmate.service.ServicesService;
 import ru.serega6531.packmate.service.StreamService;
 import ru.serega6531.packmate.service.SubscriptionService;
@@ -29,6 +29,7 @@ import java.util.stream.Collectors;
 @Configuration
 @EnableScheduling
 @EnableAsync
+@ConfigurationPropertiesScan("ru.serega6531.packmate.properties")
 public class ApplicationConfiguration {
 
     @Bean(destroyMethod = "stop")
@@ -36,14 +37,12 @@ public class ApplicationConfiguration {
     public PcapWorker pcapWorker(ServicesService servicesService,
                                  StreamService streamService,
                                  SubscriptionService subscriptionService,
-                                 @Value("${local-ip}") String localIpString,
+                                 PackmateProperties properties
-                                 @Value("${interface-name}") String interfaceName,
+    ) throws PcapNativeException, UnknownHostException {
-                                 @Value("${pcap-file}") String filename,
+        return switch (properties.captureMode()) {
-                                 @Value("${capture-mode}") CaptureMode captureMode) throws PcapNativeException, UnknownHostException {
+            case LIVE -> new LivePcapWorker(servicesService, streamService, properties.localIp(), properties.interfaceName());
-        return switch (captureMode) {
-            case LIVE -> new LivePcapWorker(servicesService, streamService, localIpString, interfaceName);
             case FILE ->
-                    new FilePcapWorker(servicesService, streamService, subscriptionService, localIpString, filename);
+                    new FilePcapWorker(servicesService, streamService, subscriptionService, properties.localIp(), properties.pcapFile());
             case VIEW -> new NoOpPcapWorker();
         };
     }

src/main/java/ru/serega6531/packmate/configuration/SecurityConfiguration.java

@@ -1,58 +1,74 @@
 package ru.serega6531.packmate.configuration;
 
 import lombok.extern.slf4j.Slf4j;
-import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.context.event.EventListener;
 import org.springframework.security.authentication.event.AuthenticationFailureBadCredentialsEvent;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.http.SessionCreationPolicy;
 import org.springframework.security.core.userdetails.User;
 import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.security.provisioning.InMemoryUserDetailsManager;
 import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.security.web.authentication.www.BasicAuthenticationFilter;
+import ru.serega6531.packmate.properties.PackmateProperties;
+import ru.serega6531.packmate.security.FakeAdminAuthFilter;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Optional;
 
 @Configuration
 @EnableWebSecurity
 @Slf4j
 public class SecurityConfiguration {
 
-    @Value("${account-login}")
-    private String login;
-
-    @Value("${account-password}")
-    private String password;
-
     @Bean
-    public InMemoryUserDetailsManager userDetailsService(PasswordEncoder passwordEncoder) {
+    public InMemoryUserDetailsManager userDetailsService(PackmateProperties properties, PasswordEncoder passwordEncoder) {
-        UserDetails user = User.builder()
+        List<UserDetails> users = new ArrayList<>();
-                .username(login)
-                .password(passwordEncoder.encode(password))
-                .roles("USER")
-                .build();
 
-        return new InMemoryUserDetailsManager(user);
+        users.add(User.builder()
+                .username(properties.web().accountLogin())
+                .password(passwordEncoder.encode(properties.web().accountPassword()))
+                .roles("USER")
+                .build());
+
+        Optional.ofNullable(properties.web().fakeAdmin())
+                .filter(PackmateProperties.FakeAdminProperties::enabled)
+                .ifPresent(fakeAdmin -> users.add(User.builder()
+                        .username("admin")
+                        .password(passwordEncoder.encode("admin"))
+                        .roles("FAKE")
+                        .build()));
+
+        return new InMemoryUserDetailsManager(users);
     }
 
     @Bean
-    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
+    public SecurityFilterChain filterChain(HttpSecurity http, FakeAdminAuthFilter fakeAdminAuthFilter) throws Exception {
         return http.csrf()
                 .disable()
                 .authorizeHttpRequests((auth) ->
-                        auth.requestMatchers("/site.webmanifest")
+                        auth.requestMatchers("/site.webmanifest", "/fake-admin/**", "/fake/**", "/api/fake/**")
                                 .permitAll()
+                                .requestMatchers("/api/**", "/ws/**")
+                                .hasRole("USER")
                                 .anyRequest()
                                 .authenticated()
                 )
+                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
+                .and()
                 .httpBasic()
                 .and()
                 .headers()
                 .frameOptions()
                 .sameOrigin()
                 .and()
+                .addFilterAfter(fakeAdminAuthFilter, BasicAuthenticationFilter.class)
                 .build();
     }
 

src/main/java/ru/serega6531/packmate/controller/FakeAdminController.java

@@ -0,0 +1,27 @@
+package ru.serega6531.packmate.controller;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import ru.serega6531.packmate.security.FakeAdminResponder;
+
+@RestController
+@RequestMapping("/fake-admin")
+@RequiredArgsConstructor
+public class FakeAdminController {
+
+    private final FakeAdminResponder responder;
+
+    @GetMapping(value = "/fun", produces = MediaType.TEXT_HTML_VALUE)
+    public ResponseEntity<String> fun() {
+        return ResponseEntity.ok(responder.funPageHtml());
+    }
+
+    @GetMapping(value = "/packets", produces = MediaType.TEXT_HTML_VALUE)
+    public ResponseEntity<String> fakePackets() {
+        return ResponseEntity.ok(responder.fakePacketsHtml());
+    }
+}

src/main/java/ru/serega6531/packmate/controller/FakeFacadeController.java

@@ -0,0 +1,23 @@
+package ru.serega6531.packmate.controller;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import ru.serega6531.packmate.model.pojo.FakeServiceDto;
+import ru.serega6531.packmate.service.ServicesService;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/fake/")
+@RequiredArgsConstructor
+public class FakeFacadeController {
+
+    private final ServicesService servicesService;
+
+    @GetMapping("services")
+    public List<FakeServiceDto> getServices() {
+        return servicesService.findAllForFakeFacade();
+    }
+}

src/main/java/ru/serega6531/packmate/controller/PacketController.java

@@ -1,14 +1,16 @@
 package ru.serega6531.packmate.controller;
 
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.*;
+import org.springframework.web.bind.annotation.PathVariable;
-import ru.serega6531.packmate.model.Packet;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
 import ru.serega6531.packmate.model.pojo.PacketDto;
 import ru.serega6531.packmate.model.pojo.PacketPagination;
 import ru.serega6531.packmate.service.StreamService;
 
 import java.util.List;
-import java.util.stream.Collectors;
 
 @RestController
 @RequestMapping("/api/packet/")
@@ -23,10 +25,7 @@ public class PacketController {
 
     @PostMapping("/{streamId}")
     public List<PacketDto> getPacketsForStream(@PathVariable long streamId, @RequestBody PacketPagination pagination) {
-        List<Packet> packets = streamService.getPackets(streamId, pagination.getStartingFrom(), pagination.getPageSize());
+        return streamService.getPackets(streamId, pagination.getStartingFrom(), pagination.getPageSize());
-        return packets.stream()
-                .map(streamService::packetToDto)
-                .collect(Collectors.toList());
     }
 
 }

src/main/java/ru/serega6531/packmate/controller/PatternController.java

@@ -9,8 +9,9 @@ import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
-import ru.serega6531.packmate.model.Pattern;
+import ru.serega6531.packmate.model.pojo.PatternCreateDto;
 import ru.serega6531.packmate.model.pojo.PatternDto;
+import ru.serega6531.packmate.model.pojo.PatternUpdateDto;
 import ru.serega6531.packmate.service.PatternService;
 
 import java.util.List;
@@ -53,11 +54,13 @@ public class PatternController {
     }
 
     @PostMapping
-    public PatternDto addPattern(@RequestBody PatternDto dto) {
+    public PatternDto addPattern(@RequestBody PatternCreateDto dto) {
-        dto.setEnabled(true);
+        return service.create(dto);
-        Pattern pattern = service.fromDto(dto);
+    }
-        Pattern saved = service.save(pattern);
+
-        return service.toDto(saved);
+    @PostMapping("/{id}")
+    public PatternDto updatePattern(@PathVariable int id, @RequestBody PatternUpdateDto dto) {
+        return service.update(id, dto);
     }
 
 }

src/main/java/ru/serega6531/packmate/controller/ServiceController.java

@@ -8,8 +8,9 @@ import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
-import ru.serega6531.packmate.model.CtfService;
+import ru.serega6531.packmate.model.pojo.ServiceCreateDto;
 import ru.serega6531.packmate.model.pojo.ServiceDto;
+import ru.serega6531.packmate.model.pojo.ServiceUpdateDto;
 import ru.serega6531.packmate.service.ServicesService;
 
 import java.util.List;
@@ -27,9 +28,7 @@ public class ServiceController {
 
     @GetMapping
     public List<ServiceDto> getServices() {
-        return service.findAll().stream()
+        return service.findAll();
-                .map(service::toDto)
-                .toList();
     }
 
     @DeleteMapping("/{port}")
@@ -38,9 +37,13 @@ public class ServiceController {
     }
 
     @PostMapping
-    public CtfService addService(@RequestBody ServiceDto dto) {
+    public ServiceDto addService(@RequestBody ServiceCreateDto dto) {
-        CtfService newService = this.service.fromDto(dto);
+        return this.service.create(dto);
-        return this.service.save(newService);
+    }
+
+    @PostMapping("/{port}")
+    public ServiceDto updateService(@PathVariable int port, @RequestBody ServiceUpdateDto dto) {
+        return this.service.update(port, dto);
     }
 
 }

src/main/java/ru/serega6531/packmate/controller/StreamController.java

@@ -26,16 +26,12 @@ public class StreamController {
 
     @PostMapping("/all")
     public List<StreamDto> getStreams(@RequestBody StreamPagination pagination) {
-        return service.findAll(pagination, Optional.empty(), pagination.isFavorites()).stream()
+        return service.findAll(pagination, Optional.empty(), pagination.isFavorites());
-                .map(service::streamToDto)
-                .toList();
     }
 
     @PostMapping("/{port}")
     public List<StreamDto> getStreams(@PathVariable int port, @RequestBody StreamPagination pagination) {
-        return service.findAll(pagination, Optional.of(port), pagination.isFavorites()).stream()
+        return service.findAll(pagination, Optional.of(port), pagination.isFavorites());
-                .map(service::streamToDto)
-                .toList();
     }
 
     @PostMapping("/{id}/favorite")

src/main/java/ru/serega6531/packmate/model/CtfService.java

@@ -25,9 +25,7 @@ public class CtfService {
 
     private boolean decryptTls;
 
-    private boolean processChunkedEncoding;
+    private boolean http;
-
-    private boolean ungzipHttp;
 
     private boolean urldecodeHttpRequests;
 

src/main/java/ru/serega6531/packmate/model/Packet.java

@@ -24,7 +24,7 @@ import java.util.Set;
         }
 )
 @AllArgsConstructor
-@Builder
+@Builder(toBuilder = true)
 @Table(indexes = { @Index(name = "stream_id_index", columnList = "stream_id") })
 public class Packet {
 
@@ -49,11 +49,13 @@ public class Packet {
 
     private boolean incoming; // true если от клиента к серверу, иначе false
 
-    private boolean ungzipped;
+    private boolean httpProcessed = false;
 
-    private boolean webSocketParsed;
+    private boolean webSocketParsed = false;
 
-    private boolean tlsDecrypted;
+    private boolean tlsDecrypted = false;
+
+    private boolean hasHttpBody = false;
 
     @Column(nullable = false)
     private byte[] content;

src/main/java/ru/serega6531/packmate/model/Stream.java

@@ -53,7 +53,7 @@ public class Stream {
 
     private long endTimestamp;
 
-    @ManyToMany(fetch = FetchType.EAGER)
+    @ManyToMany
     @JoinTable(
             name = "stream_found_patterns",
             joinColumns = @JoinColumn(name = "stream_id"),
@@ -70,6 +70,12 @@ public class Stream {
     @Column(columnDefinition = "char(3)")
     private String userAgentHash;
 
+    @Column(name = "size_bytes", nullable = false)
+    private Integer sizeBytes;
+
+    @Column(name = "packets_count", nullable = false)
+    private Integer packetsCount;
+
     @Override
     public boolean equals(Object o) {
         if (this == o) return true;

src/main/java/ru/serega6531/packmate/model/enums/FakeAdminMode.java

@@ -0,0 +1,6 @@
+package ru.serega6531.packmate.model.enums;
+
+public enum FakeAdminMode {
+    FUN,
+    FAKE_PACKETS
+}

src/main/java/ru/serega6531/packmate/model/pojo/FakeServiceDto.java

@@ -0,0 +1,12 @@
+package ru.serega6531.packmate.model.pojo;
+
+import lombok.Builder;
+import lombok.Value;
+
+@Value
+@Builder
+public class FakeServiceDto {
+    int port;
+    String name;
+    String packetKind;
+}

src/main/java/ru/serega6531/packmate/model/pojo/PacketDto.java

@@ -14,6 +14,7 @@ public class PacketDto {
     private boolean ungzipped;
     private boolean webSocketParsed;
     private boolean tlsDecrypted;
+    private boolean hasHttpBody;
     private byte[] content;
 
 }

src/main/java/ru/serega6531/packmate/model/pojo/PatternCreateDto.java

@@ -0,0 +1,19 @@
+package ru.serega6531.packmate.model.pojo;
+
+import lombok.Data;
+import ru.serega6531.packmate.model.enums.PatternActionType;
+import ru.serega6531.packmate.model.enums.PatternDirectionType;
+import ru.serega6531.packmate.model.enums.PatternSearchType;
+
+@Data
+public class PatternCreateDto {
+
+    private String name;
+    private String value;
+    private String color;
+    private PatternSearchType searchType;
+    private PatternDirectionType directionType;
+    private PatternActionType actionType;
+    private Integer serviceId;
+
+}

src/main/java/ru/serega6531/packmate/model/pojo/PatternUpdateDto.java

@@ -0,0 +1,11 @@
+package ru.serega6531.packmate.model.pojo;
+
+import lombok.Data;
+
+@Data
+public class PatternUpdateDto {
+
+    private String name;
+    private String color;
+
+}

src/main/java/ru/serega6531/packmate/model/pojo/ServiceCreateDto.java

@@ -0,0 +1,16 @@
+package ru.serega6531.packmate.model.pojo;
+
+import lombok.Data;
+
+@Data
+public class ServiceCreateDto {
+
+    private int port;
+    private String name;
+    private boolean decryptTls;
+    private boolean http;
+    private boolean urldecodeHttpRequests;
+    private boolean mergeAdjacentPackets;
+    private boolean parseWebSockets;
+
+}

src/main/java/ru/serega6531/packmate/model/pojo/ServiceDto.java

@@ -8,8 +8,7 @@ public class ServiceDto {
     private int port;
     private String name;
     private boolean decryptTls;
-    private boolean processChunkedEncoding;
+    private boolean http;
-    private boolean ungzipHttp;
     private boolean urldecodeHttpRequests;
     private boolean mergeAdjacentPackets;
     private boolean parseWebSockets;

src/main/java/ru/serega6531/packmate/model/pojo/ServiceUpdateDto.java

@@ -0,0 +1,16 @@
+package ru.serega6531.packmate.model.pojo;
+
+import lombok.Data;
+
+@Data
+public class ServiceUpdateDto {
+
+    private int port;
+    private String name;
+    private boolean decryptTls;
+    private boolean http;
+    private boolean urldecodeHttpRequests;
+    private boolean mergeAdjacentPackets;
+    private boolean parseWebSockets;
+
+}

src/main/java/ru/serega6531/packmate/model/pojo/StreamDto.java

@@ -17,5 +17,7 @@ public class StreamDto {
     private boolean favorite;
     private int ttl;
     private String userAgentHash;
+    private int sizeBytes;
+    private int packetsCount;
 
 }

src/main/java/ru/serega6531/packmate/pcap/AbstractPcapWorker.java

@@ -52,11 +52,11 @@ public abstract class AbstractPcapWorker implements PcapWorker, PacketListener {
 
     protected AbstractPcapWorker(ServicesService servicesService,
                               StreamService streamService,
-                              String localIpString) throws UnknownHostException {
+                              InetAddress localIp) throws UnknownHostException {
         this.servicesService = servicesService;
         this.streamService = streamService;
 
-        this.localIp = InetAddress.getByName(localIpString);
+        this.localIp = localIp;
 
         BasicThreadFactory factory = new BasicThreadFactory.Builder()
                 .namingPattern("pcap-loop").build();

src/main/java/ru/serega6531/packmate/pcap/FilePcapWorker.java

@@ -16,27 +16,27 @@ import ru.serega6531.packmate.service.SubscriptionService;
 
 import java.io.EOFException;
 import java.io.File;
+import java.net.InetAddress;
 import java.net.UnknownHostException;
 
 @Slf4j
 public class FilePcapWorker extends AbstractPcapWorker {
 
+    private final File directory = new File("pcaps");
+
     private final SubscriptionService subscriptionService;
     private final File file;
 
     public FilePcapWorker(ServicesService servicesService,
                           StreamService streamService,
                           SubscriptionService subscriptionService,
-                          String localIpString,
+                          InetAddress localIp,
                           String filename) throws UnknownHostException {
-        super(servicesService, streamService, localIpString);
+        super(servicesService, streamService, localIp);
         this.subscriptionService = subscriptionService;
 
-        File directory = new File("pcaps");
         file = new File(directory, filename);
-        if (!file.exists()) {
+        validateFileExists();
-            throw new PcapFileNotFoundException(file, directory);
-        }
 
         processorExecutorService = new InlineExecutorService();
     }
@@ -86,4 +86,10 @@ public class FilePcapWorker extends AbstractPcapWorker {
     public String getExecutorState() {
         return "inline";
     }
+
+    private void validateFileExists() {
+        if (!file.exists()) {
+            throw new PcapFileNotFoundException(file, directory);
+        }
+    }
 }

src/main/java/ru/serega6531/packmate/pcap/LivePcapWorker.java

@@ -10,6 +10,7 @@ import ru.serega6531.packmate.exception.PcapInterfaceNotFoundException;
 import ru.serega6531.packmate.service.ServicesService;
 import ru.serega6531.packmate.service.StreamService;
 
+import java.net.InetAddress;
 import java.net.UnknownHostException;
 import java.util.List;
 import java.util.concurrent.LinkedBlockingQueue;
@@ -23,9 +24,9 @@ public class LivePcapWorker extends AbstractPcapWorker {
 
     public LivePcapWorker(ServicesService servicesService,
                           StreamService streamService,
-                          String localIpString,
+                          InetAddress localIp,
                           String interfaceName) throws PcapNativeException, UnknownHostException {
-        super(servicesService, streamService, localIpString);
+        super(servicesService, streamService, localIp);
         device = Pcaps.getDevByName(interfaceName);
 
         if (device == null) {

src/main/java/ru/serega6531/packmate/properties/PackmateProperties.java

@@ -0,0 +1,45 @@
+package ru.serega6531.packmate.properties;
+
+
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import ru.serega6531.packmate.model.enums.CaptureMode;
+import ru.serega6531.packmate.model.enums.FakeAdminMode;
+
+import java.net.InetAddress;
+
+@ConfigurationProperties("packmate")
+public record PackmateProperties(
+    CaptureMode captureMode,
+    String interfaceName,
+    String pcapFile,
+    InetAddress localIp,
+    WebProperties web,
+    TimeoutProperties timeout,
+    CleanupProperties cleanup,
+    boolean ignoreEmptyPackets
+) {
+
+    public record WebProperties(
+            String accountLogin,
+            String accountPassword,
+            FakeAdminProperties fakeAdmin
+    ) {}
+
+    public record FakeAdminProperties(
+            boolean enabled,
+            FakeAdminMode mode
+    ) {}
+
+    public record TimeoutProperties(
+            int udpStreamTimeout,
+            int tcpStreamTimeout,
+            int checkInterval
+    ){}
+
+    public record CleanupProperties(
+            boolean enabled,
+            int threshold,
+            int interval
+    ){}
+
+}

src/main/java/ru/serega6531/packmate/security/FakeAdminAuthFilter.java

@@ -0,0 +1,77 @@
+package ru.serega6531.packmate.security;
+
+import jakarta.servlet.FilterChain;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.http.HttpHeaders;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.stereotype.Component;
+import org.springframework.web.filter.OncePerRequestFilter;
+import ru.serega6531.packmate.model.enums.FakeAdminMode;
+import ru.serega6531.packmate.properties.PackmateProperties;
+
+import java.io.IOException;
+import java.util.Optional;
+
+@Slf4j
+@RequiredArgsConstructor
+@Component
+public class FakeAdminAuthFilter extends OncePerRequestFilter {
+
+    private final PackmateProperties properties;
+
+    @Override
+    protected boolean shouldNotFilter(HttpServletRequest request) {
+        if (!isFakeEnabled()) {
+            return true;
+        }
+
+        String path = request.getRequestURI();
+        return path.startsWith("/fake-admin")
+                || path.startsWith("/api/fake")
+                || path.startsWith("/fake/")
+                || path.equals("/favicon.ico");
+    }
+
+    @Override
+    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
+        if (!isFakeEnabled()) {
+            filterChain.doFilter(request, response);
+            return;
+        }
+
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+        boolean isFakeAdmin = authentication != null && authentication.isAuthenticated()
+                && authentication.getAuthorities().stream().anyMatch(a -> a.getAuthority().equals("ROLE_FAKE"));
+
+        if (isFakeAdmin) {
+            FakeAdminMode mode = Optional.ofNullable(properties.web().fakeAdmin())
+                    .map(PackmateProperties.FakeAdminProperties::mode)
+                    .orElse(FakeAdminMode.FUN);
+            String target = "/fake-admin/" + resolvePath(mode);
+            log.info("Redirecting fake admin to {}", target);
+            response.setStatus(HttpServletResponse.SC_TEMPORARY_REDIRECT);
+            response.setHeader(HttpHeaders.LOCATION, target);
+            return;
+        }
+
+        filterChain.doFilter(request, response);
+    }
+
+    private boolean isFakeEnabled() {
+        return Optional.ofNullable(properties.web().fakeAdmin())
+                .map(PackmateProperties.FakeAdminProperties::enabled)
+                .orElse(false);
+    }
+
+    private String resolvePath(FakeAdminMode mode) {
+        return switch (mode) {
+            case FAKE_PACKETS -> "packets";
+            case FUN -> "fun";
+        };
+    }
+}

src/main/java/ru/serega6531/packmate/security/FakeAdminResponder.java

@@ -0,0 +1,662 @@
+package ru.serega6531.packmate.security;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
+import org.springframework.stereotype.Component;
+import org.springframework.util.StreamUtils;
+
+import java.io.IOException;
+import java.net.URLConnection;
+import java.util.Arrays;
+import java.util.Base64;
+import java.util.Collections;
+import java.util.List;
+import java.util.Objects;
+import java.nio.charset.StandardCharsets;
+
+@Slf4j
+@Component
+public class FakeAdminResponder {
+
+    private final ObjectMapper mapper = new ObjectMapper();
+    private final List<String> encodedImages;
+
+    public FakeAdminResponder() {
+        this.encodedImages = loadImages();
+    }
+
+    private List<String> loadImages() {
+        try {
+            Resource[] resources = new PathMatchingResourcePatternResolver()
+                    .getResources("classpath:/static/fake/images/*");
+
+            List<String> images = Arrays.stream(resources)
+                    .map(resource -> {
+                        try {
+                            String contentType = URLConnection.guessContentTypeFromName(resource.getFilename());
+                            if (contentType == null) {
+                                contentType = "image/jpeg";
+                            }
+                            byte[] raw = StreamUtils.copyToByteArray(resource.getInputStream());
+                            return "data:%s;base64,%s".formatted(
+                                    contentType,
+                                    Base64.getEncoder().encodeToString(raw));
+                        } catch (IOException e) {
+                            log.warn("Failed to load fake admin image {}", resource.getFilename(), e);
+                            return null;
+                        }
+                    })
+                    .filter(Objects::nonNull)
+                    .toList();
+
+            if (images.isEmpty()) {
+                log.warn("No images found for fake admin fun mode");
+            }
+
+            return images;
+        } catch (IOException e) {
+            log.warn("Failed to load fake admin images", e);
+            return Collections.emptyList();
+        }
+    }
+
+    public String funPageHtml() {
+        String phrasesJson = toJson(getFunPhrases());
+        String imagesJson = toJson(encodedImages);
+        String phrasesB64 = Base64.getEncoder().encodeToString(phrasesJson.getBytes(StandardCharsets.UTF_8));
+        String imagesB64 = Base64.getEncoder().encodeToString(imagesJson.getBytes(StandardCharsets.UTF_8));
+        String template = """
+                <!doctype html>
+                <html lang="en">
+                <head>
+                    <meta charset="UTF-8">
+                    <title>0xb00b5 team Packmate // fake funwall</title>
+                    <style>
+                        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@500&display=swap');
+                        :root {
+                            --bg: #050512;
+                            --accent: #59f3ff;
+                            --accent-2: #ff5fd2;
+                            --glass: rgba(9, 19, 45, 0.75);
+                            --grid: rgba(89, 243, 255, 0.25);
+                        }
+                        * { box-sizing: border-box; }
+                        body {
+                            margin: 0;
+                            padding: 0;
+                            min-height: 100vh;
+                            background: radial-gradient(circle at 20% 20%, rgba(255, 95, 210, 0.18), transparent 25%), radial-gradient(circle at 80% 0%, rgba(89, 243, 255, 0.2), transparent 30%), linear-gradient(135deg, #04040d 0%, #0a1024 45%, #050512 100%);
+                            color: #e9f7ff;
+                            font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            padding: 40px 18px 60px;
+                            overflow: hidden;
+                        }
+                        .grid-bg {
+                            position: fixed;
+                            inset: 0;
+                            background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+                            background-size: 80px 80px;
+                            mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,.8), transparent 75%);
+                            opacity: 0.5;
+                            z-index: 0;
+                        }
+                        .shell {
+                            position: relative;
+                            z-index: 1;
+                            width: min(90vw, 1180px);
+                            background: var(--glass);
+                            border: 1px solid rgba(89, 243, 255, 0.4);
+                            box-shadow: 0 0 40px rgba(89, 243, 255, 0.25), 0 0 24px rgba(255, 95, 210, 0.2);
+                            border-radius: 18px;
+                            padding: 32px;
+                            backdrop-filter: blur(10px);
+                        }
+                        .shell::after {
+                            content: '';
+                            position: absolute;
+                            inset: 12px;
+                            border: 1px dashed rgba(255, 95, 210, 0.25);
+                            border-radius: 14px;
+                            pointer-events: none;
+                        }
+                        h1 {
+                            margin: 0 0 20px;
+                            font-size: 18px;
+                            letter-spacing: 1.5px;
+                            text-shadow: 0 0 8px rgba(89, 243, 255, 0.8);
+                        }
+                        .badge {
+                            display: inline-block;
+                            padding: 8px 14px;
+                            border-radius: 10px;
+                            border: 1px solid rgba(255, 95, 210, 0.35);
+                            color: #ffcdf4;
+                            box-shadow: inset 0 0 10px rgba(255, 95, 210, 0.35), 0 0 10px rgba(255, 95, 210, 0.35);
+                            margin-bottom: 18px;
+                        }
+                        canvas {
+                            width: 100%;
+                            height: 420px;
+                            border-radius: 14px;
+                            border: 1px solid rgba(89, 243, 255, 0.35);
+                            background: radial-gradient(circle at 30% 30%, rgba(255, 95, 210, 0.08), transparent 40%), #0b122a;
+                            box-shadow: inset 0 0 30px rgba(0,0,0,0.35), 0 0 18px rgba(89, 243, 255, 0.12);
+                        }
+                        .typed {
+                            margin-top: 22px;
+                            font-size: 14px;
+                            min-height: 24px;
+                            letter-spacing: 0.8px;
+                            color: #aaf6ff;
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
+                        }
+                        #typed-text {
+                            overflow: hidden;
+                            white-space: nowrap;
+                        }
+                        .cursor {
+                            display: inline-block;
+                            width: 12px;
+                            background: #aaf6ff;
+                            animation: blink 0.8s infinite;
+                            height: 14px;
+                        }
+                        @keyframes blink {
+                            0%, 50% { opacity: 1; }
+                            51%, 100% { opacity: 0.2; }
+                        }
+                        .footer-note {
+                            margin-top: 18px;
+                            font-size: 11px;
+                            color: rgba(233, 247, 255, 0.65);
+                            letter-spacing: 1px;
+                        }
+                    </style>
+                </head>
+                <body>
+                <div class="grid-bg"></div>
+                    <div class="shell">
+                    <h1>0xb00b5 team Packmate</h1>
+                    <div class="badge">// @danosito</div>
+                        <canvas id="snap-canvas"></canvas>
+                        <audio id="fun-music" src="/fake/audio/Archive.Clue.mp3" preload="auto" loop></audio>
+                        <div class="typed">
+                            <span id="typed-text"></span><span class="cursor"></span>
+                        </div>
+                    <div class="footer-note">Hmmm where are the packets? IDK</div>
+                    </div>
+                    <script>
+                    const phrases = JSON.parse(atob('__PHRASES_B64__'));
+                    const images = JSON.parse(atob('__IMAGES_B64__'));
+                    const canvas = document.getElementById('snap-canvas');
+                    const ctx = canvas.getContext('2d');
+                    const textEl = document.getElementById('typed-text');
+                    const audioEl = document.getElementById('fun-music');
+
+                    const pick = (list) => list[Math.floor(Math.random() * list.length)];
+                    const specialLink = {
+                        text: 'Your special guide to get flag!',
+                        href: 'https://youtu.be/rrw-Pv3rc0E?si=-ZQmhZVxh4HF6luD'
+                    };
+
+                    if (audioEl) {
+                        const ensurePlaying = () => {
+                            if (!audioEl.dataset.started) {
+                                audioEl.dataset.started = '1';
+                                audioEl.volume = 0.4;
+                            }
+                            audioEl.play().catch(() => {});
+                        };
+
+                        ensurePlaying();
+                        setInterval(() => {
+                            if (audioEl.paused) {
+                                audioEl.play().catch(() => {});
+                            }
+                        }, 2500);
+                    }
+
+                    function renderImage() {
+                        const chosen = (images && images.length) ? pick(images) : '';
+                        if (!chosen) {
+                            ctx.fillStyle = '#0b122a';
+                            ctx.fillRect(0, 0, canvas.width, canvas.height);
+                            return;
+                        }
+                        const img = new Image();
+                        img.onload = () => {
+                            const maxW = 960;
+                            const scale = Math.min(maxW / img.width, 1);
+                            const w = img.width * scale;
+                            const h = img.height * scale;
+                            canvas.width = w;
+                            canvas.height = h;
+                            ctx.clearRect(0, 0, w, h);
+                            ctx.drawImage(img, 0, 0, w, h);
+                            setTimeout(() => snapAway(), 5000);
+                        };
+                        img.src = chosen;
+                    }
+
+                    function snapAway() {
+                        let ticks = 0;
+                        const interval = setInterval(() => {
+                            for (let i = 0; i < 48; i++) {
+                                const x = Math.random() * canvas.width;
+                                const y = Math.random() * canvas.height;
+                                const size = 4 + Math.random() * 10;
+                                ctx.clearRect(x, y, size, size);
+                            }
+                            ticks++;
+                            if (ticks > 80) {
+                                clearInterval(interval);
+                                setTimeout(renderImage, 400);
+                            }
+                        }, 28);
+                    }
+
+                    function typewriter() {
+                        const phrase = pick(phrases);
+                        const isSpecial = phrase === specialLink.text;
+                        textEl.textContent = '';
+                        let linkEl = null;
+                        if (isSpecial) {
+                            linkEl = document.createElement('a');
+                            linkEl.href = specialLink.href;
+                            linkEl.target = '_blank';
+                            linkEl.rel = 'noreferrer noopener';
+                            linkEl.style.color = '#aaf6ff';
+                            textEl.appendChild(linkEl);
+                        }
+                        let i = 0;
+                        const typeDelay = phrase.length ? 5000 / phrase.length : 120;
+
+                        const typeInterval = setInterval(() => {
+                            const target = isSpecial ? linkEl : textEl;
+                            target.textContent += phrase.charAt(i);
+                            i++;
+                            if (i >= phrase.length) {
+                                clearInterval(typeInterval);
+                                setTimeout(() => erase(phrase, isSpecial), 3000);
+                            }
+                        }, typeDelay);
+                    }
+
+                    function erase(phrase, isSpecial) {
+                        const eraseDelay = phrase.length ? 2000 / phrase.length : 80;
+                        const eraser = setInterval(() => {
+                            const target = isSpecial ? textEl.querySelector('a') : textEl;
+                            if (!target) {
+                                clearInterval(eraser);
+                                setTimeout(typewriter, 200);
+                                return;
+                            }
+                            target.textContent = target.textContent.slice(0, -1);
+                            if (!target.textContent.length) {
+                                if (isSpecial) {
+                                    target.remove();
+                                }
+                                clearInterval(eraser);
+                                setTimeout(typewriter, 200);
+                            }
+                        }, eraseDelay);
+                    }
+
+                    renderImage();
+                    typewriter();
+                </script>
+                </body>
+                </html>
+                """;
+        return template
+                .replace("__PHRASES_B64__", phrasesB64)
+                .replace("__IMAGES_B64__", imagesB64);
+    }
+
+    public String fakePacketsHtml() {
+        return """
+                <!doctype html>
+                <html lang="en">
+                <head>
+                    <meta charset="UTF-8">
+                    <title>0xb00b5 PM // packets</title>
+                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">
+                    <style>
+                        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;600&display=swap');
+                        :root {
+                            --bg: #05030a;
+                            --bg-2: #0a0a18;
+                            --panel: rgba(9, 7, 18, 0.9);
+                            --panel-strong: rgba(14, 10, 24, 0.95);
+                            --accent: #c66bff;
+                            --accent-2: #7a1dff;
+                            --text: #e6e0ff;
+                            --muted: #9b90c8;
+                            --mono: 'JetBrains Mono', 'Ubuntu Mono', monospace;
+                            --pixel: 'Press Start 2P', 'JetBrains Mono', monospace;
+                        }
+                        * { box-sizing: border-box; scrollbar-width: none; }
+                        *::-webkit-scrollbar { width: 0; height: 0; }
+                        body {
+                            margin: 0;
+                            min-height: 100vh;
+                            background:
+                                    radial-gradient(circle at 18% 24%, rgba(198, 107, 255, 0.18), transparent 25%),
+                                    radial-gradient(circle at 82% 12%, rgba(122, 29, 255, 0.12), transparent 25%),
+                                    linear-gradient(135deg, #020107 0%, #0a0820 50%, #03010b 100%);
+                            color: var(--text);
+                            font-family: var(--pixel);
+                            letter-spacing: 0.6px;
+                            overflow: hidden;
+                        }
+                        .bg-lines {
+                            position: fixed; inset: 0; pointer-events: none; z-index: 0;
+                            background-image: linear-gradient(rgba(122, 29, 255, 0.1) 1px, transparent 1px),
+                            linear-gradient(90deg, rgba(198, 107, 255, 0.12) 1px, transparent 1px);
+                            background-size: 120px 120px;
+                        }
+                        .app-shell {
+                            position: relative;
+                            z-index: 1;
+                        }
+                        .navbar {
+                            background: var(--panel-strong);
+                            border-bottom: 1px solid rgba(122, 29, 255, 0.45);
+                            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55), 0 0 28px rgba(122, 29, 255, 0.35);
+                            padding: 12px 18px;
+                        }
+                        .brand {
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
+                            color: var(--accent);
+                        }
+                        .brand .dot {
+                            width: 12px;
+                            height: 12px;
+                            border-radius: 50%;
+                            background: linear-gradient(135deg, var(--accent), var(--accent-2));
+                            box-shadow: 0 0 10px rgba(122, 29, 255, 0.65);
+                        }
+                        .metrics {
+                            display: flex;
+                            gap: 10px;
+                            align-items: center;
+                            margin-left: 12px;
+                            flex-wrap: wrap;
+                        }
+                        .chip {
+                            background: rgba(122, 29, 255, 0.12);
+                            border: 1px solid rgba(122, 29, 255, 0.28);
+                            color: var(--text);
+                            padding: 8px 10px;
+                            border-radius: 10px;
+                            display: grid;
+                            grid-template-columns: auto auto;
+                            column-gap: 8px;
+                            align-items: center;
+                            font-size: 11px;
+                            box-shadow: 0 0 14px rgba(122, 29, 255, 0.24);
+                        }
+                        .chip .label { color: var(--muted); }
+                        .chip .value { color: var(--accent); }
+                        .patterns-dropdown {
+                            display: inline-flex;
+                            width: 128px;
+                            min-width: 128px;
+                            max-width: 128px;
+                            flex: 0 0 128px;
+                            flex-shrink: 0;
+                            box-sizing: border-box;
+                            margin-left: 14px;
+                        }
+                        .patterns-dropdown > button {
+                            display: inline-flex;
+                            justify-content: center;
+                            align-items: center;
+                            font-family: var(--pixel);
+                            font-size: 9.6px;
+                            letter-spacing: 0.05px;
+                            width: 128px;
+                            min-width: 128px;
+                            max-width: 128px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            white-space: nowrap;
+                        }
+                        .services-nav {
+                            display: flex;
+                            align-items: center;
+                            gap: 4px;
+                            margin-left: 14px;
+                            flex-wrap: wrap;
+                        }
+                        .services-nav .nav-link {
+                            padding: 6px 10px;
+                            border-radius: 10px;
+                            margin: 2px 0;
+                            background: rgba(122, 29, 255, 0.12);
+                            border: 1px solid rgba(122, 29, 255, 0.28);
+                            color: var(--text);
+                            font-size: 10px;
+                            letter-spacing: 0.3px;
+                            white-space: nowrap;
+                        }
+                        .layout {
+                            display: grid;
+                            grid-template-columns: 320px 1fr;
+                            gap: 0;
+                            min-height: calc(100vh - 72px);
+                        }
+                        .sidebar {
+                            background: var(--panel);
+                            border-right: 1px solid rgba(122, 29, 255, 0.25);
+                            box-shadow: inset -10px 0 24px rgba(0, 0, 0, 0.35);
+                            padding: 16px 12px;
+                            overflow-y: auto;
+                        }
+                        .sidebar-title {
+                            font-size: 10px;
+                            text-transform: uppercase;
+                            color: var(--muted);
+                            margin-bottom: 10px;
+                        }
+                        .content {
+                            background: var(--panel);
+                            border-left: 1px solid rgba(122, 29, 255, 0.15);
+                            padding: 18px 22px 26px;
+                            box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45), 0 0 38px rgba(122, 29, 255, 0.18);
+                            position: relative;
+                            min-height: calc(100vh - 120px);
+                        }
+                        .content-header {
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            margin-bottom: 14px;
+                        }
+                        .title {
+                            font-size: 12px;
+                            color: var(--text);
+                        }
+                        .packet-board {
+                            background: rgba(9, 7, 18, 0.9);
+                            border: 1px solid rgba(122, 29, 255, 0.35);
+                            border-radius: 14px;
+                            min-height: calc(100vh - 160px);
+                            padding: 14px;
+                            overflow: hidden;
+                        }
+                        .packet-feed {
+                            font-family: var(--mono);
+                            font-size: 11px;
+                            max-height: calc(100vh - 200px);
+                            overflow-y: auto;
+                            padding-right: 6px;
+                        }
+                        .packet-line {
+                            display: flex;
+                            align-items: baseline;
+                            gap: 10px;
+                            padding: 6px 0;
+                            border-bottom: 1px dashed rgba(122, 29, 255, 0.2);
+                            color: var(--text);
+                        }
+                        .packet-line .pill {
+                            display: inline-block;
+                            padding: 2px 8px;
+                            border-radius: 8px;
+                            background: rgba(122, 29, 255, 0.2);
+                            border: 1px solid rgba(122, 29, 255, 0.35);
+                            font-size: 9px;
+                            letter-spacing: 0.4px;
+                            color: var(--accent);
+                        }
+                        .packet-line .meta {
+                            color: var(--muted);
+                            font-size: 10px;
+                        }
+                        .packet-line .bytes { color: #9ff8ff; }
+                        .empty-slot { background: transparent; border: none; box-shadow: none; }
+                    </style>
+                </head>
+                <body>
+                    <div class="bg-lines"></div>
+                    <div class="app-shell">
+                        <nav class="navbar navbar-dark navbar-expand fixed-top">
+                            <div class="d-flex align-items-center">
+                                <span class="brand">
+                                    <span class="dot"></span>
+                                    0xb00b5 PM
+                                </span>
+                            </div>
+                            <div class="metrics">
+                                <span class="chip"><span class="label">SPM</span><span class="value" id="metric-spm">0</span></span>
+                                <span class="chip"><span class="label">PPS</span><span class="value" id="metric-pps">0</span></span>
+                            </div>
+                            <div class="patterns-dropdown">
+                                <button class="btn btn-dark btn-block" disabled>Patterns</button>
+                            </div>
+                            <div class="services-nav" id="nav-services"></div>
+                            <span class="ml-auto text-monospace text-muted" style="font-size: 10px;">[Selected: none]</span>
+                        </nav>
+                        <div class="layout" style="margin-top: 64px;">
+                            <aside class="sidebar">
+                                <div class="sidebar-title">Packets</div>
+                                <div class="packet-board">
+                                    <div class="packet-feed" id="packet-feed"></div>
+                                </div>
+                            </aside>
+                            <main class="content empty-slot"></main>
+                        </div>
+                    </div>
+                <script>
+                    const navServicesEl = document.getElementById('nav-services');
+                    const feedEl = document.getElementById('packet-feed');
+                    const spmEl = document.getElementById('metric-spm');
+                    const ppsEl = document.getElementById('metric-pps');
+                    let services = [];
+                    let packetId = Math.floor(Math.random() * 5000) + 10;
+
+                    fetch('/api/fake/services')
+                        .then(r => r.json())
+                        .then(data => {
+                            services = data;
+                            renderServices();
+                            startFeed();
+                        })
+                        .catch(() => {
+                            services = [{ name: 'ghost', port: 0, packetKind: 'tcp' }];
+                            renderServices();
+                            startFeed();
+                        });
+
+                    function renderServices() {
+                        navServicesEl.innerHTML = '';
+                        services.forEach((svc) => {
+                            const link = document.createElement('a');
+                            link.className = 'nav-link';
+                            link.href = '#';
+                            link.textContent = `${svc.name} #${svc.port}`;
+                            navServicesEl.appendChild(link);
+                        });
+                    }
+
+                    function spawnPacket() {
+                        if (!services.length) return;
+                        const svc = services[Math.floor(Math.random() * services.length)];
+                        const proto = (svc.packetKind || 'tcp').toUpperCase();
+                        const ts = new Date();
+                        const clock = ts.toTimeString().slice(0, 8);
+                        const bytes = Math.floor(Math.random() * 1800) + 40;
+
+                        const line = document.createElement('div');
+                        line.className = 'packet-line';
+                        line.innerHTML = `
+                            <span class="pill">${proto}</span>
+                            <span class="meta">${clock}</span>
+                            <span class="meta">:${svc.port} ${svc.name}</span>
+                            <span class="bytes">${bytes} bytes</span>
+                            <span class="meta">id #${packetId}</span>
+                        `;
+                        packetId++;
+                        feedEl.prepend(line);
+                        while (feedEl.children.length > 120) {
+                            feedEl.removeChild(feedEl.lastChild);
+                        }
+                        updateMetrics();
+                    }
+
+                    function updateMetrics() {
+                        const total = feedEl.children.length;
+                        spmEl.textContent = Math.min(total, 999);
+                        ppsEl.textContent = Math.floor(total / 2);
+                    }
+
+                    function startFeed() {
+                        setInterval(spawnPacket, 55);
+                    }
+                </script>
+                </body>
+                </html>
+                """;
+    }
+
+    private List<String> getFunPhrases() {
+        return List.of(
+                "Here's the flag. Are you ready? here it goes... Wait, no.",
+                "Wanna see the flag? send yours to @danosito:)",
+                "Hey, why are you here? go pentest our services",
+                "Hmmm i think <script>alert(\"You're stupid\")</script> might work..",
+                "Bip, boop, here was packet but codex ate it",
+                "Our LLM tockens ran out. Maybe you could give us some:)?",
+                ":(){ :|:& };:",
+                "i think creds are admin:admin but i'm not sure...",
+                "Try eternalBlue, i think it would work",
+                "I think i defended this page well enough, here is flag: LLMDELETEDTHEFLAG=",
+                "Go open ida pro and reverse this text",
+                "I would give you our flags for free, but you are a bad person:(",
+                "b00b5 is not a fresh meat:(",
+                "marcus, send your packmate credits pls",
+                "Marcus, fuck off",
+                "Your special guide to get flag!"
+        );
+    }
+
+    private String toJson(List<String> data) {
+        try {
+            return mapper.writeValueAsString(data);
+        } catch (JsonProcessingException e) {
+            log.warn("Failed to convert data to json for fake admin", e);
+            return "[]";
+        }
+    }
+}

src/main/java/ru/serega6531/packmate/service/PatternService.java

@@ -6,13 +6,16 @@ import org.modelmapper.ModelMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.annotation.Lazy;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 import ru.serega6531.packmate.model.CtfService;
 import ru.serega6531.packmate.model.FoundPattern;
 import ru.serega6531.packmate.model.Pattern;
 import ru.serega6531.packmate.model.enums.PatternActionType;
 import ru.serega6531.packmate.model.enums.PatternDirectionType;
 import ru.serega6531.packmate.model.enums.SubscriptionMessageType;
+import ru.serega6531.packmate.model.pojo.PatternCreateDto;
 import ru.serega6531.packmate.model.pojo.PatternDto;
+import ru.serega6531.packmate.model.pojo.PatternUpdateDto;
 import ru.serega6531.packmate.model.pojo.SubscriptionMessage;
 import ru.serega6531.packmate.repository.PatternRepository;
 
@@ -103,15 +106,35 @@ public class PatternService {
         }
     }
 
-    public Pattern save(Pattern pattern) {
+    @Transactional
+    public PatternDto create(PatternCreateDto dto) {
+        Pattern pattern = fromDto(dto);
+
+        pattern.setEnabled(true);
+        pattern.setDeleted(false);
+        pattern.setSearchStartTimestamp(System.currentTimeMillis());
+
+        Pattern saved = save(pattern);
+        return toDto(saved);
+    }
+
+    @Transactional
+    public PatternDto update(int id, PatternUpdateDto dto) {
+        Pattern pattern = repository.findById(id).orElseThrow();
+
+        modelMapper.map(dto, pattern);
+
+        Pattern saved = save(pattern);
+        return toDto(saved);
+    }
+
+    private Pattern save(Pattern pattern) {
         try {
             PatternMatcher.compilePattern(pattern);
         } catch (Exception e) {
             throw new IllegalArgumentException(e.getMessage());
         }
 
-        pattern.setSearchStartTimestamp(System.currentTimeMillis());
-
         final Pattern saved = repository.save(pattern);
         patterns.put(saved.getId(), saved);
 
@@ -136,12 +159,11 @@ public class PatternService {
         }
     }
 
-    public Pattern fromDto(PatternDto dto) {
+    public Pattern fromDto(PatternCreateDto dto) {
         return modelMapper.map(dto, Pattern.class);
     }
 
     public PatternDto toDto(Pattern pattern) {
         return modelMapper.map(pattern, PatternDto.class);
     }
-
 }

src/main/java/ru/serega6531/packmate/service/PcapService.java

@@ -4,8 +4,8 @@ import lombok.extern.slf4j.Slf4j;
 import org.pcap4j.core.PcapNativeException;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
-import ru.serega6531.packmate.model.CtfService;
 import ru.serega6531.packmate.model.enums.SubscriptionMessageType;
+import ru.serega6531.packmate.model.pojo.ServiceDto;
 import ru.serega6531.packmate.model.pojo.SubscriptionMessage;
 import ru.serega6531.packmate.pcap.NoOpPcapWorker;
 import ru.serega6531.packmate.pcap.PcapWorker;
@@ -40,14 +40,14 @@ public class PcapService {
         }
     }
 
-    public void updateFilter(Collection<CtfService> services) {
+    public void updateFilter(Collection<ServiceDto> services) {
         String filter;
 
         if (services.isEmpty()) {
             filter = "tcp or udp";
         } else {
             final String ports = services.stream()
-                    .map(CtfService::getPort)
+                    .map(ServiceDto::getPort)
                     .map(p -> "port " + p)
                     .collect(Collectors.joining(" or "));
 

src/main/java/ru/serega6531/packmate/service/ServicesService.java

@@ -1,21 +1,27 @@
 package ru.serega6531.packmate.service;
 
+import jakarta.annotation.PostConstruct;
 import lombok.extern.slf4j.Slf4j;
 import org.modelmapper.ModelMapper;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Lazy;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import ru.serega6531.packmate.properties.PackmateProperties;
 import ru.serega6531.packmate.model.CtfService;
 import ru.serega6531.packmate.model.enums.SubscriptionMessageType;
+import ru.serega6531.packmate.model.pojo.ServiceCreateDto;
 import ru.serega6531.packmate.model.pojo.ServiceDto;
+import ru.serega6531.packmate.model.pojo.ServiceUpdateDto;
 import ru.serega6531.packmate.model.pojo.SubscriptionMessage;
+import ru.serega6531.packmate.model.pojo.FakeServiceDto;
 import ru.serega6531.packmate.repository.ServiceRepository;
 
-import jakarta.annotation.PostConstruct;
 import java.net.InetAddress;
-import java.net.UnknownHostException;
+import java.util.HashMap;
-import java.util.*;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
 
 @Service
 @Slf4j
@@ -35,12 +41,12 @@ public class ServicesService {
                            SubscriptionService subscriptionService,
                            @Lazy PcapService pcapService,
                            ModelMapper modelMapper,
-                           @Value("${local-ip}") String localIpString) throws UnknownHostException {
+                           PackmateProperties properties) {
         this.repository = repository;
         this.subscriptionService = subscriptionService;
         this.pcapService = pcapService;
         this.modelMapper = modelMapper;
-        this.localIp = InetAddress.getByName(localIpString);
+        this.localIp = properties.localIp();
     }
 
     @PostConstruct
@@ -67,8 +73,22 @@ public class ServicesService {
         return Optional.ofNullable(services.get(port));
     }
 
-    public Collection<CtfService> findAll() {
+    public List<ServiceDto> findAll() {
-        return services.values();
+        return services.values()
+                .stream()
+                .map(this::toDto)
+                .toList();
+    }
+
+    public List<FakeServiceDto> findAllForFakeFacade() {
+        return services.values()
+                .stream()
+                .map(s -> FakeServiceDto.builder()
+                        .port(s.getPort())
+                        .name(s.getName())
+                        .packetKind(s.isHttp() || s.isParseWebSockets() ? "tcp/http" : "tcp")
+                        .build())
+                .toList();
     }
 
     public void deleteByPort(int port) {
@@ -82,9 +102,31 @@ public class ServicesService {
         updateFilter();
     }
 
-    public CtfService save(CtfService service) {
+    @Transactional
-        log.info("Added or edited service '{}' at port {}", service.getName(), service.getPort());
+    public ServiceDto create(ServiceCreateDto dto) {
+        if (repository.existsById(dto.getPort())) {
+            throw new IllegalArgumentException("Service already exists");
+        }
 
+        CtfService service = fromDto(dto);
+
+        log.info("Added service '{}' at port {}", service.getName(), service.getPort());
+
+        return save(service);
+    }
+
+    @Transactional
+    public ServiceDto update(int port, ServiceUpdateDto dto) {
+        CtfService service = repository.findById(port).orElseThrow();
+
+        log.info("Edited service '{}' at port {}", service.getName(), service.getPort());
+
+        modelMapper.map(dto, service);
+        service.setPort(port);
+        return save(service);
+    }
+
+    private ServiceDto save(CtfService service) {
         final CtfService saved = repository.save(service);
         services.put(saved.getPort(), saved);
 
@@ -92,18 +134,18 @@ public class ServicesService {
 
         updateFilter();
 
-        return saved;
+        return toDto(saved);
     }
 
     public void updateFilter() {
         pcapService.updateFilter(findAll());
     }
 
-    public ServiceDto toDto(CtfService service) {
+    private ServiceDto toDto(CtfService service) {
         return modelMapper.map(service, ServiceDto.class);
     }
 
-    public CtfService fromDto(ServiceDto dto) {
+    private CtfService fromDto(ServiceCreateDto dto) {
         return modelMapper.map(dto, CtfService.class);
     }
 

src/main/java/ru/serega6531/packmate/service/StreamService.java

@@ -4,7 +4,6 @@ import lombok.extern.slf4j.Slf4j;
 import org.jetbrains.annotations.Nullable;
 import org.modelmapper.ModelMapper;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.beans.factory.annotation.Value;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.domain.Sort;
@@ -13,6 +12,7 @@ import org.springframework.scheduling.annotation.Async;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
+import ru.serega6531.packmate.properties.PackmateProperties;
 import ru.serega6531.packmate.model.CtfService;
 import ru.serega6531.packmate.model.FoundPattern;
 import ru.serega6531.packmate.model.Packet;
@@ -48,7 +48,6 @@ public class StreamService {
     private final SubscriptionService subscriptionService;
     private final RsaKeysHolder keysHolder;
     private final ModelMapper modelMapper;
-
     private final boolean ignoreEmptyPackets;
 
     private final java.util.regex.Pattern userAgentPattern = java.util.regex.Pattern.compile("User-Agent: (.+)\\r\\n");
@@ -61,7 +60,7 @@ public class StreamService {
                          SubscriptionService subscriptionService,
                          RsaKeysHolder keysHolder,
                          ModelMapper modelMapper,
-                         @Value("${ignore-empty-packets}") boolean ignoreEmptyPackets) {
+                         PackmateProperties properties) {
         this.repository = repository;
         this.patternService = patternService;
         this.servicesService = servicesService;
@@ -69,7 +68,7 @@ public class StreamService {
         this.subscriptionService = subscriptionService;
         this.keysHolder = keysHolder;
         this.modelMapper = modelMapper;
-        this.ignoreEmptyPackets = ignoreEmptyPackets;
+        this.ignoreEmptyPackets = properties.ignoreEmptyPackets();
     }
 
     /**
@@ -102,6 +101,9 @@ public class StreamService {
 
         countingService.countStream(service.getPort(), packets.size());
 
+        int packetsSize = packets.stream().mapToInt(p -> p.getContent().length).sum();
+        int packetsCount = packets.size();
+
         List<Packet> optimizedPackets = new StreamOptimizer(keysHolder, service, packets).optimizeStream();
 
         if (isStreamIgnored(optimizedPackets, service)) {
@@ -123,6 +125,9 @@ public class StreamService {
         String userAgentHash = getUserAgentHash(optimizedPackets);
         stream.setUserAgentHash(userAgentHash);
 
+        stream.setSizeBytes(packetsSize);
+        stream.setPacketsCount(packetsCount);
+
         Set<Pattern> foundPatterns = matchPatterns(optimizedPackets, service);
         stream.setFoundPatterns(foundPatterns);
         stream.setPackets(optimizedPackets);
@@ -251,8 +256,12 @@ public class StreamService {
         return saved;
     }
 
-    public List<Packet> getPackets(long streamId, @Nullable Long startingFrom, int pageSize) {
+    @Transactional
-        return repository.getPackets(streamId, startingFrom, Pageable.ofSize(pageSize));
+    public List<PacketDto> getPackets(long streamId, @Nullable Long startingFrom, int pageSize) {
+        return repository.getPackets(streamId, startingFrom, Pageable.ofSize(pageSize))
+                .stream()
+                .map(this::packetToDto)
+                .toList();
     }
 
     /**
@@ -268,7 +277,8 @@ public class StreamService {
         repository.setFavorite(id, favorite);
     }
 
-    public List<Stream> findAll(StreamPagination pagination, Optional<Integer> service, boolean onlyFavorites) {
+    @Transactional
+    public List<StreamDto> findAll(StreamPagination pagination, Optional<Integer> service, boolean onlyFavorites) {
         PageRequest page = PageRequest.of(0, pagination.getPageSize(), Sort.Direction.DESC, "id");
 
         Specification<Stream> spec = Specification.where(null);
@@ -289,7 +299,11 @@ public class StreamService {
             spec = spec.and(streamPatternsContains(pagination.getPattern()));
         }
 
-        return repository.findAll(spec, page).getContent();
+        return repository.findAll(spec, page)
+                .getContent()
+                .stream()
+                .map(this::streamToDto)
+                .toList();
     }
 
      public List<Stream> findAllBetweenTimestamps(long start, long end) {

src/main/java/ru/serega6531/packmate/service/optimization/HttpChunksProcessor.java

@@ -1,180 +0,0 @@
-package ru.serega6531.packmate.service.optimization;
-
-import com.google.common.primitives.Bytes;
-import lombok.RequiredArgsConstructor;
-import lombok.SneakyThrows;
-import lombok.extern.slf4j.Slf4j;
-import ru.serega6531.packmate.model.Packet;
-import ru.serega6531.packmate.utils.BytesUtils;
-import ru.serega6531.packmate.utils.PacketUtils;
-
-import java.io.ByteArrayOutputStream;
-import java.io.IOException;
-import java.nio.ByteBuffer;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.List;
-
-@Slf4j
-@RequiredArgsConstructor
-public class HttpChunksProcessor {
-
-    private static final String CHUNKED_HTTP_HEADER = "transfer-encoding: chunked\r\n";
-    private final List<Packet> packets;
-
-    private int position;
-    private boolean chunkStarted = false;
-    private final List<Packet> chunkPackets = new ArrayList<>();
-
-    public void processChunkedEncoding() {
-        int start = -1;
-
-        for (position = 0; position < packets.size(); position++) {
-            Packet packet = packets.get(position);
-            if (!packet.isIncoming()) {
-                String content = packet.getContentString();
-
-                boolean http = content.startsWith("HTTP/");
-                int contentPos = content.indexOf("\r\n\r\n");
-
-                if (http && contentPos != -1) {   // начало body
-                    String headers = content.substring(0, contentPos + 2);  // захватываем первые \r\n
-                    boolean chunked = headers.toLowerCase().contains(CHUNKED_HTTP_HEADER);
-                    if (chunked) {
-                        chunkStarted = true;
-                        start = position;
-                        chunkPackets.add(packet);
-
-                        checkCompleteChunk(chunkPackets, start);
-                    } else {
-                        chunkStarted = false;
-                        chunkPackets.clear();
-                    }
-                } else if (chunkStarted) {
-                    chunkPackets.add(packet);
-                    checkCompleteChunk(chunkPackets, start);
-                }
-            }
-        }
-    }
-
-    private void checkCompleteChunk(List<Packet> packets, int start) {
-        boolean end = Arrays.equals(packets.get(packets.size() - 1).getContent(), "0\r\n\r\n".getBytes()) ||
-                BytesUtils.endsWith(packets.get(packets.size() - 1).getContent(), "\r\n0\r\n\r\n".getBytes());
-
-        if (end) {
-            processChunk(packets, start);
-        }
-    }
-
-    @SneakyThrows
-    private void processChunk(List<Packet> packets, int start) {
-        //noinspection OptionalGetWithoutIsPresent
-        final byte[] content = PacketUtils.mergePackets(packets).get();
-
-        ByteArrayOutputStream output = new ByteArrayOutputStream(content.length);
-
-        final int contentStart = Bytes.indexOf(content, "\r\n\r\n".getBytes()) + 4;
-        output.write(content, 0, contentStart);
-
-        ByteBuffer buf = ByteBuffer.wrap(Arrays.copyOfRange(content, contentStart, content.length));
-
-        while (true) {
-            final int chunkSize = readChunkSize(buf);
-
-            switch (chunkSize) {
-                case -1 -> {
-                    log.warn("Failed to merge chunks, next chunk size not found");
-                    resetChunk();
-                    return;
-                }
-                case 0 -> {
-                    buildWholePacket(packets, start, output);
-                    return;
-                }
-                default -> {
-                    if (!readChunk(buf, chunkSize, output)) return;
-                    if (!readTrailer(buf)) return;
-                }
-            }
-        }
-    }
-
-    private boolean readChunk(ByteBuffer buf, int chunkSize, ByteArrayOutputStream output) throws IOException {
-        if (chunkSize > buf.remaining()) {
-            log.warn("Failed to merge chunks, chunk size too big: {} + {} > {}",
-                    buf.position(), chunkSize, buf.capacity());
-            resetChunk();
-            return false;
-        }
-
-        byte[] chunk = new byte[chunkSize];
-        buf.get(chunk);
-        output.write(chunk);
-        return true;
-    }
-
-    private boolean readTrailer(ByteBuffer buf) {
-        if (buf.remaining() < 2) {
-            log.warn("Failed to merge chunks, chunk doesn't end with \\r\\n");
-            resetChunk();
-            return false;
-        }
-
-        int c1 = buf.get();
-        int c2 = buf.get();
-
-        if (c1 != '\r' || c2 != '\n') {
-            log.warn("Failed to merge chunks, chunk trailer is not equal to \\r\\n");
-            resetChunk();
-            return false;
-        }
-
-        return true;
-    }
-
-    private void buildWholePacket(List<Packet> packets, int start, ByteArrayOutputStream output) {
-        Packet result = Packet.builder()
-                .incoming(false)
-                .timestamp(packets.get(0).getTimestamp())
-                .ungzipped(false)
-                .webSocketParsed(false)
-                .tlsDecrypted(packets.get(0).isTlsDecrypted())
-                .content(output.toByteArray())
-                .build();
-
-        this.packets.removeAll(packets);
-        this.packets.add(start, result);
-
-        resetChunk();
-        position = start + 1;
-    }
-
-    private void resetChunk() {
-        chunkStarted = false;
-        chunkPackets.clear();
-    }
-
-    private int readChunkSize(ByteBuffer buf) {
-        StringBuilder sb = new StringBuilder();
-
-        while (buf.remaining() > 2) {
-            byte b = buf.get();
-
-            if ((b >= '0' && b <= '9') || (b >= 'a' && b <= 'f')) {
-                sb.append((char) b);
-            } else if (b == '\r') {
-                if (buf.get() == '\n') {
-                    return Integer.parseInt(sb.toString(), 16);
-                } else {
-                    return -1; // после \r не идет \n
-                }
-            } else {
-                return -1;
-            }
-        }
-
-        return -1;
-    }
-
-}

src/main/java/ru/serega6531/packmate/service/optimization/HttpGzipProcessor.java

@@ -1,121 +0,0 @@
-package ru.serega6531.packmate.service.optimization;
-
-import com.google.common.primitives.Bytes;
-import lombok.RequiredArgsConstructor;
-import lombok.extern.slf4j.Slf4j;
-import org.apache.commons.io.IOUtils;
-import org.apache.commons.lang3.ArrayUtils;
-import ru.serega6531.packmate.model.Packet;
-import ru.serega6531.packmate.utils.PacketUtils;
-
-import java.io.ByteArrayInputStream;
-import java.io.ByteArrayOutputStream;
-import java.io.IOException;
-import java.util.Arrays;
-import java.util.List;
-import java.util.zip.GZIPInputStream;
-import java.util.zip.ZipException;
-
-@Slf4j
-@RequiredArgsConstructor
-public class HttpGzipProcessor {
-
-    private static final String GZIP_HTTP_HEADER = "content-encoding: gzip\r\n";
-    private static final byte[] GZIP_HEADER = {0x1f, (byte) 0x8b, 0x08};
-
-    private final List<Packet> packets;
-
-    boolean gzipStarted = false;
-    private int position;
-
-    /**
-     * Попытаться распаковать GZIP из исходящих http пакетов. <br>
-     * GZIP поток начинается на найденном HTTP пакете с заголовком Content-Encoding: gzip
-     * (при этом заголовок HTTP может быть в другом пакете)<br>
-     * Поток заканчивается при обнаружении нового HTTP заголовка,
-     * при смене стороны передачи или при окончании всего стрима
-     */
-    public void unpackGzip() {
-        int gzipStartPacket = 0;
-
-        for (position = 0; position < packets.size(); position++) {
-            Packet packet = packets.get(position);
-
-            if (packet.isIncoming() && gzipStarted) {   // поток gzip закончился
-                extractGzip(gzipStartPacket, position - 1);
-            } else if (!packet.isIncoming()) {
-                String content = packet.getContentString();
-
-                int contentPos = content.indexOf("\r\n\r\n");
-                boolean http = content.startsWith("HTTP/");
-
-                if (http && gzipStarted) {  // начался новый http пакет, заканчиваем старый gzip поток
-                    extractGzip(gzipStartPacket, position - 1);
-                }
-
-                if (contentPos != -1) {   // начало body
-                    String headers = content.substring(0, contentPos + 2);  // захватываем первые \r\n
-                    boolean gziped = headers.toLowerCase().contains(GZIP_HTTP_HEADER);
-                    if (gziped) {
-                        gzipStarted = true;
-                        gzipStartPacket = position;
-                    }
-                }
-            }
-        }
-
-        if (gzipStarted) {  // стрим закончился gzip пакетом
-            extractGzip(gzipStartPacket, packets.size() - 1);
-        }
-    }
-
-    /**
-     * Попытаться распаковать кусок пакетов с gzip body и вставить результат на их место
-     */
-    private void extractGzip(int gzipStartPacket, int gzipEndPacket) {
-        List<Packet> cut = packets.subList(gzipStartPacket, gzipEndPacket + 1);
-
-        Packet decompressed = decompressGzipPackets(cut);
-        if (decompressed != null) {
-            packets.removeAll(cut);
-            packets.add(gzipStartPacket, decompressed);
-
-            gzipStarted = false;
-            position = gzipStartPacket + 1;  // продвигаем указатель на следующий после склеенного блок
-        }
-    }
-
-    private Packet decompressGzipPackets(List<Packet> cut) {
-        //noinspection OptionalGetWithoutIsPresent
-        final byte[] content = PacketUtils.mergePackets(cut).get();
-
-        final int gzipStart = Bytes.indexOf(content, GZIP_HEADER);
-        byte[] httpHeader = Arrays.copyOfRange(content, 0, gzipStart);
-        byte[] gzipBytes = Arrays.copyOfRange(content, gzipStart, content.length);
-
-        try {
-            final GZIPInputStream gzipStream = new GZIPInputStream(new ByteArrayInputStream(gzipBytes));
-            ByteArrayOutputStream out = new ByteArrayOutputStream();
-            IOUtils.copy(gzipStream, out);
-            byte[] newContent = ArrayUtils.addAll(httpHeader, out.toByteArray());
-
-            log.debug("GZIP decompressed: {} -> {} bytes", gzipBytes.length, out.size());
-
-            return Packet.builder()
-                    .incoming(false)
-                    .timestamp(cut.get(0).getTimestamp())
-                    .ungzipped(true)
-                    .webSocketParsed(false)
-                    .tlsDecrypted(cut.get(0).isTlsDecrypted())
-                    .content(newContent)
-                    .build();
-        } catch (ZipException e) {
-            log.warn("Failed to decompress gzip, leaving as it is: {}", e.getMessage());
-        } catch (IOException e) {
-            log.error("decompress gzip", e);
-        }
-
-        return null;
-    }
-
-}

src/main/java/ru/serega6531/packmate/service/optimization/HttpProcessor.java

@@ -0,0 +1,65 @@
+package ru.serega6531.packmate.service.optimization;
+
+import lombok.extern.slf4j.Slf4j;
+import rawhttp.core.HttpMessage;
+import rawhttp.core.RawHttp;
+import rawhttp.core.RawHttpOptions;
+import rawhttp.core.body.BodyReader;
+import rawhttp.core.errors.InvalidHttpHeader;
+import rawhttp.core.errors.InvalidHttpRequest;
+import rawhttp.core.errors.InvalidHttpResponse;
+import rawhttp.core.errors.InvalidMessageFrame;
+import rawhttp.core.errors.UnknownEncodingException;
+import ru.serega6531.packmate.model.Packet;
+
+import java.io.ByteArrayInputStream;
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.util.List;
+import java.util.Optional;
+
+@Slf4j
+public class HttpProcessor {
+
+    private static final RawHttp rawHttp = new RawHttp(RawHttpOptions.strict());
+
+    public void process(List<Packet> packets) {
+        packets.stream()
+                .filter(p -> !p.isWebSocketParsed())
+                .forEach(this::processPacket);
+    }
+
+    private void processPacket(Packet packet) {
+        try {
+            ByteArrayInputStream contentStream = new ByteArrayInputStream(packet.getContent());
+            HttpMessage message;
+
+            if (packet.isIncoming()) {
+                message = rawHttp.parseRequest(contentStream).eagerly();
+            } else {
+                message = rawHttp.parseResponse(contentStream).eagerly();
+            }
+
+            packet.setContent(getDecodedMessage(message));
+            packet.setHasHttpBody(message.getBody().isPresent());
+        } catch (IOException | InvalidHttpRequest | InvalidHttpResponse | InvalidHttpHeader | InvalidMessageFrame |
+                 UnknownEncodingException e) {
+            log.warn("Could not parse http packet", e);
+        }
+    }
+
+    private byte[] getDecodedMessage(HttpMessage message) throws IOException {
+        ByteArrayOutputStream os = new ByteArrayOutputStream(256);
+
+        message.getStartLine().writeTo(os);
+        message.getHeaders().writeTo(os);
+
+        Optional<? extends BodyReader> body = message.getBody();
+        if (body.isPresent()) {
+            body.get().writeDecodedTo(os, 256);
+        }
+
+        return os.toByteArray();
+    }
+
+}

src/main/java/ru/serega6531/packmate/service/optimization/HttpUrldecodeProcessor.java

@@ -1,6 +1,5 @@
 package ru.serega6531.packmate.service.optimization;
 
-import lombok.AllArgsConstructor;
 import lombok.SneakyThrows;
 import lombok.extern.slf4j.Slf4j;
 import ru.serega6531.packmate.model.Packet;
@@ -9,17 +8,14 @@ import java.net.URLDecoder;
 import java.nio.charset.StandardCharsets;
 import java.util.List;
 
-@AllArgsConstructor
 @Slf4j
 public class HttpUrldecodeProcessor {
 
-    private final List<Packet> packets;
-
     /**
      * Декодирование urlencode с http пакета до смены стороны или окончания стрима
      */
     @SneakyThrows
-    public void urldecodeRequests() {
+    public void urldecodeRequests(List<Packet> packets) {
         boolean httpStarted = false;
 
         for (Packet packet : packets) {

src/main/java/ru/serega6531/packmate/service/optimization/PacketsMerger.java

@@ -1,30 +1,25 @@
 package ru.serega6531.packmate.service.optimization;
 
-import lombok.AllArgsConstructor;
 import ru.serega6531.packmate.model.Packet;
 import ru.serega6531.packmate.utils.PacketUtils;
 
 import java.util.List;
 
-@AllArgsConstructor
 public class PacketsMerger {
 
-    private final List<Packet> packets;
-
     /**
-     * Сжать соседние пакеты в одном направлении в один.
+     * Сжать соседние пакеты в одном направлении в один. Не склеивает WS и не-WS пакеты.
-     * Выполняется после других оптимизаций чтобы правильно определять границы пакетов.
      */
-    public void mergeAdjacentPackets() {
+    public void mergeAdjacentPackets(List<Packet> packets) {
         int start = 0;
         int packetsInRow = 0;
-        boolean incoming = true;
+        Packet previous = null;
 
         for (int i = 0; i < packets.size(); i++) {
             Packet packet = packets.get(i);
-            if (packet.isIncoming() != incoming) {
+            if (previous == null || !shouldBeInSameBatch(packet, previous)) {
                 if (packetsInRow > 1) {
-                    compress(start, i);
+                    compress(packets, start, i);
 
                     i = start + 1;  // продвигаем указатель на следующий после склеенного блок
                 }
@@ -34,36 +29,40 @@ public class PacketsMerger {
                 packetsInRow++;
             }
 
-            incoming = packet.isIncoming();
+            previous = packet;
         }
 
         if (packetsInRow > 1) {
-            compress(start, packets.size());
+            compress(packets, start, packets.size());
         }
     }
 
     /**
      * Сжать кусок со start по end в один пакет
      */
-    private void compress(int start, int end) {
+    private void compress(List<Packet> packets, int start, int end) {
         final List<Packet> cut = packets.subList(start, end);
         final long timestamp = cut.get(0).getTimestamp();
-        final boolean ungzipped = cut.stream().anyMatch(Packet::isUngzipped);
+        final boolean httpProcessed = cut.stream().anyMatch(Packet::isHttpProcessed);
         final boolean webSocketParsed = cut.stream().anyMatch(Packet::isWebSocketParsed);
         final boolean tlsDecrypted = cut.get(0).isTlsDecrypted();
         final boolean incoming = cut.get(0).isIncoming();
-        //noinspection OptionalGetWithoutIsPresent
+        final byte[] content = PacketUtils.mergePackets(cut);
-        final byte[] content = PacketUtils.mergePackets(cut).get();
 
         packets.removeAll(cut);
         packets.add(start, Packet.builder()
                 .incoming(incoming)
                 .timestamp(timestamp)
-                .ungzipped(ungzipped)
+                .httpProcessed(httpProcessed)
                 .webSocketParsed(webSocketParsed)
                 .tlsDecrypted(tlsDecrypted)
                 .content(content)
                 .build());
     }
 
+    private boolean shouldBeInSameBatch(Packet p1, Packet p2) {
+        return p1.isIncoming() == p2.isIncoming() &&
+                p1.isWebSocketParsed() == p2.isWebSocketParsed();
+    }
+
 }

src/main/java/ru/serega6531/packmate/service/optimization/StreamOptimizer.java

@@ -1,7 +1,6 @@
 package ru.serega6531.packmate.service.optimization;
 
 import lombok.AllArgsConstructor;
-import lombok.SneakyThrows;
 import lombok.extern.slf4j.Slf4j;
 import ru.serega6531.packmate.model.CtfService;
 import ru.serega6531.packmate.model.Packet;
@@ -16,6 +15,11 @@ public class StreamOptimizer {
     private final CtfService service;
     private List<Packet> packets;
 
+    private final PacketsMerger merger = new PacketsMerger();
+    private final HttpUrldecodeProcessor urldecodeProcessor = new HttpUrldecodeProcessor();
+    private final HttpProcessor httpProcessor = new HttpProcessor();
+
+
     /**
      * Вызвать для выполнения оптимизаций на переданном списке пакетов.
      */
@@ -29,51 +33,42 @@ public class StreamOptimizer {
             }
         }
 
-        if (service.isProcessChunkedEncoding()) {
-            try {
-                processChunkedEncoding();
-            } catch (Exception e) {
-                log.warn("Error optimizing stream (chunks)", e);
-                return packets;
-            }
-        }
-
-        if (service.isUngzipHttp()) {
-            try {
-                unpackGzip();
-            } catch (Exception e) {
-                log.warn("Error optimizing stream (gzip)", e);
-                return packets;
-            }
-        }
-
         if (service.isParseWebSockets()) {
             try {
                 parseWebSockets();
             } catch (Exception e) {
-                log.warn("Error optimizing stream (websocketss)", e);
+                log.warn("Error optimizing stream (websockets)", e);
                 return packets;
             }
         }
 
         if (service.isUrldecodeHttpRequests()) {
             try {
-                urldecodeRequests();
+                urldecodeProcessor.urldecodeRequests(packets);
             } catch (Exception e) {
                 log.warn("Error optimizing stream (urldecode)", e);
                 return packets;
             }
         }
 
-        if (service.isMergeAdjacentPackets()) {
+        if (service.isMergeAdjacentPackets() || service.isHttp()) {
             try {
-                mergeAdjacentPackets();
+                merger.mergeAdjacentPackets(packets);
             } catch (Exception e) {
                 log.warn("Error optimizing stream (adjacent)", e);
                 return packets;
             }
         }
 
+        if (service.isHttp()) {
+            try {
+                httpProcessor.process(packets);
+            } catch (Exception e) {
+                log.warn("Error optimizing stream (http)", e);
+                return packets;
+            }
+        }
+
         return packets;
     }
 
@@ -86,44 +81,6 @@ public class StreamOptimizer {
         }
     }
 
-    /**
-     * Сжать соседние пакеты в одном направлении в один.
-     * Выполняется после других оптимизаций чтобы правильно определять границы пакетов.
-     */
-    private void mergeAdjacentPackets() {
-        final PacketsMerger merger = new PacketsMerger(packets);
-        merger.mergeAdjacentPackets();
-    }
-
-    /**
-     * Декодирование urlencode с http пакета до смены стороны или окончания стрима
-     */
-    @SneakyThrows
-    private void urldecodeRequests() {
-        final HttpUrldecodeProcessor processor = new HttpUrldecodeProcessor(packets);
-        processor.urldecodeRequests();
-    }
-
-    /**
-     * <a href="https://ru.wikipedia.org/wiki/Chunked_transfer_encoding">Chunked transfer encoding</a>
-     */
-    private void processChunkedEncoding() {
-        HttpChunksProcessor processor = new HttpChunksProcessor(packets);
-        processor.processChunkedEncoding();
-    }
-
-    /**
-     * Попытаться распаковать GZIP из исходящих http пакетов. <br>
-     * GZIP поток начинается на найденном HTTP пакете с заголовком Content-Encoding: gzip
-     * (при этом заголовок HTTP может быть в другом пакете)<br>
-     * Поток заканчивается при обнаружении нового HTTP заголовка,
-     * при смене стороны передачи или при окончании всего стрима
-     */
-    private void unpackGzip() {
-        final HttpGzipProcessor processor = new HttpGzipProcessor(packets);
-        processor.unpackGzip();
-    }
-
     private void parseWebSockets() {
         if (!packets.get(0).getContentString().contains("HTTP/")) {
             return;

src/main/java/ru/serega6531/packmate/service/optimization/TlsDecryptor.java

@@ -182,15 +182,12 @@ public class TlsDecryptor {
 
                     decoded = clearDecodedData(decoded);
 
-                    result.add(Packet.builder()
+                    result.add(
-                            .content(decoded)
+                            packet.toBuilder()
-                            .incoming(packet.isIncoming())
+                                    .content(decoded)
-                            .timestamp(packet.getTimestamp())
+                                    .tlsDecrypted(true)
-                            .ungzipped(false)
+                                    .build()
-                            .webSocketParsed(false)
+                    );
-                            .tlsDecrypted(true)
-                            .ttl(packet.getTtl())
-                            .build());
                 }
             }
         }

src/main/java/ru/serega6531/packmate/service/optimization/WebSocketsParser.java

@@ -120,14 +120,9 @@ public class WebSocketsParser {
     }
 
     private Packet mimicPacket(Packet packet, byte[] content, boolean ws) {
-        return Packet.builder()
+        return packet.toBuilder()
                 .content(content)
-                .incoming(packet.isIncoming())
-                .timestamp(packet.getTimestamp())
-                .ttl(packet.getTtl())
-                .ungzipped(packet.isUngzipped())
                 .webSocketParsed(ws)
-                .tlsDecrypted(packet.isTlsDecrypted())
                 .build();
     }
 
@@ -138,8 +133,7 @@ public class WebSocketsParser {
         for (List<Packet> side : sides) {
             final Packet lastPacket = side.get(0);
 
-            //noinspection OptionalGetWithoutIsPresent
+            final byte[] wsContent = PacketUtils.mergePackets(side);
-            final byte[] wsContent = PacketUtils.mergePackets(side).get();
 
             final ByteBuffer buffer = ByteBuffer.wrap(wsContent);
             List<Framedata> frames;
@@ -153,15 +147,11 @@ public class WebSocketsParser {
 
             for (Framedata frame : frames) {
                 if (frame instanceof DataFrame) {
-                    parsedPackets.add(Packet.builder()
+                    parsedPackets.add(
-                            .content(frame.getPayloadData().array())
+                            lastPacket.toBuilder()
-                            .incoming(lastPacket.isIncoming())
+                                    .content(frame.getPayloadData().array())
-                            .timestamp(lastPacket.getTimestamp())
+                                    .webSocketParsed(true)
-                            .ttl(lastPacket.getTtl())
+                                    .build()
-                            .ungzipped(lastPacket.isUngzipped())
-                            .webSocketParsed(true)
-                            .tlsDecrypted(lastPacket.isTlsDecrypted())
-                            .build()
                     );
                 }
             }
@@ -179,13 +169,10 @@ public class WebSocketsParser {
     }
 
     private String getHandshake(final List<Packet> packets) {
-        final String handshake = PacketUtils.mergePackets(packets)
+        final String handshake = new String(PacketUtils.mergePackets(packets));
-                .map(String::new)
-                .orElse(null);
 
-        if (handshake == null ||
+        if (!handshake.toLowerCase().contains(WEBSOCKET_CONNECTION_HEADER)
-                !handshake.toLowerCase().contains(WEBSOCKET_CONNECTION_HEADER) ||
+                || !handshake.toLowerCase().contains(WEBSOCKET_UPGRADE_HEADER)) {
-                !handshake.toLowerCase().contains(WEBSOCKET_UPGRADE_HEADER)) {
             return null;
         }
 

src/main/java/ru/serega6531/packmate/tasks/OldStreamsCleanupTask.java

@@ -1,31 +1,30 @@
 package ru.serega6531.packmate.tasks;
 
 import lombok.extern.slf4j.Slf4j;
-import org.springframework.beans.factory.annotation.Value;
 import org.springframework.boot.autoconfigure.condition.ConditionalOnExpression;
 import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Component;
+import ru.serega6531.packmate.properties.PackmateProperties;
 import ru.serega6531.packmate.service.StreamService;
 
 import java.time.ZonedDateTime;
-import java.time.temporal.ChronoUnit;
 
 @Component
 @Slf4j
-@ConditionalOnExpression("${old-streams-cleanup-enabled:false} && '${capture-mode}' == 'LIVE'")
+@ConditionalOnExpression("${packmate.cleanup.enabled:false} && '${packmate.capture-mode}' == 'LIVE'")
 public class OldStreamsCleanupTask {
 
     private final StreamService service;
     private final int oldStreamsThreshold;
 
-    public OldStreamsCleanupTask(StreamService service, @Value("${old-streams-threshold}") int oldStreamsThreshold) {
+    public OldStreamsCleanupTask(StreamService service, PackmateProperties properties) {
         this.service = service;
-        this.oldStreamsThreshold = oldStreamsThreshold;
+        this.oldStreamsThreshold = properties.cleanup().threshold();
     }
 
-    @Scheduled(fixedDelayString = "PT${cleanup-interval}M", initialDelayString = "PT1M")
+    @Scheduled(fixedDelayString = "PT${packmate.cleanup.interval}M", initialDelayString = "PT1M")
     public void cleanup() {
-        ZonedDateTime before = ZonedDateTime.now().minus(oldStreamsThreshold, ChronoUnit.MINUTES);
+        ZonedDateTime before = ZonedDateTime.now().minusMinutes(oldStreamsThreshold);
         log.info("Cleaning up old non-favorite streams (before {})", before);
         long deleted = service.cleanupOldStreams(before);
         log.info("Deleted {} rows", deleted);

src/main/java/ru/serega6531/packmate/tasks/StartupListener.java

@@ -1,10 +1,10 @@
 package ru.serega6531.packmate.tasks;
 
 import org.pcap4j.core.PcapNativeException;
-import org.springframework.beans.factory.annotation.Value;
 import org.springframework.boot.context.event.ApplicationReadyEvent;
 import org.springframework.context.event.EventListener;
 import org.springframework.stereotype.Component;
+import ru.serega6531.packmate.properties.PackmateProperties;
 import ru.serega6531.packmate.model.enums.CaptureMode;
 import ru.serega6531.packmate.service.PcapService;
 import ru.serega6531.packmate.service.ServicesService;
@@ -12,28 +12,22 @@ import ru.serega6531.packmate.service.ServicesService;
 @Component
 public class StartupListener {
 
-    @Value("${enable-capture}")
+    private final PackmateProperties packmateProperties;
-    private boolean enableCapture;
-
-    @Value("${capture-mode}")
-    private CaptureMode captureMode;
-
     private final PcapService pcapService;
     private final ServicesService servicesService;
 
-    public StartupListener(PcapService pcapService, ServicesService servicesService) {
+    public StartupListener(PcapService pcapService, ServicesService servicesService, PackmateProperties packmateProperties) {
         this.pcapService = pcapService;
         this.servicesService = servicesService;
+        this.packmateProperties = packmateProperties;
     }
 
     @EventListener(ApplicationReadyEvent.class)
     public void afterStartup() throws PcapNativeException {
-        if (enableCapture) {
+        servicesService.updateFilter();
-            servicesService.updateFilter();
 
-            if (captureMode == CaptureMode.LIVE) {
+        if (packmateProperties.captureMode() == CaptureMode.LIVE) {
-                pcapService.start();
+            pcapService.start();
-            }
         }
     }
 

src/main/java/ru/serega6531/packmate/tasks/TimeoutStreamsSaver.java

@@ -2,10 +2,10 @@ package ru.serega6531.packmate.tasks;
 
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.beans.factory.annotation.Value;
 import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
 import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Component;
+import ru.serega6531.packmate.properties.PackmateProperties;
 import ru.serega6531.packmate.model.enums.Protocol;
 import ru.serega6531.packmate.pcap.PcapWorker;
 
@@ -13,7 +13,7 @@ import java.util.concurrent.TimeUnit;
 
 @Component
 @Slf4j
-@ConditionalOnProperty(name = "capture-mode", havingValue = "LIVE")
+@ConditionalOnProperty(name = "packmate.capture-mode", havingValue = "LIVE")
 public class TimeoutStreamsSaver {
 
     private final PcapWorker pcapWorker;
@@ -22,14 +22,13 @@ public class TimeoutStreamsSaver {
 
     @Autowired
     public TimeoutStreamsSaver(PcapWorker pcapWorker,
-                               @Value("${udp-stream-timeout}") int udpStreamTimeout,
+                               PackmateProperties properties) {
-                               @Value("${tcp-stream-timeout}") int tcpStreamTimeout) {
         this.pcapWorker = pcapWorker;
-        this.udpStreamTimeoutMillis = TimeUnit.SECONDS.toMillis(udpStreamTimeout);
+        this.udpStreamTimeoutMillis = TimeUnit.SECONDS.toMillis(properties.timeout().udpStreamTimeout());
-        this.tcpStreamTimeoutMillis = TimeUnit.SECONDS.toMillis(tcpStreamTimeout);
+        this.tcpStreamTimeoutMillis = TimeUnit.SECONDS.toMillis(properties.timeout().tcpStreamTimeout());
     }
 
-    @Scheduled(fixedRateString = "PT${timeout-stream-check-interval}S", initialDelayString = "PT${timeout-stream-check-interval}S")
+    @Scheduled(fixedRateString = "PT${packmate.timeout.check-interval}S", initialDelayString = "PT${packmate.timeout.check-interval}S")
     public void saveStreams() {
         int streamsClosed = pcapWorker.closeTimeoutStreams(Protocol.UDP, udpStreamTimeoutMillis);
         if (streamsClosed > 0) {

src/main/java/ru/serega6531/packmate/utils/PacketUtils.java

@@ -1,20 +1,28 @@
 package ru.serega6531.packmate.utils;
 
 import lombok.experimental.UtilityClass;
-import org.apache.commons.lang3.ArrayUtils;
 import ru.serega6531.packmate.model.Packet;
 
+import java.io.ByteArrayOutputStream;
 import java.util.ArrayList;
 import java.util.List;
-import java.util.Optional;
 
 @UtilityClass
 public class PacketUtils {
 
-    public Optional<byte[]> mergePackets(List<Packet> cut) {
+    public byte[] mergePackets(List<Packet> cut) {
-        return cut.stream()
+        int size = cut.stream()
                 .map(Packet::getContent)
-                .reduce(ArrayUtils::addAll);
+                .mapToInt(c -> c.length)
+                .sum();
+
+        ByteArrayOutputStream os = new ByteArrayOutputStream(size);
+
+        cut.stream()
+                .map(Packet::getContent)
+                .forEach(os::writeBytes);
+
+        return os.toByteArray();
     }
 
     public List<List<Packet>> sliceToSides(List<Packet> packets) {

src/main/resources/application.yml

@@ -1,6 +1,6 @@
 spring:
   datasource:
-    url: "jdbc:postgresql://localhost/packmate"
+    url: "jdbc:postgresql://localhost:5432/packmate"
     username: "packmate"
     password: "123456"
     driver-class-name: org.postgresql.Driver
@@ -14,18 +14,28 @@ spring:
         order_inserts: true
     database-platform: org.hibernate.dialect.PostgreSQLDialect
 
+server:
+  compression:
+    enabled: true
+    min-response-size: 1KB
 
-enable-capture: true
+packmate:
-capture-mode: LIVE  # LIVE, FILE, VIEW
+  capture-mode: LIVE  # LIVE, FILE, VIEW
-interface-name: enp0s31f6
+  interface-name: enp0s31f6
-pcap-file: file.pcap
+  pcap-file: file.pcap
-local-ip: "192.168.0.125"
+  local-ip: "192.168.0.125"
-account-login: BinaryBears
+  web:
-account-password: 123456
+    account-login: BinaryBears
-udp-stream-timeout: 20 # seconds
+    account-password: 123456
-tcp-stream-timeout: 40 # seconds
+    fake-admin:
-timeout-stream-check-interval: 10 # seconds
+      enabled: true
-old-streams-cleanup-enabled: true
+      mode: fun # fun, fake_packets
-old-streams-threshold: 240 # minutes
+  timeout:
-cleanup-interval: 5 # minutes
+    udp-stream-timeout: 20 # seconds
-ignore-empty-packets: true
+    tcp-stream-timeout: 40 # seconds
+    check-interval: 10 # seconds
+  cleanup:
+    enabled: true
+    threshold: 240 # minutes
+    interval: 5 # minutes
+  ignore-empty-packets: true