diff --git a/api/app.ts b/api/app.ts
index 806d510a91..eb56c53c12 100644
--- a/api/app.ts
+++ b/api/app.ts
@@ -48,6 +48,7 @@ import * as utils from './lib/utils'
 import backupManager from './lib/BackupManager'
 import { readFile, realpath } from 'fs/promises'
 import { generate } from 'selfsigned'
+import ZnifferManager, { ZnifferConfig } from './lib/ZnifferManager'
 
 const createCertificate = promisify(generate)
 
@@ -158,6 +159,7 @@ socketManager.authMiddleware = function (
 }
 
 let gw: Gateway // the gateway instance
+let zniffer: ZnifferManager // the zniffer instance
 const plugins: CustomPlugin[] = []
 let pluginsRouter: Router
 
@@ -257,6 +259,7 @@ export async function startServer(port: number | string, host?: string) {
 	setupInterceptor()
 	await loadSnippets()
 	await loadManager()
+	startZniffer(settings.zniffer)
 	await startGateway(settings)
 }
 
@@ -424,6 +427,12 @@ async function startGateway(settings: Settings) {
 	restarting = false
 }
 
+function startZniffer(settings: ZnifferConfig) {
+	if (settings) {
+		zniffer = new ZnifferManager(settings, socketManager.io)
+	}
+}
+
 async function destroyPlugins() {
 	while (plugins.length > 0) {
 		const instance = plugins.pop()
@@ -619,10 +628,17 @@ function setupSocket(server: HttpServer) {
 		// Server: https://socket.io/docs/v4/server-application-structure/#all-event-handlers-are-registered-in-the-indexjs-file
 		// Client: https://socket.io/docs/v4/client-api/#socketemiteventname-args
 		socket.on(inboundEvents.init, (data, cb = noop) => {
+			let state = {} as any
+
 			if (gw.zwave) {
-				const state = gw.zwave.getState()
-				cb(state)
+				state = gw.zwave.getState()
 			}
+
+			if (zniffer) {
+				state.zniffer = zniffer.status()
+			}
+
+			cb(state)
 		})
 
 		socket.on(
@@ -730,6 +746,49 @@ function setupSocket(server: HttpServer) {
 
 			cb(result)
 		})
+
+		// eslint-disable-next-line @typescript-eslint/no-misused-promises
+		socket.on(inboundEvents.zniffer, async (data, cb = noop) => {
+			logger.info(`Zniffer api call: ${data.api}`)
+
+			let res: any, err: string
+			try {
+				switch (data.apiName) {
+					case 'start':
+						res = await zniffer.start()
+						break
+					case 'stop':
+						res = await zniffer.stop()
+						break
+					case 'clear':
+						res = zniffer.clear()
+						break
+					case 'getFrames':
+						res = zniffer.getFrames()
+						break
+					case 'setFrequency':
+						res = await zniffer.setFrequency(data.frequency)
+						break
+					case 'saveCaptureToFile':
+						res = await zniffer.saveCaptureToFile()
+						break
+					default:
+						throw new Error(`Unknown ZNIFFER api ${data.apiName}`)
+				}
+			} catch (error) {
+				logger.error('Error while calling ZNIFFER api', error)
+				err = error.message
+			}
+
+			const result = {
+				success: !err,
+				message: err || 'Success ZNIFFER api call',
+				result: res,
+				api: data.apiName,
+			}
+
+			cb(result)
+		})
 	})
 
 	// emitted every time a new client connects/disconnects
@@ -1074,15 +1133,50 @@ app.post(
 			}
 			// TODO: validate settings using calss-validator
 			const settings = req.body
+
+			const actualSettings = jsonStore.get(store.settings) as Settings
+
+			const shouldRestartGw = !utils.deepEqual(
+				{
+					zwave: actualSettings.zwave,
+					gateway: actualSettings.gateway,
+					mqtt: actualSettings.mqtt,
+				},
+				{
+					zwave: settings.zwave,
+					gateway: settings.gateway,
+					mqtt: settings.mqtt,
+				},
+			)
+
+			const shouldRestartZniffer = !utils.deepEqual(
+				actualSettings.zniffer,
+				settings.zniffer,
+			)
+
+			// nothing changed, consider it a forced restart
+			const restartAll = !shouldRestartGw && !shouldRestartZniffer
+
 			restarting = true
 			await jsonStore.put(store.settings, settings)
-			await gw.close()
-			await destroyPlugins()
-			// reload loggers settings
-			setupLogging(settings)
-			// restart clients and gateway
-			await startGateway(settings)
-			backupManager.init(gw.zwave)
+
+			if (restartAll || shouldRestartGw) {
+				await gw.close()
+
+				await destroyPlugins()
+				// reload loggers settings
+				setupLogging(settings)
+				// restart clients and gateway
+				await startGateway(settings)
+				backupManager.init(gw.zwave)
+			}
+
+			if (restartAll || shouldRestartZniffer) {
+				if (zniffer) {
+					await zniffer.close()
+				}
+				startZniffer(settings.zniffer)
+			}
 
 			res.json({
 				success: true,
diff --git a/api/config/store.ts b/api/config/store.ts
index eb6ae2492d..f27ce34f65 100644
--- a/api/config/store.ts
+++ b/api/config/store.ts
@@ -2,6 +2,7 @@
 
 import { GatewayConfig } from '../lib/Gateway'
 import { MqttConfig } from '../lib/MqttClient'
+import { ZnifferConfig } from '../lib/ZnifferManager'
 import { ZwaveConfig, deviceConfigPriorityDir } from '../lib/ZwaveClient'
 
 export type StoreKeys = 'settings' | 'scenes' | 'nodes' | 'users'
@@ -21,6 +22,7 @@ export interface Settings {
 	mqtt?: MqttConfig
 	zwave?: ZwaveConfig
 	gateway?: GatewayConfig
+	zniffer?: ZnifferConfig
 }
 
 const store: Record<StoreKeys, StoreFile> = {
diff --git a/api/lib/SocketEvents.ts b/api/lib/SocketEvents.ts
index ee4d183628..e74dc67e63 100644
--- a/api/lib/SocketEvents.ts
+++ b/api/lib/SocketEvents.ts
@@ -19,6 +19,8 @@ export enum socketEvents {
 	grantSecurityClasses = 'GRANT_SECURITY_CLASSES',
 	validateDSK = 'VALIDATE_DSK',
 	inclusionAborted = 'INCLUSION_ABORTED',
+	znifferFrame = 'ZNIFFER_FRAME',
+	znifferState = 'ZNIFFER_STATE',
 }
 
 // events from client ---> server
@@ -27,4 +29,5 @@ export enum inboundEvents {
 	zwave = 'ZWAVE_API', // call a zwave api
 	hass = 'HASS_API', // call an hass api
 	mqtt = 'MQTT_API', // call an mqtt api
+	zniffer = 'ZNIFFER_API', // call a zniffer api
 }
diff --git a/api/lib/SocketManager.ts b/api/lib/SocketManager.ts
index 069bafb5aa..e768b40ccf 100644
--- a/api/lib/SocketManager.ts
+++ b/api/lib/SocketManager.ts
@@ -13,6 +13,7 @@ export interface SocketManagerEventCallbacks {
 	[inboundEvents.zwave]: (socket: Socket, data: any) => void
 	[inboundEvents.hass]: (socket: Socket, data: any) => void
 	[inboundEvents.mqtt]: (socket: Socket, data: any) => void
+	[inboundEvents.zniffer]: (socket: Socket, data: any) => void
 	clients: (
 		event: 'connection' | 'disconnect',
 		sockets: Map<string, Socket>,
diff --git a/api/lib/ZnifferManager.ts b/api/lib/ZnifferManager.ts
new file mode 100644
index 0000000000..daacce822e
--- /dev/null
+++ b/api/lib/ZnifferManager.ts
@@ -0,0 +1,314 @@
+import {
+	CommandClass,
+	CorruptedFrame,
+	Frame,
+	isEncapsulatingCommandClass,
+	isMultiEncapsulatingCommandClass,
+	Zniffer,
+	ZnifferOptions,
+} from 'zwave-js'
+import { TypedEventEmitter } from './EventEmitter'
+import { module } from './logger'
+import { Server as SocketServer } from 'socket.io'
+import { socketEvents } from './SocketEvents'
+import { ZwaveConfig } from './ZwaveClient'
+import { logsDir, storeDir } from '../config/app'
+import { buffer2hex, joinPath, parseSecurityKeys } from './utils'
+import { isDocker } from '@zwave-js/shared'
+import { basename } from 'path'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const loglevels = require('triple-beam').configs.npm.levels
+
+export type ZnifferConfig = Pick<
+	ZwaveConfig,
+	| 'securityKeys'
+	| 'securityKeysLongRange'
+	| 'maxFiles'
+	| 'logEnabled'
+	| 'logToFile'
+	| 'logLevel'
+	| 'nodeFilter'
+> & {
+	port: string
+	enabled: boolean
+	convertRSSI?: boolean
+	defaultFrequency?: number
+}
+
+export interface ZnifferManagerEventCallbacks {}
+
+const logger = module('ZnifferManager')
+
+const ZNIFFER_LOG_FILE = joinPath(logsDir, 'zniffer_%DATE%.log')
+const ZNIFFER_CAPTURE_FILE = joinPath(storeDir, 'zniffer_capture_%DATE%.zlf')
+
+export type SocketFrame = (Frame | CorruptedFrame) & {
+	payload: string
+	parsedPayload?: Record<string, any>
+	corrupted: boolean
+	timestamp: number
+	raw: string
+}
+
+export interface FrameCCLogEntry {
+	tags: string[]
+	message?: {
+		encapsulated?: FrameCCLogEntry[]
+		[key: string]: string | number | boolean | FrameCCLogEntry[]
+	}
+}
+
+export default class ZnifferManager extends TypedEventEmitter<ZnifferManagerEventCallbacks> {
+	private zniffer: Zniffer
+
+	private config: ZnifferConfig
+
+	private socket: SocketServer
+
+	private error: string
+
+	private restartTimeout: NodeJS.Timeout
+
+	get started() {
+		return this.zniffer.active
+	}
+
+	constructor(config: ZnifferConfig, socket: SocketServer) {
+		super()
+
+		this.config = config
+		this.socket = socket
+
+		if (!config.enabled) {
+			logger.info('Zniffer is DISABLED')
+			return
+		}
+
+		const znifferOptions: ZnifferOptions = {
+			convertRSSI: config.convertRSSI,
+			defaultFrequency: config.defaultFrequency,
+			logConfig: {
+				enabled: config.logEnabled,
+				level: config.logLevel ? loglevels[config.logLevel] : 'info',
+				logToFile: config.logToFile,
+				filename: ZNIFFER_LOG_FILE,
+				forceConsole: isDocker() ? !config.logToFile : false,
+				maxFiles: config.maxFiles || 7,
+				nodeFilter:
+					config.nodeFilter && config.nodeFilter.length > 0
+						? config.nodeFilter.map((n) => parseInt(n))
+						: undefined,
+			},
+		}
+
+		parseSecurityKeys(config, znifferOptions)
+
+		this.zniffer = new Zniffer(config.port, znifferOptions)
+
+		logger.info('Initing Zniffer...')
+		this.init().catch(() => {})
+	}
+
+	private async init() {
+		try {
+			await this.zniffer.init()
+
+			this.zniffer.on('frame', (frame, rawData) => {
+				const socketFrame = this.parseFrame(frame, rawData)
+
+				this.socket.emit(socketEvents.znifferFrame, socketFrame)
+			})
+
+			this.zniffer.on('corrupted frame', (frame, rawData) => {
+				const socketFrame = this.parseFrame(frame, rawData)
+
+				this.socket.emit(socketEvents.znifferFrame, socketFrame)
+			})
+
+			this.zniffer.on('error', (error) => {
+				this.onError(error)
+			})
+
+			this.zniffer.on('ready', () => {
+				logger.info('Zniffer ready')
+			})
+		} catch (error) {
+			this.onError(error)
+
+			logger.info('Retrying in 5s...')
+
+			await this.close()
+
+			this.restartTimeout = setTimeout(() => {
+				this.init().catch(() => {})
+			}, 5000)
+		}
+
+		this.onStateChange()
+	}
+
+	private parseFrame(
+		frame: Frame | CorruptedFrame,
+		rawData: Buffer,
+		timestamp = Date.now(),
+	): SocketFrame {
+		const socketFrame: SocketFrame = {
+			...frame,
+			corrupted: !('protocol' in frame),
+			payload: '' as any,
+			timestamp,
+			raw: buffer2hex(rawData),
+		}
+
+		if ('payload' in frame) {
+			if (frame.payload instanceof CommandClass) {
+				socketFrame.parsedPayload = this.ccToLogRecord(frame.payload)
+			} else {
+				socketFrame.payload = buffer2hex(frame.payload)
+			}
+		}
+
+		return socketFrame
+	}
+
+	private onError(error: Error) {
+		logger.error('Zniffer error:', error)
+		this.error = error.message
+		this.onStateChange()
+	}
+
+	private onStateChange() {
+		this.socket.emit(socketEvents.znifferState, this.status())
+	}
+
+	private checkReady() {
+		if (!this.config.enabled || !this.zniffer) {
+			throw new Error('Zniffer is not initialized')
+		}
+	}
+
+	public status() {
+		return {
+			error: this.error,
+			started: this.started,
+			frequency: this.zniffer?.currentFrequency,
+		}
+	}
+
+	public getFrames() {
+		this.checkReady()
+
+		return this.zniffer.capturedFrames.map((frame) => {
+			return this.parseFrame(
+				frame.parsedFrame,
+				frame.frameData,
+				frame.timestamp.getTime(),
+			)
+		})
+	}
+
+	public async setFrequency(frequency: number) {
+		this.checkReady()
+
+		logger.info(`Setting Zniffer frequency to ${frequency}`)
+		await this.zniffer.setFrequency(frequency)
+
+		this.onStateChange()
+
+		logger.info(`Zniffer frequency set to ${frequency}`)
+	}
+
+	private ccToLogRecord(commandClass: CommandClass): Record<string, any> {
+		try {
+			const parsed: Record<string, any> = commandClass.toLogEntry(
+				this.zniffer as any,
+			)
+
+			if (isEncapsulatingCommandClass(commandClass)) {
+				parsed.encapsulated = [
+					this.ccToLogRecord(commandClass.encapsulated),
+				]
+			} else if (isMultiEncapsulatingCommandClass(commandClass)) {
+				parsed.encapsulated = [
+					commandClass.encapsulated.map((cc) =>
+						this.ccToLogRecord(cc),
+					),
+				]
+			}
+			return parsed
+		} catch (error) {
+			logger.error('Error parsing command class:', error)
+			return {
+				error: error.message,
+			}
+		}
+	}
+
+	public async close() {
+		if (this.restartTimeout) clearTimeout(this.restartTimeout)
+
+		if (this.zniffer) {
+			this.zniffer.removeAllListeners()
+			await this.stop()
+			await this.zniffer.destroy()
+		}
+	}
+
+	public async start() {
+		this.checkReady()
+
+		if (this.started) {
+			logger.info('Zniffer already started')
+			return
+		}
+
+		logger.info('Starting...')
+		await this.zniffer.start()
+
+		this.onStateChange()
+
+		logger.info('Started')
+	}
+
+	public async stop() {
+		this.checkReady()
+
+		if (!this.started) {
+			logger.info('Zniffer is already stopped')
+			return
+		}
+
+		logger.info('Stopping...')
+		await this.zniffer.stop()
+
+		this.onStateChange()
+
+		logger.info('Stopped')
+	}
+
+	public clear() {
+		this.checkReady()
+
+		logger.info('Clearing...')
+		this.zniffer.clearCapturedFrames()
+
+		logger.info('Frames cleared')
+	}
+
+	public async saveCaptureToFile() {
+		this.checkReady()
+
+		const filePath = ZNIFFER_CAPTURE_FILE.replace(
+			'%DATE%',
+			new Date().toISOString(),
+		)
+		logger.info(`Saving capture to ${filePath}`)
+		await this.zniffer.saveCaptureToFile(filePath)
+		logger.info('Capture saved')
+		return {
+			path: filePath,
+			name: basename(filePath),
+		}
+	}
+}
diff --git a/api/lib/ZwaveClient.ts b/api/lib/ZwaveClient.ts
index ff731d7b19..40eaa0d4b2 100644
--- a/api/lib/ZwaveClient.ts
+++ b/api/lib/ZwaveClient.ts
@@ -569,6 +569,7 @@ export type NodeEvent = {
 }
 
 export type ZwaveConfig = {
+	enabled?: boolean
 	allowBootloaderOnly?: boolean
 	port?: string
 	networkKey?: string
@@ -2122,268 +2123,218 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 	 * Method used to start Z-Wave connection using configuration `port`
 	 */
 	async connect() {
-		if (!this.driverReady) {
-			// this could happen when the driver fails the connect and a reconnect timeout triggers
-			if (this.closed || this.checkIfDestroyed()) {
-				return
-			}
-
-			if (!this.cfg?.port) {
-				logger.warn('Z-Wave driver not inited, no port configured')
-				return
-			}
-
-			// extend options with hidden `options`
-			const zwaveOptions: PartialZWaveOptions = {
-				allowBootloaderOnly: this.cfg.allowBootloaderOnly || false,
-				storage: {
-					cacheDir: storeDir,
-					deviceConfigPriorityDir:
-						this.cfg.deviceConfigPriorityDir ||
-						deviceConfigPriorityDir,
-				},
-				logConfig: {
-					// https://zwave-js.github.io/node-zwave-js/#/api/driver?id=logconfig
-					enabled: this.cfg.logEnabled,
-					level: this.cfg.logLevel
-						? loglevels[this.cfg.logLevel]
-						: 'info',
-					logToFile: this.cfg.logToFile,
-					filename: ZWAVEJS_LOG_FILE,
-					forceConsole: isDocker() ? !this.cfg.logToFile : false,
-					maxFiles: this.cfg.maxFiles || 7,
-					nodeFilter:
-						this.cfg.nodeFilter && this.cfg.nodeFilter.length > 0
-							? this.cfg.nodeFilter.map((n) => parseInt(n))
-							: undefined,
-				},
-				emitValueUpdateAfterSetValue: true,
-				apiKeys: {
-					firmwareUpdateService:
-						'421e29797c3c2926f84efc737352d6190354b3b526a6dce6633674dd33a8a4f964c794f5',
-				},
-				timeouts: {
-					report: this.cfg.higherReportsTimeout ? 10000 : undefined,
-					sendToSleep: this.cfg.sendToSleepTimeout,
-					response: this.cfg.responseTimeout,
-				},
-				features: {
-					unresponsiveControllerRecovery: this.cfg
-						.disableControllerRecovery
-						? false
-						: true,
-				},
-				userAgent: {
-					[utils.pkgJson.name]: utils.pkgJson.version,
-				},
-			}
+		if (this.cfg.enabled === false) {
+			logger.info('Z-Wave driver DISABLED')
+			return
+		}
 
-			if (this.cfg.rf) {
-				const { region, txPower } = this.cfg.rf
+		if (this.driverReady) {
+			logger.info(`Driver already connected to ${this.cfg.port}`)
+			return
+		}
 
-				zwaveOptions.rf = {}
+		// this could happen when the driver fails the connect and a reconnect timeout triggers
+		if (this.closed || this.checkIfDestroyed()) {
+			return
+		}
 
-				if (region) {
-					zwaveOptions.rf.region = region
-				}
+		if (!this.cfg?.port) {
+			logger.warn('Z-Wave driver not inited, no port configured')
+			return
+		}
 
-				if (
-					txPower &&
-					typeof txPower.measured0dBm === 'number' &&
-					typeof txPower.powerlevel === 'number'
-				) {
-					zwaveOptions.rf.txPower = txPower
-				}
-			}
+		// extend options with hidden `options`
+		const zwaveOptions: PartialZWaveOptions = {
+			allowBootloaderOnly: this.cfg.allowBootloaderOnly || false,
+			storage: {
+				cacheDir: storeDir,
+				deviceConfigPriorityDir:
+					this.cfg.deviceConfigPriorityDir || deviceConfigPriorityDir,
+			},
+			logConfig: {
+				// https://zwave-js.github.io/node-zwave-js/#/api/driver?id=logconfig
+				enabled: this.cfg.logEnabled,
+				level: this.cfg.logLevel
+					? loglevels[this.cfg.logLevel]
+					: 'info',
+				logToFile: this.cfg.logToFile,
+				filename: ZWAVEJS_LOG_FILE,
+				forceConsole: isDocker() ? !this.cfg.logToFile : false,
+				maxFiles: this.cfg.maxFiles || 7,
+				nodeFilter:
+					this.cfg.nodeFilter && this.cfg.nodeFilter.length > 0
+						? this.cfg.nodeFilter.map((n) => parseInt(n))
+						: undefined,
+			},
+			emitValueUpdateAfterSetValue: true,
+			apiKeys: {
+				firmwareUpdateService:
+					'421e29797c3c2926f84efc737352d6190354b3b526a6dce6633674dd33a8a4f964c794f5',
+			},
+			timeouts: {
+				report: this.cfg.higherReportsTimeout ? 10000 : undefined,
+				sendToSleep: this.cfg.sendToSleepTimeout,
+				response: this.cfg.responseTimeout,
+			},
+			features: {
+				unresponsiveControllerRecovery: this.cfg
+					.disableControllerRecovery
+					? false
+					: true,
+			},
+			userAgent: {
+				[utils.pkgJson.name]: utils.pkgJson.version,
+			},
+		}
 
-			// ensure deviceConfigPriorityDir exists to prevent warnings #2374
-			// lgtm [js/path-injection]
-			await ensureDir(zwaveOptions.storage.deviceConfigPriorityDir)
+		if (this.cfg.rf) {
+			const { region, txPower } = this.cfg.rf
 
-			// when not set let zwavejs handle this based on the environment
-			if (typeof this.cfg.enableSoftReset === 'boolean') {
-				zwaveOptions.features.softReset = this.cfg.enableSoftReset
-			}
+			zwaveOptions.rf = {}
 
-			// when server is not enabled, disable the user callbacks set/remove
-			// so it can be used through MQTT
-			if (!this.cfg.serverEnabled) {
-				zwaveOptions.inclusionUserCallbacks = {
-					...this.inclusionUserCallbacks,
-				}
+			if (region) {
+				zwaveOptions.rf.region = region
 			}
 
-			if (this.cfg.scales) {
-				const scales: Record<string | number, string | number> = {}
-				for (const s of this.cfg.scales) {
-					scales[s.key] = s.label
-				}
-
-				zwaveOptions.preferences = {
-					scales,
-				}
+			if (
+				txPower &&
+				typeof txPower.measured0dBm === 'number' &&
+				typeof txPower.powerlevel === 'number'
+			) {
+				zwaveOptions.rf.txPower = txPower
 			}
+		}
 
-			Object.assign(zwaveOptions, this.cfg.options)
+		// ensure deviceConfigPriorityDir exists to prevent warnings #2374
+		// lgtm [js/path-injection]
+		await ensureDir(zwaveOptions.storage.deviceConfigPriorityDir)
 
-			let s0Key: string
+		// when not set let zwavejs handle this based on the environment
+		if (typeof this.cfg.enableSoftReset === 'boolean') {
+			zwaveOptions.features.softReset = this.cfg.enableSoftReset
+		}
 
-			// back compatibility
-			if (this.cfg.networkKey) {
-				s0Key = this.cfg.networkKey
-				delete this.cfg.networkKey
+		// when server is not enabled, disable the user callbacks set/remove
+		// so it can be used through MQTT
+		if (!this.cfg.serverEnabled) {
+			zwaveOptions.inclusionUserCallbacks = {
+				...this.inclusionUserCallbacks,
 			}
+		}
 
-			this.cfg.securityKeys = this.cfg.securityKeys || {}
-
-			if (s0Key && !this.cfg.securityKeys.S0_Legacy) {
-				this.cfg.securityKeys.S0_Legacy = s0Key
-				const settings = jsonStore.get(store.settings)
-				settings.zwave = this.cfg
-				await jsonStore.put(store.settings, settings)
-			} else if (process.env.NETWORK_KEY) {
-				this.cfg.securityKeys.S0_Legacy = process.env.NETWORK_KEY
+		if (this.cfg.scales) {
+			const scales: Record<string | number, string | number> = {}
+			for (const s of this.cfg.scales) {
+				scales[s.key] = s.label
 			}
 
-			const availableKeys = [
-				'S2_Unauthenticated',
-				'S2_Authenticated',
-				'S2_AccessControl',
-				'S0_Legacy',
-			]
-
-			const envKeys = Object.keys(process.env)
-				.filter((k) => k?.startsWith('KEY_'))
-				.map((k) => k.substring(4))
-
-			// load security keys from env
-			for (const k of envKeys) {
-				if (availableKeys.includes(k)) {
-					this.cfg.securityKeys[k] = process.env[`KEY_${k}`]
-				}
+			zwaveOptions.preferences = {
+				scales,
 			}
+		}
 
-			zwaveOptions.securityKeys = {}
-			zwaveOptions.securityKeysLongRange = {}
+		Object.assign(zwaveOptions, this.cfg.options)
 
-			// convert security keys to buffer
-			for (const key in this.cfg.securityKeys) {
-				if (
-					availableKeys.includes(key) &&
-					this.cfg.securityKeys[key].length === 32
-				) {
-					zwaveOptions.securityKeys[key] = Buffer.from(
-						this.cfg.securityKeys[key],
-						'hex',
-					)
-				}
-			}
+		let s0Key: string
 
-			this.cfg.securityKeysLongRange =
-				this.cfg.securityKeysLongRange || {}
+		// back compatibility
+		if (this.cfg.networkKey) {
+			s0Key = this.cfg.networkKey
+			delete this.cfg.networkKey
+		}
 
-			// convert security keys to buffer
-			for (const key in this.cfg.securityKeysLongRange) {
-				if (
-					availableKeys.includes(key) &&
-					this.cfg.securityKeysLongRange[key].length === 32
-				) {
-					zwaveOptions.securityKeysLongRange[key] = Buffer.from(
-						this.cfg.securityKeysLongRange[key],
-						'hex',
-					)
-				}
-			}
+		this.cfg.securityKeys = this.cfg.securityKeys || {}
 
-			try {
-				// init driver here because if connect fails the driver is destroyed
-				// this could throw so include in the try/catch
-				this._driver = new Driver(this.cfg.port, zwaveOptions)
-				this._driver.on('error', this._onDriverError.bind(this))
-				this._driver.once(
-					'driver ready',
-					this._onDriverReady.bind(this),
-				)
-				this._driver.on(
-					'all nodes ready',
-					this._onScanComplete.bind(this),
-				)
-				this._driver.on(
-					'bootloader ready',
-					this._onBootLoaderReady.bind(this),
-				)
+		// update settings to fix compatibility
+		if (s0Key && !this.cfg.securityKeys.S0_Legacy) {
+			this.cfg.securityKeys.S0_Legacy = s0Key
+			const settings = jsonStore.get(store.settings)
+			settings.zwave = this.cfg
+			await jsonStore.put(store.settings, settings)
+		}
 
-				logger.info(`Connecting to ${this.cfg.port}`)
+		utils.parseSecurityKeys(this.cfg, zwaveOptions)
 
-				// setup user callbacks only if there are connected clients
-				this.hasUserCallbacks =
-					(await this.socket.fetchSockets()).length > 0
+		try {
+			// init driver here because if connect fails the driver is destroyed
+			// this could throw so include in the try/catch
+			this._driver = new Driver(this.cfg.port, zwaveOptions)
+			this._driver.on('error', this._onDriverError.bind(this))
+			this._driver.once('driver ready', this._onDriverReady.bind(this))
+			this._driver.on('all nodes ready', this._onScanComplete.bind(this))
+			this._driver.on(
+				'bootloader ready',
+				this._onBootLoaderReady.bind(this),
+			)
 
-				if (this.hasUserCallbacks) {
-					this.setUserCallbacks()
-				}
+			logger.info(`Connecting to ${this.cfg.port}`)
 
-				await this._driver.start()
+			// setup user callbacks only if there are connected clients
+			this.hasUserCallbacks =
+				(await this.socket.fetchSockets()).length > 0
 
-				if (this.checkIfDestroyed()) {
-					return
-				}
+			if (this.hasUserCallbacks) {
+				this.setUserCallbacks()
+			}
 
-				if (this.cfg.serverEnabled) {
-					this.server = new ZwavejsServer(this._driver, {
-						port: this.cfg.serverPort || 3000,
-						host: this.cfg.serverHost,
-						logger: LogManager.module('Z-Wave-Server'),
-						enableDNSServiceDiscovery:
-							!this.cfg.serverServiceDiscoveryDisabled,
-					})
+			await this._driver.start()
 
-					this.server.on('error', () => {
-						// this is already logged by the server but we need this to prevent
-						// unhandled exceptions
-					})
+			if (this.checkIfDestroyed()) {
+				return
+			}
 
-					this.server.on('hard reset', () => {
-						logger.info('Hard reset requested by ZwaveJS Server')
-						this.restart().catch((err) => {
-							logger.error(err)
-						})
-					})
-				}
+			if (this.cfg.serverEnabled) {
+				this.server = new ZwavejsServer(this._driver, {
+					port: this.cfg.serverPort || 3000,
+					host: this.cfg.serverHost,
+					logger: LogManager.module('Z-Wave-Server'),
+					enableDNSServiceDiscovery:
+						!this.cfg.serverServiceDiscoveryDisabled,
+				})
 
-				if (this.cfg.enableStatistics) {
-					this.enableStatistics()
-				}
+				this.server.on('error', () => {
+					// this is already logged by the server but we need this to prevent
+					// unhandled exceptions
+				})
 
-				this.status = ZwaveClientStatus.CONNECTED
-			} catch (error) {
-				// destroy diver instance when it fails
-				if (this._driver) {
-					this._driver.destroy().catch((err) => {
-						logger.error(
-							`Error while destroying driver ${err.message}`,
-							error,
-						)
+				this.server.on('hard reset', () => {
+					logger.info('Hard reset requested by ZwaveJS Server')
+					this.restart().catch((err) => {
+						logger.error(err)
 					})
-				}
-
-				if (this.checkIfDestroyed()) {
-					return
-				}
+				})
+			}
 
-				this._onDriverError(error, true)
+			if (this.cfg.enableStatistics) {
+				this.enableStatistics()
+			}
 
-				if (error.code !== ZWaveErrorCodes.Driver_InvalidOptions) {
-					this.backoffRestart()
-				} else {
+			this.status = ZwaveClientStatus.CONNECTED
+		} catch (error) {
+			// destroy diver instance when it fails
+			if (this._driver) {
+				this._driver.destroy().catch((err) => {
 					logger.error(
-						`Invalid options for driver: ${error.message}`,
+						`Error while destroying driver ${err.message}`,
 						error,
 					)
-				}
+				})
+			}
+
+			if (this.checkIfDestroyed()) {
+				return
+			}
+
+			this._onDriverError(error, true)
+
+			if (error.code !== ZWaveErrorCodes.Driver_InvalidOptions) {
+				this.backoffRestart()
+			} else {
+				logger.error(
+					`Invalid options for driver: ${error.message}`,
+					error,
+				)
 			}
-		} else {
-			logger.info(`Driver already connected to ${this.cfg.port}`)
 		}
 	}
 
diff --git a/api/lib/utils.ts b/api/lib/utils.ts
index 099279cae4..2f00e96e5d 100644
--- a/api/lib/utils.ts
+++ b/api/lib/utils.ts
@@ -1,8 +1,9 @@
 // eslint-disable-next-line one-var
-import { ValueID } from 'zwave-js'
+import { PartialZWaveOptions, ValueID, ZnifferOptions } from 'zwave-js'
 import path, { resolve } from 'path'
 import crypto from 'crypto'
 import { readFileSync } from 'fs'
+import type { ZwaveConfig } from './ZwaveClient'
 
 // don't use import here, it will break the build
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -311,3 +312,63 @@ export function parseJSON(str: string): any {
 		return v
 	})
 }
+
+export function parseSecurityKeys(
+	config: ZwaveConfig,
+	options: PartialZWaveOptions | ZnifferOptions,
+): void {
+	config.securityKeys = config.securityKeys || {}
+
+	if (process.env.NETWORK_KEY) {
+		config.securityKeys.S0_Legacy = process.env.NETWORK_KEY
+	}
+
+	const availableKeys = [
+		'S2_Unauthenticated',
+		'S2_Authenticated',
+		'S2_AccessControl',
+		'S0_Legacy',
+	]
+
+	const envKeys = Object.keys(process.env)
+		.filter((k) => k?.startsWith('KEY_'))
+		.map((k) => k.substring(4))
+
+	// load security keys from env
+	for (const k of envKeys) {
+		if (availableKeys.includes(k)) {
+			config.securityKeys[k] = process.env[`KEY_${k}`]
+		}
+	}
+
+	options.securityKeys = {}
+	options.securityKeysLongRange = {}
+
+	// convert security keys to buffer
+	for (const key in config.securityKeys) {
+		if (
+			availableKeys.includes(key) &&
+			config.securityKeys[key].length === 32
+		) {
+			options.securityKeys[key] = Buffer.from(
+				config.securityKeys[key],
+				'hex',
+			)
+		}
+	}
+
+	config.securityKeysLongRange = config.securityKeysLongRange || {}
+
+	// convert security keys to buffer
+	for (const key in config.securityKeysLongRange) {
+		if (
+			availableKeys.includes(key) &&
+			config.securityKeysLongRange[key].length === 32
+		) {
+			options.securityKeysLongRange[key] = Buffer.from(
+				config.securityKeysLongRange[key],
+				'hex',
+			)
+		}
+	}
+}
diff --git a/package-lock.json b/package-lock.json
index e466eeafeb..c43ac2a449 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9063,20 +9063,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
diff --git a/src/App.vue b/src/App.vue
index 635abfb542..8a214743d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,7 +34,14 @@
 						:color="item.path === $route.path ? 'primary' : ''"
 					>
 						<v-list-item-action>
-							<v-icon>{{ item.icon }}</v-icon>
+							<v-badge
+								color="red"
+								:value="item.badge"
+								:content="item.badge"
+								dot
+							>
+								<v-icon>{{ item.icon }}</v-icon>
+							</v-badge>
 						</v-list-item-action>
 						<v-list-item-content>
 							<v-list-item-title
@@ -79,7 +86,10 @@
 
 				<v-spacer></v-spacer>
 
-				<v-tooltip v-if="appInfo.controllerStatus" bottom>
+				<v-tooltip
+					v-if="zwave.enabled && appInfo.controllerStatus"
+					bottom
+				>
 					<template v-slot:activator="{ on }">
 						<div
 							v-on="on"
@@ -104,7 +114,10 @@
 					</div>
 				</v-tooltip>
 
-				<v-tooltip v-if="appInfo.controllerStatus" bottom>
+				<v-tooltip
+					v-if="zwave.enabled && appInfo.controllerStatus"
+					bottom
+				>
 					<template v-slot:activator="{ on }">
 						<v-icon
 							class="ml-3"
@@ -439,11 +452,65 @@ export default {
 			'auth',
 			'appInfo',
 			'controllerNode',
+			'zniffer',
+			'zwave',
+			'znifferState',
 		]),
 		...mapState(useBaseStore, {
 			darkMode: (store) => store.ui.darkMode,
 			navTabs: (store) => store.ui.navTabs,
 		}),
+		pages() {
+			const pages = [
+				{ icon: 'settings', title: 'Settings', path: Routes.settings },
+				{ icon: 'bug_report', title: 'Debug', path: Routes.debug },
+				{ icon: 'folder', title: 'Store', path: Routes.store },
+			]
+
+			if (this.zwave?.enabled) {
+				pages.unshift(
+					{
+						icon: 'widgets',
+						title: 'Control Panel',
+						path: Routes.controlPanel,
+					},
+					{
+						icon: 'qr_code_scanner',
+						title: 'Smart Start',
+						path: Routes.smartStart,
+					},
+				)
+
+				pages.splice(3, 0, {
+					icon: 'movie_filter',
+					title: 'Scenes',
+					path: Routes.scenes,
+				})
+
+				pages.push({
+					icon: 'share',
+					title: 'Network graph',
+					path: Routes.mesh,
+				})
+			}
+
+			if (this.zniffer?.enabled) {
+				pages.push({
+					icon: 'preview',
+					title: 'Zniffer',
+					path: Routes.zniffer,
+					badge: this.znifferState?.started ? 1 : 0,
+				})
+			}
+
+			for (const p of pages) {
+				if (p.badge === undefined) {
+					p.badge = 0
+				}
+			}
+
+			return pages
+		},
 		updateAvailable() {
 			return this.appInfo.newConfigVersion ? 1 : 0
 		},
@@ -496,6 +563,9 @@ export default {
 		darkMode(val) {
 			this.$vuetify.theme.dark = !!val
 		},
+		pages() {
+			// this.verifyRoute()
+		},
 		controllerNode(node) {
 			if (!node) return
 
@@ -556,23 +626,6 @@ export default {
 					tooltip: 'Logout',
 				},
 			],
-			pages: [
-				{
-					icon: 'widgets',
-					title: 'Control Panel',
-					path: Routes.controlPanel,
-				},
-				{
-					icon: 'qr_code_scanner',
-					title: 'Smart Start',
-					path: Routes.smartStart,
-				},
-				{ icon: 'settings', title: 'Settings', path: Routes.settings },
-				{ icon: 'movie_filter', title: 'Scenes', path: Routes.scenes },
-				{ icon: 'bug_report', title: 'Debug', path: Routes.debug },
-				{ icon: 'folder', title: 'Store', path: Routes.store },
-				{ icon: 'share', title: 'Network graph', path: Routes.mesh },
-			],
 			status: '',
 			statusColor: '',
 			drawer: false,
@@ -584,6 +637,27 @@ export default {
 		}
 	},
 	methods: {
+		verifyRoute() {
+			// ensure the actual route is available in pages otherwise redirect to the first one
+			if (
+				this.$route.meta.requiresAuth &&
+				this.pages.findIndex((p) => p.path === this.$route.path) === -1
+			) {
+				const preferred = ['control-panel', 'zniffer', 'settings']
+
+				const allowed = this.pages.filter((p) =>
+					preferred.includes(p.path),
+				)
+
+				const path = allowed.length ? allowed[0].path : undefined
+
+				if (path) {
+					this.$router.replace(path)
+				} else {
+					this.$router.replace(this.pages[0].path)
+				}
+			}
+		},
 		showNodesManager(step) {
 			// used in ControlPanel.vue
 			this.$refs.nodesManager.show(step)
@@ -599,6 +673,7 @@ export default {
 			'init',
 			'initNodes',
 			'setAppInfo',
+			'setZnifferState',
 			'onUserLogged',
 			'updateValue',
 			'setValue',
@@ -608,6 +683,7 @@ export default {
 			'addNodeEvent',
 			'updateNode',
 			'removeNode',
+			'setZnifferState',
 		]),
 		copyVersion() {
 			const el = document.createElement('textarea')
@@ -965,6 +1041,7 @@ export default {
 		},
 		onInit(data) {
 			this.setAppInfo(data.info)
+			this.setZnifferState(data.zniffer)
 			this.setControllerStatus({
 				error: data.error,
 				status: data.cntStatus,
@@ -1085,6 +1162,10 @@ export default {
 				socketEvents.grantSecurityClasses,
 				this.onGrantSecurityClasses.bind(this),
 			)
+
+			this.socket.on(socketEvents.znifferState, (data) => {
+				this.setZnifferState(data)
+			})
 			// don't await this, will cause a loop of calls
 			this.getConfig()
 		},
diff --git a/src/components/custom/CCTreeView.vue b/src/components/custom/CCTreeView.vue
new file mode 100644
index 0000000000..823e8da926
--- /dev/null
+++ b/src/components/custom/CCTreeView.vue
@@ -0,0 +1,189 @@
+<template>
+	<v-treeview
+		v-if="items.length > 0"
+		ref="treeview"
+		open-all
+		dense
+		:items="items"
+	>
+		<template v-slot:label="{ item }">
+			<v-row class="ma-0 pa-0" dense>
+				<strong class="tree-item-name" style="white-space: pre-wrap">{{
+					item.name
+				}}</strong>
+				<div
+					class="tree-item-value"
+					:class="item.name === 'payload' ? 'mono' : ''"
+					v-if="item.value !== undefined"
+					style="white-space: pre-wrap"
+				>
+					{{ item.value }}
+				</div>
+			</v-row>
+		</template>
+	</v-treeview>
+
+	<!-- created nested divs that will format like a tree and each nested value should be indentend to right with a left border -->
+	<!-- <div :style="{ marginLeft: level * 10 + 'px' }" class="tree">
+		<div v-for="item in items" :key="item.id" class="tree-item">
+			<div
+				:style="{
+					border: level === 0 ? 'none' : '',
+					borderColor: $vuetify.theme.dark ? '#ccc' : '#333',
+				}"
+				class="tree-item-label"
+			>
+				<strong class="tree-item-name" style="white-space: pre-wrap">{{
+					item.name
+				}}</strong>
+				<div
+					class="tree-item-value"
+					v-if="item.value"
+					style="white-space: pre-wrap"
+				>
+					{{ item.value }}
+				</div>
+			</div>
+			<div class="tree-item-children"></div>
+			<CCTreeView :value="item.children" :level="level + 1" />
+		</div>
+	</div> -->
+</template>
+
+<script>
+/**
+ * The format of the `entry` will be an object like:
+ * interface FrameCCLogEntry {
+		tags: string[]
+		message?: {
+			[key: string]: string | number | boolean | FrameCCLogEntry[]
+		}
+		encapsulated?: FrameCCLogEntry[]
+    }
+
+    Starting from that we will parse it to the following format:
+    items: [
+        {
+            id: 'root',
+            name: tags.join(', '),
+            children: [
+                {
+                    id: 'root.<property>',
+                    name: '<message[property]>',
+                }
+                ...
+                {
+                    id: 'root.encapsulated',
+                    name: root.encapsulated.tags.join(', '),
+                    children: [
+                        // repeat above recursively
+                    ]
+                }
+            ]
+
+ */
+
+export default {
+	name: 'CCTreeView',
+	props: {
+		value: {
+			type: [Object, Array],
+			default: () => ({}),
+		},
+		level: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data: () => ({
+		items: [],
+	}),
+	watch: {
+		value: {
+			immediate: true,
+			handler() {
+				if (Array.isArray(this.value)) {
+					this.items = this.value
+				} else {
+					// trick used to reset the treeview and expand all nodes on change
+					this.items = []
+					this.$nextTick(() => {
+						this.items = this.parseEntry(this.value)
+					})
+				}
+			},
+		},
+	},
+	methods: {
+		parseEntry(entry, root = 'root') {
+			const items = []
+			const children = []
+			this.openIds = []
+			for (const key in entry) {
+				if (key === 'tags') {
+					items.push({
+						id: root,
+						name: entry.tags.join(' - '),
+						children,
+					})
+				} else if (key === 'message') {
+					for (const prop in entry.message) {
+						const value = entry.message[prop]
+						children.push({
+							id: `${root}.${prop}`,
+							name: `${prop}`,
+							value:
+								typeof value === 'string'
+									? value.trimStart()
+									: value,
+						})
+					}
+				} else if (key === 'encapsulated') {
+					for (let i = 0; i < entry.encapsulated.length; i++) {
+						const encapsulated = entry.encapsulated[i]
+						children.push(
+							...this.parseEntry(
+								encapsulated,
+								`${root}.encapsulated[${i}]`,
+							),
+						)
+					}
+				}
+			}
+
+			return items
+		},
+	},
+}
+</script>
+
+<style scoped>
+/* .tree {
+	display: flex;
+	flex-direction: column;
+}
+
+.tree-item {
+	display: flex;
+	flex-direction: column;
+}
+
+.tree-item-label {
+	border-left: 1px solid #ccc;
+	display: flex;
+	padding-left: 5px;
+	padding-top: 2px;
+} */
+
+.tree-item-name {
+}
+
+.tree-item-value {
+	color: #666;
+	padding-left: 5px;
+}
+
+.v-treeview::v-deep .v-treeview-node__root {
+	min-height: 20px;
+}
+</style>
diff --git a/src/components/custom/FrameDetails.vue b/src/components/custom/FrameDetails.vue
new file mode 100644
index 0000000000..91726ed00c
--- /dev/null
+++ b/src/components/custom/FrameDetails.vue
@@ -0,0 +1,134 @@
+<template>
+	<v-row v-if="value">
+		<v-col>
+			<v-simple-table class="frame-details" dense>
+				<template v-slot:default>
+					<tbody>
+						<tr>
+							<td>Type</td>
+							<td>{{ getType(value) }}</td>
+						</tr>
+						<tr>
+							<td>Protocol</td>
+							<td>{{ getProtocol(value) }}</td>
+						</tr>
+						<tr>
+							<td>Channel</td>
+							<td>{{ value.channel }}</td>
+						</tr>
+						<tr>
+							<td>Region</td>
+							<td>{{ getRegion(value) }}</td>
+						</tr>
+						<tr>
+							<td>RSSI</td>
+							<td>{{ getRssi(value) }}</td>
+						</tr>
+						<tr>
+							<td>Protocol Data Rate</td>
+							<td>
+								{{
+									getProtocolDataRate(value) +
+									(value.speedModified
+										? ' (speed modified)'
+										: '')
+								}}
+							</td>
+						</tr>
+						<tr>
+							<td>Sequence Number</td>
+							<td>{{ value.sequenceNumber }}</td>
+						</tr>
+						<tr v-if="value.payload">
+							<td>Payload</td>
+							<td>{{ value.payload }}</td>
+						</tr>
+						<tr>
+							<td>Home ID</td>
+							<td>
+								{{
+									value.homeId
+										? value.homeId.toString(16)
+										: ''
+								}}
+							</td>
+						</tr>
+						<tr>
+							<td>Route</td>
+							<td v-html="getRoute(value, true)"></td>
+						</tr>
+						<tr v-if="value.ackRequested !== undefined">
+							<td>Ack Requested</td>
+							<td>{{ value.ackRequested }}</td>
+						</tr>
+						<tr v-if="value.routedAck">
+							<td>Routed Ack</td>
+							<td>{{ value.routedAck }}</td>
+						</tr>
+						<tr v-if="value.routedError">
+							<td>Routed Error</td>
+							<td>{{ value.routedError }}</td>
+						</tr>
+					</tbody>
+				</template>
+			</v-simple-table>
+		</v-col>
+		<v-col>
+			<CCTreeView
+				class="my-2"
+				v-if="value.parsedPayload"
+				:value="value.parsedPayload"
+			></CCTreeView>
+			<span class="text-caption">Raw</span>
+			<v-textarea
+				class="mono"
+				readonly
+				hide-details
+				solo
+				no-resize
+				v-model="value.raw"
+				rows="2"
+			></v-textarea>
+		</v-col>
+	</v-row>
+	<v-row class="fill" justify="center" align="center" v-else>
+		<v-col class="text-center caption">
+			<span dense>Click on a frame in table to see details</span>
+		</v-col>
+	</v-row>
+</template>
+
+<script>
+import {
+	getRegion,
+	getRoute,
+	getType,
+	getRssi,
+	getProtocol,
+	getProtocolDataRate,
+} from '../../lib/utils.js'
+
+export default {
+	props: {
+		value: Object,
+	},
+	components: {
+		CCTreeView: () => import('./CCTreeView.vue'),
+	},
+	data: () => ({}),
+	methods: {
+		getRegion,
+		getRoute,
+		getType,
+		getRssi,
+		getProtocolDataRate,
+		getProtocol,
+	},
+}
+</script>
+
+<style scoped>
+.frame-details::v-deep td:first-child {
+	max-width: 50px !important;
+}
+</style>
diff --git a/src/components/custom/Multipane.vue b/src/components/custom/Multipane.vue
new file mode 100644
index 0000000000..1ad02e54b6
--- /dev/null
+++ b/src/components/custom/Multipane.vue
@@ -0,0 +1,264 @@
+<template>
+	<div
+		:class="classnames"
+		:style="{ cursor, userSelect }"
+		@mousedown="onMouseDown"
+		@touchstart="onMouseDown"
+	>
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+const LAYOUT_HORIZONTAL = 'horizontal'
+const LAYOUT_VERTICAL = 'vertical'
+
+export default {
+	name: 'multipane',
+
+	props: {
+		layout: {
+			type: String,
+			default: LAYOUT_VERTICAL,
+		},
+	},
+
+	data() {
+		return {
+			isResizing: false,
+		}
+	},
+
+	computed: {
+		classnames() {
+			return [
+				'multipane',
+				'layout-' + this.layout.slice(0, 1),
+				this.isResizing ? 'is-resizing' : '',
+			]
+		},
+		cursor() {
+			return this.isResizing
+				? this.layout == LAYOUT_VERTICAL
+					? 'col-resize'
+					: 'row-resize'
+				: ''
+		},
+		userSelect() {
+			return this.isResizing ? 'none' : ''
+		},
+	},
+
+	methods: {
+		getPageXY(e) {
+			return e.touches?.[0] || e
+		},
+		onMouseDown(e) {
+			const resizer = e.target
+			if (
+				resizer.className &&
+				resizer.className.match('multipane-resizer')
+			) {
+				let { $el: container, layout } = this
+				const { pageX: initialPageX, pageY: initialPageY } =
+					this.getPageXY(e)
+
+				let pane = resizer.previousElementSibling
+				let {
+					offsetWidth: initialPaneWidth,
+					offsetHeight: initialPaneHeight,
+				} = pane
+
+				let usePercentage = !!(pane.style.width + '').match('%')
+
+				const { addEventListener, removeEventListener } = window
+
+				const resize = (initialSize, offset = 0) => {
+					if (layout == LAYOUT_VERTICAL) {
+						let containerWidth = container.clientWidth
+						let paneWidth = initialSize + offset
+
+						return (pane.style.width = usePercentage
+							? (paneWidth / containerWidth) * 100 + '%'
+							: paneWidth + 'px')
+					}
+
+					if (layout == LAYOUT_HORIZONTAL) {
+						let containerHeight = container.clientHeight
+						let paneHeight = initialSize + offset
+
+						return (pane.style.height = usePercentage
+							? (paneHeight / containerHeight) * 100 + '%'
+							: paneHeight + 'px')
+					}
+				}
+
+				// This adds is-resizing class to container
+				this.isResizing = true
+
+				// Resize once to get current computed size
+				let size = resize()
+
+				// Trigger paneResizeStart event
+				this.$emit('paneResizeStart', pane, resizer, size)
+
+				const onMouseMove = (e) => {
+					const { pageX, pageY } = this.getPageXY(e)
+					size =
+						layout == LAYOUT_VERTICAL
+							? resize(initialPaneWidth, pageX - initialPageX)
+							: resize(initialPaneHeight, pageY - initialPageY)
+
+					this.$emit('paneResize', pane, resizer, size)
+				}
+
+				const onMouseUp = () => {
+					// Run resize one more time to set computed width/height.
+					size =
+						layout == LAYOUT_VERTICAL
+							? resize(pane.clientWidth)
+							: resize(pane.clientHeight)
+
+					// This removes is-resizing class to container
+					this.isResizing = false
+
+					removeEventListener('mousemove', onMouseMove)
+					removeEventListener('mouseup', onMouseUp)
+
+					removeEventListener('touchmove', onMouseMove)
+					removeEventListener('touchend', onMouseUp)
+
+					this.$emit('paneResizeStop', pane, resizer, size)
+				}
+
+				addEventListener('mousemove', onMouseMove)
+				addEventListener('mouseup', onMouseUp)
+
+				addEventListener('touchmove', onMouseMove)
+				addEventListener('touchend', onMouseUp)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.multipane {
+	display: flex;
+
+	&.layout-h {
+		flex-direction: column;
+	}
+
+	&.layout-v {
+		flex-direction: row;
+	}
+}
+
+.multipane > div {
+	position: relative;
+	z-index: 1;
+}
+
+.multipane-resizer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	z-index: 2 !important;
+	margin: 0;
+
+	--color: #e0e0e0;
+	--theme-color: white; // Add a variable for theme color
+
+	&:hover {
+		--color: #999;
+	}
+
+	&.dark {
+		--theme-color: #121212;
+	}
+}
+
+.layout-h > .multipane-resizer {
+	width: 100%;
+	height: 5px;
+	margin-top: -5px;
+	top: 5px;
+	cursor: row-resize;
+
+	background-image: linear-gradient(
+		to bottom,
+		transparent 40%,
+		var(--color) 40%,
+		var(--color) 60%,
+		transparent 60%
+	);
+
+	&:before {
+		display: block;
+		content: '';
+		width: 40px;
+		height: 3px;
+
+		background-image: linear-gradient(
+			to right,
+			var(--theme-color) 24%,
+			var(--color) 24%,
+			var(--color) 32%,
+			var(--theme-color) 32%,
+			var(--theme-color) 47%,
+			var(--color) 47%,
+			var(--color) 54%,
+			var(--theme-color) 54%,
+			var(--theme-color) 69%,
+			var(--color) 69%,
+			var(--color) 77%,
+			var(--theme-color) 77%
+		);
+
+		background-repeat: repeat-y;
+	}
+}
+
+.layout-v > .multipane-resizer {
+	width: 5px;
+	height: 100%;
+	margin-left: -5px;
+	left: 5px;
+	cursor: col-resize;
+
+	background-image: linear-gradient(
+		to right,
+		transparent 40%,
+		var(--color) 40%,
+		var(--color) 60%,
+		transparent 60%
+	);
+
+	&:before {
+		display: block;
+		content: '';
+		width: 3px;
+		height: 40px;
+
+		background-image: linear-gradient(
+			to bottom,
+			var(--theme-color) 24%,
+			var(--color) 24%,
+			var(--color) 32%,
+			var(--theme-color) 32%,
+			var(--theme-color) 47%,
+			var(--color) 47%,
+			var(--color) 54%,
+			var(--theme-color) 54%,
+			var(--theme-color) 69%,
+			var(--color) 69%,
+			var(--color) 77%,
+			var(--theme-color) 77%
+		);
+
+		background-repeat: repeat-x;
+	}
+}
+</style>
diff --git a/src/components/custom/MultipaneResizer.vue b/src/components/custom/MultipaneResizer.vue
new file mode 100644
index 0000000000..7413ccf73b
--- /dev/null
+++ b/src/components/custom/MultipaneResizer.vue
@@ -0,0 +1,3 @@
+<template>
+	<div class="multipane-resizer"><slot></slot></div>
+</template>
diff --git a/src/components/nodes-table/index.vue b/src/components/nodes-table/index.vue
index b873c66f16..f9f990125d 100644
--- a/src/components/nodes-table/index.vue
+++ b/src/components/nodes-table/index.vue
@@ -202,13 +202,10 @@
 				:value="richValue(item, 'protocol')"
 			/>
 			<div class="d-flex" v-else>
-				<rich-value
-					class="mr-1"
-					:value="getControllerProtocolIcon(false)"
-				/>
+				<rich-value class="mr-1" :value="getProtocolIcon(false)" />
 				<rich-value
 					v-if="item.supportsLongRange"
-					:value="getControllerProtocolIcon(true)"
+					:value="getProtocolIcon(true)"
 				/>
 			</div>
 		</template>
diff --git a/src/components/nodes-table/nodes-table.js b/src/components/nodes-table/nodes-table.js
index e1b589e8a9..eb7df9f2f8 100644
--- a/src/components/nodes-table/nodes-table.js
+++ b/src/components/nodes-table/nodes-table.js
@@ -1,7 +1,6 @@
 import draggable from 'vuedraggable'
 import colors from 'vuetify/lib/util/colors'
 import { ManagedItems } from '@/modules/ManagedItems'
-import { Protocols } from '@zwave-js/core/safe'
 
 import { mapState } from 'pinia'
 import {
@@ -26,6 +25,7 @@ import {
 import useBaseStore from '../../stores/base.js'
 import {
 	getBatteryDescription,
+	getProtocolIcon,
 	getProtocol,
 	getProtocolColor,
 } from '../../lib/utils.js'
@@ -258,20 +258,7 @@ export default {
 
 			return undefined
 		},
-		getControllerProtocolIcon(longRange) {
-			const protocol = longRange
-				? Protocols.ZWaveLongRange
-				: Protocols.ZWave
-
-			return {
-				align: 'center',
-				icon: mdiZWave,
-				iconStyle: `color: ${getProtocolColor({
-					protocol,
-				})}`,
-				description: getProtocol({ protocol }),
-			}
-		},
+		getProtocolIcon,
 		groupValue(group) {
 			return this.managedNodes.groupValue(group)
 		},
diff --git a/src/lib/SocketEvents.js b/src/lib/SocketEvents.js
index 262fd4661a..9641d9f806 100644
--- a/src/lib/SocketEvents.js
+++ b/src/lib/SocketEvents.js
@@ -1,4 +1,4 @@
-export const socketEvents = {
+export const socketEvents = Object.freeze({
 	init: 'INIT', // automatically sent when a new client connects to the socket
 	controller: 'CONTROLLER_CMD', // controller status updates
 	connected: 'CONNECTED', // socket status
@@ -19,12 +19,15 @@ export const socketEvents = {
 	grantSecurityClasses: 'GRANT_SECURITY_CLASSES',
 	validateDSK: 'VALIDATE_DSK',
 	inclusionAborted: 'INCLUSION_ABORTED',
-}
+	znifferFrame: 'ZNIFFER_FRAME',
+	znifferState: 'ZNIFFER_STATE',
+})
 
 // events from client ---> server
-export const inboundEvents = {
+export const inboundEvents = Object.freeze({
 	init: 'INITED', // get all nodes
 	zwave: 'ZWAVE_API', // call a zwave api
 	hass: 'HASS_API', // call an hass api
 	mqtt: 'MQTT_API', // call an mqtt api
-}
+	zniffer: 'ZNIFFER_API', // call a zniffer api
+})
diff --git a/src/lib/items.js b/src/lib/items.js
index dec1c14eb1..3938ee0dbb 100644
--- a/src/lib/items.js
+++ b/src/lib/items.js
@@ -1,4 +1,5 @@
 import { RFRegion, Protocols } from 'zwave-js/safe'
+import { ZnifferRegion } from '@zwave-js/core/safe'
 
 export const rfRegions = Object.keys(RFRegion)
 	.filter((k) => isNaN(k))
@@ -6,6 +7,15 @@ export const rfRegions = Object.keys(RFRegion)
 		text: key,
 		value: RFRegion[key],
 	}))
+	.sort((a, b) => a.text.localeCompare(b.text))
+
+export const znifferRegions = Object.keys(ZnifferRegion)
+	.filter((k) => isNaN(k))
+	.map((key) => ({
+		text: key,
+		value: ZnifferRegion[key],
+	}))
+	.sort((a, b) => a.text.localeCompare(b.text))
 
 export const protocolsItems = [
 	{
diff --git a/src/lib/utils.js b/src/lib/utils.js
index ae0fc9fd99..bfa9230f98 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,6 +1,20 @@
-import { isValidDSK, Protocols } from '@zwave-js/core/safe'
+import {
+	isValidDSK,
+	Protocols,
+	znifferProtocolDataRateToString,
+} from '@zwave-js/core/safe'
 import colors from 'vuetify/lib/util/colors'
 
+import {
+	isRssiError,
+	rssiToString,
+	getEnumMemberName,
+	ZWaveFrameType,
+	LongRangeFrameType,
+} from 'zwave-js/safe'
+import { znifferRegions } from './items'
+import { mdiZWave } from '@mdi/js'
+
 export function copy(o) {
 	return JSON.parse(JSON.stringify(o))
 }
@@ -202,3 +216,104 @@ export function getProtocolColor(node) {
 			return colors.grey.base
 	}
 }
+
+export function getRegion(item) {
+	return (
+		znifferRegions.find((r) => r.value === item?.region)?.text ||
+		`Unknown region ${item?.region}`
+	)
+}
+export function getRoute(item, withRssi = false) {
+	const repRSSI = item.repeaterRSSI || []
+	const dir = item.direction === 'inbound' ? '←' : '→'
+	const hop = item.hop !== undefined ? item.hop : -1
+	const route = [
+		item.sourceNodeId,
+		...(item.repeaters || []),
+		item.destinationNodeId,
+	].map(
+		(r, i) =>
+			`${r}${
+				withRssi && repRSSI[i - 1] && !isRssiError(repRSSI[i - 1])
+					? ` (${rssiToString(repRSSI[i - 1])})`
+					: ''
+			}`,
+	)
+
+	let routeString = ''
+
+	if (hop >= 0) {
+		// highlight the hop
+		for (let i = 0; i < route.length; i++) {
+			routeString += route[i]
+			if (i < route.length - 1) {
+				routeString += ` ${
+					hop === i ? '<b class="text-decoration-underline">' : ''
+				}${dir}${hop === i ? '</b>' : ''} `
+			}
+		}
+	} else {
+		routeString = route.join(` ${dir} `)
+	}
+
+	return routeString
+}
+export function getType(item) {
+	if (item.protocol === Protocols.ZWaveLongRange) {
+		return getEnumMemberName(LongRangeFrameType, item.type)
+	} else {
+		return getEnumMemberName(ZWaveFrameType, item.type)
+	}
+}
+export function getRssi(item) {
+	if (item.rssi && !isRssiError(item.rssi)) {
+		return rssiToString(item.rssi)
+	}
+
+	return item.rssiRaw
+}
+export function getProtocolDataRate(item, withProtocol = true) {
+	return item.protocolDataRate !== undefined
+		? znifferProtocolDataRateToString(item.protocolDataRate, withProtocol)
+		: '---'
+}
+
+/**  Human friendly number suffix */
+export function humanFriendlyNumber(n, d) {
+	const d2 = Math.pow(10, d)
+	const s = ' KMGTPE'
+	let i = 0
+	const c = 1000
+
+	while ((n >= c || n <= -c) && ++i < s.length) n = n / c
+
+	i = i >= s.length ? s.length - 1 : i
+
+	return Math.round(n * d2) / d2 + s[i]
+}
+
+export function openInWindow(title, height = 800, width = 600) {
+	const newwindow = window.open(
+		window.location.href + '/#no-topbar',
+		title,
+		`height=${height},width=${width},status=no,toolbar:no,scrollbars:no,menubar:no`, // check https://www.w3schools.com/jsref/met_win_open.asp for all available specs
+	)
+	if (window.focus) {
+		newwindow.focus()
+	}
+}
+
+export function getProtocolIcon(protocol) {
+	if (typeof protocol === 'boolean') {
+		protocol = protocol ? Protocols.ZWaveLongRange : Protocols.ZWave
+	}
+
+	return {
+		align: 'center',
+		icon: mdiZWave,
+		iconStyle: `color: ${getProtocolColor({
+			protocol,
+		})}`,
+		description: getProtocol({ protocol }),
+	}
+}
diff --git a/src/router/index.js b/src/router/index.js
index e1709120a1..814c6bb074 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,7 @@ const Login = () => import('@/views/Login.vue')
 const ErrorPage = () => import('@/views/ErrorPage.vue')
 const SmartStart = () => import('@/views/SmartStart.vue')
 const ControllerChart = () => import('@/views/ControllerChart.vue')
+const Zniffer = () => import('@/views/Zniffer.vue')
 
 import ConfigApis from '../apis/ConfigApis'
 import useBaseStore from '../stores/base'
@@ -29,6 +30,7 @@ export const Routes = {
 	mesh: '/mesh',
 	smartStart: '/smart-start',
 	controllerChart: '/controller-chart',
+	zniffer: '/zniffer',
 }
 
 Routes.main = Routes.controlPanel
@@ -55,6 +57,15 @@ const router = new Router({
 				requiresAuth: true,
 			},
 		},
+		{
+			path: Routes.zniffer,
+			name: 'Zniffer',
+			component: Zniffer,
+			props: true,
+			meta: {
+				requiresAuth: true,
+			},
+		},
 		{
 			path: Routes.smartStart,
 			name: 'Smart Start',
diff --git a/src/stores/base.js b/src/stores/base.js
index 5f0af0cd28..b5aea44829 100644
--- a/src/stores/base.js
+++ b/src/stores/base.js
@@ -24,6 +24,7 @@ const useBaseStore = defineStore('base', {
 			smartStartTable: {},
 		}),
 		zwave: {
+			enabled: true,
 			port: '/dev/zwave',
 			allowBootloaderOnly: false,
 			commandsTimeout: 30,
@@ -35,7 +36,6 @@ const useBaseStore = defineStore('base', {
 					measured0dBm: undefined,
 				},
 			},
-			logEnabled: true,
 			securityKeys: {
 				S2_Unauthenticated: '',
 				S2_Authenticated: '',
@@ -47,6 +47,7 @@ const useBaseStore = defineStore('base', {
 				S2_AccessControl: '',
 			},
 			deviceConfigPriorityDir: '',
+			logEnabled: true,
 			logToFile: true,
 			maxFiles: 7,
 			serverEnabled: false,
@@ -81,6 +82,25 @@ const useBaseStore = defineStore('base', {
 			username: undefined,
 			password: undefined,
 		},
+		zniffer: {
+			enabled: false,
+			port: '',
+			logEnabled: true,
+			logToFile: true,
+			maxFiles: 7,
+			securityKeys: {
+				S2_Unauthenticated: '',
+				S2_Authenticated: '',
+				S2_AccessControl: '',
+				S0_Legacy: '',
+			},
+			securityKeysLongRange: {
+				S2_Authenticated: '',
+				S2_AccessControl: '',
+			},
+			convertRSSI: false,
+			defaultFrequency: undefined,
+		},
 		devices: [],
 		gateway: {
 			type: 0,
@@ -107,6 +127,11 @@ const useBaseStore = defineStore('base', {
 			controllerStatus: 'Unknown',
 			newConfigVersion: undefined,
 		},
+		znifferState: {
+			error: '',
+			started: false,
+			frequency: false,
+		},
 		ui: {
 			darkMode: settings.load('dark', false),
 			navTabs: settings.load('navTabs', false),
@@ -169,6 +194,12 @@ const useBaseStore = defineStore('base', {
 			this.appInfo.serverVersion = data.serverVersion
 			this.appInfo.newConfigVersion = data.newConfigVersion
 		},
+		setZnifferState(data) {
+			this.znifferState = {
+				...this.znifferState,
+				...data,
+			}
+		},
 		setValue(valueId) {
 			const toReplace = this.getValue(valueId)
 			const node = this.getNode(valueId.nodeId)
@@ -466,6 +497,7 @@ const useBaseStore = defineStore('base', {
 					this.zwave.rf.txPower = {}
 				}
 				Object.assign(this.mqtt, conf.mqtt || {})
+				Object.assign(this.zniffer, conf.zniffer || {})
 				Object.assign(this.gateway, conf.gateway || {})
 				Object.assign(this.backup, conf.backup || {})
 				Object.assign(this.ui, conf.ui || {})
diff --git a/src/views/Debug.vue b/src/views/Debug.vue
index c0082a217c..9ba27dffb1 100644
--- a/src/views/Debug.vue
+++ b/src/views/Debug.vue
@@ -2,50 +2,62 @@
 	<v-container grid-list-md>
 		<v-row>
 			<v-col cols="12">
-				<v-btn color="green darken-1" text @click="toggleDebug(true)"
-					>Start</v-btn
-				>
-				<v-btn color="red darken-1" text @click="toggleDebug(false)"
-					>Stop</v-btn
-				>
-				<v-btn color="blue darken-1" text @click="debug = []"
-					>Clear</v-btn
-				>
-
-				<v-btn
-					v-if="!hideTopbar"
-					color="yellow darken-1"
+				<v-alert
+					class="mb-0"
+					v-if="
+						!zwave.logEnabled ||
+						!gateway.logEnabled ||
+						zwave.logToFile
+					"
+					dense
 					text
-					@click="newWindow"
-					>Open in window</v-btn
+					type="warning"
 				>
+					<p class="ma-1" v-if="!zwave.logEnabled">
+						• ZwaveJS Logs are disabled. Please enable it on
+						"Settings > Z-Wave" in order to see Application logs
+					</p>
+					<p class="ma-1" v-if="!gateway.logEnabled">
+						• Application Logs are disabled. Please enable it on
+						"Settings > General" in order to see ZwaveJS logs
+					</p>
+					<p class="ma-1" v-if="zwave.logToFile">
+						• ZwaveJS "Log to file" is enabled. Disable it in order
+						to see ZwaveJS logs
+					</p>
+				</v-alert>
 			</v-col>
 
-			<v-alert
-				class="mb-0"
-				v-if="
-					!zwave.logEnabled || !gateway.logEnabled || zwave.logToFile
-				"
-				dense
-				text
-				type="warning"
-			>
-				<p class="ma-1" v-if="!zwave.logEnabled">
-					• ZwaveJS Logs are disabled. Please enable it on "Settings >
-					Z-Wave" in order to see Application logs
-				</p>
-				<p class="ma-1" v-if="!gateway.logEnabled">
-					• Application Logs are disabled. Please enable it on
-					"Settings > General" in order to see ZwaveJS logs
-				</p>
-				<p class="ma-1" v-if="zwave.logToFile">
-					• ZwaveJS "Log to file" is enabled. Disable it in order to
-					see ZwaveJS logs
-				</p>
-			</v-alert>
+			<v-col style="max-width: 220px; margin-top: -2px">
+				<v-btn-toggle dense multiple>
+					<v-tooltip
+						bottom
+						v-for="button in buttons"
+						:key="button.label"
+						:target="`#${button.id}`"
+					>
+						<template v-slot:activator="{ on }">
+							<v-btn
+								:id="button.id"
+								:color="button.color"
+								:disabled="button.disabled"
+								@click="button.action"
+								v-on="on"
+							>
+								<v-icon>{{ button.icon }}</v-icon>
+							</v-btn>
+						</template>
+						<span>{{ button.tooltip }}</span>
+					</v-tooltip>
+				</v-btn-toggle>
+			</v-col>
 
-			<v-col class="pa-2" cols="12">
+			<v-col class="pa-2" cols="6">
 				<v-text-field
+					flat
+					outlined
+					dense
+					single-line
 					style="max-width: 300px"
 					label="Filter logs"
 					hint="Type to filter logs, case sensitive"
@@ -79,6 +91,7 @@ import { socketEvents } from '@server/lib/SocketEvents'
 import { AnsiUp } from 'ansi_up'
 import { mapState, mapActions } from 'pinia'
 import useBaseStore from '../stores/base.js'
+import { openInWindow } from '../lib/utils'
 
 const ansiUp = new AnsiUp()
 
@@ -103,6 +116,46 @@ export default {
 				return line.includes(this.filter)
 			})
 		},
+		buttons() {
+			return [
+				{
+					id: 'start',
+					label: 'Start',
+					icon: 'play_arrow',
+					color: 'green',
+					tooltip: 'Start',
+					action: () => this.toggleDebug(true),
+					disabled: this.debugActive,
+				},
+				{
+					id: 'stop',
+					label: 'Stop',
+					icon: 'stop',
+					color: 'red',
+					tooltip: 'Stop',
+					action: () => this.toggleDebug(false),
+					disabled: !this.debugActive,
+				},
+				{
+					id: 'clear',
+					label: 'Clear',
+					icon: 'delete',
+					color: 'orange',
+					tooltip: 'Clear',
+					action: () => (this.debug = []),
+					disabled: this.debug.length === 0,
+				},
+				{
+					id: 'open',
+					label: 'Open',
+					icon: 'open_in_new',
+					color: 'primary',
+					tooltip: 'Open in window',
+					action: this.newWindow,
+					disabled: false,
+				},
+			]
+		},
 	},
 	data() {
 		return {
@@ -119,14 +172,7 @@ export default {
 			this.showSnackbar('Debug ' + (v ? 'activated' : 'disabled'))
 		},
 		newWindow() {
-			const newwindow = window.open(
-				window.location.href + '/#no-topbar',
-				'DEBUG',
-				'height=800,width=600,status=no,toolbar:no,scrollbars:no,menubar:no', // check https://www.w3schools.com/jsref/met_win_open.asp for all available specs
-			)
-			if (window.focus) {
-				newwindow.focus()
-			}
+			openInWindow('DEBUG')
 		},
 	},
 	mounted() {
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index acf108765c..c2da581bcf 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -51,7 +51,7 @@
 					</v-expansion-panel-content>
 					<v-divider />
 				</v-expansion-panel>
-				<v-expansion-panel key="general">
+				<v-expansion-panel key="General">
 					<v-expansion-panel-header>
 						<v-row no-gutters>
 							<v-col align-self="center"> General </v-col>
@@ -476,10 +476,22 @@
 					<v-divider />
 				</v-expansion-panel>
 
-				<v-expansion-panel key="zwave">
+				<v-expansion-panel key="Zwave">
 					<v-expansion-panel-header>
 						<v-row no-gutters>
-							<v-col align-self="center"> Z-Wave </v-col>
+							<v-col align-self="center">
+								<v-row align-self="center">
+									<span class="my-auto ml-3"> Z-Wave </span>
+									<v-checkbox
+										class="mt-0 ml-2"
+										hide-details
+										@click.stop
+										label="Enabled"
+										v-model="newZwave.enabled"
+									></v-checkbox>
+								</v-row>
+							</v-col>
+
 							<v-col class="text-right pr-5">
 								<v-btn
 									@click.stop="openDocs('zwave')"
@@ -493,7 +505,7 @@
 							</v-col>
 						</v-row>
 					</v-expansion-panel-header>
-					<v-expansion-panel-content>
+					<v-expansion-panel-content v-if="newZwave.enabled">
 						<v-card flat>
 							<v-card-text>
 								<v-row>
@@ -503,7 +515,10 @@
 											label="Serial Port"
 											hint="Ex /dev/ttyUSB0. If your port is not listed here just write the port path here"
 											persistent-hint
-											:rules="[rules.required]"
+											:rules="[
+												rules.required,
+												differentPorts,
+											]"
 											required
 											:items="serial_ports"
 										></v-combobox>
@@ -542,18 +557,22 @@
 													fixKey(
 														$event,
 														'S2_Unauthenticated',
+														newZwave.securityKeys,
 													)
 												"
 												:rules="[
 													rules.validKey,
 													rules.validLength,
-													differentKeys(),
+													differentKeys(
+														newZwave.securityKeys,
+													),
 												]"
 												persistent-hint
 												append-outer-icon="wifi_protected_setup"
 												@click:append-outer="
 													randomKey(
 														'S2_Unauthenticated',
+														newZwave.securityKeys,
 													)
 												"
 											></v-text-field>
@@ -568,6 +587,7 @@
 													fixKey(
 														$event,
 														'S2_Authenticated',
+														newZwave.securityKeys,
 													)
 												"
 												prepend-icon="vpn_key"
@@ -576,12 +596,15 @@
 												:rules="[
 													rules.validKey,
 													rules.validLength,
-													differentKeys(),
+													differentKeys(
+														newZwave.securityKeys,
+													),
 												]"
 												append-outer-icon="wifi_protected_setup"
 												@click:append-outer="
 													randomKey(
 														'S2_Authenticated',
+														newZwave.securityKeys,
 													)
 												"
 											></v-text-field>
@@ -596,6 +619,7 @@
 													fixKey(
 														$event,
 														'S2_AccessControl',
+														newZwave.securityKeys,
 													)
 												"
 												prepend-icon="vpn_key"
@@ -603,12 +627,15 @@
 												:rules="[
 													rules.validKey,
 													rules.validLength,
-													differentKeys(),
+													differentKeys(
+														newZwave.securityKeys,
+													),
 												]"
 												append-outer-icon="wifi_protected_setup"
 												@click:append-outer="
 													randomKey(
 														'S2_AccessControl',
+														newZwave.securityKeys,
 													)
 												"
 											></v-text-field>
@@ -627,11 +654,16 @@
 												:rules="[
 													rules.validKey,
 													rules.validLength,
-													differentKeys(),
+													differentKeys(
+														newZwave.securityKeys,
+													),
 												]"
 												append-outer-icon="wifi_protected_setup"
 												@click:append-outer="
-													randomKey('S0_Legacy')
+													randomKey(
+														'S0_Legacy',
+														newZwave.securityKeys,
+													)
 												"
 											></v-text-field>
 										</v-col>
@@ -658,7 +690,7 @@
 													fixKey(
 														$event,
 														'S2_Authenticated',
-														true,
+														newZwave.securityKeysLongRange,
 													)
 												"
 												prepend-icon="vpn_key"
@@ -667,13 +699,15 @@
 												:rules="[
 													rules.validKey,
 													rules.validLength,
-													differentKeys(true),
+													differentKeys(
+														newZwave.securityKeysLongRange,
+													),
 												]"
 												append-outer-icon="wifi_protected_setup"
 												@click:append-outer="
 													randomKey(
 														'S2_Authenticated',
-														true,
+														newZwave.securityKeysLongRange,
 													)
 												"
 											></v-text-field>
@@ -689,7 +723,7 @@
 													fixKey(
 														$event,
 														'S2_AccessControl',
-														true,
+														newZwave.securityKeysLongRange,
 													)
 												"
 												prepend-icon="vpn_key"
@@ -697,13 +731,15 @@
 												:rules="[
 													rules.validKey,
 													rules.validLength,
-													differentKeys(true),
+													differentKeys(
+														newZwave.securityKeysLongRange,
+													),
 												]"
 												append-outer-icon="wifi_protected_setup"
 												@click:append-outer="
 													randomKey(
 														'S2_AccessControl',
-														true,
+														newZwave.securityKeysLongRange,
 													)
 												"
 											></v-text-field>
@@ -964,6 +1000,357 @@
 							</v-card-text>
 						</v-card>
 					</v-expansion-panel-content>
+					<v-divider />
+				</v-expansion-panel>
+
+				<v-expansion-panel key="Zniffer">
+					<v-expansion-panel-header>
+						<v-row no-gutters>
+							<v-col align-self="center">
+								<v-row align-self="center">
+									<span class="my-auto ml-3"> Zniffer </span>
+									<v-checkbox
+										class="mt-0 ml-2"
+										hide-details
+										label="Enabled"
+										@click.stop
+										v-model="newZniffer.enabled"
+									></v-checkbox>
+								</v-row>
+							</v-col>
+							<v-col class="text-right pr-5">
+								<v-btn
+									@click.stop="openDocs('zniffer')"
+									color="primary"
+									outlined
+									x-small
+								>
+									Docs
+									<v-icon x-small right>launch</v-icon>
+								</v-btn>
+							</v-col>
+						</v-row>
+					</v-expansion-panel-header>
+					<v-expansion-panel-content v-if="newZniffer.enabled">
+						<v-card flat>
+							<v-card-text>
+								<v-row>
+									<v-col cols="12" sm="6">
+										<v-combobox
+											v-model="newZniffer.port"
+											label="Serial Port"
+											hint="Ex /dev/ttyUSB0. If your port is not listed here just write the port path here"
+											persistent-hint
+											:rules="[
+												rules.required,
+												differentPorts,
+											]"
+											required
+											:items="serial_ports"
+										></v-combobox>
+									</v-col>
+									<v-row
+										class="mt-0"
+										v-if="newZniffer.securityKeys"
+									>
+										<v-col cols="12">
+											<v-subheader
+												class="font-weight-bold primary--text"
+											>
+												Security Keys
+											</v-subheader>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZniffer.securityKeys
+														.S2_Unauthenticated
+												"
+												label="S2 Unauthenticated"
+												prepend-icon="vpn_key"
+												@paste="
+													fixKey(
+														$event,
+														'S2_Unauthenticated',
+														newZniffer.securityKeys,
+													)
+												"
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys(
+														newZniffer.securityKeys,
+													),
+												]"
+												persistent-hint
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S2_Unauthenticated',
+														newZniffer.securityKeys,
+													)
+												"
+											></v-text-field>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZniffer.securityKeys
+														.S2_Authenticated
+												"
+												@paste="
+													fixKey(
+														$event,
+														'S2_Authenticated',
+														newZniffer.securityKeys,
+													)
+												"
+												prepend-icon="vpn_key"
+												label="S2 Authenticated"
+												persistent-hint
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys(
+														newZniffer.securityKeys,
+													),
+												]"
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S2_Authenticated',
+														newZniffer.securityKeys,
+													)
+												"
+											></v-text-field>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZniffer.securityKeys
+														.S2_AccessControl
+												"
+												@paste="
+													fixKey(
+														$event,
+														'S2_AccessControl',
+														newZniffer.securityKeys,
+													)
+												"
+												prepend-icon="vpn_key"
+												label="S2 Access Control"
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys(
+														newZniffer.securityKeys,
+													),
+												]"
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S2_AccessControl',
+														newZniffer.securityKeys,
+													)
+												"
+											></v-text-field>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZniffer.securityKeys
+														.S0_Legacy
+												"
+												@paste="
+													fixKey($event, 'S0_Legacy')
+												"
+												prepend-icon="vpn_key"
+												label="S0 Legacy"
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys(
+														newZniffer.securityKeys,
+													),
+												]"
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S0_Legacy',
+														newZniffer.securityKeys,
+													)
+												"
+											></v-text-field>
+										</v-col>
+									</v-row>
+									<v-row
+										class="mt-0"
+										v-if="newZniffer.securityKeysLongRange"
+									>
+										<v-col cols="12">
+											<v-subheader
+												class="font-weight-bold primary--text"
+											>
+												Security Keys (Long Range)
+											</v-subheader>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZniffer
+														.securityKeysLongRange
+														.S2_Authenticated
+												"
+												@paste="
+													fixKey(
+														$event,
+														'S2_Authenticated',
+														newZniffer.securityKeysLongRange,
+													)
+												"
+												prepend-icon="vpn_key"
+												label="S2 Authenticated"
+												persistent-hint
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys(
+														newZniffer.securityKeysLongRange,
+													),
+												]"
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S2_Authenticated',
+														newZniffer.securityKeysLongRange,
+													)
+												"
+											></v-text-field>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZniffer
+														.securityKeysLongRange
+														.S2_AccessControl
+												"
+												@paste="
+													fixKey(
+														$event,
+														'S2_AccessControl',
+														newZniffer.securityKeysLongRange,
+													)
+												"
+												prepend-icon="vpn_key"
+												label="S2 Access Control"
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys(
+														newZniffer.securityKeysLongRange,
+													),
+												]"
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S2_AccessControl',
+														newZniffer.securityKeysLongRange,
+													)
+												"
+											></v-text-field>
+										</v-col>
+									</v-row>
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="The RSSI values reported by the Zniffer are not actual RSSI values. They can be converted to dBm, but the conversion is chip dependent and not documented for 700/800 series Zniffers. Set this option to `true` enable the conversion. Otherwise the raw values from the Zniffer will be used."
+											persistent-hint
+											label="Convert RSSI"
+											v-model="newZniffer.convertRSSI"
+										></v-switch>
+									</v-col>
+
+									<v-col cols="12" sm="6">
+										<v-select
+											label="Default frequency"
+											persistent-hint
+											hint="The frequency to initialize the Zniffer with. If not specified, the current setting will be kept."
+											:items="znifferRegions"
+											clearable
+											v-model="
+												newZniffer.defaultFrequency
+											"
+										>
+										</v-select>
+									</v-col>
+									<v-col cols="12"> </v-col>
+
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="Enable zniffer logging"
+											persistent-hint
+											label="Log Enabled"
+											v-model="newZniffer.logEnabled"
+										></v-switch>
+									</v-col>
+									<v-col
+										v-if="newZniffer.logEnabled"
+										cols="12"
+										sm="6"
+									>
+										<v-select
+											:items="logLevels"
+											v-model="newZniffer.logLevel"
+											label="Log Level"
+										></v-select>
+									</v-col>
+									<v-col
+										v-if="newZniffer.logEnabled"
+										cols="12"
+										sm="6"
+									>
+										<v-switch
+											hint="Store zniffer logs in a file (stored in store folder)"
+											persistent-hint
+											label="Log to file"
+											v-model="newZniffer.logToFile"
+										></v-switch>
+									</v-col>
+									<v-col
+										cols="12"
+										sm="6"
+										v-if="newZniffer.logEnabled"
+									>
+										<v-text-field
+											v-model.number="newZniffer.maxFiles"
+											label="Max files"
+											:rules="[rules.required]"
+											required
+											persistent-hint
+											hint="Maximum number of log files to keep"
+											type="number"
+										></v-text-field>
+									</v-col>
+									<v-col
+										v-if="newZniffer.logEnabled"
+										cols="12"
+										sm="6"
+									>
+										<v-combobox
+											hint="Choose which nodes to log. Leave this empty to log all nodes"
+											persistent-hint
+											label="Log nodes"
+											:items="newZniffer.nodeFilter || []"
+											multiple
+											:rules="[rules.validNodeLog]"
+											chips
+											deletable-chips
+											v-model="newZniffer.nodeFilter"
+										></v-combobox>
+									</v-col>
+								</v-row>
+							</v-card-text>
+						</v-card>
+					</v-expansion-panel-content>
 				</v-expansion-panel>
 			</v-expansion-panels>
 
@@ -1443,6 +1830,7 @@
 				:devices="devices"
 			/>
 		</v-form>
+
 		<v-row
 			:justify="$vuetify.breakpoint.xsOnly ? 'center' : 'end'"
 			class="mt-2 mb-3"
@@ -1495,7 +1883,7 @@ import { mapActions, mapState } from 'pinia'
 import ConfigApis from '@/apis/ConfigApis'
 import { parse } from 'native-url'
 import { wait, copy, isUndef } from '../lib/utils'
-import { rfRegions } from '../lib/items'
+import { rfRegions, znifferRegions } from '../lib/items'
 import cronstrue from 'cronstrue'
 import useBaseStore from '../stores/base'
 
@@ -1583,6 +1971,14 @@ export default {
 				'This field is required.'
 			)
 		},
+		differentPorts() {
+			return (
+				(this.newZwave.enabled &&
+					this.newZniffer.enabled &&
+					this.newZwave.port !== this.newZniffer.port) ||
+				'Zniffer and Z-Wave ports must be different.'
+			)
+		},
 		validPayload() {
 			return (
 				!this.newGateway.hassDiscovery ||
@@ -1598,6 +1994,7 @@ export default {
 		},
 		...mapState(useBaseStore, [
 			'zwave',
+			'zniffer',
 			'mqtt',
 			'gateway',
 			'backup',
@@ -1619,6 +2016,7 @@ export default {
 	data() {
 		return {
 			rfRegions,
+			znifferRegions,
 			valid_zwave: true,
 			dialogValue: false,
 			sslDisabled: false,
@@ -1630,6 +2028,7 @@ export default {
 					txPower: {},
 				},
 			},
+			newZniffer: {},
 			newBackup: {},
 			editedValue: {},
 			editedIndex: -1,
@@ -1796,12 +2195,9 @@ export default {
 
 			return res
 		},
-		differentKeys(isLongRange = false) {
+		differentKeys(obj) {
 			return () => {
-				const keys = isLongRange
-					? this.newZwave.securityKeysLongRange
-					: this.newZwave.securityKeys
-				const values = Object.values(keys)
+				const values = Object.values(obj)
 
 				// ensure there are no duplicates
 				return (
@@ -1810,16 +2206,12 @@ export default {
 				)
 			}
 		},
-		fixKey(event, key, isLongRange = false) {
+		fixKey(event, key, obj) {
 			let data = event.clipboardData?.getData('Text')
 
-			const keys = isLongRange
-				? this.newZwave.securityKeysLongRange
-				: this.newZwave.securityKeys
-
 			if (data) {
 				data = data.replace(/0x|,|\s/gi, '')
-				this.$set(keys, key, data)
+				this.$set(obj, key, data)
 				event.preventDefault()
 			}
 		},
@@ -1844,11 +2236,7 @@ export default {
 				return item
 			}
 		},
-		randomKey(k, isLongRange = false) {
-			const keys = isLongRange
-				? this.newZwave.securityKeysLongRange
-				: this.newZwave.securityKeys
-
+		randomKey(k, obj) {
 			let key = ''
 
 			while (key.length < 32) {
@@ -1858,7 +2246,7 @@ export default {
 				key += x.length === 2 ? x : '0' + x
 			}
 
-			this.$set(keys, k, key)
+			this.$set(obj, k, key)
 		},
 		readFile(file, callback) {
 			const reader = new FileReader()
@@ -1900,6 +2288,7 @@ export default {
 				gateway: this.newGateway,
 				zwave: this.newZwave,
 				backup: this.newBackup,
+				zniffer: this.newZniffer,
 				ui: this.ui,
 			}
 		},
@@ -2065,6 +2454,7 @@ export default {
 		resetConfig() {
 			this.newGateway = copy(this.gateway)
 			this.newZwave = copy(this.zwave)
+			this.newZniffer = copy(this.zniffer)
 			this.newMqtt = copy(this.mqtt)
 			this.newBackup = copy(this.backup)
 		},
diff --git a/src/views/Zniffer.vue b/src/views/Zniffer.vue
new file mode 100644
index 0000000000..58e673080d
--- /dev/null
+++ b/src/views/Zniffer.vue
@@ -0,0 +1,923 @@
+<template>
+	<v-container class="px-3" style="max-width: unset">
+		<multipane class="horizontal-panes" layout="horizontal">
+			<div
+				class="pane"
+				ref="topPane"
+				v-intersect.once="bindTopPaneObserver"
+				:style="{
+					minHeight: '300px',
+					height: `${topPaneHeight}px`,
+				}"
+			>
+				<v-row v-if="zniffer.enabled">
+					<v-col style="max-width: 220px; margin-top: 7px">
+						<v-btn-toggle dense multiple>
+							<v-tooltip
+								bottom
+								v-for="button in buttons"
+								:key="button.label"
+								:target="`#${button.id}`"
+							>
+								<template v-slot:activator="{ on }">
+									<v-btn
+										:id="button.id"
+										:color="button.color"
+										:disabled="button.disabled"
+										@click="button.action"
+										v-on="on"
+									>
+										<v-icon>{{ button.icon }}</v-icon>
+									</v-btn>
+								</template>
+								<span>{{ button.tooltip }}</span>
+							</v-tooltip>
+						</v-btn-toggle>
+					</v-col>
+					<v-col
+						ref="settingCol"
+						v-resize="onTopColResize"
+						class="pa-0 pt-2"
+						cols="6"
+					>
+						<v-text-field
+							v-model="search"
+							clearable
+							flat
+							persistent-hint
+							hint="Search expression using JS. Click on info button for more info"
+							:error="searchError"
+							:error-messages="
+								searchError ? ['Invalid search'] : []
+							"
+							outlined
+							dense
+							single-line
+							class="ma-2"
+							prepend-inner-icon="search"
+							label="Search"
+						>
+							<template v-slot:append>
+								<v-menu offset-y>
+									<template v-slot:activator="{ on }">
+										<v-icon v-on="on" color="grey" size="20"
+											>info</v-icon
+										>
+									</template>
+									<v-card>
+										<v-card-text>
+											<p>
+												Write a custom filter function
+												in JS. Function arguments are:
+												frame (the full frame object),
+												homeId, ch, src, dest,
+												protocolDataRate, hop, dir
+												(direction), repeaters.
+											</p>
+											<strong>Examples:</strong>
+											<ul>
+												<li>
+													<code>frame.corrupted</code>
+												</li>
+												<li>
+													<code
+														>src === 1 && dest ===
+														2</code
+													>
+												</li>
+												<li>
+													<code
+														>protocolDataRate ===
+														'100kbps'</code
+													>
+												</li>
+												<li>
+													<code
+														>homeId ===
+														'12345678'</code
+													>
+												</li>
+												<li>
+													<code>hop > 1</code>
+												</li>
+
+												<li>
+													<code
+														>dir === 'inbound'</code
+													>
+												</li>
+												<li>
+													<code
+														>repeaters.length >
+														0</code
+													>
+												</li>
+											</ul>
+										</v-card-text>
+									</v-card>
+								</v-menu>
+							</template>
+							<!-- add to append-outer slot the total numer of frames -->
+
+							<template v-slot:append-outer>
+								<v-col
+									style="margin-top: -7px"
+									v-if="totalFrames"
+									class="pa-0 caption grey--text text-center"
+								>
+									<p class="mb-0">Frames</p>
+									<p class="mb-0">
+										{{
+											humanFriendlyNumber(totalFrames, 2)
+										}}
+									</p>
+								</v-col>
+							</template>
+						</v-text-field>
+					</v-col>
+
+					<v-col cols="12">
+						<v-data-table
+							v-intersect.once="bindScroll"
+							:headers="headers"
+							:items="framesLimited"
+							:item-style="getRowStyle"
+							@click:row="onRowClick"
+							single-select
+							fixed-header
+							dense
+							:height="topPaneHeight - offsetTop"
+							id="framesTable"
+							ref="framesTable"
+							hide-default-footer
+							disable-pagination
+							:mobile-breakpoint="-1"
+						>
+							<template v-slot:[`item.timestamp`]="{ item }">
+								{{ getTimestamp(item.timestamp) }}
+							</template>
+
+							<template v-slot:[`item.channel`]="{ item }">
+								{{ item.channel }}
+							</template>
+
+							<template v-slot:[`item.rssi`]="{ item }">
+								{{ getRssi(item) }}
+							</template>
+
+							<template
+								v-slot:[`item.protocolDataRate`]="{ item }"
+							>
+								<div class="d-flex text-center">
+									<rich-value
+										:value="getProtocolIcon(item.protocol)"
+									/>
+									<span class="ml-1">
+										{{
+											getProtocolDataRate(item, false) +
+											(item.speedModified ? ' 🐌' : '')
+										}}
+									</span>
+								</div>
+							</template>
+
+							<template v-slot:[`item.type`]="{ item }">
+								{{ getType(item) }}
+							</template>
+
+							<template v-slot:[`item.sourceNodeId`]="{ item }">
+								<span v-html="getRoute(item)"></span>
+							</template>
+
+							<template v-slot:[`item.homeId`]="{ item }">
+								{{ item.homeId?.toString(16) }}
+							</template>
+
+							<template v-slot:[`item.payload`]="{ item }">
+								<span v-if="item.parsedPayload">
+									{{ getPayloadTags(item.parsedPayload) }}
+								</span>
+								<span v-else-if="item.payload">
+									{{ item.payload }}
+								</span>
+								<span v-else>---</span>
+							</template>
+
+							<template v-if="start > 0" v-slot:[`body.prepend`]>
+								<tr>
+									<td
+										:colspan="headers.length"
+										class="text-center"
+										:style="
+											'padding-top:' + startHeight + 'px'
+										"
+									>
+										<!-- <v-skeleton-loader
+											type="table-row"
+										/><v-skeleton-loader type="table-row" /> -->
+									</td>
+								</tr>
+							</template>
+							<template
+								v-if="start + perPage <= totalFrames"
+								v-slot:[`body.append`]
+							>
+								<tr>
+									<td
+										:colspan="headers.length"
+										class="text-center"
+										:style="
+											'padding-top:' + endHeight + 'px'
+										"
+									>
+										<!-- <v-skeleton-loader type="table-row" /> -->
+									</td>
+								</tr>
+							</template>
+						</v-data-table>
+
+						<v-tooltip v-if="!autoScroll" left>
+							<template v-slot:activator="{ on }">
+								<v-btn
+									color="purple"
+									@click="enableAutoScroll()"
+									dark
+									small
+									fab
+									hover
+									top
+									absolute
+									right
+									style="top: 40px"
+									v-on="on"
+								>
+									<v-icon>vertical_align_bottom</v-icon>
+								</v-btn>
+							</template>
+							<span>Enable autoscroll</span>
+						</v-tooltip>
+					</v-col>
+				</v-row>
+				<v-row v-else>
+					<v-col cols="12">
+						<v-alert text type="info">
+							<span
+								>Zniffer is disabled, enable it in
+								settings</span
+							>
+						</v-alert>
+					</v-col>
+				</v-row>
+			</div>
+			<multipane-resizer :class="$vuetify.theme.dark ? 'dark' : ''" />
+			<div
+				class="pane pa-2"
+				style="flex-grow: 1; overflow-y: scroll; overflow-x: hidden"
+				:style="{
+					height: `calc(100vh - ${topPaneHeight + 110}px)`,
+				}"
+			>
+				<frame-details class="my-1" :value="selectedFrame" />
+			</div>
+		</multipane>
+
+		<v-btn
+			color="primary"
+			@click="drawer = !drawer"
+			dark
+			fab
+			hover
+			bottom
+			right
+			fixed
+		>
+			<v-icon v-if="drawer">close</v-icon>
+			<v-icon v-else>menu</v-icon>
+		</v-btn>
+
+		<v-navigation-drawer v-model="drawer" absolute right style="z-index: 2">
+			<v-card class="fill">
+				<v-card-title> Settings </v-card-title>
+				<v-card-text>
+					<v-row>
+						<v-col cols="12">
+							<v-btn
+								text
+								small
+								color="primary"
+								@click="openInWindow('Zniffer', 800, 1500)"
+							>
+								Open in new<v-icon>open_in_new</v-icon>
+							</v-btn>
+						</v-col>
+						<v-col cols="12">
+							<v-select
+								label="Zniffer frequency"
+								hide-details
+								:items="znifferRegions"
+								v-model="frequency"
+								@change="setFrequency"
+							>
+								<template v-slot:prepend>
+									<v-icon>signal_cellular_alt</v-icon>
+								</template>
+
+								<template v-slot:append-outer>
+									<v-icon
+										color="success"
+										v-if="frequencySuccess"
+										>check_circle</v-icon
+									>
+								</template>
+							</v-select>
+						</v-col>
+					</v-row>
+				</v-card-text>
+			</v-card>
+		</v-navigation-drawer>
+	</v-container>
+</template>
+<script>
+import { ZWaveFrameType, LongRangeFrameType } from 'zwave-js/safe'
+import { Protocols } from '@zwave-js/core/safe'
+import { socketEvents } from '@server/lib/SocketEvents'
+
+import { mapState, mapActions } from 'pinia'
+import useBaseStore from '../stores/base.js'
+import { inboundEvents as socketActions } from '@server/lib/SocketEvents'
+import { znifferRegions } from '../lib/items.js'
+import {
+	getRoute,
+	getType,
+	getRssi,
+	getProtocolDataRate,
+	humanFriendlyNumber,
+	openInWindow,
+	getProtocolIcon,
+} from '../lib/utils'
+
+export default {
+	name: 'Zniffer',
+	props: {
+		socket: Object,
+	},
+	components: {
+		Multipane: () => import('../components/custom/Multipane.vue'),
+		MultipaneResizer: () =>
+			import('../components/custom/MultipaneResizer.vue'),
+		RichValue: () => import('@/components/nodes-table/RichValue.vue'),
+		FrameDetails: () => import('../components//custom/FrameDetails.vue'),
+	},
+	computed: {
+		...mapState(useBaseStore, ['zniffer', 'znifferState']),
+		buttons() {
+			return [
+				{
+					id: 'start',
+					icon: 'play_arrow',
+					color: 'success',
+					tooltip: 'Start Zniffer',
+					action: this.startZniffer,
+					disabled: this.znifferState?.started,
+				},
+				{
+					id: 'stop',
+					icon: 'stop',
+					color: 'error',
+					tooltip: 'Stop Zniffer',
+					action: this.stopZniffer,
+					disabled: !this.znifferState?.started,
+				},
+				{
+					id: 'clear',
+					icon: 'delete',
+					color: 'warning',
+					tooltip: 'Clear Zniffer',
+					action: this.clearFrames,
+					disabled: !this.frames.length,
+				},
+				{
+					id: 'save',
+					icon: 'save',
+					color: 'primary',
+					tooltip: 'Save capture',
+					action: this.createCapture,
+					disabled: !this.frames.length,
+				},
+			]
+		},
+		framesLimited() {
+			return this.framesFiltered.slice(
+				this.start,
+				this.perPage + this.start,
+			)
+		},
+		totalFrames() {
+			return this.framesFiltered.length
+		},
+		startHeight() {
+			return this.start * this.rowHeight
+		},
+		endHeight() {
+			const lastIndex = this.start + this.perPage
+			return this.rowHeight * (this.totalFrames - lastIndex + 1)
+		},
+	},
+	watch: {
+		topPaneHeight() {
+			this.resizeScrollWrapper()
+		},
+		znifferState() {
+			this.clearFrequency()
+		},
+		frequencySuccess(v) {
+			if (v) {
+				setTimeout(() => {
+					this.frequencySuccess = false
+				}, 3000)
+			}
+		},
+		framesQueue() {
+			// used to improve performances when lot of frames comes all together
+			if (this.queueTimeout) {
+				clearTimeout(this.queueTimeout)
+			}
+
+			this.queueTimeout = setTimeout(() => {
+				this.emptyQueue()
+			}, 50)
+		},
+		search(v) {
+			if (this.searchTimeout) {
+				clearTimeout(this.searchTimeout)
+			}
+
+			this.searchTimeout = setTimeout(() => {
+				this.filterFrames(v)
+			}, 300)
+		},
+		frames() {
+			this.filterFrames(this.search)
+			this.scrollBottom()
+		},
+	},
+	mounted() {
+		this.socket.on(socketEvents.znifferFrame, this.addFrame)
+
+		this.onWindowResize = () => {
+			this.topPaneHeight = window.innerHeight / 2
+		}
+
+		this.socket.on('connect', this.onConnnect)
+
+		if (this.socket.connected) {
+			this.onConnnect()
+		}
+
+		window.addEventListener('resize', this.onWindowResize)
+
+		this.onWindowResize()
+		this.clearFrequency()
+	},
+	beforeDestroy() {
+		window.removeEventListener('resize', this.onWindowResize)
+
+		if (this.roTopPane) {
+			this.roTopPane.unobserve(this.$refs.topPane)
+			this.roTopPane.disconnect()
+		}
+
+		if (this.socket) {
+			// unbind events
+			this.socket.off(socketEvents.znifferFrame)
+			this.socket.off('connect', this.onConnnect)
+		}
+
+		if (this.timeoutScroll) {
+			clearTimeout(this.timeoutScroll)
+		}
+
+		if (this.searchTimeout) {
+			clearTimeout(this.searchTimeout)
+		}
+	},
+	data() {
+		return {
+			znifferRegions,
+			fab: false,
+			drawer: false,
+			frequency: null,
+			frequencySuccess: false,
+			start: 0,
+			offsetTop: 125,
+			search: '',
+			searchError: false,
+			busy: false,
+			selectedFrame: null,
+			scrollWrapper: null,
+			rowHeight: 32,
+			perPage: 22,
+			topPaneHeight: 500,
+			frames: [],
+			framesFiltered: [],
+			framesQueue: [],
+			headers: [
+				{
+					text: '#',
+					value: 'id',
+					width: 80,
+					sortable: false,
+				},
+				{
+					text: 'Timestamp',
+					value: 'timestamp',
+					width: 160,
+					sortable: false,
+				},
+				{
+					text: 'Delta [ms]',
+					value: 'delta',
+					width: 150,
+					sortable: false,
+				},
+				{
+					text: 'Protocol Data Rate',
+					value: 'protocolDataRate',
+					width: 200,
+					sortable: false,
+				},
+				{ text: 'RSSI', value: 'rssi', width: 100, sortable: false },
+				{ text: 'Ch', value: 'channel', width: 100, sortable: false },
+				{
+					text: 'Home Id',
+					value: 'homeId',
+					width: 100,
+					sortable: false,
+				},
+				{ text: 'Route', value: 'sourceNodeId', sortable: false },
+				{ text: 'Type', value: 'type', sortable: false },
+				{ text: 'Payload', value: 'payload', sortable: false },
+			],
+			autoScroll: true,
+		}
+	},
+	methods: {
+		...mapActions(useBaseStore, ['showSnackbar']),
+		getProtocolIcon,
+		openInWindow,
+		humanFriendlyNumber,
+		emptyQueue() {
+			if (this.framesQueue.length > 0) {
+				this.frames.push(...this.framesQueue)
+				this.framesQueue = []
+			}
+		},
+		onConnnect() {
+			this.getFrames()
+		},
+		addFrame(data) {
+			const lastFrame =
+				this.framesQueue.length > 0
+					? this.framesQueue[this.framesQueue.length - 1]
+					: this.frames[this.frames.length - 1]
+
+			data.id = lastFrame ? lastFrame.id + 1 : 1
+			data.delta = lastFrame ? data.timestamp - lastFrame.timestamp : 0
+			this.framesQueue.push(data)
+		},
+		async clearFrequency() {
+			// needed to handle the clear event on select
+			await this.$nextTick()
+			this.frequency = this.znifferState?.frequency ?? null
+		},
+		onTopColResize() {
+			this.offsetTop = this.$refs.settingCol.clientHeight + 20
+			this.resizeScrollWrapper()
+		},
+		resizeScrollWrapper() {
+			if (this.scrollWrapper) {
+				this.scrollWrapper.style.height = `${
+					this.topPaneHeight - this.offsetTop
+				}px`
+			}
+		},
+		filterFrames(search) {
+			if (!search || search.trim() === '') {
+				this.framesFiltered = this.frames
+				this.searchError = false
+				return
+			}
+
+			try {
+				const fn = new Function(
+					'frame, homeId, ch, src, dest, protocolDataRate, hop, dir, repeaters',
+					`return ${search.replace(/\\/g, '\\\\')}`,
+				)
+
+				this.framesFiltered = this.frames.filter((frame) => {
+					return fn(
+						frame,
+						frame.homeId?.toString(16) || '',
+						frame.channel,
+						frame.sourceNodeId,
+						frame.destinationNodeId,
+						frame.protocolDataRate,
+						frame.hop,
+						frame.direction,
+						frame.repeaters || [],
+					)
+				})
+
+				this.searchError = false
+			} catch (e) {
+				this.searchError = true
+			}
+		},
+		onRowClick(frame, { select, isSelected }) {
+			if (isSelected) {
+				this.selectedFrame = null
+				this.autoScroll = true
+				select(false)
+			} else {
+				this.selectedFrame = frame
+				this.autoScroll = false
+				select(true)
+			}
+		},
+		getRowStyle(frame) {
+			const style = {
+				backgroundColor: '',
+			}
+
+			if (this.selectedFrame && this.selectedFrame.id === frame.id) {
+				style.backgroundColor = 'rgba(0, 0, 255, 0.5)'
+			} else if (frame.corrupted) {
+				style.backgroundColor = 'rgba(255, 0, 0, 0.1)'
+			} else {
+				if (frame.protocol === Protocols.ZWaveLongRange) {
+					switch (frame.type) {
+						case LongRangeFrameType.Singlecast:
+							style.backgroundColor = 'rgba(0, 255, 0, 0.1)'
+							break
+						case LongRangeFrameType.Ack:
+							style.backgroundColor = 'rgba(255, 165, 0, 0.1)'
+							break
+						case LongRangeFrameType.BeamStart:
+							style.backgroundColor = 'rgba(255, 255, 255, 0.1)'
+							break
+						case LongRangeFrameType.BeamStop:
+							style.backgroundColor = 'rgba(0, 0, 0, 0.1)'
+							break
+						case LongRangeFrameType.Broadcast:
+							style.backgroundColor = 'rgba(165, 0, 255, 0.1)'
+							break
+					}
+				} else {
+					switch (frame.type) {
+						case ZWaveFrameType.Singlecast:
+							style.backgroundColor = 'rgba(0, 255, 0, 0.1)'
+							break
+						case ZWaveFrameType.Multicast:
+							style.backgroundColor = 'rgba(0, 0, 255, 0.1)'
+							break
+						case ZWaveFrameType.AckDirect:
+							style.backgroundColor = 'rgba(255, 165, 0, 0.1)'
+							break
+						case ZWaveFrameType.ExplorerNormal:
+							style.backgroundColor = 'rgba(255, 255, 0, 0.1)'
+							break
+						case ZWaveFrameType.ExplorerSearchResult:
+							style.backgroundColor = 'rgba(255, 0, 255, 0.1)'
+							break
+						case ZWaveFrameType.ExplorerInclusionRequest:
+							style.backgroundColor = 'rgba(0, 255, 255, 0.1)'
+							break
+						case ZWaveFrameType.BeamStart:
+							style.backgroundColor = 'rgba(255, 255, 255, 0.1)'
+							break
+						case ZWaveFrameType.BeamStop:
+							style.backgroundColor = 'rgba(0, 0, 0, 0.1)'
+							break
+						case ZWaveFrameType.Broadcast:
+							style.backgroundColor = 'rgba(165, 0, 255, 0.1)'
+							break
+					}
+				}
+			}
+
+			return style
+		},
+		getPayloadTags(payload, prev = []) {
+			const tags = [
+				...prev,
+				payload.tags?.join(' '),
+				...(payload.encapsulated || []).map((e) =>
+					this.getPayloadTags(e, prev),
+				),
+			]
+			return tags.join(' > ')
+		},
+		bindTopPaneObserver() {
+			const onTopPaneResize = (e) => {
+				this.topPaneHeight = e[0].contentRect.height
+				this.perPage = Math.ceil(
+					(this.topPaneHeight - this.offsetTop) / this.rowHeight,
+				)
+			}
+
+			this.roTopPane = new ResizeObserver(onTopPaneResize)
+			this.roTopPane.observe(this.$refs.topPane)
+		},
+		bindScroll() {
+			if (this.scrollWrapper) return
+			// find v-data-table__wrapper element inside #framesTable
+			const el = this.$refs.framesTable?.$el
+
+			if (el) {
+				const wrapper = el.getElementsByClassName(
+					'v-data-table__wrapper',
+				)[0]
+				wrapper.addEventListener('scroll', this.onScroll.bind(this))
+				this.scrollWrapper = wrapper
+			}
+		},
+		enableAutoScroll() {
+			this.autoScroll = true
+			this.scrollBottom()
+		},
+		scrollBottom() {
+			if (this.scrollWrapper && this.autoScroll) {
+				this.scrollWrapper.scrollTo(
+					0,
+					this.scrollWrapper.scrollHeight + this.rowHeight,
+				)
+			}
+		},
+		async onScroll(e) {
+			// debounce if scrolling fast
+			if (this.timeoutScroll) {
+				clearTimeout(this.timeoutScroll)
+			}
+
+			this.timeoutScroll = setTimeout(async () => {
+				const prevStart = this.start
+
+				// rows to show
+				const { scrollTop } = e.target
+				const rows = Math.ceil(scrollTop / this.rowHeight)
+				// start index
+				this.start =
+					rows + this.perPage >= this.totalFrames &&
+					this.perPage <= this.totalFrames
+						? this.totalFrames - this.perPage
+						: rows
+
+				const direction = prevStart <= this.start ? 'down' : 'up'
+				if (this.autoScroll && direction === 'up') {
+					this.autoScroll = false
+				}
+			}, 50)
+		},
+		getTimestamp(timestamp) {
+			// format timestamp HH:mm:ss.fff
+			const date = new Date(timestamp)
+			const ms = date.getMilliseconds()
+			return `${date.toTimeString().split(' ')[0]}.${ms
+				.toString()
+				.padEnd(3, '0')}`
+		},
+		getRoute,
+		getType,
+		getRssi,
+		getProtocolDataRate,
+		async sendAction(data = {}, { hideInfo } = {}) {
+			return new Promise((resolve) => {
+				if (this.socket.connected) {
+					if (!hideInfo)
+						this.showSnackbar(`API ${data.apiName} called`, 'info')
+
+					this.socket.emit(
+						socketActions.zniffer,
+						data,
+						(response) => {
+							if (!response.success) {
+								this.showSnackbar(
+									`Error while calling ${data.apiName}: ${response.message}`,
+									'error',
+								)
+							}
+							resolve(response)
+						},
+					)
+				} else {
+					resolve({
+						success: false,
+						message: 'Socket disconnected',
+					})
+					this.showSnackbar('Socket disconnected', 'error')
+				}
+			})
+		},
+		async getFrames() {
+			const response = await this.sendAction(
+				{
+					apiName: 'getFrames',
+				},
+				{
+					hideInfo: true,
+				},
+			)
+
+			if (response.success) {
+				this.frames = []
+				response.result.forEach(this.addFrame)
+			}
+		},
+		async setFrequency() {
+			const response = await this.sendAction(
+				{
+					apiName: 'setFrequency',
+					frequency: this.frequency,
+				},
+				{ hideInfo: true },
+			)
+
+			if (response.success) {
+				this.frequencySuccess = true
+			}
+		},
+		async startZniffer() {
+			const response = await this.sendAction({
+				apiName: 'start',
+			})
+
+			if (response.success) {
+				this.showSnackbar(`Zniffer started`, 'success')
+			}
+		},
+		async stopZniffer() {
+			const response = await this.sendAction({
+				apiName: 'stop',
+			})
+
+			if (response.success) {
+				this.showSnackbar(`Zniffer stopped`, 'success')
+			}
+		},
+		async clearFrames() {
+			const response = await this.sendAction({
+				apiName: 'clear',
+			})
+
+			if (response.success) {
+				this.showSnackbar(`Zniffer cleared`, 'success')
+				this.frames = []
+				this.framesFiltered = []
+			}
+		},
+		async createCapture() {
+			const response = await this.sendAction({
+				apiName: 'saveCaptureToFile',
+			})
+
+			if (response.success) {
+				const result = response.result
+				this.showSnackbar(
+					`Capture "${result.name}" created in store`,
+					'success',
+				)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.truncate {
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.pane::-webkit-scrollbar,
+#framesTable::v-deep .v-data-table__wrapper::-webkit-scrollbar {
+	height: 5px;
+	width: 8px;
+	background: rgba(0, 0, 0, 0.233);
+	padding-right: 10;
+}
+
+.pane::-webkit-scrollbar-thumb,
+#framesTable::v-deep .v-data-table__wrapper::-webkit-scrollbar-thumb {
+	background: var(--v-primary-base);
+	border-radius: 1ex;
+	-webkit-border-radius: 1ex;
+}
+
+.single-line {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>