vibe-coded mock machine frontend in solidjs

Merge pull request #1135 from qitechgmbh/991-graph-tab-in-top-navigation-bar-not-connecting-to-graph-page-2
fixed the graph page not not connecting to navigation bar bug
2026-02-24 18:37:05 +01:00 · 2026-02-13 08:06:53 +01:00 · 2026-02-12 17:04:35 +01:00 · 2026-02-12 13:37:26 +01:00 · 2026-02-12 13:22:14 +01:00 · 2026-02-12 13:14:04 +01:00
167 changed files with 12523 additions and 996 deletions
@@ -1,3 +0,0 @@
-.png filter=lfs diff=lfs merge=lfs -text
-.jpg filter=lfs diff=lfs merge=lfs -text
-.jpeg filter=lfs diff=lfs merge=lfs -text
@@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: 'BUG: '
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Navigate to '...'
+2. Select/Press '....'
+3. Execute operation '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots/Photos**
+If applicable, add screenshots from the HMI display or photos of the machine screen to help explain your problem.
+
+**Machine Information (please complete the following):**
+ - Machine Type: [Winder2, Laser, Aquapath...]
+ - Control Software Version: [e.g. 2.4.1]
+ - Settings: [e.g. Different Gear Ratios, PID Settings, …]
+
+**Device Information (if issue occurs on external device):**
+ - Device Type: [e.g. Tablet, PLC, Remote Control Panel]
+ - OS: [e.g. Windows 10, Linux, etc.]
+ - Connection Type: [e.g. Ethernet, USB]
+
+**Error Messages/Codes**
+If applicable, provide exact error codes or messages displayed or found in the troubleshooting terminal.
+
+**Additional context**
+Add any other context about the problem here (e.g., recent software updates, environmental factors).
@@ -0,0 +1,33 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: 'Feat: '
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. During operation, I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions, workarounds, or features you've considered.
+
+**Use Case/Application:**
+ - Machine Type(s): [e.g. All machines, Winder, Aquapath, ...]
+ - Frequency of Use: [e.g. Daily, During setup, Occasionally]
+
+**Expected Benefits:**
+ - Efficiency Improvement: [e.g. Reduces setup time by X minutes, Eliminates manual steps]
+ - Safety Enhancement: [e.g. Prevents operator error, Adds safety checks]
+ - Production Impact: [e.g. Increases throughput, Reduces downtime, Improves quality]
+ - User Experience: [e.g. Simplifies workflow, Reduces training time]
+
+**Mockups/Sketches**
+If applicable, add sketches, mockups, or photos showing how the feature would appear on the HMI display or integrate with the machine.
+
+**Additional context**
+Add any other context, industry standards, or examples from other control systems about the feature request here.
@@ -0,0 +1,80 @@
+name: Update npm deps hash
+
+on:
+  pull_request:
+    paths:
+      - 'electron/package-lock.json'
+      - 'electron/package.json'
+  workflow_dispatch:
+
+env:
+  NIX_PATH: nixpkgs=channel:nixos-25.05
+
+permissions:
+  contents: write
+  pull-requests: write
+  actions: write
+
+jobs:
+  update-hash:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.head.repo.full_name == github.repository
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Install Nix
+        uses: nixbuild/nix-quick-install-action@v34
+        with:
+          nix_conf: |
+            keep-env-derivations = true
+            keep-outputs = true
+
+      - name: Calculate new npm deps hash
+        id: calc-hash
+        run: |
+          # Calculate the hash using nix run with nixpkgs
+          NEW_HASH=$(nix run 'nixpkgs#prefetch-npm-deps' electron/package-lock.json)
+          echo "hash=$NEW_HASH" >> $GITHUB_OUTPUT
+          echo "Calculated hash: $NEW_HASH"
+
+      - name: Update npmDepsHash in electron.nix
+        run: |
+          NEW_HASH="${{ steps.calc-hash.outputs.hash }}"
+          sed -i "s|npmDepsHash = \".*\";|npmDepsHash = \"$NEW_HASH\";|" nixos/packages/electron.nix
+          
+      - name: Check if hash changed
+        id: check-changes
+        run: |
+          if git diff --quiet nixos/packages/electron.nix; then
+            echo "changed=false" >> $GITHUB_OUTPUT
+            echo "No changes needed - hash is already correct"
+          else
+            echo "changed=true" >> $GITHUB_OUTPUT
+            echo "Hash updated in electron.nix"
+          fi
+
+      - name: Commit and push if changed
+        if: steps.check-changes.outputs.changed == 'true'
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add nixos/packages/electron.nix
+          git commit -m "chore: update npmDepsHash to ${{ steps.calc-hash.outputs.hash }}"
+          git push
+
+      - name: Comment on PR
+        if: steps.check-changes.outputs.changed == 'true'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: 'Automatically updated `npmDepsHash` to `${{ steps.calc-hash.outputs.hash }}`\n\n**Next step:** Trigger the checks by pushing an empty commit:\n```bash\ngit commit --allow-empty -m "trigger ci" && git push\n```'
+            })
@@ -7,4 +7,5 @@ build.sh
 shell.nix
 node_modules/
 runtime_metrics.csv
-compile_metrics.csv
+compile_metrics.csv
+.idea/
@@ -1,3 +1,15 @@
+# `2.14.1`
+_26.01.2026_
+
+## Laser
+-[#1079](https://github.com/qitechgmbh/control/pull/1079) Fixed Overflowing of buffer for Graphs causing crashes
+
+# `2.14.0`
+_22.01.2026_
+
+## General 
+- [#1040](https://github.com/qitechgmbh/control/pull/1040) Added API for reading Machine Data
+
 # `2.13.0`
 _07.01.2026_

@@ -5,7 +17,6 @@ _07.01.2026_
 - [#925](https://github.com/qitechgmbh/control/pull/925) Switch to Setup when selected machine is disconnected
 - [#937](https://github.com/qitechgmbh/control/pull/937) Added minimal Support for WAGO 
 - [#945](https://github.com/qitechgmbh/control/pull/945) Improvements for On-Screen Keyboard usage in Ethercat Setup Page
- []

 ## Extruder V3
 - [#930](https://github.com/qitechgmbh/control/pull/930) Added Extruder V3
@@ -204,7 +204,7 @@ checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -221,7 +221,7 @@ checksum = "99e1aca718ea7b89985790c94aad72d77533063fe00bc497bb79a7c2dae6a661"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -232,9 +232,9 @@ checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"

 [[package]]
 name = "axum"
-version = "0.8.7"
+version = "0.8.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b098575ebe77cb6d14fc7f32749631a6e44edbef6b796f89b020e99ba20d425"
+checksum = "8b52af3cb4058c895d37317bb27508dccc8e5f2d39454016b297bf4a400597b8"
 dependencies = [
 "axum-core",
 "axum-macros",
@@ -291,7 +291,7 @@ checksum = "604fde5e028fea851ce1d8570bbdc034bec850d157f7569d10f347d06808c05c"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -390,9 +390,9 @@ checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"

 [[package]]
 name = "bytes"
-version = "1.11.0"
+version = "1.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b35204fbdc0b3f4446b89fc1ac2cf84a8a68971995d0bf2e925ec7cd960f9cb3"
+checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
 dependencies = [
 "serde",
 ]
@@ -539,7 +539,7 @@ version = "0.1.0"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -682,7 +682,7 @@ dependencies = [
 "deluxe-macros",
 "once_cell",
 "proc-macro2",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -695,7 +695,7 @@ dependencies = [
 "proc-macro2",
 "quote",
 "strsim",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -710,7 +710,7 @@ dependencies = [
 "proc-macro-crate",
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -721,7 +721,7 @@ checksum = "1e567bd82dcff979e4b03460c307b3cdc9e96fde3d73bed1496d2bc75d9dd62a"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -962,14 +962,13 @@ dependencies = [
 "deluxe",
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
 name = "ethercrab"
 version = "0.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fbb13becfa15713adb09b27fdb74468b827cdc78aa99aea638a89c1b0db3ce94"
+source = "git+https://github.com/v-morlock/ethercrab?branch=main#d297d13389d85a4edb4e69cc98f9dd7f12626cac"
 dependencies = [
 "async-io",
 "atomic-waker",
@@ -998,8 +997,7 @@ dependencies = [
 [[package]]
 name = "ethercrab-wire"
 version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d15828cb020fb44c92ca67e1ee3c122c9621c2e00d383d066e488f0619023ba2"
+source = "git+https://github.com/v-morlock/ethercrab?branch=main#d297d13389d85a4edb4e69cc98f9dd7f12626cac"
 dependencies = [
 "ethercrab-wire-derive",
 "heapless",
@@ -1008,20 +1006,19 @@ dependencies = [
 [[package]]
 name = "ethercrab-wire-derive"
 version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0e790b8011211ed70babfcacbd4277b91ee21402ad5ba6a2c293db02e2f12919"
+source = "git+https://github.com/v-morlock/ethercrab?branch=main#d297d13389d85a4edb4e69cc98f9dd7f12626cac"
 dependencies = [
 "criterion",
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
 name = "euclid"
-version = "0.22.11"
+version = "0.22.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ad9cdb4b747e485a12abb0e6566612956c7a1bafa3bdb8d682c5b6d403589e48"
+checksum = "df61bf483e837f88d5c2291dcf55c67be7e676b3a51acc48db3a7b163b91ed63"
 dependencies = [
 "num-traits",
 ]
@@ -1878,7 +1875,7 @@ dependencies = [
 "pest_meta",
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -1908,7 +1905,7 @@ checksum = "6e918e4ff8c4549eb882f14b3a4bc8c8bc93de829416eacf579f1207a8fbf861"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -2221,7 +2218,7 @@ checksum = "22f968c5ea23d555e670b449c1c5e7b2fc399fdaec1d304a17cd48e288abc107"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -2251,20 +2248,20 @@ checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
 name = "serde_json"
-version = "1.0.145"
+version = "1.0.149"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "402a6f66d8c709116cf22f558eab210f5a50187f702eb4d7e5ef38d9a7f1c79c"
+checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
 dependencies = [
 "itoa",
 "memchr",
- "ryu",
 "serde",
 "serde_core",
+ "zmij",
 ]

 [[package]]
@@ -2332,6 +2329,7 @@ dependencies = [
 "smol",
 "socketioxide",
 "spin_sleep",
+ "ta",
 "textplots",
 "tokio",
 "tower-http",
@@ -2573,9 +2571,9 @@ dependencies = [

 [[package]]
 name = "syn"
-version = "2.0.111"
+version = "2.0.114"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "390cc9a294ab71bdb1aa2e99d13be9c753cd2d7bd6560c77118597410c4d2e87"
+checksum = "d4d107df263a3013ef9b1879b0df87d706ff80f65a86ea879bd9c31f9b307c2a"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -2588,6 +2586,12 @@ version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0bf256ce5efdfa370213c1dabab5935a12e49f2c58d15e9eac2870d3b4f27263"

+[[package]]
+name = "ta"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "609409d472a0a7d8d4dd9e19891bbdef546b9dce670c3057d0e02192dc541226"
+
 [[package]]
 name = "tap"
 version = "1.0.1"
@@ -2621,7 +2625,7 @@ checksum = "3ff15c8ecd7de3849db632e14d18d2571fa09dfc5ed93479bc4485c7a517c913"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -2681,7 +2685,7 @@ checksum = "af407857209536a95c8e56f8231ef2c2e2aff839b22e07a1ffcbc617e9db9fa5"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -2843,7 +2847,7 @@ checksum = "7490cfa5ec963746568740651ac6781f701c9c5ea257c58e057f3ba8cf69e8da"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -2880,9 +2884,9 @@ dependencies = [

 [[package]]
 name = "tracing-subscriber"
-version = "0.3.20"
+version = "0.3.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2054a14f5307d601f88daf0553e1cbf472acc4f2c51afab632431cdcd72124d5"
+checksum = "2f30143827ddab0d256fd843b7a66d164e9f271cfa0dde49142c5ca0ca291f1e"
 dependencies = [
 "chrono",
 "matchers",
@@ -3074,7 +3078,7 @@ dependencies = [
 "bumpalo",
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 "wasm-bindgen-shared",
 ]

@@ -3139,7 +3143,7 @@ checksum = "053e2e040ab57b9dc951b72c264860db7eb3b0200ba345b4e4c3b14f67855ddf"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -3150,7 +3154,7 @@ checksum = "3f316c4a2570ba26bbec722032c4099d8c8bc095efccdc15688708623367e358"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]

 [[package]]
@@ -3426,5 +3430,11 @@ checksum = "88d2b8d9c68ad2b9e4340d7832716a4d21a22a1154777ad56ea55c51a9cf3831"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.111",
+ "syn 2.0.114",
 ]
+
+[[package]]
+name = "zmij"
+version = "1.0.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3ff05f8caa9038894637571ae6b9e29466c1f4f829d26c9b28f869a29cbe3445"
@@ -2,167 +2,76 @@

 # QiTech Control

-QiTech Control is an open-source framework designed to bring modern software paradigms to certified industrial hardware.
+QiTech Control is an open-source framework designed to bring modern software development practices to certified industrial hardware.

 It frees developers from proprietary, license-heavy PLC ecosystems and rigid "point-and-click" workflows that are no longer adequate for today's complex automation challenges.

 QiTech Control combines the modularity and reliability of standard EtherCAT terminals (e.g., WAGO, Beckhoff) with the power of a modern Rust & React stack.

+## Documentation

-[![](https://img.youtube.com/vi/KI3YeBwfV-s/maxresdefault.jpg)](https://www.youtube.com/watch?v=KI3YeBwfV-s)
-*Click here to watch a video demo of our software.*
+**[View Full Documentation Wiki](https://github.com/qitechgmbh/control/wiki)**

-[![](https://img.youtube.com/vi/55egCAkQgyM/maxresdefault.jpg)](https://youtu.be/55egCAkQgyM) 
-*Click here to watch a full explainer Video of our Software.*
+- [Getting Started](https://github.com/qitechgmbh/control/wiki/Getting-Started)
+- [Architecture Overview](https://github.com/qitechgmbh/control/wiki/Architecture-Overview)
+- [EtherCAT Basics](https://github.com/qitechgmbh/control/wiki/Ethercat-Basics)
+- [Device Examples](https://github.com/qitechgmbh/control/wiki/Hardware-Examples)
+- [REST API Reference](https://github.com/qitechgmbh/control/wiki/Rest-Api)

-# Repo Structure
+## Videos

-Frontend
+| Software Demo | Full Explainer |
+|---------------|----------------|
+| [![](https://img.youtube.com/vi/KI3YeBwfV-s/maxresdefault.jpg)](https://www.youtube.com/watch?v=KI3YeBwfV-s)<br/>*Watch a demo of the control software in action* | [![](https://img.youtube.com/vi/55egCAkQgyM/maxresdefault.jpg)](https://youtu.be/55egCAkQgyM)<br/>*Watch a complete overview of QiTech Control* |

- `/electron`: Frontend code for the control software built with React and Electron.
+## Repository Structure

-Backend
+- **`/electron`** - React + Electron frontend
+- **`/server`** - Rust backend implementing machine logic
+- **`/ethercat-hal`** - Hardware abstraction layer for EtherCAT devices
+- **`/control-core`** - Core control logic
+- **`/nixos`** - Custom Linux OS with realtime kernel

- `/server`: Glue between Beckhoff and Electron. Implements machine logic.
- `/ethercat-hal`: Hardware abstraction layer for Beckhoff (and possibly other EtherCat) devices and protocols.
- `/ethercat-hal-derive`: Macros for `ethercat-hal`
- `/control-core`: Core control logic for the server.
+## Technology Stack

-Operating System
+**Backend:** Rust with [Ethercrab](https://github.com/ethercrab-rs/ethercrab) for EtherCAT, [SocketIO](https://socket.io/) for real-time communication, [axum](https://docs.rs/axum/latest/axum/) for REST API

- `/nixos`: Custom Linux with realtime kernel & preconfigured for touchscreens.
-
-Other
-
- `/docs`: Documentation for the project.
-
-# Technology Choices
-
-## Backend
-
-To interface with Beckhoff and other EtherCAT devices we need an EtherCAT master software. Possibilities are [PySOEM](https://github.com/bnjmnp/pysoem) (Python), [SOEM](https://github.com/OpenEtherCATsociety/SOEM) (C) and [Ethercrab](https://github.com/ethercrab-rs/ethercrab) (Rust). For realtime operation only C and Rust are suitable. We chose Rust because of safety and confidence in the written code.
-
-[SocketIO](https://socket.io/) was chosen for performant event driven communication from the backend to the server. But we still use REST with [axum](https://docs.rs/axum/latest/axum/) for the communication thet benefits from the request/response model.
-
-We use [Smol](https://github.com/smol-rs/smol) for EtherCAT IO in the control loop for it's performance and [Tokio](https://tokio.rs/) for server IO because of it's ecosystem and maturity.
-
-## Frontend
-
-We could combine the code of the frontend and backend using [Doxius](https://dioxuslabs.com/) but it lacks good Linux support. We chose [Electron](https://www.electronjs.org/) with [React](https://react.dev/) for it's maturity and ecosystem. For the UI we use [Shadcn](https://ui.shadcn.com/) components and [Tailwind](https://tailwindcss.com/) for styling. For routing we use [TanStack Router](https://tanstack.com/router/v1).
-
-# Dev Setup
-
-[Developer Documentation](./docs/developer-docs/)
-
-## Backend
-
- Rust stable 1.86^ toolchain (install via [rustup](https://rustup.rs/))
- `rust-analyzer` extension for VSCode
- Set your interface in `server/src/ethercat/init.rs` like `en10`
- Connect a Beckhoff EK1100 to your interface
- run `cd server && cargo run` to start the server (localhost:3001)
-
-## Frontend
-
- nodejs and npm installed
- run `cd electron && npm i && npm run start` to start the frontend
-
-# Machines
-
-| Machine Type | Version | Release Date | Description                 | Change to Previous Version                             | Vendor ID                  | Machine ID | Implemented | Docs                            |
-| ------------ | ------- | ------------ | --------------------------- | ------------------------------------------------------ | -------------------------- | ---------- | ----------- | ------------------------------- |
-| Winder       | V1      | ???          | Winding Filaments & Similar | -                                                      | 1 (Qitech Industries GmbH) | 1          | Reserved    | -                               |
-| Winder       | V2      | 2025         | Winding Filaments & Similar | Reengineered Traverse                                  | 1 (Qitech Industries GmbH) | 2          | Yes         | [](./docs/machines/winder-1.md) |
-| Extruder     | V1      | ???          | Single Screw Extruder       | -                                                      | 1 (Qitech Industries GmbH) | 3          | Reserved    | -                               |
-| Extruder     | V2      | 2025         | Single Screw Extruder       | PT100 Thermometers, Optional Additional Heating Zone 4 | 1 (Qitech Industries GmbH) | 4          | Yes         |                                 |
-| Waterway     | V1      | 2025         | Filament Water Cooling      | -                                                      | 1 (Qitech Industries GmbH) | 5          | In Progress     |                                 |
-| Laser        | V1      | ???          | Diameter Measuring Laser    | -                                                      | 1 (Qitech Industries GmbH) | 6          | Yes         |                                 |
-| Mock         | -       | ???          | Mock Machine for Testing    | -                                                      | 1 (Qitech Industries GmbH) | 7          | Yes         | -                               |
-
-# Minimal Hardware Examples
-
-For complete step-by-step tutorials on setting up your first hardware, including wiring diagrams and software configuration, see the [Getting Started Guide](./docs/developer-docs/getting-started.md#minimal-hardware-examples).
-
-Available examples:
- **LED Control with EL2004** - Digital output control (simplest setup)
- **Analog Input with EL3021** - Reading analog current measurements
+**Frontend:** [Electron](https://www.electronjs.org/) + [React](https://react.dev/) with [Shadcn](https://ui.shadcn.com/) components and [Tailwind](https://tailwindcss.com/) styling


-# More Docs
+## Hardware Examples

- [x] [Architecture & Data Flow](./docs/architecture-overview.md)
+QiTech Control supports a wide range of EtherCAT hardware from WAGO and Beckhoff. We provide complete step-by-step tutorials with wiring diagrams and software configuration for many common modules.

-  - [x] Example Winder V2
+**[View all hardware examples and tutorials on the wiki](https://github.com/qitechgmbh/control/wiki/Hardware-Examples)**

- [ ] Electron
+Quick links to popular examples:
+- [EL2004 - LED Control](https://github.com/qitechgmbh/control/wiki/Minimal-Example-El2004) (simplest setup for beginners)
+- [EL3021 - Analog Input](https://github.com/qitechgmbh/control/wiki/Minimal-Example-El3021)
+- [EL7031 - Stepper Motor Control](https://github.com/qitechgmbh/control/wiki/Minimal-Example-El7031-Motor)
+- [WAGO 750-402 - Digital Input](https://github.com/qitechgmbh/control/wiki/Minimal-Example-Wago750-402)
+- [WAGO 750-455 - Analog Input](https://github.com/qitechgmbh/control/wiki/Minimal-Example-Wago-750-455)

-  - Folder Structure
-  - Routing with TanStack Router
-  - Design with Tailwind & Shadcn
-  - ...
+## QiTech Machines

- [ ] Interfacing with Electron/Server
+QiTech Control powers 10+ production machines for filament extrusion, winding, measurement, and material processing.

-  - [ ] SocketIO
-    - Machine Namespace
-    - Main Namespace
-  - [ ] REST
-    - Machine Mutations
-    - Write Device Identification
+**[View complete machine catalog on the wiki](https://github.com/qitechgmbh/control/wiki/QiTech-Machines)**

- Server

-  - [x] [Threading](./docs/control-loop.md)
-  - [x] [Logging](./docs/logging.md)
-  - [ ] Control Loop Setup
-    - Control Loop Thread
-      - [ ] realtime
-    - Maindevice
-    - Group
-    - Extracting Device Identifications
-    - Identifying Groups
-    - Validating Machines
-    - Run Control Loop
-  - [x] [Control Loop](./docs/control-loop.md)
-  - [x] [Machine/Device Identification](./docs/identification.md)
-  - [ ] Machines
-    - When to create a new Machine?
-      - Versioning
-      - Code sharing
-    - Creating/Validating a Machine
-      - Validation
-      - Configuration
-  - [ ] Machine Implementation Guide
-    - Link: How to create a Device
-    - Link: How to create an Actor
-    - Link: How to create a Machine
-      - API (SocketIO + REST)
-      - Creation/Validation Logic
-        - Optional/Mandatory Devices
-        - Validate Devices
-      - Business Logic
-    - Link: How to create Machine Abstraction (Like Traverse/Puller/...)
-    - Forward `act` in winder.
+## Contributing

- [ ] Control Core
+This is an open-source project. Contributions are welcome! Please see the [wiki](https://github.com/qitechgmbh/control/wiki) for development guidelines.

-  - [x] [Actors](./docs/actors.md)
-  - [ ] SocketIO
-    - Namespaces & Caching
-    - Joining leaving namespaces
-    - NamespaceId
-    - Caching
-      - Serverside Caching
-      - Clientside Caching
-  - [ ] REST

- [x] Ethercat HAL

-  - [x] [Devices](./docs/devices.md)
-  - [x] [Configuration (CoE)](./docs/coe.md)
-  - [x] [IO](./docs/io.md)
-  - [x] [PDO](./docs/pdo.md)
+## Additional Videos

- [x] [Ethercat Basics](./docs/ethercat-basics.md)
+| Episode Highlights |  |
+|--------------------|--------------------|
+| [![](https://img.youtube.com/vi/U2wNN6sF4to/maxresdefault.jpg)](https://www.youtube.com/watch?v=U2wNN6sF4to&t=163s)<br/>**Day in the Software Team**<br/>*Behind the scenes with Robin and how the team ships control software.* | [![](https://img.youtube.com/vi/R5WGAY3WRWA/maxresdefault.jpg)](https://www.youtube.com/watch?v=R5WGAY3WRWA&t=1s)<br/>**Software Stack Day**<br/>*A fast tour through the tools, stack, and daily workflow.* |
+| [![](https://img.youtube.com/vi/xyaHwxXguw4/maxresdefault.jpg)](https://www.youtube.com/watch?v=xyaHwxXguw4&t=32s)<br/>**First Client**<br/>*A milestone week building the first real client project.* | [![](https://img.youtube.com/vi/moI7z2PVdF4/maxresdefault.jpg)](https://www.youtube.com/watch?v=moI7z2PVdF4)<br/>**Steelworks Week**<br/>*A deep-dive week on a demanding steelworks order.* |

- [x] [NixOS Operating System](./docs/nixos/README.md)
+## License
+
+See [LICENSE](LICENSE) file for details.
@@ -9,11 +9,11 @@ workspace = true
 [dependencies]
 anyhow = "1.0.100"

-axum = "0.8.6"
+axum = "0.8.8"

 ethercat_hal = { path = "../ethercat-hal" }
 units = { path = "../units" }
-ethercrab = "0.6"
+ethercrab = { git = "https://github.com/v-morlock/ethercrab", branch = "main" }
 interfaces = "0.0.9"
 serde = "1.0.219"
 serialport = "4.7.3"
@@ -89,5 +89,86 @@ To get started with actual hardware, check out these step-by-step tutorials:

 - **[LED Control with EL2004](./minimal-example-el2004.md)** - Digital output control, the simplest possible hardware setup
 - **[Analog Input with EL3021](./minimal-example-el3021.md)** - Reading analog current measurements
+- **[Stepper Motor Control with EL7031-0030](./minimal-example-el7031-motor.md)** - Complete motor control integration with velocity control

 These examples provide complete hardware wiring diagrams and software setup instructions.
+
+
+# More Docs 
+
+- [x] [Architecture & Data Flow](./docs/architecture-overview.md)
+
+  - [x] Example Winder V2
+
+- [ ] Electron
+
+  - Folder Structure
+  - Routing with TanStack Router
+  - Design with Tailwind & Shadcn
+  - ...
+
+- [ ] Interfacing with Electron/Server
+
+  - [ ] SocketIO
+    - Machine Namespace
+    - Main Namespace
+  - [ ] REST
+    - Machine Mutations
+    - Write Device Identification
+
+- Server
+
+  - [x] [Threading](./docs/control-loop.md)
+  - [x] [Logging](./docs/logging.md)
+  - [ ] Control Loop Setup
+    - Control Loop Thread
+      - [ ] realtime
+    - Maindevice
+    - Group
+    - Extracting Device Identifications
+    - Identifying Groups
+    - Validating Machines
+    - Run Control Loop
+  - [x] [Control Loop](./docs/control-loop.md)
+  - [x] [Machine/Device Identification](./docs/identification.md)
+  - [ ] Machines
+    - When to create a new Machine?
+      - Versioning
+      - Code sharing
+    - Creating/Validating a Machine
+      - Validation
+      - Configuration
+  - [ ] Machine Implementation Guide
+    - Link: How to create a Device
+    - Link: How to create an Actor
+    - Link: How to create a Machine
+      - API (SocketIO + REST)
+      - Creation/Validation Logic
+        - Optional/Mandatory Devices
+        - Validate Devices
+      - Business Logic
+    - Link: How to create Machine Abstraction (Like Traverse/Puller/...)
+    - Forward `act` in winder.
+
+- [ ] Control Core
+
+  - [x] [Actors](./docs/actors.md)
+  - [ ] SocketIO
+    - Namespaces & Caching
+    - Joining leaving namespaces
+    - NamespaceId
+    - Caching
+      - Serverside Caching
+      - Clientside Caching
+  - [ ] REST
+
+- [x] Ethercat HAL
+
+  - [x] [Devices](./docs/devices.md)
+  - [x] [Configuration (CoE)](./docs/coe.md)
+  - [x] [IO](./docs/io.md)
+  - [x] [PDO](./docs/pdo.md)
+
+- [x] [Ethercat Basics](./docs/ethercat-basics.md)
+
+- [x] [NixOS Operating System](./docs/nixos/README.md)
@@ -0,0 +1,236 @@
+# Minimal Example — Beckhoff EL7031-0030 Stepper Motor Integration  
+A complete hardware + software walkthrough
+
+---
+
+## Table of Contents
+1. [Introduction](#1-introduction)
+2. [Requirements](#2-requirements)
+3. [Hardware Setup](#3-hardware-setup)
+   - [3.2 EK1100 Wiring](#32-ek1100-wiring)
+   - [3.2.1 Safe Wiring Procedure](#321-safe-wiring-procedure-beckhoff-recommended)
+   - [3.2.2 Wiring (EL7031-0030)](#322-wiring-el7031-0030)
+   - [3.3 Safety Warning](#33--safety-warning)
+4. [Software Setup](#4-software-setup)
+   - [4.1 Installing on Linux](#41-installing-on-linux-this-depends-on-your-distro)
+   - [4.2 Running the Backend](#42-running-the-backend)
+   - [4.3 Running the Frontend](#43-running-the-frontend)
+5. [Demo](#5-demo)
+   - [5.1 Assigning Devices in the Dashboard](#51-assigning-devices-in-the-dashboard)
+6. [Documentation](#6-documentation)
+7. [Software Architecture](#7-software-architecture)
+
+---
+
+## 1. Introduction
+
+This project documents the successful integration of a **Beckhoff EL7031-0030 Stepper Motor Terminal** into the QiTech control software stack. 
+The goal was to control a 24V stepper motor via EtherCAT using a custom Rust backend and a React/Electron frontend.
+
+---
+
+## 2. Requirements
+
+### Software
+- Rust toolchain
+- Node.js + npm
+- Git
+- QiTech Control repository
+- EtherCAT HAL (included inside repo)
+
+### Hardware
+- **EtherCAT Master:** Linux PC
+- **Bus Coupler:** EtherCAT Beckhoff EK1100
+- **Stepper Driver:** Beckhoff EL7031-0030 (THIS IS DIFFERENT FROM EL7031)
+- **Motor:** Standard 4-wire Stepper Motor
+- **Power Supply:** 24V DC
+- **Ethernet Cable:** Standard Ethernet cable
+- **Wiring Tools:** Screwdriver, wires
+
+---
+
+## 3. Hardware Setup
+
+### 3.2 EK1100 Wiring
+
+This wiring configuration powers the EL7031-0030.  
+It is not the only possible wiring but is the **simplest functional setup**.
+
+#### ⚠️ Safety Warning
+Always disconnect power before wiring.  
+Working on live EtherCAT terminals can cause serious damage or electrical shock.
+
+---
+
+#### 3.2.1 Safe Wiring Procedure (Beckhoff Recommended)
+
+1. Insert a screwdriver **straight** into the square release hole.
+2. Insert the stripped wire into the round opening.
+3. Remove the screwdriver — the spring clamp locks the wire.
+
+![](../assets/wiring.png)
+
+---
+
+We supply power using a **DC hollow-plug adapter**, like this one:  
+https://www.amazon.de/dp/B093FTFZ8Q
+
+Perform the following wiring on the EK1100:
+
+1. Red wire **(+24 V)** → Terminal **2**
+2. Black wire **(0 V)** → Terminal **3**
+3. Jumper wire from **Terminal 1 → Terminal 6**
+4. Jumper wire from **Terminal 5 → Terminal 7**
+
+After wiring, your module should look like **Figure 1**.
+
+---
+
+#### **Figure 1 — EK1100 Minimal Wiring**
+<img src="../assets/ek1100.jpeg" width="400">
+
+---
+
+#### **Figure 2 — EL7031-0030 Terminal**
+
+<img src="../assets/EL7031_0030.jpg" width="300">
+
+Slide the EL7031-0030 onto the right side of the EK1100 until it locks.
+The EtherCAT E-Bus and power contacts connect automatically — **no wiring required**.
+
+---
+
+#### **Figure 3 — Motor**
+<img src="../assets/motor.jpg" width="300">
+
+---
+
+#### **Figure 4 — Motor Wiring**
+<img src="../assets/motor_wiring.jpg" width="300">
+
+Now the motor is wired via the pins 4, 5, 12, 13 on the EL7031-0030.
+
+---
+
+#### **Figure 5 — EL7031 Integration Connected**
+
+<img src="../assets/EL7031_0030_connected.jpg" width="400">
+
+That's what the pin should look like.
+
+---
+
+### 3.2.2 Wiring (EL7031-0030)
+
+**Crucial:** The EL7031 requires two power sources: E-Bus (side contacts) for logic, and Front Terminal (6 & 14) for motor power.
+
+| Terminal Point | Function         | Cable Color (Example) |
+| :------------- | :--------------- | :-------------------- |
+| **4**          | Motor Coil A1    | Red                   |
+| **12**         | Motor Coil A2    | Blue                  |
+| **5**          | Motor Coil B1    | Green                 |
+| **13**         | Motor Coil B2    | Black                 |
+| **6**          | **Power +24V**   | PSU Red (+)           |
+| **14**         | **Power 0V/GND** | PSU Black (-)         |
+
+---
+
+### 3.3 ⚠️ Safety Warning
+
+- **Mandatory Power Supply:** Without 24V connected to **Pin 6 (+24V)** and **Pin 14 (GND)**, the terminal will remain in `PREOP` state or show a "Warning" LED (No Power). The motor will **not** move without this external supply.
+
+#### Risk of Destruction (Short Circuit):
+- **Never** connect the 24V Power Supply to the Motor Output pins (**4, 5, 12, 13**). This will instantly destroy the terminal (causing pins 12 & 13 to glow red/burn).
+- Ensure strict separation: **Pins 4/5/12/13 are for the MOTOR ONLY**.
+- **Pins 6/14 are for POWER ONLY**.
+
+Also, see the documentation of the EtherCAT terminal ([EL7031-0030](https://download.beckhoff.com/download/document/io/ethercat-terminals/el7031-0030de.pdf)) for the different power modes (page 46 ff.)
+
+---
+
+## 4. Software Setup
+
+### 4.1 Installing on Linux (this depends on your distro)
+
+Paste this into your terminal:
+
+```bash
+# Press Enter when prompted
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+
+sudo apt update
+sudo apt install -y npm nodejs git
+
+git clone git@github.com:qitechgmbh/control.git
+cd control/electron
+npm install
+```
+
+### 4.2 Running the Backend
+
+```bash
+./cargo_run_linux.sh
+```
+
+This script:
+- Builds the backend
+- Grants required system capabilities (raw sockets)
+- Starts EtherCAT communication
+
+### 4.3 Running the Frontend
+
+```bash
+# move to the control directory
+cd electron
+npm run start
+```
+
+This launches the QiTech Control dashboard.
+
+---
+
+## 5. Demo
+
+### 5.1 Assigning Devices in the Dashboard
+
+Once the backend + frontend are running, you should see:
+
+![](../assets/UI_start_motor.png)
+
+Make sure that under "Assign" → "Machine Assignment"
+the correct serial number is selected (each device should have the same one, here it is 1).
+Under "Machine" select your new Machine however you named it (I named it "TestMotor V1"), else it will detect that there is something connected to it but the connection won't work.
+
+![](../assets/machine_assigment_motor.png)
+
+**NOW THE MOTOR SHOULD TURN!**
+
+In the interface "TestMotor" on the left side, you can now control the motor (its state and its speed).
+
+![](../assets/UI_motor.png)
+
+---
+
+## 6. Documentation
+
+Use the official documentation of the EL7031-0030 for more information:  
+[Beckhoff EL7031-0030 Documentation](https://download.beckhoff.com/download/document/io/ethercat-terminals/el7031-0030de.pdf)
+
+---
+
+## 7. Software Architecture
+
+### Backend (Rust)
+Located in [machines/src/motor_test_machine/](/machines/src/motor_test_machine/).
+
+1. **`mod.rs`**: Defines the `MotorTestMachine` struct and holds the state (driver wrapper, enabled state, target velocity).
+2. **`api.rs`**: Handles incoming JSON commands from the frontend (Enable/Disable, Set Velocity) via WebSockets/SocketIO.
+3. **`act.rs`**: The real-time control loop. It updates the `StepperVelocityEL70x1` driver wrapper in every cycle based on the current state.
+4. **`new.rs`**: Initializes the hardware.
+
+### Frontend (TypeScript/React)
+Located in [electron/src/machines/motor_test_machine/](/electron/src/machines/motor_test_machine/) and [electron/src/routes/routes.tsx](/electron/src/routes/routes.tsx).
+
+1. **`useTestMotor.ts`**: Custom hook managing the optimistic state and communication with the backend.
+2. **`TestMotorControlPage.tsx`**: The UI using QiTech UI components (`ControlCard`, `EditValue`, `SelectionGroupBoolean`) to match the look and feel of the Winder2.
+3. **Routing**: Integrated into `routes.tsx` using TanStack Router, ensuring the machine appears in the sidebar and navigation works correctly.
@@ -0,0 +1,196 @@
+# Minimal Example — Analog Input Wago 750-455
+
+## Table of Contents
+1. [Introduction](#1-introduction)
+2. [Requirements](#2-requirements)
+3. [Hardware Setup](#3-hardware-setup)
+4. [Software Setup](#4-software-setup)
+5. [Demo](#5-demo)
+6. [References](#6-references)
+
+## 1. Introduction
+The Wago 750-455 Analog Input example demonstrates how to measure analog current on a **Wago 750-455 EtherCAT module** using the QiTech machine framework. This module provides 4 independent analog input channels that can read 4-20mA signals.
+
+## 2. Requirements
+
+### Hardware
+- **Wago 750-354 EtherCAT Coupler**
+- **Wago 750-602 Power Supply** (24V VDC)
+- **Wago 750-455 EtherCAT Module** (4-channel analog input, 4-20mA)
+- **Wago 750-600 End Module** 
+- **24 V DC power supply** for the Wago system
+- **Adjustable DC power supply** (or any other means of producing 4-20mA DC @ <10V)
+- Jumper / bridge wires (0.5–1.5 mm² recommended)
+- A **Linux PC** (Ubuntu/Debian recommended)
+- Standard Ethernet cable
+- Flat screwdriver
+
+### Software
+*(Installation steps in Section 4)*
+- Rust toolchain
+- Node.js + npm
+- Git
+- QiTech Control repository
+- EtherCAT HAL (included inside repo)
+
+## 3. Hardware Setup
+
+### 3.1 Overview
+The Wago 750-455 is a 4-channel analog input module that measures current signals in the 4-20mA range. Each channel has its own input terminals and can operate independently.
+
+#### ⚠️ Safety Warning
+Always disconnect power before wiring.
+Working on live EtherCAT modules can cause serious damage or electrical shock.
+
+### 3.2 Wiring Procedure
+
+#### 3.2.1 Safe Wiring (Wago Spring Clamp)
+1. Insert a screwdriver **straight** into the square release hole.
+2. Insert the stripped wire into the round opening.
+3. Remove the screwdriver — the spring clamp locks the wire.
+
+![](../assets/wiring.png)
+
+---
+
+### 3.3 Wago 750-455 Module Wiring
+
+The Wago 750-455 has 4 analog input channels. Each channel requires two terminals:
+
+**Channel 1 (AI1):**
+- Terminal 1: ⊕ (Positive input)
+- Terminal 2: ⊖ (Negative input/Ground)
+
+**Channel 2 (AI2):**
+- Terminal 3: ⊕ (Positive input)
+- Terminal 4: ⊖ (Negative input/Ground)
+
+**Channel 3 (AI3):**
+- Terminal 5: ⊕ (Positive input)
+- Terminal 6: ⊖ (Negative input/Ground)
+
+**Channel 4 (AI4):**
+- Terminal 7: ⊕ (Positive input)
+- Terminal 8: ⊖ (Negative input/Ground)
+
+For this minimal example, we'll connect at least one channel to an adjustable power supply:
+
+1. Wire adjustable power supply ⊕ to **Terminal 1** (Channel 1 positive)
+2. Wire adjustable power supply ⊖ to **Terminal 2** (Channel 1 negative)
+
+*Repeat for additional channels as needed.*
+
+---
+
+### 3.4 Wago I/O System Integration
+
+The Wago 750-455 module plugs into a Wago fieldbus system. Consult your specific Wago controller/coupler documentation for:
+- Power supply requirements
+- Network configuration
+- Module placement in the I/O rack
+
+The module automatically connects to the backplane for EtherCAT communication and power.
+
+---
+
+### 3.5 Power & Ethernet
+
+#### Power
+Ensure your Wago system has adequate 24V DC power connected per manufacturer specifications.
+
+#### Ethernet
+Connect your PC to the Wago controller/coupler using a standard Ethernet cable.
+
+---
+
+## 4. Software Setup
+
+### 4.1 Installing on Ubuntu/Debian
+
+Paste this into your terminal:
+
+```bash
+# Press Enter when prompted
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+
+sudo apt update
+sudo apt install -y npm nodejs git
+
+git clone git@github.com:qitechgmbh/control.git
+cd control/electron
+npm install
+```
+
+### 4.2 Running the Backend
+
+```bash
+./cargo_run_linux.sh
+```
+
+This script:
+- Builds the backend
+- Grants required system capabilities (raw sockets)
+- Starts EtherCAT communication
+
+Ensure the Wago controller is connected and powered.
+
+### 4.3 Running the Frontend
+
+```bash
+cd electron
+npm run start
+```
+
+This launches the QiTech Control dashboard.
+
+---
+
+## 5. Demo
+
+### 5.1 Assigning Devices in the Dashboard
+
+Once both backend and frontend are running:
+
+1. Navigate to **Setup → EtherCAT** page
+2. You should see your Wago controller and the 750-455 module listed
+3. Select the Device called 750-354 and assign the Wago AI Test V1 Machine, set the Serial to 1 and set the device role to 0 (Wago Bus Coupler)
+4. Press write thn restart the backend to load the changes
+
+### 5.2 Testing Analog Input
+
+1. Set your adjustable power supply to output a current in the 4-20mA range
+2. In the dashboard, navigate to the monitoring view
+3. Observe the analog input value for the connected channel(s)
+
+### 5.3 Channel Specifications
+
+The Wago 750-455 provides:
+- **Input Range:** 4-20mA
+- **Wiring Error Detection:** Built-in detection for open/short circuit conditions
+- **4 Independent Channels:** Each can be read separately
+
+### 5.4 Error Detection
+
+The module includes wiring error detection. If you see a wiring error flag:
+- Check that your current source is within the 4-20mA range
+- Verify all wire connections are secure
+- Ensure the current loop is properly closed
+
+---
+
+## 6. References
+
+### Wago Documentation
+- [Wago 750-455 Product Page](https://www.wago.com/de-en/io-systems/4-channel-analog-input/p/750-455)
+- Wago I/O System manual
+- EtherCAT configuration guide for Wago systems
+
+### QiTech Control
+- [Architecture Overview](../architecture-overview.md)
+- [EtherCAT Basics](../ethercat-basics.md)
+- [Device Documentation](../devices.md)
+- [Getting Started Guide](getting-started.md)
+
+### Related Examples
+- [Minimal Example — EL3021](minimal-example-el3021.md) (Single channel analog input)
+- [Minimal Example — EL2004](minimal-example-el2004.md) (Digital output)
@@ -0,0 +1,240 @@
+# Minimal Example — LED Control on the WAGO750-402
+A complete hardware + software walkthrough
+
+---
+
+## Table of Contents
+1. [Introduction](#1-introduction)
+2. [Requirements](#2-requirements)
+3. [Hardware Setup](#3-hardware-setup)
+4. [Software Setup](#4-software-setup)
+5. [Demo](#5-demo)
+6. [References](#6-references)
+
+---
+
+## 1. Introduction
+The WAGO 750-402 Display Example is a minimal demonstation showing how to display the digital inputs on a WAGO 750-402 EtherCAT terminal using the QiTech machine framework.
+It represents the simplest possible hardware interaction in the system:
+Displaying the Digital Inputs using the QiTech Control Dashboard.
+## 2. Requirements
+
+### Hardware
+- WAGO **2787-2144 EtherCAT**
+- WAGO **750-354 EtherCAT Coupler**
+- WAGO **750-602 EtherCAT Power Terminal**
+- WAGO **750-402 EtherCAT Terminal** (4.channle digital input)
+- WAGO **750-600 EtherCAT Endmodule**
+- WAGO **852-1322 Ethernet-Switch**
+- **24V DC Lab power supply**(AC/DC adapter)
+- A **Linux PC** (Ubuntu/Debian recommended)  
+- Standard Ethernet cable  
+- Flat screwdriver  
+
+
+
+---
+
+### Software
+*(Installation steps in Section 4)*
+
+- Rust tollchain
+- Node-js + npm
+- Git
+- QiTech Control repository
+- EtherCAT HAL *(include inside repo)*
+
+## 3. Hardware Setup
+
+### 3.1 Schematic
+
+![](../assets/WAGO750_402_schematic.png)
+
+---
+
+#### ⚠️ Safety Warning  
+Always disconnect power before wiring.  
+Working on live EtherCAT terminals can cause serious damage or electrical shock.
+
+### 3.2.1 Safe Wiring Procedure (Beckhoff Recommended)
+1. Insert a screwdriver **straight** into the square release hole.  
+2. Insert the stripped wire into the round opening.  
+3. Remove the screwdriver — the spring clamp locks the wire.
+
+![](../assets/wiring.png)
+
+---
+
+### 3.2.2 Wiring Steps (Used in This Example)
+
+We supply power to the other devices by using the **750-602 EtherCAT Power Terminal**
+
+Perform the following wiring on the Ethernet-Switch:
+
+1. Red wire (+24V) → PWR+
+2. Black wire (0V) → RPS-
+ 
+#### **Figure 1 —**
+<img src="../assets/WAGO750_402_switch.JPG" width="400">
+
+---
+
+### 3.3 WAGO Wiring the Coupler
+
+Wire the **750-354 EtherCAT Coupler** to the power supply
+1. red wire (+24V)
+2. yellow (0V)
+
+#### **Figure 2 —**
+<img src="../assets/WAGO750_402_coupler.JPG" width="400">
+
+---
+
+### 3.4 750-602 EtherCAT Power Terminal Integration
+
+Slide the **750-602 EtherCAT Power Terminal** onto the **right side of the 750-354 Coupler** until it locks.
+
+Next We need to wire the EtherCat Power Terminal
+
+Perform the next wiring Steps:
+
+1. Green wire (Ground) → **Terminal4**
+2. Red wire (+24V) from  **750-602 EtherCAT Power Terminal** → **Terminal 2**
+3. Black wire(0V) from **750-602 EtherCAT Power Terminal** → **Terminal 3**
+4. Red wire (+24V) from **750-354 EtherCAT Coupler** → **Terminal 6**
+5. Yellow wire (0V) from **750-354 EtherCAT Coupler** → **Terminal 7**
+
+#### **Figure 3 — Wiring**
+<img src="../assets/WAGO750_402_power_terminal.JPG" width="400">
+
+---
+
+## 3.5 750-402 EtherCAT Terminal Integration
+
+Slide the **750-402 EtherCAT Terminal** onto to **right side of the 750-602 EtherCAT Power Terminal** until it locks.
+
+Wire from the **24V DC Lab Adapter** → **Terminal 1**
+
+#### **Figure 4 — Wiring**
+<img src="../assets/WAGO750_402_terminal.JPG" width="400">
+
+## 3.6 750-600 Final Assemly
+
+Slide the **750-600 EtherCAT Endmodule** onto to **right side of the 7750-402 EtherCAT Terminal** until it locks.
+
+No wiring is required
+
+#### **Figure 5 — 750-402 + 750-600 Connected**
+<img src="../assets/WAGO750_402_end_modul.JPG" width="400">
+
+## 3.7 Power & Etherneet 
+
+### Power
+
+Connect the 2787-2144 power supply to the power outlet
+
+### Ehternet
+
+Use a standard LAN cable to connect to your PC → **852-1322 Ethernet-Switch** 
+
+And another from **852-1322 Ethernet-Switch** → **750-354 EtherCAT Coupler**
+
+#### **Figure 6 — Ethernet**
+<img src="../assets/WAGO750_402_ethernet.JPG" width="400">
+
+## 4. Software Setup
+
+### 4.1 Installing on Ubuntu/Debian
+Paste this into your terminal:
+
+```bash
+# Press Enter when prompted
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+
+sudo apt update
+sudo apt install -y npm nodejs git
+
+git clone git@github.com:qitechgmbh/control.git
+cd control/electron
+npm install
+```
+### 4.2 Running the Backend
+```bash
+./cargo_run_linux.sh
+```
+This script:
+
+- Builds the backend
+
+- Grants required system capabilities (raw sockets)
+
+- Starts EtherCAT communication
+
+Ensure the WAGO750-402 is connected.
+
+### 4.3 Running the Frontend
+```bash
+cd electron
+npm run start
+```
+
+This launches the QiTech Control dashboard.
+
+## 5. Demo
+
+### 5.1 Assigning Devices in the Dashboard
+
+Once the backend + frontend are running, you should see:
+
+- WAGO750-354 (Coupler)
+
+- wago module (Digital Input Terminal)
+
+![](../assets/WAGO750_402_discovery.png)
+
+Steps:
+
+- Click Assign on the wago module
+
+- Select Digital Input Machine V1
+ 
+![](../assets/WAGO750_402_setmachine.png)
+
+
+- Enter a serial number except for 0
+
+![](../assets/WAGO750_402_serserial.png)
+
+- Click Write
+
+### 5.2 Diyplaying LED
+Navigate to:
+
+Machines → DigitalInputMachine
+
+![](../assets/WAGO750_402_machinedetected.png)
+
+You will see this interface:
+
+![](../assets/WAGO750_402_machinecontrol1.png)
+
+Now you can apply a Voltage of the Range of 15V-30V (+24V recommended) from the DC lab power supply to the Terminal.
+The Terminal can read the digital input, which is signaled by the LED on the Terminal and should be displayed in the Control software.
+
+In our example it lights up the first LED
+
+![](../assets/WAGO750_402_machinecontrol2.png)
+
+## 6. References
+This guide incorporates information from official WAGO documentation.
+All diagrams, product names, and figures belong to Beckhoff Automation GmbH & Co. KG and are used here solely for educational purposes.
+
+Referenced Manuals
+
+[WAGO 750-402 Documentation](https://www.wago.com/de/io-systeme/4-kanal-digitaleingang/p/750-402#downloads)
+
+[WAGO 750-354 Documentation](https://www.wago.com/de/io-systeme/feldbuskoppler-ethercat/p/750-354#details)
+
+[WAGO 750-602 Documentation](https://www.wago.com/de/io-systeme/potentialeinspeisung/p/750-602#details)
+
+[WAGO 750-354 Documentation](https://www.wago.com/de/io-systeme/endmodul/p/750-600#details)
@@ -10,9 +10,15 @@ The Qitech Control Panel exposes a small HTTP interface for discovering machines

 ## Authentication

-The panel does **not** perform HTTP authentication. The expected security model is **network-level isolation**: anything that can send packets to the panel’s Ethernet interface is treated as trusted. This matches common security assumptions in EtherCAT-style control networks.
+The panel does **not** perform HTTP authentication. The expected security model is **network-level isolation**: anything that can send packets to the panel’s Ethernet interface is treated as trusted. This matches common security assumptions in EtherCAT-style control networks. It is therefore suggested to run the entire production line in isolated operation.

-The panel is configured to administer its own subnet `10.10.10.0/24` via DHCP, while Wi-Fi can be used for upstream internet connectivity (if configured). If you need authentication or access from outside the isolated subnet, place a router/device in **client/bridge mode** on the panel network and expose the panel through a **reverse proxy** where you can add authentication, logging, rate limiting, etc.
+The panel is configured to administer its own subnet `10.10.10.0/24` via DHCP, while Wi-Fi can be used for upstream internet connectivity. To let the outside world communicate with the production line, a router should be placed at the network bondary bridging the production line's subnet and the rest of the network. The router can run in **client/bridge mode** on the line's subnet and expose the panel's API via **port forwading** or through a **reverse proxy** where one can add authentication, logging, rate limiting, etc.
+
+The following graphic depicts the suggested network topology for a single production line. Many lines could potentially share the same router.
+
+<p align="center">
+  <img width="769" height="528" alt="Suggested network topology" src="./assets/subnet.png" />
+</p>

 If DNS is available on the subnet, you may be able to resolve `qitech.control`; otherwise use the static address `10.10.10.1`.

@@ -1,12 +1,12 @@
 {
  "name": "qitech-control-electron",
-  "version": "1.0.0",
+  "version": "2.4.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "qitech-control-electron",
-      "version": "1.0.0",
+      "version": "2.4.1",
      "dependencies": {
        "@hookform/resolvers": "^5.2.2",
        "@icons-pack/react-simple-icons": "^11.2.0",
@@ -40,12 +40,12 @@
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-hook-form": "^7.57.0",
-        "react-i18next": "^15.4.1",
+        "react-i18next": "^16.5.4",
        "react-markdown": "^10.1.0",
        "react-virtualized": "^9.22.6",
        "rehype-raw": "^7.0.0",
        "remark-gfm": "^4.0.1",
-        "socket.io-client": "^4.8.1",
+        "socket.io-client": "^4.8.3",
        "socket.io-msgpack-parser": "^3.0.2",
        "sonner": "^2.0.1",
        "tailwind-merge": "^3.0.1",
@@ -54,7 +54,7 @@
        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
        "zod": "^4.3.5",
        "zod-validation-error": "^5.0.0",
-        "zustand": "^5.0.8"
+        "zustand": "^5.0.11"
      },
      "devDependencies": {
        "@electron/fuses": "^1.8.0",
@@ -73,7 +73,7 @@
        "@types/react-virtualized": "^9.22.2",
        "electron": "^37.3.1",
        "electron-playwright-helpers": "^1.7.1",
-        "eslint": "^9.20.1",
+        "eslint": "^9.39.2",
        "eslint-config-prettier": "^10.1.2",
        "eslint-plugin-prettier": "^5.5.4",
        "eslint-plugin-react": "^7.37.4",
@@ -90,7 +90,7 @@
        "vite": "^6.4.1",
        "vite-plugin-electron": "^0.29.0",
        "vite-plugin-electron-renderer": "^0.14.6",
-        "vitest": "^3.0.6"
+        "vitest": "^4.0.18"
      }
    },
    "node_modules/@adobe/css-tools": {
@@ -1305,9 +1305,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.39.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
-      "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -2889,6 +2889,13 @@
      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
      "license": "MIT"
    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@standard-schema/utils": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -4116,39 +4123,40 @@
      }
    },
    "node_modules/@vitest/expect": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
-      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
+      "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
        "@types/chai": "^5.2.2",
-        "@vitest/spy": "3.2.4",
-        "@vitest/utils": "3.2.4",
-        "chai": "^5.2.0",
-        "tinyrainbow": "^2.0.0"
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "chai": "^6.2.1",
+        "tinyrainbow": "^3.0.3"
      },
      "funding": {
        "url": "https://opencollective.com/vitest"
      }
    },
    "node_modules/@vitest/mocker": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
-      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz",
+      "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@vitest/spy": "3.2.4",
+        "@vitest/spy": "4.0.18",
        "estree-walker": "^3.0.3",
-        "magic-string": "^0.30.17"
+        "magic-string": "^0.30.21"
      },
      "funding": {
        "url": "https://opencollective.com/vitest"
      },
      "peerDependencies": {
        "msw": "^2.4.9",
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+        "vite": "^6.0.0 || ^7.0.0-0"
      },
      "peerDependenciesMeta": {
        "msw": {
@@ -4160,42 +4168,41 @@
      }
    },
    "node_modules/@vitest/pretty-format": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
-      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
+      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "tinyrainbow": "^2.0.0"
+        "tinyrainbow": "^3.0.3"
      },
      "funding": {
        "url": "https://opencollective.com/vitest"
      }
    },
    "node_modules/@vitest/runner": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz",
-      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz",
+      "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@vitest/utils": "3.2.4",
-        "pathe": "^2.0.3",
-        "strip-literal": "^3.0.0"
+        "@vitest/utils": "4.0.18",
+        "pathe": "^2.0.3"
      },
      "funding": {
        "url": "https://opencollective.com/vitest"
      }
    },
    "node_modules/@vitest/snapshot": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz",
-      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz",
+      "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@vitest/pretty-format": "3.2.4",
-        "magic-string": "^0.30.17",
+        "@vitest/pretty-format": "4.0.18",
+        "magic-string": "^0.30.21",
        "pathe": "^2.0.3"
      },
      "funding": {
@@ -4203,28 +4210,24 @@
      }
    },
    "node_modules/@vitest/spy": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
-      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
+      "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
      "dev": true,
      "license": "MIT",
-      "dependencies": {
-        "tinyspy": "^4.0.3"
-      },
      "funding": {
        "url": "https://opencollective.com/vitest"
      }
    },
    "node_modules/@vitest/utils": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
-      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
+      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@vitest/pretty-format": "3.2.4",
-        "loupe": "^3.1.4",
-        "tinyrainbow": "^2.0.0"
+        "@vitest/pretty-format": "4.0.18",
+        "tinyrainbow": "^3.0.3"
      },
      "funding": {
        "url": "https://opencollective.com/vitest"
@@ -4639,16 +4642,6 @@
        "node": "*"
      }
    },
-    "node_modules/cac": {
-      "version": "6.7.14",
-      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
-      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/cacheable-lookup": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
@@ -4769,18 +4762,11 @@
      }
    },
    "node_modules/chai": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
-      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
      "dev": true,
      "license": "MIT",
-      "dependencies": {
-        "assertion-error": "^2.0.1",
-        "check-error": "^2.1.1",
-        "deep-eql": "^5.0.1",
-        "loupe": "^3.1.0",
-        "pathval": "^2.0.0"
-      },
      "engines": {
        "node": ">=18"
      }
@@ -4842,16 +4828,6 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
-    "node_modules/check-error": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
-      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      }
-    },
    "node_modules/class-variance-authority": {
      "version": "0.7.1",
      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -5134,16 +5110,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/deep-eql": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
-      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -5812,9 +5778,9 @@
      }
    },
    "node_modules/eslint": {
-      "version": "9.39.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
-      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "dev": true,
      "license": "MIT",
      "peer": true,
@@ -5825,7 +5791,7 @@
        "@eslint/config-helpers": "^0.4.2",
        "@eslint/core": "^0.17.0",
        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.1",
+        "@eslint/js": "9.39.2",
        "@eslint/plugin-kit": "^0.4.1",
        "@humanfs/node": "^0.16.6",
        "@humanwhocodes/module-importer": "^1.0.1",
@@ -8069,13 +8035,6 @@
        "loose-envify": "cli.js"
      }
    },
-    "node_modules/loupe": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
-      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/lowercase-keys": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
@@ -9232,6 +9191,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
    "node_modules/once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -9420,16 +9390,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/pathval": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
-      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.16"
-      }
-    },
    "node_modules/pend": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -9786,16 +9746,17 @@
      }
    },
    "node_modules/react-i18next": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.7.4.tgz",
-      "integrity": "sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==",
+      "version": "16.5.4",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.5.4.tgz",
+      "integrity": "sha512-6yj+dcfMncEC21QPhOTsW8mOSO+pzFmT6uvU7XXdvM/Cp38zJkmTeMeKmTrmCMD5ToT79FmiE/mRWiYWcJYW4g==",
      "license": "MIT",
      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "html-parse-stringify": "^3.0.1"
+        "@babel/runtime": "^7.28.4",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
      },
      "peerDependencies": {
-        "i18next": ">= 23.4.0",
+        "i18next": ">= 25.6.2",
        "react": ">= 16.8.0",
        "typescript": "^5"
      },
@@ -10326,9 +10287,9 @@
      }
    },
    "node_modules/seroval": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.4.0.tgz",
-      "integrity": "sha512-BdrNXdzlofomLTiRnwJTSEAaGKyHHZkbMXIywOh7zlzp4uZnXErEwl9XZ+N1hJSNpeTtNxWvVwN0wUzAIQ4Hpg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.5.0.tgz",
+      "integrity": "sha512-OE4cvmJ1uSPrKorFIH9/w/Qwuvi/IMcGbv5RKgcJ/zjA/IohDLU6SVaxFN9FwajbP7nsX0dQqMDes1whk3y+yw==",
      "license": "MIT",
      "peer": true,
      "engines": {
@@ -10336,9 +10297,9 @@
      }
    },
    "node_modules/seroval-plugins": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.4.0.tgz",
-      "integrity": "sha512-zir1aWzoiax6pbBVjoYVd0O1QQXgIL3eVGBMsBsNmM8Ukq90yGaWlfx0AB9dTS8GPqrOrbXn79vmItCUP9U3BQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.5.0.tgz",
+      "integrity": "sha512-EAHqADIQondwRZIdeW2I636zgsODzoBDwb3PT/+7TLDWyw1Dy/Xv7iGUIEXXav7usHDE9HVhOU61irI3EnyyHA==",
      "license": "MIT",
      "engines": {
        "node": ">=10"
@@ -10509,13 +10470,13 @@
      "license": "ISC"
    },
    "node_modules/socket.io-client": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
-      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
+      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
      "license": "MIT",
      "dependencies": {
        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.3.2",
+        "debug": "~4.4.1",
        "engine.io-client": "~6.6.1",
        "socket.io-parser": "~4.2.4"
      },
@@ -10523,23 +10484,6 @@
        "node": ">=10.0.0"
      }
    },
-    "node_modules/socket.io-client/node_modules/debug": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
-      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/socket.io-msgpack-parser": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/socket.io-msgpack-parser/-/socket.io-msgpack-parser-3.0.2.tgz",
@@ -10581,36 +10525,15 @@
      }
    },
    "node_modules/solid-js": {
-      "version": "1.9.10",
-      "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.10.tgz",
-      "integrity": "sha512-Coz956cos/EPDlhs6+jsdTxKuJDPT7B5SVIWgABwROyxjY7Xbr8wkzD68Et+NxnV7DLJ3nJdAC2r9InuV/4Jew==",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.1.0",
-        "seroval": "~1.3.0",
-        "seroval-plugins": "~1.3.0"
-      }
-    },
-    "node_modules/solid-js/node_modules/seroval": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.3.2.tgz",
-      "integrity": "sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==",
+      "version": "1.9.11",
+      "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.11.tgz",
+      "integrity": "sha512-WEJtcc5mkh/BnHA6Yrg4whlF8g6QwpmXXRg4P2ztPmcKeHHlH4+djYecBLhSpecZY2RRECXYUwIc/C2r3yzQ4Q==",
      "license": "MIT",
      "peer": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/solid-js/node_modules/seroval-plugins": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.3.3.tgz",
-      "integrity": "sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "seroval": "^1.0"
+      "dependencies": {
+        "csstype": "^3.1.0",
+        "seroval": "~1.5.0",
+        "seroval-plugins": "~1.5.0"
      }
    },
    "node_modules/sonner": {
@@ -10816,26 +10739,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/strip-literal": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
-      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^9.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/strip-literal/node_modules/js-tokens": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
-      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/style-to-js": {
      "version": "1.1.21",
      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
@@ -10976,11 +10879,14 @@
      "license": "MIT"
    },
    "node_modules/tinyexec": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
-      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
@@ -11028,30 +10934,10 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
-    "node_modules/tinypool": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
-      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      }
-    },
    "node_modules/tinyrainbow": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
-      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tinyspy": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
-      "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
+      "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -11691,29 +11577,6 @@
        }
      }
    },
-    "node_modules/vite-node": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
-      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cac": "^6.7.14",
-        "debug": "^4.4.1",
-        "es-module-lexer": "^1.7.0",
-        "pathe": "^2.0.3",
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
-      },
-      "bin": {
-        "vite-node": "vite-node.mjs"
-      },
-      "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
    "node_modules/vite-plugin-electron": {
      "version": "0.29.0",
      "resolved": "https://registry.npmjs.org/vite-plugin-electron/-/vite-plugin-electron-0.29.0.tgz",
@@ -11782,51 +11645,50 @@
      }
    },
    "node_modules/vitest": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
-      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz",
+      "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@types/chai": "^5.2.2",
-        "@vitest/expect": "3.2.4",
-        "@vitest/mocker": "3.2.4",
-        "@vitest/pretty-format": "^3.2.4",
-        "@vitest/runner": "3.2.4",
-        "@vitest/snapshot": "3.2.4",
-        "@vitest/spy": "3.2.4",
-        "@vitest/utils": "3.2.4",
-        "chai": "^5.2.0",
-        "debug": "^4.4.1",
-        "expect-type": "^1.2.1",
-        "magic-string": "^0.30.17",
+        "@vitest/expect": "4.0.18",
+        "@vitest/mocker": "4.0.18",
+        "@vitest/pretty-format": "4.0.18",
+        "@vitest/runner": "4.0.18",
+        "@vitest/snapshot": "4.0.18",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "es-module-lexer": "^1.7.0",
+        "expect-type": "^1.2.2",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
        "pathe": "^2.0.3",
-        "picomatch": "^4.0.2",
-        "std-env": "^3.9.0",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
        "tinybench": "^2.9.0",
-        "tinyexec": "^0.3.2",
-        "tinyglobby": "^0.2.14",
-        "tinypool": "^1.1.1",
-        "tinyrainbow": "^2.0.0",
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
-        "vite-node": "3.2.4",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0",
        "why-is-node-running": "^2.3.0"
      },
      "bin": {
        "vitest": "vitest.mjs"
      },
      "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
      },
      "funding": {
        "url": "https://opencollective.com/vitest"
      },
      "peerDependencies": {
        "@edge-runtime/vm": "*",
-        "@types/debug": "^4.1.12",
-        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
-        "@vitest/browser": "3.2.4",
-        "@vitest/ui": "3.2.4",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.0.18",
+        "@vitest/browser-preview": "4.0.18",
+        "@vitest/browser-webdriverio": "4.0.18",
+        "@vitest/ui": "4.0.18",
        "happy-dom": "*",
        "jsdom": "*"
      },
@@ -11834,13 +11696,19 @@
        "@edge-runtime/vm": {
          "optional": true
        },
-        "@types/debug": {
+        "@opentelemetry/api": {
          "optional": true
        },
        "@types/node": {
          "optional": true
        },
-        "@vitest/browser": {
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
          "optional": true
        },
        "@vitest/ui": {
@@ -12226,9 +12094,9 @@
      }
    },
    "node_modules/zustand": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.9.tgz",
-      "integrity": "sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==",
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
      "license": "MIT",
      "engines": {
        "node": ">=12.20.0"
@@ -1,8 +1,8 @@
 {
  "name": "qitech-control-electron",
  "productName": "QiTech Control",
-  "version": "1.0.0",
-  "description": "",
+  "version": "2.4.1",
+  "description": "Next Generation Machine Interface ",
  "main": ".vite/build/main.js",
  "private": true,
  "scripts": {
@@ -36,7 +36,7 @@
    "@types/react-virtualized": "^9.22.2",
    "electron": "^37.3.1",
    "electron-playwright-helpers": "^1.7.1",
-    "eslint": "^9.20.1",
+    "eslint": "^9.39.2",
    "eslint-config-prettier": "^10.1.2",
    "eslint-plugin-prettier": "^5.5.4",
    "eslint-plugin-react": "^7.37.4",
@@ -53,7 +53,7 @@
    "vite": "^6.4.1",
    "vite-plugin-electron": "^0.29.0",
    "vite-plugin-electron-renderer": "^0.14.6",
-    "vitest": "^3.0.6"
+    "vitest": "^4.0.18"
  },
  "dependencies": {
    "@hookform/resolvers": "^5.2.2",
@@ -88,12 +88,12 @@
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.57.0",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^16.5.4",
    "react-markdown": "^10.1.0",
    "react-virtualized": "^9.22.6",
    "rehype-raw": "^7.0.0",
    "remark-gfm": "^4.0.1",
-    "socket.io-client": "^4.8.1",
+    "socket.io-client": "^4.8.3",
    "socket.io-msgpack-parser": "^3.0.2",
    "sonner": "^2.0.1",
    "tailwind-merge": "^3.0.1",
@@ -102,6 +102,6 @@
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
    "zod": "^4.3.5",
    "zod-validation-error": "^5.0.0",
-    "zustand": "^5.0.8"
+    "zustand": "^5.0.11"
  }
 }
@@ -6,7 +6,9 @@ import { TimeSeriesValueNumeric } from "@/control/TimeSeriesValue";
 import { useAquapath1 } from "./useAquapath";
 import { SelectionGroup } from "@/control/SelectionGroup";
 import { EditValue } from "@/control/EditValue";
+import { Badge } from "@/components/ui/badge";
 import { Label } from "@/control/Label";
+import { HeatingZone } from "../../extruder/HeatingZone";

 export function Aquapath1ControlPage() {
  const {
@@ -16,8 +18,12 @@ export function Aquapath1ControlPage() {
    back_flow,
    front_temperature,
    back_temperature,
-    front_temp_reservoir,
-    back_temp_reservoir,
+    front_revolutions,
+    back_revolutions,
+    front_power,
+    back_power,
+    front_total_energy,
+    back_total_energy,
    setAquapathMode,
    setFrontTemperature,
    setBackTemperature,
@@ -29,111 +35,55 @@ export function Aquapath1ControlPage() {
  const backTargetTemperature =
    state?.temperature_states?.back.target_temperature ?? 0;

+  const frontCurrentTemperature =
+    state?.temperature_states?.front.temperature ?? 0;
+  const backCurrentTemperature =
+    state?.temperature_states?.back.temperature ?? 0;
+
+  const frontCoolingBoundary =
+    frontTargetTemperature + (state?.tolerance_states.front.cooling ?? 0);
+  const frontHeatingBoundary =
+    frontTargetTemperature - (state?.tolerance_states.front.heating ?? 0);
+  const backCoolingBoundary =
+    backTargetTemperature + (state?.tolerance_states.back.cooling ?? 0);
+  const backHeatingBoundary =
+    backTargetTemperature - (state?.tolerance_states.back.heating ?? 0);
+
  const frontTargetFlow = state?.flow_states.front.should_flow ?? false;
  const backTargetFlow = state?.flow_states.back.should_flow ?? false;

  return (
    <Page>
      <ControlGrid columns={2}>
-        <ControlCard title="Flow Measurements">
-          <div className="grid grid-cols-2 gap-6">
-            <div className="flex flex-col gap-8">
+        <ControlCard title="Reservoir 1">
+          <div className="grid grid-rows-5 gap-4">
+            <div className="flex flex-row">
              <TimeSeriesValueNumeric
-                label="Flow 1"
+                label="Flow"
                unit="l/min"
                timeseries={front_flow}
                renderValue={(value) => value.toFixed(1)}
              />
            </div>

-            <div className="flex flex-col gap-8">
+            <div className="flex flex-row">
              <TimeSeriesValueNumeric
-                label="Flow 2"
-                unit="l/min"
-                timeseries={back_flow}
-                renderValue={(value) => value.toFixed(1)}
-              />
-            </div>
-          </div>
-
-          <div className="mt-8">
-            <Label label="Pump 1">
-              <SelectionGroup<"On" | "Off">
-                value={frontTargetFlow ? "On" : "Off"}
-                orientation="vertical"
-                className="grid h-full grid-cols-2 gap-2"
-                options={{
-                  Off: {
-                    children: "Off",
-                    icon: "lu:CirclePause",
-                    isActiveClassName: "bg-green-600",
-                    className: "h-full",
-                  },
-                  On: {
-                    children: "On",
-                    icon: "lu:CirclePlay",
-                    isActiveClassName: "bg-green-600",
-                    className: "h-full",
-                  },
-                }}
-                onChange={(value) => {
-                  if (value == "On") {
-                    setFrontFlow(true);
-                  } else {
-                    setFrontFlow(false);
-                  }
-                }}
-              />
-            </Label>
-
-            <Label label="Pump 2">
-              <SelectionGroup<"On" | "Off">
-                value={backTargetFlow ? "On" : "Off"}
-                orientation="vertical"
-                className="grid h-full grid-cols-2 gap-2"
-                options={{
-                  Off: {
-                    children: "Off",
-                    icon: "lu:CirclePause",
-                    isActiveClassName: "bg-green-600",
-                    className: "h-full",
-                  },
-                  On: {
-                    children: "On",
-                    icon: "lu:CirclePlay",
-                    isActiveClassName: "bg-green-600",
-                    className: "h-full",
-                  },
-                }}
-                onChange={(value) => {
-                  if (value == "On") {
-                    setBackFlow(true);
-                  } else {
-                    setBackFlow(false);
-                  }
-                }}
-              />
-            </Label>
-          </div>
-        </ControlCard>
-
-        <ControlCard title="Temperature Measurements">
-          <div className="grid grid-cols-2 gap-6">
-            <div className="flex flex-col gap-8">
-              <TimeSeriesValueNumeric
-                label="Reservoir 1"
+                label="Temperature"
                unit="C"
                timeseries={front_temperature}
                renderValue={(value) => value.toFixed(1)}
              />
-              <Label label="Set Reservoir 1 Target Temperature">
+            </div>
+
+            <div className="flex flex-row gap-4">
+              <Label label="Set Target Temperature">
                <EditValue
-                  title="Set Reservoir 1 Target Temperature"
+                  title="Set Target Temperature"
+                  min={0}
                  value={frontTargetTemperature}
+                  max={80}
                  unit="C"
                  step={0.1}
-                  min={0.0}
-                  max={80.0}
                  renderValue={(value) => value.toFixed(1)}
                  onChange={(val) => {
                    setFrontTemperature(val);
@@ -143,23 +93,88 @@ export function Aquapath1ControlPage() {
                  }
                />
              </Label>
+
+              {frontCurrentTemperature < frontHeatingBoundary &&
+                (state?.flow_states.front.flow ?? 0) > 0 && (
+                  <Badge variant="default">
+                    Power: {front_power.current?.value} W<br />
+                    Total: {front_total_energy.current?.value} kWh
+                  </Badge>
+                )}
+              {frontCurrentTemperature > frontCoolingBoundary &&
+                frontTargetFlow &&
+                (state?.flow_states.front.flow ?? 0) && (
+                  <Badge variant="secondary">Cooling</Badge>
+                )}
            </div>

-            <div className="flex flex-col gap-8">
+            <div className="flex flex-row">
              <TimeSeriesValueNumeric
-                label="Reservoir 2"
+                label="Revolution Speed"
+                unit="%"
+                timeseries={front_revolutions}
+                renderValue={(value) => value.toFixed(1)}
+              />
+            </div>
+
+            <div className="flex flex-row">
+              <Label label="Pump">
+                <SelectionGroup<"On" | "Off">
+                  value={frontTargetFlow ? "On" : "Off"}
+                  orientation="vertical"
+                  className="grid h-full grid-cols-2 gap-2"
+                  options={{
+                    Off: {
+                      children: "Off",
+                      icon: "lu:CirclePause",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                    On: {
+                      children: "On",
+                      icon: "lu:CirclePlay",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                  }}
+                  onChange={(value) => {
+                    setFrontFlow(value == "On");
+                  }}
+                />
+              </Label>
+            </div>
+          </div>
+        </ControlCard>
+
+        <ControlCard title="Reservoir 2">
+          <div className="grid grid-rows-4 gap-4">
+            <div className="flex flex-row">
+              <TimeSeriesValueNumeric
+                label="Flow"
+                unit="l/min"
+                timeseries={back_flow}
+                renderValue={(value) => value.toFixed(1)}
+              />
+            </div>
+
+            <div className="flex flex-row">
+              <TimeSeriesValueNumeric
+                label="Temperature"
                unit="C"
                timeseries={back_temperature}
                renderValue={(value) => value.toFixed(1)}
              />
-              <Label label="Set Reservoir 2 Target Temperature">
+            </div>
+
+            <div className="flex flex-row gap-4">
+              <Label label="Set Target Temperature">
                <EditValue
-                  title="Set Reservoir 2 Target Temperature"
+                  title="Set Target Temperature"
+                  min={0}
                  value={backTargetTemperature}
+                  max={80}
                  unit="C"
                  step={0.1}
-                  min={0.0}
-                  max={80.0}
                  renderValue={(value) => value.toFixed(1)}
                  onChange={(val) => {
                    setBackTemperature(val);
@@ -169,6 +184,56 @@ export function Aquapath1ControlPage() {
                  }
                />
              </Label>
+
+              {backCurrentTemperature < backHeatingBoundary &&
+                backTargetFlow &&
+                (state?.flow_states.front.flow ?? 0) && (
+                  <Badge variant="default">
+                    Power: {back_power.current?.value} W<br />
+                    Total: {back_total_energy.current?.value} kWh
+                  </Badge>
+                )}
+              {backCurrentTemperature > backCoolingBoundary &&
+                frontTargetFlow &&
+                (state?.flow_states.front.flow ?? 0) && (
+                  <Badge variant="secondary">Cooling</Badge>
+                )}
+            </div>
+
+            <div className="flex flex-row">
+              <TimeSeriesValueNumeric
+                label="Revolution Speed"
+                unit="%"
+                timeseries={back_revolutions}
+                renderValue={(value) => value.toFixed(1)}
+              />
+            </div>
+
+            <div className="flex flex-row">
+              <Label label="Pump">
+                <SelectionGroup<"On" | "Off">
+                  value={backTargetFlow ? "On" : "Off"}
+                  orientation="vertical"
+                  className="grid h-full grid-cols-2 gap-2"
+                  options={{
+                    Off: {
+                      children: "Off",
+                      icon: "lu:CirclePause",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                    On: {
+                      children: "On",
+                      icon: "lu:CirclePlay",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                  }}
+                  onChange={(value) => {
+                    setBackFlow(value == "On");
+                  }}
+                />
+              </Label>
            </div>
          </div>
        </ControlCard>
@@ -18,7 +18,13 @@ export function Aquapath1Page() {
          link: "graph",
          title: "Graph",
          icon: "lu:ChartSpline",
-          activeLink: "graphs",
+          activeLink: "graph",
+        },
+        {
+          link: "settings",
+          title: "Config",
+          icon: "lu:Settings",
+          activeLink: "settings",
        },
      ]}
    />
@@ -0,0 +1,121 @@
+import { Page } from "@/components/Page";
+import { ControlCard } from "@/control/ControlCard";
+import { ControlGrid } from "@/control/ControlGrid";
+import { EditValue } from "@/control/EditValue";
+import { Label } from "@/control/Label";
+import { useAquapath1 } from "./useAquapath";
+import React from "react";
+
+export function Aquapath1SettingsPage() {
+  const {
+    state,
+    setFrontRevolutions,
+    setBackRevolutions,
+    setFrontHeatingTolerance,
+    setFrontCoolingTolerance,
+    setBackHeatingTolerance,
+    setBackCoolingTolerance,
+  } = useAquapath1();
+
+  return (
+    <Page>
+      <ControlGrid columns={2}>
+        <ControlCard title="Front Fan Revolutions">
+          <Label label="Set Max Revolution Speed">
+            <EditValue
+              title="Set Max Revolution Speed"
+              min={0}
+              value={state?.fan_states.front.revolutions}
+              max={100}
+              unit="%"
+              renderValue={(value) => value.toFixed(1)}
+              onChange={(val) => {
+                setFrontRevolutions(val);
+              }}
+            />
+          </Label>
+        </ControlCard>
+
+        <ControlCard title="Back Fan Revolutions">
+          <Label label="Set Max Revolution Speed">
+            <EditValue
+              title="Set Max Revolution Speed"
+              min={0}
+              value={state?.fan_states.back.revolutions}
+              max={100}
+              unit="%"
+              renderValue={(value) => value.toFixed(1)}
+              onChange={(val) => {
+                setBackRevolutions(val);
+              }}
+            />
+          </Label>
+        </ControlCard>
+
+        <ControlCard title="Front Temperature Tolerances">
+          <Label label="Set Heating Tolerance">
+            <EditValue
+              title="Set Heating Tolerance"
+              min={0}
+              value={state?.tolerance_states.front.heating}
+              max={10}
+              step={0.1}
+              unit="C"
+              renderValue={(value) => value.toFixed(1)}
+              onChange={(val) => {
+                setFrontHeatingTolerance(val);
+              }}
+            />
+          </Label>
+
+          <Label label="Set Cooling Tolerance">
+            <EditValue
+              title="Set Cooling Tolerance"
+              min={0}
+              value={state?.tolerance_states.front.cooling}
+              max={10}
+              step={0.1}
+              unit="C"
+              renderValue={(value) => value.toFixed(1)}
+              onChange={(val) => {
+                setFrontCoolingTolerance(val);
+              }}
+            />
+          </Label>
+        </ControlCard>
+
+        <ControlCard title="Back Temperature Tolerances">
+          <Label label="Set Heating Tolerance">
+            <EditValue
+              title="Set Heating Tolerance"
+              min={0}
+              value={state?.tolerance_states.back.heating}
+              max={10}
+              step={0.1}
+              unit="C"
+              renderValue={(value) => value.toFixed(1)}
+              onChange={(val) => {
+                setBackHeatingTolerance(val);
+              }}
+            />
+          </Label>
+
+          <Label label="Set Cooling Tolerance">
+            <EditValue
+              title="Set Cooling Tolerance"
+              min={0}
+              value={state?.tolerance_states.back.cooling}
+              max={10}
+              step={0.1}
+              unit="C"
+              renderValue={(value) => value.toFixed(1)}
+              onChange={(val) => {
+                setBackCoolingTolerance(val);
+              }}
+            />
+          </Label>
+        </ControlCard>
+      </ControlGrid>
+    </Page>
+  );
+}
@@ -51,6 +51,23 @@ export const flowStatesSchema = z.object({
  back: flowStateSchema,
 });

+export const fanStateSchema = z.object({
+  revolutions: z.number(),
+  max_revolutions: z.number(),
+});
+export const fanStatesSchema = z.object({
+  back: fanStateSchema,
+  front: fanStateSchema,
+});
+
+export const toleranceStateSchema = z.object({
+  heating: z.number(),
+  cooling: z.number(),
+});
+export const toleranceStatesSchema = z.object({
+  back: toleranceStateSchema,
+  front: toleranceStateSchema,
+});
 /**
 * Live values event schema (time-series data)
 */
@@ -61,6 +78,12 @@ export const liveValuesEventDataSchema = z.object({
  back_temperature: z.number(),
  front_temp_reservoir: z.number(),
  back_temp_reservoir: z.number(),
+  front_revolutions: z.number(),
+  back_revolutions: z.number(),
+  back_power: z.number(),
+  front_power: z.number(),
+  front_total_energy: z.number(),
+  back_total_energy: z.number(),
 });

 /**
@@ -71,6 +94,8 @@ export const stateEventDataSchema = z.object({
  mode_state: modeStateSchema,
  flow_states: flowStatesSchema,
  temperature_states: tempStatesSchema,
+  fan_states: fanStatesSchema,
+  tolerance_states: toleranceStatesSchema,
 });

 // ========== Event Schemas with Wrappers ==========
@@ -96,6 +121,15 @@ export type Aquapath1NamespaceStore = {

  front_temp_reservoir: TimeSeries;
  back_temp_reservoir: TimeSeries;
+
+  front_revolutions: TimeSeries;
+  back_revolutions: TimeSeries;
+
+  front_power: TimeSeries;
+  back_power: TimeSeries;
+
+  front_total_energy: TimeSeries;
+  back_total_energy: TimeSeries;
 };

 const { initialTimeSeries: front_temperature, insert: addTemperature1 } =
@@ -108,6 +142,18 @@ const { initialTimeSeries: back_temp_reservoir, insert: addTempReserv2 } =
  createTimeSeries();
 const { initialTimeSeries: front_flow, insert: addFlow1 } = createTimeSeries();
 const { initialTimeSeries: back_flow, insert: addFlow2 } = createTimeSeries();
+const { initialTimeSeries: front_revolutions, insert: addFan1 } =
+  createTimeSeries();
+const { initialTimeSeries: back_revolutions, insert: addFan2 } =
+  createTimeSeries();
+const { initialTimeSeries: front_power, insert: addFrontPower } =
+  createTimeSeries();
+const { initialTimeSeries: back_power, insert: addBackPower } =
+  createTimeSeries();
+const { initialTimeSeries: front_total_energy, insert: addFrontEnergy } =
+  createTimeSeries();
+const { initialTimeSeries: back_total_energy, insert: addBackEnergy } =
+  createTimeSeries();

 /**
 * Factory function to create a new Aquapath namespace store
@@ -125,6 +171,12 @@ export const createAquapath1NamespaceStore =
        back_flow: back_flow,
        front_temp_reservoir: front_temp_reservoir,
        back_temp_reservoir: back_temp_reservoir,
+        front_revolutions: front_revolutions,
+        back_revolutions: back_revolutions,
+        back_power: back_power,
+        front_power: front_power,
+        front_total_energy: front_total_energy,
+        back_total_energy: back_total_energy,
      };
    });
  };
@@ -192,6 +244,30 @@ export function aquapath1MessageHandler(
            value: liveValuesEvent.data.back_temp_reservoir,
            timestamp: event.ts,
          }),
+          front_revolutions: addFan1(state.front_revolutions, {
+            value: liveValuesEvent.data.front_revolutions,
+            timestamp: event.ts,
+          }),
+          back_revolutions: addFan2(state.back_revolutions, {
+            value: liveValuesEvent.data.back_revolutions,
+            timestamp: event.ts,
+          }),
+          front_power: addFrontPower(state.front_power, {
+            value: liveValuesEvent.data.front_power,
+            timestamp: event.ts,
+          }),
+          back_power: addBackPower(state.back_power, {
+            value: liveValuesEvent.data.back_power,
+            timestamp: event.ts,
+          }),
+          front_total_energy: addFrontEnergy(state.front_total_energy, {
+            value: liveValuesEvent.data.front_total_energy,
+            timestamp: event.ts,
+          }),
+          back_total_energy: addBackEnergy(state.back_total_energy, {
+            value: liveValuesEvent.data.back_total_energy,
+            timestamp: event.ts,
+          }),
        }));
      } else {
        handleUnhandledEventError(eventName);
@@ -42,12 +42,18 @@ export function useAquapath1() {
  const {
    state,
    defaultState,
-    front_temperature: front_temperature,
-    back_temperature: back_temperature,
-    front_flow: front_flow,
-    back_flow: back_flow,
-    front_temp_reservoir: front_temp_reservoir,
-    back_temp_reservoir: back_temp_reservoir,
+    front_temperature,
+    back_temperature,
+    front_flow,
+    back_flow,
+    front_temp_reservoir,
+    back_temp_reservoir,
+    front_revolutions,
+    back_revolutions,
+    front_power,
+    back_power,
+    front_total_energy,
+    back_total_energy,
  } = useAquapath1Namespace(machineIdentification);

  // Single optimistic state for all state management
@@ -125,6 +131,89 @@ export function useAquapath1() {
    );
  };

+  const setFrontRevolutions = (revolutions: number) => {
+    updateStateOptimistically(
+      (current) => {
+        current.data.fan_states.back.revolutions = revolutions;
+      },
+      () => {
+        requestFrontRevolutions({
+          machine_identification_unique: machineIdentification,
+          data: { SetFrontRevolutions: revolutions },
+        });
+      },
+    );
+  };
+
+  const setBackRevolutions = (revolutions: number) => {
+    updateStateOptimistically(
+      (current) => {
+        current.data.fan_states.back.revolutions = revolutions;
+      },
+      () =>
+        requestBackRevolutions({
+          machine_identification_unique: machineIdentification,
+          data: { SetBackRevolutions: revolutions },
+        }),
+    );
+  };
+
+  const setFrontHeatingTolerance = (tolerance: number) => {
+    updateStateOptimistically(
+      (current) => {
+        current.data.tolerance_states.front.heating = tolerance;
+      },
+      () => {
+        requestFrontHeatingTolerance({
+          machine_identification_unique: machineIdentification,
+          data: { SetFrontHeatingTolerance: tolerance },
+        });
+      },
+    );
+  };
+
+  const setBackHeatingTolerance = (tolerance: number) => {
+    updateStateOptimistically(
+      (current) => {
+        current.data.tolerance_states.back.heating = tolerance;
+      },
+      () => {
+        requestBackHeatingTolerance({
+          machine_identification_unique: machineIdentification,
+          data: { SetBackHeatingTolerance: tolerance },
+        });
+      },
+    );
+  };
+
+  const setFrontCoolingTolerance = (tolerance: number) => {
+    updateStateOptimistically(
+      (current) => {
+        current.data.tolerance_states.front.cooling = tolerance;
+      },
+      () => {
+        requestFrontCoolingTolerance({
+          machine_identification_unique: machineIdentification,
+          data: { SetFrontCoolingTolerance: tolerance },
+        });
+      },
+    );
+  };
+
+  const setBackCoolingTolerance = (tolerance: number) => {
+    updateStateOptimistically(
+      (current) => {
+        current.data.tolerance_states.back.cooling = tolerance;
+      },
+      () => {
+        requestBackCoolingTolerance({
+          machine_identification_unique: machineIdentification,
+          data: { SetBackCoolingTolerance: tolerance },
+        });
+      },
+    );
+  };
+
  // Mutation hooks
  const { request: requestAquapathMode } = useMachineMutation(
    z.object({ SetAquaPathMode: z.enum(["Standby", "Auto"]) }),
@@ -141,6 +230,25 @@ export function useAquapath1() {
  const { request: requestBackFlow } = useMachineMutation(
    z.object({ SetBackFlow: z.boolean() }),
  );
+  const { request: requestFrontRevolutions } = useMachineMutation(
+    z.object({ SetFrontRevolutions: z.number() }),
+  );
+  const { request: requestBackRevolutions } = useMachineMutation(
+    z.object({ SetBackRevolutions: z.number() }),
+  );
+  const { request: requestFrontHeatingTolerance } = useMachineMutation(
+    z.object({ SetFrontHeatingTolerance: z.number() }),
+  );
+  const { request: requestFrontCoolingTolerance } = useMachineMutation(
+    z.object({ SetFrontCoolingTolerance: z.number() }),
+  );
+  const { request: requestBackHeatingTolerance } = useMachineMutation(
+    z.object({ SetBackHeatingTolerance: z.number() }),
+  );
+  const { request: requestBackCoolingTolerance } = useMachineMutation(
+    z.object({ SetBackCoolingTolerance: z.number() }),
+  );
+
  // Helper function for optimistic updates using produce
  const updateStateOptimistically = (
    producer: (current: StateEvent) => void,
@@ -165,11 +273,23 @@ export function useAquapath1() {
    back_temperature,
    front_temp_reservoir,
    back_temp_reservoir,
+    front_revolutions,
+    back_revolutions,
+    front_power,
+    back_power,
+    front_total_energy,
+    back_total_energy,

    setAquapathMode,
    setFrontTemperature,
    setBackTemperature,
    setFrontFlow,
    setBackFlow,
+    setFrontRevolutions,
+    setBackRevolutions,
+    setFrontHeatingTolerance,
+    setBackHeatingTolerance,
+    setFrontCoolingTolerance,
+    setBackCoolingTolerance,
  };
 }
@@ -0,0 +1,31 @@
+import { ControlCard } from "@/control/ControlCard";
+import { Page } from "@/components/Page";
+import React from "react";
+import { Label } from "@/control/Label";
+import { useDigitalInputTestMachine } from "./useDigitalInputTestMachine";
+import { Badge } from "@/components/ui/badge";
+import { ControlGrid } from "@/control/ControlGrid";
+import { SelectionGroup } from "@/control/SelectionGroup";
+import { toastError } from "@/components/Toast";
+
+export function DigitalInputTestMachineControlPage() {
+  const { state } = useDigitalInputTestMachine();
+
+  const safeState = state ?? { led_on: [false, false, false, false] };
+
+  return (
+    <Page>
+      <ControlCard title="Machine LEDs">
+        <div className="grid grid-cols-2 gap-6">
+          {safeState.led_on.map((led, index) => (
+            <Label key={index} label={`LED ${index + 1}`}>
+              <Badge variant={led ? "outline" : "destructive"}>
+                {led ? "On" : "OFF"}
+              </Badge>
+            </Label>
+          ))}
+        </div>
+      </ControlCard>
+    </Page>
+  );
+}
@@ -0,0 +1,20 @@
+import { Topbar } from "@/components/Topbar";
+import { digitalInputTestMachineSerialRoute } from "@/routes/routes";
+import React from "react";
+
+export function DigitalInputTestMachinePage() {
+  const { serial } = digitalInputTestMachineSerialRoute.useParams();
+  return (
+    <Topbar
+      pathname={`/_sidebar/machines/digitalInputTestMachine/${serial}`}
+      items={[
+        {
+          link: "control",
+          activeLink: "control",
+          title: "Control",
+          icon: "lu:CirclePlay",
+        },
+      ]}
+    />
+  );
+}
@@ -0,0 +1,78 @@
+import { StoreApi } from "zustand";
+import { create } from "zustand";
+import { z } from "zod";
+import {
+  EventHandler,
+  eventSchema,
+  Event,
+  handleUnhandledEventError,
+  NamespaceId,
+  createNamespaceHookImplementation,
+  ThrottledStoreUpdater,
+} from "@/client/socketioStore";
+import { MachineIdentificationUnique } from "@/machines/types";
+
+// ========== Event Schema ==========
+
+export const stateEventDataSchema = z.object({
+  led_on: z.array(z.boolean()).length(4),
+});
+
+export const stateEventSchema = eventSchema(stateEventDataSchema);
+
+export type StateEvent = z.infer<typeof stateEventDataSchema>;
+
+// ========== Store ==========
+export type DigitalTestMachineNamespaceStore = {
+  state: StateEvent | null;
+};
+
+export const createTestMachineNamespaceStore =
+  (): StoreApi<DigitalTestMachineNamespaceStore> =>
+    create<DigitalTestMachineNamespaceStore>(() => ({
+      state: null,
+    }));
+
+// ========== Message Handler ==========
+export function digitalInputTestMachineMessageHandler(
+  store: StoreApi<DigitalTestMachineNamespaceStore>,
+  throttledUpdater: ThrottledStoreUpdater<DigitalTestMachineNamespaceStore>,
+): EventHandler {
+  return (event: Event<any>) => {
+    const updateStore = (
+      updater: (
+        state: DigitalTestMachineNamespaceStore,
+      ) => DigitalTestMachineNamespaceStore,
+    ) => throttledUpdater.updateWith(updater);
+
+    try {
+      if (event.name === "StateEvent") {
+        const parsed = stateEventSchema.parse(event);
+        updateStore(() => ({ state: parsed.data }));
+      } else {
+        handleUnhandledEventError(event.name);
+      }
+    } catch (error) {
+      console.error(`Error processing ${event.name}:`, error);
+      throw error;
+    }
+  };
+}
+
+// ========== Namespace Hook ==========
+const useDigitalInputTestMachineNamespaceImplementation =
+  createNamespaceHookImplementation<DigitalTestMachineNamespaceStore>({
+    createStore: createTestMachineNamespaceStore,
+    createEventHandler: digitalInputTestMachineMessageHandler,
+  });
+
+export function useDigitalInputTestMachineNamespace(
+  machine_identification_unique: MachineIdentificationUnique,
+): DigitalTestMachineNamespaceStore {
+  const namespaceId: NamespaceId = {
+    type: "machine",
+    machine_identification_unique,
+  };
+
+  return useDigitalInputTestMachineNamespaceImplementation(namespaceId);
+}
@@ -0,0 +1,53 @@
+import { Toast, toastError } from "@/components/Toast";
+import { useStateOptimistic } from "@/lib/useStateOptimistic";
+import { digitalInputTestMachineSerialRoute } from "@/routes/routes";
+import { MachineIdentificationUnique } from "@/machines/types";
+import {
+  useDigitalInputTestMachineNamespace,
+  StateEvent,
+} from "./digitalInputTestMachineNamespace";
+import { useMachineMutate } from "@/client/useClient";
+import { produce } from "immer";
+import { useEffect, useMemo } from "react";
+import { digitalInputTestMachine } from "@/machines/properties";
+import { z } from "zod";
+export function useDigitalInputTestMachine() {
+  const { serial: serialString } =
+    digitalInputTestMachineSerialRoute.useParams();
+
+  // Memoize machine identification
+  const machineIdentification: MachineIdentificationUnique = useMemo(() => {
+    const serial = parseInt(serialString);
+
+    if (isNaN(serial)) {
+      toastError(
+        "Invalid Serial Number",
+        `"${serialString}" is not a valid serial number.`,
+      );
+
+      return {
+        machine_identification: { vendor: 0, machine: 0 },
+        serial: 0,
+      };
+    }
+
+    return {
+      machine_identification: digitalInputTestMachine.machine_identification,
+      serial,
+    };
+  }, [serialString]);
+
+  // Namespace state from backend
+  const { state } = useDigitalInputTestMachineNamespace(machineIdentification);
+
+  // Optimistic state
+  const stateOptimistic = useStateOptimistic<StateEvent>();
+
+  useEffect(() => {
+    if (state) stateOptimistic.setReal(state);
+  }, [state, stateOptimistic]);
+
+  return {
+    state: stateOptimistic.value,
+  };
+}
@@ -14,7 +14,7 @@ import {
  NamespaceId,
  createNamespaceHookImplementation,
  ThrottledStoreUpdater,
-} from "../../../client/socketioStore";
+} from "@/client/socketioStore";
 import { MachineIdentificationUnique } from "@/machines/types";
 import {
  createTimeSeries,
@@ -66,19 +66,13 @@ export type Laser1NamespaceStore = {
  roundness: TimeSeries;
 };

-// Constants for time durations
-const HALF_SECOND = 500;
-
-const { initialTimeSeries: diameter, insert: addDiameter } = createTimeSeries({
-  sampleIntervalLong: HALF_SECOND,
-});
+const { initialTimeSeries: diameter, insert: addDiameter } = createTimeSeries();
 const { initialTimeSeries: x_diameter, insert: addXDiameter } =
-  createTimeSeries({ sampleIntervalLong: HALF_SECOND });
+  createTimeSeries();
 const { initialTimeSeries: y_diameter, insert: addYDiameter } =
-  createTimeSeries({ sampleIntervalLong: HALF_SECOND });
-const { initialTimeSeries: roundness, insert: addRoundness } = createTimeSeries(
-  { sampleIntervalLong: HALF_SECOND },
-);
+  createTimeSeries();
+const { initialTimeSeries: roundness, insert: addRoundness } =
+  createTimeSeries();

 /**
 * Factory function to create a new Laser1 namespace store
@@ -0,0 +1,53 @@
+import { ControlCard } from "@/control/ControlCard";
+import { Page } from "@/components/Page";
+import React from "react";
+import { ControlGrid } from "@/control/ControlGrid";
+import { SelectionGroupBoolean } from "@/control/SelectionGroup";
+import { EditValue } from "@/control/EditValue";
+import { Label } from "@/control/Label";
+import { useTestMotor } from "./useTestMotor";
+
+export function TestMotorControlPage() {
+  const { state, setMotorOn, setVelocity } = useTestMotor();
+
+  // Fallback in case state is still null
+  const safeState = state ?? { motor_enabled: false, motor_velocity: 0 };
+
+  return (
+    <Page>
+      <ControlGrid columns={2}>
+        {/* Basic control */}
+        <ControlCard title="Motor Status">
+          {/* On/Off switch */}
+          <Label label="Power State">
+            <SelectionGroupBoolean
+              value={safeState.motor_enabled}
+              // Icon mapping for True/False
+              optionTrue={{ children: "Enabled", icon: "lu:Play" }}
+              optionFalse={{ children: "Disabled", icon: "lu:CirclePause" }}
+              onChange={(val) => setMotorOn(val)}
+            />
+          </Label>
+        </ControlCard>
+
+        {/* Velocity */}
+        <ControlCard title="Settings">
+          {/* Velocity input with unit */}
+          <Label label="Target Velocity">
+            <EditValue
+              title="Velocity"
+              value={safeState.motor_velocity}
+              unit="rpm"
+              min={0}
+              max={1000} // Limit
+              step={1}
+              onChange={(val) => setVelocity(val)}
+              // Displays the value (as integer)
+              renderValue={(v) => v.toFixed(0)}
+            />
+          </Label>
+        </ControlCard>
+      </ControlGrid>
+    </Page>
+  );
+}
@@ -0,0 +1,22 @@
+import { Topbar } from "@/components/Topbar";
+import { testMotorSerialRoute } from "@/routes/routes";
+import React from "react";
+
+export function TestMotorPage() {
+  // Access is allowed here because this function is called later
+  const { serial } = testMotorSerialRoute.useParams();
+
+  return (
+    <Topbar
+      pathname={`/_sidebar/machines/testmotor/${serial}`}
+      items={[
+        {
+          link: "control",
+          activeLink: "control",
+          title: "Control",
+          icon: "lu:CirclePlay",
+        },
+      ]}
+    />
+  );
+}
@@ -0,0 +1,73 @@
+import { StoreApi } from "zustand";
+import { create } from "zustand";
+import { z } from "zod";
+import {
+  EventHandler,
+  eventSchema,
+  Event,
+  handleUnhandledEventError,
+  NamespaceId,
+  createNamespaceHookImplementation,
+  ThrottledStoreUpdater,
+} from "@/client/socketioStore";
+import { MachineIdentificationUnique } from "@/machines/types";
+
+// ========== Event Schema (Must match StateEvent) ==========
+export const stateEventDataSchema = z.object({
+  motor_enabled: z.boolean(),
+  motor_velocity: z.number(),
+});
+
+export const stateEventSchema = eventSchema(stateEventDataSchema);
+export type StateEvent = z.infer<typeof stateEventDataSchema>;
+
+// ========== Store ==========
+export type TestMotorNamespaceStore = {
+  state: StateEvent | null;
+};
+
+export const createTestMotorNamespaceStore =
+  (): StoreApi<TestMotorNamespaceStore> =>
+    create<TestMotorNamespaceStore>(() => ({
+      state: null,
+    }));
+
+// ========== Message Handler ==========
+export function testMotorMessageHandler(
+  chstore: StoreApi<TestMotorNamespaceStore>,
+  throttledUpdater: ThrottledStoreUpdater<TestMotorNamespaceStore>,
+): EventHandler {
+  return (event: Event<any>) => {
+    const updateStore = (
+      updater: (state: TestMotorNamespaceStore) => TestMotorNamespaceStore,
+    ) => throttledUpdater.updateWith(updater);
+    try {
+      if (event.name === "StateEvent") {
+        const parsed = stateEventSchema.parse(event);
+        updateStore(() => ({ state: parsed.data }));
+      } else {
+        handleUnhandledEventError(event.name);
+      }
+    } catch (error) {
+      console.error(`Error processing ${event.name}:`, error);
+      throw error;
+    }
+  };
+}
+
+// ========== Namespace Hook ==========
+const useTestMotorNamespaceImplementation =
+  createNamespaceHookImplementation<TestMotorNamespaceStore>({
+    createStore: createTestMotorNamespaceStore,
+    createEventHandler: testMotorMessageHandler,
+  });
+
+export function useTestMotorNamespace(
+  machine_identification_unique: MachineIdentificationUnique,
+): TestMotorNamespaceStore {
+  const namespaceId: NamespaceId = {
+    type: "machine",
+    machine_identification_unique,
+  };
+  return useTestMotorNamespaceImplementation(namespaceId);
+}
@@ -0,0 +1,96 @@
+import { toastError } from "@/components/Toast";
+import { useStateOptimistic } from "@/lib/useStateOptimistic";
+import { testMotorSerialRoute } from "@/routes/routes";
+import { MachineIdentificationUnique } from "@/machines/types";
+import { useTestMotorNamespace, StateEvent } from "./testMotorNamespace";
+import { useMachineMutate } from "@/client/useClient";
+import { produce } from "immer";
+import { useEffect, useMemo } from "react";
+import { TestMotor } from "@/machines/properties";
+import { z } from "zod";
+
+export function useTestMotor() {
+  const { serial: serialString } = testMotorSerialRoute.useParams();
+
+  // Memoize machine identification
+  const machineIdentification: MachineIdentificationUnique = useMemo(() => {
+    const serial = parseInt(serialString);
+    if (isNaN(serial)) {
+      toastError(
+        "Invalid Serial Number",
+        `"${serialString}" is not a valid serial number.`,
+      );
+      return {
+        machine_identification: { vendor: 0, machine: 0 },
+        serial: 0,
+      };
+    }
+    return {
+      machine_identification: TestMotor.machine_identification,
+      serial,
+    };
+  }, [serialString]);
+
+  // Namespace state from backend
+  const { state } = useTestMotorNamespace(machineIdentification);
+
+  // Optimistic state
+  const stateOptimistic = useStateOptimistic<StateEvent>();
+
+  useEffect(() => {
+    if (state) stateOptimistic.setReal(state);
+  }, [state, stateOptimistic]);
+
+  // Generic mutation sender
+  const { request: sendMutation } = useMachineMutate(
+    z.object({
+      type: z.string(),
+      payload: z.any(),
+    }),
+  );
+
+  const updateStateOptimistically = (
+    producer: (current: StateEvent) => void,
+    serverRequest?: () => void,
+  ) => {
+    const currentState = stateOptimistic.value;
+    if (currentState)
+      stateOptimistic.setOptimistic(produce(currentState, producer));
+    serverRequest?.();
+  };
+
+  // --- ACTIONS ---
+
+  const setMotorOn = (on: boolean) => {
+    updateStateOptimistically(
+      (current) => {
+        current.motor_enabled = on;
+      },
+      () =>
+        sendMutation({
+          machine_identification_unique: machineIdentification,
+          // Must exactly match the 'Mutation' enum!
+          data: { type: "SetMotorOn", payload: on },
+        }),
+    );
+  };
+
+  const setVelocity = (velocity: number) => {
+    updateStateOptimistically(
+      (current) => {
+        current.motor_velocity = velocity;
+      },
+      () =>
+        sendMutation({
+          machine_identification_unique: machineIdentification,
+          data: { type: "SetMotorVelocity", payload: velocity },
+        }),
+    );
+  };
+
+  return {
+    state: stateOptimistic.value,
+    setMotorOn,
+    setVelocity,
+  };
+}
@@ -390,6 +390,11 @@ export const aquapath1: MachineProperties = {
          product_id: 0x7d83052,
          revision: 0x110000,
        },
+        {
+          vendor_id: 2,
+          product_id: 0x7d83052,
+          revision: 0x120000,
+        },
      ],
    },
    {
@@ -462,6 +467,41 @@ export const testmachine: MachineProperties = {
    },
  ],
 };
+export const digitalInputTestMachine: MachineProperties = {
+  name: "Digital Input Machine",
+  version: "V1",
+  slug: "digitalInputTestMachine",
+  icon: "lu:Disc3",
+  machine_identification: {
+    vendor: VENDOR_QITECH,
+    machine: 0x0040,
+  },
+  device_roles: [],
+};
+
+export const wago8chDioTestMachine: MachineProperties = {
+  name: "WAGO 8ch DIO Test",
+  version: "V1",
+  slug: "wago8chdiotestmachine",
+  icon: "lu:Disc3",
+  machine_identification: {
+    vendor: VENDOR_QITECH,
+    machine: 0x0041,
+  },
+  device_roles: [
+    {
+      role: 0,
+      role_label: "Wago 750-354 Bus Coupler",
+      allowed_devices: [
+        {
+          vendor_id: 0x21,
+          product_id: 0x07500354,
+          revision: 0x2,
+        },
+      ],
+    },
+  ],
+};
 export const wagoPower1: MachineProperties = {
  name: "WAGO Power",
  version: "V1",
@@ -533,6 +573,88 @@ export const ip20TestMachine: MachineProperties = {
  ],
 };

+export const TestMotor: MachineProperties = {
+  name: "TestMotor",
+  version: "V1",
+  slug: "testmotor",
+  icon: "lu:Disc3",
+  machine_identification: {
+    vendor: VENDOR_QITECH,
+    machine: 0x0011,
+  },
+  device_roles: [
+    {
+      role: 0,
+      role_label: "Bus Coupler",
+      allowed_devices: [
+        {
+          vendor_id: 0x2,
+          product_id: 0x44c2c52,
+          revision: 0x120000,
+        },
+      ],
+    },
+    {
+      role: 1,
+      role_label: "Stepper Motor",
+      allowed_devices: [
+        {
+          vendor_id: 0x2,
+          product_id: 0x1b773052,
+          revision: 0x10001e,
+        },
+      ],
+    },
+  ],
+};
+
+export const wagoDoTestMachine: MachineProperties = {
+  name: "Wago DO Test",
+  version: "V1",
+  slug: "wagodotestmachine",
+  icon: "lu:ToggleRight",
+  machine_identification: {
+    vendor: VENDOR_QITECH,
+    machine: 0x000e,
+  },
+  device_roles: [
+    {
+      role: 0,
+      role_label: "Wago 750-354 Bus Coupler",
+      allowed_devices: [
+        {
+          vendor_id: 0x21,
+          product_id: 0x07500354,
+          revision: 0x2,
+        },
+      ],
+    },
+  ],
+};
+export const wagoAiTestMachine: MachineProperties = {
+  name: "Wago AI Test",
+  version: "V1",
+  slug: "wagoaitestmachine",
+  icon: "lu:Activity",
+  machine_identification: {
+    vendor: VENDOR_QITECH,
+    machine: 0x0036,
+  },
+  device_roles: [
+    {
+      role: 0,
+      role_label: "Wago 750-354 Bus Coupler",
+      allowed_devices: [
+        {
+          vendor_id: 0x21,
+          product_id: 0x07500354,
+          revision: 0x2,
+        },
+      ],
+    },
+  ],
+};
+
 export const machineProperties: MachineProperties[] = [
  winder2,
  extruder3,
@@ -544,7 +666,12 @@ export const machineProperties: MachineProperties[] = [
  aquapath1,
  testmachine,
  analogInputTestMachine,
+  wagoAiTestMachine,
+  digitalInputTestMachine,
+  wago8chDioTestMachine,
  ip20TestMachine,
+  wagoDoTestMachine,
+  TestMotor,
 ];

 export const getMachineProperties = (
@@ -0,0 +1,84 @@
+import { toastError } from "@/components/Toast";
+import { useStateOptimistic } from "@/lib/useStateOptimistic";
+import { wago8chDioTestMachineRoute } from "@/routes/routes";
+import { MachineIdentificationUnique } from "@/machines/types";
+import { useMachineMutate } from "@/client/useClient";
+import { produce } from "immer";
+import { useEffect, useMemo } from "react";
+import { wago8chDioTestMachine } from "@/machines/properties";
+import { z } from "zod";
+import {
+  StateEvent,
+  useWago8chDioTestMachineNamespace,
+} from "./wago8chDioTestMachineNameSpace";
+export function useWago8chDioTestMachine() {
+  const { serial: serialString } = wago8chDioTestMachineRoute.useParams();
+
+  // Memoize machine identification
+  const machineIdentification: MachineIdentificationUnique = useMemo(() => {
+    const serial = parseInt(serialString);
+
+    if (isNaN(serial)) {
+      toastError(
+        "Invalid Serial Number",
+        `"${serialString}" is not a valid serial number.`,
+      );
+
+      return {
+        machine_identification: { vendor: 0, machine: 0 },
+        serial: 0,
+      };
+    }
+
+    return {
+      machine_identification: wago8chDioTestMachine.machine_identification,
+      serial,
+    };
+  }, [serialString]);
+
+  // Namespace state from backend
+  const { state } = useWago8chDioTestMachineNamespace(machineIdentification);
+
+  // Optimistic state
+  const stateOptimistic = useStateOptimistic<StateEvent>();
+
+  useEffect(() => {
+    if (state) stateOptimistic.setReal(state);
+  }, [state, stateOptimistic]);
+
+  // Generic mutation sender
+  const { request: sendMutation } = useMachineMutate(
+    z.object({
+      action: z.string(),
+      value: z.any(),
+    }),
+  );
+
+  const updateStateOptimistically = (
+    producer: (current: StateEvent) => void,
+    serverRequest?: () => void,
+  ) => {
+    const currentState = stateOptimistic.value;
+    if (currentState)
+      stateOptimistic.setOptimistic(produce(currentState, producer));
+    serverRequest?.();
+  };
+
+  const setOutputAtIndex = (index: number, value: boolean) => {
+    updateStateOptimistically(
+      (current) => {
+        current.digital_output[index] = value;
+      },
+      () =>
+        sendMutation({
+          machine_identification_unique: machineIdentification,
+          data: { action: "SetOutput", value: { index, value } },
+        }),
+    );
+  };
+
+  return {
+    state: stateOptimistic.value,
+    setOutputAtIndex: setOutputAtIndex,
+  };
+}
@@ -0,0 +1,66 @@
+import { ControlCard } from "@/control/ControlCard";
+import { Page } from "@/components/Page";
+import React from "react";
+import { ControlGrid } from "@/control/ControlGrid";
+import { SelectionGroup } from "@/control/SelectionGroup";
+import { Label } from "@/control/Label";
+import { useWago8chDioTestMachine } from "./useWago8chDioTestMachine";
+import { Badge } from "@/components/ui/badge";
+
+export function Wago8chDioTestMachineControlRoute() {
+  const { state, setOutputAtIndex } = useWago8chDioTestMachine();
+
+  const safeState = state ?? {
+    digital_input: [false, false, false, false, false, false, false, false],
+    digital_output: [false, false, false, false, false, false, false, false],
+  };
+
+  return (
+    <Page>
+      <ControlGrid columns={2}>
+        {/* Digital Inputs */}
+        <ControlCard title="Digital Inputs">
+          <div className="grid grid-cols-2 gap-4">
+            {safeState.digital_input.map((input, index) => (
+              <Label key={index} label={`Input ${index + 1}`}>
+                <Badge variant={input ? "outline" : "destructive"}>
+                  {input ? "ON" : "OFF"}
+                </Badge>
+              </Label>
+            ))}
+          </div>
+        </ControlCard>
+
+        {/* Digital Outputs */}
+        <ControlCard title="Digital Outputs">
+          <div className="grid grid-cols-2 gap-4">
+            {safeState.digital_output.map((output, index) => (
+              <Label key={index} label={`Output ${index + 1}`}>
+                <SelectionGroup<"On" | "Off">
+                  value={output ? "On" : "Off"}
+                  orientation="vertical"
+                  className="grid h-full grid-cols-2 gap-2"
+                  options={{
+                    Off: {
+                      children: "Off",
+                      icon: "lu:CirclePause",
+                      isActiveClassName: "bg-red-600",
+                      className: "h-full",
+                    },
+                    On: {
+                      children: "On",
+                      icon: "lu:CirclePlay",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                  }}
+                  onChange={(value) => setOutputAtIndex(index, value === "On")}
+                />
+              </Label>
+            ))}
+          </div>
+        </ControlCard>
+      </ControlGrid>
+    </Page>
+  );
+}
@@ -0,0 +1,79 @@
+import { StoreApi } from "zustand";
+import { create } from "zustand";
+import { z } from "zod";
+import {
+  EventHandler,
+  eventSchema,
+  Event,
+  handleUnhandledEventError,
+  NamespaceId,
+  createNamespaceHookImplementation,
+  ThrottledStoreUpdater,
+} from "@/client/socketioStore";
+import { MachineIdentificationUnique } from "@/machines/types";
+
+// ========== Event Schema ==========
+
+export const stateEventDataSchema = z.object({
+  digital_input: z.array(z.boolean()).length(8),
+  digital_output: z.array(z.boolean()).length(8),
+});
+
+export const stateEventSchema = eventSchema(stateEventDataSchema);
+
+export type StateEvent = z.infer<typeof stateEventDataSchema>;
+
+// ========== Store ==========
+export type Wago8chDioTestMachineNamespaceStore = {
+  state: StateEvent | null;
+};
+
+export const createWago8chDioTestMachineNamespaceStore =
+  (): StoreApi<Wago8chDioTestMachineNamespaceStore> =>
+    create<Wago8chDioTestMachineNamespaceStore>(() => ({
+      state: null,
+    }));
+
+// ========== Message Handler ==========
+export function wago8chDioTestMachineMessageHndler(
+  store: StoreApi<Wago8chDioTestMachineNamespaceStore>,
+  throttledUpdater: ThrottledStoreUpdater<Wago8chDioTestMachineNamespaceStore>,
+): EventHandler {
+  return (event: Event<any>) => {
+    const updateStore = (
+      updater: (
+        state: Wago8chDioTestMachineNamespaceStore,
+      ) => Wago8chDioTestMachineNamespaceStore,
+    ) => throttledUpdater.updateWith(updater);
+
+    try {
+      if (event.name === "StateEvent") {
+        const parsed = stateEventSchema.parse(event);
+        updateStore(() => ({ state: parsed.data }));
+      } else {
+        handleUnhandledEventError(event.name);
+      }
+    } catch (error) {
+      console.error(`Error processing ${event.name}:`, error);
+      throw error;
+    }
+  };
+}
+
+// ========== Namespace Hook ==========
+const useWago8chDioTestMachineImplementation =
+  createNamespaceHookImplementation<Wago8chDioTestMachineNamespaceStore>({
+    createStore: createWago8chDioTestMachineNamespaceStore,
+    createEventHandler: wago8chDioTestMachineMessageHndler,
+  });
+
+export function useWago8chDioTestMachineNamespace(
+  machine_identification_unique: MachineIdentificationUnique,
+): Wago8chDioTestMachineNamespaceStore {
+  const namespaceId: NamespaceId = {
+    type: "machine",
+    machine_identification_unique,
+  };
+
+  return useWago8chDioTestMachineImplementation(namespaceId);
+}
@@ -0,0 +1,20 @@
+import { Topbar } from "@/components/Topbar";
+import { wago8chDioTestMachineRoute } from "@/routes/routes";
+import React from "react";
+
+export function Wago8chDioTestMachinePage() {
+  const { serial } = wago8chDioTestMachineRoute.useParams();
+  return (
+    <Topbar
+      pathname={`/_sidebar/machines/wago8chdiotestmachine/${serial}`}
+      items={[
+        {
+          link: "control",
+          activeLink: "control",
+          title: "Control",
+          icon: "lu:CirclePlay",
+        },
+      ]}
+    />
+  );
+}
@@ -75,7 +75,7 @@ function wagoPower1MessageHandler(
    };

    try {
-      if (eventName === "StateEvent") {
+      if (eventName === "State") {
        const stateEvent = stateEventSchema.parse(event);

        updateStore((state) => ({
@@ -86,7 +86,7 @@ function wagoPower1MessageHandler(
            ? stateEvent
            : state.defaultState,
        }));
-      } else if (eventName === "LiveValuesEvent") {
+      } else if (eventName === "LiveValues") {
        console.log(event);
        const liveValues = liveValuesEventSchema.parse(event);
        const { voltage, current } = liveValues.data;
@@ -0,0 +1,114 @@
+import { MiniGraph } from "@/components/graph/MiniGraph";
+import { Page } from "@/components/Page";
+import { ControlCard } from "@/control/ControlCard";
+import { ControlGrid } from "@/control/ControlGrid";
+
+import React from "react";
+import { useWagoAiTestMachine } from "./useWagoAiTestMachine";
+
+export function WagoAiTestMachineControl(): React.JSX.Element {
+  const { seriesData, state, updateMeasurementRate } = useWagoAiTestMachine();
+
+  if (!seriesData) return <div>Initializing Sensor...</div>;
+
+  return (
+    <Page>
+      <ControlGrid columns={2}>
+        <ControlCard title="Measurement Control">
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
+            <div>Measurement Rate (Hz)</div>
+            <input
+              type="number"
+              style={{
+                border: "2px solid transparent",
+                borderRadius: "4px",
+                padding: "3px",
+              }}
+              className={"bg-neutral-100 shadow"}
+              value={state.measurementRateHz}
+              onChange={(v) => {
+                const val = Number(v.currentTarget.value);
+                updateMeasurementRate(val);
+              }}
+              min={1}
+            ></input>
+          </div>
+        </ControlCard>
+        <ControlCard title="Analog Input 1 (4-20mA)">
+          <div className="flex flex-row">
+            <MiniGraph
+              newData={seriesData.ai1}
+              width={400}
+              renderValue={(v) => v.toFixed(2)}
+            ></MiniGraph>
+            <div className="ml-4 flex flex-col justify-center">
+              <div>{seriesData.ai1.current?.value.toFixed(2)} mA</div>
+              {state.wiringErrors?.[0] && (
+                <div className="mt-2 rounded bg-red-100 px-2 py-1 text-sm font-semibold text-red-800">
+                  Wiring Error
+                </div>
+              )}
+            </div>
+          </div>
+        </ControlCard>
+        <ControlCard title="Analog Input 2 (4-20mA)">
+          <div className="flex flex-row">
+            <MiniGraph
+              newData={seriesData.ai2}
+              width={400}
+              renderValue={(v) => v.toFixed(2)}
+            ></MiniGraph>
+            <div className="ml-4 flex flex-col justify-center">
+              <div>{seriesData.ai2.current?.value.toFixed(2)} mA</div>
+              {state.wiringErrors?.[1] && (
+                <div className="mt-2 rounded bg-red-100 px-2 py-1 text-sm font-semibold text-red-800">
+                  Wiring Error
+                </div>
+              )}
+            </div>
+          </div>
+        </ControlCard>
+        <ControlCard title="Analog Input 3 (4-20mA)">
+          <div className="flex flex-row">
+            <MiniGraph
+              newData={seriesData.ai3}
+              width={400}
+              renderValue={(v) => v.toFixed(2)}
+            ></MiniGraph>
+            <div className="ml-4 flex flex-col justify-center">
+              <div>{seriesData.ai3.current?.value.toFixed(2)} mA</div>
+              {state.wiringErrors?.[2] && (
+                <div className="mt-2 rounded bg-red-100 px-2 py-1 text-sm font-semibold text-red-800">
+                  Wiring Error
+                </div>
+              )}
+            </div>
+          </div>
+        </ControlCard>
+        <ControlCard title="Analog Input 4 (4-20mA)">
+          <div className="flex flex-row">
+            <MiniGraph
+              newData={seriesData.ai4}
+              width={400}
+              renderValue={(v) => v.toFixed(2)}
+            ></MiniGraph>
+            <div className="ml-4 flex flex-col justify-center">
+              <div>{seriesData.ai4.current?.value.toFixed(2)} mA</div>
+              {state.wiringErrors?.[3] && (
+                <div className="mt-2 rounded bg-red-100 px-2 py-1 text-sm font-semibold text-red-800">
+                  Wiring Error
+                </div>
+              )}
+            </div>
+          </div>
+        </ControlCard>
+      </ControlGrid>
+    </Page>
+  );
+}
@@ -0,0 +1,21 @@
+import { Topbar } from "@/components/Topbar";
+import { wagoAiTestMachineSerialRoute } from "@/routes/routes";
+import React from "react";
+
+export function WagoAiTestMachine(): React.JSX.Element {
+  const { serial } = wagoAiTestMachineSerialRoute.useParams();
+
+  return (
+    <Topbar
+      pathname={`/_sidebar/machines/wagoaitestmachine/${serial}`}
+      items={[
+        {
+          link: "control",
+          activeLink: "control",
+          title: "Control",
+          icon: "lu:CirclePlay",
+        },
+      ]}
+    />
+  );
+}
@@ -0,0 +1,163 @@
+import { useMachineMutate } from "@/client/useClient";
+import { toastError } from "@/components/Toast";
+import { useStateOptimistic } from "@/lib/useStateOptimistic";
+import {
+  createTimeSeries,
+  TimeSeries,
+  TimeSeriesValue,
+  TimeSeriesWithInsert,
+} from "@/lib/timeseries";
+import { MachineIdentificationUnique } from "@/machines/types";
+import { wagoAiTestMachineSerialRoute } from "@/routes/routes";
+import { produce } from "immer";
+import { useEffect, useMemo, useState } from "react";
+import z from "zod";
+import { wagoAiTestMachine } from "../properties";
+import {
+  StateEvent,
+  useWagoAiTestMachineNamespace,
+} from "./useWagoAiTestMachineNamespace";
+
+export type AnalogInputTimeSeries = {
+  ai1: TimeSeries;
+  ai2: TimeSeries;
+  ai3: TimeSeries;
+  ai4: TimeSeries;
+};
+
+export function useWagoAiTestMachine() {
+  const { serial: serialString } = wagoAiTestMachineSerialRoute.useParams();
+  const machineIdentification: MachineIdentificationUnique = useMemo(() => {
+    const serial = parseInt(serialString);
+    if (isNaN(serial)) {
+      toastError(
+        "Invalid Serial Number",
+        `"${serialString}" is not a valid serial number.`,
+      );
+      return {
+        machine_identification: { vendor: 0, machine: 0 },
+        serial: 0,
+      };
+    }
+    return {
+      machine_identification: wagoAiTestMachine.machine_identification,
+      serial,
+    };
+  }, [serialString]);
+
+  const state = useWagoAiTestMachineNamespace({
+    type: "machine",
+    machine_identification_unique: machineIdentification,
+  });
+
+  const mutateMachine = useMachineMutate(
+    z.object({
+      measurement_rate_hz: z.number(),
+    }),
+  );
+
+  const stateOptimistic = useStateOptimistic<StateEvent>();
+
+  const updateStateOptimistically = (
+    producer: (current: StateEvent) => void,
+    serverRequest?: () => void,
+  ) => {
+    const currentState = stateOptimistic.value;
+    if (currentState)
+      stateOptimistic.setOptimistic(produce(currentState, producer));
+    serverRequest?.();
+  };
+
+  const updateMeasurementRate = (val: number) => {
+    updateStateOptimistically(
+      (current) => {
+        current.measurementRateHz = val;
+      },
+      () => {
+        mutateMachine.request({
+          machine_identification_unique: machineIdentification,
+          data: { measurement_rate_hz: val },
+        });
+      },
+    );
+  };
+
+  // Create time series for each analog input
+  const timeSeriesInstances: {
+    ai1: TimeSeriesWithInsert;
+    ai2: TimeSeriesWithInsert;
+    ai3: TimeSeriesWithInsert;
+    ai4: TimeSeriesWithInsert;
+  } = {
+    ai1: createTimeSeries({
+      sampleIntervalShort: 20,
+      sampleIntervalLong: 1000,
+      retentionDurationShort: 5000,
+      retentionDurationLong: 60 * 60 * 1000,
+    }),
+    ai2: createTimeSeries({
+      sampleIntervalShort: 20,
+      sampleIntervalLong: 1000,
+      retentionDurationShort: 5000,
+      retentionDurationLong: 60 * 60 * 1000,
+    }),
+    ai3: createTimeSeries({
+      sampleIntervalShort: 20,
+      sampleIntervalLong: 1000,
+      retentionDurationShort: 5000,
+      retentionDurationLong: 60 * 60 * 1000,
+    }),
+    ai4: createTimeSeries({
+      sampleIntervalShort: 20,
+      sampleIntervalLong: 1000,
+      retentionDurationShort: 5000,
+      retentionDurationLong: 60 * 60 * 1000,
+    }),
+  };
+
+  const [seriesData, setSeriesData] = useState<AnalogInputTimeSeries | null>({
+    ai1: timeSeriesInstances.ai1.initialTimeSeries,
+    ai2: timeSeriesInstances.ai2.initialTimeSeries,
+    ai3: timeSeriesInstances.ai3.initialTimeSeries,
+    ai4: timeSeriesInstances.ai4.initialTimeSeries,
+  });
+
+  useEffect(() => {
+    const analogInputs = state.analogInputs;
+
+    if (analogInputs && seriesData) {
+      const [ai1, ai2, ai3, ai4, timestampStr] = analogInputs;
+      const timestamp = Number(timestampStr);
+
+      const dataPoint1: TimeSeriesValue = {
+        value: ai1 * 1000, // Convert to mA
+        timestamp,
+      };
+      const dataPoint2: TimeSeriesValue = {
+        value: ai2 * 1000,
+        timestamp,
+      };
+      const dataPoint3: TimeSeriesValue = {
+        value: ai3 * 1000,
+        timestamp,
+      };
+      const dataPoint4: TimeSeriesValue = {
+        value: ai4 * 1000,
+        timestamp,
+      };
+
+      setSeriesData({
+        ai1: timeSeriesInstances.ai1.insert(seriesData.ai1, dataPoint1),
+        ai2: timeSeriesInstances.ai2.insert(seriesData.ai2, dataPoint2),
+        ai3: timeSeriesInstances.ai3.insert(seriesData.ai3, dataPoint3),
+        ai4: timeSeriesInstances.ai4.insert(seriesData.ai4, dataPoint4),
+      });
+    }
+  }, [state]);
+
+  return {
+    seriesData,
+    state,
+    updateMeasurementRate,
+  };
+}
@@ -0,0 +1,86 @@
+import {
+  createNamespaceHookImplementation,
+  EventHandler,
+  eventSchema,
+} from "@/client/socketioStore";
+import z from "zod";
+import { create, StoreApi } from "zustand";
+
+// ========== Event Schema ==========
+
+export const stateEventDataSchema = z.object({
+  measurementRateHz: z.number().optional(),
+  analogInputs: z
+    .tuple([z.number(), z.number(), z.number(), z.number(), z.string()])
+    .optional(),
+  wiringErrors: z
+    .tuple([z.boolean(), z.boolean(), z.boolean(), z.boolean()])
+    .optional(),
+});
+
+export const stateEventSchema = eventSchema(stateEventDataSchema);
+
+export type StateEvent = z.infer<typeof stateEventDataSchema>;
+
+// ========== Store ==========
+export type WagoAiTestMachineNamespaceStore = z.infer<
+  typeof stateEventDataSchema
+>;
+
+const createMachineStore = (): StoreApi<WagoAiTestMachineNamespaceStore> =>
+  create<WagoAiTestMachineNamespaceStore>(() => ({
+    measurementRateHz: 1,
+    analogInputs: undefined,
+    wiringErrors: undefined,
+  }));
+
+// ========== Message Handler ==========
+function wagoAiTestMachineMessageHandler(
+  store: StoreApi<WagoAiTestMachineNamespaceStore>,
+): EventHandler {
+  return (event) => {
+    const oldState = store.getState();
+
+    switch (event.name) {
+      case "MeasurementRateHz":
+        {
+          const newMeasurementRateHz = event.data["MeasurementRateHz"];
+          if (
+            newMeasurementRateHz &&
+            newMeasurementRateHz !== oldState.measurementRateHz
+          )
+            store.setState({
+              ...oldState,
+              measurementRateHz: newMeasurementRateHz,
+            });
+        }
+        break;
+      case "AnalogInputs":
+        {
+          const newAnalogInputs = event.data["AnalogInputs"];
+          if (newAnalogInputs && newAnalogInputs !== oldState.analogInputs)
+            store.setState({
+              ...oldState,
+              analogInputs: newAnalogInputs,
+            });
+        }
+        break;
+      case "WiringErrors":
+        {
+          const newWiringErrors = event.data["WiringErrors"];
+          if (newWiringErrors && newWiringErrors !== oldState.wiringErrors)
+            store.setState({
+              ...oldState,
+              wiringErrors: newWiringErrors,
+            });
+        }
+        break;
+    }
+  };
+}
+
+// ========== Namespace Hook ==========
+export const useWagoAiTestMachineNamespace = createNamespaceHookImplementation({
+  createStore: () => createMachineStore(),
+  createEventHandler: wagoAiTestMachineMessageHandler,
+});
@@ -0,0 +1,64 @@
+import { ControlCard } from "@/control/ControlCard";
+import { Page } from "@/components/Page";
+import React from "react";
+import { ControlGrid } from "@/control/ControlGrid";
+import { SelectionGroup } from "@/control/SelectionGroup";
+import { Label } from "@/control/Label";
+import { useWagoDoTestMachine } from "./useWagoDoTestMachine";
+
+export function WagoDoTestMachineControlPage() {
+  const { state, setLed, setAllLeds } = useWagoDoTestMachine();
+
+  const safeState = state ?? {
+    led_on: Array(8).fill(false),
+  };
+
+  return (
+    <Page>
+      <ControlGrid columns={2}>
+        {/* Digital Output Controls */}
+        <ControlCard title="Digital Outputs (Do1-Do8)">
+          <div className="grid grid-cols-2 gap-6">
+            {safeState.led_on.map((output, index) => (
+              <Label key={index} label={`Do${index + 1}`}>
+                <SelectionGroup<"On" | "Off">
+                  value={output ? "On" : "Off"}
+                  orientation="vertical"
+                  className="flex flex-col gap-3"
+                  options={{
+                    Off: {
+                      children: "Off",
+                      icon: "lu:CirclePause",
+                      isActiveClassName: "bg-red-600",
+                      className: "flex-1",
+                    },
+                    On: {
+                      children: "On",
+                      icon: "lu:CirclePlay",
+                      isActiveClassName: "bg-green-600",
+                      className: "flex-1",
+                    },
+                  }}
+                  onChange={(value) => setLed(index, value === "On")}
+                />
+              </Label>
+            ))}
+          </div>
+        </ControlCard>
+
+        {/* Master Output Control */}
+        <ControlCard title="Master Output Control">
+          <SelectionGroup<"On" | "Off">
+            value={safeState.led_on.every(Boolean) ? "On" : "Off"}