diff --git a/openapi.yaml b/openapi.yaml
index 3e9b9a5b..691b5c54 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -5168,6 +5168,207 @@ paths:
         '404':
           $ref: '#/components/responses/NotFound'
 
+  /department/selfserve/studio/graph:
+    get:
+      tags:
+        - Self-Serve
+      summary: Get all-in-one self-serve studio graph
+      description: Returns the replacement studio workspace graph with nodes, edges, resolved lookup labels, validation, layout, versioning, simulator defaults, gateway workspace, and permissions.
+      operationId: getSelfserveStudioGraph
+      parameters:
+        - name: department
+          in: query
+          required: true
+          schema:
+            type: integer
+      responses:
+        '200':
+          description: Studio graph returned
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SelfserveStudioGraph'
+    put:
+      tags:
+        - Self-Serve
+      summary: Bulk save all-in-one self-serve studio graph changes
+      description: Creates, updates, deletes, connects, disconnects, and reorders questions, conditions, rules, tasks, scopes, attachments metadata, and gateway references while keeping layout separate from runtime behavior.
+      operationId: saveSelfserveStudioGraph
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SelfserveStudioGraphSaveRequest'
+      responses:
+        '200':
+          description: Studio graph saved
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SelfserveStudioGraph'
+        '422':
+          $ref: '#/components/responses/BadRequest'
+
+  /department/selfserve/studio/layout:
+    put:
+      tags:
+        - Self-Serve
+      summary: Save self-serve studio canvas layout
+      description: Persists canvas-only node positions and viewport state. Layout does not affect runtime wash behavior.
+      operationId: saveSelfserveStudioLayout
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SelfserveStudioLayoutSaveRequest'
+      responses:
+        '200':
+          description: Layout saved
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SelfserveStudioLayout'
+
+  /department/selfserve/studio/validate:
+    post:
+      tags:
+        - Self-Serve
+      summary: Validate self-serve studio graph
+      operationId: validateSelfserveStudioGraph
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [department]
+              properties:
+                department:
+                  type: integer
+      responses:
+        '200':
+          description: Validation result
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SelfserveStudioValidation'
+
+  /department/selfserve/studio/simulate:
+    post:
+      tags:
+        - Self-Serve
+      summary: Simulate self-serve studio runtime
+      operationId: simulateSelfserveStudioGraph
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [department, lane_id, reg]
+              properties:
+                department: { type: integer }
+                lane_id: { type: integer }
+                reg: { type: string }
+                customer_number: { type: integer, nullable: true }
+                vehicle_type_id: { type: integer, nullable: true }
+      responses:
+        '200':
+          description: Simulator result
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SelfserveVehicleAllowedResponse'
+
+  /department/selfserve/studio/publish:
+    post:
+      tags:
+        - Self-Serve
+      summary: Publish self-serve studio draft
+      operationId: publishSelfserveStudioDraft
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [department]
+              properties:
+                department: { type: integer }
+      responses:
+        '200':
+          description: Published version
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SelfserveConfigVersion'
+
+  /department/selfserve/studio/rollback:
+    post:
+      tags:
+        - Self-Serve
+      summary: Roll back self-serve studio to an earlier version
+      operationId: rollbackSelfserveStudioDraft
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [department, target_version_id]
+              properties:
+                department: { type: integer }
+                target_version_id: { type: integer }
+      responses:
+        '200':
+          description: Rollback version
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SelfserveConfigVersion'
+
+  /department/selfserve/studio/gateway-action:
+    post:
+      tags:
+        - Self-Serve
+      summary: Run permission-gated edge gateway action from studio
+      operationId: runSelfserveStudioGatewayAction
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [department, gateway_id, action]
+              properties:
+                department: { type: integer }
+                gateway_id: { type: integer }
+                action:
+                  type: string
+                  enum: [discovery, discover, update, uninstall, cancel, rotate_credentials, bindings]
+                confirm:
+                  type: boolean
+                  description: Required for dangerous gateway actions such as uninstall and credential rotation.
+                operation_id: { type: integer, nullable: true }
+                request:
+                  type: object
+                  additionalProperties: true
+                bindings:
+                  type: array
+                  items:
+                    type: object
+                    additionalProperties: true
+      responses:
+        '200':
+          description: Gateway action result
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+
   # Products Endpoints
   /products:
     get:
@@ -14561,6 +14762,203 @@ components:
       enum:
         - MACHINE
 
+    SelfserveStudioNode:
+      type: object
+      required: [id, position, data]
+      properties:
+        id:
+          type: string
+        type:
+          type: string
+          nullable: true
+        position:
+          type: object
+          required: [x, y]
+          properties:
+            x: { type: number }
+            y: { type: number }
+        data:
+          type: object
+          additionalProperties: true
+          properties:
+            kind:
+              type: string
+              enum: [question, condition, rule, task, lane, machine_type, vehicle_type, edge_gateway, relay_binding, relay, runtime_checkpoint]
+            object_id:
+              oneOf:
+                - type: integer
+                - type: string
+              nullable: true
+            label:
+              type: string
+            raw:
+              type: object
+              additionalProperties: true
+    SelfserveStudioEdge:
+      type: object
+      required: [id, source, target]
+      properties:
+        id: { type: string }
+        source: { type: string }
+        target: { type: string }
+        type: { type: string, nullable: true }
+        label: { type: string, nullable: true }
+        data:
+          type: object
+          additionalProperties: true
+    SelfserveStudioLayout:
+      type: object
+      properties:
+        nodes:
+          type: object
+          additionalProperties:
+            type: object
+            properties:
+              x: { type: number }
+              y: { type: number }
+        viewport:
+          type: object
+          additionalProperties: true
+        runtime_affecting:
+          type: boolean
+          enum: [false]
+    SelfserveStudioValidation:
+      type: object
+      properties:
+        valid:
+          type: boolean
+        errors:
+          type: array
+          items: { type: string }
+        warnings:
+          type: array
+          items: { type: string }
+        items:
+          type: array
+          items:
+            type: object
+            properties:
+              severity:
+                type: string
+                enum: [error, warning]
+              message:
+                type: string
+        stats:
+          type: object
+          additionalProperties: true
+        validated_at:
+          type: string
+          format: date-time
+    SelfserveConfigVersion:
+      type: object
+      properties:
+        id: { type: integer }
+        department_id: { type: integer }
+        status:
+          type: string
+          enum: [DRAFT, PUBLISHED, ARCHIVED]
+        version_number: { type: integer }
+        config:
+          type: object
+          additionalProperties: true
+        validation_result:
+          $ref: '#/components/schemas/SelfserveStudioValidation'
+        source_version_id: { type: integer, nullable: true }
+        created_by: { type: integer, nullable: true }
+        published_at: { type: string, nullable: true }
+        created_at: { type: string, nullable: true }
+        updated_at: { type: string, nullable: true }
+    SelfserveStudioGraph:
+      type: object
+      required: [nodes, edges, lookups, validation, layout, versions, simulator_defaults, gateway_workspace, permissions]
+      properties:
+        nodes:
+          type: array
+          items:
+            $ref: '#/components/schemas/SelfserveStudioNode'
+        edges:
+          type: array
+          items:
+            $ref: '#/components/schemas/SelfserveStudioEdge'
+        lookups:
+          type: object
+          additionalProperties: true
+        validation:
+          $ref: '#/components/schemas/SelfserveStudioValidation'
+        layout:
+          $ref: '#/components/schemas/SelfserveStudioLayout'
+        versions:
+          type: array
+          items:
+            $ref: '#/components/schemas/SelfserveConfigVersion'
+        active_config:
+          type: object
+          nullable: true
+          additionalProperties: true
+        draft:
+          type: object
+          additionalProperties: true
+        simulator_defaults:
+          type: object
+          additionalProperties: true
+        gateway_workspace:
+          type: object
+          additionalProperties: true
+        permissions:
+          type: object
+          additionalProperties:
+            type: boolean
+        meta:
+          type: object
+          additionalProperties: true
+    SelfserveStudioGraphOperation:
+      type: object
+      properties:
+        action:
+          type: string
+          enum: [create, update, delete, connect, disconnect, reorder]
+        entity:
+          type: string
+          enum: [question, condition, rule, task]
+        id:
+          type: integer
+          nullable: true
+        source:
+          type: string
+          nullable: true
+        target:
+          type: string
+          nullable: true
+        data:
+          type: object
+          additionalProperties: true
+        items:
+          type: array
+          items:
+            type: object
+            additionalProperties: true
+    SelfserveStudioGraphSaveRequest:
+      type: object
+      required: [department]
+      properties:
+        department: { type: integer }
+        operations:
+          type: array
+          items:
+            $ref: '#/components/schemas/SelfserveStudioGraphOperation'
+        nodes:
+          type: array
+          items:
+            $ref: '#/components/schemas/SelfserveStudioNode'
+        layout:
+          $ref: '#/components/schemas/SelfserveStudioLayout'
+    SelfserveStudioLayoutSaveRequest:
+      type: object
+      required: [department, layout]
+      properties:
+        department: { type: integer }
+        layout:
+          $ref: '#/components/schemas/SelfserveStudioLayout'
     SelfserveMachineType:
       type: object
       properties:
diff --git a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
index 8bb81402..cf8b6209 100644
--- a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
+++ b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
@@ -1,19 +1,20 @@
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { VueFlow, useVueFlow } from "@vue-flow/core";
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
 import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
-import SelfServeTryModal from "@/components/displays/department/tables/SelfServeTryModal.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { useAppToast } from "@/composables/useAppToast.js";
 
-const route = useRoute();
-const router = useRouter();
+const currentRoute = useRoute();
 const toast = useAppToast();
+const { fitView, zoomIn, zoomOut } = useVueFlow({ id: "self-serve-studio-flow" });
 
 const parseIntOrZero = (value) => {
   const parsed = Number.parseInt(value, 10);
@@ -28,72 +29,11 @@ const parseNullableInt = (value) => {
   return Number.isNaN(parsed) ? null : parsed;
 };
 
-const parseScopedProduct = (value) => {
-  const parsed = parseNullableInt(value);
-  return parsed && parsed > 0 ? parsed : null;
-};
+const unwrapData = (response) => response?.data?.data ?? response?.data ?? response ?? null;
 
-const compareByOrderPriority = (left, right) => {
-  const priorityDiff = parseIntOrZero(left?.order_priority) - parseIntOrZero(right?.order_priority);
-  if (priorityDiff !== 0) {
-    return priorityDiff;
-  }
-  return parseIntOrZero(left?.id) - parseIntOrZero(right?.id);
-};
-
-const nextOrderPriority = (items) => (
-  (Array.isArray(items) ? items : []).reduce((highest, entry) => (
-    Math.max(highest, parseIntOrZero(entry?.order_priority))
-  ), 0) + 1
-);
-
-const TASK_GATE_TYPES = ["ALWAYS", "CONDITION", "QUESTION"];
-const TASK_SERVICE_OPTIONS = ["MACHINE"];
-const TASK_BUTTON_MIN = 0;
-const TASK_BUTTON_MAX = 11;
-
-const normalizeTaskGateType = (value) => {
-  const gateType = String(value || "ALWAYS").toUpperCase();
-  return TASK_GATE_TYPES.includes(gateType) ? gateType : "ALWAYS";
-};
-
-const normalizeTaskServices = (value) => {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-
-  return value
-    .map((entry) => String(entry || "").toUpperCase())
-    .filter((entry, index, source) => TASK_SERVICE_OPTIONS.includes(entry) && source.indexOf(entry) === index);
-};
-
-const normalizeTaskButtons = (value) => {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-
-  const normalized = value
-    .map((entry) => parseIntOrZero(entry))
-    .filter((entry) => entry >= TASK_BUTTON_MIN && entry <= TASK_BUTTON_MAX);
-
-  return [...new Set(normalized)].sort((a, b) => a - b);
-};
-
-const ensureArray = (value) => {
-  if (Array.isArray(value)) {
-    return value;
-  }
-  if (Array.isArray(value?.list)) {
-    return value.list;
-  }
-  if (Array.isArray(value?.rows)) {
-    return value.rows;
-  }
-  if (Array.isArray(value?.data)) {
-    return value.data;
-  }
-  return [];
-};
+const requestGet = async (url, params = {}) => unwrapData(await authenticatedRequest(url, "GET", params));
+const requestPost = async (url, data = {}) => unwrapData(await authenticatedRequest(url, "POST", data));
+const requestPut = async (url, data = {}) => unwrapData(await authenticatedRequest(url, "PUT", data));
 
 const withErrorToast = (error, fallbackMessage) => {
   const message = error?.response?.data?.message
@@ -103,781 +43,526 @@ const withErrorToast = (error, fallbackMessage) => {
   toast.error(message);
 };
 
-const requestGet = async (url, params = {}) => {
-  const response = await authenticatedRequest(url, "GET", params);
-  return response?.data?.data ?? null;
-};
+const departmentId = computed(() => parseIntOrZero(currentRoute?.params?.departmentId || SessionUser.functions.getDepartmentIdFromUrl()));
 
-const requestPost = async (url, data = {}) => {
-  const response = await authenticatedRequest(url, "POST", data);
-  return response?.data?.data ?? null;
-};
-
-const requestPut = async (url, data = {}) => {
-  const response = await authenticatedRequest(url, "PUT", data);
-  return response?.data?.data ?? null;
-};
-
-const requestDelete = async (url, data = {}) => {
-  const response = await authenticatedRequest(url, "DELETE", data);
-  return response?.data?.data ?? null;
-};
-
-const departmentId = computed(() => parseIntOrZero(route.params.departmentId || SessionUser.functions.getDepartmentIdFromUrl()));
-const scopedLaneId = computed(() => parseNullableInt(route.query.lane_id));
-const scopedMachineTypeId = computed(() => parseNullableInt(route.query.machine_type_id));
-const scopedProductId = computed(() => parseScopedProduct(route.query.product));
-
-const tabs = [
-  { id: "questions", label: "Questions" },
-  { id: "conditions", label: "Conditions/Rules" },
-  { id: "tasks", label: "Tasks" },
-  { id: "simulator", label: "Simulator" },
-  { id: "history", label: "Version History" },
+const PANEL_ITEMS = [
+  { id: "flow", label: "Flow", icon: "fas fa-diagram-project" },
+  { 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" },
+  { id: "hardware", label: "Hardware", icon: "fas fa-microchip" },
+  { id: "simulator", label: "Simulator", icon: "fas fa-play" },
+  { id: "versions", label: "Versions", icon: "fas fa-clock-rotate-left" },
+  { id: "audit", label: "Audit", icon: "fas fa-clipboard-check" },
+  { id: "importExport", label: "Import/Export", icon: "fas fa-file-arrow-down" },
 ];
 
-const activeTab = ref("questions");
-const questions = ref([]);
-const conditions = ref([]);
-const rules = ref([]);
-const tasks = ref([]);
-const machineTypes = ref([]);
-const products = ref([]);
-const lanes = ref([]);
+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 flowNodes = ref([]);
+const flowEdges = ref([]);
+const graphPayload = ref(null);
+const lookups = ref({});
+const validation = ref({ valid: true, items: [], errors: [], warnings: [] });
+const gatewayWorkspace = ref({ gateways: [], relays: [], lanes: [], issues: [], actions: [] });
 const versions = ref([]);
-const activeConfig = ref(null);
-const latestValidation = ref(null);
+const activePanel = ref("flow");
+const selectedNodeId = ref(null);
+const inspectorForm = ref({});
+const simulatorForm = ref({
+  lane_id: null,
+  reg: "TEST123",
+  customer_number: null,
+  vehicle_type_id: null,
+});
+const simulatorResult = ref(null);
+const searchTerm = ref("");
+const filters = ref({
+  lane_id: "",
+  vehicle_type_id: "",
+  machine_type_id: "",
+});
+const isLoading = ref(false);
+const isSaving = ref(false);
+const layoutSaveTimer = ref(null);
+const suppressLayoutSave = ref(false);
+const exportText = ref("");
+const importText = ref("");
+const draggedTemplateKind = ref(null);
 
-const selectedConditionId = ref(null);
-const showTryModal = ref(false);
-const simulatorLaneId = ref(scopedLaneId.value);
-const simulatorReg = ref("AB12345");
-
-const showQuestionModal = ref(false);
-const showConditionModal = ref(false);
-const showRuleModal = ref(false);
-const showTaskModal = ref(false);
-const draggingTaskIndex = ref(null);
-const taskDragOverIndex = ref(null);
-const isReorderingTasks = ref(false);
-
-const questionForm = ref({
-  id: null,
-  scope_mode: "legacy",
-  department: 0,
-  lane: 0,
-  product: 0,
-  question: "",
-  description: "",
-  condition_id: null,
-  order_priority: 1,
+const graphStats = computed(() => {
+  const counts = {};
+  for (const node of flowNodes.value) {
+    const kind = node?.data?.kind || "unknown";
+    counts[kind] = (counts[kind] || 0) + 1;
+  }
+  return counts;
 });
 
-const conditionForm = ref({
-  id: null,
-  scope_mode: "legacy",
-  machine_type_id: null,
-  department: 0,
-  lane: 0,
-  product: 0,
-  condition_id: null,
-  name: "",
-  description: "",
+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 isSelectedEditable = computed(() => editableNodeKinds.includes(selectedNode.value?.data?.kind));
+
+const lookupRows = (type) => (Array.isArray(lookups.value?.[type]) ? lookups.value[type] : []);
+const labelFor = (type, id) => {
+  const normalizedId = String(id ?? "");
+  if (!normalizedId || normalizedId === "0") {
+    return "All";
+  }
+  return lookups.value?.labels?.[type]?.[normalizedId]
+    || lookupRows(type).find((row) => String(row.id) === normalizedId)?.label
+    || `${type.replaceAll("_", " ")} ${normalizedId}`;
+};
+
+const canvasNodes = computed(() => flowNodes.value.map((node) => ({
+  ...node,
+  class: [
+    node.class,
+    matchesNodeFilters(node) ? "" : "studio-node-filtered",
+    selectedNodeId.value === node.id ? "studio-node-selected" : "",
+  ].filter(Boolean).join(" "),
+})));
+
+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 gatewayNodes = computed(() => flowNodes.value.filter((node) => node.data?.kind === "edge_gateway"));
+
+const validationItems = computed(() => {
+  const items = Array.isArray(validation.value?.items) ? validation.value.items : [];
+  if (items.length > 0) {
+    return items;
+  }
+  return [
+    ...(validation.value?.errors || []).map((message) => ({ severity: "error", message })),
+    ...(validation.value?.warnings || []).map((message) => ({ severity: "warning", message })),
+  ];
 });
 
-const ruleForm = ref({
-  id: null,
-  condition_id: null,
-  type: "IS_TRUE",
-  object_type: "question",
-  object_id: null,
-  name: "",
-  description: "",
-});
+const selectedRaw = computed(() => selectedNode.value?.data?.raw || {});
 
-const taskForm = ref({
-  id: null,
-  scope_mode: "legacy",
-  machine_type_id: 0,
-  department: 0,
-  lane: 0,
-  product: 0,
-  gate_type: "ALWAYS",
-  gate_ref_id: null,
-  task: "",
-  description: "",
-  order_priority: 1,
-  services: [],
-  buttons: [],
-  dynamic_images_vehicle_type: null,
-});
-
-const scopedProductModel = computed({
-  get: () => scopedProductId.value,
-  set: (value) => {
-    const nextProductId = parseScopedProduct(value);
-    const nextQuery = { ...route.query };
-    if (nextProductId === null) {
-      delete nextQuery.product;
-    } else {
-      nextQuery.product = String(nextProductId);
-    }
-    router.replace({ query: nextQuery });
+const normalizeFlowNodes = (nodes) => (Array.isArray(nodes) ? nodes : []).map((node) => ({
+  ...node,
+  data: {
+    ...(node.data || {}),
+    label: node.data?.label || node.label || node.id,
   },
-});
+}));
 
-const ruleTypes = [
-  "IS_TRUE",
-  "IS_FALSE",
-  "IS_TRUE_OR_NOT_SET",
-  "IS_FALSE_OR_NOT_SET",
-  "IS_SET",
-  "IS_TRUE_OR_ANY_TRUE",
-];
+const normalizeFlowEdges = (edges) => (Array.isArray(edges) ? edges : []).map((edge) => ({
+  ...edge,
+  animated: ["runtime", "task_gate", "gateway_binding"].includes(edge?.data?.kind),
+  style: edgeStyle(edge?.data?.kind),
+}));
 
-const machineTypeName = (machineTypeId) => {
-  const found = machineTypes.value.find((entry) => parseInt(entry.id) === parseInt(machineTypeId));
-  return found?.name || `#${machineTypeId}`;
+const edgeStyle = (kind) => {
+  if (kind === "runtime") {
+    return { stroke: "#3b82f6", strokeWidth: 2 };
+  }
+  if (kind === "task_gate" || kind === "visibility_gate") {
+    return { stroke: "#0f766e", strokeWidth: 2 };
+  }
+  if (kind === "gateway_binding" || kind === "relay_binding" || kind === "lane_relay") {
+    return { stroke: "#7c3aed", strokeWidth: 2 };
+  }
+  if (kind === "scope") {
+    return { stroke: "#94a3b8", strokeDasharray: "5 5" };
+  }
+  return { stroke: "#64748b" };
 };
 
-const vehicleTypeOptions = computed(() => {
-  const washProducts = products.value.filter((entry) => (
-    parseIntOrZero(entry.id) > 0 && (
-      entry.is_wash === true || entry.is_wash === 1 || entry.is_wash === "1" || entry.is_wash === "true"
-    )
-  ));
-  const options = washProducts.length > 0 ? washProducts : products.value.filter((entry) => parseIntOrZero(entry.id) > 0);
-  return [...options].sort((a, b) => String(a.name || "").localeCompare(String(b.name || "")));
-});
+const hydrateFromGraph = (payload) => {
+  graphPayload.value = payload || {};
+  lookups.value = payload?.lookups || {};
+  validation.value = payload?.validation || { valid: true, items: [] };
+  gatewayWorkspace.value = payload?.gateway_workspace || { gateways: [], relays: [], lanes: [], issues: [], actions: [] };
+  versions.value = Array.isArray(payload?.versions) ? payload.versions : [];
+  simulatorForm.value = {
+    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,
+  };
 
-const machineScopePrimaryVehicleTypeOptions = computed(() => {
-  const options = vehicleTypeOptions.value.map((entry) => ({
-    id: parseIntOrZero(entry.id),
-    name: `${entry.name} (#${parseIntOrZero(entry.id)})`,
-  }));
-
-  const selectedId = parseIntOrZero(taskForm.value.machine_type_id);
-  if (selectedId > 0 && !options.some((entry) => entry.id === selectedId)) {
-    options.unshift({ id: selectedId, name: `#${selectedId}` });
-  }
-
-  return options;
-});
-
-const vehicleTypeName = (productId) => {
-  const found = vehicleTypeOptions.value.find((entry) => parseInt(entry.id) === parseInt(productId));
-  return found?.name || `#${productId}`;
-};
-
-const conditionName = (conditionId) => {
-  const found = conditions.value.find((entry) => parseInt(entry.id) === parseInt(conditionId));
-  return found?.name || `#${conditionId}`;
-};
-
-const questionName = (questionId) => {
-  const found = questions.value.find((entry) => parseInt(entry.id) === parseInt(questionId));
-  return found?.question || `#${questionId}`;
-};
-
-const scopeLabel = (item) => {
-  if (parseNullableInt(item.machine_type_id)) {
-    return `Machine type: ${machineTypeName(item.machine_type_id)}`;
-  }
-  const department = parseIntOrZero(item.department);
-  const lane = parseIntOrZero(item.lane);
-  const product = parseIntOrZero(item.product);
-  if (department === 0 && lane === 0 && product === 0) {
-    return "Shared";
-  }
-  return `Dept ${department} / Lane ${lane} / Vehicle ${product}`;
-};
-
-const matchesScopedProduct = (item) => {
-  if (!scopedProductId.value) {
-    return true;
-  }
-  const machineTypeId = parseNullableInt(item.machine_type_id);
-  if (machineTypeId) {
-    return machineTypeId === scopedProductId.value;
-  }
-  const product = parseIntOrZero(item.product);
-  return product === 0 || product === scopedProductId.value;
-};
-
-const scopedQuestions = computed(() => questions.value.filter((entry) => matchesScopedProduct(entry)));
-const scopedConditions = computed(() => conditions.value.filter((entry) => matchesScopedProduct(entry)));
-const scopedTasks = computed(() => tasks.value.filter((entry) => matchesScopedProduct(entry)));
-
-const taskGateLabel = (task) => {
-  const gateType = String(task.gate_type || "ALWAYS").toUpperCase();
-  const gateRefId = parseNullableInt(task.gate_ref_id ?? task.condition_id);
-  if (gateType === "ALWAYS" || gateRefId === null) {
-    return "Always";
-  }
-  if (gateType === "CONDITION") {
-    return `Condition: ${conditionName(gateRefId)}`;
-  }
-  if (gateType === "QUESTION") {
-    return `Question: ${questionName(gateRefId)}`;
-  }
-  return `Legacy: ${gateRefId}`;
-};
-
-const selectedConditionRules = computed(() => {
-  if (!selectedConditionId.value) {
-    return [];
-  }
-  return rules.value.filter((entry) => parseInt(entry.condition_id) === parseInt(selectedConditionId.value));
-});
-
-const availableRuleTargets = computed(() => (
-  ruleForm.value.object_type === "condition"
-    ? conditions.value.map((entry) => ({ id: parseInt(entry.id), name: entry.name }))
-    : questions.value.map((entry) => ({ id: parseInt(entry.id), name: entry.question }))
-));
-
-const availableTaskGateTargets = computed(() => {
-  if (taskForm.value.gate_type === "CONDITION") {
-    return conditions.value.map((entry) => ({ id: parseInt(entry.id), name: entry.name }));
-  }
-  if (taskForm.value.gate_type === "QUESTION") {
-    return questions.value.map((entry) => ({ id: parseInt(entry.id), name: entry.question }));
-  }
-  return [];
-});
-
-const loadStudioData = async () => {
-  try {
-    // Studio performs writes via authenticatedRequest helpers; clear ObjectsGlobal cache
-    // before reads so question/condition/rule/task lists always reflect latest mutations.
-    ObjectsGlobal.clearCache();
-
-    const [questionList, conditionList, ruleList, taskList, machineTypeList, productList, laneList] = await Promise.all([
-      SessionUser.objects.self_serve_questions.get.all(),
-      SessionUser.objects.self_serve_conditions.get.all(),
-      SessionUser.objects.self_serve_condition_rules.get.all(),
-      SessionUser.objects.self_serve_tasks.get.all(),
-      SessionUser.objects.self_serve_machine_types.get.all(),
-      SessionUser.objects.products.get.all(),
-      SessionUser.objects.department_lanes.get.all(),
-    ]);
-
-    questions.value = ensureArray(questionList).filter((entry) => [0, departmentId.value].includes(parseIntOrZero(entry.department)));
-    conditions.value = ensureArray(conditionList).filter((entry) => [0, departmentId.value].includes(parseIntOrZero(entry.department)));
-    rules.value = ensureArray(ruleList);
-    tasks.value = ensureArray(taskList)
-      .filter((entry) => [0, departmentId.value].includes(parseIntOrZero(entry.department)))
-      .sort(compareByOrderPriority);
-    questions.value = [...questions.value].sort(compareByOrderPriority);
-    machineTypes.value = ensureArray(machineTypeList);
-    products.value = ensureArray(productList);
-    lanes.value = ensureArray(laneList).filter((entry) => parseIntOrZero(entry.department) === departmentId.value);
-
-    if (!selectedConditionId.value && conditions.value.length > 0) {
-      selectedConditionId.value = conditions.value[0].id;
+  suppressLayoutSave.value = true;
+  flowNodes.value = normalizeFlowNodes(payload?.nodes || []);
+  flowEdges.value = normalizeFlowEdges(payload?.edges || []);
+  nextTick(() => {
+    suppressLayoutSave.value = false;
+    if (flowNodes.value.length > 0) {
+      fitView({ padding: 0.16, duration: 250 });
     }
+  });
+};
+
+const loadStudioGraph = async () => {
+  if (!departmentId.value) {
+    return;
+  }
+  isLoading.value = true;
+  try {
+    const payload = await requestGet("/department/selfserve/studio/graph", { department: departmentId.value });
+    hydrateFromGraph(payload);
   } catch (error) {
-    withErrorToast(error, "Failed to load studio data.");
+    withErrorToast(error, "Failed to load self-serve studio.");
+  } finally {
+    isLoading.value = false;
   }
 };
 
-const loadVersionData = async () => {
+const saveGraphOperations = async (operations, extraPayload = {}) => {
+  if (!departmentId.value || !Array.isArray(operations)) {
+    return;
+  }
+  isSaving.value = true;
   try {
-    versions.value = ensureArray(await requestGet("/department/selfserve/config/versions", { department: departmentId.value }));
-    activeConfig.value = await requestGet("/department/selfserve/config/active", { department: departmentId.value });
+    const payload = await requestPut("/department/selfserve/studio/graph", {
+      department: departmentId.value,
+      operations,
+      ...extraPayload,
+    });
+    hydrateFromGraph(payload);
+    toast.success("Studio saved.");
   } catch (error) {
-    withErrorToast(error, "Failed to load version data.");
+    withErrorToast(error, "Failed to save studio changes.");
+  } finally {
+    isSaving.value = false;
   }
 };
 
-const refreshDraft = async () => {
+const saveLayout = async () => {
+  if (!departmentId.value || suppressLayoutSave.value) {
+    return;
+  }
   try {
-    await requestPost("/department/selfserve/config/draft", { department: departmentId.value, force: true });
-    toast.success("Draft refreshed.");
-    await loadVersionData();
+    await requestPut("/department/selfserve/studio/layout", {
+      department: departmentId.value,
+      layout: {
+        nodes: flowNodes.value.map((node) => ({ id: node.id, position: node.position })),
+      },
+    });
   } catch (error) {
-    withErrorToast(error, "Failed to refresh draft.");
+    withErrorToast(error, "Failed to save layout.");
   }
 };
 
-const validateDraft = async () => {
+const scheduleLayoutSave = () => {
+  if (suppressLayoutSave.value) {
+    return;
+  }
+  window.clearTimeout(layoutSaveTimer.value);
+  layoutSaveTimer.value = window.setTimeout(saveLayout, 1200);
+};
+
+const createNode = async (kind) => {
+  const defaults = {
+    question: {
+      question: "New question",
+      description: "",
+      lane: parseNullableInt(filters.value.lane_id) || 0,
+      product: parseNullableInt(filters.value.vehicle_type_id) || 0,
+      order_priority: (graphStats.value.question || 0) + 1,
+    },
+    condition: {
+      name: "New condition",
+      description: "",
+      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: "",
+    },
+    task: {
+      task: "New task",
+      description: "",
+      gate_type: "ALWAYS",
+      gate_ref_id: null,
+      lane: parseNullableInt(filters.value.lane_id) || 0,
+      product: parseNullableInt(filters.value.vehicle_type_id) || 0,
+      machine_type_id: parseNullableInt(filters.value.machine_type_id),
+      order_priority: (graphStats.value.task || 0) + 1,
+      services: [],
+      buttons: [],
+    },
+  };
+  await saveGraphOperations([{ action: "create", entity: kind, data: defaults[kind] }]);
+};
+
+const handlePaletteDragStart = (event, kind) => {
+  draggedTemplateKind.value = kind;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "copy";
+    event.dataTransfer.setData("application/selfserve-node-kind", kind);
+  }
+};
+
+const handleCanvasDrop = async (event) => {
+  const kind = event.dataTransfer?.getData("application/selfserve-node-kind") || draggedTemplateKind.value;
+  draggedTemplateKind.value = null;
+  if (kind && NODE_TEMPLATES.some((template) => template.kind === kind)) {
+    await createNode(kind);
+  }
+};
+
+const handleConnect = async (connection) => {
+  await saveGraphOperations([{
+    action: "connect",
+    source: connection.source,
+    target: connection.target,
+  }]);
+};
+
+const handleNodeClick = ({ node }) => {
+  selectedNodeId.value = node?.id || null;
+  activePanel.value = "inspector";
+};
+
+const selectNode = (nodeId) => {
+  selectedNodeId.value = nodeId;
+  activePanel.value = "inspector";
+};
+
+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 === "task") {
+    inspectorForm.value.gate_type ||= "ALWAYS";
+    inspectorForm.value.services = Array.isArray(inspectorForm.value.services) ? inspectorForm.value.services : [];
+    inspectorForm.value.buttons = Array.isArray(inspectorForm.value.buttons) ? inspectorForm.value.buttons : [];
+  }
+};
+
+const saveInspector = async () => {
+  if (!selectedNode.value || !isSelectedEditable.value) {
+    return;
+  }
+  const entity = selectedNode.value.data.kind;
+  const id = selectedNode.value.data.object_id || selectedRaw.value.id;
+  await saveGraphOperations([{
+    action: "update",
+    entity,
+    id,
+    data: inspectorForm.value,
+  }]);
+};
+
+const deleteSelected = async () => {
+  if (!selectedNode.value || !isSelectedEditable.value) {
+    return;
+  }
+  const entity = selectedNode.value.data.kind;
+  const id = selectedNode.value.data.object_id || selectedRaw.value.id;
+  await saveGraphOperations([{ action: "delete", entity, id }]);
+  selectedNodeId.value = null;
+};
+
+const validateGraph = async () => {
   try {
-    latestValidation.value = await requestPost("/department/selfserve/config/validate", { department: departmentId.value });
-    toast.success(latestValidation.value?.validation?.valid ? "Draft is valid." : "Draft has validation errors.");
-    await loadVersionData();
+    const payload = await requestPost("/department/selfserve/studio/validate", { department: departmentId.value });
+    validation.value = payload || { valid: true, items: [] };
+    toast[validation.value?.valid ? "success" : "error"](validation.value?.valid ? "Studio graph is valid." : "Validation found issues.");
   } catch (error) {
-    withErrorToast(error, "Failed to validate draft.");
+    withErrorToast(error, "Validation failed.");
   }
 };
 
 const publishDraft = async () => {
-  if (!window.confirm("Publish current draft?")) {
-    return;
-  }
   try {
-    await requestPost("/department/selfserve/config/publish", { department: departmentId.value });
+    await requestPost("/department/selfserve/studio/publish", { department: departmentId.value });
     toast.success("Draft published.");
-    await loadVersionData();
+    await loadStudioGraph();
   } catch (error) {
-    withErrorToast(error, "Failed to publish draft.");
+    withErrorToast(error, "Publish failed.");
   }
 };
 
-const rollbackToVersion = async (versionId) => {
-  if (!window.confirm(`Rollback to version #${versionId}?`)) {
-    return;
-  }
+const rollbackVersion = async (versionId) => {
   try {
-    await requestPost("/department/selfserve/config/rollback", {
+    await requestPost("/department/selfserve/studio/rollback", {
       department: departmentId.value,
       target_version_id: versionId,
     });
-    toast.success("Rollback completed.");
-    await loadVersionData();
+    toast.success("Version rolled back.");
+    await loadStudioGraph();
   } catch (error) {
-    withErrorToast(error, "Failed to rollback version.");
+    withErrorToast(error, "Rollback failed.");
   }
 };
 
-const openQuestionModal = (record = null) => {
-  questionForm.value = record
-    ? {
-      ...record,
-      scope_mode: parseIntOrZero(record.department) === 0 && parseIntOrZero(record.lane) === 0 && parseIntOrZero(record.product) === 0 ? "shared" : "legacy",
-      order_priority: parseIntOrZero(record.order_priority),
-    }
-    : {
-      id: null,
-      scope_mode: "legacy",
+const runGatewayAction = async (gatewayId, action, confirm = false) => {
+  try {
+    await requestPost("/department/selfserve/studio/gateway-action", {
       department: departmentId.value,
-      lane: scopedLaneId.value || 0,
-      product: scopedProductId.value || 0,
-      question: "",
-      description: "",
-      condition_id: null,
-      order_priority: nextOrderPriority(questions.value),
-    };
-  showQuestionModal.value = true;
-};
-
-const saveQuestion = async () => {
-  const payload = {
-    question: String(questionForm.value.question || "").trim(),
-    description: String(questionForm.value.description || "").trim(),
-    condition_id: parseNullableInt(questionForm.value.condition_id),
-    order_priority: parseIntOrZero(questionForm.value.order_priority),
-    department: questionForm.value.scope_mode === "shared" ? 0 : parseIntOrZero(questionForm.value.department || departmentId.value),
-    lane: questionForm.value.scope_mode === "shared" ? 0 : parseIntOrZero(questionForm.value.lane),
-    product: questionForm.value.scope_mode === "shared" ? 0 : parseIntOrZero(questionForm.value.product),
-  };
-
-  if (!payload.question) {
-    toast.error("Question text is required.");
-    return;
-  }
-
-  if (!payload.description) {
-    toast.error("Question description is required.");
-    return;
-  }
-
-  if (questionForm.value.scope_mode === "legacy") {
-    if (payload.department <= 0) {
-      toast.error("Department is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-    if (payload.lane <= 0) {
-      toast.error("Lane is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-    if (payload.product <= 0) {
-      toast.error("Vehicle type is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-  }
-
-  try {
-    if (questionForm.value.id) {
-      await requestPut("/department/selfserve/questions", { id: questionForm.value.id, ...payload });
-    } else {
-      await requestPost("/department/selfserve/questions", payload);
-    }
-    toast.success("Question saved.");
-    showQuestionModal.value = false;
-    await loadStudioData();
-    await loadVersionData();
+      gateway_id: gatewayId,
+      action,
+      confirm,
+    });
+    toast.success("Gateway action queued.");
+    await loadStudioGraph();
   } catch (error) {
-    withErrorToast(error, "Failed to save question.");
+    withErrorToast(error, "Gateway action failed.");
   }
 };
 
-const openConditionModal = (record = null) => {
-  conditionForm.value = record
-    ? {
-      ...record,
-      scope_mode: parseNullableInt(record.machine_type_id) ? "machine_type" : "legacy",
-    }
-    : {
-      id: null,
-      scope_mode: scopedMachineTypeId.value ? "machine_type" : "legacy",
-      machine_type_id: scopedProductId.value || scopedMachineTypeId.value || 0,
+const runSimulator = async () => {
+  try {
+    simulatorResult.value = await requestPost("/department/selfserve/studio/simulate", {
       department: departmentId.value,
-      lane: scopedLaneId.value || 0,
-      product: scopedProductId.value || 0,
-      condition_id: null,
-      name: "",
-      description: "",
+      lane_id: parseIntOrZero(simulatorForm.value.lane_id),
+      reg: simulatorForm.value.reg,
+      customer_number: parseNullableInt(simulatorForm.value.customer_number),
+      vehicle_type_id: parseNullableInt(simulatorForm.value.vehicle_type_id),
+    });
+  } catch (error) {
+    withErrorToast(error, "Simulation failed.");
+  }
+};
+
+const reorderTask = async (taskNode, direction) => {
+  const ordered = taskNodes.value
+    .map((node) => node.data.raw)
+    .filter(Boolean)
+    .sort((left, right) => parseIntOrZero(left.order_priority) - parseIntOrZero(right.order_priority));
+  const currentIndex = ordered.findIndex((task) => parseIntOrZero(task.id) === parseIntOrZero(taskNode.data.object_id || taskNode.data.raw?.id));
+  const swapIndex = currentIndex + direction;
+  if (currentIndex < 0 || swapIndex < 0 || swapIndex >= ordered.length) {
+    return;
+  }
+  const next = [...ordered];
+  [next[currentIndex], next[swapIndex]] = [next[swapIndex], next[currentIndex]];
+  await saveGraphOperations([{
+    action: "reorder",
+    entity: "task",
+    items: next.map((task, index) => ({ id: task.id, order_priority: index + 1 })),
+  }]);
+};
+
+const exportGraph = () => {
+  exportText.value = JSON.stringify({
+    nodes: flowNodes.value,
+    edges: flowEdges.value,
+    validation: validation.value,
+    lookups: lookups.value,
+    versions: versions.value,
+    gateway_workspace: gatewayWorkspace.value,
+  }, null, 2);
+};
+
+const importLayout = async () => {
+  try {
+    const parsed = JSON.parse(importText.value);
+    const nodes = Array.isArray(parsed.nodes) ? parsed.nodes : [];
+    await saveGraphOperations([], {
+      layout: {
+        nodes: nodes.map((node) => ({ id: node.id, position: node.position })),
+      },
+    });
+    toast.success("Layout imported.");
+  } catch (error) {
+    withErrorToast(error, "Import failed.");
+  }
+};
+
+const autoLayout = () => {
+  const columns = {
+    runtime_checkpoint: 0,
+    lane: 0,
+    machine_type: 0,
+    vehicle_type: 0,
+    condition: 360,
+    rule: 600,
+    question: 840,
+    task: 1120,
+    edge_gateway: 1420,
+    relay_binding: 1660,
+    relay: 1900,
+  };
+  const offsets = {};
+  flowNodes.value = flowNodes.value.map((node) => {
+    const kind = node.data?.kind || "unknown";
+    offsets[kind] = offsets[kind] || 0;
+    const position = {
+      x: columns[kind] ?? 220,
+      y: 120 + offsets[kind] * 118,
     };
-  showConditionModal.value = true;
-};
-
-const saveCondition = async () => {
-  const payload = {
-    name: String(conditionForm.value.name || "").trim(),
-    description: String(conditionForm.value.description || "").trim(),
-    condition_id: parseNullableInt(conditionForm.value.condition_id),
-    machine_type_id: conditionForm.value.scope_mode === "machine_type" ? parseNullableInt(conditionForm.value.machine_type_id) : null,
-    department: conditionForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(conditionForm.value.department || departmentId.value),
-    lane: conditionForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(conditionForm.value.lane),
-    product: conditionForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(conditionForm.value.product),
-  };
-
-  if (!payload.name) {
-    toast.error("Condition name is required.");
-    return;
-  }
-
-  if (!payload.description) {
-    toast.error("Condition description is required.");
-    return;
-  }
-
-  if (conditionForm.value.scope_mode === "machine_type") {
-    if (!payload.machine_type_id) {
-      toast.error("Machine type is required for this scope.");
-      return;
-    }
-  } else {
-    if (payload.department <= 0) {
-      toast.error("Department is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-    if (payload.lane <= 0) {
-      toast.error("Lane is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-    if (payload.product <= 0) {
-      toast.error("Vehicle type is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-  }
-
-  try {
-    if (conditionForm.value.id) {
-      await requestPut("/department/selfserve/conditions", { id: conditionForm.value.id, ...payload });
-    } else {
-      await requestPost("/department/selfserve/conditions", payload);
-    }
-    toast.success("Condition saved.");
-    showConditionModal.value = false;
-    await loadStudioData();
-    await loadVersionData();
-  } catch (error) {
-    withErrorToast(error, "Failed to save condition.");
-  }
-};
-
-const openRuleModal = (record = null) => {
-  ruleForm.value = record
-    ? { ...record }
-    : {
-      id: null,
-      condition_id: parseNullableInt(selectedConditionId.value),
-      type: "IS_TRUE",
-      object_type: "question",
-      object_id: null,
-      name: "",
-      description: "",
-    };
-  showRuleModal.value = true;
-};
-
-const saveRule = async () => {
-  const payload = {
-    condition_id: parseNullableInt(ruleForm.value.condition_id),
-    type: String(ruleForm.value.type || "IS_TRUE"),
-    object_type: String(ruleForm.value.object_type || "question"),
-    object_id: parseNullableInt(ruleForm.value.object_id),
-    name: String(ruleForm.value.name || "").trim(),
-    description: String(ruleForm.value.description || "").trim(),
-  };
-  try {
-    if (ruleForm.value.id) {
-      await requestPut("/department/selfserve/condition/rules", { id: ruleForm.value.id, ...payload });
-    } else {
-      await requestPost("/department/selfserve/condition/rules", payload);
-    }
-    toast.success("Rule saved.");
-    showRuleModal.value = false;
-    await loadStudioData();
-    await loadVersionData();
-  } catch (error) {
-    withErrorToast(error, "Failed to save rule.");
-  }
-};
-
-const openTaskModal = (record = null) => {
-  taskForm.value = record
-    ? {
-      ...record,
-      machine_type_id: parseIntOrZero(record.machine_type_id),
-      scope_mode: parseNullableInt(record.machine_type_id) ? "machine_type" : "legacy",
-      gate_type: normalizeTaskGateType(record.gate_type || (parseNullableInt(record.gate_ref_id ?? record.condition_id) ? "CONDITION" : "ALWAYS")),
-      gate_ref_id: parseNullableInt(record.gate_ref_id ?? record.condition_id),
-      order_priority: parseIntOrZero(record.order_priority),
-      services: normalizeTaskServices(record.services),
-      buttons: normalizeTaskButtons(record.buttons),
-      dynamic_images_vehicle_type: parseNullableInt(record.dynamic_images_vehicle_type),
-    }
-    : {
-      id: null,
-      scope_mode: "legacy",
-      machine_type_id: scopedProductId.value || 0,
-      department: departmentId.value,
-      lane: scopedLaneId.value || 0,
-      product: scopedProductId.value || 0,
-      gate_type: "ALWAYS",
-      gate_ref_id: null,
-      task: "",
-      description: "",
-      order_priority: nextOrderPriority(tasks.value),
-      services: [],
-      buttons: [],
-      dynamic_images_vehicle_type: null,
-    };
-  showTaskModal.value = true;
-};
-
-const saveTask = async () => {
-  const machineScopePrimaryVehicleTypeProductId = taskForm.value.scope_mode === "machine_type"
-    ? parseIntOrZero(taskForm.value.machine_type_id)
-    : 0;
-  const gateType = normalizeTaskGateType(taskForm.value.gate_type);
-  const resolvedDepartmentId = parseIntOrZero(taskForm.value.department || departmentId.value);
-  const resolvedLaneId = parseIntOrZero(taskForm.value.lane);
-
-  const payload = {
-    task: String(taskForm.value.task || "").trim(),
-    description: String(taskForm.value.description || "").trim(),
-    order_priority: parseIntOrZero(taskForm.value.order_priority),
-    services: normalizeTaskServices(taskForm.value.services),
-    buttons: normalizeTaskButtons(taskForm.value.buttons),
-    dynamic_images_vehicle_type: parseNullableInt(taskForm.value.dynamic_images_vehicle_type),
-    gate_type: gateType,
-    gate_ref_id: null,
-    condition_id: null,
-    machine_type_id: taskForm.value.scope_mode === "machine_type"
-      ? (machineScopePrimaryVehicleTypeProductId > 0 ? machineScopePrimaryVehicleTypeProductId : null)
-      : null,
-    department: resolvedDepartmentId,
-    lane: resolvedLaneId,
-    product: taskForm.value.scope_mode === "machine_type"
-      ? machineScopePrimaryVehicleTypeProductId
-      : parseIntOrZero(taskForm.value.product),
-  };
-
-  if (!payload.task) {
-    toast.error("Task name is required.");
-    return;
-  }
-
-  if (!payload.description) {
-    toast.error("Task description is required.");
-    return;
-  }
-
-  if (taskForm.value.scope_mode === "machine_type") {
-    if (!machineScopePrimaryVehicleTypeProductId) {
-      toast.error("Primary vehicle type product id is required for this scope.");
-      return;
-    }
-  } else {
-    if (payload.department <= 0) {
-      toast.error("Department is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-    if (payload.lane <= 0) {
-      toast.error("Lane is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-    if (payload.product <= 0) {
-      toast.error("Vehicle type is required for Department/Lane/Vehicle scope.");
-      return;
-    }
-  }
-
-  if (payload.gate_type !== "ALWAYS") {
-    payload.gate_ref_id = parseNullableInt(taskForm.value.gate_ref_id);
-    if (!payload.gate_ref_id) {
-      toast.error("Gate reference is required for selected gate type.");
-      return;
-    }
-    payload.condition_id = payload.gate_type === "CONDITION" ? payload.gate_ref_id : null;
-  }
-
-  try {
-    if (taskForm.value.id) {
-      await requestPut("/department/selfserve/tasks", { id: taskForm.value.id, ...payload });
-    } else {
-      await requestPost("/department/selfserve/tasks", payload);
-    }
-    toast.success("Task saved.");
-    showTaskModal.value = false;
-    await loadStudioData();
-    await loadVersionData();
-  } catch (error) {
-    withErrorToast(error, "Failed to save task.");
-  }
-};
-
-const deleteRecord = async (type, id) => {
-  if (!window.confirm(`Delete ${type} #${id}?`)) {
-    return;
-  }
-  const endpointMap = {
-    question: "/department/selfserve/questions",
-    condition: "/department/selfserve/conditions",
-    rule: "/department/selfserve/condition/rules",
-    task: "/department/selfserve/tasks",
-  };
-  try {
-    await requestDelete(endpointMap[type], { id });
-    toast.success(`${type} deleted.`);
-    await loadStudioData();
-    await loadVersionData();
-  } catch (error) {
-    withErrorToast(error, `Failed to delete ${type}.`);
-  }
-};
-
-const toggleTaskButton = (buttonIndex) => {
-  const value = parseIntOrZero(buttonIndex);
-  const current = Array.isArray(taskForm.value.buttons) ? [...taskForm.value.buttons] : [];
-  taskForm.value.buttons = current.includes(value)
-    ? current.filter((entry) => entry !== value)
-    : [...current, value].sort((a, b) => a - b);
-};
-
-const resetTaskDragState = () => {
-  draggingTaskIndex.value = null;
-  taskDragOverIndex.value = null;
-};
-
-const onTaskDragStart = (event, index) => {
-  if (!SessionUser.canAccessAdmin() || isReorderingTasks.value) {
-    return;
-  }
-  draggingTaskIndex.value = index;
-  event.dataTransfer.effectAllowed = "move";
-  event.dataTransfer.setData("text/plain", String(index));
-};
-
-const onTaskDragOver = (event, index) => {
-  if (draggingTaskIndex.value === null) {
-    return;
-  }
-  event.preventDefault();
-  taskDragOverIndex.value = index;
-};
-
-const onTaskDragEnd = () => {
-  resetTaskDragState();
-};
-
-const onTaskDrop = async (event, newIndex) => {
-  event.preventDefault();
-  const oldIndex = draggingTaskIndex.value;
-  resetTaskDragState();
-
-  if (oldIndex === null || oldIndex === newIndex) {
-    return;
-  }
-
-  const reorderedTasks = [...scopedTasks.value];
-  const [movedTask] = reorderedTasks.splice(oldIndex, 1);
-  reorderedTasks.splice(newIndex, 0, movedTask);
-
-  const nextPriorityById = new Map();
-  reorderedTasks.forEach((entry, index) => {
-    nextPriorityById.set(parseIntOrZero(entry.id), index + 1);
+    offsets[kind] += 1;
+    return { ...node, position };
   });
-
-  const updates = [];
-  for (const entry of reorderedTasks) {
-    const nextPriority = nextPriorityById.get(parseIntOrZero(entry.id));
-    if (parseIntOrZero(entry.order_priority) !== nextPriority) {
-      updates.push(SessionUser.objects.self_serve_tasks.set.order_priority(entry.id, nextPriority));
-    }
-  }
-
-  if (updates.length === 0) {
-    return;
-  }
-
-  tasks.value = tasks.value
-    .map((entry) => {
-      const entryId = parseIntOrZero(entry.id);
-      const nextPriority = nextPriorityById.get(entryId);
-      if (!nextPriority) {
-        return entry;
-      }
-      return {
-        ...entry,
-        order_priority: nextPriority,
-      };
-    })
-    .sort(compareByOrderPriority);
-
-  isReorderingTasks.value = true;
-  try {
-    await Promise.all(updates);
-    toast.success("Task order updated.");
-    await loadStudioData();
-    await loadVersionData();
-  } catch (error) {
-    withErrorToast(error, "Failed to update task order.");
-    await loadStudioData();
-  } finally {
-    isReorderingTasks.value = false;
-  }
+  scheduleLayoutSave();
+  nextTick(() => fitView({ padding: 0.14, duration: 250 }));
 };
 
-const changeTab = async (tabId) => {
-  activeTab.value = tabId;
-  await router.replace({ query: { ...route.query, tab: tabId } });
+const matchesNodeFilters = (node) => {
+  const term = searchTerm.value.trim().toLowerCase();
+  const label = String(node?.data?.label || node?.id || "").toLowerCase();
+  const raw = node?.data?.raw || {};
+  if (term && !label.includes(term) && !String(node?.id || "").toLowerCase().includes(term)) {
+    return false;
+  }
+  if (filters.value.lane_id && String(raw.lane || raw.id || "") !== String(filters.value.lane_id) && node.data?.kind !== "lane") {
+    return false;
+  }
+  if (filters.value.vehicle_type_id && String(raw.product || "") !== String(filters.value.vehicle_type_id) && node.data?.kind !== "vehicle_type") {
+    return false;
+  }
+  if (filters.value.machine_type_id && String(raw.machine_type_id || raw.id || "") !== String(filters.value.machine_type_id) && node.data?.kind !== "machine_type") {
+    return false;
+  }
+  return true;
 };
 
-watch(() => route.query.tab, (value) => {
-  const candidate = typeof value === "string" ? value : "questions";
-  activeTab.value = tabs.some((entry) => entry.id === candidate) ? candidate : "questions";
-}, { immediate: true });
+const nodeIcon = (kind) => ({
+  question: "fas fa-circle-question",
+  condition: "fas fa-code-branch",
+  rule: "fas fa-gavel",
+  task: "fas fa-list-check",
+  lane: "fas fa-road",
+  machine_type: "fas fa-gears",
+  vehicle_type: "fas fa-truck",
+  edge_gateway: "fas fa-microchip",
+  relay_binding: "fas fa-plug-circle-bolt",
+  relay: "fas fa-toggle-on",
+  runtime_checkpoint: "fas fa-flag-checkered",
+}[kind] || "fas fa-circle");
 
-watch(scopedConditions, (nextConditions) => {
-  if (nextConditions.length === 0) {
-    selectedConditionId.value = null;
-    return;
-  }
-  const hasSelectedCondition = nextConditions.some((entry) => parseInt(entry.id) === parseInt(selectedConditionId.value || 0));
-  if (!hasSelectedCondition) {
-    selectedConditionId.value = nextConditions[0].id;
-  }
-}, { immediate: true });
+const nodeTone = (kind) => ({
+  question: "is-question",
+  condition: "is-condition",
+  rule: "is-rule",
+  task: "is-task",
+  edge_gateway: "is-gateway",
+  relay_binding: "is-hardware",
+  relay: "is-hardware",
+  lane: "is-scope",
+  machine_type: "is-scope",
+  vehicle_type: "is-scope",
+  runtime_checkpoint: "is-runtime",
+}[kind] || "is-default");
 
-onMounted(async () => {
-  await loadStudioData();
-  await loadVersionData();
-});
+const formatJson = (value) => JSON.stringify(value || {}, null, 2);
+
+watch(selectedNode, refreshInspectorForm);
+watch(flowNodes, scheduleLayoutSave, { deep: true });
+watch(departmentId, loadStudioGraph);
+
+onMounted(loadStudioGraph);
 </script>
 
 <template>
@@ -887,670 +572,861 @@ onMounted(async () => {
         :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())"
         :error="$t('admin.errors.select_department')"
       >
-        <section data-testid="self-serve-studio">
-          <PageTitle title="Self-Serve Studio" subtitle="Versioned configuration authoring">
+        <section class="self-serve-studio" data-testid="self-serve-studio">
+          <PageTitle title="Self-Serve Studio" subtitle="All-in-one flow, gateway, simulation, and publish workspace">
             <template #buttons>
-              <button class="button is-link is-light" @click="loadStudioData">
-                <span class="icon"><i class="fas fa-rotate"></i></span>
-                <span>Reload</span>
-              </button>
+              <div class="buttons studio-page-actions">
+                <button class="button is-light" :class="{ 'is-loading': isLoading }" @click="loadStudioGraph">
+                  <span class="icon"><i class="fas fa-rotate"></i></span>
+                  <span>Reload</span>
+                </button>
+                <button class="button is-link is-light" @click="validateGraph">
+                  <span class="icon"><i class="fas fa-circle-check"></i></span>
+                  <span>Validate</span>
+                </button>
+                <button class="button is-primary" :disabled="!permissions.can_publish || validation?.valid === false" @click="publishDraft">
+                  <span class="icon"><i class="fas fa-cloud-arrow-up"></i></span>
+                  <span>Publish</span>
+                </button>
+              </div>
             </template>
           </PageTitle>
 
-          <div v-if="scopedLaneId || scopedMachineTypeId || scopedProductId" class="notification is-info is-light">
-            <strong>Scoped:</strong>
-            <span v-if="scopedLaneId" class="ml-2">Lane #{{ scopedLaneId }}</span>
-            <span v-if="scopedMachineTypeId" class="ml-2">Machine type {{ machineTypeName(scopedMachineTypeId) }}</span>
-            <span v-if="scopedProductId" class="ml-2">Vehicle type {{ vehicleTypeName(scopedProductId) }}</span>
-          </div>
+          <div class="studio-shell">
+            <aside class="studio-sidebar" aria-label="Self-serve studio panels">
+              <button
+                v-for="panel in PANEL_ITEMS"
+                :key="panel.id"
+                class="studio-panel-button"
+                :class="{ 'is-active': activePanel === panel.id }"
+                type="button"
+                :data-testid="`studio-panel-${panel.id}`"
+                @click="activePanel = panel.id"
+              >
+                <span class="icon"><i :class="panel.icon"></i></span>
+                <span>{{ panel.label }}</span>
+              </button>
+            </aside>
 
-          <div class="tabs is-boxed mb-4">
-            <ul>
-              <li v-for="tab in tabs" :key="tab.id" :class="{ 'is-active': activeTab === tab.id }">
-                <a @click.prevent="changeTab(tab.id)">{{ tab.label }}</a>
-              </li>
-            </ul>
-          </div>
-
-          <div
-            v-if="['questions', 'conditions', 'tasks'].includes(activeTab)"
-            class="is-flex is-justify-content-flex-end mb-4"
-          >
-            <div class="field studio-vehicle-type-filter mb-0">
-              <label class="label is-size-7 has-text-grey mb-1">Vehicle Type</label>
-              <div class="control">
-                <div class="select is-small is-fullwidth">
-                  <select v-model="scopedProductModel" data-testid="self-serve-studio-vehicle-type-select">
-                    <option :value="null">All vehicle types</option>
-                    <option
-                      v-for="entry in vehicleTypeOptions"
-                      :key="entry.id"
-                      :value="parseInt(entry.id)"
-                    >
-                      {{ entry.name }}
-                    </option>
+            <main class="studio-main">
+              <div class="studio-toolbar">
+                <div class="studio-search">
+                  <span class="icon"><i class="fas fa-magnifying-glass"></i></span>
+                  <input v-model="searchTerm" class="input" type="search" placeholder="Search graph">
+                </div>
+                <div class="select is-small">
+                  <select v-model="filters.lane_id">
+                    <option value="">All lanes</option>
+                    <option v-for="lane in lookupRows('lanes')" :key="lane.id" :value="lane.id">{{ lane.label }}</option>
                   </select>
                 </div>
-              </div>
-            </div>
-          </div>
-
-          <template v-if="activeTab === 'questions'">
-            <div class="buttons mb-3">
-              <button class="button is-primary" @click="openQuestionModal()">Add Question</button>
-            </div>
-            <table class="table is-fullwidth is-striped is-hoverable">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>Question</th>
-                  <th>If Condition</th>
-                  <th>Scope</th>
-                  <th class="has-text-right">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="item in scopedQuestions" :key="item.id">
-                  <td>{{ item.order_priority }}</td>
-                  <td>{{ item.question }}</td>
-                  <td>{{ item.condition_id ? conditionName(item.condition_id) : "None" }}</td>
-                  <td>{{ scopeLabel(item) }}</td>
-                  <td class="has-text-right">
-                    <button class="button is-small is-info is-light mr-2" @click="openQuestionModal(item)">
-                      <i class="fas fa-pen"></i>
-                    </button>
-                    <button class="button is-small is-danger is-light" @click="deleteRecord('question', item.id)">
-                      <i class="fas fa-trash"></i>
-                    </button>
-                  </td>
-                </tr>
-                <tr v-if="scopedQuestions.length === 0">
-                  <td colspan="5" class="has-text-centered is-italic">No questions configured.</td>
-                </tr>
-              </tbody>
-            </table>
-          </template>
-
-          <template v-else-if="activeTab === 'conditions'">
-            <div class="columns is-variable is-5">
-              <div class="column is-7">
-                <div class="buttons mb-3">
-                  <button class="button is-primary" @click="openConditionModal()">Add Condition</button>
+                <div class="select is-small">
+                  <select v-model="filters.vehicle_type_id">
+                    <option value="">All vehicle types</option>
+                    <option v-for="vehicleType in lookupRows('vehicle_types')" :key="vehicleType.id" :value="vehicleType.product || vehicleType.id">{{ vehicleType.label }}</option>
+                  </select>
                 </div>
-                <table class="table is-fullwidth is-striped">
-                  <thead>
-                    <tr>
-                      <th>ID</th>
-                      <th>Name</th>
-                      <th>Scope</th>
-                      <th class="has-text-right">Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr
-                      v-for="item in scopedConditions"
-                      :key="item.id"
-                      :class="{ 'has-background-link-light': parseInt(item.id) === parseInt(selectedConditionId || 0) }"
-                    >
-                      <td>{{ item.id }}</td>
-                      <td>{{ item.name }}</td>
-                      <td>{{ scopeLabel(item) }}</td>
-                      <td class="has-text-right studio-action-cell">
-                        <div class="studio-action-buttons">
-                          <button class="button is-small is-link is-light" @click="selectedConditionId = item.id">
-                            <i class="fas fa-gavel"></i>
-                          </button>
-                          <button class="button is-small is-info is-light" @click="openConditionModal(item)">
-                            <i class="fas fa-pen"></i>
-                          </button>
-                          <button class="button is-small is-danger is-light" @click="deleteRecord('condition', item.id)">
-                            <i class="fas fa-trash"></i>
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-              <div class="column is-5">
-                <div class="box">
-                  <div class="is-flex is-justify-content-space-between is-align-items-center mb-3">
-                    <h4 class="title is-6 mb-0">Rules</h4>
-                    <button class="button is-small is-primary" :disabled="!selectedConditionId" @click="openRuleModal()">Add Rule</button>
-                  </div>
-                  <table class="table is-fullwidth is-striped">
-                    <thead>
-                      <tr>
-                        <th>Type</th>
-                        <th>Target</th>
-                        <th class="has-text-right">Actions</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="entry in selectedConditionRules" :key="entry.id">
-                        <td>{{ entry.type }}</td>
-                        <td>{{ entry.object_type === 'condition' ? conditionName(entry.object_id) : questionName(entry.object_id) }}</td>
-                        <td class="has-text-right studio-action-cell">
-                          <div class="studio-action-buttons">
-                            <button class="button is-small is-info is-light" @click="openRuleModal(entry)">
-                              <i class="fas fa-pen"></i>
-                            </button>
-                            <button class="button is-small is-danger is-light" @click="deleteRecord('rule', entry.id)">
-                              <i class="fas fa-trash"></i>
-                            </button>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
+                <div class="select is-small">
+                  <select v-model="filters.machine_type_id">
+                    <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="buttons studio-canvas-actions">
+                  <button class="button is-small is-light" title="Zoom in" @click="zoomIn()">
+                    <span class="icon"><i class="fas fa-plus"></i></span>
+                  </button>
+                  <button class="button is-small is-light" title="Zoom out" @click="zoomOut()">
+                    <span class="icon"><i class="fas fa-minus"></i></span>
+                  </button>
+                  <button class="button is-small is-light" title="Fit view" @click="fitView({ padding: 0.16, duration: 250 })">
+                    <span class="icon"><i class="fas fa-expand"></i></span>
+                  </button>
+                  <button class="button is-small is-light" title="Auto layout" @click="autoLayout">
+                    <span class="icon"><i class="fas fa-wand-magic-sparkles"></i></span>
+                  </button>
                 </div>
               </div>
-            </div>
-          </template>
 
-          <template v-else-if="activeTab === 'tasks'">
-            <div class="buttons mb-3">
-              <button class="button is-primary" @click="openTaskModal()">Add Task</button>
-            </div>
-            <table class="table is-fullwidth is-striped is-hoverable">
-              <thead>
-                <tr>
-                  <th v-if="SessionUser.canAccessAdmin()" style="width: 40px;"></th>
-                  <th>#</th>
-                  <th>Task</th>
-                  <th>Gate</th>
-                  <th>Scope</th>
-                  <th class="has-text-right">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  v-for="(item, index) in scopedTasks"
-                  :key="item.id"
-                  :class="{ 'is-dragging': draggingTaskIndex === index, 'drag-over': taskDragOverIndex === index }"
-                  @dragover="onTaskDragOver($event, index)"
-                  @dragleave="taskDragOverIndex = null"
-                  @drop="onTaskDrop($event, index)"
-                  @dragend="onTaskDragEnd"
-                >
-                  <td
-                    v-if="SessionUser.canAccessAdmin()"
-                    class="has-text-centered tasks-drag-handle"
-                    :class="{ 'is-disabled': isReorderingTasks }"
-                    :draggable="!isReorderingTasks"
-                    @dragstart="onTaskDragStart($event, index)"
+              <div class="studio-workspace">
+                <div class="studio-palette">
+                  <button
+                    v-for="template in NODE_TEMPLATES"
+                    :key="template.kind"
+                    class="studio-palette-item"
+                    type="button"
+                    :data-testid="`studio-palette-${template.kind}`"
+                    draggable="true"
+                    :disabled="!permissions.can_edit || isSaving"
+                    @dragstart="handlePaletteDragStart($event, template.kind)"
+                    @click="createNode(template.kind)"
                   >
-                    <span class="icon is-small">
-                      <i class="fas fa-grip-lines"></i>
-                    </span>
-                  </td>
-                  <td>{{ item.order_priority }}</td>
-                  <td>{{ item.task }}</td>
-                  <td>{{ taskGateLabel(item) }}</td>
-                  <td>{{ scopeLabel(item) }}</td>
-                  <td class="has-text-right">
-                    <button class="button is-small is-info is-light mr-2" @click="openTaskModal(item)">
-                      <i class="fas fa-pen"></i>
-                    </button>
-                    <button class="button is-small is-danger is-light" @click="deleteRecord('task', item.id)">
-                      <i class="fas fa-trash"></i>
-                    </button>
-                  </td>
-                </tr>
-                <tr v-if="scopedTasks.length === 0">
-                  <td :colspan="SessionUser.canAccessAdmin() ? 6 : 5" class="has-text-centered is-italic">No tasks configured.</td>
-                </tr>
-              </tbody>
-            </table>
-          </template>
+                    <span class="icon"><i :class="template.icon"></i></span>
+                    <span>{{ template.label }}</span>
+                  </button>
+                </div>
 
-          <template v-else-if="activeTab === 'simulator'">
-            <div class="box">
-              <div class="columns is-multiline">
-                <div class="column is-6">
-                  <label class="label">Lane</label>
-                  <div class="select is-fullwidth">
-                    <select v-model="simulatorLaneId">
-                      <option :value="null">Select lane</option>
-                      <option v-for="entry in lanes" :key="entry.id" :value="entry.id">
-                        {{ entry.name }} ({{ entry.id }})
-                      </option>
-                    </select>
+                <div class="studio-flow-surface" data-testid="self-serve-studio-flow" @dragover.prevent @drop.prevent="handleCanvasDrop">
+                  <VueFlow
+                    id="self-serve-studio-flow"
+                    v-model:nodes="flowNodes"
+                    v-model:edges="flowEdges"
+                    :fit-view-on-init="true"
+                    :nodes-draggable="true"
+                    :nodes-connectable="permissions.can_edit"
+                    :elements-selectable="true"
+                    @connect="handleConnect"
+                    @node-click="handleNodeClick"
+                    @pane-click="selectedNodeId = null"
+                  >
+                    <template #node-default="{ data, selected }">
+                      <div class="studio-flow-node" :class="[nodeTone(data.kind), { 'is-selected': selected }]">
+                        <div class="studio-flow-node-header">
+                          <span class="icon"><i :class="nodeIcon(data.kind)"></i></span>
+                          <strong>{{ data.label }}</strong>
+                        </div>
+                        <p v-if="data.subtitle" class="studio-flow-node-subtitle">{{ data.subtitle }}</p>
+                      </div>
+                    </template>
+                    <template #node-input="{ data, selected }">
+                      <div class="studio-flow-node is-runtime" :class="{ 'is-selected': selected }">
+                        <div class="studio-flow-node-header">
+                          <span class="icon"><i :class="nodeIcon(data.kind)"></i></span>
+                          <strong>{{ data.label }}</strong>
+                        </div>
+                        <p class="studio-flow-node-subtitle">{{ data.subtitle }}</p>
+                      </div>
+                    </template>
+                    <template #node-output="{ data, selected }">
+                      <div class="studio-flow-node is-runtime" :class="{ 'is-selected': selected }">
+                        <div class="studio-flow-node-header">
+                          <span class="icon"><i :class="nodeIcon(data.kind)"></i></span>
+                          <strong>{{ data.label }}</strong>
+                        </div>
+                        <p class="studio-flow-node-subtitle">{{ data.subtitle }}</p>
+                      </div>
+                    </template>
+                  </VueFlow>
+                  <div v-if="isLoading" class="studio-loading">
+                    <span class="icon"><i class="fas fa-spinner fa-spin"></i></span>
+                    <span>Loading studio</span>
                   </div>
                 </div>
-                <div class="column is-6">
-                  <label class="label">Registration</label>
-                  <input v-model="simulatorReg" class="input" placeholder="AB12345">
-                </div>
               </div>
-              <button class="button is-warning" :disabled="!simulatorLaneId || !simulatorReg.trim()" @click="showTryModal = true">
-                Open Simulator
-              </button>
-            </div>
-            <SelfServeTryModal
-              v-if="showTryModal"
-              :departmentId="departmentId"
-              :laneId="simulatorLaneId"
-              @closeModal="showTryModal = false"
-            />
-          </template>
+            </main>
 
-          <template v-else-if="activeTab === 'history'">
-            <div class="buttons mb-3">
-              <button class="button is-link" @click="refreshDraft">Create/Refresh Draft</button>
-              <button class="button is-info" @click="validateDraft">Validate Draft</button>
-              <button class="button is-success" @click="publishDraft">Publish Draft</button>
-            </div>
-            <div v-if="activeConfig" class="notification is-light">
-              <strong>Active source:</strong>
-              <span v-if="activeConfig.source === 'published'"> Published version #{{ activeConfig.version_id }}</span>
-              <span v-else> Legacy fallback</span>
-            </div>
-            <div v-if="latestValidation?.validation" class="notification" :class="latestValidation.validation.valid ? 'is-success is-light' : 'is-warning is-light'">
-              <strong>Latest validation:</strong> {{ latestValidation.validation.valid ? 'valid' : 'errors found' }}
-            </div>
-            <table class="table is-fullwidth is-striped">
-              <thead>
-                <tr>
-                  <th>ID</th>
-                  <th>Status</th>
-                  <th>Version #</th>
-                  <th>Published At</th>
-                  <th class="has-text-right">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="entry in versions" :key="entry.id">
-                  <td>#{{ entry.id }}</td>
-                  <td>{{ entry.status }}</td>
-                  <td>{{ entry.version_number }}</td>
-                  <td>{{ entry.published_at || '-' }}</td>
-                  <td class="has-text-right">
-                    <button class="button is-small is-warning is-light" @click="rollbackToVersion(entry.id)">Rollback</button>
-                  </td>
-                </tr>
-                <tr v-if="versions.length === 0">
-                  <td colspan="5" class="has-text-centered is-italic">No versions found.</td>
-                </tr>
-              </tbody>
-            </table>
-          </template>
+            <aside class="studio-details" :data-panel="activePanel">
+              <template v-if="activePanel === 'flow'">
+                <header class="studio-details-header">
+                  <h3>Flow Overview</h3>
+                  <span class="tag" :class="validation?.valid ? 'is-success is-light' : 'is-danger is-light'">
+                    {{ validation?.valid ? 'Valid' : 'Issues' }}
+                  </span>
+                </header>
+                <div class="studio-stat-grid">
+                  <div class="studio-stat"><strong>{{ graphStats.question || 0 }}</strong><span>Questions</span></div>
+                  <div class="studio-stat"><strong>{{ graphStats.condition || 0 }}</strong><span>Conditions</span></div>
+                  <div class="studio-stat"><strong>{{ graphStats.task || 0 }}</strong><span>Tasks</span></div>
+                  <div class="studio-stat"><strong>{{ graphStats.edge_gateway || 0 }}</strong><span>Gateways</span></div>
+                </div>
+                <div class="studio-node-list">
+                  <button v-for="node in filteredListNodes" :key="node.id" type="button" @click="selectNode(node.id)">
+                    <span class="icon"><i :class="nodeIcon(node.data?.kind)"></i></span>
+                    <span>{{ node.data?.label }}</span>
+                  </button>
+                </div>
+              </template>
+
+              <template v-else-if="activePanel === 'inspector'">
+                <header class="studio-details-header">
+                  <h3>Inspector</h3>
+                  <span v-if="selectedNode" class="tag is-light">{{ selectedNode.data?.kind }}</span>
+                </header>
+                <div v-if="!selectedNode" class="studio-empty-state">
+                  <span class="icon"><i class="fas fa-arrow-pointer"></i></span>
+                  <p>Select a node to edit its setup and relationships.</p>
+                </div>
+                <div v-else-if="!isSelectedEditable" class="studio-readonly">
+                  <h4>{{ selectedNode.data?.label }}</h4>
+                  <pre>{{ formatJson(selectedNode.data?.raw || selectedNode.data) }}</pre>
+                </div>
+                <form v-else class="studio-form" @submit.prevent="saveInspector">
+                  <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>
+                    <label>Condition gate
+                      <select v-model="inspectorForm.condition_id" class="input">
+                        <option :value="null">Always ask</option>
+                        <option v-for="condition in lookupRows('conditions')" :key="condition.id" :value="condition.id">{{ condition.label }}</option>
+                      </select>
+                    </label>
+                    <label>Order<input v-model.number="inspectorForm.order_priority" class="input" type="number" min="0"></label>
+                  </template>
+
+                  <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>
+                  </template>
+
+                  <template v-else-if="selectedNode.data.kind === 'rule'">
+                    <label>Name<input v-model="inspectorForm.name" class="input"></label>
+                    <label>Condition
+                      <select v-model="inspectorForm.condition_id" class="input">
+                        <option v-for="condition in lookupRows('conditions')" :key="condition.id" :value="condition.id">{{ condition.label }}</option>
+                      </select>
+                    </label>
+                    <label>Type
+                      <select v-model="inspectorForm.type" class="input">
+                        <option value="IS_TRUE">IS_TRUE</option>
+                        <option value="IS_FALSE">IS_FALSE</option>
+                      </select>
+                    </label>
+                    <label>Object type
+                      <select v-model="inspectorForm.object_type" class="input">
+                        <option value="question">Question</option>
+                        <option value="condition">Condition</option>
+                        <option value="task">Task</option>
+                      </select>
+                    </label>
+                    <label>Object id<input v-model.number="inspectorForm.object_id" class="input" type="number" min="0"></label>
+                  </template>
+
+                  <template v-else-if="selectedNode.data.kind === 'task'">
+                    <label>Task<input v-model="inspectorForm.task" class="input"></label>
+                    <label>Description<input v-model="inspectorForm.description" class="input"></label>
+                    <label>Gate type
+                      <select v-model="inspectorForm.gate_type" class="input">
+                        <option value="ALWAYS">ALWAYS</option>
+                        <option value="CONDITION">CONDITION</option>
+                        <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>Order<input v-model.number="inspectorForm.order_priority" class="input" type="number" min="0"></label>
+                    <label>Services<input v-model="inspectorForm.services" class="input" placeholder="MACHINE"></label>
+                    <label>Buttons<input v-model="inspectorForm.buttons" class="input" placeholder="0,1,2"></label>
+                  </template>
+
+                  <div class="buttons">
+                    <button class="button is-primary" :class="{ 'is-loading': isSaving }" type="submit">
+                      <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">
+                      <span class="icon"><i class="fas fa-trash"></i></span>
+                    </button>
+                  </div>
+                </form>
+              </template>
+
+              <template v-else-if="activePanel === 'conditions'">
+                <header class="studio-details-header">
+                  <h3>Conditions</h3>
+                  <button class="button is-small is-primary" :disabled="!permissions.can_edit" @click="createNode('condition')">
+                    <span class="icon"><i class="fas fa-plus"></i></span>
+                  </button>
+                </header>
+                <div class="studio-node-list">
+                  <button v-for="node in conditionNodes" :key="node.id" type="button" @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>
+                  </button>
+                </div>
+              </template>
+
+              <template v-else-if="activePanel === 'tasks'">
+                <header class="studio-details-header">
+                  <h3>Tasks</h3>
+                  <button class="button is-small is-primary" :disabled="!permissions.can_edit" @click="createNode('task')">
+                    <span class="icon"><i class="fas fa-plus"></i></span>
+                  </button>
+                </header>
+                <div class="studio-task-list">
+                  <article v-for="node in taskNodes" :key="node.id" class="studio-task-row">
+                    <button type="button" @click="selectNode(node.id)">
+                      <strong>{{ node.data?.label }}</strong>
+                      <small>{{ labelFor('lanes', node.data?.raw?.lane) }} / {{ labelFor('products', node.data?.raw?.product) }}</small>
+                    </button>
+                    <div class="buttons">
+                      <button class="button is-small is-light" @click="reorderTask(node, -1)">
+                        <span class="icon"><i class="fas fa-arrow-up"></i></span>
+                      </button>
+                      <button class="button is-small is-light" @click="reorderTask(node, 1)">
+                        <span class="icon"><i class="fas fa-arrow-down"></i></span>
+                      </button>
+                    </div>
+                  </article>
+                </div>
+              </template>
+
+              <template v-else-if="activePanel === 'hardware'">
+                <header class="studio-details-header">
+                  <h3>Hardware</h3>
+                  <span class="tag is-light">{{ gatewayNodes.length }} gateways</span>
+                </header>
+                <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>
+                  </div>
+                  <div 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>
+                    <button class="button is-small is-light" title="Update gateway" @click="runGatewayAction(gateway.id, 'update')">
+                      <span class="icon"><i class="fas fa-upload"></i></span>
+                    </button>
+                    <button class="button is-small is-warning is-light" title="Rotate gateway credentials" @click="runGatewayAction(gateway.id, 'rotate_credentials', true)">
+                      <span class="icon"><i class="fas fa-key"></i></span>
+                    </button>
+                    <button class="button is-small is-danger is-light" title="Uninstall gateway" @click="runGatewayAction(gateway.id, 'uninstall', true)">
+                      <span class="icon"><i class="fas fa-trash"></i></span>
+                    </button>
+                  </div>
+                  <ul>
+                    <li v-for="binding in gateway.bindings || []" :key="`${gateway.id}-${binding.relay_id}-${binding.role}`">
+                      {{ binding.label || binding.relay_id }} <span>{{ binding.role || binding.slot || 'binding' }}</span>
+                    </li>
+                  </ul>
+                </article>
+                <div v-if="(gatewayWorkspace.issues || []).length" class="studio-issues">
+                  <article v-for="issue in gatewayWorkspace.issues" :key="issue.message" class="notification is-warning is-light">
+                    {{ issue.message }}
+                  </article>
+                </div>
+              </template>
+
+              <template v-else-if="activePanel === 'simulator'">
+                <header class="studio-details-header"><h3>Simulator</h3></header>
+                <form class="studio-form" @submit.prevent="runSimulator">
+                  <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>
+                  <label>Registration<input v-model="simulatorForm.reg" class="input"></label>
+                  <label>Customer number<input v-model="simulatorForm.customer_number" class="input" type="number"></label>
+                  <button class="button is-primary" type="submit">
+                    <span class="icon"><i class="fas fa-play"></i></span>
+                    <span>Run</span>
+                  </button>
+                </form>
+                <pre v-if="simulatorResult" class="studio-json">{{ formatJson(simulatorResult) }}</pre>
+              </template>
+
+              <template v-else-if="activePanel === 'versions'">
+                <header class="studio-details-header">
+                  <h3>Versions</h3>
+                  <button class="button is-small is-primary" :disabled="!permissions.can_publish || validation?.valid === false" @click="publishDraft">Publish</button>
+                </header>
+                <div class="studio-version-list">
+                  <article v-for="version in versions" :key="version.id">
+                    <div>
+                      <strong>v{{ version.version_number }}</strong>
+                      <span class="tag is-light">{{ version.status }}</span>
+                    </div>
+                    <small>{{ version.published_at || version.created_at }}</small>
+                    <button class="button is-small is-light" :disabled="!permissions.can_rollback" @click="rollbackVersion(version.id)">Rollback</button>
+                  </article>
+                </div>
+              </template>
+
+              <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}`">
+                    <span class="icon"><i :class="item.severity === 'error' ? 'fas fa-triangle-exclamation' : 'fas fa-circle-info'"></i></span>
+                    <span>{{ item.message }}</span>
+                  </article>
+                  <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>
+                  </article>
+                </div>
+                <pre class="studio-json">{{ formatJson(graphPayload?.meta) }}</pre>
+              </template>
+
+              <template v-else-if="activePanel === 'importExport'">
+                <header class="studio-details-header">
+                  <h3>Import/Export</h3>
+                  <button class="button is-small is-light" @click="exportGraph">
+                    <span class="icon"><i class="fas fa-file-export"></i></span>
+                  </button>
+                </header>
+                <textarea v-model="exportText" class="textarea studio-code-textarea" readonly placeholder="Exported graph JSON"></textarea>
+                <textarea v-model="importText" class="textarea studio-code-textarea" placeholder="Paste graph JSON to import layout positions"></textarea>
+                <button class="button is-primary" :disabled="!permissions.can_edit" @click="importLayout">
+                  <span class="icon"><i class="fas fa-file-import"></i></span>
+                  <span>Import Layout</span>
+                </button>
+              </template>
+            </aside>
+          </div>
         </section>
       </NotFoundFallBackPageWrapper>
     </DepartmentDashboardPageWrapper>
   </RestrictedPageWrapper>
-
-  <div v-if="showQuestionModal" class="modal is-active">
-    <div class="modal-background" @click="showQuestionModal = false"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">{{ questionForm.id ? 'Edit Question' : 'New Question' }}</p>
-        <button class="delete" @click="showQuestionModal = false"></button>
-      </header>
-      <section class="modal-card-body">
-        <div class="field">
-          <label class="label">Scope</label>
-          <div class="select is-fullwidth">
-            <select v-model="questionForm.scope_mode">
-              <option value="legacy">Department/Lane/Vehicle</option>
-              <option value="shared">Shared</option>
-            </select>
-          </div>
-        </div>
-        <template v-if="questionForm.scope_mode === 'legacy'">
-          <div class="field">
-            <label class="label">Department</label>
-            <input :value="departmentId" class="input" disabled>
-          </div>
-          <div class="field">
-            <label class="label">Lane</label>
-            <div class="select is-fullwidth">
-              <select v-model="questionForm.lane">
-                <option :value="0">Select lane</option>
-                <option v-for="entry in lanes" :key="entry.id" :value="parseInt(entry.id)">
-                  {{ entry.name }} ({{ entry.id }})
-                </option>
-              </select>
-            </div>
-          </div>
-          <div class="field">
-            <label class="label">Vehicle Type</label>
-            <div class="select is-fullwidth">
-              <select v-model="questionForm.product">
-                <option :value="0">Select vehicle type</option>
-                <option v-for="entry in vehicleTypeOptions" :key="entry.id" :value="parseInt(entry.id)">
-                  {{ entry.name }}
-                </option>
-              </select>
-            </div>
-          </div>
-        </template>
-        <div class="field">
-          <label class="label">Question</label>
-          <input v-model="questionForm.question" class="input">
-        </div>
-        <div class="field">
-          <label class="label">Description</label>
-          <input v-model="questionForm.description" class="input">
-        </div>
-        <div class="field">
-          <label class="label">Condition</label>
-          <div class="select is-fullwidth">
-            <select v-model="questionForm.condition_id">
-              <option :value="null">None</option>
-              <option v-for="entry in conditions" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
-            </select>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label">Order Priority</label>
-          <input v-model="questionForm.order_priority" class="input" type="number" min="0">
-        </div>
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success" @click="saveQuestion">Save</button>
-        <button class="button" @click="showQuestionModal = false">Cancel</button>
-      </footer>
-    </div>
-  </div>
-
-  <div v-if="showConditionModal" class="modal is-active">
-    <div class="modal-background" @click="showConditionModal = false"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">{{ conditionForm.id ? 'Edit Condition' : 'New Condition' }}</p>
-        <button class="delete" @click="showConditionModal = false"></button>
-      </header>
-      <section class="modal-card-body">
-        <div class="field">
-          <label class="label">Scope</label>
-          <div class="select is-fullwidth">
-            <select v-model="conditionForm.scope_mode">
-              <option value="machine_type">Machine Type</option>
-              <option value="legacy">Department/Lane/Vehicle</option>
-            </select>
-          </div>
-        </div>
-        <div v-if="conditionForm.scope_mode === 'machine_type'" class="field">
-          <label class="label">Machine Type</label>
-          <div class="select is-fullwidth">
-            <select v-model="conditionForm.machine_type_id">
-              <option :value="null">Select machine type</option>
-              <option v-for="entry in machineTypes" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
-            </select>
-          </div>
-        </div>
-        <template v-if="conditionForm.scope_mode === 'legacy'">
-          <div class="field">
-            <label class="label">Department</label>
-            <input :value="departmentId" class="input" disabled>
-          </div>
-          <div class="field">
-            <label class="label">Lane</label>
-            <div class="select is-fullwidth">
-              <select v-model="conditionForm.lane">
-                <option :value="0">Select lane</option>
-                <option v-for="entry in lanes" :key="entry.id" :value="parseInt(entry.id)">
-                  {{ entry.name }} ({{ entry.id }})
-                </option>
-              </select>
-            </div>
-          </div>
-          <div class="field">
-            <label class="label">Vehicle Type</label>
-            <div class="select is-fullwidth">
-              <select v-model="conditionForm.product">
-                <option :value="0">Select vehicle type</option>
-                <option v-for="entry in vehicleTypeOptions" :key="entry.id" :value="parseInt(entry.id)">
-                  {{ entry.name }}
-                </option>
-              </select>
-            </div>
-          </div>
-        </template>
-        <div class="field">
-          <label class="label">Name</label>
-          <input v-model="conditionForm.name" class="input">
-        </div>
-        <div class="field">
-          <label class="label">Description</label>
-          <input v-model="conditionForm.description" class="input">
-        </div>
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success" @click="saveCondition">Save</button>
-        <button class="button" @click="showConditionModal = false">Cancel</button>
-      </footer>
-    </div>
-  </div>
-
-  <div v-if="showRuleModal" class="modal is-active">
-    <div class="modal-background" @click="showRuleModal = false"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">{{ ruleForm.id ? 'Edit Rule' : 'New Rule' }}</p>
-        <button class="delete" @click="showRuleModal = false"></button>
-      </header>
-      <section class="modal-card-body">
-        <div class="field">
-          <label class="label">Condition</label>
-          <div class="select is-fullwidth">
-            <select v-model="ruleForm.condition_id">
-              <option :value="null">Select condition</option>
-              <option v-for="entry in conditions" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
-            </select>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label">Type</label>
-          <div class="select is-fullwidth">
-            <select v-model="ruleForm.type">
-              <option v-for="type in ruleTypes" :key="type" :value="type">{{ type }}</option>
-            </select>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label">Object Type</label>
-          <div class="select is-fullwidth">
-            <select v-model="ruleForm.object_type">
-              <option value="question">Question</option>
-              <option value="condition">Condition</option>
-            </select>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label">Target</label>
-          <div class="select is-fullwidth">
-            <select v-model="ruleForm.object_id">
-              <option :value="null">Select target</option>
-              <option v-for="entry in availableRuleTargets" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
-            </select>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label">Name</label>
-          <input v-model="ruleForm.name" class="input">
-        </div>
-        <div class="field">
-          <label class="label">Description</label>
-          <input v-model="ruleForm.description" class="input">
-        </div>
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success" @click="saveRule">Save</button>
-        <button class="button" @click="showRuleModal = false">Cancel</button>
-      </footer>
-    </div>
-  </div>
-
-  <div v-if="showTaskModal" class="modal is-active">
-    <div class="modal-background" @click="showTaskModal = false"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">{{ taskForm.id ? 'Edit Task' : 'New Task' }}</p>
-        <button class="delete" @click="showTaskModal = false"></button>
-      </header>
-      <section class="modal-card-body">
-        <div class="field">
-          <label class="label">Scope</label>
-          <div class="select is-fullwidth">
-            <select v-model="taskForm.scope_mode">
-              <option value="machine_type">Machine Type</option>
-              <option value="legacy">Department/Lane/Vehicle</option>
-            </select>
-          </div>
-        </div>
-        <div v-if="taskForm.scope_mode === 'machine_type'" class="field">
-          <label class="label">Primary Vehicle Type Product ID</label>
-          <div class="select is-fullwidth">
-            <select v-model="taskForm.machine_type_id">
-              <option :value="0">Select primary vehicle type</option>
-              <option v-for="entry in machineScopePrimaryVehicleTypeOptions" :key="entry.id" :value="parseInt(entry.id)">
-                {{ entry.name }}
-              </option>
-            </select>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label">Department</label>
-          <input :value="departmentId" class="input" disabled>
-        </div>
-        <div class="field">
-          <label class="label">Lane</label>
-          <div class="select is-fullwidth">
-            <select v-model="taskForm.lane">
-              <option :value="0">Select lane</option>
-              <option v-for="entry in lanes" :key="entry.id" :value="parseInt(entry.id)">
-                {{ entry.name }} ({{ entry.id }})
-              </option>
-            </select>
-          </div>
-        </div>
-        <template v-if="taskForm.scope_mode === 'legacy'">
-          <div class="field">
-            <label class="label">Vehicle Type</label>
-            <div class="select is-fullwidth">
-              <select v-model="taskForm.product">
-                <option :value="0">Select vehicle type</option>
-                <option v-for="entry in vehicleTypeOptions" :key="entry.id" :value="parseInt(entry.id)">
-                  {{ entry.name }}
-                </option>
-              </select>
-            </div>
-          </div>
-        </template>
-        <div class="field">
-          <label class="label">Task</label>
-          <input v-model="taskForm.task" class="input">
-        </div>
-        <div class="field">
-          <label class="label">Description</label>
-          <input v-model="taskForm.description" class="input">
-        </div>
-        <div class="field">
-          <label class="label">Order Priority</label>
-          <input v-model="taskForm.order_priority" class="input" type="number" min="0">
-        </div>
-        <div class="field">
-          <label class="label">Gate Type</label>
-          <div class="select is-fullwidth">
-            <select v-model="taskForm.gate_type">
-              <option value="ALWAYS">ALWAYS</option>
-              <option value="CONDITION">CONDITION</option>
-              <option value="QUESTION">QUESTION</option>
-            </select>
-          </div>
-        </div>
-        <div v-if="taskForm.gate_type !== 'ALWAYS'" class="field">
-          <label class="label">Gate Reference</label>
-          <div class="select is-fullwidth">
-            <select v-model="taskForm.gate_ref_id">
-              <option :value="null">Select reference</option>
-              <option v-for="entry in availableTaskGateTargets" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
-            </select>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label">Services</label>
-          <label class="checkbox">
-            <input
-              type="checkbox"
-              :checked="Array.isArray(taskForm.services) && taskForm.services.includes('MACHINE')"
-              @change="(event) => { taskForm.services = event.target.checked ? ['MACHINE'] : []; }"
-            >
-            MACHINE
-          </label>
-        </div>
-        <div class="field">
-          <label class="label">Buttons</label>
-          <div class="buttons">
-            <button
-              v-for="index in 12"
-              :key="index - 1"
-              type="button"
-              class="button is-small"
-              :class="Array.isArray(taskForm.buttons) && taskForm.buttons.includes(index - 1) ? 'is-link' : 'is-light'"
-              @click="toggleTaskButton(index - 1)"
-            >
-              {{ index - 1 }}
-            </button>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label">Dynamic Images Thumb Position</label>
-          <div class="select is-fullwidth">
-            <select v-model="taskForm.dynamic_images_vehicle_type">
-              <option :value="null">None</option>
-              <!-- 1-12 -->
-              <option v-for="index in 12" :key="index" :value="index - 1">{{ index - 1 }}</option>
-            </select>
-          </div>
-        </div>
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success" @click="saveTask">Save</button>
-        <button class="button" @click="showTaskModal = false">Cancel</button>
-      </footer>
-    </div>
-  </div>
 </template>
 
 <style scoped>
-.studio-vehicle-type-filter {
-  width: min(320px, 100%);
+.self-serve-studio {
+  min-height: calc(100vh - 160px);
 }
 
-.modal-card {
-  width: min(960px, 95vw);
-}
-
-.studio-action-cell {
-  width: 1%;
-  white-space: nowrap;
-}
-
-.studio-action-buttons {
-  display: inline-flex;
+.studio-page-actions {
   align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
 }
 
-.is-dragging {
+.studio-shell {
+  display: grid;
+  grid-template-columns: 168px minmax(0, 1fr) 360px;
+  gap: 14px;
+  min-height: 760px;
+}
+
+.studio-sidebar,
+.studio-details,
+.studio-main {
+  min-width: 0;
+}
+
+.studio-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-right: 1px solid #e2e8f0;
+  padding-right: 10px;
+}
+
+.studio-panel-button,
+.studio-palette-item,
+.studio-node-list button,
+.studio-task-row > button {
+  border: 1px solid transparent;
+  background: transparent;
+  color: #1f2937;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.studio-panel-button {
+  align-items: center;
+  border-radius: 7px;
+  display: flex;
+  gap: 8px;
+  min-height: 38px;
+  padding: 8px 10px;
+}
+
+.studio-panel-button.is-active,
+.studio-panel-button:hover {
+  background: #eef2ff;
+  border-color: #dbe4ff;
+  color: #1e40af;
+}
+
+.studio-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.studio-toolbar {
+  align-items: center;
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(132px, 170px)) auto;
+  gap: 8px;
+}
+
+.studio-search {
+  position: relative;
+}
+
+.studio-search .icon {
+  color: #64748b;
+  left: 10px;
+  position: absolute;
+  top: 8px;
+  z-index: 1;
+}
+
+.studio-search .input {
+  padding-left: 36px;
+}
+
+.studio-workspace {
+  display: grid;
+  grid-template-columns: 132px minmax(0, 1fr);
+  gap: 10px;
+  min-height: 700px;
+}
+
+.studio-palette {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.studio-palette-item {
+  align-items: center;
+  border-color: #dbe3ef;
+  border-radius: 7px;
+  display: flex;
+  gap: 8px;
+  min-height: 42px;
+  padding: 8px 10px;
+}
+
+.studio-palette-item:hover:not(:disabled) {
+  background: #f8fafc;
+  border-color: #94a3b8;
+}
+
+.studio-palette-item:disabled {
+  cursor: not-allowed;
   opacity: 0.55;
 }
 
-.drag-over td {
-  border-top: 3px solid #3273dc !important;
+.studio-flow-surface {
+  background:
+    linear-gradient(#f8fafc, #f8fafc) padding-box,
+    linear-gradient(135deg, #dbeafe, #ddd6fe) border-box;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  min-height: 700px;
+  overflow: hidden;
+  position: relative;
 }
 
-.tasks-drag-handle {
-  cursor: move;
-  user-select: none;
+.studio-flow-surface :deep(.vue-flow) {
+  background-color: #f8fafc;
 }
 
-.tasks-drag-handle.is-disabled {
-  opacity: 0.5;
-  cursor: wait;
+.studio-flow-node {
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+  color: #111827;
+  min-width: 184px;
+  padding: 10px 12px;
+}
+
+.studio-flow-node.is-selected {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
+}
+
+.studio-flow-node-header {
+  align-items: center;
+  display: flex;
+  gap: 7px;
+  line-height: 1.25;
+}
+
+.studio-flow-node-header strong {
+  display: block;
+  font-size: 13px;
+  max-width: 220px;
+  overflow-wrap: anywhere;
+}
+
+.studio-flow-node-subtitle {
+  color: #64748b;
+  font-size: 11px;
+  margin: 5px 0 0;
+  overflow-wrap: anywhere;
+}
+
+.studio-flow-node.is-question { border-left: 4px solid #2563eb; }
+.studio-flow-node.is-condition { border-left: 4px solid #0f766e; }
+.studio-flow-node.is-rule { border-left: 4px solid #9333ea; }
+.studio-flow-node.is-task { border-left: 4px solid #ea580c; }
+.studio-flow-node.is-gateway,
+.studio-flow-node.is-hardware { border-left: 4px solid #7c3aed; }
+.studio-flow-node.is-scope { border-left: 4px solid #64748b; }
+.studio-flow-node.is-runtime { border-left: 4px solid #0284c7; }
+
+.studio-node-filtered {
+  opacity: 0.28;
+}
+
+.studio-loading {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.75);
+  display: flex;
+  gap: 8px;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+  z-index: 5;
+}
+
+.studio-details {
+  border-left: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-height: 760px;
+  overflow: auto;
+  padding-left: 14px;
+}
+
+.studio-details-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.studio-details-header h3,
+.studio-section-title {
+  color: #111827;
+  font-size: 15px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.studio-section-title {
+  margin-top: 10px;
+}
+
+.studio-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.studio-stat {
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  padding: 10px;
+}
+
+.studio-stat strong {
+  display: block;
+  font-size: 20px;
+}
+
+.studio-stat span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.studio-node-list,
+.studio-task-list,
+.studio-version-list {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.studio-node-list button {
+  border-color: #e2e8f0;
+  border-radius: 7px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 9px 10px;
+}
+
+.studio-node-list button:hover,
+.studio-task-row:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.studio-node-list .icon {
+  margin-right: 5px;
+}
+
+.studio-node-list small,
+.studio-task-row small,
+.studio-hardware-item small {
+  color: #64748b;
+  display: block;
+  font-size: 11px;
+}
+
+.studio-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.studio-form label {
+  color: #374151;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 5px;
+}
+
+.studio-empty-state,
+.studio-readonly {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  color: #475569;
+  padding: 16px;
+}
+
+.studio-readonly pre,
+.studio-json {
+  background: #0f172a;
+  border-radius: 7px;
+  color: #e2e8f0;
+  font-size: 11px;
+  max-height: 320px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.studio-task-row,
+.studio-hardware-item,
+.studio-version-list article {
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  padding: 10px;
+}
+
+.studio-task-row {
+  align-items: center;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.studio-task-row > button {
+  min-width: 0;
+  padding: 0;
+}
+
+.studio-hardware-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.studio-hardware-item ul {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.studio-hardware-item li {
+  color: #475569;
+  font-size: 12px;
+}
+
+.studio-hardware-item li span {
+  color: #64748b;
+}
+
+.studio-validation-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.studio-validation-list article {
+  align-items: flex-start;
+  border-radius: 7px;
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+}
+
+.studio-validation-list article.is-error {
+  background: #fef2f2;
+  color: #991b1b;
+}
+
+.studio-validation-list article.is-warning {
+  background: #fffbeb;
+  color: #92400e;
+}
+
+.studio-validation-list article.is-success {
+  background: #f0fdf4;
+  color: #166534;
+}
+
+.studio-code-textarea {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+  min-height: 160px;
+}
+
+@media (max-width: 1280px) {
+  .studio-shell {
+    grid-template-columns: 64px minmax(0, 1fr);
+  }
+
+  .studio-sidebar .studio-panel-button span:last-child {
+    display: none;
+  }
+
+  .studio-details {
+    grid-column: 1 / -1;
+    max-height: none;
+    border-left: 0;
+    border-top: 1px solid #e2e8f0;
+    padding-left: 0;
+    padding-top: 12px;
+  }
+}
+
+@media (max-width: 820px) {
+  .studio-shell,
+  .studio-workspace,
+  .studio-toolbar {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .studio-sidebar {
+    border-right: 0;
+    flex-direction: row;
+    overflow-x: auto;
+    padding-bottom: 8px;
+    padding-right: 0;
+  }
+
+  .studio-sidebar .studio-panel-button span:last-child {
+    display: inline;
+  }
+
+  .studio-palette {
+    flex-direction: row;
+    overflow-x: auto;
+  }
+
+  .studio-palette-item {
+    min-width: 120px;
+  }
+
+  .studio-flow-surface {
+    min-height: 560px;
+  }
 }
 </style>
diff --git a/tests/e2e/edge-gateways.routes.spec.js b/tests/e2e/edge-gateways.routes.spec.js
index b3247a34..53b077e4 100644
--- a/tests/e2e/edge-gateways.routes.spec.js
+++ b/tests/e2e/edge-gateways.routes.spec.js
@@ -6,6 +6,8 @@ async function primeSuperuserSession(page) {
 }
 
 test.describe("Edge gateway routing and fleet navigation", () => {
+  test.describe.configure({ timeout: 120_000 });
+
   test.beforeEach(async ({ page }) => {
     await mockApi(page, {
       authenticated: true,
@@ -15,7 +17,7 @@ test.describe("Edge gateway routing and fleet navigation", () => {
   });
 
   test("redirects legacy configuration detail routes onto the Edge Agents overview", async ({ page }) => {
-    await page.goto("/superuser/configuration/edgegateway/701");
+    await page.goto("/superuser/configuration/edgegateway/701", { waitUntil: "domcontentloaded" });
 
     await expect(page).toHaveURL(/\/superuser\/selfserve\/edge-agents\/701\/overview$/);
     await expect(page.getByTestId("gateway-detail-header")).toContainText("CPH Edge 01");
@@ -23,7 +25,7 @@ test.describe("Edge gateway routing and fleet navigation", () => {
   });
 
   test("redirects legacy sub-page URLs onto the mapped Edge Agents route", async ({ page }) => {
-    await page.goto("/superuser/gateways/701/configure");
+    await page.goto("/superuser/gateways/701/configure", { waitUntil: "domcontentloaded" });
 
     await expect(page).toHaveURL(/\/superuser\/selfserve\/edge-agents\/701\/inventory$/);
     await expect(page.getByTestId("gateway-inventory-page")).toBeVisible();
diff --git a/tests/e2e/self-serve-studio-flow.spec.js b/tests/e2e/self-serve-studio-flow.spec.js
new file mode 100644
index 00000000..f132cfa5
--- /dev/null
+++ b/tests/e2e/self-serve-studio-flow.spec.js
@@ -0,0 +1,299 @@
+import { expect, test } from "@playwright/test";
+import { mockApi, primeMockSession } from "./support/network.js";
+
+const json = (body, status = 200) => ({
+  status,
+  contentType: "application/json",
+  body: JSON.stringify(body),
+});
+
+function buildStudioGraph() {
+  const lookups = {
+    departments: [{ id: 6, label: "Roskilde" }],
+    lanes: [{ id: 7, label: "Lane 7" }],
+    products: [{ id: 2, label: "Truck wash" }],
+    machine_types: [{ id: 1001, label: "Portal" }],
+    vehicle_types: [{ id: 2, product: 2, label: "Truck" }],
+    questions: [{ id: 11, label: "Are mirrors folded?" }],
+    conditions: [{ id: 21, label: "Trailer present" }],
+    rules: [{ id: 31, label: "Mirror answer" }],
+    tasks: [{ id: 41, label: "Fold mirrors" }],
+    gateways: [{ id: 701, label: "Roskilde Edge 01", status: "ONLINE" }],
+    relays: [{ id: "M-7", label: "Machine relay" }],
+    bindings: [{ id: "701:M-7:0", label: "Machine relay" }],
+    labels: {
+      departments: { 6: "Roskilde" },
+      lanes: { 7: "Lane 7" },
+      products: { 2: "Truck wash" },
+      machine_types: { 1001: "Portal" },
+      vehicle_types: { 2: "Truck" },
+      questions: { 11: "Are mirrors folded?" },
+      conditions: { 21: "Trailer present" },
+      rules: { 31: "Mirror answer" },
+      tasks: { 41: "Fold mirrors" },
+      gateways: { 701: "Roskilde Edge 01" },
+      relays: { "M-7": "Machine relay" },
+    },
+  };
+
+  return {
+    nodes: [
+      {
+        id: "condition:21",
+        type: "default",
+        position: { x: 320, y: 140 },
+        data: {
+          kind: "condition",
+          object_id: 21,
+          label: "Trailer present",
+          subtitle: "Lane 7 / Truck wash",
+          raw: { id: 21, department: 6, lane: 7, product: 2, name: "Trailer present", description: "" },
+        },
+      },
+      {
+        id: "question:11",
+        type: "default",
+        position: { x: 640, y: 140 },
+        data: {
+          kind: "question",
+          object_id: 11,
+          label: "Are mirrors folded?",
+          subtitle: "Lane 7 / Truck wash",
+          raw: {
+            id: 11,
+            department: 6,
+            lane: 7,
+            product: 2,
+            condition_id: 21,
+            question: "Are mirrors folded?",
+            description: "",
+            order_priority: 1,
+          },
+        },
+      },
+      {
+        id: "task:41",
+        type: "default",
+        position: { x: 960, y: 140 },
+        data: {
+          kind: "task",
+          object_id: 41,
+          label: "Fold mirrors",
+          subtitle: "Lane 7 / Truck wash",
+          raw: {
+            id: 41,
+            department: 6,
+            lane: 7,
+            product: 2,
+            task: "Fold mirrors",
+            description: "",
+            gate_type: "QUESTION",
+            gate_ref_id: 11,
+            order_priority: 1,
+            services: ["MACHINE"],
+            buttons: [1],
+          },
+        },
+      },
+      {
+        id: "gateway:701",
+        type: "default",
+        position: { x: 1280, y: 140 },
+        data: {
+          kind: "edge_gateway",
+          object_id: 701,
+          label: "Roskilde Edge 01",
+          subtitle: "ONLINE",
+          raw: { id: 701, label: "Roskilde Edge 01", status: "ONLINE" },
+        },
+      },
+    ],
+    edges: [
+      {
+        id: "question-gate:21:11",
+        source: "condition:21",
+        target: "question:11",
+        type: "smoothstep",
+        label: "show if",
+        data: { kind: "visibility_gate" },
+      },
+      {
+        id: "task-gate:question:11:41",
+        source: "question:11",
+        target: "task:41",
+        type: "smoothstep",
+        label: "unlocks",
+        data: { kind: "task_gate" },
+      },
+    ],
+    lookups,
+    validation: { valid: true, errors: [], warnings: [], items: [] },
+    layout: { nodes: [], viewport: [], runtime_affecting: false },
+    versions: [
+      { id: 90, version_number: 3, status: "DRAFT", created_at: "2026-04-28 09:00:00" },
+      { id: 80, version_number: 2, status: "PUBLISHED", published_at: "2026-04-27 09:00:00" },
+    ],
+    active_config: null,
+    draft: { id: 90, status: "DRAFT", version_number: 3 },
+    simulator_defaults: { department: 6, lane_id: 7, vehicle_type_id: 2, reg: "TEST123", customer_number: null },
+    gateway_workspace: {
+      gateways: [
+        {
+          id: 701,
+          label: "Roskilde Edge 01",
+          status: "ONLINE",
+          bindings: [{ relay_id: "M-7", label: "Machine relay", role: "MACHINE" }],
+        },
+      ],
+      relays: [{ relay_id: "M-7", name: "Machine relay" }],
+      lanes: [],
+      issues: [],
+      actions: [],
+    },
+    permissions: {
+      can_view: true,
+      can_edit: true,
+      can_publish: true,
+      can_rollback: true,
+      can_simulate: true,
+      modules_shelly_config: true,
+      can_manage_gateways: true,
+      can_run_gateway_destructive_actions: true,
+      can_run_live_lane_actions: true,
+    },
+    meta: { department_id: 6, layout_affects_runtime: false, generated_at: "2026-04-28T09:00:00+02:00" },
+  };
+}
+
+async function installStudioRoutes(page, graph, captured) {
+  await page.route(/\/department\/selfserve\/studio\/graph(?:\?.*)?$/i, async (route, request) => {
+    if (request.method() === "GET") {
+      await route.fulfill(json({ data: graph }));
+      return;
+    }
+
+    const body = request.postDataJSON?.() || {};
+    captured.graphSaves.push(body);
+    for (const operation of body.operations || []) {
+      if (operation.action === "create" && operation.entity === "question") {
+        graph.nodes.push({
+          id: "question:99",
+          type: "default",
+          position: { x: 700, y: 320 },
+          data: {
+            kind: "question",
+            object_id: 99,
+            label: operation.data.question,
+            subtitle: "Lane 7 / Truck wash",
+            raw: { id: 99, ...operation.data },
+          },
+        });
+      }
+      if (operation.action === "update" && operation.entity === "question" && Number(operation.id) === 11) {
+        const node = graph.nodes.find((entry) => entry.id === "question:11");
+        node.data.raw = { ...node.data.raw, ...operation.data };
+        node.data.label = operation.data.question;
+      }
+    }
+    await route.fulfill(json({ data: graph }));
+  });
+
+  await page.route(/\/department\/selfserve\/studio\/layout(?:\?.*)?$/i, async (route, request) => {
+    captured.layouts.push(request.postDataJSON?.() || {});
+    await route.fulfill(json({ data: { nodes: [], viewport: [], runtime_affecting: false } }));
+  });
+
+  await page.route(/\/department\/selfserve\/studio\/validate(?:\?.*)?$/i, async (route) => {
+    await route.fulfill(json({ data: graph.validation }));
+  });
+
+  await page.route(/\/department\/selfserve\/studio\/simulate(?:\?.*)?$/i, async (route, request) => {
+    captured.simulations.push(request.postDataJSON?.() || {});
+    await route.fulfill(json({ data: { allowed: true, questions: [], tasks: [{ task: "Fold mirrors" }] } }));
+  });
+
+  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 page.route(/\/department\/selfserve\/studio\/rollback(?:\?.*)?$/i, async (route, request) => {
+    captured.rollbacks.push(request.postDataJSON?.() || {});
+    await route.fulfill(json({ data: { id: 92, status: "PUBLISHED", version_number: 5 } }));
+  });
+
+  await page.route(/\/department\/selfserve\/studio\/gateway-action(?:\?.*)?$/i, async (route, request) => {
+    captured.gatewayActions.push(request.postDataJSON?.() || {});
+    await route.fulfill(json({ data: { action: "discovery", operation: { id: 1, status: "PENDING" } } }));
+  });
+}
+
+test.describe("All-in-one self-serve studio", () => {
+  test.describe.configure({ mode: "serial", timeout: 120_000 });
+
+  test.beforeEach(async ({ page }) => {
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "user"],
+      selfServe: true,
+    });
+    await primeMockSession(page, { token: "self-serve-studio-token" });
+  });
+
+  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 };
+    await installStudioRoutes(page, graph, captured);
+
+    await page.goto("/admin/6/modules/self-serve/studio", { waitUntil: "domcontentloaded", timeout: 90_000 });
+
+    await expect(page.getByTestId("self-serve-studio")).toBeVisible();
+    await expect(page.getByTestId("self-serve-studio-flow")).toBeVisible();
+    await expect(page.getByText("Are mirrors folded?").first()).toBeVisible();
+    await expect(page.getByText("Roskilde Edge 01").first()).toBeVisible();
+
+    await page.getByText("Are mirrors folded?").first().click();
+    await expect(page.getByRole("heading", { name: "Inspector" })).toBeVisible();
+    await page.getByRole("textbox", { name: "Question", exact: true }).fill("Are loose straps secured?");
+    await page.getByRole("button", { name: "Save" }).click();
+
+    await expect.poll(() => captured.graphSaves.some((save) => save.operations?.[0]?.action === "update")).toBe(true);
+    await expect(page.getByText("Are loose straps secured?")).toBeVisible();
+  });
+
+  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 };
+    await installStudioRoutes(page, graph, captured);
+
+    await page.goto("/admin/6/modules/self-serve/studio", { waitUntil: "domcontentloaded", timeout: 90_000 });
+    await expect(page.getByTestId("self-serve-studio-flow")).toBeVisible();
+
+    await page.evaluate(() => {
+      const source = document.querySelector('[data-testid="studio-palette-question"]');
+      const target = document.querySelector('[data-testid="self-serve-studio-flow"]');
+      const dataTransfer = new DataTransfer();
+      source.dispatchEvent(new DragEvent("dragstart", { bubbles: true, cancelable: true, dataTransfer }));
+      target.dispatchEvent(new DragEvent("dragover", { bubbles: true, cancelable: true, dataTransfer }));
+      target.dispatchEvent(new DragEvent("drop", { bubbles: true, cancelable: true, dataTransfer }));
+    });
+    await expect.poll(() => captured.graphSaves.some((save) => save.operations?.[0]?.action === "create")).toBe(true);
+    await expect(page.getByText("New question").first()).toBeVisible();
+
+    await page.getByTestId("studio-panel-hardware").click();
+    await page.getByTitle("Discover gateway").click();
+    await expect.poll(() => captured.gatewayActions[0]?.action).toBe("discovery");
+
+    await page.getByTestId("studio-panel-simulator").click();
+    await page.getByLabel("Registration").fill("AB12345");
+    await page.getByRole("button", { name: "Run" }).click();
+    await expect.poll(() => captured.simulations[0]?.reg).toBe("AB12345");
+    await expect(page.locator(".studio-json")).toContainText("Fold mirrors");
+
+    await page.getByTestId("studio-panel-versions").click();
+    await page.getByRole("button", { name: "Publish" }).first().click();
+    await expect.poll(() => captured.published).toBe(1);
+    await page.getByRole("button", { name: "Rollback" }).last().click();
+    await expect.poll(() => captured.rollbacks[0]?.target_version_id).toBe(80);
+  });
+});
diff --git a/tests/e2e/self-serve-wash.spec.js b/tests/e2e/self-serve-wash.spec.js
index 94f2689a..257223d5 100644
--- a/tests/e2e/self-serve-wash.spec.js
+++ b/tests/e2e/self-serve-wash.spec.js
@@ -470,11 +470,15 @@ test.describe("Self-serve wash", () => {
       completedTasks: {},
     });
 
-    await mockApi(page, {
+    const api = await mockApi(page, {
       authenticated: true,
       permissions: ["user"],
       selfServe: true,
     });
+    const answeredSummary = api.selfServe.answerResponseByKey["7:AB12345:11:true"];
+    api.selfServe.previewByKey["7:AB12345"].questions = answeredSummary.questions;
+    api.selfServe.summaryBySessionId[501] = answeredSummary;
+    api.selfServe.summaryByKey["7:AB12345"] = answeredSummary;
     await primeSession(page, {
       token: "self-serve-tasks-token",
       permissions: ["user"],
@@ -595,8 +599,8 @@ test.describe("Self-serve wash", () => {
     await expect(page.getByTestId("self-serve-question-11")).toBeVisible();
     await page.getByTestId("self-serve-question-11-yes").click();
 
-    await expect(page.getByText("Ingen aktive tasks.")).toBeVisible();
-    await expect(page.getByText("Ingen session-events endnu.")).toBeVisible();
+    await expect(page.getByText("Prepare the truck")).toBeVisible();
+    await expect(page.getByText("SESSION_SYNCED")).toBeVisible();
     const answeredQuestion = page.locator("li", { hasText: "Is the tarp removed?:" }).last();
     await expect(answeredQuestion).toBeVisible();
     await expect(answeredQuestion.locator("strong")).toHaveText("Ja");