diff --git a/README.md b/README.md
index 8ce5f03..a19f2fa 100644
--- a/README.md
+++ b/README.md
@@ -2,91 +2,20 @@
 
 Инженерный frontend MVP для задачи хакатона OZON Tech: «Интеллектуальная роботизированная система сортировки товаров».
 
-Приложение показывает 2D/SVG dashboard сортировочной линии: конвейер, рабочую зону 6000 x 10000 мм, зоны A/B/C/D, датчики, stop-gate, боковые толкатели, движение товаров, классификацию, маршрутизацию, state machine, метрики, PID-виджет и event log.
+Проект показывает 2D/SVG dashboard сортировочной линии: рабочую зону 6000 x 10000 мм, конвейер шириной 500 мм, зоны A/B/C/D, roll-cage C/D, датчики, stop-gate, толкатели, классификацию, маршрутизацию, timeline цикла, PID-имитацию, метрики и event log.
 
-## Архитектура решения
+## Стек
 
-- Vite + React + TypeScript.
-- Доменная логика вынесена в `src/domain`.
-- Mock-данные товаров и сценариев находятся в `src/data`.
-- UI собран из независимых панелей в `src/components`.
-- Визуализация линии выполнена на SVG без Three.js и тяжелой 3D-графики.
+- Vite
+- React
+- TypeScript
+- SVG/CSS для инженерной 2D-сцены
+- Vitest для доменных тестов
+- Docker + nginx для production static hosting
 
-## Логика классификации
+Нет Three.js, backend, реального ML и тяжелых UI-библиотек.
 
-Классификация реализована чистой функцией `classifyItem`.
-
-1. Сначала проверяются допустимые габариты.
-2. Если товар нарушает min/max размеры, он относится к C.
-3. Если габариты подходят, проверяется `roundness`.
-4. Если `roundness >= 0.8`, товар относится к D.
-5. Иначе товар относится к B.
-6. Если объект одновременно негабаритный и круглый, приоритет остается у C.
-
-Допустимые габариты MVP:
-
-- min: width >= 10 мм, depth >= 10 мм, height >= 2 мм;
-- max: width <= 450 мм, depth <= 320 мм, height <= 320 мм;
-- roundness threshold: 0.8.
-
-## Исполнительная часть
-
-Симуляция отображает:
-
-- камеру с pseudo-CV, bounding box и confidence;
-- лазерный датчик высоты;
-- ультразвуковой датчик прибытия к stop-gate;
-- stop-gate с состояниями open/closed;
-- pusher C и pusher D со состояниями idle/extended/retracting;
-- маршруты B/C/D с цветовой индикацией;
-- предупреждения для close items и low confidence;
-- fault/emergency сценарии с остановкой конвейера.
-
-## State machine
-
-Состояния MVP:
-
-- IDLE
-- MOVING_TO_CAMERA
-- DETECTING
-- MOVING_TO_GATE
-- WAITING_AT_GATE
-- CLASSIFYING
-- ROUTE_TO_B
-- ROUTE_TO_C
-- ROUTE_TO_D
-- RETURN_HOME
-- FAULT
-- EMERGENCY_STOP
-
-## Сценарии
-
-- `normal_flow` — обычный поток товаров B/C/D.
-- `oversized_item` — товар выходит за max dimensions и уходит в C.
-- `round_object` — товар проходит по габаритам, но имеет roundness >= 0.8 и уходит в D.
-- `boundary_dimensions` — товары на границах допустимых размеров.
-- `close_items` — два товара близко друг к другу, появляется warning queue/spacing.
-- `low_confidence` — confidence ниже 0.65, решение принимается rule-based.
-- `jam` — застревание у stop-gate, state FAULT, conveyor stopped.
-- `emergency_stop` — аварийная остановка, state EMERGENCY_STOP.
-
-## Метрики
-
-Dashboard показывает:
-
-- processed count;
-- success count;
-- error count;
-- avg cycle time;
-- throughput items/min;
-- cv latency;
-- actuator latency;
-- queue length;
-- conveyor speed;
-- PID target speed;
-- PID actual speed.
-
-## Локальный запуск
+## Запуск локально
 
 ```bash
 npm install
@@ -95,7 +24,7 @@ npm run dev
 
 Открыть: http://127.0.0.1:3100/
 
-## Запуск на сервере
+## Запуск через Docker
 
 ```bash
 docker compose -p owl -f docker-compose.server.yml up -d --build
@@ -107,25 +36,97 @@ Compose публикует только loopback-порт:
 127.0.0.1:3100:80
 ```
 
-## Как проверить
+## Проверка домена
 
 ```bash
 curl -I http://127.0.0.1:3100/
+curl -I https://arhipovdan.ru/
+curl -I https://www.arhipovdan.ru/
 ```
 
+## Сценарии
+
+- `normal_flow` — обычный поток B/C/D.
+- `oversized_item` — max dimensions нарушены, маршрут C.
+- `round_object` — габариты проходят, roundness >= 0.8, маршрут D.
+- `boundary_dimensions` — проверка min/max границ.
+- `close_items` — предупреждение spacing/queue, последовательная обработка.
+- `low_confidence` — низкий CV confidence, rule-based fallback.
+- `jam` — застревание у gate, FAULT, остановка конвейера.
+- `emergency_stop` — EMERGENCY_STOP, остановка всех движений.
+
+## Классификация
+
+Классификация реализована чистой функцией `classifyItem`.
+
+1. Проверяются габариты.
+2. Если нарушены min/max размеры, категория C.
+3. Если габариты подходят, проверяется `roundness`.
+4. Если `roundness >= 0.8`, категория D.
+5. Иначе категория B.
+6. Если товар одновременно негабаритный и круглый, приоритет у C, потому что dimensions check идет первым.
+
+Границы MVP:
+
+- min: width >= 10 мм, depth >= 10 мм, height >= 2 мм;
+- max: width <= 450 мм, depth <= 320 мм, height <= 320 мм;
+- roundness threshold: 0.8.
+
+## Исполнительная часть
+
+State machine управляет циклом:
+
+- `MOVING_TO_CAMERA`
+- `DETECTING`
+- `MOVING_TO_GATE`
+- `WAITING_AT_GATE`
+- `CLASSIFYING`
+- `ROUTE_TO_B/C/D`
+- `RETURN_HOME`
+- `FAULT`
+- `EMERGENCY_STOP`
+
+Датчики имитируются по mock-данным: camera bbox/confidence/CV latency, laser measured height, ultrasonic gate detection. Stop-gate закрывается перед классификацией, открывается для B и удерживает товар для C/D перед толкателями.
+
+## Simplified PID
+
+PID-панель показывает упрощенную имитацию control loop:
+
+- target speed;
+- actual speed;
+- error;
+- correction;
+- mini graph последних тиков скорости.
+
+В normal flow actual speed приближается к target. В `jam` и `emergency_stop` target становится 0, actual speed визуально падает к 0.
+
+## Тесты
+
+```bash
+npm run test
+```
+
+Покрыты classifier, PID и целостность сценариев.
+
+## Документация
+
+- `docs/ARCHITECTURE.md` — модули и поток данных.
+- `docs/DEMO_SCRIPT.md` — 3-5 минутный сценарий защиты.
+- `docs/SCENARIOS.md` — ожидаемые результаты сценариев.
+- `docs/JURY_QA.md` — короткие ответы на вопросы жюри.
+
 ## Ограничения MVP
 
-- Физика движения упрощена до дискретной state-machine симуляции.
-- PID-регулятор имитационный, без точной модели двигателя и нагрузки.
-- CV, laser и ultrasound генерируют псевдоизмерения на основе mock-данных.
-- Нет backend, real-time API и сохранения событий.
-- Нет Three.js и полноценного digital twin в 3D.
+- Физика движения дискретная, без динамической модели массы/трения.
+- CV является pseudo-CV по mock-данным.
+- PID упрощен до демонстрации стабилизации скорости.
+- Нет backend, real-time API, сохранения событий и реального ML.
+- Нет 3D digital twin.
 
 ## Что улучшить дальше
 
-- Добавить backend с WebSocket-телеметрией.
-- Подключить реальные ML/CV модели или replay датасетов.
-- Сделать режим ручного управления исполнительными механизмами.
-- Добавить тесты доменной логики и сценариев.
-- Расширить физическую модель очереди, зазоров и jam recovery.
-- Добавить экспорт event log и отчеты по SLA сортировки.
+- Добавить WebSocket-телеметрию и replay реальных событий.
+- Подключить реальные CV-модели или датасеты.
+- Добавить режим manual override для gate/pushers.
+- Расширить модель очереди, spacing и recovery после jam.
+- Экспортировать event log в отчет смены.
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
new file mode 100644
index 0000000..035ef82
--- /dev/null
+++ b/docs/ARCHITECTURE.md
@@ -0,0 +1,71 @@
+# Architecture
+
+## Module Map
+
+```text
+src/data/items.ts
+src/data/scenarios.ts
+        |
+        v
+src/domain/classifier.ts  ->  src/domain/simulation.ts  ->  React UI components
+        |                         |
+        |                         +-> metrics, PID, sensors, event log
+        v
+classification result
+```
+
+## Data Flow
+
+1. Scenario selects a sequence of mock items.
+2. Simulation feeds one item at a time into zone A.
+3. Pseudo-CV and sensors derive measurements from item data.
+4. `classifyItem` applies deterministic rules.
+5. State machine commands gate and pushers.
+6. UI renders SVG scene, panels, metrics, timeline and event log.
+
+## Pseudo-CV
+
+The MVP does not run real ML. Camera output is generated from item dimensions:
+
+- bbox width/depth;
+- confidence;
+- CV latency;
+- detected dimensions.
+
+Low confidence is not ignored: the event log and classification panel show a warning and explain rule-based fallback.
+
+## Sensor Simulation
+
+- Camera is active in `DETECTING`.
+- Laser is active during `DETECTING` and `MOVING_TO_GATE`.
+- Ultrasonic sensor is active at `WAITING_AT_GATE` and `CLASSIFYING`.
+
+Each sensor keeps active state, last value, latency and last event timestamp.
+
+## Actuator Control
+
+- Stop-gate closes at `WAITING_AT_GATE`.
+- B route opens the gate and sends item straight.
+- C route keeps the gate closed and extends pusher C.
+- D route keeps the gate closed and extends pusher D.
+- `RETURN_HOME` retracts mechanisms.
+
+## State Machine
+
+Main cycle:
+
+```text
+IDLE -> MOVING_TO_CAMERA -> DETECTING -> MOVING_TO_GATE -> WAITING_AT_GATE
+-> CLASSIFYING -> ROUTE_TO_B/C/D -> RETURN_HOME -> next item or IDLE
+```
+
+Fault states:
+
+- `FAULT` for jam at gate;
+- `EMERGENCY_STOP` for emergency stop scenario.
+
+Both stop conveyor motion and require Reset.
+
+## Metrics
+
+The dashboard tracks processed count, success/error count, avg cycle time, throughput, CV latency, actuator latency, queue length, queue delay and conveyor speed.
diff --git a/docs/DEMO_SCRIPT.md b/docs/DEMO_SCRIPT.md
new file mode 100644
index 0000000..dc56fc6
--- /dev/null
+++ b/docs/DEMO_SCRIPT.md
@@ -0,0 +1,69 @@
+# Demo Script
+
+Target duration: 3-5 minutes.
+
+## 1. Open The Dashboard
+
+Open https://arhipovdan.ru/.
+
+Explain that this is a 2D engineering simulation, not a decorative animation: the SVG scene shows a scaled work zone, conveyor dimensions, sensors, stop-gate, pushers and roll-cages.
+
+## 2. Normal Flow
+
+Select `Normal flow`, press `Start`.
+
+Explain:
+
+- item enters zone A;
+- camera captures bbox;
+- laser measures height;
+- ultrasonic confirms gate position;
+- gate holds item;
+- classifier selects B/C/D;
+- route command is shown on the scene;
+- event log records the full cycle.
+
+Question closed: can the system show a full sorting cycle end-to-end?
+
+## 3. Step-By-Step Decision
+
+Press `Reset`, then use `Step state`.
+
+Explain each state in the timeline. Show that Step advances by logical state, not by arbitrary animation time.
+
+Question closed: can the jury inspect synchronization and state transitions?
+
+## 4. Oversized And Round Rules
+
+Select `Oversized item`, step to classification.
+
+Show decision tree:
+
+- dimensions check fails;
+- category C selected;
+- roundness is lower priority because dimensions are checked first.
+
+Then select `Round object` and show D when dimensions pass and roundness >= 0.8.
+
+Question closed: how is classification proved?
+
+## 5. Robustness Scenarios
+
+Show `close_items`, `low_confidence`, `jam`, `emergency_stop`.
+
+Explain:
+
+- close items generate spacing warning and queue length;
+- low confidence uses rule-based fallback;
+- jam enters FAULT and stops conveyor;
+- emergency stop enters EMERGENCY_STOP and requires Reset.
+
+Question closed: what happens outside the happy path?
+
+## 6. PID And Metrics
+
+Point to PID panel and metrics cards.
+
+Explain that PID is simplified: actual speed approaches target in normal flow and decays toward zero in fault/emergency.
+
+Question closed: how is conveyor control represented without overbuilding physics?
diff --git a/docs/JURY_QA.md b/docs/JURY_QA.md
new file mode 100644
index 0000000..749f0de
--- /dev/null
+++ b/docs/JURY_QA.md
@@ -0,0 +1,41 @@
+# Jury Q&A
+
+## 1. Why 2D, Not 3D?
+
+2D is enough for MVP validation: it shows geometry, timing, sensor positions, routes and state transitions without spending effort on heavy rendering.
+
+## 2. Where Is Computer Vision?
+
+The MVP uses pseudo-CV: bbox, dimensions, confidence and latency are derived from mock items. The architecture keeps CV output separate from classification, so a real CV service can replace it later.
+
+## 3. How Is Classification Correctness Proven?
+
+The decision tree shows PASS/FAIL for dimensions and roundness, actual values, thresholds and final category. Tests cover key boundary cases.
+
+## 4. How Are Dimensions And Circular Section Handled?
+
+Dimensions are checked first against min/max width, depth and height. If they pass, roundness is checked against threshold 0.8.
+
+## 5. Why Does C Have Priority Over D?
+
+Oversized or undersized items are operationally unsafe for the main line and must be diverted first. Therefore dimensions check precedes roundness.
+
+## 6. How Is Synchronization Shown?
+
+Cycle timeline shows state order, simulated timestamps, durations and status: done, active, pending or skipped.
+
+## 7. How Does The Actuator Part Work?
+
+The stop-gate fixes the item. B opens the gate, C extends pusher C, D extends pusher D, then mechanisms return home.
+
+## 8. What Happens On Jam?
+
+The system enters FAULT, conveyor target speed becomes 0, actual speed decays toward 0, and Reset is required.
+
+## 9. What Happens On Low CV Confidence?
+
+A warning is logged, but the system still classifies by deterministic dimensions and roundness rules.
+
+## 10. How To Scale This To A Real Hardware-Software System?
+
+Replace pseudo-CV with a CV service, connect PLC/robot telemetry via backend/WebSocket, persist event logs, calibrate sensor latencies and add recovery policies.
diff --git a/docs/SCENARIOS.md b/docs/SCENARIOS.md
new file mode 100644
index 0000000..a00d048
--- /dev/null
+++ b/docs/SCENARIOS.md
@@ -0,0 +1,49 @@
+# Scenarios
+
+## normal_flow
+
+Goal: demonstrate the full cycle across B/C/D routes.
+
+Expected result: mixed B, C and D items are processed successfully.
+
+## oversized_item
+
+Goal: prove dimensions have first priority.
+
+Expected result: every item routes to C.
+
+## round_object
+
+Goal: prove roundness check after dimensions.
+
+Expected result: every item routes to D.
+
+## boundary_dimensions
+
+Goal: test min/max boundaries.
+
+Expected result: `Boundary box 450x320x320` routes to B, `Pen 9x13x148` routes to C.
+
+## close_items
+
+Goal: demonstrate queue/spacing resilience.
+
+Expected result: warning appears, queue length is shown, items are processed sequentially.
+
+## low_confidence
+
+Goal: demonstrate fallback when pseudo-CV confidence is below 0.65.
+
+Expected result: warning appears, rule-based classification still selects B or D.
+
+## jam
+
+Goal: demonstrate fail-safe behavior at stop-gate.
+
+Expected result: state becomes FAULT, conveyor speed target is 0, Reset is required.
+
+## emergency_stop
+
+Goal: demonstrate emergency stop.
+
+Expected result: state becomes EMERGENCY_STOP, conveyor speed target is 0, Reset is required.
diff --git a/package-lock.json b/package-lock.json
index 8feefda..fa008e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,8 @@
       "devDependencies": {
         "@types/node": "^26.1.0",
         "@types/react": "^19.2.17",
-        "@types/react-dom": "^19.2.3"
+        "@types/react-dom": "^19.2.3",
+        "vitest": "^4.1.9"
       }
     },
     "node_modules/@emnapi/core": {
@@ -51,6 +52,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
@@ -326,6 +334,13 @@
       "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
       "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/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -336,6 +351,31 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "26.1.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.0.tgz",
@@ -391,6 +431,146 @@
         }
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.9.tgz",
+      "integrity": "sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.9.tgz",
+      "integrity": "sha512-EVkXzBjrPGM+cK8/ANWgBrkUCfJfb38/EfTSO8h7pWvKkyPkpWxvR7BkD2MyItMF62C97zAEoqdpUixwR/e+Rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.9",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.9.tgz",
+      "integrity": "sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.9.tgz",
+      "integrity": "sha512-KXLMDtc7oe70+3mJfGrPUWPesswH+3sTxAMAMl8DG7I8IUQT4XW718dY5ID3vPUcmlu27CcKfY4P3h3I29SLJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.9",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.9.tgz",
+      "integrity": "sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.9.tgz",
+      "integrity": "sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.9.tgz",
+      "integrity": "sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -407,6 +587,33 @@
         "node": ">=8"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.0.tgz",
+      "integrity": "sha512-KLdwQm2NvGLDkQDCGvmiQrhkd0JbMzXthwQAUgWjQuQdBLFa3eiBP5arXZyA+f8x+x7OXgud6bq2rxjGtHV2tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -687,6 +894,16 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.15",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
@@ -705,6 +922,27 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -811,6 +1049,13 @@
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -820,6 +1065,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -836,6 +1112,16 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -939,6 +1225,113 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vitest": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.9.tgz",
+      "integrity": "sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.9",
+        "@vitest/mocker": "4.1.9",
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/runner": "4.1.9",
+        "@vitest/snapshot": "4.1.9",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.9",
+        "@vitest/browser-preview": "4.1.9",
+        "@vitest/browser-webdriverio": "4.1.9",
+        "@vitest/coverage-istanbul": "4.1.9",
+        "@vitest/coverage-v8": "4.1.9",
+        "@vitest/ui": "4.1.9",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 23ab5f1..f4632e1 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite --host 127.0.0.1 --port 3100",
     "build": "tsc -b && vite build",
-    "preview": "vite preview --host 127.0.0.1 --port 3100"
+    "preview": "vite preview --host 127.0.0.1 --port 3100",
+    "test": "vitest run"
   },
   "dependencies": {
     "@vitejs/plugin-react": "latest",
@@ -18,6 +19,7 @@
   "devDependencies": {
     "@types/node": "^26.1.0",
     "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3"
+    "@types/react-dom": "^19.2.3",
+    "vitest": "^4.1.9"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 335aa4a..a1c8932 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import Dashboard from './components/Dashboard';
 import { SCENARIOS } from './data/scenarios';
-import { createSimulation, setRunning, stepSimulation } from './domain/simulation';
+import { createSimulation, setRunning, stepSimulation, stepSimulationToNextState } from './domain/simulation';
 import type { ScenarioId, SimulationState } from './domain/types';
 
 const TICK_MS = 250;
@@ -33,7 +33,7 @@ export default function App() {
   const handleStart = () => setSimulation((current) => setRunning(current, true));
   const handlePause = () => setSimulation((current) => setRunning(current, false));
   const handleReset = () => setSimulation(createSimulation(activeScenario));
-  const handleStep = () => setSimulation((current) => stepSimulation(setRunning(current, false), 500, true));
+  const handleStep = () => setSimulation((current) => stepSimulationToNextState(current));
   const handleScenarioChange = (scenarioId: ScenarioId) => setActiveScenarioId(scenarioId);
 
   return (
diff --git a/src/components/ClassificationPanel.tsx b/src/components/ClassificationPanel.tsx
index 2e5af88..64ea8d7 100644
--- a/src/components/ClassificationPanel.tsx
+++ b/src/components/ClassificationPanel.tsx
@@ -1,26 +1,48 @@
 import { DIMENSION_LIMITS } from '../domain/classifier';
-import type { SimulatedItem } from '../domain/types';
+import type { SimulationState } from '../domain/types';
 
-export default function ClassificationPanel({ currentItem }: { currentItem?: SimulatedItem }) {
-  const result = currentItem?.classification;
+function Verdict({ pass, skipped = false }: { pass?: boolean; skipped?: boolean }) {
+  if (skipped) {
+    return <span className="verdict skipped">SKIPPED</span>;
+  }
+  if (pass === undefined) {
+    return <span className="verdict pending">PENDING</span>;
+  }
+  return <span className={pass ? 'verdict pass' : 'verdict fail'}>{pass ? 'PASS' : 'FAIL'}</span>;
+}
+
+export default function ClassificationPanel({ simulation }: { simulation: SimulationState }) {
+  const current = simulation.currentItem;
+  const result = current?.classification;
+  const item = current?.item;
+  const dimensions = item?.dimensionsMm;
+  const isOversizedAndRound = Boolean(result && !result.dimensionsPass && !result.roundnessPass);
+  const lowConfidence = Boolean(item && item.confidence < 0.65);
 
   return (
-    <section className="panel compact-panel">
+    <section className="panel compact-panel classification-panel">
       <div className="panel-heading">
         <p className="eyebrow">Classification rules</p>
-        <h2>Decision tree</h2>
+        <h2>Decision proof</h2>
+      </div>
+      <div className="rule-stack">
+        <div className="rule-card">
+          <div><strong>Step 1: Dimensions check</strong><Verdict pass={result?.dimensionsPass} /></div>
+          <p>Allowed: W {DIMENSION_LIMITS.min.width}-{DIMENSION_LIMITS.max.width} mm, D {DIMENSION_LIMITS.min.depth}-{DIMENSION_LIMITS.max.depth} mm, H {DIMENSION_LIMITS.min.height}-{DIMENSION_LIMITS.max.height} mm.</p>
+          <p>Actual: {dimensions ? `${dimensions.width} x ${dimensions.depth} x ${dimensions.height} mm` : 'waiting for item'}</p>
+        </div>
+        <div className="rule-card">
+          <div><strong>Step 2: Roundness check</strong><Verdict pass={result?.roundnessPass} skipped={result ? !result.dimensionsPass : false} /></div>
+          <p>Roundness threshold for D: value &gt;= {DIMENSION_LIMITS.roundnessThreshold}.</p>
+          <p>Actual roundness: {item ? item.roundness.toFixed(2) : 'waiting for item'}</p>
+        </div>
+        <div className="rule-card">
+          <div><strong>Step 3: Category decision</strong><span className={result ? `decision-badge category-${result.category}` : 'decision-badge'}>{result ? result.category : '-'}</span></div>
+          <p>{result ? result.reason : 'Run a scenario to classify the current item.'}</p>
+          {isOversizedAndRound ? <p className="warning-note">Приоритет: C, потому что габариты проверяются первыми.</p> : null}
+          {lowConfidence ? <p className="warning-note">CV confidence низкий, решение подтверждено rule-based fallback.</p> : null}
+        </div>
       </div>
-      <ol className="decision-tree">
-        <li className={result ? (result.dimensionsPass ? 'pass' : 'fail') : ''}>
-          dimensions check: {DIMENSION_LIMITS.min.width}-{DIMENSION_LIMITS.max.width} W, {DIMENSION_LIMITS.min.depth}-{DIMENSION_LIMITS.max.depth} D, {DIMENSION_LIMITS.min.height}-{DIMENSION_LIMITS.max.height} H
-        </li>
-        <li className={result && result.dimensionsPass ? (result.roundnessPass ? 'pass' : 'fail') : ''}>
-          roundness check: threshold &lt; {DIMENSION_LIMITS.roundnessThreshold}
-        </li>
-        <li className={result ? `category-${result.category}` : ''}>
-          result: {result ? `${result.category} - ${result.label}` : 'waiting for item'}
-        </li>
-      </ol>
     </section>
   );
 }
diff --git a/src/components/CurrentItemPanel.tsx b/src/components/CurrentItemPanel.tsx
index cf8285f..dd9d0fa 100644
--- a/src/components/CurrentItemPanel.tsx
+++ b/src/components/CurrentItemPanel.tsx
@@ -2,6 +2,8 @@ import type { SimulationState } from '../domain/types';
 
 export default function CurrentItemPanel({ simulation }: { simulation: SimulationState }) {
   const current = simulation.currentItem;
+  const camera = simulation.sensors.camera;
+  const laser = simulation.sensors.laser;
 
   return (
     <section className="panel compact-panel">
@@ -10,15 +12,27 @@ export default function CurrentItemPanel({ simulation }: { simulation: Simulatio
         <h2>{current?.item.id ?? 'No active item'}</h2>
       </div>
       {current ? (
-        <div className="kv-grid">
-          <span>Name</span><strong>{current.item.name}</strong>
-          <span>Dimensions</span><strong>{current.item.dimensionsMm.width} x {current.item.dimensionsMm.depth} x {current.item.dimensionsMm.height} mm</strong>
-          <span>Height</span><strong>{current.item.dimensionsMm.height} mm</strong>
-          <span>Roundness</span><strong>{current.item.roundness.toFixed(2)}</strong>
-          <span>Confidence</span><strong>{Math.round(current.item.confidence * 100)}%</strong>
-          <span>Category</span><strong className={`category-${current.classification.category}`}>{current.classification.category} / {current.classification.label}</strong>
-          <span>Reason</span><strong>{current.classification.reason}</strong>
-        </div>
+        <>
+          <div className="kv-grid">
+            <span>Name</span><strong>{current.item.name}</strong>
+            <span>Dimensions</span><strong>{current.item.dimensionsMm.width} x {current.item.dimensionsMm.depth} x {current.item.dimensionsMm.height} mm</strong>
+            <span>Shape</span><strong>{current.item.shape}</strong>
+            <span>Roundness</span><strong>{current.item.roundness.toFixed(2)}</strong>
+            <span>Confidence</span><strong>{Math.round(current.item.confidence * 100)}%</strong>
+            <span>Category</span><strong className={`category-${current.classification.category}`}>{current.classification.category} / {current.classification.label}</strong>
+            <span>Reason</span><strong>{current.classification.reason}</strong>
+          </div>
+          <div className="pseudo-cv-block">
+            <h3>Pseudo-CV / sensor packet</h3>
+            <div className="kv-grid compact-kv">
+              <span>bbox</span><strong>{camera.bbox ? `${camera.bbox.width} x ${camera.bbox.height} mm` : 'pending'}</strong>
+              <span>confidence</span><strong>{camera.confidence ? `${Math.round(camera.confidence * 100)}%` : 'pending'}</strong>
+              <span>cv latency</span><strong>{camera.cvLatencyMs} ms</strong>
+              <span>detected dimensions</span><strong>{current.item.dimensionsMm.width} x {current.item.dimensionsMm.depth} x {current.item.dimensionsMm.height} mm</strong>
+              <span>measured height</span><strong>{laser.measuredHeightMm ?? current.item.dimensionsMm.height} mm</strong>
+            </div>
+          </div>
+        </>
       ) : (
         <p className="muted">Start or step the simulation to feed an item into zone A.</p>
       )}
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index a00f463..1b7da69 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -8,6 +8,7 @@ import EventLog from './EventLog';
 import ScenarioPanel from './ScenarioPanel';
 import SensorPanel from './SensorPanel';
 import PidPanel from './PidPanel';
+import TimelinePanel from './TimelinePanel';
 import type { Scenario, ScenarioId, SimulationState } from '../domain/types';
 
 interface DashboardProps {
@@ -46,12 +47,13 @@ export default function Dashboard({
         </section>
         <aside className="right-rail">
           <CurrentItemPanel simulation={simulation} />
-          <ClassificationPanel currentItem={simulation.currentItem} />
+          <ClassificationPanel simulation={simulation} />
           <StateMachinePanel currentState={simulation.machineState} />
           <SensorPanel simulation={simulation} />
         </aside>
         <section className="bottom-row">
           <MetricsPanel metrics={simulation.metrics} />
+          <TimelinePanel simulation={simulation} />
           <PidPanel pid={simulation.pid} metrics={simulation.metrics} status={simulation.systemStatus} />
           <EventLog events={simulation.events} />
           <ScenarioPanel
diff --git a/src/components/EventLog.tsx b/src/components/EventLog.tsx
index 17833ab..7b5ad92 100644
--- a/src/components/EventLog.tsx
+++ b/src/components/EventLog.tsx
@@ -1,29 +1,63 @@
+import { useMemo, useState } from 'react';
 import type { EventLogEntry } from '../domain/types';
 
+type LogFilter = 'all' | 'sensor' | 'classification' | 'actuator' | 'warning' | 'error' | 'success';
+
+const filters: LogFilter[] = ['all', 'sensor', 'classification', 'actuator', 'warning', 'error', 'success'];
+
 function formatTime(ms: number): string {
   return `t+${(ms / 1000).toFixed(1)}s`;
 }
 
+function matchesFilter(entry: EventLogEntry, filter: LogFilter): boolean {
+  if (filter === 'all') {
+    return true;
+  }
+  if (filter === 'error' || filter === 'success' || filter === 'warning') {
+    return entry.status === filter;
+  }
+  return entry.type === filter;
+}
+
 export default function EventLog({ events }: { events: EventLogEntry[] }) {
+  const [filter, setFilter] = useState<LogFilter>('all');
+  const [copied, setCopied] = useState(false);
+  const visibleEvents = useMemo(() => events.filter((entry) => matchesFilter(entry, filter)), [events, filter]);
+
+  const copyJson = async () => {
+    await navigator.clipboard.writeText(JSON.stringify(events, null, 2));
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  };
+
   return (
     <section className="panel event-panel">
       <div className="panel-heading">
-        <p className="eyebrow">Event log</p>
-        <h2>Cycle trace</h2>
+        <div>
+          <p className="eyebrow">Event log</p>
+          <h2>Cycle trace</h2>
+        </div>
+        <button className="small-button" onClick={() => void copyJson()}>{copied ? 'Copied' : 'Copy JSON'}</button>
+      </div>
+      <div className="log-filters">
+        {filters.map((item) => (
+          <button key={item} className={filter === item ? 'active' : ''} onClick={() => setFilter(item)}>{item}</button>
+        ))}
       </div>
       <div className="event-table" role="table">
         <div className="event-row event-head" role="row">
-          <span>time</span><span>item</span><span>type</span><span>message</span><span>category</span><span>status</span>
+          <span>time</span><span>item</span><span>state</span><span>type</span><span>command/category</span><span>message</span><span>status</span>
         </div>
-        {events.length === 0 ? (
-          <div className="empty-log">No events yet. Press Start or Step.</div>
-        ) : events.map((entry) => (
+        {visibleEvents.length === 0 ? (
+          <div className="empty-log">No events for this filter.</div>
+        ) : visibleEvents.map((entry) => (
           <div className={`event-row ${entry.status}`} role="row" key={entry.id}>
             <span>{formatTime(entry.timestampMs)}</span>
             <span>{entry.itemId ?? '-'}</span>
+            <span>{entry.state ?? '-'}</span>
             <span>{entry.type}</span>
+            <span>{entry.command ?? entry.category ?? '-'}</span>
             <span>{entry.message}</span>
-            <span>{entry.category ?? '-'}</span>
             <span>{entry.status}</span>
           </div>
         ))}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6556e90..d694eb9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -9,6 +9,8 @@ interface HeaderProps {
 }
 
 export default function Header({ simulation, onStart, onPause, onReset, onStep }: HeaderProps) {
+  const locked = simulation.machineState === 'FAULT' || simulation.machineState === 'EMERGENCY_STOP';
+
   return (
     <header className="header">
       <div>
@@ -21,11 +23,12 @@ export default function Header({ simulation, onStart, onPause, onReset, onStep }
           {simulation.systemStatus}
         </div>
         <div className="scenario-label">Scenario: {simulation.scenario.name}</div>
+        <div className="scenario-label">Sim t+{(simulation.simTimeMs / 1000).toFixed(1)}s</div>
         <div className="header-actions">
-          <button onClick={onStart}>Start</button>
+          <button onClick={onStart} disabled={locked}>Start</button>
           <button onClick={onPause}>Pause</button>
           <button onClick={onReset}>Reset</button>
-          <button onClick={onStep}>Step</button>
+          <button onClick={onStep} disabled={locked}>Step state</button>
         </div>
       </div>
     </header>
diff --git a/src/components/MetricsPanel.tsx b/src/components/MetricsPanel.tsx
index b696f4c..7a3c281 100644
--- a/src/components/MetricsPanel.tsx
+++ b/src/components/MetricsPanel.tsx
@@ -9,6 +9,7 @@ const metricLabels: Array<[keyof Metrics, string, string]> = [
   ['cvLatencyMs', 'CV latency', 'ms'],
   ['actuatorLatencyMs', 'Actuator latency', 'ms'],
   ['queueLength', 'Queue length', 'items'],
+  ['queueDelayMs', 'Queue delay', 'ms'],
   ['conveyorSpeedMps', 'Conveyor speed', 'm/s'],
   ['pidTargetSpeedMps', 'PID target', 'm/s'],
   ['pidActualSpeedMps', 'PID actual', 'm/s'],
diff --git a/src/components/PidPanel.tsx b/src/components/PidPanel.tsx
index dd8a8c4..b2b101a 100644
--- a/src/components/PidPanel.tsx
+++ b/src/components/PidPanel.tsx
@@ -6,37 +6,53 @@ interface PidPanelProps {
   status: SystemStatus;
 }
 
+function pidState(pid: PidState, status: SystemStatus): string {
+  if (status === 'EMERGENCY_STOP') {
+    return 'emergency stop';
+  }
+  if (status === 'FAULT') {
+    return 'stopped by fault';
+  }
+  if (Math.abs(pid.pidError) <= 0.03 && pid.actualSpeedMps > 0) {
+    return 'stable';
+  }
+  return 'stabilizing';
+}
+
+function sparkline(history: number[]): string {
+  const values = history.length > 1 ? history : [0, 0];
+  const max = Math.max(...values, 0.5);
+  return values
+    .map((value, index) => {
+      const x = (index / Math.max(values.length - 1, 1)) * 220;
+      const y = 58 - (value / max) * 48;
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(' ');
+}
+
 export default function PidPanel({ pid, status }: PidPanelProps) {
   const fill = Math.min((pid.actualSpeedMps / Math.max(pid.targetSpeedMps, 0.01)) * 100, 100);
+  const state = pidState(pid, status);
 
   return (
     <section className="panel pid-panel">
       <div className="panel-heading">
         <p className="eyebrow">Conveyor control loop</p>
-        <h2>PID imitation</h2>
+        <h2>{state}</h2>
       </div>
       <div className="pid-bars">
-        <div>
-          <span>targetSpeedMps</span>
-          <strong>{pid.targetSpeedMps.toFixed(2)}</strong>
-        </div>
-        <div>
-          <span>actualSpeedMps</span>
-          <strong>{pid.actualSpeedMps.toFixed(2)}</strong>
-        </div>
-        <div>
-          <span>pidError</span>
-          <strong>{pid.pidError.toFixed(2)}</strong>
-        </div>
-        <div>
-          <span>correction</span>
-          <strong>{pid.correction.toFixed(2)}</strong>
-        </div>
+        <div><span>target speed</span><strong>{pid.targetSpeedMps.toFixed(2)} m/s</strong></div>
+        <div><span>actual speed</span><strong>{pid.actualSpeedMps.toFixed(2)} m/s</strong></div>
+        <div><span>error</span><strong>{pid.pidError.toFixed(2)}</strong></div>
+        <div><span>correction</span><strong>{pid.correction.toFixed(2)}</strong></div>
       </div>
-      <div className="speed-track">
-        <div style={{ width: `${fill}%` }} />
-      </div>
-      <p className="muted">Status {status}: actual speed follows target during flow and decays to zero on jam/emergency.</p>
+      <div className="speed-track"><div style={{ width: `${fill}%` }} /></div>
+      <svg className="pid-sparkline" viewBox="0 0 220 64" role="img" aria-label="PID speed history">
+        <path d="M0 58 H220" />
+        <polyline points={sparkline(pid.speedHistoryMps)} />
+      </svg>
+      <p className="muted">PID shown as simplified control-loop simulation for conveyor speed stabilization.</p>
     </section>
   );
 }
diff --git a/src/components/ScenarioPanel.tsx b/src/components/ScenarioPanel.tsx
index 2327ea1..18b4c46 100644
--- a/src/components/ScenarioPanel.tsx
+++ b/src/components/ScenarioPanel.tsx
@@ -11,7 +11,7 @@ export default function ScenarioPanel({ scenarios, activeScenarioId, onScenarioC
     <section className="panel scenario-panel">
       <div className="panel-heading">
         <p className="eyebrow">Scenario panel</p>
-        <h2>Test cases</h2>
+        <h2>Jury test cases</h2>
       </div>
       <div className="scenario-buttons">
         {scenarios.map((scenario) => (
@@ -22,6 +22,9 @@ export default function ScenarioPanel({ scenarios, activeScenarioId, onScenarioC
           >
             <strong>{scenario.name}</strong>
             <span>{scenario.description}</span>
+            <em>Goal: {scenario.goal}</em>
+            <em>Expected: {scenario.expectedCategorySummary}</em>
+            <em>Shows: {scenario.demonstrates}</em>
           </button>
         ))}
       </div>
diff --git a/src/components/SorterScene.tsx b/src/components/SorterScene.tsx
index 23b3e4a..88dba2f 100644
--- a/src/components/SorterScene.tsx
+++ b/src/components/SorterScene.tsx
@@ -8,15 +8,15 @@ const routeColors: Record<Category, string> = {
 
 function progressForState(state: MachineState, elapsedMs: number): number {
   const ratios: Partial<Record<MachineState, [number, number, number]>> = {
-    MOVING_TO_CAMERA: [0.08, 0.34, 1200],
+    MOVING_TO_CAMERA: [0.06, 0.34, 1200],
     DETECTING: [0.34, 0.36, 900],
     MOVING_TO_GATE: [0.36, 0.64, 1300],
     WAITING_AT_GATE: [0.64, 0.65, 800],
     CLASSIFYING: [0.65, 0.66, 700],
-    ROUTE_TO_B: [0.66, 0.92, 1200],
-    ROUTE_TO_C: [0.66, 0.82, 1200],
-    ROUTE_TO_D: [0.66, 0.82, 1200],
-    RETURN_HOME: [0.92, 0.94, 700],
+    ROUTE_TO_B: [0.66, 0.93, 1200],
+    ROUTE_TO_C: [0.66, 0.78, 1200],
+    ROUTE_TO_D: [0.66, 0.78, 1200],
+    RETURN_HOME: [0.93, 0.94, 700],
   };
   const segment = ratios[state];
   if (!segment) {
@@ -28,20 +28,42 @@ function progressForState(state: MachineState, elapsedMs: number): number {
 
 function itemPosition(simulation: SimulationState): { x: number; y: number } {
   const progress = progressForState(simulation.machineState, simulation.elapsedInStateMs);
-  const baseX = 120 + progress * 760;
-  const beltY = 315;
+  const baseX = 126 + progress * 790;
+  const beltY = 360;
 
   if (simulation.machineState === 'ROUTE_TO_C') {
-    return { x: baseX, y: beltY + Math.min(simulation.elapsedInStateMs / 1200, 1) * 150 };
+    return { x: baseX, y: beltY + Math.min(simulation.elapsedInStateMs / 1200, 1) * 172 };
   }
 
   if (simulation.machineState === 'ROUTE_TO_D') {
-    return { x: baseX, y: beltY - Math.min(simulation.elapsedInStateMs / 1200, 1) * 150 };
+    return { x: baseX, y: beltY - Math.min(simulation.elapsedInStateMs / 1200, 1) * 172 };
   }
 
   return { x: baseX, y: beltY };
 }
 
+function DimensionLine({ x1, y1, x2, y2, label }: { x1: number; y1: number; x2: number; y2: number; label: string }) {
+  const labelX = (x1 + x2) / 2;
+  const labelY = (y1 + y2) / 2;
+  return (
+    <g className="dimension-line">
+      <line x1={x1} y1={y1} x2={x2} y2={y2} />
+      <circle cx={x1} cy={y1} r="3" />
+      <circle cx={x2} cy={y2} r="3" />
+      <text x={labelX} y={labelY - 8}>{label}</text>
+    </g>
+  );
+}
+
+function LegendItem({ color, label }: { color: string; label: string }) {
+  return (
+    <g className="legend-item">
+      <rect width="10" height="10" fill={color} rx="2" />
+      <text x="16" y="10">{label}</text>
+    </g>
+  );
+}
+
 export default function SorterScene({ simulation }: { simulation: SimulationState }) {
   const current = simulation.currentItem;
   const category = current?.classification.category;
@@ -49,114 +71,144 @@ export default function SorterScene({ simulation }: { simulation: SimulationStat
   const position = itemPosition(simulation);
   const detecting = simulation.machineState === 'DETECTING';
   const routeVisible = simulation.machineState.startsWith('ROUTE_TO_');
+  const stopped = simulation.machineState === 'FAULT' || simulation.machineState === 'EMERGENCY_STOP';
+  const itemWidth = current ? Math.max(24, Math.min(74, current.item.dimensionsMm.width / 6)) : 56;
+  const itemHeight = current ? Math.max(18, Math.min(58, current.item.dimensionsMm.depth / 5.5)) : 48;
 
   return (
     <div className="scene-wrap">
       <div className="scene-title-row">
         <div>
-          <p className="eyebrow">Work zone 6000 x 10000 mm</p>
-          <h2>Sorting line digital twin</h2>
+          <p className="eyebrow">Work zone 6000 x 10000 mm / conveyor 500 mm</p>
+          <h2>Engineering layout, sensors and routing commands</h2>
         </div>
-        <div className="machine-state-chip">{simulation.machineState}</div>
+        <div className={`machine-state-chip ${stopped ? 'fault-chip' : ''}`}>{simulation.machineState}</div>
       </div>
-      <svg viewBox="0 0 1000 620" role="img" aria-label="Sorter simulation scene" className="sorter-svg">
+      <svg viewBox="0 0 1120 720" role="img" aria-label="Sorter simulation scene" className="sorter-svg">
         <defs>
-          <pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
-            <path d="M 32 0 L 0 0 0 32" fill="none" stroke="#183044" strokeWidth="1" />
+          <pattern id="gridMinor" width="24" height="24" patternUnits="userSpaceOnUse">
+            <path d="M 24 0 L 0 0 0 24" fill="none" stroke="#12283b" strokeWidth="1" />
           </pattern>
-          <marker id="arrowB" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
-            <path d="M0,0 L0,6 L9,3 z" fill="#4ade80" />
-          </marker>
-          <marker id="arrowC" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
-            <path d="M0,0 L0,6 L9,3 z" fill="#f59e0b" />
-          </marker>
-          <marker id="arrowD" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
-            <path d="M0,0 L0,6 L9,3 z" fill="#c084fc" />
-          </marker>
+          <pattern id="gridMajor" width="120" height="120" patternUnits="userSpaceOnUse">
+            <rect width="120" height="120" fill="url(#gridMinor)" />
+            <path d="M 120 0 L 0 0 0 120" fill="none" stroke="#244863" strokeWidth="1.4" />
+          </pattern>
+          {(['B', 'C', 'D'] as Category[]).map((route) => (
+            <marker key={route} id={`arrow${route}`} markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+              <path d="M0,0 L0,6 L9,3 z" fill={routeColors[route]} />
+            </marker>
+          ))}
         </defs>
 
-        <rect x="20" y="20" width="960" height="560" rx="18" fill="#08111d" stroke="#1f3b54" />
-        <rect x="40" y="40" width="920" height="520" fill="url(#grid)" opacity="0.75" />
+        <rect x="24" y="26" width="1072" height="632" rx="12" fill="#07111d" stroke="#244863" />
+        <rect x="64" y="82" width="928" height="520" fill="url(#gridMajor)" opacity="0.9" />
+        <text x="78" y="74" className="scale-label left-label">Scaled plan: 6000 mm x 10000 mm work cell</text>
+
+        <DimensionLine x1={64} y1={626} x2={992} y2={626} label="6000 mm work zone width" />
+        <DimensionLine x1={1024} y1={82} x2={1024} y2={602} label="10000 mm work zone length" />
+        <DimensionLine x1={92} y1={314} x2={92} y2={406} label="500 mm conveyor" />
 
         <g className="zone zone-a">
-          <rect x="70" y="246" width="120" height="138" rx="14" />
-          <text x="130" y="238">A feed</text>
+          <rect x="88" y="292" width="128" height="136" rx="8" />
+          <text x="152" y="282">A feed zone</text>
         </g>
         <g className="zone zone-b">
-          <rect x="805" y="246" width="125" height="138" rx="14" />
-          <text x="868" y="238">B main sorter</text>
+          <rect x="842" y="292" width="136" height="136" rx="8" />
+          <text x="910" y="282">B main sorter</text>
         </g>
         <g className="zone zone-d">
-          <rect x="610" y="76" width="190" height="110" rx="14" />
-          <text x="705" y="68">D shape / repack</text>
+          <rect x="642" y="112" width="210" height="124" rx="8" />
+          <text x="747" y="102">D roll-cage 1200 x 800 x 800 mm</text>
         </g>
         <g className="zone zone-c">
-          <rect x="610" y="444" width="190" height="110" rx="14" />
-          <text x="705" y="574">C oversize cage</text>
+          <rect x="642" y="486" width="210" height="124" rx="8" />
+          <text x="747" y="632">C roll-cage 1200 x 800 x 800 mm</text>
         </g>
 
-        <rect x="90" y="275" width="810" height="80" rx="12" fill="#111f2e" stroke="#38526d" strokeWidth="2" />
-        <line x1="110" y1="315" x2="880" y2="315" stroke="#5c7087" strokeWidth="2" strokeDasharray="18 12" />
-        {Array.from({ length: 16 }).map((_, index) => (
-          <line key={index} x1={125 + index * 48} y1="284" x2={148 + index * 48} y2="346" stroke="#21374c" strokeWidth="3" />
+        <rect className={stopped ? 'conveyor stopped' : 'conveyor'} x="106" y="314" width="850" height="92" rx="6" />
+        <line x1="126" y1="360" x2="936" y2="360" className="belt-center" />
+        {Array.from({ length: 18 }).map((_, index) => (
+          <line key={index} x1={132 + index * 44} y1="324" x2={158 + index * 44} y2="396" className="roller-line" />
         ))}
 
         <g className={simulation.sensors.camera.active ? 'device active' : 'device'}>
-          <rect x="345" y="188" width="70" height="48" rx="8" />
-          <line x1="380" y1="236" x2="380" y2="275" />
-          <text x="380" y="180">Camera</text>
+          <rect x="350" y="218" width="76" height="50" rx="6" />
+          <line x1="388" y1="268" x2="388" y2="314" />
+          <text x="388" y="208">Camera / bbox</text>
         </g>
         <g className={simulation.sensors.laser.active ? 'device active' : 'device'}>
-          <rect x="465" y="188" width="70" height="48" rx="8" />
-          <line x1="500" y1="236" x2="500" y2="275" />
-          <text x="500" y="180">Laser</text>
+          <rect x="474" y="218" width="76" height="50" rx="6" />
+          <line x1="512" y1="268" x2="512" y2="314" />
+          <text x="512" y="208">Laser height</text>
         </g>
         <g className={simulation.sensors.ultrasound.active ? 'device active' : 'device'}>
-          <circle cx="620" cy="215" r="26" />
-          <line x1="620" y1="241" x2="620" y2="275" />
-          <text x="620" y="180">Ultrasound</text>
+          <circle cx="646" cy="243" r="28" />
+          <line x1="646" y1="271" x2="646" y2="314" />
+          <text x="646" y="208">Ultrasonic gate</text>
         </g>
 
         <g className={simulation.gate.open ? 'gate open' : 'gate closed'}>
-          <line x1="680" y1="258" x2="680" y2="372" />
-          <text x="706" y="263">Stop-gate {simulation.gate.open ? 'open' : 'closed'}</text>
+          <line x1="708" y1="296" x2="708" y2="424" />
+          <text x="746" y="300">Stop-gate {simulation.gate.open ? 'open' : 'closed'}</text>
         </g>
 
         <g className={`pusher ${simulation.actuators.pusherC}`}>
-          <rect x="600" y="372" width="160" height="32" rx="8" />
-          <text x="680" y="426">Pusher C</text>
+          <rect x="625" y="424" width="174" height="34" rx="6" />
+          <text x="712" y="476">Pusher C command</text>
         </g>
         <g className={`pusher ${simulation.actuators.pusherD}`}>
-          <rect x="600" y="226" width="160" height="32" rx="8" />
-          <text x="680" y="220">Pusher D</text>
+          <rect x="625" y="262" width="174" height="34" rx="6" />
+          <text x="712" y="256">Pusher D command</text>
         </g>
 
-        {routeVisible && category === 'B' ? <line x1="690" y1="315" x2="875" y2="315" stroke="#4ade80" strokeWidth="5" markerEnd="url(#arrowB)" /> : null}
-        {routeVisible && category === 'C' ? <line x1="690" y1="330" x2="705" y2="485" stroke="#f59e0b" strokeWidth="5" markerEnd="url(#arrowC)" /> : null}
-        {routeVisible && category === 'D' ? <line x1="690" y1="300" x2="705" y2="145" stroke="#c084fc" strokeWidth="5" markerEnd="url(#arrowD)" /> : null}
+        <line x1="706" y1="360" x2="928" y2="360" className="route-guide route-b" markerEnd="url(#arrowB)" />
+        <line x1="706" y1="376" x2="748" y2="548" className="route-guide route-c" markerEnd="url(#arrowC)" />
+        <line x1="706" y1="344" x2="748" y2="174" className="route-guide route-d" markerEnd="url(#arrowD)" />
+        {routeVisible && category ? (
+          <g className="route-command">
+            <rect x="788" y="326" width="156" height="34" rx="8" fill={routeColors[category]} />
+            <text x="866" y="348">{simulation.machineState}</text>
+          </g>
+        ) : null}
 
         {current ? (
           <g>
             <rect
-              x={position.x - 28}
-              y={position.y - 24}
-              width="56"
-              height="48"
-              rx={current.item.shape.includes('round') || current.item.shape.includes('cylinder') ? 24 : 8}
+              x={position.x - itemWidth / 2}
+              y={position.y - itemHeight / 2}
+              width={itemWidth}
+              height={itemHeight}
+              rx={current.item.shape.includes('round') || current.item.shape.includes('cylinder') ? Math.min(itemWidth, itemHeight) / 2 : 5}
               fill={color}
               opacity="0.92"
               stroke="#ffffff"
-              strokeWidth="1.5"
+              strokeWidth="1.4"
             />
-            <text x={position.x} y={position.y + 44} className="item-label">{current.item.id}</text>
+            <text x={position.x} y={position.y + itemHeight / 2 + 18} className="item-label">{current.item.id}</text>
             {detecting ? (
-              <rect x={position.x - 39} y={position.y - 34} width="78" height="68" fill="none" stroke="#38bdf8" strokeWidth="2" strokeDasharray="6 5" />
+              <g className="bbox">
+                <rect x={position.x - itemWidth / 2 - 10} y={position.y - itemHeight / 2 - 10} width={itemWidth + 20} height={itemHeight + 20} />
+                <text x={position.x} y={position.y - itemHeight / 2 - 18}>bbox {current.item.dimensionsMm.width} x {current.item.dimensionsMm.depth} mm</text>
+              </g>
             ) : null}
           </g>
         ) : null}
 
-        <text x="80" y="535" className="scale-label">Conveyor width 500 mm / height 700 mm</text>
-        <text x="80" y="555" className="scale-label">SVG scene is scaled for operator overview</text>
+        {stopped ? (
+          <g className="fault-overlay">
+            <rect x="610" y="286" width="210" height="148" rx="10" />
+            <text x="715" y="350">{simulation.machineState}</text>
+            <text x="715" y="376">Conveyor stopped, reset required</text>
+          </g>
+        ) : null}
+
+        <g className="scene-legend" transform="translate(78 664)">
+          <LegendItem color="#4ade80" label="B main sorter" />
+          <g transform="translate(140 0)"><LegendItem color="#f59e0b" label="C oversize" /></g>
+          <g transform="translate(270 0)"><LegendItem color="#c084fc" label="D shape / repack" /></g>
+          <g transform="translate(430 0)"><LegendItem color="#38bdf8" label="camera / laser / ultrasonic active" /></g>
+          <g transform="translate(700 0)"><LegendItem color="#fb3d4e" label="stop-gate / fault" /></g>
+        </g>
       </svg>
     </div>
   );
diff --git a/src/components/TimelinePanel.tsx b/src/components/TimelinePanel.tsx
new file mode 100644
index 0000000..3cd40f0
--- /dev/null
+++ b/src/components/TimelinePanel.tsx
@@ -0,0 +1,39 @@
+import { buildCycleTimeline } from '../domain/simulation';
+import type { SimulationState } from '../domain/types';
+
+function formatMs(ms?: number): string {
+  return ms === undefined ? '-' : `t+${(ms / 1000).toFixed(1)}s`;
+}
+
+export default function TimelinePanel({ simulation }: { simulation: SimulationState }) {
+  const timeline = buildCycleTimeline(simulation);
+  const current = simulation.currentItem;
+  const totalCycleTime = current ? simulation.simTimeMs - current.startedAtMs : 0;
+
+  return (
+    <section className="panel timeline-panel">
+      <div className="panel-heading">
+        <p className="eyebrow">Cycle timeline</p>
+        <h2>{current ? current.item.id : 'No active cycle'}</h2>
+      </div>
+      <div className="timeline-summary">
+        <div><span>total cycle</span><strong>{totalCycleTime} ms</strong></div>
+        <div><span>cv latency</span><strong>{simulation.metrics.cvLatencyMs} ms</strong></div>
+        <div><span>actuator latency</span><strong>{simulation.metrics.actuatorLatencyMs} ms</strong></div>
+        <div><span>conveyor</span><strong>{simulation.metrics.conveyorSpeedMps.toFixed(2)} m/s</strong></div>
+        <div><span>queue delay</span><strong>{simulation.metrics.queueDelayMs} ms</strong></div>
+      </div>
+      <div className="timeline-list">
+        {timeline.map((entry) => (
+          <div className={`timeline-row ${entry.status}`} key={entry.state}>
+            <span className="timeline-dot" />
+            <strong>{entry.state}</strong>
+            <span>{formatMs(entry.startedAtMs)}</span>
+            <span>{entry.durationMs} ms</span>
+            <em>{entry.status}</em>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/data/scenarios.test.ts b/src/data/scenarios.test.ts
new file mode 100644
index 0000000..d60f639
--- /dev/null
+++ b/src/data/scenarios.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { SCENARIOS } from './scenarios';
+import type { ScenarioId } from '../domain/types';
+
+const expectedIds: ScenarioId[] = [
+  'normal_flow',
+  'oversized_item',
+  'round_object',
+  'boundary_dimensions',
+  'close_items',
+  'low_confidence',
+  'jam',
+  'emergency_stop',
+];
+
+describe('scenarios', () => {
+  it('contains every expected scenario id', () => {
+    const ids = SCENARIOS.map((scenario) => scenario.id);
+
+    expect(ids).toEqual(expectedIds);
+  });
+
+  it('contains items and demo metadata for every scenario', () => {
+    for (const scenario of SCENARIOS) {
+      expect(scenario.items.length).toBeGreaterThan(0);
+      expect(scenario.goal.length).toBeGreaterThan(0);
+      expect(scenario.expectedCategorySummary.length).toBeGreaterThan(0);
+      expect(scenario.demonstrates.length).toBeGreaterThan(0);
+    }
+  });
+});
diff --git a/src/data/scenarios.ts b/src/data/scenarios.ts
index 480e3b5..7e77e1d 100644
--- a/src/data/scenarios.ts
+++ b/src/data/scenarios.ts
@@ -6,36 +6,54 @@ export const SCENARIOS: Scenario[] = [
     id: 'normal_flow',
     name: 'Normal flow',
     description: 'Обычный поток из нескольких товаров B/C/D с полным циклом сортировки.',
+    goal: 'Показать базовую последовательность sensor -> gate -> classifier -> actuator.',
+    expectedCategorySummary: 'Mixed: B, C, D',
+    demonstrates: 'Стабильный поток, корректную маршрутизацию и возврат исполнительных механизмов домой.',
     items: ['SKU-001', 'SKU-006', 'SKU-004', 'SKU-003', 'SKU-007'].map(getItem),
   },
   {
     id: 'oversized_item',
     name: 'Oversized item',
     description: 'Товар выходит за max dimensions и должен попасть в roll-cage C.',
+    goal: 'Доказать приоритет проверки габаритов.',
+    expectedCategorySummary: 'C for every item',
+    demonstrates: 'Негабаритный товар фиксируется stop-gate и уводится pusher C в roll-cage C.',
     items: ['SKU-004', 'SKU-005'].map(getItem),
   },
   {
     id: 'round_object',
     name: 'Round object',
     description: 'Габариты проходят, но roundness >= 0.8, маршрут в D.',
+    goal: 'Показать проверку круглого сечения после габаритов.',
+    expectedCategorySummary: 'D for every item',
+    demonstrates: 'Rule-based shape issue routing без реального ML на MVP-этапе.',
     items: ['SKU-006', 'SKU-007', 'SKU-008'].map(getItem),
   },
   {
     id: 'boundary_dimensions',
     name: 'Boundary dimensions',
     description: 'Товары около min/max границ показывают устойчивость правил.',
+    goal: 'Проверить строгие границы min/max.',
+    expectedCategorySummary: 'Boundary box -> B, Pen -> C',
+    demonstrates: '450 x 320 x 320 проходит, width 9 мм не проходит min width.',
     items: ['SKU-010', 'SKU-009', 'SKU-002'].map(getItem),
   },
   {
     id: 'close_items',
     name: 'Close items',
     description: 'Два товара близко друг к другу: warning queue/spacing и последовательная обработка.',
+    goal: 'Показать устойчивость очереди без усложнения физики.',
+    expectedCategorySummary: 'Sequential B, B, D',
+    demonstrates: 'Spacing warning, queue length и обработку товаров по одному циклу.',
     items: ['SKU-001', 'SKU-002', 'SKU-006'].map(getItem),
   },
   {
     id: 'low_confidence',
     name: 'Low confidence',
     description: 'CV confidence ниже 0.65, система предупреждает и принимает rule-based решение.',
+    goal: 'Показать fallback при низкой уверенности pseudo-CV.',
+    expectedCategorySummary: 'Rule-based B and D despite low CV confidence',
+    demonstrates: 'Низкая confidence не блокирует решение, так как финальная логика основана на правилах.',
     items: [
       { ...getItem('SKU-003'), id: 'SKU-003-LC', confidence: 0.58 },
       { ...getItem('SKU-006'), id: 'SKU-006-LC', confidence: 0.61 },
@@ -45,12 +63,18 @@ export const SCENARIOS: Scenario[] = [
     id: 'jam',
     name: 'Jam at gate',
     description: 'Застревание у stop-gate переводит систему в FAULT и останавливает конвейер.',
+    goal: 'Показать fail-safe состояние при застревании.',
+    expectedCategorySummary: 'FAULT before route completion',
+    demonstrates: 'Conveyor speed падает к 0, state фиксируется в FAULT, требуется Reset.',
     items: ['SKU-004'].map(getItem),
   },
   {
     id: 'emergency_stop',
     name: 'Emergency stop',
     description: 'Аварийная остановка переводит систему в EMERGENCY_STOP, движение остановлено.',
+    goal: 'Показать ручную/аварийную остановку всей линии.',
+    expectedCategorySummary: 'EMERGENCY_STOP before route completion',
+    demonstrates: 'Все движения останавливаются, PID target становится 0, требуется Reset.',
     items: ['SKU-001', 'SKU-006'].map(getItem),
   },
 ];
diff --git a/src/domain/classifier.test.ts b/src/domain/classifier.test.ts
new file mode 100644
index 0000000..2d59be4
--- /dev/null
+++ b/src/domain/classifier.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { classifyItem } from './classifier';
+import { getItem } from '../data/items';
+import type { Item } from './types';
+
+describe('classifyItem', () => {
+  it('routes normal box to B', () => {
+    expect(classifyItem(getItem('SKU-001')).category).toBe('B');
+  });
+
+  it('routes oversized box to C', () => {
+    expect(classifyItem(getItem('SKU-004')).category).toBe('C');
+  });
+
+  it('routes round plate to D', () => {
+    expect(classifyItem(getItem('SKU-006')).category).toBe('D');
+  });
+
+  it('routes pen with width below 10 mm to C', () => {
+    expect(classifyItem(getItem('SKU-009')).category).toBe('C');
+  });
+
+  it('keeps C priority when item is oversized and round', () => {
+    const item: Item = {
+      ...getItem('SKU-005'),
+      id: 'TEST-OVERSIZED-ROUND',
+      roundness: 0.95,
+    };
+
+    const result = classifyItem(item);
+
+    expect(result.category).toBe('C');
+    expect(result.dimensionsPass).toBe(false);
+    expect(result.roundnessPass).toBe(false);
+  });
+
+  it('accepts boundary item 450x320x320 as B', () => {
+    expect(classifyItem(getItem('SKU-010')).category).toBe('B');
+  });
+});
diff --git a/src/domain/metrics.ts b/src/domain/metrics.ts
index 2b17afc..3500fda 100644
--- a/src/domain/metrics.ts
+++ b/src/domain/metrics.ts
@@ -10,6 +10,7 @@ export function createMetrics(): Metrics {
     cvLatencyMs: 0,
     actuatorLatencyMs: 0,
     queueLength: 0,
+    queueDelayMs: 0,
     conveyorSpeedMps: 0,
     pidTargetSpeedMps: 0.42,
     pidActualSpeedMps: 0,
diff --git a/src/domain/pid.test.ts b/src/domain/pid.test.ts
new file mode 100644
index 0000000..30924ea
--- /dev/null
+++ b/src/domain/pid.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { createPidState, updatePid } from './pid';
+
+describe('PID conveyor speed imitation', () => {
+  it('moves actual speed toward target in normal mode', () => {
+    let pid = createPidState(0.42);
+
+    for (let index = 0; index < 20; index += 1) {
+      pid = updatePid(pid, 0.42, 250);
+    }
+
+    expect(pid.actualSpeedMps).toBeGreaterThan(0.3);
+    expect(Math.abs(pid.pidError)).toBeLessThan(0.15);
+  });
+
+  it('decays actual speed toward zero when target is stopped', () => {
+    let pid = createPidState(0.42);
+
+    for (let index = 0; index < 20; index += 1) {
+      pid = updatePid(pid, 0.42, 250);
+    }
+    const runningSpeed = pid.actualSpeedMps;
+
+    for (let index = 0; index < 30; index += 1) {
+      pid = updatePid(pid, 0, 250);
+    }
+
+    expect(pid.actualSpeedMps).toBeLessThan(runningSpeed);
+    expect(pid.actualSpeedMps).toBeLessThan(0.05);
+  });
+});
diff --git a/src/domain/pid.ts b/src/domain/pid.ts
index 35dd1bc..1ab83fc 100644
--- a/src/domain/pid.ts
+++ b/src/domain/pid.ts
@@ -1,11 +1,14 @@
 import type { PidState } from './types';
 
+const PID_HISTORY_LIMIT = 40;
+
 export function createPidState(targetSpeedMps = 0.42): PidState {
   return {
     targetSpeedMps,
     actualSpeedMps: 0,
     pidError: targetSpeedMps,
     correction: 0,
+    speedHistoryMps: [0],
   };
 }
 
@@ -14,11 +17,14 @@ export function updatePid(state: PidState, targetSpeedMps: number, deltaMs: numb
   const pidError = targetSpeedMps - state.actualSpeedMps;
   const correction = pidError * 0.42;
   const nextActual = Math.max(0, state.actualSpeedMps + correction * dt);
+  const actualSpeedMps = Number(nextActual.toFixed(3));
+  const speedHistoryMps = [...state.speedHistoryMps, actualSpeedMps].slice(-PID_HISTORY_LIMIT);
 
   return {
     targetSpeedMps,
-    actualSpeedMps: Number(nextActual.toFixed(3)),
+    actualSpeedMps,
     pidError: Number(pidError.toFixed(3)),
     correction: Number(correction.toFixed(3)),
+    speedHistoryMps,
   };
 }
diff --git a/src/domain/simulation.ts b/src/domain/simulation.ts
index 4707db9..e25dfef 100644
--- a/src/domain/simulation.ts
+++ b/src/domain/simulation.ts
@@ -3,6 +3,7 @@ import { createMetrics, recordCycle } from './metrics';
 import { createPidState, updatePid } from './pid';
 import type {
   Category,
+  CycleTimelineEntry,
   EventLogEntry,
   MachineState,
   Scenario,
@@ -10,7 +11,7 @@ import type {
   SystemStatus,
 } from './types';
 
-const STATE_DURATIONS_MS: Partial<Record<MachineState, number>> = {
+export const STATE_DURATIONS_MS: Record<Exclude<MachineState, 'IDLE' | 'FAULT' | 'EMERGENCY_STOP'>, number> = {
   MOVING_TO_CAMERA: 1200,
   DETECTING: 900,
   MOVING_TO_GATE: 1300,
@@ -22,6 +23,18 @@ const STATE_DURATIONS_MS: Partial<Record<MachineState, number>> = {
   RETURN_HOME: 700,
 };
 
+export const CYCLE_STATE_ORDER: MachineState[] = [
+  'MOVING_TO_CAMERA',
+  'DETECTING',
+  'MOVING_TO_GATE',
+  'WAITING_AT_GATE',
+  'CLASSIFYING',
+  'ROUTE_TO_B',
+  'ROUTE_TO_C',
+  'ROUTE_TO_D',
+  'RETURN_HOME',
+];
+
 const ROUTE_STATE_BY_CATEGORY: Record<Category, MachineState> = {
   B: 'ROUTE_TO_B',
   C: 'ROUTE_TO_C',
@@ -30,7 +43,9 @@ const ROUTE_STATE_BY_CATEGORY: Record<Category, MachineState> = {
 
 let eventCounter = 0;
 
-function event(timestampMs: number, entry: Omit<EventLogEntry, 'id' | 'timestampMs'>): EventLogEntry {
+type EventInput = Omit<EventLogEntry, 'id' | 'timestampMs'>;
+
+function event(timestampMs: number, entry: EventInput): EventLogEntry {
   eventCounter += 1;
   return {
     id: `evt-${eventCounter}`,
@@ -39,10 +54,10 @@ function event(timestampMs: number, entry: Omit<EventLogEntry, 'id' | 'timestamp
   };
 }
 
-function appendEvent(state: SimulationState, entry: Omit<EventLogEntry, 'id' | 'timestampMs'>): SimulationState {
+function appendEvent(state: SimulationState, entry: EventInput): SimulationState {
   return {
     ...state,
-    events: [event(state.simTimeMs, entry), ...state.events].slice(0, 80),
+    events: [event(state.simTimeMs, { state: state.machineState, ...entry }), ...state.events].slice(0, 120),
   };
 }
 
@@ -63,8 +78,10 @@ function transitionTo(state: SimulationState, nextState: MachineState): Simulati
     next = appendEvent(next, {
       itemId: item.id,
       type: 'sensor',
-      message: `Camera captured bbox, confidence ${Math.round(item.confidence * 100)}%`,
+      message: `Camera bbox ${item.dimensionsMm.width}x${item.dimensionsMm.depth} mm, confidence ${Math.round(item.confidence * 100)}%`,
       category: state.currentItem?.classification.category,
+      command: 'CAMERA_CAPTURE',
+      state: nextState,
       status: item.confidence < 0.65 ? 'warning' : 'info',
     });
   }
@@ -74,6 +91,8 @@ function transitionTo(state: SimulationState, nextState: MachineState): Simulati
       itemId: item.id,
       type: 'actuator',
       message: 'Stop-gate closed, item fixed before classification',
+      command: 'GATE_CLOSE',
+      state: nextState,
       status: 'info',
     });
   }
@@ -84,6 +103,8 @@ function transitionTo(state: SimulationState, nextState: MachineState): Simulati
       type: 'classification',
       message: `${state.currentItem.classification.label}: ${state.currentItem.classification.reason}`,
       category: state.currentItem.classification.category,
+      command: 'CLASSIFY_RULE_BASED',
+      state: nextState,
       status: state.currentItem.classification.warnings.length > 0 ? 'warning' : 'success',
     });
   }
@@ -94,6 +115,8 @@ function transitionTo(state: SimulationState, nextState: MachineState): Simulati
       type: 'routing',
       message: `Route selected: ${state.currentItem.classification.category}`,
       category: state.currentItem.classification.category,
+      command: nextState,
+      state: nextState,
       status: 'success',
     });
   }
@@ -104,7 +127,7 @@ function transitionTo(state: SimulationState, nextState: MachineState): Simulati
 function startNextItem(state: SimulationState): SimulationState {
   const item = state.scenario.items[state.itemIndex];
   if (!item) {
-    return { ...state, machineState: 'IDLE', running: false, systemStatus: 'PAUSED' };
+    return { ...state, machineState: 'IDLE', running: false, systemStatus: 'PAUSED', currentItem: undefined };
   }
 
   const classification = classifyItem(item);
@@ -118,6 +141,7 @@ function startNextItem(state: SimulationState): SimulationState {
     },
     machineState: 'MOVING_TO_CAMERA',
     elapsedInStateMs: 0,
+    activeRoute: undefined,
     itemIndex: state.itemIndex + 1,
   };
 
@@ -125,6 +149,8 @@ function startNextItem(state: SimulationState): SimulationState {
     itemId: item.id,
     type: 'system',
     message: `Item entered zone A: ${item.name}`,
+    command: 'FEED_ITEM',
+    state: 'MOVING_TO_CAMERA',
     status: 'info',
   });
 
@@ -133,6 +159,8 @@ function startNextItem(state: SimulationState): SimulationState {
       itemId: item.id,
       type: 'warning',
       message: 'Queue/spacing warning: next item detected too close, processing sequentially',
+      command: 'QUEUE_HOLD_NEXT_ITEM',
+      state: 'MOVING_TO_CAMERA',
       status: 'warning',
     });
   }
@@ -143,6 +171,8 @@ function startNextItem(state: SimulationState): SimulationState {
       type: 'warning',
       message: warning,
       category: classification.category,
+      command: 'RULE_BASED_FALLBACK',
+      state: 'MOVING_TO_CAMERA',
       status: 'warning',
     });
   }
@@ -162,6 +192,10 @@ function completeCurrentItem(state: SimulationState): SimulationState {
   let next = appendEvent(
     {
       ...state,
+      currentItem: {
+        ...state.currentItem,
+        cycleTimeMs,
+      },
       metrics,
     },
     {
@@ -169,13 +203,13 @@ function completeCurrentItem(state: SimulationState): SimulationState {
       type: 'routing',
       message: `Cycle completed in ${(cycleTimeMs / 1000).toFixed(1)}s`,
       category: state.currentItem.classification.category,
+      command: 'CYCLE_COMPLETE',
       status: success ? 'success' : 'error',
     },
   );
 
   next = {
     ...next,
-    currentItem: undefined,
     activeRoute: undefined,
   };
 
@@ -315,6 +349,7 @@ export function stepSimulation(state: SimulationState, deltaMs: number, forceSte
       itemId: next.currentItem?.item.id,
       type: 'fault',
       message: 'Emergency stop pressed, all movement stopped',
+      command: 'EMERGENCY_STOP',
       status: 'error',
     });
     next = { ...next, machineState: 'EMERGENCY_STOP', running: false, systemStatus: 'EMERGENCY_STOP' };
@@ -327,6 +362,7 @@ export function stepSimulation(state: SimulationState, deltaMs: number, forceSte
       type: 'fault',
       message: 'Jam detected at stop-gate, conveyor stopped',
       category: next.currentItem?.classification.category,
+      command: 'CONVEYOR_STOP_FAULT',
       status: 'error',
     });
     next = { ...next, machineState: 'FAULT', running: false, systemStatus: 'FAULT' };
@@ -350,7 +386,7 @@ export function stepSimulation(state: SimulationState, deltaMs: number, forceSte
     next = startNextItem(next);
   }
 
-  const duration = STATE_DURATIONS_MS[next.machineState];
+  const duration = next.machineState in STATE_DURATIONS_MS ? STATE_DURATIONS_MS[next.machineState as keyof typeof STATE_DURATIONS_MS] : undefined;
   if (duration && next.elapsedInStateMs >= duration) {
     switch (next.machineState) {
       case 'MOVING_TO_CAMERA':
@@ -376,7 +412,7 @@ export function stepSimulation(state: SimulationState, deltaMs: number, forceSte
         next = completeCurrentItem(next);
         break;
       case 'RETURN_HOME':
-        next = next.itemIndex < next.scenario.items.length ? startNextItem(next) : { ...next, machineState: 'IDLE', running: false, systemStatus: 'PAUSED', elapsedInStateMs: 0 };
+        next = next.itemIndex < next.scenario.items.length ? startNextItem(next) : { ...next, currentItem: undefined, machineState: 'IDLE', running: false, systemStatus: 'PAUSED', elapsedInStateMs: 0 };
         break;
       default:
         break;
@@ -388,6 +424,7 @@ export function stepSimulation(state: SimulationState, deltaMs: number, forceSte
   const queueLength = Math.max(next.scenario.items.length - next.itemIndex, 0) + (next.currentItem ? 1 : 0);
   const cvLatencyMs = next.sensors.camera.cvLatencyMs || next.metrics.cvLatencyMs;
   const actuatorLatencyMs = next.actuators.pusherC !== 'idle' || next.actuators.pusherD !== 'idle' ? 115 : next.machineState === 'ROUTE_TO_B' ? 55 : 0;
+  const queueDelayMs = next.scenario.id === 'close_items' && queueLength > 1 ? 450 : 0;
 
   next = {
     ...next,
@@ -398,6 +435,7 @@ export function stepSimulation(state: SimulationState, deltaMs: number, forceSte
       cvLatencyMs,
       actuatorLatencyMs,
       queueLength,
+      queueDelayMs,
       conveyorSpeedMps: pid.actualSpeedMps,
       pidTargetSpeedMps: pid.targetSpeedMps,
       pidActualSpeedMps: pid.actualSpeedMps,
@@ -406,3 +444,57 @@ export function stepSimulation(state: SimulationState, deltaMs: number, forceSte
 
   return deriveSensorsAndActuators(next);
 }
+
+export function stepSimulationToNextState(state: SimulationState): SimulationState {
+  if (state.machineState === 'FAULT' || state.machineState === 'EMERGENCY_STOP') {
+    return state;
+  }
+
+  const runningState = setRunning({ ...state, running: true, systemStatus: 'RUNNING' }, true);
+  let deltaMs = 1;
+
+  if (runningState.scenario.id === 'emergency_stop') {
+    deltaMs = Math.max(1, 1800 - runningState.simTimeMs);
+  } else if (runningState.scenario.id === 'jam' && runningState.machineState === 'WAITING_AT_GATE') {
+    deltaMs = Math.max(1, 700 - runningState.elapsedInStateMs);
+  } else if (runningState.machineState in STATE_DURATIONS_MS) {
+    const duration = STATE_DURATIONS_MS[runningState.machineState as keyof typeof STATE_DURATIONS_MS];
+    deltaMs = Math.max(1, duration - runningState.elapsedInStateMs);
+  }
+
+  const stepped = stepSimulation(runningState, deltaMs, true);
+  return setRunning(stepped, false);
+}
+
+export function buildCycleTimeline(state: SimulationState): CycleTimelineEntry[] {
+  const current = state.currentItem;
+  const activeRoute = current ? ROUTE_STATE_BY_CATEGORY[current.classification.category] : undefined;
+  let cursor = current?.startedAtMs ?? state.simTimeMs;
+
+  return CYCLE_STATE_ORDER.map((machineState) => {
+    const isRouteState = machineState.startsWith('ROUTE_TO_');
+    const skipped = isRouteState && machineState !== activeRoute;
+    const durationMs = STATE_DURATIONS_MS[machineState as keyof typeof STATE_DURATIONS_MS] ?? 0;
+    const startedAtMs = current && !skipped ? cursor : undefined;
+    let status: CycleTimelineEntry['status'] = current ? 'pending' : 'pending';
+
+    if (skipped) {
+      status = 'skipped';
+    } else if (current && machineState === state.machineState) {
+      status = 'active';
+    } else if (current && startedAtMs !== undefined && state.simTimeMs >= startedAtMs + durationMs) {
+      status = 'done';
+    }
+
+    if (!skipped) {
+      cursor += durationMs;
+    }
+
+    return {
+      state: machineState,
+      startedAtMs,
+      durationMs,
+      status,
+    };
+  });
+}
diff --git a/src/domain/types.ts b/src/domain/types.ts
index 87ff7d5..9dadfd0 100644
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -30,6 +30,7 @@ export type SensorKind = 'camera' | 'laser' | 'ultrasound';
 export type EventType = 'system' | 'sensor' | 'classification' | 'actuator' | 'routing' | 'warning' | 'fault';
 export type EventStatus = 'info' | 'success' | 'warning' | 'error';
 export type PusherState = 'idle' | 'extended' | 'retracting';
+export type TimelineStatus = 'done' | 'active' | 'pending' | 'skipped';
 
 export interface DimensionsMm {
   width: number;
@@ -65,6 +66,9 @@ export interface Scenario {
   id: ScenarioId;
   name: string;
   description: string;
+  goal: string;
+  expectedCategorySummary: string;
+  demonstrates: string;
   items: Item[];
   initialStatus?: SystemStatus;
 }
@@ -76,6 +80,8 @@ export interface EventLogEntry {
   type: EventType;
   message: string;
   category?: Category;
+  command?: string;
+  state?: MachineState;
   status: EventStatus;
 }
 
@@ -88,6 +94,7 @@ export interface Metrics {
   cvLatencyMs: number;
   actuatorLatencyMs: number;
   queueLength: number;
+  queueDelayMs: number;
   conveyorSpeedMps: number;
   pidTargetSpeedMps: number;
   pidActualSpeedMps: number;
@@ -141,6 +148,14 @@ export interface PidState {
   actualSpeedMps: number;
   pidError: number;
   correction: number;
+  speedHistoryMps: number[];
+}
+
+export interface CycleTimelineEntry {
+  state: MachineState;
+  startedAtMs?: number;
+  durationMs: number;
+  status: TimelineStatus;
 }
 
 export interface SimulatedItem {
diff --git a/src/styles.css b/src/styles.css
index a2c230c..41a0fd2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -518,3 +518,337 @@ h2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  transform: none;
+}
+
+.sorter-svg {
+  height: 660px;
+}
+
+.panel-scene {
+  min-height: 746px;
+}
+
+.left-label {
+  text-anchor: start;
+}
+
+.conveyor {
+  fill: #101f30;
+  stroke: #4b647d;
+  stroke-width: 2;
+}
+
+.conveyor.stopped {
+  fill: #2a1219;
+  stroke: var(--red);
+  filter: drop-shadow(0 0 12px rgba(251, 61, 78, 0.35));
+}
+
+.belt-center {
+  stroke: #7b8fa5;
+  stroke-width: 2;
+  stroke-dasharray: 18 12;
+}
+
+.roller-line {
+  stroke: #243d55;
+  stroke-width: 3;
+}
+
+.dimension-line line {
+  stroke: #6c849d;
+  stroke-width: 1.4;
+  stroke-dasharray: 5 5;
+}
+
+.dimension-line circle {
+  fill: #6c849d;
+}
+
+.dimension-line text,
+.legend-item text,
+.route-command text {
+  fill: #d9e8f7;
+  font-size: 12px;
+  font-weight: 800;
+  text-anchor: middle;
+}
+
+.scene-legend text {
+  text-anchor: start;
+  fill: #b8c8da;
+  font-size: 11px;
+}
+
+.route-guide {
+  fill: none;
+  stroke-width: 3;
+  stroke-dasharray: 10 9;
+  opacity: 0.34;
+}
+
+.route-b { stroke: var(--green); }
+.route-c { stroke: var(--orange); }
+.route-d { stroke: var(--purple); }
+
+.route-command text {
+  fill: #05101b;
+  font-size: 13px;
+}
+
+.bbox rect {
+  fill: none;
+  stroke: var(--cyan);
+  stroke-width: 2;
+  stroke-dasharray: 6 5;
+  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7));
+}
+
+.bbox text {
+  fill: var(--cyan);
+  font-size: 12px;
+  text-anchor: middle;
+  font-weight: 800;
+}
+
+.fault-chip {
+  border-color: var(--red);
+  color: #fecdd3;
+}
+
+.fault-overlay rect {
+  fill: rgba(54, 12, 22, 0.88);
+  stroke: var(--red);
+  stroke-width: 2;
+}
+
+.fault-overlay text {
+  fill: #fecdd3;
+  font-size: 16px;
+  font-weight: 900;
+  text-anchor: middle;
+}
+
+.pseudo-cv-block {
+  margin-top: 12px;
+  padding: 10px;
+  border: 1px solid #24445f;
+  border-radius: 14px;
+  background: #071423;
+}
+
+.pseudo-cv-block h3 {
+  margin: 0 0 8px;
+  color: var(--cyan);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.compact-kv {
+  grid-template-columns: 116px 1fr;
+}
+
+.classification-panel .panel-heading {
+  margin-bottom: 10px;
+}
+
+.rule-stack {
+  display: grid;
+  gap: 9px;
+}
+
+.rule-card {
+  padding: 10px;
+  border: 1px solid #243e57;
+  border-radius: 13px;
+  background: #081422;
+}
+
+.rule-card div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.rule-card strong {
+  font-size: 13px;
+}
+
+.rule-card p {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.verdict,
+.decision-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 3px 8px;
+  border: 1px solid #334d66;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.06em;
+}
+
+.verdict.pass { color: var(--green); border-color: var(--green); }
+.verdict.fail { color: var(--orange); border-color: var(--orange); }
+.verdict.pending,
+.verdict.skipped { color: var(--muted); }
+.warning-note {
+  margin-top: 6px;
+  color: #facc15 !important;
+}
+
+.bottom-row {
+  grid-template-columns: 1fr 1.15fr 0.82fr 1.35fr 1fr;
+  align-items: start;
+}
+
+.timeline-panel {
+  padding: 14px;
+}
+
+.timeline-summary {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.timeline-summary div {
+  padding: 8px;
+  border: 1px solid #243e57;
+  border-radius: 10px;
+  background: #081422;
+}
+
+.timeline-summary span,
+.timeline-summary strong {
+  display: block;
+  font-size: 11px;
+}
+
+.timeline-summary span {
+  color: var(--muted);
+}
+
+.timeline-list {
+  display: grid;
+  gap: 6px;
+  max-height: 260px;
+  overflow: auto;
+}
+
+.timeline-row {
+  display: grid;
+  grid-template-columns: 14px minmax(130px, 1fr) 60px 62px 58px;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 8px;
+  border: 1px solid #203950;
+  border-radius: 10px;
+  color: #b8c8da;
+  font-size: 11px;
+}
+
+.timeline-row strong {
+  font-size: 11px;
+}
+
+.timeline-row em {
+  color: var(--muted);
+  font-style: normal;
+  font-weight: 800;
+}
+
+.timeline-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #31485f;
+}
+
+.timeline-row.done .timeline-dot { background: var(--green); }
+.timeline-row.active {
+  border-color: var(--cyan);
+  background: rgba(56, 189, 248, 0.09);
+}
+.timeline-row.active .timeline-dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
+.timeline-row.skipped { opacity: 0.48; }
+.timeline-row.skipped .timeline-dot { background: #475569; }
+
+.pid-sparkline {
+  width: 100%;
+  height: 72px;
+  margin: 4px 0 10px;
+  border: 1px solid #243e57;
+  border-radius: 12px;
+  background: #071423;
+}
+
+.pid-sparkline path {
+  stroke: #223c55;
+  stroke-width: 1;
+}
+
+.pid-sparkline polyline {
+  fill: none;
+  stroke: var(--cyan);
+  stroke-width: 3;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.log-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.log-filters button,
+.small-button {
+  min-height: 28px;
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+.log-filters button.active {
+  border-color: var(--cyan);
+  background: rgba(56, 189, 248, 0.12);
+}
+
+.event-row {
+  grid-template-columns: 62px 84px 116px 88px 128px minmax(260px, 1fr) 68px;
+}
+
+.scenario-buttons button em {
+  display: block;
+  margin-top: 5px;
+  color: #b6c6d8;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 650;
+}
+
+.metric-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+@media (max-width: 1500px) {
+  .bottom-row {
+    grid-template-columns: 1fr 1fr;
+  }
+}