diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 787069e..ed4604e 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,5 +1,61 @@
# GitHub Copilot Agent Instructions for MQTT Explorer
+## Test Suites
+
+MQTT Explorer has several test suites to ensure code quality and reliability:
+
+### Unit Tests
+
+**App tests** - Frontend component and logic tests:
+```bash
+yarn test:app
+# Or: cd app && yarn test
+```
+
+**Backend tests** - Data model and business logic tests:
+```bash
+yarn test:backend
+# Or: cd backend && yarn test
+```
+
+**Run all unit tests**:
+```bash
+yarn test
+```
+
+### Integration Tests
+
+**UI test suite** - Independent, deterministic browser tests:
+```bash
+yarn test:ui
+# Requires: yarn build
+```
+
+**Demo video generation** - UI test recording with video capture:
+```bash
+yarn test:demo-video
+# Requires: Xvfb, mosquitto broker, tmux, ffmpeg
+# For development: Use ./scripts/uiTests.sh for full video recording setup
+```
+
+**MCP introspection tests** - Model Context Protocol tests:
+```bash
+yarn test:mcp
+```
+
+**Run all tests** (unit + demo-video):
+```bash
+yarn test:all
+```
+
+### CI/CD Test Execution
+
+In CI environments, tests run in isolated containers with all dependencies pre-installed:
+- `test` job: Runs unit tests (app + backend)
+- `ui-tests` job: Runs UI test suite with screenshots
+- `demo-video` job: Generates demo video with full recording setup
+- `test-browser` job: Runs browser mode smoke tests
+
## Debugging Browser Mode
### Prerequisites
diff --git a/Readme.md b/Readme.md
index 6923282..6c9fc27 100644
--- a/Readme.md
+++ b/Readme.md
@@ -80,12 +80,51 @@ The `app` directory contains all the rendering logic, the `backend` directory cu
## Automated Tests
-To achieve a reliable product automated tests run regularly on CI.
+MQTT Explorer uses multiple test suites to ensure reliability and quality:
-- **Data model tests**: `yarn test:backend`
-- **App tests**: `yarn test:app`
-- **UI test suite**: `yarn test:ui` (independent, deterministic tests)
-- **Demo video**: `yarn ui-test` (UI test recording for documentation)
+### Unit Tests
+
+**App tests** - Frontend component and logic tests:
+```bash
+yarn test:app
+```
+
+**Backend tests** - Data model and business logic tests:
+```bash
+yarn test:backend
+```
+
+**Run all unit tests**:
+```bash
+yarn test
+```
+
+### Integration & UI Tests
+
+**UI test suite** - Independent, deterministic browser tests:
+```bash
+yarn build
+yarn test:ui
+```
+
+**Demo video generation** - UI test recording for documentation:
+```bash
+yarn build
+yarn test:demo-video
+```
+Note: Requires Xvfb, mosquitto broker, tmux, and ffmpeg. For full video recording setup, use `./scripts/uiTests.sh`.
+
+**MCP introspection tests** - Model Context Protocol validation:
+```bash
+yarn build
+yarn test:mcp
+```
+
+**Run all tests** (unit tests + demo video):
+```bash
+yarn build
+yarn test:all
+```
### Run UI Test Suite
@@ -104,13 +143,27 @@ See [docs/UI-TEST-SUITE.md](docs/UI-TEST-SUITE.md) for more details.
### Run Demo Video Generation
-A [mosquitto](https://mosquitto.org/) MQTT broker is required to generate the demo video.
+The demo video is used for documentation and showcases key features. It requires additional dependencies:
```bash
yarn build
-yarn ui-test
+yarn test:demo-video
```
+**Requirements:**
+- mosquitto MQTT broker
+- Xvfb (virtual framebuffer)
+- tmux (terminal multiplexer)
+- ffmpeg (video encoding)
+
+**For full video recording with post-processing:**
+```bash
+yarn build
+./scripts/uiTests.sh
+```
+
+This script handles Xvfb setup, mosquitto startup, video recording, and cleanup.
+
## Create a release
Create a PR to `release` branch.
diff --git a/app/package.json b/app/package.json
index 83cde45..400ae9f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,10 +16,10 @@
"license": "CC-BY-ND-4.0",
"dependencies": {
"@emotion/react": "^11.14.0",
- "@emotion/styled": "^11.14.0",
- "@mui/icons-material": "^5.18.0",
- "@mui/lab": "^5.0.0-alpha.177",
- "@mui/material": "^5.18.0",
+ "@emotion/styled": "^11.14.1",
+ "@mui/icons-material": "^7.3.6",
+ "@mui/lab": "^7.0.1-beta.20",
+ "@mui/material": "^7.3.6",
"@mui/styles": "^6.4.8",
"@types/react-transition-group": "^4.4.11",
"ace-builds": "^1.4.11",
@@ -44,9 +44,9 @@
"parse-duration": "^0.1.1",
"path-browserify": "^1.0.1",
"prismjs": "^1.29.0",
- "react": "^18.3.1",
- "react-ace": "^12.0.0",
- "react-dom": "^18.3.1",
+ "react": "^19.2.3",
+ "react-ace": "^14.0.1",
+ "react-dom": "^19.2.3",
"react-redux": "^9.2.0",
"react-resize-detector": "^11.0.1",
"react-split-pane": "^0.1.92",
@@ -68,8 +68,8 @@
"@types/lodash.debounce": "^4.0.9",
"@types/node": "^25.0.3",
"@types/prismjs": "^1.26.5",
- "@types/react": "^18.3.18",
- "@types/react-dom": "^18.3.5",
+ "@types/react": "^19.2.7",
+ "@types/react-dom": "^19.2.3",
"@types/react-redux": "^7.1.34",
"@types/react-resize-detector": "^4.0.3",
"@types/sha1": "^1.1.1",
diff --git a/app/src/components/Chart/Chart.tsx b/app/src/components/Chart/Chart.tsx
index 6079151..49e5528 100644
--- a/app/src/components/Chart/Chart.tsx
+++ b/app/src/components/Chart/Chart.tsx
@@ -1,3 +1,4 @@
+import '../../react-vis-compat' // React 19 compatibility shim for react-vis
import DateFormatter from '../helper/DateFormatter'
import NoData from './NoData'
import NumberFormatter from '../helper/NumberFormatter'
diff --git a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
index 0095ce8..ec56f0c 100644
--- a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
+++ b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
@@ -41,31 +41,29 @@ function ChartPreview(props: Props) {
const addChartToPanelButton = hasEnoughDataToDisplayDiagrams ? (
-
+ style={{ cursor: 'pointer', display: 'inline-flex' }}
+ >
+
+
) : (
-
+
+
+
)
return (
-
- {addChartToPanelButton}
+
+
+ {addChartToPanelButton}
+
@@ -77,7 +75,7 @@ function ChartPreview(props: Props) {
-
+