From de2fa57c63952ae4b54f134c006757e5e00b6400 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Wed, 29 Apr 2026 09:51:09 +0200
Subject: [PATCH] Add audit issue navigation and task-button normalization to
 Self-Serve Studio. Implement node ID resolution, audit visualization logic,
 and reusable task button helpers. Extend E2E and unit tests.

---
 .../department/tables/SelfServeTasksTable.vue |   31 +-
 .../department/tables/SelfServeTryModal.vue   |   16 +-
 .../SessionUser/Objects/SelfServeTasks.vue    |   19 +-
 .../Objects/selfServeObjectForms.js           |    8 +-
 .../Objects/selfServeTaskButtons.js           |  117 +
 .../self-serve/DepartmentSelfServeStudio.vue  | 1874 ++++++++++++++++-
 .../self-serve/auditIssueNavigation.js        |  101 +
 ...self-serve-studio-audit-navigation.spec.js |   35 +
 tests/e2e/self-serve-studio-flow.spec.js      |  821 +++++++-
 ...self-serve-studio-audit-navigation.spec.js |   72 +
 .../unit/self-serve-studio-task-scope.spec.js |  172 +-
 ...lf-serve-studio-vehicle-type-scope.spec.js |   66 +-
 .../self-serve-tasks-payload-contract.spec.js |   11 +
 tests/unit/self-serve-try-modal.spec.js       |    4 +-
 14 files changed, 3008 insertions(+), 339 deletions(-)
 create mode 100644 src/components/session/token/SessionUser/Objects/selfServeTaskButtons.js
 create mode 100644 src/views/dashboards/departmentDashboard/modules/self-serve/auditIssueNavigation.js
 create mode 100644 tests/e2e/self-serve-studio-audit-navigation.spec.js
 create mode 100644 tests/unit/self-serve-studio-audit-navigation.spec.js

diff --git a/src/components/displays/department/tables/SelfServeTasksTable.vue b/src/components/displays/department/tables/SelfServeTasksTable.vue
index 78b2b68c..8f70e2e3 100644
--- a/src/components/displays/department/tables/SelfServeTasksTable.vue
+++ b/src/components/displays/department/tables/SelfServeTasksTable.vue
@@ -8,6 +8,10 @@ const { loadList, loadSwitch, metaCurrentPage, metaItemsPerPage, setList } = use
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { ref, watch } from "vue";
 import SelfServeTaskAttachmentsModal from "@/components/displays/department/tables/SelfServeTaskAttachmentsModal.vue";
+import {
+  SELF_SERVE_TASK_BUTTON_OPTIONS,
+  normalizeSelfServeTaskButtons,
+} from "@/components/session/token/SessionUser/Objects/selfServeTaskButtons.js";
 
 // Define the props
 const props = defineProps({
@@ -36,24 +40,15 @@ const closeAttachmentsModal = () => {
 
 const editButtonsFunction = (id, column, value, onAfterSubmit) => {
   editingButtonsId.value = id;
-  try {
-    const parsed = JSON.stringify(value);
-    if (Array.isArray(parsed)) {
-      currentButtonsSelection.value = parsed;
-    } else {
-      console.warn('Parsed buttons value is not an array:', parsed);
-      currentButtonsSelection.value = [];
-    }
-  } catch (e) {
-    console.warn('Error parsing buttons value:', e);
-    currentButtonsSelection.value = [];
-  }
+  currentButtonsSelection.value = normalizeSelfServeTaskButtons(value);
   showButtonsEditModal.value = true;
 };
 
 const saveButtonsEdit = async () => {
-  console.warn('Saving buttons with selection:', currentButtonsSelection.value);
-  await SessionUser.objects.self_serve_tasks.set.buttons(editingButtonsId.value, currentButtonsSelection.value);
+  await SessionUser.objects.self_serve_tasks.set.buttons(
+    editingButtonsId.value,
+    normalizeSelfServeTaskButtons(currentButtonsSelection.value)
+  );
   showButtonsEditModal.value = false;
   loadList();
 };
@@ -237,15 +232,15 @@ const getScopeLabel = (object) => {
         <button class="delete" @click="cancelButtonsEdit" aria-label="close"></button>
       </header>
       <section class="modal-card-body">
-        <div v-for="n in 12" :key="n" class="field mb-3">
+        <div v-for="option in SELF_SERVE_TASK_BUTTON_OPTIONS" :key="String(option.id)" class="field mb-3">
           <input
             class="is-checkradio"
             type="checkbox"
-            :id="`btn-${n-1}`"
+            :id="`btn-${option.id}`"
             v-model="currentButtonsSelection"
-            :value="n-1"
+            :value="option.id"
           >
-          <label :for="`btn-${n-1}`">Button {{ n-1 }}</label>
+          <label :for="`btn-${option.id}`">{{ option.name }}</label>
         </div>
       </section>
       <footer class="modal-card-foot">
diff --git a/src/components/displays/department/tables/SelfServeTryModal.vue b/src/components/displays/department/tables/SelfServeTryModal.vue
index 33a5da08..17feb73b 100644
--- a/src/components/displays/department/tables/SelfServeTryModal.vue
+++ b/src/components/displays/department/tables/SelfServeTryModal.vue
@@ -7,6 +7,7 @@ import { useSelfServeLogic } from "@/composables/useSelfServeLogic";
 import SelfServeQuestionCards from "@/components/displays/selfServe/SelfServeQuestionCards.vue";
 import SelfServeTaskList from "@/components/displays/selfServe/SelfServeTaskList.vue";
 import { API_URL } from "@/config";
+import { normalizeSelfServeTaskButtons } from "@/components/session/token/SessionUser/Objects/selfServeTaskButtons.js";
 
 const { t: $t } = useI18n();
 
@@ -145,22 +146,15 @@ const parseNonNegativeInt = (value) => {
 };
 
 const dynamicImageButtons = computed(() => {
-  const buttonIds = new Set();
+  const buttonIds = new Map();
 
   activeTasks.value.forEach((task) => {
-    if (!Array.isArray(task?.buttons)) {
-      return;
-    }
-
-    task.buttons.forEach((button) => {
-      const buttonId = parseInt(button);
-      if (!Number.isNaN(buttonId) && buttonId >= 0 && buttonId <= 11) {
-        buttonIds.add(buttonId);
-      }
+    normalizeSelfServeTaskButtons(task?.buttons).forEach((button) => {
+      buttonIds.set(`${typeof button}:${button}`, button);
     });
   });
 
-  return [...buttonIds];
+  return [...buttonIds.values()];
 });
 
 const dynamicImageThumbPosition = computed(() => {
diff --git a/src/components/session/token/SessionUser/Objects/SelfServeTasks.vue b/src/components/session/token/SessionUser/Objects/SelfServeTasks.vue
index ed9f7d25..9ee2368a 100644
--- a/src/components/session/token/SessionUser/Objects/SelfServeTasks.vue
+++ b/src/components/session/token/SessionUser/Objects/SelfServeTasks.vue
@@ -4,6 +4,11 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { ref } from "vue";
 import { showSelfServeTaskForm } from "@/components/session/token/SessionUser/Objects/selfServeObjectForms.js";
+import {
+  SELF_SERVE_TASK_BUTTON_OPTIONS,
+  formatSelfServeTaskButtons,
+  normalizeSelfServeTaskButtons,
+} from "@/components/session/token/SessionUser/Objects/selfServeTaskButtons.js";
 
 /**
  * Local tasks cache
@@ -80,7 +85,7 @@ const normalizePayload = (payload = {}) => {
     description: payload.description,
     order_priority: parseIntOrZero(payload.order_priority),
     services: Array.isArray(payload.services) ? payload.services : [],
-    buttons: Array.isArray(payload.buttons) ? payload.buttons.map((button) => parseIntOrZero(button)) : [],
+    buttons: normalizeSelfServeTaskButtons(payload.buttons),
     dynamic_images_vehicle_type: parseNullablePositiveInt(payload.dynamic_images_vehicle_type),
   };
 };
@@ -250,17 +255,13 @@ export const SelfServeTasks = {
     },
     buttons: {
       label: "Knapper",
-      type: "multi-select-int",
+      type: "multi-select",
       sortable: false,
       creation: {
         required: false
       },
-      parse: (buttons) => {
-        if (!buttons || !Array.isArray(buttons) || buttons.length === 0) {
-          return "Ingen";
-        }
-        return buttons.join(", ");
-      }
+      options: async () => SELF_SERVE_TASK_BUTTON_OPTIONS,
+      parse: (buttons) => formatSelfServeTaskButtons(buttons)
     },
     dynamic_images_vehicle_type: {
       label: "Køretøjstype (maskine UI)",
@@ -306,7 +307,7 @@ export const SelfServeTasks = {
     lane: (id, lane) => ObjectsGlobal.set.column(SelfServeTasks.meta.endpoint, id, "lane", parseInt(lane || 0)),
     department: (id, department) => ObjectsGlobal.set.column(SelfServeTasks.meta.endpoint, id, "department", parseInt(department || 0)),
     services: (id, services) => ObjectsGlobal.set.column(SelfServeTasks.meta.endpoint, id, "services", Array.isArray(services) ? services : []),
-    buttons: (id, buttons) => ObjectsGlobal.set.column(SelfServeTasks.meta.endpoint, id, "buttons", Array.isArray(buttons) ? buttons.map(b => parseInt(b)) : []),
+    buttons: (id, buttons) => ObjectsGlobal.set.column(SelfServeTasks.meta.endpoint, id, "buttons", normalizeSelfServeTaskButtons(buttons)),
     dynamic_images_vehicle_type: (id, vehicleType) => ObjectsGlobal.set.column(SelfServeTasks.meta.endpoint, id, "dynamic_images_vehicle_type", vehicleType ? parseInt(vehicleType) : null),
   },
   get: {
diff --git a/src/components/session/token/SessionUser/Objects/selfServeObjectForms.js b/src/components/session/token/SessionUser/Objects/selfServeObjectForms.js
index 5b9c9ece..e5f38a08 100644
--- a/src/components/session/token/SessionUser/Objects/selfServeObjectForms.js
+++ b/src/components/session/token/SessionUser/Objects/selfServeObjectForms.js
@@ -1,6 +1,10 @@
 import Swal from "sweetalert2";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import {
+  SELF_SERVE_TASK_BUTTON_OPTIONS,
+  normalizeSelfServeTaskButtons,
+} from "@/components/session/token/SessionUser/Objects/selfServeTaskButtons.js";
 
 const escapeHtml = (value = "") => String(value)
   .replaceAll("&", "&amp;")
@@ -334,7 +338,7 @@ export const showSelfServeTaskForm = async ({ object, record = null, initialData
     ], record?.services ?? initialData.services ?? [])),
     wrapField("buttons", "Knapper", buildCheckboxList(
       "buttons",
-      Array.from({ length: 12 }, (_, index) => ({ id: index, name: `Button ${index}` })),
+      SELF_SERVE_TASK_BUTTON_OPTIONS,
       (record?.buttons ?? initialData.buttons ?? []).map(String)
     )),
     wrapField("dynamic_images_vehicle_type", "Køretøjstype (maskine UI)", buildSelect(
@@ -390,7 +394,7 @@ export const showSelfServeTaskForm = async ({ object, record = null, initialData
         gate_type: selectedConditionId ? "CONDITION" : "ALWAYS",
         gate_ref_id: selectedConditionId,
         services: getCheckedValues("services"),
-        buttons: getCheckedValues("buttons").map((value) => parseIntOrZero(value)),
+        buttons: normalizeSelfServeTaskButtons(getCheckedValues("buttons")),
         dynamic_images_vehicle_type: parseNullableInt(getFieldValue("dynamic_images_vehicle_type")),
       };
 
diff --git a/src/components/session/token/SessionUser/Objects/selfServeTaskButtons.js b/src/components/session/token/SessionUser/Objects/selfServeTaskButtons.js
new file mode 100644
index 00000000..f1e34570
--- /dev/null
+++ b/src/components/session/token/SessionUser/Objects/selfServeTaskButtons.js
@@ -0,0 +1,117 @@
+export const SELF_SERVE_TASK_BUTTON_RESET = "reset";
+export const SELF_SERVE_TASK_BUTTON_START = "start";
+
+export const SELF_SERVE_TASK_BUTTON_OPTIONS = [
+  {
+    id: SELF_SERVE_TASK_BUTTON_RESET,
+    name: "Reset",
+    description: "Reset button",
+  },
+  ...Array.from({ length: 12 }, (_, index) => ({
+    id: index,
+    name: `Program ${index + 1}`,
+    description: `Machine button ${index}`,
+  })),
+  {
+    id: SELF_SERVE_TASK_BUTTON_START,
+    name: "Start",
+    description: "Start button",
+  },
+];
+
+const KNOWN_SPECIAL_BUTTONS = new Set([
+  SELF_SERVE_TASK_BUTTON_RESET,
+  SELF_SERVE_TASK_BUTTON_START,
+]);
+
+const BUTTON_LABELS = new Map(
+  SELF_SERVE_TASK_BUTTON_OPTIONS.map((option) => [String(option.id), option.name])
+);
+
+const normalizeListInput = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return [];
+    }
+
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (Array.isArray(parsed)) {
+        return normalizeListInput(parsed);
+      }
+    } catch {
+      // Comma-separated values are accepted for quick manual edits.
+    }
+
+    return trimmed.split(",").map((entry) => entry.trim()).filter(Boolean);
+  }
+
+  return [];
+};
+
+export const normalizeSelfServeTaskButton = (value) => {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  const text = String(value).trim();
+  if (!text) {
+    return null;
+  }
+
+  const lowerText = text.toLowerCase();
+  if (KNOWN_SPECIAL_BUTTONS.has(lowerText)) {
+    return lowerText;
+  }
+
+  const parsed = Number(text);
+  if (!Number.isInteger(parsed) || parsed < 0 || parsed > 11) {
+    return null;
+  }
+
+  return parsed;
+};
+
+export const normalizeSelfServeTaskButtons = (value) => {
+  const normalized = [];
+  const seen = new Set();
+
+  for (const entry of normalizeListInput(value)) {
+    const button = normalizeSelfServeTaskButton(entry);
+    if (button === null) {
+      continue;
+    }
+
+    const key = `${typeof button}:${button}`;
+    if (seen.has(key)) {
+      continue;
+    }
+
+    seen.add(key);
+    normalized.push(button);
+  }
+
+  return normalized;
+};
+
+export const formatSelfServeTaskButton = (button) => {
+  const normalized = normalizeSelfServeTaskButton(button);
+  if (normalized === null) {
+    return null;
+  }
+
+  return BUTTON_LABELS.get(String(normalized)) || `Button ${normalized}`;
+};
+
+export const formatSelfServeTaskButtons = (buttons, emptyLabel = "Ingen") => {
+  const labels = normalizeSelfServeTaskButtons(buttons)
+    .map(formatSelfServeTaskButton)
+    .filter(Boolean);
+
+  return labels.length > 0 ? labels.join(", ") : emptyLabel;
+};
diff --git a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
index 15cdbb8f..c33a5215 100644
--- a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
+++ b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
@@ -11,6 +11,14 @@ import PageTitle from "@/components/global/PageTitle.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { useAppToast } from "@/composables/useAppToast.js";
+import { searchCustomer, searchCustomerResults, isSearching as isSearchingCustomers } from "@/components/search/economic/customerSearch.vue";
+import { API_URL } from "@/config";
+import {
+  SELF_SERVE_TASK_BUTTON_OPTIONS,
+  formatSelfServeTaskButtons,
+  normalizeSelfServeTaskButtons,
+} from "@/components/session/token/SessionUser/Objects/selfServeTaskButtons.js";
+import { resolveAuditIssueNodeIds } from "./auditIssueNavigation.js";
 
 const currentRoute = useRoute();
 const toast = useAppToast();
@@ -47,6 +55,7 @@ const departmentId = computed(() => parseIntOrZero(currentRoute?.params?.departm
 
 const PANEL_ITEMS = [
   { id: "flow", label: "Flow", icon: "fas fa-diagram-project" },
+  { id: "lanes", label: "Lanes", icon: "fas fa-road" },
   { id: "inspector", label: "Inspector", icon: "fas fa-sliders" },
   { id: "conditions", label: "Conditions", icon: "fas fa-code-branch" },
   { id: "tasks", label: "Tasks", icon: "fas fa-list-check" },
@@ -56,14 +65,54 @@ const PANEL_ITEMS = [
   { id: "audit", label: "Audit", icon: "fas fa-clipboard-check" },
   { id: "importExport", label: "Import/Export", icon: "fas fa-file-arrow-down" },
 ];
+const PANEL_IDS = new Set(PANEL_ITEMS.map((panel) => panel.id));
+const LEGACY_ROUTE_PANELS = [
+  { suffix: "/modules/self-serve/tasks", panel: "tasks" },
+  { suffix: "/modules/self-serve/conditions", panel: "conditions" },
+  { suffix: "/modules/self-serve/condition-rules", panel: "conditions" },
+  { suffix: "/modules/self-serve/vehicle-conditions", panel: "conditions" },
+  { suffix: "/modules/self-serve/machine-types", panel: "conditions" },
+];
+const panelFromPath = (path) => {
+  const normalizedPath = String(path || "").split("?")[0].replace(/\/+$/, "");
+  return LEGACY_ROUTE_PANELS.find((route) => normalizedPath.endsWith(route.suffix))?.panel || "";
+};
+const panelFromRoute = () => {
+  const routePanel = String(currentRoute?.query?.tab || "");
+  if (PANEL_IDS.has(routePanel)) {
+    return routePanel;
+  }
+  const routePathPanel = panelFromPath(currentRoute?.path || currentRoute?.fullPath || "");
+  if (routePathPanel) {
+    return routePathPanel;
+  }
+  if (typeof window !== "undefined") {
+    const urlPanel = String(new URLSearchParams(window.location.search).get("tab") || "");
+    if (PANEL_IDS.has(urlPanel)) {
+      return urlPanel;
+    }
+    const locationPathPanel = panelFromPath(`${window.location.pathname}${window.location.search}`);
+    if (locationPathPanel) {
+      return locationPathPanel;
+    }
+  }
+  return "";
+};
 
 const NODE_TEMPLATES = [
   { kind: "question", label: "Question", icon: "fas fa-circle-question" },
   { kind: "condition", label: "Condition", icon: "fas fa-code-branch" },
-  { kind: "rule", label: "Rule", icon: "fas fa-gavel" },
   { kind: "task", label: "Task", icon: "fas fa-list-check" },
 ];
 
+const CONDITION_OPERATORS = [
+  { value: "IS_TRUE", label: "is true" },
+  { value: "IS_FALSE", label: "is false" },
+  { value: "IS_SET", label: "is answered" },
+  { value: "IS_TRUE_OR_NOT_SET", label: "is true or unanswered" },
+  { value: "IS_FALSE_OR_NOT_SET", label: "is false or unanswered" },
+];
+
 const STUDIO_NODE_TYPES = {
   runtime_checkpoint: "studio-runtime",
   lane: "studio-scope",
@@ -96,7 +145,6 @@ const AUTO_LAYOUT_NODE_SIZES = {
 const AUTO_LAYOUT_COLUMNS = [
   { id: "scope", kinds: ["lane", "machine_type", "vehicle_type"], top: 230 },
   { id: "conditions", kinds: ["condition"], top: 230 },
-  { id: "rules", kinds: ["rule"], top: 230 },
   { id: "questions", kinds: ["question"], top: 230 },
   { id: "tasks", kinds: ["task"], top: 230 },
   { id: "hardware", kinds: ["edge_gateway", "relay_binding", "relay"], top: 230 },
@@ -129,25 +177,42 @@ const lookups = ref({});
 const validation = ref({ valid: true, items: [], errors: [], warnings: [] });
 const gatewayWorkspace = ref({ gateways: [], relays: [], lanes: [], issues: [], actions: [] });
 const versions = ref([]);
-const activePanel = ref("flow");
+const activePanel = ref(panelFromRoute() || "flow");
 const selectedNodeId = ref(null);
 const inspectorForm = ref({});
 const simulatorForm = ref({
   lane_id: null,
   reg: "TEST123",
   customer_number: null,
-  vehicle_type_id: null,
   config_source: "draft",
   include_hardware: true,
+  hardware_mode: "studio",
 });
 const simulatorResult = ref(null);
 const simulatorAnswerOverrides = ref({});
 const simulatorShowJson = ref(false);
+const simulatorDynamicImageHidden = ref(false);
+const simulatorCustomerSearchQuery = ref("");
+const selectedSimulatorCustomer = ref(null);
+const showSimulatorCustomerResults = ref(false);
+const virtualHardwareForm = ref({
+  gateway_key: "virtual-main",
+  gateway_label: "Virtual Studio Gateway",
+  relay_id: "",
+  role: "MACHINE",
+  label: "",
+});
+const laneEditorMode = ref("edit");
+const selectedLaneManagementId = ref(null);
+const laneForm = ref({});
+const lanePreviewHidden = ref(false);
+const inspectorLanePreviewHidden = ref(false);
 const searchTerm = ref("");
 const filters = ref({
   lane_id: "",
   vehicle_type_id: "",
   machine_type_id: "",
+  dynamic_image_id: "",
 });
 const isLoading = ref(false);
 const isSaving = ref(false);
@@ -171,8 +236,9 @@ const graphStats = computed(() => {
 
 const permissions = computed(() => graphPayload.value?.permissions || {});
 const selectedNode = computed(() => flowNodes.value.find((node) => node.id === selectedNodeId.value) || null);
-const editableNodeKinds = ["question", "condition", "rule", "task"];
+const editableNodeKinds = ["question", "condition", "task", "lane"];
 const isSelectedEditable = computed(() => editableNodeKinds.includes(selectedNode.value?.data?.kind));
+const canDeleteSelected = computed(() => ["question", "condition", "task"].includes(selectedNode.value?.data?.kind));
 const simulatorDebug = computed(() => simulatorResult.value?.debug || null);
 const simulatorSummary = computed(() => simulatorDebug.value?.summary || null);
 const simulatorRecommendations = computed(() => Array.isArray(simulatorDebug.value?.recommendations) ? simulatorDebug.value.recommendations : []);
@@ -197,6 +263,24 @@ const simulatorConditions = computed(() => Array.isArray(simulatorDebug.value?.c
 const simulatorRules = computed(() => Array.isArray(simulatorDebug.value?.rules) ? simulatorDebug.value.rules : []);
 const simulatorTasks = computed(() => Array.isArray(simulatorDebug.value?.tasks) ? simulatorDebug.value.tasks : []);
 const simulatorHardware = computed(() => simulatorDebug.value?.hardware || null);
+const simulatorSignals = computed(() => {
+  if (Array.isArray(simulatorDebug.value?.signal_timeline)) {
+    return simulatorDebug.value.signal_timeline;
+  }
+  return Array.isArray(simulatorHardware.value?.signal_timeline) ? simulatorHardware.value.signal_timeline : [];
+});
+const taskButtonOptions = SELF_SERVE_TASK_BUTTON_OPTIONS;
+const virtualHardware = computed(() => gatewayWorkspace.value?.virtual || {});
+const hasVirtualHardware = computed(() => Boolean(virtualHardware.value?.has_virtual_hardware));
+const virtualHardwareConfig = computed(() => virtualHardware.value?.config || {});
+const virtualHardwareRoleOptions = ["ENTRY", "EXIT", "MACHINE", "PROGRAM_PICKER", "CLEANER"];
+const LANE_RELAY_FIELDS = [
+  { field: "relay_in_id", label: "Entry relay" },
+  { field: "relay_out_id", label: "Exit relay" },
+  { field: "relay_machine_id", label: "Machine relay" },
+  { field: "relay_machine_program_picker_id", label: "Program picker relay" },
+  { field: "relay_machine_cleaner_id", label: "Cleaner relay" },
+];
 
 const lookupRows = (type) => (Array.isArray(lookups.value?.[type]) ? lookups.value[type] : []);
 const labelFor = (type, id) => {
@@ -209,6 +293,334 @@ const labelFor = (type, id) => {
     || `${type.replaceAll("_", " ")} ${normalizedId}`;
 };
 
+const emptyLaneForm = () => ({
+  id: null,
+  name: "",
+  machine_type_id: null,
+  dynamic_image_id: null,
+  relay_in_id: "",
+  relay_out_id: "",
+  relay_machine_id: "",
+  relay_machine_program_picker_id: "",
+  relay_machine_cleaner_id: "",
+});
+
+laneForm.value = emptyLaneForm();
+
+const normalizeRelayFormValue = (value) => {
+  const normalized = String(value ?? "").trim();
+  return normalized === "0" || normalized.toLowerCase() === "null" ? "" : normalized;
+};
+
+const normalizeRelayPayloadValue = (value) => {
+  const normalized = normalizeRelayFormValue(value);
+  return normalized === "" ? null : normalized;
+};
+
+const normalizeLaneForm = (lane = null) => {
+  const raw = lane?.raw || lane || {};
+  const form = {
+    ...emptyLaneForm(),
+    id: parseNullableInt(raw.id ?? lane?.id),
+    name: String(raw.name || raw.label || lane?.label || "").trim(),
+    machine_type_id: parseNullableInt(raw.machine_type_id),
+    dynamic_image_id: parseNullableInt(raw.dynamic_image_id),
+  };
+
+  for (const { field } of LANE_RELAY_FIELDS) {
+    form[field] = normalizeRelayFormValue(raw[field]);
+  }
+
+  return form;
+};
+
+const laneRowById = (laneId) => {
+  const normalizedLaneId = String(laneId ?? "");
+  if (!normalizedLaneId) {
+    return null;
+  }
+  return lookupRows("lanes").find((lane) => String(lane.id) === normalizedLaneId) || null;
+};
+
+const selectedLaneManagementRow = computed(() => laneRowById(selectedLaneManagementId.value));
+
+const hydrateLaneForm = (lane = null) => {
+  laneForm.value = normalizeLaneForm(lane);
+  lanePreviewHidden.value = false;
+};
+
+const syncLaneManagementSelection = () => {
+  if (laneEditorMode.value === "create") {
+    return;
+  }
+
+  const lanes = lookupRows("lanes");
+  const currentLane = laneRowById(selectedLaneManagementId.value)
+    || laneRowById(filters.value.lane_id)
+    || lanes[0]
+    || null;
+
+  selectedLaneManagementId.value = currentLane?.id || null;
+  hydrateLaneForm(currentLane);
+};
+
+const selectLaneForManagement = (laneId) => {
+  const selectedLane = laneRowById(laneId);
+  if (!selectedLane) {
+    return;
+  }
+
+  laneEditorMode.value = "edit";
+  selectedLaneManagementId.value = selectedLane.id;
+  hydrateLaneForm(selectedLane);
+  selectedNodeId.value = `lane:${selectedLane.id}`;
+};
+
+const startCreateLane = () => {
+  laneEditorMode.value = "create";
+  selectedLaneManagementId.value = null;
+  selectedNodeId.value = null;
+  laneForm.value = {
+    ...emptyLaneForm(),
+    name: `Lane ${lookupRows("lanes").length + 1}`,
+  };
+  lanePreviewHidden.value = false;
+};
+
+const laneFormPayload = (form) => {
+  const payload = {
+    name: String(form?.name || "").trim(),
+    machine_type_id: parseNullableInt(form?.machine_type_id),
+    dynamic_image_id: parseNullableInt(form?.dynamic_image_id),
+  };
+
+  for (const { field } of LANE_RELAY_FIELDS) {
+    payload[field] = normalizeRelayPayloadValue(form?.[field]);
+  }
+
+  return payload;
+};
+
+const buildLaneDynamicImagePreviewUrl = (laneId, dynamicImageId) => {
+  const normalizedLaneId = parseNullableInt(laneId);
+  const normalizedDynamicImageId = parseNullableInt(dynamicImageId);
+  if (!departmentId.value || !normalizedLaneId || !normalizedDynamicImageId) {
+    return null;
+  }
+
+  const params = new URLSearchParams({
+    department: String(departmentId.value),
+    lane: String(normalizedLaneId),
+    dynamic_image_id: String(normalizedDynamicImageId),
+    current_step: "0",
+  });
+
+  return `${API_URL}/department/lanes/dynamic-image?${params.toString()}`;
+};
+
+const laneManagementDynamicImagePreviewUrl = computed(() => (
+  laneEditorMode.value === "edit"
+    ? buildLaneDynamicImagePreviewUrl(laneForm.value.id || selectedLaneManagementId.value, laneForm.value.dynamic_image_id)
+    : null
+));
+
+const inspectorLaneDynamicImagePreviewUrl = computed(() => (
+  selectedNode.value?.data?.kind === "lane"
+    ? buildLaneDynamicImagePreviewUrl(inspectorForm.value.id || selectedNode.value?.data?.object_id, inspectorForm.value.dynamic_image_id)
+    : null
+));
+
+const displayedLaneManagementDynamicImagePreviewUrl = computed(() => (
+  lanePreviewHidden.value ? null : laneManagementDynamicImagePreviewUrl.value
+));
+
+const displayedInspectorLaneDynamicImagePreviewUrl = computed(() => (
+  inspectorLanePreviewHidden.value ? null : inspectorLaneDynamicImagePreviewUrl.value
+));
+
+const onLaneManagementDynamicImageError = () => {
+  lanePreviewHidden.value = true;
+};
+
+const onInspectorLaneDynamicImageError = () => {
+  inspectorLanePreviewHidden.value = true;
+};
+
+const firstPositiveInt = (...values) => {
+  for (const value of values) {
+    const parsed = parseNullableInt(value);
+    if (parsed !== null && parsed > 0) {
+      return parsed;
+    }
+  }
+  return null;
+};
+
+const vehicleTypeMatchesFilter = (vehicleType, selectedValue) => {
+  const normalizedSelectedValue = String(selectedValue ?? "").trim();
+  if (!normalizedSelectedValue) {
+    return false;
+  }
+
+  return [
+    vehicleType?.product,
+    vehicleType?.product_id,
+    vehicleType?.id,
+  ].some((candidate) => String(candidate ?? "").trim() === normalizedSelectedValue);
+};
+
+const selectedSimulatorLaneId = computed(() => firstPositiveInt(
+  filters.value.lane_id,
+  simulatorForm.value.lane_id,
+  lookupRows("lanes")[0]?.id
+));
+const selectedSimulatorVehicleTypeRow = computed(() => {
+  const selectedValue = String(filters.value.vehicle_type_id ?? "").trim();
+  if (!selectedValue) {
+    return null;
+  }
+
+  return lookupRows("vehicle_types").find((vehicleType) => vehicleTypeMatchesFilter(vehicleType, selectedValue)) || null;
+});
+const selectedSimulatorVehicleTypeId = computed(() => (
+  selectedSimulatorVehicleTypeRow.value
+    ? parseNullableInt(selectedSimulatorVehicleTypeRow.value.id)
+    : null
+));
+const simulatorScopeSummary = computed(() => ({
+  lane: selectedSimulatorLaneId.value
+    ? labelFor("lanes", selectedSimulatorLaneId.value)
+    : "Select lane",
+  vehicleType: selectedSimulatorVehicleTypeRow.value?.label
+    || (selectedSimulatorVehicleTypeId.value ? labelFor("vehicle_types", selectedSimulatorVehicleTypeId.value) : "Auto"),
+}));
+
+const normalizePositiveInteger = (value) => {
+  const parsed = Number.parseInt(String(value ?? ""), 10);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+};
+
+const normalizeSimulatorCustomer = (customer) => {
+  const customerNumber = normalizePositiveInteger(customer?.customerNumber ?? customer?.customer_number);
+  if (!customerNumber) {
+    return null;
+  }
+
+  return {
+    customerNumber,
+    name: customer?.name || customer?.customer_name || `#${customerNumber}`,
+    city: customer?.city || "",
+    address: customer?.address || "",
+  };
+};
+
+const buildSimulatorCustomerLabel = (customer) => {
+  if (!customer) {
+    return "";
+  }
+
+  return `${customer.name} (${customer.customerNumber})`;
+};
+
+const applySimulatorCustomerNumber = (customerNumber) => {
+  const normalizedCustomerNumber = normalizePositiveInteger(customerNumber);
+  simulatorForm.value.customer_number = normalizedCustomerNumber;
+  selectedSimulatorCustomer.value = normalizedCustomerNumber
+    ? { customerNumber: normalizedCustomerNumber, name: `#${normalizedCustomerNumber}`, city: "", address: "" }
+    : null;
+  simulatorCustomerSearchQuery.value = normalizedCustomerNumber ? `#${normalizedCustomerNumber}` : "";
+  showSimulatorCustomerResults.value = false;
+  searchCustomer(null);
+};
+
+const clearSimulatorCustomer = () => {
+  simulatorForm.value.customer_number = null;
+  selectedSimulatorCustomer.value = null;
+  simulatorCustomerSearchQuery.value = "";
+  showSimulatorCustomerResults.value = false;
+  searchCustomer(null);
+};
+
+const onSimulatorCustomerSearchInput = async () => {
+  const query = simulatorCustomerSearchQuery.value.trim();
+  const selectedCustomerLabel = buildSimulatorCustomerLabel(selectedSimulatorCustomer.value);
+
+  if (selectedSimulatorCustomer.value && query !== selectedCustomerLabel) {
+    selectedSimulatorCustomer.value = null;
+  }
+
+  simulatorForm.value.customer_number = normalizePositiveInteger(query);
+
+  if (!query) {
+    searchCustomer(null);
+    showSimulatorCustomerResults.value = false;
+    return;
+  }
+
+  showSimulatorCustomerResults.value = true;
+  await searchCustomer(query);
+};
+
+const selectSimulatorCustomer = (customer) => {
+  const normalizedCustomer = normalizeSimulatorCustomer(customer);
+  if (!normalizedCustomer) {
+    return;
+  }
+
+  selectedSimulatorCustomer.value = normalizedCustomer;
+  simulatorForm.value.customer_number = normalizedCustomer.customerNumber;
+  simulatorCustomerSearchQuery.value = buildSimulatorCustomerLabel(normalizedCustomer);
+  showSimulatorCustomerResults.value = false;
+  searchCustomer(null);
+};
+
+const hideSimulatorCustomerResults = () => {
+  window.setTimeout(() => {
+    showSimulatorCustomerResults.value = false;
+  }, 200);
+};
+
+const resolvedSimulatorVehicleTypeId = computed(() => firstPositiveInt(
+  simulatorDebug.value?.parameters?.vehicle_type_id,
+  simulatorResult.value?.vehicle_type_id,
+  simulatorResult.value?.session?.vehicle_type_id,
+  simulatorResult.value?.vehicle?.vehicle_type_id,
+  simulatorResult.value?.vehicle?.type_id,
+  simulatorResult.value?.vehicle?.type?.id,
+  simulatorResult.value?.vehicle?.type
+));
+
+const simulatorAutoVehicleTypeDecision = computed(() => {
+  if (!simulatorResult.value || selectedSimulatorVehicleTypeId.value !== null) {
+    return null;
+  }
+
+  const resolvedId = resolvedSimulatorVehicleTypeId.value;
+  const responseLabel = String(
+    simulatorDebug.value?.parameters?.vehicle_type
+    || simulatorResult.value?.vehicle_type
+    || simulatorResult.value?.vehicle?.label
+    || simulatorResult.value?.vehicle?.name
+    || ""
+  ).trim();
+  const hasResolvedLabel = responseLabel !== "" && responseLabel.toLowerCase() !== "auto";
+  const resolvedLabel = hasResolvedLabel
+    ? responseLabel
+    : (resolvedId !== null ? labelFor("vehicle_types", resolvedId) : "");
+
+  if (resolvedLabel) {
+    return {
+      tone: "ok",
+      text: `Auto decided: ${resolvedLabel}${resolvedId !== null ? ` (#${resolvedId})` : ""}.`,
+    };
+  }
+
+  return {
+    tone: "warning",
+    text: "Auto could not decide a vehicle type.",
+  };
+});
+
 const valueText = (value, fallback = "None") => {
   if (value === null || value === undefined || value === "" || value === 0 || value === "0") {
     return fallback;
@@ -270,6 +682,134 @@ const taskGateLabel = (data) => {
   return "Always";
 };
 
+const emptyConditionExpression = () => ({ type: "group", operator: "ALL", children: [] });
+
+const normalizeConditionExpression = (expression) => {
+  if (!expression || typeof expression !== "object") {
+    return emptyConditionExpression();
+  }
+  const type = String(expression.type || expression.kind || "group").toLowerCase();
+  if (type === "predicate") {
+    const subjectType = ["question", "condition"].includes(String(expression.subject_type || expression.object_type).toLowerCase())
+      ? String(expression.subject_type || expression.object_type).toLowerCase()
+      : "question";
+    const operator = CONDITION_OPERATORS.some((option) => option.value === String(expression.operator || expression.rule_type).toUpperCase())
+      ? String(expression.operator || expression.rule_type).toUpperCase()
+      : "IS_TRUE";
+    return {
+      type: "predicate",
+      subject_type: subjectType,
+      subject_id: parseIntOrZero(expression.subject_id ?? expression.object_id),
+      operator,
+    };
+  }
+  const operator = ["ALL", "ANY"].includes(String(expression.operator || expression.mode).toUpperCase())
+    ? String(expression.operator || expression.mode).toUpperCase()
+    : "ALL";
+  return {
+    type: "group",
+    operator,
+    children: Array.isArray(expression.children)
+      ? expression.children.map(normalizeConditionExpression)
+      : [],
+  };
+};
+
+const expressionSubjectOptions = (subjectType, ownerConditionId = null) => {
+  if (subjectType === "condition") {
+    return lookupRows("conditions")
+      .filter((condition) => parseIntOrZero(condition.id) !== parseIntOrZero(ownerConditionId))
+      .map((condition) => ({ id: condition.id, label: condition.label }));
+  }
+  return lookupRows("questions").map((question) => ({ id: question.id, label: question.label }));
+};
+
+const conditionExpressionSummary = (expression) => {
+  const normalized = normalizeConditionExpression(expression);
+  if (normalized.type === "predicate") {
+    const lookupType = normalized.subject_type === "condition" ? "conditions" : "questions";
+    const operatorLabel = CONDITION_OPERATORS.find((option) => option.value === normalized.operator)?.label || normalized.operator;
+    return `${labelFor(lookupType, normalized.subject_id)} ${operatorLabel}`;
+  }
+  if (!normalized.children.length) {
+    return "No predicates";
+  }
+  const parts = normalized.children.slice(0, 3).map(conditionExpressionSummary);
+  if (normalized.children.length > 3) {
+    parts.push(`+${normalized.children.length - 3} more`);
+  }
+  return `${normalized.operator === "ANY" ? "Any" : "All"}: ${parts.join("; ")}`;
+};
+
+const selectedConditionId = computed(() => parseIntOrZero(selectedNode.value?.data?.object_id || selectedRaw.value?.id));
+
+const ensureInspectorExpression = () => {
+  inspectorForm.value.expression = normalizeConditionExpression(inspectorForm.value.expression);
+  if (inspectorForm.value.expression.type === "predicate") {
+    inspectorForm.value.expression = {
+      type: "group",
+      operator: "ALL",
+      children: [inspectorForm.value.expression],
+    };
+  }
+  return inspectorForm.value.expression;
+};
+
+const conditionExpressionChildren = computed(() => (
+  selectedNode.value?.data?.kind === "condition"
+    && inspectorForm.value?.expression?.type === "group"
+    && Array.isArray(inspectorForm.value.expression.children)
+    ? inspectorForm.value.expression.children
+    : []
+));
+
+const addConditionPredicate = () => {
+  const expression = ensureInspectorExpression();
+  const question = expressionSubjectOptions("question")[0];
+  const condition = expressionSubjectOptions("condition", selectedConditionId.value)[0];
+  const subjectType = question ? "question" : "condition";
+  expression.children.push({
+    type: "predicate",
+    subject_type: subjectType,
+    subject_id: parseIntOrZero((subjectType === "question" ? question : condition)?.id),
+    operator: "IS_TRUE",
+  });
+};
+
+const removeConditionExpressionChild = (index) => {
+  const expression = ensureInspectorExpression();
+  expression.children.splice(index, 1);
+};
+
+const syncPredicateSubject = (predicate) => {
+  const options = expressionSubjectOptions(predicate.subject_type, selectedConditionId.value);
+  if (!options.some((option) => String(option.id) === String(predicate.subject_id))) {
+    predicate.subject_id = parseIntOrZero(options[0]?.id);
+  }
+};
+
+const conditionUsageCount = (conditionId) => {
+  const nodeId = `condition:${conditionId}`;
+  return flowEdges.value.filter((edge) => (
+    edge.source === nodeId
+    && ["visibility_gate", "task_gate", "condition_expression"].includes(edge?.data?.kind)
+  )).length;
+};
+
+const conditionValidationMessages = (conditionId) => validationItems.value
+  .filter((item) => String(item.message || "").includes(`Condition ${conditionId}`));
+
+const conditionCardState = (conditionId) => {
+  const messages = conditionValidationMessages(conditionId);
+  if (messages.some((item) => item.severity === "error")) {
+    return "error";
+  }
+  if (messages.some((item) => item.severity === "warning")) {
+    return "warning";
+  }
+  return "valid";
+};
+
 const listCount = (value) => (Array.isArray(value) ? value.length : 0);
 
 const normalizeListValue = (value) => {
@@ -307,12 +847,7 @@ const normalizeServiceList = (value) => {
   return Array.from(services);
 };
 
-const normalizeButtonList = (value) => normalizeListValue(value).map((entry) => {
-  const asNumber = Number(entry);
-  return String(entry).trim() !== "" && Number.isFinite(asNumber) ? asNumber : entry;
-});
-
-const listInputValue = (value) => normalizeListValue(value).join(", ");
+const normalizeButtonList = (value) => normalizeSelfServeTaskButtons(value);
 
 const taskServiceList = (dataOrRaw) => {
   const raw = dataOrRaw?.raw ? rawFor(dataOrRaw) : (dataOrRaw || {});
@@ -340,7 +875,7 @@ const bindingNodeId = (gatewayId, relayId, bindingIndex) => `binding:${gatewayId
 
 const statusTone = (status) => {
   const normalized = String(status || "").toUpperCase();
-  if (["ONLINE", "CONNECTED", "READY", "OK", "HEALTHY"].includes(normalized)) {
+  if (["ONLINE", "CONNECTED", "READY", "OK", "HEALTHY", "VIRTUAL"].includes(normalized)) {
     return "is-success";
   }
   if (["PENDING", "UPDATING", "INSTALLING", "DISCOVERING"].includes(normalized)) {
@@ -508,7 +1043,8 @@ const hasActiveCanvasFilters = computed(() => Boolean(
   searchTerm.value.trim()
   || normalizeFilterValue(filters.value.lane_id)
   || normalizeFilterValue(filters.value.vehicle_type_id)
-  || normalizeFilterValue(filters.value.machine_type_id),
+  || normalizeFilterValue(filters.value.machine_type_id)
+  || normalizeFilterValue(filters.value.dynamic_image_id),
 ));
 
 const stripCanvasNodePresentation = (node) => {
@@ -628,9 +1164,9 @@ const toggleStudioFullscreen = async () => {
 };
 
 const filteredListNodes = computed(() => flowNodes.value.filter(matchesNodeFilters));
-const conditionNodes = computed(() => flowNodes.value.filter((node) => node.data?.kind === "condition"));
-const ruleNodes = computed(() => flowNodes.value.filter((node) => node.data?.kind === "rule"));
-const taskNodes = computed(() => flowNodes.value.filter((node) => node.data?.kind === "task"));
+const conditionNodes = computed(() => filteredListNodes.value.filter((node) => node.data?.kind === "condition"));
+const ruleNodes = computed(() => filteredListNodes.value.filter((node) => node.data?.kind === "rule"));
+const taskNodes = computed(() => filteredListNodes.value.filter((node) => node.data?.kind === "task"));
 const gatewayNodes = computed(() => flowNodes.value.filter((node) => node.data?.kind === "edge_gateway"));
 const bindingNodes = computed(() => flowNodes.value.filter((node) => node.data?.kind === "relay_binding"));
 
@@ -653,6 +1189,7 @@ const gatewayBindingEntries = computed(() => {
         binding,
         label: binding.label || binding.name || relayId,
         services,
+        virtual: Boolean(gateway.virtual || binding.virtual),
       });
     }
   }
@@ -671,6 +1208,7 @@ const gatewayBindingEntries = computed(() => {
       binding: raw,
       label: node.data?.label || raw.label || raw.relay_id || node.id,
       services: bindingServiceList(node.data),
+      virtual: Boolean(raw.virtual),
     });
   }
 
@@ -715,6 +1253,94 @@ const taskServiceLabel = (data) => {
   return services.length > 0 ? services.join(", ") : "No services";
 };
 
+const taskButtonSummary = (buttons, emptyLabel = "No dynamic image buttons") => (
+  formatSelfServeTaskButtons(buttons, emptyLabel)
+);
+
+const taskButtonCount = (buttons) => normalizeButtonList(buttons).length;
+
+const taskButtonIsSelected = (buttons, buttonId) => (
+  normalizeButtonList(buttons).includes(buttonId)
+);
+
+const parseDynamicImageThumbPosition = (value) => {
+  const parsed = parseNullableInt(value);
+  return parsed !== null && parsed >= 1 && parsed <= 12 ? parsed : null;
+};
+
+const simulatorPreviewTasks = computed(() => {
+  if (Array.isArray(simulatorResult.value?.tasks) && simulatorResult.value.tasks.length > 0) {
+    return simulatorResult.value.tasks;
+  }
+
+  return simulatorTasks.value.filter((task) => task.active);
+});
+
+const simulatorDynamicImageButtons = computed(() => {
+  const buttons = new Map();
+  for (const task of simulatorPreviewTasks.value) {
+    for (const button of normalizeButtonList(task?.buttons)) {
+      buttons.set(`${typeof button}:${button}`, button);
+    }
+  }
+  return Array.from(buttons.values());
+});
+
+const simulatorDynamicImageThumbPosition = computed(() => {
+  for (const task of simulatorPreviewTasks.value) {
+    const thumbPosition = parseDynamicImageThumbPosition(task?.dynamic_images_vehicle_type);
+    if (thumbPosition !== null) {
+      return thumbPosition;
+    }
+  }
+  return null;
+});
+
+const hasSimulatorDynamicImageContext = computed(() => (
+  simulatorDynamicImageButtons.value.length > 0 || simulatorDynamicImageThumbPosition.value !== null
+));
+
+const simulatorDynamicImageUrl = computed(() => {
+  if (!simulatorResult.value || !hasSimulatorDynamicImageContext.value) {
+    return null;
+  }
+
+  const laneId = parseIntOrZero(
+    selectedSimulatorLaneId.value
+    || simulatorResult.value?.lane?.id
+    || simulatorDebug.value?.parameters?.lane_id
+  );
+  if (!departmentId.value || laneId <= 0) {
+    return null;
+  }
+
+  const params = new URLSearchParams({
+    department: String(departmentId.value),
+    lane: String(laneId),
+    current_step: "0",
+    buttons: JSON.stringify(simulatorDynamicImageButtons.value),
+  });
+
+  const vehicleTypeId = parseNullableInt(
+    selectedSimulatorVehicleTypeId.value
+    ?? simulatorResult.value?.vehicle?.type
+    ?? simulatorDebug.value?.parameters?.vehicle_type_id
+  );
+  if (vehicleTypeId !== null && vehicleTypeId > 0) {
+    params.set("vehicle_type", String(vehicleTypeId));
+  }
+
+  if (simulatorDynamicImageThumbPosition.value !== null) {
+    params.set("thumb_position", String(simulatorDynamicImageThumbPosition.value));
+  }
+
+  return `${API_URL}/department/lanes/dynamic-image?${params.toString()}`;
+});
+
+const displayedSimulatorDynamicImageUrl = computed(() => (
+  simulatorDynamicImageHidden.value ? null : simulatorDynamicImageUrl.value
+));
+
 const bindingServiceLabel = (data) => {
   const services = bindingServiceList(data);
   return services.length > 0 ? services.join(", ") : "Unassigned";
@@ -725,7 +1351,7 @@ const serviceOptionSummary = (option) => {
   if (bindings.length === 0) {
     return "No relay binding assigned";
   }
-  const labels = bindings.slice(0, 2).map((binding) => `${binding.label} on ${binding.gatewayLabel}`);
+  const labels = bindings.slice(0, 2).map((binding) => `${binding.label} on ${binding.gatewayLabel}${binding.virtual ? " (virtual)" : ""}`);
   const suffix = bindings.length > 2 ? ` +${bindings.length - 2} more` : "";
   return `${labels.join(", ")}${suffix}`;
 };
@@ -735,15 +1361,40 @@ const taskServiceCoverage = computed(() => taskServiceOptions.value.map((option)
   tasks: taskNodes.value.filter((node) => taskServiceList(node.data).includes(option.service)),
 })));
 
+const virtualRelaySlotOptions = computed(() => {
+  const options = [];
+  for (const lane of gatewayWorkspace.value?.lanes || []) {
+    for (const slot of lane?.relay_slots || []) {
+      const relayId = String(slot?.relay_id || "");
+      const role = normalizeServiceName(slot?.slot || slot?.role || "");
+      if (!relayId || !role) {
+        continue;
+      }
+      options.push({
+        id: `${relayId}|${role}|${lane?.id || ""}`,
+        relay_id: relayId,
+        role,
+        lane_id: lane?.id || null,
+        label: `${lane?.name || lane?.label || `Lane ${lane?.id || ""}`} / ${role} / ${relayId}`,
+      });
+    }
+  }
+  return options;
+});
+
+const virtualBindingEntries = computed(() => gatewayBindingEntries.value.filter((entry) => entry.virtual));
+
 const validationItems = computed(() => {
   const items = Array.isArray(validation.value?.items) ? validation.value.items : [];
-  if (items.length > 0) {
-    return items;
-  }
-  return [
+  const sourceItems = items.length > 0 ? items : [
     ...(validation.value?.errors || []).map((message) => ({ severity: "error", message })),
     ...(validation.value?.warnings || []).map((message) => ({ severity: "warning", message })),
   ];
+  return sourceItems.map((item, index) => ({
+    ...item,
+    key: `${item?.severity || "info"}:${item?.message || index}:${index}`,
+    target_node_ids: resolveAuditIssueNodeIds(item, flowNodes.value),
+  }));
 });
 
 const selectedRaw = computed(() => selectedNode.value?.data?.raw || {});
@@ -770,6 +1421,9 @@ const edgeStyle = (kind) => {
   if (kind === "task_gate" || kind === "visibility_gate") {
     return { stroke: "#0f766e", strokeWidth: 2 };
   }
+  if (kind === "condition_expression") {
+    return { stroke: "#0f766e", strokeWidth: 2, strokeDasharray: "6 4" };
+  }
   if (kind === "gateway_binding" || kind === "relay_binding" || kind === "lane_relay") {
     return { stroke: "#7c3aed", strokeWidth: 2 };
   }
@@ -792,12 +1446,14 @@ const hydrateFromGraph = (payload) => {
     lane_id: payload?.simulator_defaults?.lane_id || lookupRows("lanes")[0]?.id || null,
     reg: payload?.simulator_defaults?.reg || "TEST123",
     customer_number: payload?.simulator_defaults?.customer_number || null,
-    vehicle_type_id: payload?.simulator_defaults?.vehicle_type_id || null,
     config_source: simulatorForm.value?.config_source || "draft",
     include_hardware: simulatorForm.value?.include_hardware !== false,
+    hardware_mode: simulatorForm.value?.hardware_mode || payload?.simulator_defaults?.hardware_mode || (payload?.gateway_workspace?.virtual?.has_virtual_hardware ? "studio" : "real"),
   };
+  applySimulatorCustomerNumber(simulatorForm.value.customer_number);
   simulatorResult.value = null;
   simulatorAnswerOverrides.value = {};
+  syncLaneManagementSelection();
 
   suppressLayoutSave.value = true;
   unfilteredNodePositions.value = null;
@@ -840,13 +1496,49 @@ const saveGraphOperations = async (operations, extraPayload = {}) => {
     });
     hydrateFromGraph(payload);
     toast.success("Studio saved.");
+    return payload;
   } catch (error) {
     withErrorToast(error, "Failed to save studio changes.");
+    return null;
   } finally {
     isSaving.value = false;
   }
 };
 
+const saveLane = async () => {
+  const payload = laneFormPayload(laneForm.value);
+  if (!payload.name) {
+    toast.error("Lane name is required.");
+    return;
+  }
+
+  const laneId = parseNullableInt(laneForm.value.id || selectedLaneManagementId.value);
+  const isCreate = laneEditorMode.value === "create" || !laneId;
+  const operation = {
+    action: isCreate ? "create" : "update",
+    entity: "lane",
+    data: payload,
+  };
+
+  if (!isCreate) {
+    operation.id = laneId;
+  }
+
+  const graph = await saveGraphOperations([operation]);
+  if (!graph) {
+    return;
+  }
+  const lanes = Array.isArray(graph?.lookups?.lanes) ? graph.lookups.lanes : lookupRows("lanes");
+  const nextLane = isCreate
+    ? [...lanes].sort((left, right) => parseIntOrZero(right.id) - parseIntOrZero(left.id))[0]
+    : lanes.find((lane) => String(lane.id) === String(laneId));
+
+  if (nextLane) {
+    laneEditorMode.value = "edit";
+    selectLaneForManagement(nextLane.id);
+  }
+};
+
 const saveLayout = async () => {
   if (!departmentId.value || suppressLayoutSave.value || hasActiveCanvasFilters.value) {
     return;
@@ -886,14 +1578,7 @@ const createNode = async (kind) => {
       lane: parseNullableInt(filters.value.lane_id) || 0,
       product: parseNullableInt(filters.value.vehicle_type_id) || 0,
       machine_type_id: parseNullableInt(filters.value.machine_type_id),
-    },
-    rule: {
-      condition_id: conditionNodes.value[0]?.data?.object_id || conditionNodes.value[0]?.data?.raw?.id || 0,
-      type: "IS_TRUE",
-      object_type: "question",
-      object_id: flowNodes.value.find((node) => node.data?.kind === "question")?.data?.object_id || 0,
-      name: "New rule",
-      description: "",
+      expression: emptyConditionExpression(),
     },
     task: {
       task: "New task",
@@ -945,11 +1630,38 @@ const selectNode = (nodeId) => {
   activePanel.value = "inspector";
 };
 
-const focusDebugNodes = async (nodeIds = [], openInspector = false) => {
+const clearCanvasFilters = () => {
+  if (!hasActiveCanvasFilters.value) {
+    return false;
+  }
+  searchTerm.value = "";
+  filters.value = {
+    lane_id: "",
+    vehicle_type_id: "",
+    machine_type_id: "",
+    dynamic_image_id: "",
+  };
+  return true;
+};
+
+const waitForCanvasFilterReset = () => new Promise((resolve) => {
+  if (typeof window === "undefined") {
+    resolve();
+    return;
+  }
+  window.setTimeout(resolve, 140);
+});
+
+const focusDebugNodes = async (nodeIds = [], openInspector = false, options = {}) => {
   const ids = [...new Set((Array.isArray(nodeIds) ? nodeIds : []).filter(Boolean))];
   if (ids.length === 0) {
     return;
   }
+  const clearedFilters = options.clearFilters === true && clearCanvasFilters();
+  if (clearedFilters) {
+    await nextTick();
+    await waitForCanvasFilterReset();
+  }
   selectedNodeId.value = ids[0];
   if (openInspector) {
     activePanel.value = "inspector";
@@ -965,12 +1677,26 @@ const focusDebugNodes = async (nodeIds = [], openInspector = false) => {
   }).catch(() => {});
 };
 
+const selectValidationItem = async (item) => {
+  const targetNodeIds = Array.isArray(item?.target_node_ids)
+    ? item.target_node_ids
+    : resolveAuditIssueNodeIds(item, flowNodes.value);
+  await focusDebugNodes(targetNodeIds, true, { clearFilters: true });
+};
+
 const refreshInspectorForm = () => {
   const raw = selectedRaw.value || {};
   inspectorForm.value = JSON.parse(JSON.stringify(raw));
-  if (selectedNode.value?.data?.kind === "rule") {
-    inspectorForm.value.type ||= "IS_TRUE";
-    inspectorForm.value.object_type ||= "question";
+  if (selectedNode.value?.data?.kind === "lane") {
+    inspectorForm.value = normalizeLaneForm(raw);
+    inspectorLanePreviewHidden.value = false;
+    selectedLaneManagementId.value = inspectorForm.value.id || selectedLaneManagementId.value;
+  }
+  if (selectedNode.value?.data?.kind === "condition") {
+    const expression = normalizeConditionExpression(inspectorForm.value.expression);
+    inspectorForm.value.expression = expression.type === "predicate"
+      ? { type: "group", operator: "ALL", children: [expression] }
+      : expression;
   }
   if (selectedNode.value?.data?.kind === "task") {
     inspectorForm.value.gate_type ||= "ALWAYS";
@@ -986,6 +1712,12 @@ const saveInspector = async () => {
   const entity = selectedNode.value.data.kind;
   const id = selectedNode.value.data.object_id || selectedRaw.value.id;
   const data = JSON.parse(JSON.stringify(inspectorForm.value));
+  if (entity === "condition") {
+    data.expression = normalizeConditionExpression(data.expression);
+  }
+  if (entity === "lane") {
+    Object.assign(data, laneFormPayload(data));
+  }
   if (entity === "task") {
     data.services = normalizeServiceList(data.services);
     data.buttons = normalizeButtonList(data.buttons);
@@ -999,7 +1731,7 @@ const saveInspector = async () => {
 };
 
 const deleteSelected = async () => {
-  if (!selectedNode.value || !isSelectedEditable.value) {
+  if (!selectedNode.value || !canDeleteSelected.value) {
     return;
   }
   const entity = selectedNode.value.data.kind;
@@ -1020,8 +1752,13 @@ const validateGraph = async () => {
 
 const publishDraft = async () => {
   try {
-    await requestPost("/department/selfserve/studio/publish", { department: departmentId.value });
-    toast.success("Draft published.");
+    const published = await requestPost("/department/selfserve/studio/publish", { department: departmentId.value });
+    const warnings = Array.isArray(published?.warnings) ? published.warnings : [];
+    if (warnings.length > 0) {
+      toast.warning(`Draft published with ${warnings.length} warning(s).`);
+    } else {
+      toast.success("Draft published.");
+    }
     await loadStudioGraph();
   } catch (error) {
     withErrorToast(error, "Publish failed.");
@@ -1056,19 +1793,85 @@ const runGatewayAction = async (gatewayId, action, confirm = false) => {
   }
 };
 
+const applyVirtualHardwareOperation = async (operation, data = {}) => {
+  try {
+    const payload = await requestPut("/department/selfserve/studio/virtual-hardware", {
+      department: departmentId.value,
+      operation,
+      data,
+    });
+    hydrateFromGraph(payload);
+    toast.success("Virtual hardware updated.");
+  } catch (error) {
+    withErrorToast(error, "Virtual hardware update failed.");
+  }
+};
+
+const generateVirtualHardwareFromLanes = () => applyVirtualHardwareOperation("generate_from_lanes");
+
+const upsertVirtualGateway = () => applyVirtualHardwareOperation("upsert_gateway", {
+  key: virtualHardwareForm.value.gateway_key || "virtual-main",
+  label: virtualHardwareForm.value.gateway_label || "Virtual Studio Gateway",
+  status: "VIRTUAL",
+});
+
+const upsertVirtualBinding = () => {
+  const relayId = String(virtualHardwareForm.value.relay_id || "").trim();
+  if (!relayId) {
+    toast.error("Relay ID is required for a virtual binding.");
+    return;
+  }
+  return applyVirtualHardwareOperation("upsert_binding", {
+    gateway_key: virtualHardwareForm.value.gateway_key || "virtual-main",
+    relay_id: relayId,
+    role: virtualHardwareForm.value.role || "MACHINE",
+    services: [virtualHardwareForm.value.role || "MACHINE"],
+    label: virtualHardwareForm.value.label || `${virtualHardwareForm.value.role || "MACHINE"} ${relayId}`,
+  });
+};
+
+const deleteVirtualBinding = (entry) => applyVirtualHardwareOperation("delete_binding", {
+  id: entry?.binding?.id,
+  gateway_key: entry?.binding?.gateway_key || entry?.gatewayId || "virtual-main",
+  relay_id: entry?.relayId,
+  role: entry?.binding?.role,
+});
+
+const resetVirtualHardware = () => applyVirtualHardwareOperation("reset");
+
+const useVirtualRelaySlot = (slotId) => {
+  const slot = virtualRelaySlotOptions.value.find((entry) => entry.id === slotId);
+  if (!slot) {
+    return;
+  }
+  virtualHardwareForm.value = {
+    ...virtualHardwareForm.value,
+    relay_id: slot.relay_id,
+    role: slot.role,
+    label: slot.label,
+  };
+};
+
 const runSimulator = async () => {
   try {
     const answerOverrides = Object.entries(simulatorAnswerOverrides.value)
       .filter(([, value]) => value === true || value === false || value === null)
       .map(([questionId, value]) => ({ question_id: parseIntOrZero(questionId), value }));
+    const hardwareMode = simulatorForm.value.hardware_mode || (hasVirtualHardware.value ? "studio" : "real");
+    const laneId = parseIntOrZero(selectedSimulatorLaneId.value);
+    if (laneId <= 0) {
+      toast.error("Select a lane before running the simulator.");
+      return;
+    }
     simulatorResult.value = await requestPost("/department/selfserve/studio/simulate", {
       department: departmentId.value,
-      lane_id: parseIntOrZero(simulatorForm.value.lane_id),
+      lane_id: laneId,
       reg: simulatorForm.value.reg,
       customer_number: parseNullableInt(simulatorForm.value.customer_number),
-      vehicle_type_id: parseNullableInt(simulatorForm.value.vehicle_type_id),
+      vehicle_type_id: selectedSimulatorVehicleTypeId.value,
       config_source: simulatorForm.value.config_source || "draft",
-      include_hardware: simulatorForm.value.include_hardware !== false,
+      include_hardware: hardwareMode !== "none",
+      hardware_mode: hardwareMode,
       mode: "full_dry_run",
       answer_overrides: answerOverrides,
     });
@@ -1078,6 +1881,10 @@ const runSimulator = async () => {
   }
 };
 
+const onSimulatorDynamicImageError = () => {
+  simulatorDynamicImageHidden.value = true;
+};
+
 const setSimulatorAnswerOverride = (questionId, value) => {
   simulatorAnswerOverrides.value = {
     ...simulatorAnswerOverrides.value,
@@ -1170,13 +1977,28 @@ const firstFilterValue = (...values) => {
   return "";
 };
 
+const lookupRowById = (type, id) => {
+  const normalizedId = normalizeFilterValue(id);
+  if (!normalizedId) {
+    return null;
+  }
+  return lookupRows(type).find((row) => normalizeFilterValue(row?.id) === normalizedId) || null;
+};
+
+const laneFilterValueForNode = (node) => {
+  const raw = rawFor(node?.data);
+  return node?.data?.kind === "lane"
+    ? firstFilterValue(raw.id, node?.data?.object_id)
+    : firstFilterValue(raw.lane, raw.lane_id);
+};
+
+const laneLookupForNode = (node) => lookupRowById("lanes", laneFilterValueForNode(node));
+
 const nodeScopeFilterValue = (node, scopeKind) => {
   const raw = rawFor(node?.data);
   const kind = node?.data?.kind;
   if (scopeKind === "lane") {
-    return kind === "lane"
-      ? firstFilterValue(raw.id, node?.data?.object_id)
-      : firstFilterValue(raw.lane, raw.lane_id);
+    return laneFilterValueForNode(node);
   }
   if (scopeKind === "vehicle_type") {
     return kind === "vehicle_type"
@@ -1186,7 +2008,12 @@ const nodeScopeFilterValue = (node, scopeKind) => {
   if (scopeKind === "machine_type") {
     return kind === "machine_type"
       ? firstFilterValue(raw.id, node?.data?.object_id)
-      : firstFilterValue(raw.machine_type_id, raw.machine_type);
+      : firstFilterValue(raw.machine_type_id, raw.machine_type, laneLookupForNode(node)?.machine_type_id);
+  }
+  if (scopeKind === "dynamic_image") {
+    return kind === "dynamic_image"
+      ? firstFilterValue(raw.id, node?.data?.object_id)
+      : firstFilterValue(raw.dynamic_image_id, raw.dynamic_image, laneLookupForNode(node)?.dynamic_image_id);
   }
   return "";
 };
@@ -1248,12 +2075,35 @@ const matchesScopeFilter = (node, scopeKind, selectedValue, visited = new Set())
   return relatedScopeNodes(node).some((relatedNode) => matchesScopeFilter(relatedNode, scopeKind, selectedValue, visited));
 };
 
+const selectedScopeFilterValue = (scopeKind) => {
+  if (scopeKind === "lane") {
+    return normalizeFilterValue(filters.value.lane_id);
+  }
+  if (scopeKind === "vehicle_type") {
+    return normalizeFilterValue(filters.value.vehicle_type_id);
+  }
+  return "";
+};
+
+const isSelectedScopeAnchorNode = (node) => {
+  const kind = node?.data?.kind;
+  if (!["lane", "vehicle_type"].includes(kind)) {
+    return false;
+  }
+
+  const selectedValue = selectedScopeFilterValue(kind);
+  return Boolean(selectedValue && nodeScopeFilterValue(node, kind) === selectedValue);
+};
+
 const matchesNodeFilters = (node) => {
   const term = searchTerm.value.trim().toLowerCase();
   const label = String(node?.data?.label || node?.id || "").toLowerCase();
   if (term && !label.includes(term) && !String(node?.id || "").toLowerCase().includes(term)) {
     return false;
   }
+  if (isSelectedScopeAnchorNode(node)) {
+    return true;
+  }
   if (!matchesScopeFilter(node, "lane", normalizeFilterValue(filters.value.lane_id))) {
     return false;
   }
@@ -1263,6 +2113,9 @@ const matchesNodeFilters = (node) => {
   if (!matchesScopeFilter(node, "machine_type", normalizeFilterValue(filters.value.machine_type_id))) {
     return false;
   }
+  if (!matchesScopeFilter(node, "dynamic_image", normalizeFilterValue(filters.value.dynamic_image_id))) {
+    return false;
+  }
   return true;
 };
 
@@ -1295,15 +2148,49 @@ const nodeTone = (kind) => ({
 }[kind] || "is-default");
 
 const formatJson = (value) => JSON.stringify(value || {}, null, 2);
+const formatSignalPayload = (payload) => {
+  if (!payload || typeof payload !== "object") {
+    return "{}";
+  }
+  return JSON.stringify(payload);
+};
+
+const syncPanelFromRoute = () => {
+  const requestedPanel = panelFromRoute();
+  if (PANEL_IDS.has(requestedPanel)) {
+    activePanel.value = requestedPanel;
+  }
+};
 
 watch(selectedNode, refreshInspectorForm);
+watch(selectedLaneManagementRow, (lane) => {
+  if (laneEditorMode.value !== "create") {
+    hydrateLaneForm(lane);
+  }
+});
 watch(flowNodes, scheduleLayoutSave, { deep: true });
 watch(departmentId, loadStudioGraph);
+watch(() => currentRoute?.fullPath, syncPanelFromRoute, { immediate: true });
 watch(isStudioFullscreen, refitStudioCanvas);
 watch(filters, applyCanvasFilters, { deep: true });
 watch(searchTerm, applyCanvasFilters);
+watch(() => [filters.value.lane_id, filters.value.vehicle_type_id], () => {
+  simulatorResult.value = null;
+  simulatorAnswerOverrides.value = {};
+  simulatorDynamicImageHidden.value = false;
+});
+watch(simulatorDynamicImageUrl, () => {
+  simulatorDynamicImageHidden.value = false;
+});
+watch(laneManagementDynamicImagePreviewUrl, () => {
+  lanePreviewHidden.value = false;
+});
+watch(inspectorLaneDynamicImagePreviewUrl, () => {
+  inspectorLanePreviewHidden.value = false;
+});
 
 onMounted(() => {
+  syncPanelFromRoute();
   loadStudioGraph();
   document.addEventListener("fullscreenchange", syncStudioFullscreenState);
   document.addEventListener("keydown", handleStudioFullscreenKeydown);
@@ -1312,6 +2199,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   document.removeEventListener("fullscreenchange", syncStudioFullscreenState);
   document.removeEventListener("keydown", handleStudioFullscreenKeydown);
+  searchCustomer(null);
   if (layoutSaveTimer.value) {
     window.clearTimeout(layoutSaveTimer.value);
   }
@@ -1385,7 +2273,7 @@ onBeforeUnmount(() => {
                   <input v-model="searchTerm" class="input" type="search" placeholder="Search graph">
                 </div>
                 <div class="select is-small">
-                  <select v-model="filters.lane_id">
+                  <select v-model="filters.lane_id" data-testid="studio-filter-lane">
                     <option value="">All lanes</option>
                     <option v-for="lane in lookupRows('lanes')" :key="lane.id" :value="lane.id">{{ lane.label }}</option>
                   </select>
@@ -1397,11 +2285,17 @@ onBeforeUnmount(() => {
                   </select>
                 </div>
                 <div class="select is-small">
-                  <select v-model="filters.machine_type_id">
+                  <select v-model="filters.machine_type_id" data-testid="studio-filter-machine-type">
                     <option value="">All machine types</option>
                     <option v-for="machineType in lookupRows('machine_types')" :key="machineType.id" :value="machineType.id">{{ machineType.label }}</option>
                   </select>
                 </div>
+                <div class="select is-small">
+                  <select v-model="filters.dynamic_image_id" data-testid="studio-filter-dynamic-image">
+                    <option value="">All dynamic images</option>
+                    <option v-for="dynamicImage in lookupRows('dynamic_images')" :key="dynamicImage.id" :value="dynamicImage.id">{{ dynamicImage.label }}</option>
+                  </select>
+                </div>
               </div>
 
               <div class="studio-workspace">
@@ -1481,6 +2375,8 @@ onBeforeUnmount(() => {
                         <dl class="studio-node-facts">
                           <div><dt>Scope use</dt><dd>{{ nodeEdgeCount(id, 'outgoing', ['scope']) }} linked nodes</dd></div>
                           <div><dt>Mode</dt><dd>{{ data.subtitle }}</dd></div>
+                          <div v-if="data.kind === 'lane'"><dt>Machine</dt><dd>{{ labelFor('machine_types', rawFor(data).machine_type_id) }}</dd></div>
+                          <div v-if="data.kind === 'lane'"><dt>Image</dt><dd>{{ labelFor('dynamic_images', rawFor(data).dynamic_image_id) }}</dd></div>
                         </dl>
                         <Handle class="studio-handle is-source" type="source" :position="Position.Right" :connectable="connectable" />
                       </div>
@@ -1518,10 +2414,10 @@ onBeforeUnmount(() => {
                         <h4>{{ data.label }}</h4>
                         <dl class="studio-node-facts">
                           <div><dt>Scope</dt><dd>{{ nodeScopeLabel(data) }}</dd></div>
-                          <div><dt>Parent</dt><dd>{{ rawFor(data).condition_id ? labelFor('conditions', rawFor(data).condition_id) : 'Root condition' }}</dd></div>
+                          <div><dt>Expression</dt><dd>{{ data.expression_summary || conditionExpressionSummary(rawFor(data).expression) }}</dd></div>
                         </dl>
                         <div class="studio-node-chip-row">
-                          <span>{{ nodeEdgeCount(id, 'incoming', ['condition_rule']) }} rules</span>
+                          <span>{{ nodeEdgeCount(id, 'incoming', ['condition_expression']) }} inputs</span>
                           <span>{{ nodeEdgeCount(id, 'outgoing', ['visibility_gate', 'task_gate']) }} gates</span>
                         </div>
                         <Handle class="studio-handle is-source" type="source" :position="Position.Right" :connectable="connectable" />
@@ -1575,7 +2471,7 @@ onBeforeUnmount(() => {
                           </span>
                           <span v-if="taskServiceList(data).length === 0" class="studio-service-chip is-unbound">No service</span>
                           <span>{{ nodeEdgeCount(id, 'outgoing', ['task_service']) }} relays</span>
-                          <span>{{ listCount(rawFor(data).buttons) }} buttons</span>
+                          <span :title="taskButtonSummary(rawFor(data).buttons)">{{ taskButtonCount(rawFor(data).buttons) }} mapped buttons</span>
                           <span>Order {{ valueText(rawFor(data).order_priority, '-') }}</span>
                         </div>
                         <Handle class="studio-handle is-source" type="source" :position="Position.Right" :connectable="connectable" />
@@ -1589,6 +2485,7 @@ onBeforeUnmount(() => {
                           <span class="studio-node-icon"><i :class="nodeIcon(data.kind)"></i></span>
                           <span class="studio-node-type">Edge gateway</span>
                           <span class="studio-node-id">#{{ data.object_id }}</span>
+                          <span v-if="rawFor(data).virtual" class="studio-inline-badge">Virtual</span>
                         </div>
                         <h4>{{ data.label }}</h4>
                         <div class="studio-node-status" :class="statusTone(rawFor(data).status || data.subtitle)">
@@ -1609,6 +2506,7 @@ onBeforeUnmount(() => {
                           <span class="studio-node-icon"><i :class="nodeIcon(data.kind)"></i></span>
                           <span class="studio-node-type">Relay binding</span>
                           <span class="studio-node-id">{{ rawFor(data).role || 'Relay' }}</span>
+                          <span v-if="rawFor(data).virtual" class="studio-inline-badge">Virtual</span>
                         </div>
                         <h4>{{ data.label }}</h4>
                         <dl class="studio-node-facts">
@@ -1627,6 +2525,7 @@ onBeforeUnmount(() => {
                           <span class="studio-node-icon"><i :class="nodeIcon(data.kind)"></i></span>
                           <span class="studio-node-type">Relay</span>
                           <span class="studio-node-id">{{ data.object_id }}</span>
+                          <span v-if="rawFor(data).virtual" class="studio-inline-badge">Virtual</span>
                         </div>
                         <h4>{{ data.label }}</h4>
                         <dl class="studio-node-facts">
@@ -1681,6 +2580,76 @@ onBeforeUnmount(() => {
                 </div>
               </template>
 
+              <template v-else-if="activePanel === 'lanes'">
+                <header class="studio-details-header">
+                  <h3>Lanes</h3>
+                  <button class="button is-small is-primary" type="button" :disabled="!permissions.can_edit" data-testid="studio-lane-create" @click="startCreateLane">
+                    <span class="icon"><i class="fas fa-plus"></i></span>
+                  </button>
+                </header>
+
+                <div class="studio-lane-list" data-testid="studio-lane-list">
+                  <button
+                    v-for="lane in lookupRows('lanes')"
+                    :key="lane.id"
+                    class="studio-lane-row"
+                    :class="{ 'is-active': String(selectedLaneManagementId) === String(lane.id) && laneEditorMode !== 'create' }"
+                    type="button"
+                    :data-testid="`studio-lane-row-${lane.id}`"
+                    @click="selectLaneForManagement(lane.id)"
+                  >
+                    <span>
+                      <strong>{{ lane.label }}</strong>
+                      <small>#{{ lane.id }}</small>
+                    </span>
+                    <small>Machine: {{ labelFor('machine_types', lane.machine_type_id) }}</small>
+                    <small>Dynamic image: {{ labelFor('dynamic_images', lane.dynamic_image_id) }}</small>
+                  </button>
+                  <p v-if="lookupRows('lanes').length === 0" class="studio-empty-inline">No lanes configured for this department.</p>
+                </div>
+
+                <form class="studio-form studio-lane-form" data-testid="studio-lane-form" @submit.prevent="saveLane">
+                  <label>Lane name<input v-model="laneForm.name" class="input" data-testid="studio-lane-name"></label>
+                  <label>Machine type
+                    <select v-model="laneForm.machine_type_id" class="input" data-testid="studio-lane-machine-type">
+                      <option :value="null">None</option>
+                      <option v-for="machineType in lookupRows('machine_types')" :key="machineType.id" :value="machineType.id">{{ machineType.label }}</option>
+                    </select>
+                  </label>
+                  <label>Dynamic image
+                    <select v-model="laneForm.dynamic_image_id" class="input" data-testid="studio-lane-dynamic-image">
+                      <option :value="null">None</option>
+                      <option v-for="dynamicImage in lookupRows('dynamic_images')" :key="dynamicImage.id" :value="dynamicImage.id">{{ dynamicImage.label }}</option>
+                    </select>
+                  </label>
+                  <section v-if="displayedLaneManagementDynamicImagePreviewUrl" class="studio-lane-preview" data-testid="studio-lane-dynamic-preview">
+                    <header>
+                      <strong>{{ labelFor('dynamic_images', laneForm.dynamic_image_id) }}</strong>
+                      <small>Lane {{ laneForm.name || laneForm.id }}</small>
+                    </header>
+                    <img
+                      :src="displayedLaneManagementDynamicImagePreviewUrl"
+                      alt="Selected lane dynamic image preview"
+                      data-testid="studio-lane-dynamic-image-preview"
+                      @error="onLaneManagementDynamicImageError"
+                    >
+                  </section>
+                  <p v-else-if="laneEditorMode === 'edit'" class="studio-empty-inline">Select a dynamic image to preview it for this lane.</p>
+                  <p v-else class="studio-empty-inline">Save the lane before previewing its dynamic image.</p>
+                  <div class="studio-field-group">
+                    <span>Relay IDs</span>
+                    <label v-for="relayField in LANE_RELAY_FIELDS" :key="relayField.field">
+                      {{ relayField.label }}
+                      <input v-model="laneForm[relayField.field]" class="input" :data-testid="`studio-lane-${relayField.field}`">
+                    </label>
+                  </div>
+                  <button class="button is-primary" type="submit" :class="{ 'is-loading': isSaving }" :disabled="!permissions.can_edit" data-testid="studio-lane-save">
+                    <span class="icon"><i class="fas fa-floppy-disk"></i></span>
+                    <span>{{ laneEditorMode === 'create' ? 'Create lane' : 'Save lane' }}</span>
+                  </button>
+                </form>
+              </template>
+
               <template v-else-if="activePanel === 'inspector'">
                 <header class="studio-details-header">
                   <h3>Inspector</h3>
@@ -1695,6 +2664,41 @@ onBeforeUnmount(() => {
                   <pre>{{ formatJson(selectedNode.data?.raw || selectedNode.data) }}</pre>
                 </div>
                 <form v-else class="studio-form" @submit.prevent="saveInspector">
+                  <template v-if="selectedNode.data.kind === 'lane'">
+                    <label>Lane name<input v-model="inspectorForm.name" class="input" data-testid="studio-inspector-lane-name"></label>
+                    <label>Machine type
+                      <select v-model="inspectorForm.machine_type_id" class="input" data-testid="studio-inspector-lane-machine-type">
+                        <option :value="null">None</option>
+                        <option v-for="machineType in lookupRows('machine_types')" :key="machineType.id" :value="machineType.id">{{ machineType.label }}</option>
+                      </select>
+                    </label>
+                    <label>Dynamic image
+                      <select v-model="inspectorForm.dynamic_image_id" class="input" data-testid="studio-inspector-lane-dynamic-image">
+                        <option :value="null">None</option>
+                        <option v-for="dynamicImage in lookupRows('dynamic_images')" :key="dynamicImage.id" :value="dynamicImage.id">{{ dynamicImage.label }}</option>
+                      </select>
+                    </label>
+                    <section v-if="displayedInspectorLaneDynamicImagePreviewUrl" class="studio-lane-preview" data-testid="studio-inspector-lane-dynamic-preview">
+                      <header>
+                        <strong>{{ labelFor('dynamic_images', inspectorForm.dynamic_image_id) }}</strong>
+                        <small>Lane {{ inspectorForm.name || inspectorForm.id }}</small>
+                      </header>
+                      <img
+                        :src="displayedInspectorLaneDynamicImagePreviewUrl"
+                        alt="Selected lane dynamic image preview"
+                        data-testid="studio-inspector-lane-dynamic-image-preview"
+                        @error="onInspectorLaneDynamicImageError"
+                      >
+                    </section>
+                    <div class="studio-field-group">
+                      <span>Relay IDs</span>
+                      <label v-for="relayField in LANE_RELAY_FIELDS" :key="relayField.field">
+                        {{ relayField.label }}
+                        <input v-model="inspectorForm[relayField.field]" class="input" :data-testid="`studio-inspector-lane-${relayField.field}`">
+                      </label>
+                    </div>
+                  </template>
+
                   <template v-if="selectedNode.data.kind === 'question'">
                     <label>Question<input v-model="inspectorForm.question" class="input"></label>
                     <label>Description<input v-model="inspectorForm.description" class="input"></label>
@@ -1710,12 +2714,45 @@ onBeforeUnmount(() => {
                   <template v-else-if="selectedNode.data.kind === 'condition'">
                     <label>Name<input v-model="inspectorForm.name" class="input"></label>
                     <label>Description<input v-model="inspectorForm.description" class="input"></label>
-                    <label>Parent condition
-                      <select v-model="inspectorForm.condition_id" class="input">
-                        <option :value="null">No parent</option>
-                        <option v-for="condition in lookupRows('conditions')" :key="condition.id" :value="condition.id">{{ condition.label }}</option>
-                      </select>
-                    </label>
+                    <div class="studio-expression-builder" data-testid="condition-expression-builder">
+                      <label>Match
+                        <select v-model="inspectorForm.expression.operator" class="input" data-testid="condition-expression-operator">
+                          <option value="ALL">All predicates</option>
+                          <option value="ANY">Any predicate</option>
+                        </select>
+                      </label>
+                      <article
+                        v-for="(predicate, index) in conditionExpressionChildren"
+                        :key="`predicate-${index}`"
+                        class="studio-expression-row"
+                        data-testid="condition-expression-row"
+                      >
+                        <select v-model="predicate.subject_type" class="input" data-testid="condition-expression-subject-type" @change="syncPredicateSubject(predicate)">
+                          <option value="question">Question</option>
+                          <option value="condition">Condition</option>
+                        </select>
+                        <select v-model.number="predicate.subject_id" class="input" data-testid="condition-expression-subject">
+                          <option
+                            v-for="option in expressionSubjectOptions(predicate.subject_type, selectedConditionId)"
+                            :key="`${predicate.subject_type}-${option.id}`"
+                            :value="option.id"
+                          >
+                            {{ option.label }}
+                          </option>
+                        </select>
+                        <select v-model="predicate.operator" class="input" data-testid="condition-expression-predicate-operator">
+                          <option v-for="option in CONDITION_OPERATORS" :key="option.value" :value="option.value">{{ option.label }}</option>
+                        </select>
+                        <button class="button is-small is-danger is-light" type="button" title="Remove predicate" @click="removeConditionExpressionChild(index)">
+                          <span class="icon"><i class="fas fa-trash"></i></span>
+                        </button>
+                      </article>
+                      <button class="button is-small is-link is-light" type="button" data-testid="condition-expression-add" @click="addConditionPredicate">
+                        <span class="icon"><i class="fas fa-plus"></i></span>
+                        <span>Add predicate</span>
+                      </button>
+                      <p class="studio-expression-summary" data-testid="condition-expression-summary">{{ conditionExpressionSummary(inspectorForm.expression) }}</p>
+                    </div>
                   </template>
 
                   <template v-else-if="selectedNode.data.kind === 'rule'">
@@ -1751,7 +2788,18 @@ onBeforeUnmount(() => {
                         <option value="QUESTION">QUESTION</option>
                       </select>
                     </label>
-                    <label v-if="inspectorForm.gate_type !== 'ALWAYS'">Gate reference id<input v-model.number="inspectorForm.gate_ref_id" class="input" type="number" min="0"></label>
+                    <label v-if="inspectorForm.gate_type === 'CONDITION'">Gate condition
+                      <select v-model.number="inspectorForm.gate_ref_id" class="input">
+                        <option :value="null">Select condition</option>
+                        <option v-for="condition in lookupRows('conditions')" :key="condition.id" :value="condition.id">{{ condition.label }}</option>
+                      </select>
+                    </label>
+                    <label v-else-if="inspectorForm.gate_type === 'QUESTION'">Gate question
+                      <select v-model.number="inspectorForm.gate_ref_id" class="input">
+                        <option :value="null">Select question</option>
+                        <option v-for="question in lookupRows('questions')" :key="question.id" :value="question.id">{{ question.label }}</option>
+                      </select>
+                    </label>
                     <label>Order<input v-model.number="inspectorForm.order_priority" class="input" type="number" min="0"></label>
                     <div class="studio-field-group">
                       <span>Services</span>
@@ -1779,14 +2827,23 @@ onBeforeUnmount(() => {
                         @input="inspectorForm.services = normalizeServiceList($event.target.value)"
                       >
                     </label>
-                    <label>Buttons
-                      <input
-                        class="input"
-                        :value="listInputValue(inspectorForm.buttons)"
-                        placeholder="0,1,2"
-                        @input="inspectorForm.buttons = normalizeButtonList($event.target.value)"
-                      >
-                    </label>
+                    <div class="studio-field-group">
+                      <span>Dynamic image buttons</span>
+                      <div class="studio-button-picker" data-testid="studio-task-button-picker">
+                        <label
+                          v-for="option in taskButtonOptions"
+                          :key="String(option.id)"
+                          class="studio-button-option"
+                          :class="{ 'is-active': taskButtonIsSelected(inspectorForm.buttons, option.id) }"
+                        >
+                          <input v-model="inspectorForm.buttons" type="checkbox" :value="option.id">
+                          <span>
+                            <strong>{{ option.name }}</strong>
+                            <small>{{ option.description }}</small>
+                          </span>
+                        </label>
+                      </div>
+                    </div>
                   </template>
 
                   <div class="buttons">
@@ -1794,7 +2851,7 @@ onBeforeUnmount(() => {
                       <span class="icon"><i class="fas fa-floppy-disk"></i></span>
                       <span>Save</span>
                     </button>
-                    <button class="button is-danger is-light" type="button" @click="deleteSelected">
+                    <button v-if="canDeleteSelected" class="button is-danger is-light" type="button" @click="deleteSelected">
                       <span class="icon"><i class="fas fa-trash"></i></span>
                     </button>
                   </div>
@@ -1809,16 +2866,21 @@ onBeforeUnmount(() => {
                   </button>
                 </header>
                 <div class="studio-node-list">
-                  <button v-for="node in conditionNodes" :key="node.id" type="button" @click="selectNode(node.id)">
+                  <button
+                    v-for="node in conditionNodes"
+                    :key="node.id"
+                    class="studio-condition-card"
+                    type="button"
+                    :data-state="conditionCardState(node.data?.object_id)"
+                    @click="selectNode(node.id)"
+                  >
                     <span>{{ node.data?.label }}</span>
-                    <small>{{ node.data?.subtitle }}</small>
-                  </button>
-                </div>
-                <h4 class="studio-section-title">Rules</h4>
-                <div class="studio-node-list">
-                  <button v-for="node in ruleNodes" :key="node.id" type="button" @click="selectNode(node.id)">
-                    <span>{{ node.data?.label }}</span>
-                    <small>{{ node.data?.subtitle }}</small>
+                    <small>{{ nodeScopeLabel(node.data) }}</small>
+                    <small>{{ node.data?.expression_summary || conditionExpressionSummary(node.data?.raw?.expression) }}</small>
+                    <span class="studio-condition-card-meta">
+                      <span>{{ conditionUsageCount(node.data?.object_id) }} uses</span>
+                      <span>{{ conditionCardState(node.data?.object_id) }}</span>
+                    </span>
                   </button>
                 </div>
               </template>
@@ -1853,12 +2915,58 @@ onBeforeUnmount(() => {
                   <h3>Hardware</h3>
                   <span class="tag is-light">{{ gatewayNodes.length }} gateways</span>
                 </header>
+                <section class="studio-virtual-hardware" data-testid="studio-virtual-hardware">
+                  <div>
+                    <strong>Virtual studio hardware</strong>
+                    <small>{{ hasVirtualHardware ? `${virtualHardware.binding_count || 0} virtual bindings active` : 'No virtual bindings configured' }}</small>
+                  </div>
+                  <div class="buttons">
+                    <button class="button is-small is-link" type="button" :disabled="!permissions.can_edit" @click="generateVirtualHardwareFromLanes">
+                      <span class="icon"><i class="fas fa-wand-magic-sparkles"></i></span>
+                      <span>Generate from lanes</span>
+                    </button>
+                    <button class="button is-small is-light" type="button" :disabled="!permissions.can_edit" @click="upsertVirtualGateway">
+                      <span class="icon"><i class="fas fa-microchip"></i></span>
+                      <span>Save gateway</span>
+                    </button>
+                    <button class="button is-small is-danger is-light" type="button" :disabled="!permissions.can_edit || !hasVirtualHardware" @click="resetVirtualHardware">
+                      <span class="icon"><i class="fas fa-rotate-left"></i></span>
+                      <span>Reset</span>
+                    </button>
+                  </div>
+                  <div class="studio-virtual-form">
+                    <label>Gateway label<input v-model="virtualHardwareForm.gateway_label" class="input" placeholder="Virtual Studio Gateway"></label>
+                    <label>Suggested lane relay
+                      <select class="input" @change="useVirtualRelaySlot($event.target.value)">
+                        <option value="">Select lane relay</option>
+                        <option v-for="slot in virtualRelaySlotOptions" :key="slot.id" :value="slot.id">{{ slot.label }}</option>
+                      </select>
+                    </label>
+                    <label>Relay ID<input v-model="virtualHardwareForm.relay_id" class="input" placeholder="Relay id from lane slot"></label>
+                    <label>Role
+                      <select v-model="virtualHardwareForm.role" class="input">
+                        <option v-for="role in virtualHardwareRoleOptions" :key="role" :value="role">{{ role }}</option>
+                      </select>
+                    </label>
+                    <label>Binding label<input v-model="virtualHardwareForm.label" class="input" placeholder="Lane 1 MACHINE"></label>
+                    <button class="button is-small is-primary" type="button" :disabled="!permissions.can_edit" @click="upsertVirtualBinding">
+                      <span class="icon"><i class="fas fa-plug-circle-bolt"></i></span>
+                      <span>Save binding</span>
+                    </button>
+                  </div>
+                  <div v-if="virtualBindingEntries.length" class="studio-virtual-bindings">
+                    <button v-for="entry in virtualBindingEntries" :key="entry.id" class="studio-virtual-binding-row" type="button" @click="deleteVirtualBinding(entry)">
+                      <span><strong>{{ entry.label }}</strong><small>{{ entry.gatewayLabel }} / {{ entry.services.join(', ') || entry.relayId }}</small></span>
+                      <span class="tag is-info is-light">Virtual</span>
+                    </button>
+                  </div>
+                </section>
                 <article v-for="gateway in gatewayWorkspace.gateways || []" :key="gateway.id" class="studio-hardware-item">
                   <div>
                     <strong>{{ gateway.label || `Gateway ${gateway.id}` }}</strong>
-                    <small>{{ gateway.status || 'UNKNOWN' }}</small>
+                    <small>{{ gateway.status || 'UNKNOWN' }} <span v-if="gateway.virtual" class="studio-inline-badge">Virtual</span></small>
                   </div>
-                  <div class="buttons">
+                  <div v-if="!gateway.virtual" class="buttons">
                     <button class="button is-small is-link is-light" title="Discover gateway" @click="runGatewayAction(gateway.id, 'discovery')">
                       <span class="icon"><i class="fas fa-radar"></i></span>
                     </button>
@@ -1874,7 +2982,7 @@ onBeforeUnmount(() => {
                   </div>
                   <ul>
                     <li v-for="binding in gateway.bindings || []" :key="`${gateway.id}-${binding.relay_id}-${binding.role}`">
-                      {{ binding.label || binding.relay_id }} <span>{{ bindingServiceList(binding).join(', ') || binding.role || binding.slot || 'binding' }}</span>
+                      {{ binding.label || binding.relay_id }} <span>{{ bindingServiceList(binding).join(', ') || binding.role || binding.slot || 'binding' }} <span v-if="binding.virtual" class="studio-inline-badge">Virtual</span></span>
                     </li>
                   </ul>
                 </article>
@@ -1887,6 +2995,7 @@ onBeforeUnmount(() => {
                     <div>
                       <strong>{{ coverage.service }}</strong>
                       <small>{{ serviceOptionSummary(coverage) }}</small>
+                      <span v-if="coverage.bindings.some((binding) => binding.virtual)" class="studio-inline-badge">Virtual coverage</span>
                     </div>
                     <ul>
                       <li v-for="task in coverage.tasks" :key="task.id">
@@ -1914,29 +3023,115 @@ onBeforeUnmount(() => {
                     <button type="button" class="button is-small" :class="{ 'is-primary': simulatorForm.config_source === 'draft', 'is-light': simulatorForm.config_source !== 'draft' }" @click="simulatorForm.config_source = 'draft'">Draft</button>
                     <button type="button" class="button is-small" :class="{ 'is-primary': simulatorForm.config_source === 'published', 'is-light': simulatorForm.config_source !== 'published' }" @click="simulatorForm.config_source = 'published'">Published</button>
                   </div>
-                  <label>Lane
-                    <select v-model="simulatorForm.lane_id" class="input">
-                      <option v-for="lane in lookupRows('lanes')" :key="lane.id" :value="lane.id">{{ lane.label }}</option>
-                    </select>
-                  </label>
-                  <label>Vehicle type
-                    <select v-model="simulatorForm.vehicle_type_id" class="input">
-                      <option :value="null">Auto</option>
-                      <option v-for="vehicleType in lookupRows('vehicle_types')" :key="vehicleType.id" :value="vehicleType.id">{{ vehicleType.label }}</option>
-                    </select>
-                  </label>
+                  <section class="studio-simulator-scope" data-testid="studio-simulator-scope">
+                    <div>
+                      <span>Lane</span>
+                      <strong>{{ simulatorScopeSummary.lane }}</strong>
+                    </div>
+                    <div>
+                      <span>Vehicle type</span>
+                      <strong>{{ simulatorScopeSummary.vehicleType }}</strong>
+                    </div>
+                  </section>
+                  <p
+                    v-if="simulatorAutoVehicleTypeDecision"
+                    class="studio-simulator-auto-decision"
+                    :class="`is-${simulatorAutoVehicleTypeDecision.tone}`"
+                    data-testid="studio-simulator-auto-decision"
+                  >
+                    <span class="icon"><i class="fas fa-route"></i></span>
+                    <span>{{ simulatorAutoVehicleTypeDecision.text }}</span>
+                  </p>
                   <label>Registration<input v-model="simulatorForm.reg" class="input"></label>
-                  <label>Customer number<input v-model="simulatorForm.customer_number" class="input" type="number"></label>
-                  <label class="checkbox studio-inline-toggle">
-                    <input v-model="simulatorForm.include_hardware" type="checkbox">
-                    <span>Include hardware</span>
-                  </label>
+                  <div class="studio-field-group studio-customer-search">
+                    <span id="studio-simulator-customer-label">Customer</span>
+                    <div class="control has-icons-left" :class="{ 'is-loading': isSearchingCustomers }">
+                      <input
+                        v-model="simulatorCustomerSearchQuery"
+                        class="input"
+                        type="text"
+                        placeholder="Search by customer name or number"
+                        data-testid="studio-simulator-customer-search"
+                        aria-labelledby="studio-simulator-customer-label"
+                        autocomplete="off"
+                        @input="onSimulatorCustomerSearchInput"
+                        @focusin="showSimulatorCustomerResults = true"
+                        @focusout="hideSimulatorCustomerResults"
+                      >
+                      <span class="icon is-left">
+                        <i class="fas fa-search"></i>
+                      </span>
+                    </div>
+                    <div
+                      v-if="selectedSimulatorCustomer"
+                      class="studio-selected-customer"
+                      data-testid="studio-simulator-selected-customer"
+                    >
+                      <div>
+                        <strong>{{ selectedSimulatorCustomer.name }}</strong>
+                        <small>
+                          #{{ selectedSimulatorCustomer.customerNumber }}
+                          <span v-if="selectedSimulatorCustomer.city"> / {{ selectedSimulatorCustomer.city }}</span>
+                        </small>
+                      </div>
+                      <button class="button is-small is-light" type="button" @click="clearSimulatorCustomer">Clear</button>
+                    </div>
+                    <div
+                      v-if="showSimulatorCustomerResults && simulatorCustomerSearchQuery.trim() && searchCustomerResults.length > 0"
+                      class="studio-customer-results"
+                      data-testid="studio-simulator-customer-results"
+                    >
+                      <button
+                        v-for="customer in searchCustomerResults"
+                        :key="customer.customerNumber || customer.customer_number"
+                        class="studio-customer-result"
+                        type="button"
+                        :data-testid="`studio-simulator-customer-option-${customer.customerNumber || customer.customer_number}`"
+                        @mousedown.prevent
+                        @click="selectSimulatorCustomer(customer)"
+                      >
+                        <span class="icon is-small"><i class="fas fa-user"></i></span>
+                        <span>
+                          <strong>{{ customer.name || customer.customer_name || `#${customer.customerNumber || customer.customer_number}` }}</strong>
+                          <small>#{{ customer.customerNumber || customer.customer_number }}</small>
+                        </span>
+                      </button>
+                    </div>
+                    <p
+                      v-else-if="showSimulatorCustomerResults && simulatorCustomerSearchQuery.trim() && !isSearchingCustomers && !selectedSimulatorCustomer"
+                      class="studio-empty-inline"
+                      data-testid="studio-simulator-customer-empty"
+                    >
+                      No customers found.
+                    </p>
+                  </div>
+                  <div class="studio-segmented-control" role="group" aria-label="Hardware mode" data-testid="studio-hardware-mode">
+                    <button type="button" class="button is-small" :class="{ 'is-primary': simulatorForm.hardware_mode === 'studio', 'is-light': simulatorForm.hardware_mode !== 'studio' }" @click="simulatorForm.hardware_mode = 'studio'">Studio</button>
+                    <button type="button" class="button is-small" :class="{ 'is-primary': simulatorForm.hardware_mode === 'real', 'is-light': simulatorForm.hardware_mode !== 'real' }" @click="simulatorForm.hardware_mode = 'real'">Real only</button>
+                    <button type="button" class="button is-small" :class="{ 'is-primary': simulatorForm.hardware_mode === 'none', 'is-light': simulatorForm.hardware_mode !== 'none' }" @click="simulatorForm.hardware_mode = 'none'">No hardware</button>
+                  </div>
                   <button class="button is-primary" type="submit">
                     <span class="icon"><i class="fas fa-play"></i></span>
                     <span>Run</span>
                   </button>
                 </form>
 
+                <section v-if="displayedSimulatorDynamicImageUrl" class="studio-dynamic-preview" data-testid="studio-simulator-dynamic-preview">
+                  <header class="studio-dynamic-preview-header">
+                    <h4>Dynamic Image Preview</h4>
+                    <small>
+                      {{ taskButtonSummary(simulatorDynamicImageButtons) }}
+                      <span v-if="simulatorDynamicImageThumbPosition !== null"> / Thumb {{ simulatorDynamicImageThumbPosition }}</span>
+                    </small>
+                  </header>
+                  <img
+                    :src="displayedSimulatorDynamicImageUrl"
+                    alt="Dynamic image simulator preview"
+                    data-testid="studio-simulator-dynamic-image"
+                    @error="onSimulatorDynamicImageError"
+                  >
+                </section>
+
                 <section class="studio-debug-section">
                   <header class="studio-debug-section-header">
                     <h4>Question Overrides</h4>
@@ -1988,10 +3183,12 @@ onBeforeUnmount(() => {
                   </section>
 
                   <section class="studio-debug-section">
-                    <header class="studio-debug-section-header"><h4>Conditions and Rules</h4></header>
+                    <header class="studio-debug-section-header"><h4>Condition Expressions</h4></header>
                     <div class="studio-debug-compact-list">
                       <button v-for="condition in simulatorConditions" :key="condition.id" type="button" :class="condition.result ? 'is-ok' : 'is-blocked'" @click="focusDebugNodes([condition.node_id], true)">
                         <span><i class="fas fa-code-branch"></i> {{ condition.label }}</span>
+                        <small>{{ condition.expression_summary || condition.reason }}</small>
+                        <small v-if="condition.next_fix">{{ condition.next_fix }}</small>
                         <strong>{{ condition.result ? 'Pass' : 'Fail' }}</strong>
                       </button>
                       <button v-for="rule in simulatorRules" :key="`rule-${rule.id}`" type="button" :class="rule.satisfied ? 'is-ok' : 'is-blocked'" @click="focusDebugNodes([rule.node_id], true)">
@@ -2007,7 +3204,7 @@ onBeforeUnmount(() => {
                       <button v-for="task in simulatorTasks" :key="task.id" type="button" class="studio-debug-task" :class="task.active ? 'is-active' : 'is-blocked'" @click="focusDebugNodes([task.node_id], true)">
                         <strong>{{ task.label }}</strong>
                         <span>{{ task.gate_type }} · {{ task.gate_ref_label }}</span>
-                        <small>{{ (task.services || []).join(', ') || 'No services' }}</small>
+                        <small>{{ (task.services || []).join(', ') || 'No services' }} / {{ taskButtonSummary(task.buttons) }}</small>
                       </button>
                     </div>
                   </section>
@@ -2027,6 +3224,23 @@ onBeforeUnmount(() => {
                     </div>
                   </section>
 
+                  <section class="studio-debug-section" data-testid="studio-signal-timeline">
+                    <header class="studio-debug-section-header"><h4>Signals</h4></header>
+                    <div class="studio-signal-list">
+                      <article v-for="signal in simulatorSignals" :key="signal.sequence" class="studio-signal-row" :class="`is-${signal.predicted_status || 'skipped'}`">
+                        <span class="studio-signal-sequence">{{ signal.sequence }}</span>
+                        <div>
+                          <strong>{{ signal.runtime_stage }} / {{ signal.relay_role }}</strong>
+                          <small>{{ signal.signal_type }} / {{ signal.source || 'none' }} / {{ signal.predicted_status }}</small>
+                          <code>{{ formatSignalPayload(signal.payload) }}</code>
+                          <small v-if="signal.target_gateway_label || signal.target_binding">Target: {{ signal.target_gateway_label || signal.target_gateway || 'No gateway' }} {{ signal.target_binding || '' }}</small>
+                          <small v-if="signal.skip_block_reason">{{ signal.skip_block_reason }}</small>
+                        </div>
+                      </article>
+                      <p v-if="simulatorSignals.length === 0" class="studio-empty-inline">No signal timeline returned for this simulation.</p>
+                    </div>
+                  </section>
+
                   <section class="studio-debug-section">
                     <button class="button is-small is-light" type="button" @click="simulatorShowJson = !simulatorShowJson">
                       <span class="icon"><i class="fas fa-code"></i></span>
@@ -2057,10 +3271,20 @@ onBeforeUnmount(() => {
               <template v-else-if="activePanel === 'audit'">
                 <header class="studio-details-header"><h3>Audit</h3></header>
                 <div class="studio-validation-list">
-                  <article v-for="item in validationItems" :key="item.message" :class="`is-${item.severity}`">
+                  <button
+                    v-for="item in validationItems"
+                    :key="item.key"
+                    type="button"
+                    class="studio-validation-item"
+                    :class="[`is-${item.severity}`, { 'is-clickable': item.target_node_ids.length > 0 }]"
+                    :disabled="item.target_node_ids.length === 0"
+                    :title="item.target_node_ids.length > 0 ? 'Select referenced object' : 'No matching graph object'"
+                    @click="selectValidationItem(item)"
+                  >
                     <span class="icon"><i :class="item.severity === 'error' ? 'fas fa-triangle-exclamation' : 'fas fa-circle-info'"></i></span>
-                    <span>{{ item.message }}</span>
-                  </article>
+                    <span class="studio-validation-message">{{ item.message }}</span>
+                    <span v-if="item.target_node_ids.length > 0" class="icon studio-validation-jump"><i class="fas fa-location-crosshairs"></i></span>
+                  </button>
                   <article v-if="validationItems.length === 0" class="is-success">
                     <span class="icon"><i class="fas fa-circle-check"></i></span>
                     <span>No validation issues.</span>
@@ -2182,7 +3406,7 @@ onBeforeUnmount(() => {
 .studio-toolbar {
   align-items: center;
   display: grid;
-  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(142px, 184px));
+  grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(124px, 170px));
   gap: 8px;
 }
 
@@ -2683,6 +3907,7 @@ onBeforeUnmount(() => {
   font-size: 12px;
 }
 
+.studio-lane-list,
 .studio-node-list,
 .studio-task-list,
 .studio-version-list {
@@ -2701,16 +3926,44 @@ onBeforeUnmount(() => {
 }
 
 .studio-node-list button:hover,
+.studio-lane-row:hover,
+.studio-lane-row.is-active,
 .studio-task-row:hover {
   background: #f8fafc;
   border-color: #cbd5e1;
 }
 
+.studio-lane-row {
+  align-items: flex-start;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  color: #1f2937;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 9px 10px;
+  text-align: left;
+  width: 100%;
+}
+
+.studio-lane-row.is-active {
+  border-color: #bfdbfe;
+}
+
+.studio-lane-row strong,
+.studio-lane-row small {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
 .studio-node-list .icon {
   margin-right: 5px;
 }
 
 .studio-node-list small,
+.studio-lane-row small,
 .studio-task-row small,
 .studio-hardware-item small {
   color: #64748b;
@@ -2745,13 +3998,69 @@ onBeforeUnmount(() => {
   font-weight: 600;
 }
 
-.studio-service-picker {
+.studio-expression-builder {
+  border: 1px solid #dbeafe;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+}
+
+.studio-expression-row {
+  align-items: stretch;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.studio-expression-row .button {
+  justify-self: flex-end;
+  margin: 0;
+}
+
+.studio-expression-summary {
+  color: #475569;
+  font-size: 11px;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.studio-condition-card[data-state="error"] {
+  border-color: #fecaca;
+  background: #fef2f2;
+}
+
+.studio-condition-card[data-state="warning"] {
+  border-color: #fde68a;
+  background: #fffbeb;
+}
+
+.studio-condition-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.studio-condition-card-meta span {
+  background: #f1f5f9;
+  border-radius: 999px;
+  color: #475569;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 4px 7px;
+}
+
+.studio-service-picker,
+.studio-button-picker {
   display: flex;
   flex-direction: column;
   gap: 7px;
 }
 
-.studio-service-option {
+.studio-service-option,
+.studio-button-option {
   align-items: flex-start;
   border: 1px solid #e2e8f0;
   border-radius: 7px;
@@ -2761,7 +4070,8 @@ onBeforeUnmount(() => {
   padding: 9px;
 }
 
-.studio-service-option.is-active {
+.studio-service-option.is-active,
+.studio-button-option.is-active {
   background: #eff6ff;
   border-color: #bfdbfe;
 }
@@ -2771,16 +4081,20 @@ onBeforeUnmount(() => {
   border-color: #fed7aa;
 }
 
-.studio-service-option input {
+.studio-service-option input,
+.studio-button-option input {
   margin-top: 3px;
 }
 
 .studio-service-option strong,
-.studio-service-option small {
+.studio-service-option small,
+.studio-button-option strong,
+.studio-button-option small {
   display: block;
 }
 
 .studio-service-option small,
+.studio-button-option small,
 .studio-empty-inline {
   color: #64748b;
   font-size: 11px;
@@ -2839,6 +4153,39 @@ onBeforeUnmount(() => {
   padding-bottom: 12px;
 }
 
+.studio-simulator-scope {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.studio-simulator-scope div {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  min-width: 0;
+  padding: 9px 10px;
+}
+
+.studio-simulator-scope span,
+.studio-simulator-scope strong {
+  display: block;
+}
+
+.studio-simulator-scope span {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.studio-simulator-scope strong {
+  color: #111827;
+  font-size: 13px;
+  margin-top: 2px;
+  overflow-wrap: anywhere;
+}
+
 .studio-segmented-control {
   display: grid;
   gap: 6px;
@@ -2851,6 +4198,96 @@ onBeforeUnmount(() => {
   gap: 8px !important;
 }
 
+.studio-simulator-auto-decision {
+  align-items: flex-start;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 7px;
+  color: #1e3a8a;
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 6px;
+  line-height: 1.35;
+  margin: -2px 0 0;
+  padding: 8px 10px;
+}
+
+.studio-simulator-auto-decision .icon {
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+
+.studio-simulator-auto-decision.is-warning {
+  background: #fffbeb;
+  border-color: #fde68a;
+  color: #92400e;
+}
+
+.studio-customer-search {
+  position: relative;
+}
+
+.studio-selected-customer {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #dbeafe;
+  border-radius: 8px;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 8px 10px;
+}
+
+.studio-selected-customer strong,
+.studio-selected-customer small,
+.studio-customer-result strong,
+.studio-customer-result small {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.studio-selected-customer small,
+.studio-customer-result small {
+  color: #64748b;
+  font-size: 11px;
+}
+
+.studio-customer-results {
+  background: #ffffff;
+  border: 1px solid #dbeafe;
+  border-radius: 8px;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
+  display: flex;
+  flex-direction: column;
+  max-height: min(220px, 36vh);
+  overflow-y: auto;
+  padding: 4px;
+  position: absolute;
+  width: 100%;
+  z-index: 30;
+}
+
+.studio-customer-result {
+  align-items: flex-start;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: #1f2937;
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  text-align: left;
+  width: 100%;
+}
+
+.studio-customer-result:hover,
+.studio-customer-result:focus-visible {
+  background: #eff6ff;
+  outline: 0;
+}
+
 .studio-debug-section {
   display: flex;
   flex-direction: column;
@@ -2871,6 +4308,50 @@ onBeforeUnmount(() => {
   margin: 0;
 }
 
+.studio-dynamic-preview,
+.studio-lane-preview {
+  background: #ffffff;
+  border: 1px solid #dbeafe;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+}
+
+.studio-dynamic-preview-header,
+.studio-lane-preview header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.studio-dynamic-preview-header h4,
+.studio-lane-preview strong {
+  color: #111827;
+  font-size: 13px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.studio-dynamic-preview-header small,
+.studio-lane-preview small {
+  color: #64748b;
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.studio-dynamic-preview img,
+.studio-lane-preview img {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  display: block;
+  max-height: 260px;
+  object-fit: contain;
+  width: 100%;
+}
+
 .studio-simulator-question-list,
 .studio-debug-task-list,
 .studio-debug-compact-list,
@@ -3007,6 +4488,15 @@ onBeforeUnmount(() => {
   width: 100%;
 }
 
+.studio-debug-compact-list small {
+  color: #64748b;
+  display: block;
+  font-size: 11px;
+  line-height: 1.35;
+  margin-top: 3px;
+  overflow-wrap: anywhere;
+}
+
 .studio-debug-recommendation.is-error,
 .studio-debug-task.is-blocked,
 .studio-debug-compact-list .is-blocked {
@@ -3068,6 +4558,80 @@ onBeforeUnmount(() => {
   margin: 6px 0 0 16px;
 }
 
+.studio-signal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.studio-signal-row {
+  align-items: flex-start;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 28px minmax(0, 1fr);
+  padding: 9px;
+}
+
+.studio-signal-row.is-sent {
+  border-color: #bbf7d0;
+}
+
+.studio-signal-row.is-virtual_only {
+  background: #f0f9ff;
+  border-color: #bae6fd;
+}
+
+.studio-signal-row.is-blocked {
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+.studio-signal-row.is-skipped {
+  background: #f8fafc;
+}
+
+.studio-signal-sequence {
+  align-items: center;
+  background: #0f172a;
+  border-radius: 999px;
+  color: #ffffff;
+  display: inline-flex;
+  font-size: 11px;
+  font-weight: 800;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.studio-signal-row strong,
+.studio-signal-row small,
+.studio-signal-row code {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.studio-signal-row strong {
+  font-size: 12px;
+}
+
+.studio-signal-row small {
+  color: #64748b;
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.studio-signal-row code {
+  background: #f1f5f9;
+  border-radius: 5px;
+  color: #334155;
+  font-size: 11px;
+  margin: 4px 0;
+  padding: 4px 5px;
+}
+
 .studio-task-row,
 .studio-hardware-item,
 .studio-version-list article {
@@ -3094,6 +4658,65 @@ onBeforeUnmount(() => {
   gap: 8px;
 }
 
+.studio-virtual-hardware {
+  background: #f8fafc;
+  border: 1px solid #dbeafe;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+}
+
+.studio-virtual-hardware small {
+  color: #64748b;
+  display: block;
+  font-size: 11px;
+}
+
+.studio-virtual-form {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.studio-virtual-form .button {
+  align-self: end;
+}
+
+.studio-virtual-bindings {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.studio-virtual-binding-row {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #dbeafe;
+  border-radius: 7px;
+  color: #1f2937;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 8px;
+  text-align: left;
+}
+
+.studio-inline-badge {
+  background: #e0f2fe;
+  border: 1px solid #bae6fd;
+  border-radius: 999px;
+  color: #075985;
+  display: inline-flex;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+  margin-left: 5px;
+  padding: 3px 5px;
+  text-transform: uppercase;
+}
+
 .studio-hardware-item ul {
   margin: 0;
   padding-left: 18px;
@@ -3170,20 +4793,53 @@ onBeforeUnmount(() => {
   gap: 8px;
 }
 
-.studio-validation-list article {
+.studio-validation-list article,
+.studio-validation-item {
   align-items: flex-start;
+  border: 0;
   border-radius: 7px;
   display: flex;
   gap: 8px;
   padding: 10px;
+  text-align: left;
+  width: 100%;
 }
 
-.studio-validation-list article.is-error {
+.studio-validation-item {
+  font: inherit;
+}
+
+.studio-validation-item:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.studio-validation-item.is-clickable {
+  cursor: pointer;
+}
+
+.studio-validation-item.is-clickable:hover,
+.studio-validation-item.is-clickable:focus-visible {
+  box-shadow: inset 0 0 0 1px currentColor;
+  outline: 0;
+}
+
+.studio-validation-message {
+  flex: 1;
+}
+
+.studio-validation-jump {
+  opacity: 0.72;
+}
+
+.studio-validation-list article.is-error,
+.studio-validation-item.is-error {
   background: #fef2f2;
   color: #991b1b;
 }
 
-.studio-validation-list article.is-warning {
+.studio-validation-list article.is-warning,
+.studio-validation-item.is-warning {
   background: #fffbeb;
   color: #92400e;
 }
@@ -3273,6 +4929,10 @@ onBeforeUnmount(() => {
     min-height: 560px;
   }
 
+  .studio-simulator-scope {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .studio-simulator-question,
   .studio-debug-summary {
     grid-template-columns: 1fr;
diff --git a/src/views/dashboards/departmentDashboard/modules/self-serve/auditIssueNavigation.js b/src/views/dashboards/departmentDashboard/modules/self-serve/auditIssueNavigation.js
new file mode 100644
index 00000000..34db466b
--- /dev/null
+++ b/src/views/dashboards/departmentDashboard/modules/self-serve/auditIssueNavigation.js
@@ -0,0 +1,101 @@
+const NODE_KIND_PREFIXES = {
+  condition: "condition",
+  question: "question",
+  task: "task",
+  rule: "rule",
+  lane: "lane",
+  relay: "relay",
+  gateway: "gateway",
+  edge_gateway: "gateway",
+  machine_type: "machine_type",
+  vehicle_type: "vehicle_type",
+};
+
+const normalizeId = (value) => {
+  const normalized = String(value ?? "").trim();
+  return normalized && normalized !== "0" ? normalized : "";
+};
+
+const normalizeKind = (value) => String(value ?? "")
+  .trim()
+  .toLowerCase()
+  .replace(/[\s-]+/g, "_");
+
+const availableNodeIdSet = (nodes) => {
+  if (!Array.isArray(nodes)) {
+    return null;
+  }
+  return new Set(nodes
+    .map((node) => (typeof node === "string" ? node : node?.id))
+    .filter(Boolean)
+    .map(String));
+};
+
+const pushUnique = (nodeIds, nodeId, availableIds) => {
+  const normalizedNodeId = normalizeId(nodeId);
+  if (!normalizedNodeId) {
+    return;
+  }
+  if (availableIds && !availableIds.has(normalizedNodeId)) {
+    return;
+  }
+  if (!nodeIds.includes(normalizedNodeId)) {
+    nodeIds.push(normalizedNodeId);
+  }
+};
+
+const pushEntityNode = (nodeIds, kind, id, availableIds) => {
+  const prefix = NODE_KIND_PREFIXES[normalizeKind(kind)];
+  const normalizedId = normalizeId(id);
+  if (!prefix || !normalizedId) {
+    return;
+  }
+  pushUnique(nodeIds, `${prefix}:${normalizedId}`, availableIds);
+};
+
+const collectStructuredTargets = (item, nodeIds, availableIds) => {
+  for (const nodeId of [item?.node_id, item?.target_node_id]) {
+    pushUnique(nodeIds, nodeId, availableIds);
+  }
+  for (const list of [item?.node_ids, item?.target_node_ids]) {
+    if (!Array.isArray(list)) {
+      continue;
+    }
+    for (const nodeId of list) {
+      pushUnique(nodeIds, nodeId, availableIds);
+    }
+  }
+  pushEntityNode(nodeIds, item?.object_type || item?.entity || item?.kind, item?.object_id || item?.id, availableIds);
+};
+
+const collectMessageTargets = (message, nodeIds, availableIds) => {
+  const text = String(message || "");
+  const conditionCycle = text.match(/Condition cycle detected:\s*([0-9\s>,.-]+)/);
+  if (conditionCycle) {
+    for (const id of conditionCycle[1].match(/\d+/g) || []) {
+      pushEntityNode(nodeIds, "condition", id, availableIds);
+    }
+  }
+
+  for (const match of text.matchAll(/\b(Condition|Question|Task|Rule|Lane|Relay)\s+#?(\d+)\b/g)) {
+    pushEntityNode(nodeIds, match[1], match[2], availableIds);
+  }
+
+  for (const match of text.matchAll(/\b(Machine type|Vehicle type)\s+#?(\d+)\b/g)) {
+    pushEntityNode(nodeIds, match[1], match[2], availableIds);
+  }
+
+  for (const match of text.matchAll(/\brelay IDs?:\s*([^.;]+)/gi)) {
+    for (const relayId of match[1].split(",")) {
+      pushEntityNode(nodeIds, "relay", relayId.trim(), availableIds);
+    }
+  }
+};
+
+export const resolveAuditIssueNodeIds = (item, nodes = null) => {
+  const nodeIds = [];
+  const availableIds = availableNodeIdSet(nodes);
+  collectStructuredTargets(item || {}, nodeIds, availableIds);
+  collectMessageTargets(item?.message, nodeIds, availableIds);
+  return nodeIds;
+};
diff --git a/tests/e2e/self-serve-studio-audit-navigation.spec.js b/tests/e2e/self-serve-studio-audit-navigation.spec.js
new file mode 100644
index 00000000..b798580c
--- /dev/null
+++ b/tests/e2e/self-serve-studio-audit-navigation.spec.js
@@ -0,0 +1,35 @@
+import { expect, test } from "@playwright/test";
+import { resolveAuditIssueNodeIds } from "../../src/views/dashboards/departmentDashboard/modules/self-serve/auditIssueNavigation.js";
+
+test.describe("self-serve studio audit navigation", () => {
+  const graphNodes = [{ id: "condition:51" }, { id: "condition:52" }, { id: "question:12" }, { id: "relay:relay-a" }];
+
+  test("resolves clickable graph targets for audit issues", () => {
+    expect(
+      resolveAuditIssueNodeIds(
+        {
+          message: "Condition 51 cannot reference itself in an expression.",
+        },
+        graphNodes
+      )
+    ).toEqual(["condition:51"]);
+
+    expect(
+      resolveAuditIssueNodeIds(
+        {
+          message: "Condition cycle detected: 51 -> 52 -> 51",
+        },
+        graphNodes
+      )
+    ).toEqual(["condition:51", "condition:52"]);
+
+    expect(
+      resolveAuditIssueNodeIds(
+        {
+          message: "Virtual coverage only for relay IDs: relay-a.",
+        },
+        graphNodes
+      )
+    ).toEqual(["relay:relay-a"]);
+  });
+});
diff --git a/tests/e2e/self-serve-studio-flow.spec.js b/tests/e2e/self-serve-studio-flow.spec.js
index a797e5bf..a721a865 100644
--- a/tests/e2e/self-serve-studio-flow.spec.js
+++ b/tests/e2e/self-serve-studio-flow.spec.js
@@ -10,12 +10,30 @@ const json = (body, status = 200) => ({
 function buildStudioGraph() {
   const lookups = {
     departments: [{ id: 6, label: "Roskilde" }],
-    lanes: [{ id: 7, label: "Lane 7" }],
+    lanes: [
+      {
+        id: 7,
+        department: 6,
+        name: "Lane 7",
+        label: "Lane 7",
+        relay_in_id: "IN-7",
+        relay_out_id: "EXIT-7",
+        relay_machine_id: "M-7",
+        relay_machine_program_picker_id: "",
+        relay_machine_cleaner_id: "CLEAN-7",
+        machine_type_id: 1001,
+        dynamic_image_id: 1,
+      },
+    ],
     products: [
       { id: 2, label: "Forvogn", is_wash: 1, subscription_allowed: 1 },
       { id: 8, label: "Bus", is_wash: 1, subscription_allowed: 1 },
     ],
     machine_types: [{ id: 1001, label: "Portal" }],
+    dynamic_images: [
+      { id: 1, label: "Machine 1" },
+      { id: 2, label: "Machine 2" },
+    ],
     vehicle_types: [
       { id: 2, product: 2, product_id: 2, label: "Forvogn", source: "products" },
       { id: 8, product: 8, product_id: 8, label: "Bus", source: "products" },
@@ -29,7 +47,7 @@ function buildStudioGraph() {
       { id: 21, label: "Trailer present" },
       { id: 28, label: "Bus program allowed" },
     ],
-    rules: [{ id: 31, label: "Mirror answer" }],
+    rules: [],
     tasks: [
       { id: 41, label: "Fold mirrors" },
       { id: 48, label: "Start bus wash" },
@@ -42,6 +60,7 @@ function buildStudioGraph() {
       lanes: { 7: "Lane 7" },
       products: { 2: "Forvogn", 8: "Bus" },
       machine_types: { 1001: "Portal" },
+      dynamic_images: { 1: "Machine 1", 2: "Machine 2" },
       vehicle_types: { 2: "Forvogn", 8: "Bus" },
       questions: { 11: "Are mirrors folded?", 12: "Is the lift lowered?", 18: "Bus roof fixtures checked?" },
       conditions: { 21: "Trailer present", 28: "Bus program allowed" },
@@ -79,6 +98,18 @@ function buildStudioGraph() {
           raw: { id: 8, product: 8, product_id: 8, name: "Bus", label: "Bus", source: "products" },
         },
       },
+      {
+        id: "lane:7",
+        type: "default",
+        position: { x: 0, y: 520 },
+        data: {
+          kind: "lane",
+          object_id: 7,
+          label: "Lane 7",
+          subtitle: "Lane scope",
+          raw: { id: 7, name: "Lane 7", label: "Lane 7", machine_type_id: 1001, dynamic_image_id: 1 },
+        },
+      },
       {
         id: "condition:21",
         type: "default",
@@ -88,7 +119,20 @@ function buildStudioGraph() {
           object_id: 21,
           label: "Trailer present",
           subtitle: "Lane 7 / Forvogn",
-          raw: { id: 21, department: 6, lane: 7, product: 2, name: "Trailer present", description: "" },
+          expression_summary: "All: Are mirrors folded? is true",
+          raw: {
+            id: 21,
+            department: 6,
+            lane: 7,
+            product: 2,
+            name: "Trailer present",
+            description: "",
+            expression: {
+              type: "group",
+              operator: "ALL",
+              children: [{ type: "predicate", subject_type: "question", subject_id: 11, operator: "IS_TRUE" }],
+            },
+          },
         },
       },
       {
@@ -153,7 +197,8 @@ function buildStudioGraph() {
             gate_ref_id: 11,
             order_priority: 1,
             services: ["MACHINE"],
-            buttons: [1],
+            buttons: ["reset", 1, "start"],
+            dynamic_images_vehicle_type: 5,
           },
         },
       },
@@ -166,7 +211,20 @@ function buildStudioGraph() {
           object_id: 28,
           label: "Bus program allowed",
           subtitle: "Lane 7 / Bus",
-          raw: { id: 28, department: 6, lane: 7, product: 8, name: "Bus program allowed", description: "" },
+          expression_summary: "All: Bus roof fixtures checked? is true",
+          raw: {
+            id: 28,
+            department: 6,
+            lane: 7,
+            product: 8,
+            name: "Bus program allowed",
+            description: "",
+            expression: {
+              type: "group",
+              operator: "ALL",
+              children: [{ type: "predicate", subject_type: "question", subject_id: 18, operator: "IS_TRUE" }],
+            },
+          },
         },
       },
       {
@@ -210,27 +268,8 @@ function buildStudioGraph() {
             gate_ref_id: 18,
             order_priority: 2,
             services: ["MACHINE"],
-            buttons: [2],
-          },
-        },
-      },
-      {
-        id: "rule:31",
-        type: "default",
-        position: { x: 520, y: 320 },
-        data: {
-          kind: "rule",
-          object_id: 31,
-          label: "Mirror answer",
-          subtitle: "IS_TRUE Are mirrors folded?",
-          raw: {
-            id: 31,
-            condition_id: 21,
-            type: "IS_TRUE",
-            object_type: "question",
-            object_id: 11,
-            name: "Mirror answer",
-            description: "",
+            buttons: [2, "start"],
+            dynamic_images_vehicle_type: 8,
           },
         },
       },
@@ -280,6 +319,38 @@ function buildStudioGraph() {
         label: "scope",
         data: { kind: "scope" },
       },
+      {
+        id: "scope:lane:7:condition:21",
+        source: "lane:7",
+        target: "condition:21",
+        type: "smoothstep",
+        label: "scope",
+        data: { kind: "scope" },
+      },
+      {
+        id: "scope:lane:7:question:11",
+        source: "lane:7",
+        target: "question:11",
+        type: "smoothstep",
+        label: "scope",
+        data: { kind: "scope" },
+      },
+      {
+        id: "scope:lane:7:question:12",
+        source: "lane:7",
+        target: "question:12",
+        type: "smoothstep",
+        label: "scope",
+        data: { kind: "scope" },
+      },
+      {
+        id: "scope:lane:7:task:41",
+        source: "lane:7",
+        target: "task:41",
+        type: "smoothstep",
+        label: "scope",
+        data: { kind: "scope" },
+      },
       {
         id: "scope:vehicle_type:2:question:11",
         source: "vehicle_type:2",
@@ -313,20 +384,12 @@ function buildStudioGraph() {
         data: { kind: "visibility_gate" },
       },
       {
-        id: "rule-input:question:11:31",
+        id: "expression:21:question:11:a1e88f96",
         source: "question:11",
-        target: "rule:31",
-        type: "smoothstep",
-        label: "IS_TRUE",
-        data: { kind: "rule_input" },
-      },
-      {
-        id: "rule-owner:21:31",
-        source: "rule:31",
         target: "condition:21",
         type: "smoothstep",
-        label: "rule of",
-        data: { kind: "condition_rule" },
+        label: "IS_TRUE",
+        data: { kind: "condition_expression", subject_type: "question", subject_id: 11, condition_id: 21 },
       },
       {
         id: "task-gate:question:11:41",
@@ -344,6 +407,30 @@ function buildStudioGraph() {
         label: "scope",
         data: { kind: "scope" },
       },
+      {
+        id: "scope:lane:7:condition:28",
+        source: "lane:7",
+        target: "condition:28",
+        type: "smoothstep",
+        label: "scope",
+        data: { kind: "scope" },
+      },
+      {
+        id: "scope:lane:7:question:18",
+        source: "lane:7",
+        target: "question:18",
+        type: "smoothstep",
+        label: "scope",
+        data: { kind: "scope" },
+      },
+      {
+        id: "scope:lane:7:task:48",
+        source: "lane:7",
+        target: "task:48",
+        type: "smoothstep",
+        label: "scope",
+        data: { kind: "scope" },
+      },
       {
         id: "scope:vehicle_type:8:question:18",
         source: "vehicle_type:8",
@@ -368,6 +455,14 @@ function buildStudioGraph() {
         label: "show if",
         data: { kind: "visibility_gate" },
       },
+      {
+        id: "expression:28:question:18:a1e88f96",
+        source: "question:18",
+        target: "condition:28",
+        type: "smoothstep",
+        label: "IS_TRUE",
+        data: { kind: "condition_expression", subject_type: "question", subject_id: 18, condition_id: 28 },
+      },
       {
         id: "task-gate:question:18:48",
         source: "question:18",
@@ -429,9 +524,27 @@ function buildStudioGraph() {
         },
       ],
       relays: [{ relay_id: "M-7", name: "Machine relay" }],
-      lanes: [],
+      lanes: [
+        {
+          id: 7,
+          name: "Lane 7",
+          relay_slots: [
+            { slot: "MACHINE", relay_id: "M-7", coverage: { covered: true, status: "BOUND" } },
+            { slot: "EXIT", relay_id: "EXIT-7", coverage: { covered: false, status: "MISSING" } },
+            { slot: "CLEANER", relay_id: "CLEAN-7", coverage: { covered: false, status: "MISSING" } },
+          ],
+          binding_coverage: { required: 3, bound: 1, missing: 2, state: "MISSING" },
+        },
+      ],
       issues: [],
       actions: [],
+      virtual: {
+        enabled: true,
+        has_virtual_hardware: false,
+        gateway_count: 0,
+        binding_count: 0,
+        config: { gateways: [], relays: [], bindings: [] },
+      },
     },
     permissions: {
       can_view: true,
@@ -455,7 +568,15 @@ function buildSimulationResponse() {
     mode: "full_dry_run",
     config_source: "draft",
     questions: [{ id: 11, question: "Are mirrors folded?", answer: null }],
-    tasks: [{ id: 41, task: "Fold mirrors", services: ["MACHINE"] }],
+    tasks: [
+      {
+        id: 41,
+        task: "Fold mirrors",
+        services: ["MACHINE"],
+        buttons: ["reset", 1, "start"],
+        dynamic_images_vehicle_type: 5,
+      },
+    ],
     allowed_services: [],
     machine_available: false,
     all_visible_questions_answered: false,
@@ -532,12 +653,14 @@ function buildSimulationResponse() {
           id: 21,
           node_id: "condition:21",
           label: "Trailer present",
-          result: true,
-          state: "passed",
-          reason: "Condition passed.",
+          result: false,
+          state: "failed",
+          reason: "Predicate did not pass.",
+          expression_summary: "All: Are mirrors folded? is true",
+          next_fix: "Set Are mirrors folded? so it satisfies is true.",
         },
       ],
-      rules: [{ id: 31, node_id: "rule:31", label: "Mirror answer", satisfied: false, reason: "Rule did not pass." }],
+      rules: [],
       tasks: [
         {
           id: 41,
@@ -548,6 +671,8 @@ function buildSimulationResponse() {
           gate_type: "QUESTION",
           gate_ref_label: "Are mirrors folded?",
           services: ["MACHINE"],
+          buttons: ["reset", 1, "start"],
+          dynamic_images_vehicle_type: 5,
           reason: "Task gate did not pass.",
         },
       ],
@@ -555,6 +680,101 @@ function buildSimulationResponse() {
         machine_relay_configured: false,
         allowed_services: [],
         missing_service_bindings: [],
+        virtual: { has_virtual_hardware: true, gateway_count: 1, binding_count: 3 },
+        signal_timeline: [
+          {
+            sequence: 1,
+            runtime_stage: "eligibility_sync",
+            signal_type: "session_event",
+            relay_role: "SESSION",
+            source: "none",
+            predicted_status: "sent",
+            payload: { event: "SESSION_SYNCED", allowed: false },
+          },
+          {
+            sequence: 2,
+            runtime_stage: "eligibility_sync",
+            signal_type: "relay_switch",
+            relay_role: "MACHINE",
+            relay_id: "M-7",
+            target_gateway_label: "Virtual Studio Gateway",
+            target_binding: "binding:virtual-main:M-7:0",
+            source: "virtual",
+            virtual: true,
+            predicted_status: "virtual_only",
+            payload: { id: "M-7", channel: 0, on: true },
+            skip_block_reason: "Virtual studio hardware only; live dispatch would require a real gateway binding.",
+          },
+          {
+            sequence: 3,
+            runtime_stage: "machine_start_signal",
+            signal_type: "shelly_event",
+            relay_role: "MACHINE",
+            relay_id: "M-7",
+            target_gateway_label: "Virtual Studio Gateway",
+            target_binding: "binding:virtual-main:M-7:0",
+            source: "virtual",
+            virtual: true,
+            predicted_status: "virtual_only",
+            payload: { event: "input.toggle_on", alternate_event: "switch.on", bill_machine_wash: true },
+            skip_block_reason: "Virtual studio hardware only; live dispatch would require a real gateway binding.",
+          },
+          {
+            sequence: 4,
+            runtime_stage: "machine_start",
+            signal_type: "relay_switch",
+            relay_role: "CLEANER",
+            relay_id: "CLEAN-7",
+            target_gateway_label: "Virtual Studio Gateway",
+            source: "virtual",
+            virtual: true,
+            predicted_status: "virtual_only",
+            payload: { id: "CLEAN-7", channel: 0, on: true },
+          },
+          {
+            sequence: 5,
+            runtime_stage: "stop",
+            signal_type: "relay_pulse",
+            relay_role: "EXIT",
+            relay_id: "EXIT-7",
+            target_gateway_label: "Virtual Studio Gateway",
+            source: "virtual",
+            virtual: true,
+            predicted_status: "virtual_only",
+            payload: { id: "EXIT-7", on: true, toggle_after: 1 },
+          },
+          {
+            sequence: 6,
+            runtime_stage: "stop",
+            signal_type: "relay_switch",
+            relay_role: "CLEANER",
+            relay_id: "CLEAN-7",
+            source: "virtual",
+            virtual: true,
+            predicted_status: "virtual_only",
+            payload: { id: "CLEAN-7", channel: 0, on: false },
+          },
+          {
+            sequence: 7,
+            runtime_stage: "stop",
+            signal_type: "relay_switch",
+            relay_role: "MACHINE",
+            relay_id: "M-7",
+            source: "virtual",
+            virtual: true,
+            predicted_status: "virtual_only",
+            payload: { id: "M-7", channel: 0, on: false },
+          },
+          {
+            sequence: 8,
+            runtime_stage: "session_completion",
+            signal_type: "session_event",
+            relay_role: "SESSION",
+            source: "none",
+            predicted_status: "skipped",
+            payload: { event: "SESSION_COMPLETED", reset_lane_state: true },
+          },
+        ],
         summary: "Lane relay missing.",
         dry_run_operations: [
           {
@@ -563,6 +783,69 @@ function buildSimulationResponse() {
           },
         ],
       },
+      signal_timeline: [
+        {
+          sequence: 1,
+          runtime_stage: "eligibility_sync",
+          signal_type: "session_event",
+          relay_role: "SESSION",
+          source: "none",
+          predicted_status: "sent",
+          payload: { event: "SESSION_SYNCED", allowed: false },
+        },
+        {
+          sequence: 2,
+          runtime_stage: "eligibility_sync",
+          signal_type: "relay_switch",
+          relay_role: "MACHINE",
+          relay_id: "M-7",
+          target_gateway_label: "Virtual Studio Gateway",
+          target_binding: "binding:virtual-main:M-7:0",
+          source: "virtual",
+          virtual: true,
+          predicted_status: "virtual_only",
+          payload: { id: "M-7", channel: 0, on: true },
+          skip_block_reason: "Virtual studio hardware only; live dispatch would require a real gateway binding.",
+        },
+        {
+          sequence: 3,
+          runtime_stage: "machine_start_signal",
+          signal_type: "shelly_event",
+          relay_role: "MACHINE",
+          relay_id: "M-7",
+          target_gateway_label: "Virtual Studio Gateway",
+          target_binding: "binding:virtual-main:M-7:0",
+          source: "virtual",
+          virtual: true,
+          predicted_status: "virtual_only",
+          payload: { event: "input.toggle_on", alternate_event: "switch.on", bill_machine_wash: true },
+          skip_block_reason: "Virtual studio hardware only; live dispatch would require a real gateway binding.",
+        },
+        {
+          sequence: 4,
+          runtime_stage: "machine_start",
+          signal_type: "relay_switch",
+          relay_role: "CLEANER",
+          relay_id: "CLEAN-7",
+          target_gateway_label: "Virtual Studio Gateway",
+          source: "virtual",
+          virtual: true,
+          predicted_status: "virtual_only",
+          payload: { id: "CLEAN-7", channel: 0, on: true },
+        },
+        {
+          sequence: 5,
+          runtime_stage: "stop",
+          signal_type: "relay_pulse",
+          relay_role: "EXIT",
+          relay_id: "EXIT-7",
+          target_gateway_label: "Virtual Studio Gateway",
+          source: "virtual",
+          virtual: true,
+          predicted_status: "virtual_only",
+          payload: { id: "EXIT-7", on: true, toggle_after: 1 },
+        },
+      ],
       graph_annotations: {
         nodes: {
           "question:11": { state: "warning", label: "Missing answer" },
@@ -591,7 +874,196 @@ function buildSimulationResponse() {
   };
 }
 
+function applyVirtualHardwareToGraph(graph) {
+  if (!graph.gateway_workspace.virtual?.has_virtual_hardware) {
+    graph.gateway_workspace.virtual = {
+      enabled: true,
+      has_virtual_hardware: true,
+      gateway_count: 1,
+      binding_count: 3,
+      virtual_only_relay_ids: ["M-7", "EXIT-7", "CLEAN-7"],
+      config: {
+        gateways: [{ key: "virtual-main", label: "Virtual Studio Gateway", status: "VIRTUAL" }],
+        relays: [
+          { relay_id: "M-7", name: "Lane 7 MACHINE", virtual: true },
+          { relay_id: "EXIT-7", name: "Lane 7 EXIT", virtual: true },
+          { relay_id: "CLEAN-7", name: "Lane 7 CLEANER", virtual: true },
+        ],
+        bindings: [
+          {
+            id: "virtual-main:M-7:MACHINE",
+            gateway_key: "virtual-main",
+            relay_id: "M-7",
+            role: "MACHINE",
+            services: ["MACHINE"],
+            label: "Lane 7 MACHINE",
+            virtual: true,
+          },
+          {
+            id: "virtual-main:EXIT-7:EXIT",
+            gateway_key: "virtual-main",
+            relay_id: "EXIT-7",
+            role: "EXIT",
+            services: ["EXIT"],
+            label: "Lane 7 EXIT",
+            virtual: true,
+          },
+          {
+            id: "virtual-main:CLEAN-7:CLEANER",
+            gateway_key: "virtual-main",
+            relay_id: "CLEAN-7",
+            role: "CLEANER",
+            services: ["CLEANER"],
+            label: "Lane 7 CLEANER",
+            virtual: true,
+          },
+        ],
+      },
+    };
+    graph.gateway_workspace.gateways.push({
+      id: "virtual-main",
+      key: "virtual-main",
+      label: "Virtual Studio Gateway",
+      status: "VIRTUAL",
+      virtual: true,
+      studio_only: true,
+      bindings: [
+        {
+          node_id: "binding:virtual-main:M-7:0",
+          gateway_key: "virtual-main",
+          relay_id: "M-7",
+          label: "Lane 7 MACHINE",
+          role: "MACHINE",
+          services: ["MACHINE"],
+          channel: 0,
+          virtual: true,
+        },
+        {
+          node_id: "binding:virtual-main:EXIT-7:1",
+          gateway_key: "virtual-main",
+          relay_id: "EXIT-7",
+          label: "Lane 7 EXIT",
+          role: "EXIT",
+          services: ["EXIT"],
+          channel: 0,
+          virtual: true,
+        },
+        {
+          node_id: "binding:virtual-main:CLEAN-7:2",
+          gateway_key: "virtual-main",
+          relay_id: "CLEAN-7",
+          label: "Lane 7 CLEANER",
+          role: "CLEANER",
+          services: ["CLEANER"],
+          channel: 0,
+          virtual: true,
+        },
+      ],
+    });
+    graph.gateway_workspace.relays.push(
+      { relay_id: "EXIT-7", name: "Lane 7 EXIT", virtual: true },
+      { relay_id: "CLEAN-7", name: "Lane 7 CLEANER", virtual: true }
+    );
+    graph.nodes.push(
+      {
+        id: "gateway:virtual-main",
+        type: "default",
+        position: { x: 1280, y: 360 },
+        data: {
+          kind: "edge_gateway",
+          object_id: "virtual-main",
+          label: "Virtual Studio Gateway",
+          subtitle: "VIRTUAL",
+          raw: { id: "virtual-main", label: "Virtual Studio Gateway", status: "VIRTUAL", virtual: true },
+        },
+      },
+      {
+        id: "binding:virtual-main:M-7:0",
+        type: "default",
+        position: { x: 1600, y: 360 },
+        data: {
+          kind: "relay_binding",
+          object_id: "M-7",
+          label: "Lane 7 MACHINE",
+          subtitle: "MACHINE",
+          raw: { relay_id: "M-7", label: "Lane 7 MACHINE", role: "MACHINE", services: ["MACHINE"], virtual: true },
+        },
+      }
+    );
+    graph.edges.push({
+      id: "task-service:41:MACHINE:virtual-main:M-7:0",
+      source: "task:41",
+      target: "binding:virtual-main:M-7:0",
+      type: "smoothstep",
+      label: "MACHINE",
+      data: { kind: "task_service" },
+    });
+    graph.lookups.gateways.push({
+      id: "virtual-main",
+      label: "Virtual Studio Gateway",
+      status: "VIRTUAL",
+      virtual: true,
+    });
+    graph.lookups.bindings.push({
+      id: "virtual-main:M-7:0",
+      label: "Lane 7 MACHINE",
+      gateway_id: "virtual-main",
+      relay_id: "M-7",
+      role: "MACHINE",
+      services: ["MACHINE"],
+      virtual: true,
+    });
+    graph.validation = {
+      valid: true,
+      errors: [],
+      warnings: [
+        "Studio uses virtual hardware coverage. Publishing is allowed, but live relay dispatch still requires a real edge gateway and real relay bindings.",
+      ],
+      items: [
+        {
+          severity: "warning",
+          message:
+            "Studio uses virtual hardware coverage. Publishing is allowed, but live relay dispatch still requires a real edge gateway and real relay bindings.",
+        },
+      ],
+    };
+  }
+  return graph;
+}
+
 async function installStudioRoutes(page, graph, captured) {
+  const dynamicImagePng = Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+/p9sAAAAASUVORK5CYII=",
+    "base64"
+  );
+  const customerResults = [
+    { id: 601001, customerNumber: 601001, name: "Acme Logistics", city: "Roskilde" },
+    { id: 602002, customerNumber: 602002, name: "Nordic Wash Transport", city: "Koge" },
+  ];
+
+  await page.route(/\/customers(?:\?.*)?$/i, async (route, request) => {
+    const url = new URL(request.url());
+    const search = String(url.searchParams.get("search") || "").toLowerCase();
+    captured.customerSearches ||= [];
+    captured.customerSearches.push(url.searchParams.get("search") || "");
+    const filteredCustomers = customerResults.filter(
+      (customer) => String(customer.customerNumber).includes(search) || customer.name.toLowerCase().includes(search)
+    );
+
+    await route.fulfill(
+      json({
+        data: filteredCustomers,
+        meta: {
+          pagination: {
+            page: 1,
+            limit: 10,
+            total: filteredCustomers.length,
+          },
+        },
+      })
+    );
+  });
+
   await page.route(/\/department\/selfserve\/studio\/graph(?:\?.*)?$/i, async (route, request) => {
     if (request.method() === "GET") {
       await route.fulfill(json({ data: graph }));
@@ -620,11 +1092,38 @@ async function installStudioRoutes(page, graph, captured) {
         node.data.raw = { ...node.data.raw, ...operation.data };
         node.data.label = operation.data.question;
       }
+      if (operation.action === "update" && operation.entity === "condition") {
+        const node = graph.nodes.find((entry) => entry.id === `condition:${operation.id}`);
+        node.data.raw = { ...node.data.raw, ...operation.data };
+        node.data.label = operation.data.name || node.data.label;
+        node.data.expression_summary = "All: Are mirrors folded? is true";
+      }
       if (operation.action === "update" && operation.entity === "task" && Number(operation.id) === 41) {
         const node = graph.nodes.find((entry) => entry.id === "task:41");
         node.data.raw = { ...node.data.raw, ...operation.data };
         node.data.label = operation.data.task || node.data.label;
       }
+      if (operation.action === "update" && operation.entity === "lane") {
+        const lane = graph.lookups.lanes.find((entry) => Number(entry.id) === Number(operation.id));
+        if (lane) {
+          Object.assign(lane, operation.data);
+          lane.label = operation.data.name || lane.label;
+          graph.lookups.labels.lanes[String(operation.id)] = lane.label;
+        }
+      }
+      if (operation.action === "create" && operation.entity === "lane") {
+        const newId = Math.max(0, ...graph.lookups.lanes.map((entry) => Number(entry.id) || 0)) + 1;
+        const lane = {
+          id: newId,
+          department: 6,
+          name: operation.data.name,
+          label: operation.data.name,
+          machine_type_id: operation.data.machine_type_id ?? null,
+          dynamic_image_id: operation.data.dynamic_image_id ?? null,
+        };
+        graph.lookups.lanes.push(lane);
+        graph.lookups.labels.lanes[String(newId)] = lane.label;
+      }
     }
     await route.fulfill(json({ data: graph }));
   });
@@ -638,14 +1137,47 @@ async function installStudioRoutes(page, graph, captured) {
     await route.fulfill(json({ data: graph.validation }));
   });
 
+  await page.route(/\/department\/selfserve\/studio\/virtual-hardware(?:\?.*)?$/i, async (route, request) => {
+    const body = request.postDataJSON?.() || {};
+    captured.virtualHardware.push(body);
+    if (
+      body.operation === "generate_from_lanes" ||
+      body.operation === "upsert_binding" ||
+      body.operation === "upsert_gateway"
+    ) {
+      applyVirtualHardwareToGraph(graph);
+    }
+    if (body.operation === "reset") {
+      graph.gateway_workspace.virtual = {
+        enabled: true,
+        has_virtual_hardware: false,
+        gateway_count: 0,
+        binding_count: 0,
+        config: { gateways: [], relays: [], bindings: [] },
+      };
+    }
+    await route.fulfill(json({ data: graph }));
+  });
+
   await page.route(/\/department\/selfserve\/studio\/simulate(?:\?.*)?$/i, async (route, request) => {
     captured.simulations.push(request.postDataJSON?.() || {});
     await route.fulfill(json({ data: buildSimulationResponse() }));
   });
 
+  await page.route(/\/department\/lanes\/dynamic-image(?:\?.*)?$/i, async (route, request) => {
+    captured.dynamicImages.push(new URL(request.url()));
+    await route.fulfill({
+      status: 200,
+      contentType: "image/png",
+      body: dynamicImagePng,
+    });
+  });
+
   await page.route(/\/department\/selfserve\/studio\/publish(?:\?.*)?$/i, async (route) => {
     captured.published += 1;
-    await route.fulfill(json({ data: { id: 91, status: "PUBLISHED", version_number: 4 } }));
+    await route.fulfill(
+      json({ data: { id: 91, status: "PUBLISHED", version_number: 4, warnings: graph.validation.warnings || [] } })
+    );
   });
 
   await page.route(/\/department\/selfserve\/studio\/rollback(?:\?.*)?$/i, async (route, request) => {
@@ -673,7 +1205,16 @@ test.describe("All-in-one self-serve studio", () => {
 
   test("loads the replacement graph workspace and edits a question from the inspector", async ({ page }) => {
     const graph = buildStudioGraph();
-    const captured = { graphSaves: [], layouts: [], simulations: [], gatewayActions: [], rollbacks: [], published: 0 };
+    const captured = {
+      graphSaves: [],
+      layouts: [],
+      simulations: [],
+      dynamicImages: [],
+      gatewayActions: [],
+      virtualHardware: [],
+      rollbacks: [],
+      published: 0,
+    };
     await installStudioRoutes(page, graph, captured);
 
     await page.goto("/admin/6/modules/self-serve/studio", { waitUntil: "domcontentloaded", timeout: 90_000 });
@@ -684,13 +1225,51 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.getByText("Are mirrors folded?").first()).toBeVisible();
     await expect(page.getByText("Roskilde Edge 01").first()).toBeVisible();
     await expect(page.getByTestId("studio-custom-node-question").first()).toContainText("Visibility");
-    await expect(page.getByTestId("studio-custom-node-condition").first()).toContainText("Root condition");
-    await expect(page.getByTestId("studio-custom-node-rule").first()).toContainText("Input");
+    await expect(page.getByTestId("studio-custom-node-condition").first()).toContainText("Expression");
+    await expect(page.getByTestId("studio-palette-rule")).toHaveCount(0);
+    await expect(page.getByTestId("studio-custom-node-rule")).toHaveCount(0);
     await expect(page.getByTestId("studio-custom-node-task").first()).toContainText("services");
     await expect(page.getByTestId("studio-custom-node-task").first()).toContainText("MACHINE");
     await expect(page.getByTestId("studio-custom-node-gateway").first()).toContainText("ONLINE");
     await expect(page.getByTestId("studio-custom-node-binding").first()).toContainText("MACHINE");
     await expect(page.getByTestId("studio-custom-node-scope").first()).toContainText("Forvogn");
+    await expect(page.getByTestId("studio-filter-machine-type")).toContainText("Portal");
+    await expect(page.getByTestId("studio-filter-dynamic-image")).toContainText("Machine 1");
+
+    await page.getByTestId("studio-filter-machine-type").selectOption({ label: "Portal" });
+    await expect(page.getByTestId("studio-custom-node-task").filter({ hasText: "Fold mirrors" }).first()).toBeVisible();
+    await page.getByTestId("studio-filter-machine-type").selectOption("");
+    await page.getByTestId("studio-filter-dynamic-image").selectOption({ label: "Machine 1" });
+    await expect(page.getByTestId("studio-custom-node-task").filter({ hasText: "Fold mirrors" }).first()).toBeVisible();
+    await page.getByTestId("studio-filter-dynamic-image").selectOption({ label: "Machine 2" });
+    await expect(
+      page.getByTestId("studio-custom-node-task").filter({ hasText: "Fold mirrors" }).first()
+    ).not.toBeVisible();
+    await page.getByTestId("studio-filter-dynamic-image").selectOption("");
+
+    await page.getByTestId("studio-panel-lanes").click();
+    await expect(page.getByTestId("studio-lane-list")).toContainText("Lane 7");
+    await expect(page.getByTestId("studio-lane-dynamic-preview")).toContainText("Machine 1");
+    await expect(page.getByTestId("studio-lane-dynamic-image-preview")).toBeVisible();
+    let lanePreviewUrl = new URL(await page.getByTestId("studio-lane-dynamic-image-preview").getAttribute("src"));
+    expect(lanePreviewUrl.searchParams.get("dynamic_image_id")).toBe("1");
+    await page.getByTestId("studio-lane-dynamic-image").selectOption({ label: "Machine 2" });
+    lanePreviewUrl = new URL(await page.getByTestId("studio-lane-dynamic-image-preview").getAttribute("src"));
+    expect(lanePreviewUrl.searchParams.get("dynamic_image_id")).toBe("2");
+    await page.getByTestId("studio-lane-save").click();
+    await expect
+      .poll(() =>
+        captured.graphSaves.some(
+          (save) =>
+            save.operations?.[0]?.entity === "lane" &&
+            save.operations?.[0]?.action === "update" &&
+            save.operations?.[0]?.id === 7 &&
+            save.operations?.[0]?.data?.dynamic_image_id === 2
+        )
+      )
+      .toBe(true);
+    await expect(page.getByTestId("studio-lane-row-7")).toContainText("Machine 2");
+    await page.getByTestId("studio-panel-flow").click();
 
     await page.getByTitle("Auto layout").click();
     await page.waitForTimeout(350);
@@ -745,6 +1324,10 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.getByText("Bus roof fixtures checked?").first()).toBeVisible();
     await expect(page.getByText("Start bus wash").first()).toBeVisible();
     await expect(page.getByText("Are mirrors folded?").first()).not.toBeVisible();
+    await page.getByTestId("studio-panel-tasks").click();
+    await expect(page.locator(".studio-task-list")).toContainText("Start bus wash");
+    await expect(page.locator(".studio-task-list")).not.toContainText("Fold mirrors");
+    await page.getByTestId("studio-panel-flow").click();
     await expect
       .poll(async () =>
         page.evaluate(() => {
@@ -771,9 +1354,14 @@ test.describe("All-in-one self-serve studio", () => {
       };
     });
     expect(focusedNodeMetrics.count).toBeGreaterThanOrEqual(4);
-    expect(focusedNodeMetrics.spreadX).toBeLessThan(950);
+    expect(focusedNodeMetrics.spreadX).toBeLessThan(980);
     expect(focusedNodeMetrics.spreadY).toBeLessThan(460);
+    await page.getByTestId("studio-filter-lane").selectOption({ label: "Lane 7" });
+    await expect
+      .poll(async () => page.locator('[data-testid="studio-custom-node-scope"]:visible h4').allTextContents())
+      .toEqual(expect.arrayContaining(["Lane 7", "Bus"]));
     await page.getByTestId("studio-filter-vehicle-type").selectOption("");
+    await page.getByTestId("studio-filter-lane").selectOption("");
     await expect(page.getByText("Are mirrors folded?").first()).toBeVisible();
 
     await page.locator(".studio-node-list button").filter({ hasText: "Fold mirrors" }).click();
@@ -781,6 +1369,10 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.getByTestId("studio-service-picker")).toContainText("MACHINE");
     await expect(page.getByTestId("studio-service-picker")).toContainText("Machine relay on Roskilde Edge 01");
     await expect(page.getByTestId("studio-service-picker").locator('input[value="MACHINE"]')).toBeChecked();
+    await expect(page.getByTestId("studio-task-button-picker")).toContainText("Reset");
+    await expect(page.getByTestId("studio-task-button-picker")).toContainText("Start");
+    await expect(page.getByTestId("studio-task-button-picker").locator('input[value="reset"]')).toBeChecked();
+    await expect(page.getByTestId("studio-task-button-picker").locator('input[value="start"]')).toBeChecked();
     await page.getByTestId("studio-service-picker").locator('input[value="MACHINE"]').uncheck();
     await page.getByRole("button", { name: "Save" }).click();
     await expect
@@ -795,6 +1387,32 @@ test.describe("All-in-one self-serve studio", () => {
       .toBe(true);
     await expect(page.locator('.vue-flow__node[data-id="task:41"]')).toContainText("No service");
 
+    await page.getByTestId("studio-panel-conditions").click();
+    await expect(page.locator(".studio-condition-card").filter({ hasText: "Trailer present" })).toContainText(
+      "Are mirrors folded?"
+    );
+    await expect(page.locator(".studio-condition-card").filter({ hasText: "Trailer present" })).toContainText("1 uses");
+    await page.locator(".studio-condition-card").filter({ hasText: "Trailer present" }).click();
+    await expect(page.getByTestId("condition-expression-builder")).toBeVisible();
+    await expect(page.getByTestId("condition-expression-row").first()).toContainText("Are mirrors folded?");
+    await page.getByTestId("condition-expression-add").click();
+    await page.getByTestId("condition-expression-subject").last().selectOption({ label: "Is the lift lowered?" });
+    await page.getByTestId("condition-expression-predicate-operator").last().selectOption("IS_FALSE_OR_NOT_SET");
+    await expect(page.getByTestId("condition-expression-summary")).toContainText("Is the lift lowered?");
+    await page.getByRole("button", { name: "Save" }).click();
+    await expect
+      .poll(() =>
+        captured.graphSaves.some(
+          (save) =>
+            save.operations?.[0]?.entity === "condition" &&
+            save.operations?.[0]?.data?.expression?.children?.some(
+              (child) =>
+                child.subject_type === "question" && child.subject_id === 12 && child.operator === "IS_FALSE_OR_NOT_SET"
+            )
+        )
+      )
+      .toBe(true);
+
     await page.getByTestId("studio-panel-flow").click();
     await page.locator(".studio-node-list button").filter({ hasText: "Are mirrors folded?" }).click();
     await expect(page.getByRole("heading", { name: "Inspector" })).toBeVisible();
@@ -815,7 +1433,16 @@ test.describe("All-in-one self-serve studio", () => {
 
   test("supports drag-drop quick add, gateway action, simulator, publish, and rollback panels", async ({ page }) => {
     const graph = buildStudioGraph();
-    const captured = { graphSaves: [], layouts: [], simulations: [], gatewayActions: [], rollbacks: [], published: 0 };
+    const captured = {
+      graphSaves: [],
+      layouts: [],
+      simulations: [],
+      dynamicImages: [],
+      gatewayActions: [],
+      virtualHardware: [],
+      rollbacks: [],
+      published: 0,
+    };
     await installStudioRoutes(page, graph, captured);
 
     await page.goto("/admin/6/modules/self-serve/studio", { waitUntil: "domcontentloaded", timeout: 90_000 });
@@ -836,11 +1463,34 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.getByTestId("studio-service-coverage")).toContainText("MACHINE");
     await expect(page.getByTestId("studio-service-coverage")).toContainText("Fold mirrors");
     await expect(page.getByTestId("studio-service-coverage")).toContainText("Start bus wash");
+    await page.getByRole("button", { name: "Generate from lanes" }).click();
+    await expect.poll(() => captured.virtualHardware[0]?.operation).toBe("generate_from_lanes");
+    await expect(page.getByTestId("studio-virtual-hardware")).toContainText("3 virtual bindings active");
+    await expect(page.getByText("Virtual Studio Gateway").first()).toBeVisible();
+    await expect(page.getByTestId("studio-service-coverage")).toContainText("Virtual coverage");
     await page.getByTitle("Discover gateway").click();
     await expect.poll(() => captured.gatewayActions[0]?.action).toBe("discovery");
 
+    await page.getByTestId("studio-filter-lane").selectOption({ label: "Lane 7" });
     await page.getByTestId("studio-panel-simulator").click();
+    await expect(page.getByTestId("studio-hardware-mode")).toContainText("Studio");
+    await expect(page.getByTestId("studio-simulator-scope")).toContainText("Lane 7");
+    await expect(page.getByTestId("studio-simulator-scope")).toContainText("Auto");
+    await expect(page.locator(".studio-simulator-form select")).toHaveCount(0);
+    await page.getByRole("button", { name: "Run" }).click();
+    await expect.poll(() => captured.simulations[0]?.vehicle_type_id).toBeNull();
+    await expect(page.getByTestId("studio-simulator-auto-decision")).toContainText("Auto decided: Forvogn (#2).");
+
+    await page.getByTestId("studio-filter-vehicle-type").selectOption({ label: "Bus" });
+    await expect(page.getByTestId("studio-simulator-scope")).toContainText("Bus");
+    await expect(page.locator(".studio-simulator-form select")).toHaveCount(0);
     await page.getByLabel("Registration").fill("AB12345");
+    await page.getByTestId("studio-simulator-customer-search").fill("Acme");
+    await expect.poll(() => captured.customerSearches?.at(-1)).toBe("Acme");
+    await expect(page.getByTestId("studio-simulator-customer-results")).toContainText("Acme Logistics");
+    await page.getByTestId("studio-simulator-customer-option-601001").click();
+    await expect(page.getByTestId("studio-simulator-selected-customer")).toContainText("Acme Logistics");
+    await expect(page.getByTestId("studio-simulator-selected-customer")).toContainText("#601001");
     await page.getByRole("button", { name: "Published" }).click();
     await page
       .locator(".studio-simulator-question")
@@ -848,22 +1498,89 @@ test.describe("All-in-one self-serve studio", () => {
       .getByRole("button", { name: "No" })
       .click();
     await page.getByRole("button", { name: "Run" }).click();
-    await expect.poll(() => captured.simulations[0]?.reg).toBe("AB12345");
-    await expect.poll(() => captured.simulations[0]?.config_source).toBe("published");
-    await expect.poll(() => captured.simulations[0]?.answer_overrides?.[0]).toEqual({ question_id: 11, value: false });
+    await expect.poll(() => captured.simulations.at(-1)?.reg).toBe("AB12345");
+    await expect.poll(() => captured.simulations.at(-1)?.customer_number).toBe(601001);
+    await expect.poll(() => captured.simulations.at(-1)?.lane_id).toBe(7);
+    await expect.poll(() => captured.simulations.at(-1)?.vehicle_type_id).toBe(8);
+    await expect.poll(() => captured.simulations.at(-1)?.config_source).toBe("published");
+    await expect.poll(() => captured.simulations.at(-1)?.hardware_mode).toBe("studio");
+    await expect
+      .poll(() => captured.simulations.at(-1)?.answer_overrides?.[0])
+      .toEqual({ question_id: 11, value: false });
     await expect(page.getByText("Guided Trace")).toBeVisible();
+    await expect(page.getByText("Set Are mirrors folded? so it satisfies is true.")).toBeVisible();
+    await expect(page.getByTestId("studio-simulator-dynamic-image")).toBeVisible();
+    await expect
+      .poll(() => captured.dynamicImages.at(-1)?.searchParams.get("buttons"))
+      .toBe(JSON.stringify(["reset", 1, "start"]));
+    await expect.poll(() => captured.dynamicImages.at(-1)?.searchParams.get("vehicle_type")).toBe("8");
+    await expect.poll(() => captured.dynamicImages.at(-1)?.searchParams.get("thumb_position")).toBe("5");
     await expect(page.getByText("Question visibility and answers")).toBeVisible();
     await expect(page.getByText("Answer required questions")).toBeVisible();
     await expect(page.getByText("Tasks and Services")).toBeVisible();
     await expect(page.getByText("Gateway Readiness")).toBeVisible();
+    await expect(page.getByTestId("studio-signal-timeline")).toContainText("Signals");
+    await expect(page.getByTestId("studio-signal-timeline")).toContainText("eligibility_sync / MACHINE");
+    await expect(page.getByTestId("studio-signal-timeline")).toContainText("machine_start_signal / MACHINE");
+    await expect(page.getByTestId("studio-signal-timeline")).toContainText('"bill_machine_wash":true');
+    await expect(page.getByTestId("studio-signal-timeline")).toContainText("machine_start / CLEANER");
+    await expect(page.getByTestId("studio-signal-timeline")).toContainText("stop / EXIT");
+    await expect(page.getByTestId("studio-signal-timeline")).toContainText('"toggle_after":1');
     await expect(page.locator('.vue-flow__node[data-id="question:11"]')).toHaveClass(/studio-node-sim-warning/);
     await page.getByRole("button", { name: "Show JSON" }).click();
     await expect(page.locator(".studio-json")).toContainText("Fold mirrors");
+    await expect(page.locator(".studio-json")).toContainText("signal_timeline");
 
     await page.getByTestId("studio-panel-versions").click();
     await page.getByRole("button", { name: "Publish" }).first().click();
     await expect.poll(() => captured.published).toBe(1);
+    await page.getByTestId("studio-panel-audit").click();
+    await expect(page.getByText("Studio uses virtual hardware coverage")).toBeVisible();
+    await page.getByTestId("studio-panel-versions").click();
     await page.getByRole("button", { name: "Rollback" }).last().click();
     await expect.poll(() => captured.rollbacks[0]?.target_version_id).toBe(80);
   });
+
+  test("opens legacy condition rule URLs in the studio conditions panel and blocks invalid publishes", async ({
+    page,
+  }) => {
+    const graph = buildStudioGraph();
+    graph.validation = {
+      valid: false,
+      errors: ["Condition 21 is used but has an empty expression."],
+      warnings: [],
+      items: [{ severity: "error", message: "Condition 21 is used but has an empty expression." }],
+    };
+    const captured = {
+      graphSaves: [],
+      layouts: [],
+      simulations: [],
+      dynamicImages: [],
+      gatewayActions: [],
+      virtualHardware: [],
+      rollbacks: [],
+      published: 0,
+    };
+    await installStudioRoutes(page, graph, captured);
+
+    await page.goto("/admin/6/modules/self-serve/condition-rules", { waitUntil: "domcontentloaded", timeout: 90_000 });
+
+    await expect(page).toHaveURL(/\/admin\/6\/modules\/self-serve\/studio.*tab=conditions/);
+    await expect(page.getByTestId("studio-panel-conditions")).toHaveClass(/is-active/);
+    await expect(page.locator(".studio-condition-card").filter({ hasText: "Trailer present" })).toContainText("error");
+    await expect(page.getByRole("button", { name: "Publish" }).first()).toBeDisabled();
+    await expect(page.getByTestId("studio-palette-rule")).toHaveCount(0);
+    await expect(page.getByText("Rules")).toHaveCount(0);
+
+    await page.getByTestId("studio-filter-vehicle-type").selectOption({ label: "Bus" });
+    await expect(page.getByTestId("studio-filter-vehicle-type")).toHaveValue("8");
+    await page.getByTestId("studio-panel-audit").click();
+    await page
+      .locator(".studio-validation-item")
+      .filter({ hasText: "Condition 21 is used but has an empty expression." })
+      .click();
+    await expect(page.getByRole("heading", { name: "Inspector" })).toBeVisible();
+    await expect(page.getByRole("textbox", { name: "Name" })).toHaveValue("Trailer present");
+    await expect(page.getByTestId("studio-filter-vehicle-type")).toHaveValue("");
+  });
 });
diff --git a/tests/unit/self-serve-studio-audit-navigation.spec.js b/tests/unit/self-serve-studio-audit-navigation.spec.js
new file mode 100644
index 00000000..72fae1bf
--- /dev/null
+++ b/tests/unit/self-serve-studio-audit-navigation.spec.js
@@ -0,0 +1,72 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import { resolveAuditIssueNodeIds } from "@/views/dashboards/departmentDashboard/modules/self-serve/auditIssueNavigation.js";
+
+const readSource = (relativePath) => readFileSync(join(process.cwd(), relativePath), "utf8");
+
+describe("self-serve studio audit navigation", () => {
+  const graphNodes = [
+    { id: "condition:51" },
+    { id: "condition:52" },
+    { id: "question:12" },
+    { id: "task:9" },
+    { id: "relay:relay-a" },
+  ];
+
+  it("resolves condition audit issues to graph node ids", () => {
+    expect(
+      resolveAuditIssueNodeIds(
+        {
+          message: "Condition 51 cannot reference itself in an expression.",
+        },
+        graphNodes
+      )
+    ).toEqual(["condition:51"]);
+  });
+
+  it("resolves all condition nodes in a cycle audit issue", () => {
+    expect(
+      resolveAuditIssueNodeIds(
+        {
+          message: "Condition cycle detected: 51 -> 52 -> 51",
+        },
+        graphNodes
+      )
+    ).toEqual(["condition:51", "condition:52"]);
+  });
+
+  it("uses structured node ids and filters missing graph nodes", () => {
+    expect(
+      resolveAuditIssueNodeIds(
+        {
+          message: "Server annotated issue",
+          node_ids: ["question:12", "question:999"],
+        },
+        graphNodes
+      )
+    ).toEqual(["question:12"]);
+  });
+
+  it("resolves relay ids from virtual hardware warnings", () => {
+    expect(
+      resolveAuditIssueNodeIds(
+        {
+          message: "Virtual coverage only for relay IDs: relay-a.",
+        },
+        graphNodes
+      )
+    ).toEqual(["relay:relay-a"]);
+  });
+
+  it("wires audit rows to the graph focus helper", () => {
+    const studioSource = readSource(
+      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
+    );
+
+    expect(studioSource).toContain('import { resolveAuditIssueNodeIds } from "./auditIssueNavigation.js";');
+    expect(studioSource).toContain("target_node_ids: resolveAuditIssueNodeIds(item, flowNodes.value)");
+    expect(studioSource).toContain('@click="selectValidationItem(item)"');
+    expect(studioSource).toContain("focusDebugNodes(targetNodeIds, true, { clearFilters: true })");
+  });
+});
diff --git a/tests/unit/self-serve-studio-task-scope.spec.js b/tests/unit/self-serve-studio-task-scope.spec.js
index d1f37cb2..9292fcd1 100644
--- a/tests/unit/self-serve-studio-task-scope.spec.js
+++ b/tests/unit/self-serve-studio-task-scope.spec.js
@@ -4,130 +4,90 @@ import { describe, expect, it } from "vitest";
 
 const readSource = (relativePath) => readFileSync(join(process.cwd(), relativePath), "utf8");
 
-describe("self-serve studio task scope", () => {
-  it("renders task selectors for lane and vehicle", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+describe("self-serve studio task editing", () => {
+  const studioSource = () =>
+    readSource("src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue");
 
-    expect(studioSource).toContain('v-model="taskForm.lane"');
-    expect(studioSource).toContain('v-model="taskForm.product"');
-    expect(studioSource).toContain("Select lane");
-    expect(studioSource).toContain("Select vehicle type");
-    expect(studioSource).toContain('v-for="entry in lanes"');
+  it("creates tasks with scoped runtime fields and dynamic image defaults", () => {
+    const source = studioSource();
+
+    expect(source).toContain("const createNode = async (kind) => {");
+    expect(source).toContain('task: "New task"');
+    expect(source).toContain('gate_type: "ALWAYS"');
+    expect(source).toContain("lane: parseNullableInt(filters.value.lane_id) || 0");
+    expect(source).toContain("product: parseNullableInt(filters.value.vehicle_type_id) || 0");
+    expect(source).toContain("machine_type_id: parseNullableInt(filters.value.machine_type_id)");
+    expect(source).toContain("services: []");
+    expect(source).toContain("buttons: []");
   });
 
-  it("keeps department and lane visible for machine-type task scope", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  it("normalizes task services and mapped buttons before saving inspector edits", () => {
+    const source = studioSource();
 
-    expect(studioSource).toContain('v-if="taskForm.scope_mode === \'machine_type\'" class="field"');
-    expect(studioSource).toContain('<label class="label">Department</label>');
-    expect(studioSource).toContain('<select v-model="taskForm.lane">');
-    expect(studioSource).toContain("<template v-if=\"taskForm.scope_mode === 'legacy'\">");
-    expect(studioSource).toContain('<label class="label">Vehicle Type</label>');
+    expect(source).toContain('inspectorForm.value.gate_type ||= "ALWAYS"');
+    expect(source).toContain("inspectorForm.value.services = normalizeServiceList(inspectorForm.value.services)");
+    expect(source).toContain("inspectorForm.value.buttons = normalizeButtonList(inspectorForm.value.buttons)");
+    expect(source).toContain("data.services = normalizeServiceList(data.services)");
+    expect(source).toContain("data.buttons = normalizeButtonList(data.buttons)");
   });
 
-  it("uses primary vehicle type product selection for machine scope", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  it("renders mapped dynamic image task buttons in the inspector", () => {
+    const source = studioSource();
 
-    expect(studioSource).toContain("const machineScopePrimaryVehicleTypeOptions = computed(() => {");
-    expect(studioSource).toContain("Primary Vehicle Type Product ID");
-    expect(studioSource).toContain('v-for="entry in machineScopePrimaryVehicleTypeOptions"');
-    expect(studioSource).toContain("machineScopePrimaryVehicleTypeProductId");
-    expect(studioSource).toContain('product: taskForm.value.scope_mode === "machine_type"');
+    expect(source).toContain("SELF_SERVE_TASK_BUTTON_OPTIONS");
+    expect(source).toContain('data-testid="studio-task-button-picker"');
+    expect(source).toContain('v-model="inspectorForm.buttons"');
+    expect(source).toContain("taskButtonIsSelected(inspectorForm.buttons, option.id)");
+    expect(source).toContain("taskButtonSummary(rawFor(data).buttons)");
   });
 
-  it("defaults new task modal to legacy scope so department and lane are immediately visible", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  it("renders dynamic image previews in simulator results", () => {
+    const source = studioSource();
 
-    expect(studioSource).toContain('scope_mode: "legacy"');
-    expect(studioSource).toContain("machine_type_id: scopedProductId.value || 0");
+    expect(source).toContain("const simulatorDynamicImageButtons = computed(() => {");
+    expect(source).toContain("const simulatorDynamicImageUrl = computed(() => {");
+    expect(source).toContain("buttons: JSON.stringify(simulatorDynamicImageButtons.value)");
+    expect(source).toContain('data-testid="studio-simulator-dynamic-image"');
+    expect(source).toContain('@error="onSimulatorDynamicImageError"');
   });
 
-  it("guards task submission for machine-type and legacy scope requirements", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  it("renders machine type and dynamic image filters in the studio toolbar", () => {
+    const source = studioSource();
 
-    expect(studioSource).toContain("Task name is required.");
-    expect(studioSource).toContain("Task description is required.");
-    expect(studioSource).toContain("Primary vehicle type product id is required for this scope.");
-    expect(studioSource).toContain("Department is required for Department/Lane/Vehicle scope.");
-    expect(studioSource).toContain("Lane is required for Department/Lane/Vehicle scope.");
-    expect(studioSource).toContain("Vehicle type is required for Department/Lane/Vehicle scope.");
-    expect(studioSource).toContain("if (payload.lane <= 0)");
-    expect(studioSource).toContain("if (payload.product <= 0)");
+    expect(source).toContain('dynamic_image_id: ""');
+    expect(source).toContain('data-testid="studio-filter-machine-type"');
+    expect(source).toContain('data-testid="studio-filter-dynamic-image"');
+    expect(source).toContain("lookupRows('dynamic_images')");
+    expect(source).toContain(
+      'matchesScopeFilter(node, "machine_type", normalizeFilterValue(filters.value.machine_type_id))'
+    );
+    expect(source).toContain(
+      'matchesScopeFilter(node, "dynamic_image", normalizeFilterValue(filters.value.dynamic_image_id))'
+    );
+    expect(source).toContain("laneLookupForNode(node)?.machine_type_id");
+    expect(source).toContain("laneLookupForNode(node)?.dynamic_image_id");
   });
 
-  it("requires gate reference for non-ALWAYS gate types", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  it("manages lanes and previews the selected lane dynamic image", () => {
+    const source = studioSource();
 
-    expect(studioSource).toContain('if (payload.gate_type !== "ALWAYS")');
-    expect(studioSource).toContain("if (!payload.gate_ref_id)");
-    expect(studioSource).toContain("Gate reference is required for selected gate type.");
-    expect(studioSource).toContain(
-      'payload.condition_id = payload.gate_type === "CONDITION" ? payload.gate_ref_id : null;'
-    );
+    expect(source).toContain('{ id: "lanes", label: "Lanes"');
+    expect(source).toContain("const saveLane = async () => {");
+    expect(source).toContain('entity: "lane"');
+    expect(source).toContain("const buildLaneDynamicImagePreviewUrl = (laneId, dynamicImageId) => {");
+    expect(source).toContain("dynamic_image_id: String(normalizedDynamicImageId)");
+    expect(source).toContain('data-testid="studio-lane-dynamic-image"');
+    expect(source).toContain('data-testid="studio-lane-dynamic-image-preview"');
+    expect(source).toContain('data-testid="studio-inspector-lane-dynamic-image-preview"');
   });
 
-  it("includes all task payload parameters in saveTask submission", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  it("supports task priority reordering from the task panel", () => {
+    const source = studioSource();
 
-    expect(studioSource).toContain("const payload = {");
-    expect(studioSource).toContain('task: String(taskForm.value.task || "").trim()');
-    expect(studioSource).toContain('description: String(taskForm.value.description || "").trim()');
-    expect(studioSource).toContain("order_priority: parseIntOrZero(taskForm.value.order_priority)");
-    expect(studioSource).toContain("services: normalizeTaskServices(taskForm.value.services)");
-    expect(studioSource).toContain("buttons: normalizeTaskButtons(taskForm.value.buttons)");
-    expect(studioSource).toContain(
-      "dynamic_images_vehicle_type: parseNullableInt(taskForm.value.dynamic_images_vehicle_type)"
-    );
-    expect(studioSource).toContain("gate_type: gateType");
-    expect(studioSource).toContain("gate_ref_id: null");
-    expect(studioSource).toContain("condition_id: null");
-    expect(studioSource).toContain('machine_type_id: taskForm.value.scope_mode === "machine_type"');
-    expect(studioSource).toContain(
-      "const resolvedDepartmentId = parseIntOrZero(taskForm.value.department || departmentId.value);"
-    );
-    expect(studioSource).toContain("const resolvedLaneId = parseIntOrZero(taskForm.value.lane);");
-    expect(studioSource).toContain("department: resolvedDepartmentId");
-    expect(studioSource).toContain("lane: resolvedLaneId");
-    expect(studioSource).toContain('product: taskForm.value.scope_mode === "machine_type"');
-  });
-
-  it("renders task controls for order priority and dynamic images vehicle type", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
-
-    expect(studioSource).toContain('<label class="label">Order Priority</label>');
-    expect(studioSource).toContain('v-model="taskForm.order_priority"');
-    expect(studioSource).toContain('<label class="label">Dynamic Images Thumb Position</label>');
-    expect(studioSource).toContain('v-model="taskForm.dynamic_images_vehicle_type"');
-  });
-
-  it("supports drag-and-drop reordering for task order priority", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
-
-    expect(studioSource).toContain("const onTaskDrop = async (event, newIndex) => {");
-    expect(studioSource).toContain("SessionUser.objects.self_serve_tasks.set.order_priority(entry.id, nextPriority)");
-    expect(studioSource).toContain('toast.success("Task order updated.");');
-    expect(studioSource).toContain('@dragover="onTaskDragOver($event, index)"');
-    expect(studioSource).toContain('@drop="onTaskDrop($event, index)"');
-    expect(studioSource).toContain('@dragstart="onTaskDragStart($event, index)"');
-    expect(studioSource).toContain(':draggable="!isReorderingTasks"');
-    expect(studioSource).toContain("fa-grip-lines");
+    expect(source).toContain("const reorderTask = async (taskNode, direction) => {");
+    expect(source).toContain("order_priority: index + 1");
+    expect(source).toContain('action: "reorder"');
+    expect(source).toContain('@click="reorderTask(node, -1)"');
+    expect(source).toContain('@click="reorderTask(node, 1)"');
   });
 });
diff --git a/tests/unit/self-serve-studio-vehicle-type-scope.spec.js b/tests/unit/self-serve-studio-vehicle-type-scope.spec.js
index 3e63fb14..d30410ce 100644
--- a/tests/unit/self-serve-studio-vehicle-type-scope.spec.js
+++ b/tests/unit/self-serve-studio-vehicle-type-scope.spec.js
@@ -5,47 +5,49 @@ import { describe, expect, it } from "vitest";
 const readSource = (relativePath) => readFileSync(join(process.cwd(), relativePath), "utf8");
 
 describe("self-serve studio vehicle type scope", () => {
-  it("adds a vehicle-type select bound to product query scope", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  const studioSource = () =>
+    readSource("src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue");
 
-    expect(studioSource).toContain("const scopedProductId = computed(() => parseScopedProduct(route.query.product));");
-    expect(studioSource).toContain("const scopedProductModel = computed({");
-    expect(studioSource).toContain("delete nextQuery.product;");
-    expect(studioSource).toContain('data-testid="self-serve-studio-vehicle-type-select"');
-    expect(studioSource).toContain('<option :value="null">All vehicle types</option>');
+  it("renders a vehicle type toolbar filter bound to product scope", () => {
+    const source = studioSource();
+
+    expect(source).toContain('vehicle_type_id: ""');
+    expect(source).toContain('data-testid="studio-filter-vehicle-type"');
+    expect(source).toContain('<option value="">All vehicle types</option>');
+    expect(source).toContain(':value="vehicleType.product || vehicleType.id"');
   });
 
-  it("applies product scope filtering and defaults for new records", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  it("applies vehicle type scope filtering and defaults for new records", () => {
+    const source = studioSource();
 
-    expect(studioSource).toContain(
-      "const scopedQuestions = computed(() => questions.value.filter((entry) => matchesScopedProduct(entry)));"
+    expect(source).toContain(
+      'matchesScopeFilter(node, "vehicle_type", normalizeFilterValue(filters.value.vehicle_type_id))'
     );
-    expect(studioSource).toContain(
-      "const scopedConditions = computed(() => conditions.value.filter((entry) => matchesScopedProduct(entry)));"
+    expect(source).toContain("const isSelectedScopeAnchorNode = (node) => {");
+    expect(source).toContain('["lane", "vehicle_type"].includes(kind)');
+    expect(source).toContain("if (isSelectedScopeAnchorNode(node)) {");
+    expect(source).toContain(
+      'const conditionNodes = computed(() => filteredListNodes.value.filter((node) => node.data?.kind === "condition"));'
     );
-    expect(studioSource).toContain(
-      "const scopedTasks = computed(() => tasks.value.filter((entry) => matchesScopedProduct(entry)));"
+    expect(source).toContain(
+      'const taskNodes = computed(() => filteredListNodes.value.filter((node) => node.data?.kind === "task"));'
     );
-    expect(studioSource).toContain("const machineTypeId = parseNullableInt(item.machine_type_id);");
-    expect(studioSource).toContain("return machineTypeId === scopedProductId.value;");
-    expect(studioSource).not.toContain(
-      "if (parseNullableInt(item.machine_type_id)) {\n    return true;\n  }\n  const product = parseIntOrZero(item.product);"
-    );
-    expect(studioSource).toContain("product: scopedProductId.value || 0,");
+    expect(source).toContain("product: parseNullableInt(filters.value.vehicle_type_id) || 0");
+    expect(source).toContain('return kind === "vehicle_type"');
+    expect(source).toContain(": firstFilterValue(raw.product, raw.product_id, raw.vehicle_type_id);");
   });
 
-  it("sorts scoped question and task source lists by order priority", () => {
-    const studioSource = readSource(
-      "src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue"
-    );
+  it("uses toolbar lane and vehicle type filters as the simulator scope", () => {
+    const source = studioSource();
 
-    expect(studioSource).toContain("const compareByOrderPriority = (left, right) => {");
-    expect(studioSource).toContain(".sort(compareByOrderPriority);");
-    expect(studioSource).toContain("questions.value = [...questions.value].sort(compareByOrderPriority);");
+    expect(source).toContain("const selectedSimulatorLaneId = computed(() => firstPositiveInt(");
+    expect(source).toContain("filters.value.lane_id");
+    expect(source).toContain("const selectedSimulatorVehicleTypeId = computed(() => (");
+    expect(source).toContain("vehicleTypeMatchesFilter(vehicleType, selectedValue)");
+    expect(source).toContain("lane_id: laneId");
+    expect(source).toContain("vehicle_type_id: selectedSimulatorVehicleTypeId.value");
+    expect(source).toContain('data-testid="studio-simulator-scope"');
+    expect(source).not.toContain('v-model="simulatorForm.lane_id"');
+    expect(source).not.toContain('v-model="simulatorForm.vehicle_type_id"');
   });
 });
diff --git a/tests/unit/self-serve-tasks-payload-contract.spec.js b/tests/unit/self-serve-tasks-payload-contract.spec.js
index fff8c6b6..60064b2a 100644
--- a/tests/unit/self-serve-tasks-payload-contract.spec.js
+++ b/tests/unit/self-serve-tasks-payload-contract.spec.js
@@ -20,6 +20,7 @@ describe("self-serve tasks payload contract", () => {
     const tasksSource = readSource("src/components/session/token/SessionUser/Objects/SelfServeTasks.vue");
 
     expect(tasksSource).toContain("const normalizePayload = (payload = {}) => {");
+    expect(tasksSource).toContain("normalizeSelfServeTaskButtons(payload.buttons)");
     expect(tasksSource).toContain("condition_id: normalizedGateRefId");
     expect(tasksSource).toContain("gate_type: normalizedGateType");
     expect(tasksSource).toContain("gate_ref_id: normalizedGateRefId");
@@ -27,4 +28,14 @@ describe("self-serve tasks payload contract", () => {
       "dynamic_images_vehicle_type: parseNullablePositiveInt(payload.dynamic_images_vehicle_type)"
     );
   });
+
+  it("maps reset/start task buttons through shared checkboxes", () => {
+    const formSource = readSource("src/components/session/token/SessionUser/Objects/selfServeObjectForms.js");
+    const helperSource = readSource("src/components/session/token/SessionUser/Objects/selfServeTaskButtons.js");
+
+    expect(formSource).toContain("SELF_SERVE_TASK_BUTTON_OPTIONS");
+    expect(formSource).toContain('normalizeSelfServeTaskButtons(getCheckedValues("buttons"))');
+    expect(helperSource).toContain('SELF_SERVE_TASK_BUTTON_RESET = "reset"');
+    expect(helperSource).toContain('SELF_SERVE_TASK_BUTTON_START = "start"');
+  });
 });
diff --git a/tests/unit/self-serve-try-modal.spec.js b/tests/unit/self-serve-try-modal.spec.js
index 354f0c6c..aa63b24a 100644
--- a/tests/unit/self-serve-try-modal.spec.js
+++ b/tests/unit/self-serve-try-modal.spec.js
@@ -191,7 +191,7 @@ describe("SelfServeTryModal", () => {
     mocks.activeTasks.value = [
       {
         id: 1,
-        buttons: [0, 2, 2, -1, 99],
+        buttons: ["reset", 0, 2, 2, "start", -1, 99],
         dynamic_images_vehicle_type: 5,
       },
     ];
@@ -221,7 +221,7 @@ describe("SelfServeTryModal", () => {
     expect(imageUrl.searchParams.get("current_step")).toBe("0");
     expect(imageUrl.searchParams.get("vehicle_type")).toBe("3");
     expect(imageUrl.searchParams.get("thumb_position")).toBe("5");
-    expect(JSON.parse(imageUrl.searchParams.get("buttons"))).toEqual([0, 2]);
+    expect(JSON.parse(imageUrl.searchParams.get("buttons"))).toEqual(["reset", 0, 2, "start"]);
   });
 
   it("does not render dynamic image preview without dynamic-image context", async () => {