diff --git a/playwright.global-setup.mjs b/playwright.global-setup.mjs
index 69caa7d0..03b1f00a 100644
--- a/playwright.global-setup.mjs
+++ b/playwright.global-setup.mjs
@@ -386,12 +386,21 @@ async function warmModuleGraph(entryUrl, { depth = 2, timeoutMs = 120_000 } = {}
 
 async function warmUpDevServer(url) {
   const warmupTargets = await buildWarmupTargets();
+  const selfServeEntryModules = [
+    "/src/views/dashboards/userDashboard/wash/MyWash.vue",
+    "/src/views/dashboards/userDashboard/wash/MyWashStart.vue",
+    "/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue",
+    "/src/views/guest/book/GuestBookExteriorWash.vue",
+  ];
 
   for (const target of warmupTargets) {
     await warmUpAsset(new URL(target.pathname, url).toString(), target.expectedContentType);
   }
 
   await warmModuleGraph(new URL("/src/main.js", url).toString());
+  for (const entryModule of selfServeEntryModules) {
+    await warmModuleGraph(new URL(entryModule, url).toString(), { depth: 2 });
+  }
   await new Promise((resolve) => setTimeout(resolve, 1000));
 }
 
diff --git a/src/App.vue b/src/App.vue
index 4be08c13..db248338 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,13 +4,13 @@ import { computed, defineAsyncComponent, onMounted, watch } from "vue";
 import { useHead } from "@vueuse/head";
 import favicon from '@/assets/favicon.ico';
 import {useRoute} from "vue-router";
-import LayoutV2 from "@/components/page/wrappers/LayoutV2.vue";
 import { useI18n } from "vue-i18n";
 import { hasStoredSessionToken } from "@/services/sessionStorage.js";
 
 const route = useRoute();
 const { t, te, locale } = useI18n({ useScope: "global" });
 const APP_TITLE = "Truck Wash";
+const LayoutV2 = defineAsyncComponent(() => import("@/components/page/wrappers/LayoutV2.vue"));
 const DefaultPageWrapper = defineAsyncComponent(() => import("@/components/page/wrappers/DefaultPageWrapper.vue"));
 const VersionCheck = defineAsyncComponent(() => import("@/components/global/VersionCheck.vue"));
 const RequestQueueProgress = defineAsyncComponent(() => import("@/components/global/RequestQueueProgress.vue"));
diff --git a/src/components/displays/department/tables/SelfServeTryModal.vue b/src/components/displays/department/tables/SelfServeTryModal.vue
index 17feb73b..3c37fa24 100644
--- a/src/components/displays/department/tables/SelfServeTryModal.vue
+++ b/src/components/displays/department/tables/SelfServeTryModal.vue
@@ -62,6 +62,7 @@ const {
   syncVehicleAnswer,
   clearVehicleAnswers,
   evaluateCondition,
+  downloadAttachment,
 } = useSelfServeLogic();
 
 const emptyCompletedTasks = computed(() => ({}));
@@ -429,7 +430,7 @@ watch(dynamicImageUrl, () => {
                 :completedTasks="emptyCompletedTasks"
                 :show-checkboxes="false"
                 @toggle-task="() => {}"
-                @download-attachment="() => {}"
+                @download-attachment="downloadAttachment"
               />
 
               <p v-if="activeTasks.length === 0" class="is-italic">Ingen aktive tasks.</p>
diff --git a/src/components/displays/selfServe/SelfServeQuestionCards.vue b/src/components/displays/selfServe/SelfServeQuestionCards.vue
index 45abbbd0..c74e2f90 100644
--- a/src/components/displays/selfServe/SelfServeQuestionCards.vue
+++ b/src/components/displays/selfServe/SelfServeQuestionCards.vue
@@ -4,8 +4,6 @@ import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
 defineProps<{
   visibleQuestions: Array<{ id: number; question: string; description?: string }>;
   answers: Record<number, boolean | undefined>;
-  loadingQuestionId?: number | null;
-  loadingAnswerValue?: boolean | null;
 }>();
 
 const emit = defineEmits<{
@@ -30,12 +28,8 @@ const emit = defineEmits<{
           <div class="card-footer-item">
             <button
               class="button is-fullwidth"
-              :class="[
-                answers[question.id] === true ? 'is-success' : 'is-light',
-                loadingQuestionId === question.id && loadingAnswerValue === true ? 'is-loading' : '',
-              ]"
+              :class="[answers[question.id] === true ? 'is-success' : 'is-light']"
               :data-testid="`self-serve-question-${question.id}-yes`"
-              :disabled="loadingQuestionId === question.id"
               @click="emit('answer-question', question.id, true)"
             >
               {{ $t("common.yes") }}
@@ -44,12 +38,8 @@ const emit = defineEmits<{
           <div class="card-footer-item">
             <button
               class="button is-fullwidth"
-              :class="[
-                answers[question.id] === false ? 'is-danger' : 'is-light',
-                loadingQuestionId === question.id && loadingAnswerValue === false ? 'is-loading' : '',
-              ]"
+              :class="[answers[question.id] === false ? 'is-danger' : 'is-light']"
               :data-testid="`self-serve-question-${question.id}-no`"
-              :disabled="loadingQuestionId === question.id"
               @click="emit('answer-question', question.id, false)"
             >
               {{ $t("common.no") }}
diff --git a/src/components/displays/selfServe/SelfServeQuestionsStep.vue b/src/components/displays/selfServe/SelfServeQuestionsStep.vue
index 9745d8d1..721a0a6e 100644
--- a/src/components/displays/selfServe/SelfServeQuestionsStep.vue
+++ b/src/components/displays/selfServe/SelfServeQuestionsStep.vue
@@ -6,8 +6,6 @@ defineProps<{
   isLoading: boolean;
   visibleQuestions: Array<any>;
   answers: Record<number, boolean | undefined>;
-  loadingQuestionId?: number | null;
-  loadingAnswerValue?: boolean | null;
   editAnswers: boolean;
   showDebug: boolean;
   conditions: Array<any>;
@@ -145,8 +143,6 @@ const emitAnswerQuestion = (questionId: number, value: boolean) => {
       <SelfServeQuestionCards
         :visibleQuestions="visibleQuestions"
         :answers="answers"
-        :loading-question-id="loadingQuestionId"
-        :loading-answer-value="loadingAnswerValue"
         @answer-question="emitAnswerQuestion"
       />
     </div>
diff --git a/src/components/displays/selfServe/SelfServeTaskList.vue b/src/components/displays/selfServe/SelfServeTaskList.vue
index 60cf46b7..ed82cfb3 100644
--- a/src/components/displays/selfServe/SelfServeTaskList.vue
+++ b/src/components/displays/selfServe/SelfServeTaskList.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: "toggle-task", taskId: number, value: boolean): void;
-  (e: "download-attachment", taskId: number, attachmentId: number): void;
+  (e: "download-attachment", taskId: number, attachmentId: number | undefined, attachment?: any): void;
 }>();
 
 const isImageAttachment = (attachment: any) => (
@@ -76,7 +76,7 @@ const getVisibleServices = (task: any) => {
             :alt="getPrimaryImageAttachment(task)?.content?.other || task.task"
             class="self-serve-task-image is-clickable"
             :data-testid="`self-serve-task-${task.id}-attachment-${getPrimaryImageAttachment(task)?.id}`"
-            @click="emit('download-attachment', task.id, getPrimaryImageAttachment(task)?.id)"
+            @click="emit('download-attachment', task.id, getPrimaryImageAttachment(task)?.id, getPrimaryImageAttachment(task))"
           />
           <div class="self-serve-task-image-overlay">
             <div class="self-serve-task-image-overlay-content">
@@ -109,7 +109,7 @@ const getVisibleServices = (task: any) => {
               <a
                 class="is-size-7"
                 :data-testid="`self-serve-task-${task.id}-attachment-${attachment.id}`"
-                @click="emit('download-attachment', task.id, attachment.id)"
+                @click="emit('download-attachment', task.id, attachment.id, attachment)"
               >
                 {{ attachment.content?.other || $t("self_wash.attached_file") }}
               </a>
@@ -145,7 +145,7 @@ const getVisibleServices = (task: any) => {
                   style="max-width: 100%; height: auto; border-radius: 4px; display: block;"
                   class="mb-1 is-clickable"
                   :data-testid="`self-serve-task-${task.id}-attachment-${attachment.id}`"
-                  @click="emit('download-attachment', task.id, attachment.id)"
+                  @click="emit('download-attachment', task.id, attachment.id, attachment)"
                 />
               </template>
               <div v-else class="is-flex is-align-items-center">
@@ -153,7 +153,7 @@ const getVisibleServices = (task: any) => {
                 <a
                   class="is-size-7"
                   :data-testid="`self-serve-task-${task.id}-attachment-${attachment.id}`"
-                  @click="emit('download-attachment', task.id, attachment.id)"
+                  @click="emit('download-attachment', task.id, attachment.id, attachment)"
                 >
                   {{ attachment.content?.other || $t("self_wash.attached_file") }}
                 </a>
diff --git a/src/components/displays/selfServe/SelfServeTasksStep.vue b/src/components/displays/selfServe/SelfServeTasksStep.vue
index 8cd46ef0..12d853ad 100644
--- a/src/components/displays/selfServe/SelfServeTasksStep.vue
+++ b/src/components/displays/selfServe/SelfServeTasksStep.vue
@@ -13,7 +13,7 @@ defineProps<{
 
 const emit = defineEmits<{
   (e: "toggle-task", taskId: number, value: boolean): void;
-  (e: "download-attachment", taskId: number, attachmentId: number): void;
+  (e: "download-attachment", taskId: number, attachmentId: number | undefined, attachment?: any): void;
   (e: "clear-dynamic-image"): void;
 }>();
 
@@ -21,8 +21,8 @@ const emitToggleTask = (taskId: number, value: boolean) => {
   emit("toggle-task", taskId, value);
 };
 
-const emitDownloadAttachment = (taskId: number, attachmentId: number) => {
-  emit("download-attachment", taskId, attachmentId);
+const emitDownloadAttachment = (taskId: number, attachmentId: number | undefined, attachment?: any) => {
+  emit("download-attachment", taskId, attachmentId, attachment);
 };
 </script>
 
diff --git a/src/components/displays/selfServe/SelfServeVehicleTypeSelector.vue b/src/components/displays/selfServe/SelfServeVehicleTypeSelector.vue
index 997a51e8..8c857cb2 100644
--- a/src/components/displays/selfServe/SelfServeVehicleTypeSelector.vue
+++ b/src/components/displays/selfServe/SelfServeVehicleTypeSelector.vue
@@ -166,6 +166,15 @@ watch(() => props.selectedVehicleTypeId, (newId) => {
   padding: 5px;
 }
 
+.vehicle-type-content :deep(.box),
+.vehicle-type-content :deep(.card) {
+  cursor: pointer;
+}
+
+.vehicle-type-content img {
+  pointer-events: none;
+}
+
 .vehicle-type-content:nth-child(3n + 1) {
   padding-left: 0;
 }
diff --git a/src/composables/useSelfServeLogic.js b/src/composables/useSelfServeLogic.js
index 31b055c3..ddf33c32 100644
--- a/src/composables/useSelfServeLogic.js
+++ b/src/composables/useSelfServeLogic.js
@@ -48,6 +48,7 @@ const normalizeTask = (task) => ({
   services: Array.isArray(task?.services) ? task.services : [],
   buttons: Array.isArray(task?.buttons) ? task.buttons : [],
   attachments: Array.isArray(task?.attachments) ? task.attachments : [],
+  _attachmentsLoaded: Array.isArray(task?.attachments),
   dynamic_images_vehicle_type: task?.dynamic_images_vehicle_type ?? null,
 });
 
@@ -279,10 +280,18 @@ export function useSelfServeLogic() {
     return Promise.all(taskList.map(async (task) => {
       const taskId = extractTaskId(task);
 
+      if (task._attachmentsLoaded) {
+        return {
+          ...task,
+          attachments: Array.isArray(task.attachments) ? task.attachments : [],
+        };
+      }
+
       if (!taskId) {
         return {
           ...task,
           attachments: Array.isArray(task.attachments) ? task.attachments : [],
+          _attachmentsLoaded: true,
         };
       }
 
@@ -310,12 +319,14 @@ export function useSelfServeLogic() {
         return {
           ...task,
           attachments,
+          _attachmentsLoaded: true,
         };
       } catch (error) {
         console.error(`Error loading attachments for task ${taskId}:`, error);
         return {
           ...task,
           attachments: [],
+          _attachmentsLoaded: true,
         };
       }
     }));
@@ -435,13 +446,19 @@ export function useSelfServeLogic() {
     return true;
   };
 
-  const downloadAttachment = async (taskId, attachmentId) => {
+  const downloadAttachment = async (taskId, attachmentId, attachment = null) => {
+    const existingDownloadLink = attachment?.download_link || null;
+    if (existingDownloadLink) {
+      window.open(existingDownloadLink, "_blank", "noopener");
+      return;
+    }
+
     try {
       const response = await SessionUser.objects.self_serve_tasks.attachments.download(taskId, attachmentId);
       if (response?.data?.download_link) {
-        window.open(response.data.download_link, "_blank");
+        window.open(response.data.download_link, "_blank", "noopener");
       } else if (response?.download_link) {
-        window.open(response.download_link, "_blank");
+        window.open(response.download_link, "_blank", "noopener");
       }
     } catch (error) {
       console.error("Error downloading attachment:", error);
diff --git a/src/main.js b/src/main.js
index 08dec247..d2b054a4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,13 +21,10 @@ import { installAxiosRequestQueue } from '@/services/installAxiosRequestQueue.js
 import { API_URL, IS_DEV } from './config';
 const VITE_BUILD_DATE = import.meta.env.VITE_BUILD_DATE || '';
 const VITE_COMMIT_HASH = import.meta.env.VITE_COMMIT_HASH || '';
-const VITE_IS_PLAYWRIGHT = import.meta.env.VITE_IS_PLAYWRIGHT === true || import.meta.env.VITE_IS_PLAYWRIGHT === 'true';
 const LAST_VERSION_CHECK_STORAGE_KEY = 'lastVersionCheck';
 
-if (!VITE_IS_PLAYWRIGHT) {
-  await import('bulma/css/bulma.min.css');
-  await import('buefy/dist/css/buefy.css');
-}
+void import('bulma/css/bulma.min.css');
+void import('buefy/dist/css/buefy.css');
 
 const TRUCK_WASH_ASCII = [
   ' _____               _      _    _           _     \n' +
@@ -113,7 +110,7 @@ if (import.meta.env.DEV && typeof window !== 'undefined') {
 // 	window.location.href = '/redirect';
 // }
 applyMiddleware(Router)
-createApp(App)
+const app = createApp(App)
 	.use(Router)
 	.use(createHead())
 	.use(store)
@@ -121,9 +118,12 @@ createApp(App)
   .use(Buefy)
 	.use(i18n)
   .use(VueApexCharts)
-	.provide('Colors', Colors)
+  .provide('Colors', Colors)
 	.provide('IS_DEV', IS_DEV)
 	.provide('API_URL', API_URL)
-	.mount('#app');
 
-initializeAutoTableExports();
+app.mount('#app');
+
+void Router.isReady().finally(() => {
+  initializeAutoTableExports();
+});
diff --git a/src/middleware/adminMiddleware.js b/src/middleware/adminMiddleware.js
index 7c0e1ec1..2613d249 100644
--- a/src/middleware/adminMiddleware.js
+++ b/src/middleware/adminMiddleware.js
@@ -1,11 +1,10 @@
 /**
  * @description Middleware to check if user is admin
  */
-import store from '@/store/user.vue';
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { hasStoredSessionToken } from "@/services/sessionStorage.js";
 
 export default function adminMiddleware({ next, router }) {
-  if (!SessionUser.hasToken()) {
+  if (!hasStoredSessionToken()) {
       return router.push({
         // Redirect to login page
         name: 'login',
@@ -15,4 +14,4 @@ export default function adminMiddleware({ next, router }) {
   }
 
   return next();
-}
\ No newline at end of file
+}
diff --git a/src/middleware/superUserMiddleware.js b/src/middleware/superUserMiddleware.js
index 3146cafe..dc042e8a 100644
--- a/src/middleware/superUserMiddleware.js
+++ b/src/middleware/superUserMiddleware.js
@@ -1,11 +1,10 @@
 /**
  * @description Middleware to check if the user is a superuser
  */
-import store from '@/store/user.vue';
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { hasStoredSessionToken } from "@/services/sessionStorage.js";
 
 export default function superUserMiddleware({ next, router }) {
-    if (!SessionUser.hasToken()) {
+    if (!hasStoredSessionToken()) {
         return router.push({
             // Redirect to login page
             name: 'login',
diff --git a/src/router.js b/src/router.js
index eb842e5f..22551949 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,7 @@ import authMiddleware from './middleware/authMiddleware.js';
 import guestMiddleware from "@/middleware/guestMiddleware.js";
 import adminMiddleware from './middleware/adminMiddleware.js';
 import superUserMiddleware from "@/middleware/superUserMiddleware.js";
+import GuestBookExteriorWash from "@/views/guest/book/GuestBookExteriorWash.vue";
 
 const lazyModules = import.meta.glob('/src/views/**/*.vue');
 
@@ -115,7 +116,6 @@ const UserOther = lazyView('@/views/dashboards/superUserDashboard/user/UserOther
 //const MyBookingsNew = lazyView('@/views/dashboards/userDashboard/bookings/MyBookingsNew.vue');
 const DepartmentCompleteBooking = lazyView('@/views/dashboards/departmentDashboard/modules/bookings/DepartmentCompleteBooking.vue');
 const GuestHome = lazyView('@/views/guest/GuestHome.vue');
-const GuestBookExteriorWash = lazyView('@/views/guest/book/GuestBookExteriorWash.vue');
 const DepartmentProfile = lazyView('@/views/dashboards/superUserDashboard/department/DepartmentProfile.vue');
 const DepartmentGatewaysWorkspacePage = lazyView('@/views/dashboards/superUserDashboard/department/DepartmentGatewaysWorkspacePage.vue');
 const ConfigurationFXRatesAPI = lazyView('@/views/dashboards/superUserDashboard/configuration/ConfigurationFXRatesAPI.vue');
@@ -1220,6 +1220,7 @@ export const router = createRouter({
 			name: 'guestBookWash',
 			path: '/guest/book/wash',
 			component: GuestBookExteriorWash,
+			meta: { template: 'clear-main', titleKey: 'book_wash.title' }
 		},
 		{
 			name: 'outdated-installation',
diff --git a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
index 3a12b46b..c52fba01 100644
--- a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
+++ b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { Handle, Position, VueFlow, useVueFlow } from "@vue-flow/core";
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
@@ -21,6 +21,7 @@ import {
 import { resolveAuditIssueNodeIds } from "./auditIssueNavigation.js";
 
 const currentRoute = useRoute();
+const currentRouter = useRouter();
 const toast = useAppToast();
 const { fitView, getViewport, zoomIn, zoomOut, zoomTo } = useVueFlow({ id: "self-serve-studio-flow" });
 
@@ -60,6 +61,7 @@ const PANEL_ITEMS = [
   { 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: "paths", label: "Path Outcomes", icon: "fas fa-route" },
   { 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" },
@@ -114,10 +116,22 @@ const CONDITION_OPERATORS = [
   { value: "IS_FALSE_OR_NOT_SET", label: "is false or unanswered" },
 ];
 
+const CONDITION_EXPRESSION_TYPES = [
+  { value: "group", label: "All / Any" },
+  { value: "branch", label: "If / Else" },
+  { value: "case", label: "Case" },
+];
+
+const CONDITION_CASE_VALUES = [
+  { value: true, label: "True" },
+  { value: false, label: "False" },
+  { value: null, label: "Unanswered" },
+];
+
 const ACTION_EVENT_OPTIONS = [
-  { value: "wash_start_command", label: "On self-serve wash start command" },
-  { value: "wash_stop_command", label: "On self-serve wash stop command" },
-  { value: "machine_start_triggered", label: "On self-serve wash machine start triggered" },
+  { value: "wash_start_command", label: "When wash starts" },
+  { value: "wash_stop_command", label: "When wash stops" },
+  { value: "machine_start_triggered", label: "When the machine start button is triggered" },
 ];
 
 const ACTION_WASH_MODE_OPTIONS = [
@@ -224,6 +238,11 @@ const simulatorResult = ref(null);
 const simulatorAnswerOverrides = ref({});
 const simulatorShowJson = ref(false);
 const simulatorDynamicImageHidden = ref(false);
+const pathOutcomes = ref(null);
+const isLoadingPathOutcomes = ref(false);
+const pathOutcomesError = ref("");
+const pathOutcomesRequestKey = ref("");
+const selectedPathOutcomeId = ref(null);
 const simulatorCustomerSearchQuery = ref("");
 const selectedSimulatorCustomer = ref(null);
 const showSimulatorCustomerResults = ref(false);
@@ -248,6 +267,8 @@ const filters = ref({
 });
 const isLoading = ref(false);
 const isSaving = ref(false);
+const isUploadingTaskAttachment = ref(false);
+const deletingTaskAttachmentId = ref(null);
 const isStudioFullscreen = ref(false);
 const layoutSaveTimer = ref(null);
 const suppressLayoutSave = ref(false);
@@ -530,6 +551,94 @@ const simulatorScopeSummary = computed(() => ({
     || (selectedSimulatorVehicleTypeId.value ? labelFor("vehicle_types", selectedSimulatorVehicleTypeId.value) : "Auto"),
 }));
 
+const pathOutcomesRequestPayload = computed(() => {
+  const hardwareMode = simulatorForm.value.hardware_mode || (hasVirtualHardware.value ? "studio" : "real");
+  return {
+    department: departmentId.value,
+    lane_id: selectedSimulatorLaneId.value,
+    vehicle_type_id: selectedSimulatorVehicleTypeId.value,
+    config_source: simulatorForm.value.config_source || "draft",
+    hardware_mode: hardwareMode,
+    include_hardware: hardwareMode !== "none",
+    max_states: 2048,
+  };
+});
+const currentPathOutcomesRequestKey = computed(() => JSON.stringify(pathOutcomesRequestPayload.value));
+const pathOutcomeList = computed(() => (Array.isArray(pathOutcomes.value?.outcomes) ? pathOutcomes.value.outcomes : []));
+const selectedPathOutcome = computed(() => (
+  pathOutcomeList.value.find((outcome) => outcome.id === selectedPathOutcomeId.value)
+  || pathOutcomeList.value[0]
+  || null
+));
+const pathOutcomesSummary = computed(() => pathOutcomes.value?.summary || {});
+const pathOutcomesScope = computed(() => pathOutcomes.value?.scope || null);
+const pathOutcomesWarnings = computed(() => (Array.isArray(pathOutcomes.value?.warnings) ? pathOutcomes.value.warnings : []));
+const pathOutcomesStale = computed(() => Boolean(pathOutcomes.value && pathOutcomesRequestKey.value !== currentPathOutcomesRequestKey.value));
+
+const pathOutcomeScopeLabel = (scope = pathOutcomesScope.value) => {
+  if (!scope) {
+    return "Current filters";
+  }
+  const parts = [
+    scope.lane || (scope.lane_id ? labelFor("lanes", scope.lane_id) : null),
+    scope.vehicle_type || (scope.vehicle_type_id ? labelFor("vehicle_types", scope.vehicle_type_id) : "All current vehicle types"),
+    scope.config_source ? `${scope.config_source} config` : null,
+    scope.hardware_mode ? `${scope.hardware_mode} hardware` : null,
+  ].filter(Boolean);
+  return parts.join(" / ") || "Current filters";
+};
+
+const pathOutcomeServicesLabel = (services = []) => {
+  const values = Array.isArray(services) ? services.filter(Boolean) : [];
+  return values.length > 0 ? values.join(", ") : "No services";
+};
+
+const pathOutcomeSignalLabel = (signal = {}) => [
+  signal.runtime_stage,
+  signal.relay_role || signal.signal_type,
+  signal.predicted_status,
+].filter(Boolean).join(" / ");
+
+const pathOutcomeAnswerLabel = (answer = {}) => (
+  answer.answer_label || (answer.answer === true ? "Yes" : answer.answer === false ? "No" : "Unset")
+);
+
+const selectPathOutcome = (outcome) => {
+  selectedPathOutcomeId.value = outcome?.id || null;
+};
+
+const focusPathOutcomeNodes = async (nodeIds = []) => {
+  const ids = (Array.isArray(nodeIds) ? nodeIds : []).filter(Boolean);
+  if (ids.length === 0) {
+    return;
+  }
+  activePanel.value = "flow";
+  await nextTick();
+  focusDebugNodes(ids, false);
+};
+
+const loadPathOutcomes = async () => {
+  if (!departmentId.value || isLoadingPathOutcomes.value) {
+    return;
+  }
+  isLoadingPathOutcomes.value = true;
+  pathOutcomesError.value = "";
+  try {
+    const payload = await requestPost("/department/selfserve/studio/path-outcomes", pathOutcomesRequestPayload.value);
+    pathOutcomes.value = payload || { outcomes: [], summary: {}, warnings: [], truncated: false };
+    pathOutcomesRequestKey.value = currentPathOutcomesRequestKey.value;
+    selectedPathOutcomeId.value = pathOutcomeList.value[0]?.id || null;
+  } catch (error) {
+    pathOutcomesError.value = error?.response?.data?.message
+      || error?.response?.data?.data?.message
+      || error?.message
+      || "Path outcomes could not be loaded.";
+    withErrorToast(error, "Path outcomes could not be loaded.");
+  } finally {
+    isLoadingPathOutcomes.value = false;
+  }
+};
+
 const normalizePositiveInteger = (value) => {
   const parsed = Number.parseInt(String(value ?? ""), 10);
   return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
@@ -783,7 +892,65 @@ const actionPayload = (action = {}) => {
   };
 };
 
-const emptyConditionExpression = () => ({ type: "group", operator: "ALL", children: [] });
+const emptyPredicateExpression = () => {
+  const question = expressionSubjectOptions("question")[0];
+  const condition = expressionSubjectOptions("condition", selectedConditionId.value)[0];
+  const subjectType = question ? "question" : "condition";
+  return {
+    type: "predicate",
+    subject_type: subjectType,
+    subject_id: parseIntOrZero((subjectType === "question" ? question : condition)?.id),
+    operator: "IS_TRUE",
+  };
+};
+
+const emptyGroupExpression = () => ({ type: "group", operator: "ALL", children: [] });
+
+const emptyBranchClause = (kind = "if") => ({
+  kind,
+  ...(kind === "else" ? { else: true } : { when: emptyGroupExpression() }),
+  then: emptyGroupExpression(),
+});
+
+const emptyCaseExpression = () => {
+  const question = expressionSubjectOptions("question")[0];
+  const condition = expressionSubjectOptions("condition", selectedConditionId.value)[0];
+  const subjectType = question ? "question" : "condition";
+  return {
+    type: "case",
+    operator: "CASE",
+    subject_type: subjectType,
+    subject_id: parseIntOrZero((subjectType === "question" ? question : condition)?.id),
+    cases: [
+      { value: true, then: emptyGroupExpression() },
+      { value: false, then: emptyGroupExpression() },
+    ],
+  };
+};
+
+const emptyConditionExpression = (type = "group") => {
+  if (type === "branch") {
+    return { type: "branch", operator: "IF_ELSE", branches: [emptyBranchClause("if"), emptyBranchClause("else")] };
+  }
+  if (type === "case") {
+    return emptyCaseExpression();
+  }
+  return emptyGroupExpression();
+};
+
+const normalizeConditionExpressionAsGroup = (expression) => {
+  const normalized = normalizeConditionExpression(expression);
+  if (normalized.type === "group") {
+    return normalized;
+  }
+  return { type: "group", operator: "ALL", children: normalized.type === "predicate" ? [normalized] : [] };
+};
+
+const normalizeCaseValue = (value) => {
+  if (value === true || value === "true" || value === "1") return true;
+  if (value === false || value === "false" || value === "0") return false;
+  return null;
+};
 
 const normalizeConditionExpression = (expression) => {
   if (!expression || typeof expression !== "object") {
@@ -804,6 +971,40 @@ const normalizeConditionExpression = (expression) => {
       operator,
     };
   }
+  if (["branch", "if", "if_else"].includes(type)) {
+    const branches = Array.isArray(expression.branches) ? expression.branches : [];
+    return {
+      type: "branch",
+      operator: "IF_ELSE",
+      branches: (branches.length ? branches : [emptyBranchClause("if"), emptyBranchClause("else")]).map((branch, index) => {
+        const rawKind = String(branch?.kind || branch?.type || branch?.operator || (index === 0 ? "if" : "else_if")).toLowerCase();
+        const isElse = branch?.else === true || ["else", "default"].includes(rawKind);
+        return {
+          kind: isElse ? "else" : (index === 0 ? "if" : "else_if"),
+          ...(isElse ? { else: true } : { when: normalizeConditionExpressionAsGroup(branch?.when) }),
+          then: normalizeConditionExpressionAsGroup(branch?.then),
+        };
+      }),
+      ...(expression.default ? { default: normalizeConditionExpressionAsGroup(expression.default) } : {}),
+    };
+  }
+  if (type === "case") {
+    const subjectType = ["question", "condition"].includes(String(expression.subject_type || expression.object_type).toLowerCase())
+      ? String(expression.subject_type || expression.object_type).toLowerCase()
+      : "question";
+    const cases = Array.isArray(expression.cases) ? expression.cases : [];
+    return {
+      type: "case",
+      operator: "CASE",
+      subject_type: subjectType,
+      subject_id: parseIntOrZero(expression.subject_id ?? expression.object_id),
+      cases: (cases.length ? cases : emptyCaseExpression().cases).map((caseClause) => ({
+        value: normalizeCaseValue(caseClause?.value),
+        then: normalizeConditionExpressionAsGroup(caseClause?.then),
+      })),
+      ...(expression.default ? { default: normalizeConditionExpressionAsGroup(expression.default) } : {}),
+    };
+  }
   const operator = ["ALL", "ANY"].includes(String(expression.operator || expression.mode).toUpperCase())
     ? String(expression.operator || expression.mode).toUpperCase()
     : "ALL";
@@ -832,6 +1033,31 @@ const conditionExpressionSummary = (expression) => {
     const operatorLabel = CONDITION_OPERATORS.find((option) => option.value === normalized.operator)?.label || normalized.operator;
     return `${labelFor(lookupType, normalized.subject_id)} ${operatorLabel}`;
   }
+  if (normalized.type === "branch") {
+    if (!normalized.branches.length) {
+      return "No if / else clauses";
+    }
+    const parts = normalized.branches.slice(0, 3).map((branch, index) => {
+      const label = branch.kind === "else" ? "Else" : (index === 0 ? "If" : "Else if");
+      const when = branch.kind === "else" ? "" : ` ${conditionExpressionSummary(branch.when)}`;
+      return `${label}${when} then ${conditionExpressionSummary(branch.then)}`;
+    });
+    if (normalized.branches.length > 3) {
+      parts.push(`+${normalized.branches.length - 3} more`);
+    }
+    return parts.join("; ");
+  }
+  if (normalized.type === "case") {
+    const lookupType = normalized.subject_type === "condition" ? "conditions" : "questions";
+    const parts = normalized.cases.slice(0, 3).map((caseClause) => {
+      const valueLabel = CONDITION_CASE_VALUES.find((option) => option.value === caseClause.value)?.label || "Unanswered";
+      return `${valueLabel} then ${conditionExpressionSummary(caseClause.then)}`;
+    });
+    if (normalized.cases.length > 3) {
+      parts.push(`+${normalized.cases.length - 3} more`);
+    }
+    return `Case ${labelFor(lookupType, normalized.subject_id)}: ${parts.join("; ")}`;
+  }
   if (!normalized.children.length) {
     return "No predicates";
   }
@@ -856,6 +1082,32 @@ const ensureInspectorExpression = () => {
   return inspectorForm.value.expression;
 };
 
+const setConditionExpressionType = (type) => {
+  const current = ensureInspectorExpression();
+  if (current.type === type) {
+    return;
+  }
+  if (type === "branch") {
+    inspectorForm.value.expression = {
+      type: "branch",
+      operator: "IF_ELSE",
+      branches: [
+        { kind: "if", when: normalizeConditionExpressionAsGroup(current), then: emptyGroupExpression() },
+        emptyBranchClause("else"),
+      ],
+    };
+    return;
+  }
+  if (type === "case") {
+    const next = emptyCaseExpression();
+    next.cases[0].then = normalizeConditionExpressionAsGroup(current);
+    inspectorForm.value.expression = next;
+    syncCaseSubject(inspectorForm.value.expression);
+    return;
+  }
+  inspectorForm.value.expression = current.type === "group" ? current : normalizeConditionExpressionAsGroup(current);
+};
+
 const conditionExpressionChildren = computed(() => (
   selectedNode.value?.data?.kind === "condition"
     && inspectorForm.value?.expression?.type === "group"
@@ -864,17 +1116,31 @@ const conditionExpressionChildren = computed(() => (
     : []
 ));
 
+const conditionExpressionBranches = computed(() => (
+  selectedNode.value?.data?.kind === "condition"
+    && inspectorForm.value?.expression?.type === "branch"
+    && Array.isArray(inspectorForm.value.expression.branches)
+    ? inspectorForm.value.expression.branches
+    : []
+));
+
+const conditionExpressionCases = computed(() => (
+  selectedNode.value?.data?.kind === "condition"
+    && inspectorForm.value?.expression?.type === "case"
+    && Array.isArray(inspectorForm.value.expression.cases)
+    ? inspectorForm.value.expression.cases
+    : []
+));
+
+const addPredicateToExpression = (expression) => {
+  if (!expression || expression.type !== "group" || !Array.isArray(expression.children)) {
+    return;
+  }
+  expression.children.push(emptyPredicateExpression());
+};
+
 const addConditionPredicate = () => {
-  const expression = ensureInspectorExpression();
-  const question = expressionSubjectOptions("question")[0];
-  const condition = expressionSubjectOptions("condition", selectedConditionId.value)[0];
-  const subjectType = question ? "question" : "condition";
-  expression.children.push({
-    type: "predicate",
-    subject_type: subjectType,
-    subject_id: parseIntOrZero((subjectType === "question" ? question : condition)?.id),
-    operator: "IS_TRUE",
-  });
+  addPredicateToExpression(ensureInspectorExpression());
 };
 
 const removeConditionExpressionChild = (index) => {
@@ -882,6 +1148,65 @@ const removeConditionExpressionChild = (index) => {
   expression.children.splice(index, 1);
 };
 
+const addConditionBranch = (kind = "else_if") => {
+  const expression = ensureInspectorExpression();
+  if (expression.type !== "branch") {
+    return;
+  }
+  if (kind === "else") {
+    expression.branches = expression.branches.filter((branch) => branch.kind !== "else");
+    expression.branches.push(emptyBranchClause(kind));
+    return;
+  }
+  const elseIndex = expression.branches.findIndex((branch) => branch.kind === "else");
+  if (elseIndex >= 0) {
+    expression.branches.splice(elseIndex, 0, emptyBranchClause(kind));
+    return;
+  }
+  expression.branches.push(emptyBranchClause(kind));
+};
+
+const removeConditionBranch = (index) => {
+  const expression = ensureInspectorExpression();
+  if (expression.type === "branch") {
+    expression.branches.splice(index, 1);
+  }
+};
+
+const syncBranchKind = (branch, index) => {
+  const normalizedKind = branch.kind === "else" ? "else" : (index === 0 ? "if" : "else_if");
+  branch.kind = normalizedKind;
+  if (normalizedKind === "else") {
+    branch.else = true;
+    delete branch.when;
+  } else {
+    delete branch.else;
+    branch.when = normalizeConditionExpressionAsGroup(branch.when);
+  }
+  branch.then = normalizeConditionExpressionAsGroup(branch.then);
+};
+
+const addConditionCase = () => {
+  const expression = ensureInspectorExpression();
+  if (expression.type === "case") {
+    expression.cases.push({ value: null, then: emptyGroupExpression() });
+  }
+};
+
+const removeConditionCase = (index) => {
+  const expression = ensureInspectorExpression();
+  if (expression.type === "case") {
+    expression.cases.splice(index, 1);
+  }
+};
+
+const syncCaseSubject = (expression) => {
+  const options = expressionSubjectOptions(expression.subject_type, selectedConditionId.value);
+  if (!options.some((option) => String(option.id) === String(expression.subject_id))) {
+    expression.subject_id = parseIntOrZero(options[0]?.id);
+  }
+};
+
 const syncPredicateSubject = (predicate) => {
   const options = expressionSubjectOptions(predicate.subject_type, selectedConditionId.value);
   if (!options.some((option) => String(option.id) === String(predicate.subject_id))) {
@@ -955,6 +1280,72 @@ const taskServiceList = (dataOrRaw) => {
   return normalizeServiceList(raw.services);
 };
 
+const taskAttachmentList = (dataOrRaw) => {
+  const raw = dataOrRaw?.raw ? rawFor(dataOrRaw) : (dataOrRaw || {});
+  return Array.isArray(raw.attachments) ? raw.attachments : [];
+};
+
+const taskAttachmentLabel = (attachment) => {
+  const content = attachment?.content || {};
+  return String(
+    content.other
+      || content.document
+      || content.image
+      || (attachment?.id ? `Attachment ${attachment.id}` : "Attachment")
+  );
+};
+
+const taskAttachmentIcon = (attachment) => {
+  const label = taskAttachmentLabel(attachment).toLowerCase();
+  if (/\.(jpg|jpeg|png|gif|webp|svg)$/.test(label)) {
+    return "fas fa-image";
+  }
+  if (/\.pdf$/.test(label)) {
+    return "fas fa-file-pdf";
+  }
+  return "fas fa-paperclip";
+};
+
+const selectedTaskId = computed(() => (
+  selectedNodeKind.value === "task"
+    ? firstPositiveInt(selectedNode.value?.data?.object_id, inspectorForm.value?.id, selectedRaw.value?.id)
+    : null
+));
+
+const selectedTaskAttachments = computed(() => (
+  selectedNodeKind.value === "task" ? taskAttachmentList(inspectorForm.value) : []
+));
+
+const openTaskAttachment = async (attachment, taskId = null) => {
+  let downloadLink = String(attachment?.download_link || "").trim();
+  if (!downloadLink && taskId && attachment?.id) {
+    try {
+      const payload = await requestGet("/department/selfserve/tasks/attachments/download", {
+        task_id: taskId,
+        attachment_id: attachment.id,
+      });
+      downloadLink = String(payload?.download_link || "").trim();
+    } catch (error) {
+      withErrorToast(error, "Attachment download could not be prepared.");
+      return;
+    }
+  }
+  if (!downloadLink || typeof window === "undefined") {
+    return;
+  }
+  window.open(downloadLink, "_blank", "noopener");
+};
+
+const fileToBase64Payload = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    const result = String(reader.result || "");
+    resolve(result.includes(",") ? result.split(",").pop() : result);
+  };
+  reader.onerror = () => reject(reader.error || new Error("File could not be read."));
+  reader.readAsDataURL(file);
+});
+
 const bindingServiceList = (bindingOrData) => {
   const raw = bindingOrData?.raw ? rawFor(bindingOrData) : (bindingOrData || {});
   return normalizeServiceList([
@@ -1721,7 +2112,7 @@ const normalizeFlowNodes = (nodes) => (Array.isArray(nodes) ? nodes : []).map((n
 
 const normalizeFlowEdges = (edges) => (Array.isArray(edges) ? edges : []).map((edge) => ({
   ...edge,
-  animated: ["runtime", "task_gate", "gateway_binding", "task_service", "action_event"].includes(edge?.data?.kind),
+  animated: ["runtime", "task_gate", "gateway_binding", "task_service", "action_event", "action_relay"].includes(edge?.data?.kind),
   style: edgeStyle(edge?.data?.kind),
 }));
 
@@ -1741,7 +2132,7 @@ const edgeStyle = (kind) => {
   if (kind === "task_service") {
     return { stroke: "#ea580c", strokeWidth: 2.5 };
   }
-  if (kind === "action_event" || kind === "action_gate" || kind === "action_order") {
+  if (kind === "action_event" || kind === "action_gate" || kind === "action_order" || kind === "action_relay") {
     return { stroke: "#d97706", strokeWidth: 2.2, strokeDasharray: kind === "action_order" ? "6 4" : undefined };
   }
   if (kind === "scope") {
@@ -2124,6 +2515,7 @@ const saveInspector = async () => {
   if (entity === "task") {
     data.services = normalizeServiceList(data.services);
     data.buttons = normalizeButtonList(data.buttons);
+    delete data.attachments;
   }
   if (entity === "action") {
     Object.assign(data, actionPayload(data));
@@ -2136,6 +2528,55 @@ const saveInspector = async () => {
   }]);
 };
 
+const uploadSelectedTaskAttachment = async (event) => {
+  const input = event?.target;
+  const file = input?.files?.[0] || null;
+  if (input) {
+    input.value = "";
+  }
+  if (!file) {
+    return;
+  }
+  if (!selectedTaskId.value) {
+    toast.error("Save the task before attaching files.");
+    return;
+  }
+  isUploadingTaskAttachment.value = true;
+  try {
+    const base64File = await fileToBase64Payload(file);
+    await requestPost("/department/selfserve/tasks/attachments/upload", {
+      task_id: selectedTaskId.value,
+      base64_file: base64File,
+      file_name: file.name,
+    });
+    toast.success("File attached.");
+    await loadStudioGraph();
+  } catch (error) {
+    withErrorToast(error, "File upload failed.");
+  } finally {
+    isUploadingTaskAttachment.value = false;
+  }
+};
+
+const deleteSelectedTaskAttachment = async (attachment) => {
+  if (!selectedTaskId.value || !attachment?.id) {
+    return;
+  }
+  deletingTaskAttachmentId.value = attachment.id;
+  try {
+    await authenticatedRequest("/department/selfserve/tasks/attachments", "DELETE", {
+      task_id: selectedTaskId.value,
+      attachment_id: attachment.id,
+    });
+    toast.success("File removed.");
+    await loadStudioGraph();
+  } catch (error) {
+    withErrorToast(error, "File could not be removed.");
+  } finally {
+    deletingTaskAttachmentId.value = null;
+  }
+};
+
 const deleteSelected = async () => {
   if (!selectedNode.value || !canDeleteSelected.value) {
     return;
@@ -2663,6 +3104,20 @@ const syncPanelFromRoute = () => {
   }
 };
 
+const setActivePanel = (panelId) => {
+  if (!PANEL_IDS.has(panelId)) {
+    return;
+  }
+  activePanel.value = panelId;
+  const nextQuery = { ...(currentRoute?.query || {}) };
+  if (panelId === "flow") {
+    delete nextQuery.tab;
+  } else {
+    nextQuery.tab = panelId;
+  }
+  currentRouter.replace({ query: nextQuery }).catch(() => {});
+};
+
 watch(selectedNode, refreshInspectorForm);
 watch(selectedLaneManagementRow, (lane) => {
   if (laneEditorMode.value !== "create") {
@@ -2672,6 +3127,11 @@ watch(selectedLaneManagementRow, (lane) => {
 watch(flowNodes, scheduleLayoutSave, { deep: true });
 watch(departmentId, loadStudioGraph);
 watch(() => currentRoute?.fullPath, syncPanelFromRoute, { immediate: true });
+watch(activePanel, (panel) => {
+  if (panel === "paths" && !pathOutcomes.value && !pathOutcomesError.value) {
+    loadPathOutcomes();
+  }
+}, { immediate: true });
 watch(isStudioFullscreen, refitStudioCanvas);
 watch(filters, applyCanvasFilters, { deep: true });
 watch(searchTerm, applyCanvasFilters);
@@ -2717,7 +3177,7 @@ onBeforeUnmount(() => {
         <section
           ref="studioRoot"
           class="self-serve-studio"
-          :class="{ 'is-studio-fullscreen': isStudioFullscreen }"
+          :class="{ 'is-studio-fullscreen': isStudioFullscreen, 'is-paths-panel': activePanel === 'paths' }"
           data-testid="self-serve-studio"
         >
           <PageTitle title="Self-Serve Studio" subtitle="All-in-one flow, gateway, simulation, and publish workspace">
@@ -2760,7 +3220,7 @@ onBeforeUnmount(() => {
                 :class="{ 'is-active': activePanel === panel.id }"
                 type="button"
                 :data-testid="`studio-panel-${panel.id}`"
-                @click="activePanel = panel.id"
+                @click="setActivePanel(panel.id)"
               >
                 <span class="icon"><i :class="panel.icon"></i></span>
                 <span>{{ panel.label }}</span>
@@ -2768,6 +3228,150 @@ onBeforeUnmount(() => {
             </aside>
 
             <main class="studio-main">
+              <template v-if="activePanel === 'paths'">
+                <section class="studio-paths" data-testid="studio-path-outcomes">
+                  <header class="studio-paths-header">
+                    <div>
+                      <h3>Path Outcomes</h3>
+                      <p>{{ pathOutcomeScopeLabel() }}</p>
+                    </div>
+                    <div class="buttons">
+                      <button
+                        class="button is-light"
+                        type="button"
+                        :class="{ 'is-loading': isLoadingPathOutcomes }"
+                        data-testid="studio-path-outcomes-refresh"
+                        @click="loadPathOutcomes"
+                      >
+                        <span class="icon"><i class="fas fa-rotate"></i></span>
+                        <span>Refresh</span>
+                      </button>
+                    </div>
+                  </header>
+
+                  <div v-if="pathOutcomesStale" class="notification is-warning is-light studio-paths-alert" data-testid="studio-path-outcomes-stale">
+                    Filters changed after this projection. Refresh to update the grouped outcomes.
+                  </div>
+                  <div v-if="pathOutcomesError" class="notification is-danger is-light studio-paths-alert" data-testid="studio-path-outcomes-error">
+                    {{ pathOutcomesError }}
+                  </div>
+                  <div v-for="warning in pathOutcomesWarnings" :key="warning" class="notification is-warning is-light studio-paths-alert">
+                    {{ warning }}
+                  </div>
+
+                  <div class="studio-paths-summary" data-testid="studio-path-outcomes-summary">
+                    <div><strong>{{ pathOutcomesSummary.outcome_count || 0 }}</strong><span>Grouped outcomes</span></div>
+                    <div><strong>{{ pathOutcomesSummary.terminal_path_count || 0 }}</strong><span>Terminal paths</span></div>
+                    <div><strong>{{ pathOutcomesSummary.question_count || 0 }}</strong><span>Questions</span></div>
+                    <div><strong>{{ pathOutcomesSummary.state_count || 0 }}</strong><span>States explored</span></div>
+                  </div>
+
+                  <div v-if="!pathOutcomes && !isLoadingPathOutcomes" class="studio-paths-empty" data-testid="studio-path-outcomes-empty">
+                    <span class="icon"><i class="fas fa-route"></i></span>
+                    <strong>No projection loaded</strong>
+                    <button class="button is-primary" type="button" @click="loadPathOutcomes">Load outcomes</button>
+                  </div>
+                  <div v-else-if="isLoadingPathOutcomes && !pathOutcomes" class="studio-paths-empty">
+                    <span class="icon"><i class="fas fa-spinner fa-spin"></i></span>
+                    <strong>Projecting answer paths</strong>
+                  </div>
+                  <div v-else class="studio-paths-grid">
+                    <section class="studio-paths-outcome-list" aria-label="Grouped path outcomes">
+                      <button
+                        v-for="outcome in pathOutcomeList"
+                        :key="outcome.id"
+                        class="studio-path-outcome-row"
+                        :class="{ 'is-active': selectedPathOutcome?.id === outcome.id }"
+                        type="button"
+                        :data-testid="`studio-path-outcome-${outcome.id}`"
+                        @click="selectPathOutcome(outcome)"
+                      >
+                        <span class="studio-path-outcome-status" :class="outcome.allowed ? 'is-ok' : 'is-blocked'">
+                          <i :class="outcome.allowed ? 'fas fa-circle-check' : 'fas fa-circle-xmark'"></i>
+                        </span>
+                        <span>
+                          <strong>{{ outcome.summary }}</strong>
+                          <small>{{ outcome.path_count }} path{{ outcome.path_count === 1 ? '' : 's' }} / {{ pathOutcomeServicesLabel(outcome.services) }}</small>
+                        </span>
+                      </button>
+                      <p v-if="pathOutcomeList.length === 0" class="studio-empty-inline">No terminal outcomes were projected.</p>
+                    </section>
+
+                    <section v-if="selectedPathOutcome" class="studio-paths-detail" data-testid="studio-path-outcome-detail">
+                      <header class="studio-paths-detail-header">
+                        <div>
+                          <h4>{{ selectedPathOutcome.summary }}</h4>
+                          <p>{{ selectedPathOutcome.path_count }} matching path{{ selectedPathOutcome.path_count === 1 ? '' : 's' }}</p>
+                        </div>
+                        <button
+                          class="button is-small is-light"
+                          type="button"
+                          :disabled="!(selectedPathOutcome.node_ids || []).length"
+                          data-testid="studio-path-outcome-focus"
+                          @click="focusPathOutcomeNodes(selectedPathOutcome.node_ids)"
+                        >
+                          <span class="icon"><i class="fas fa-crosshairs"></i></span>
+                          <span>Focus graph</span>
+                        </button>
+                      </header>
+
+                      <section class="studio-paths-section">
+                        <h5>Services and Tasks</h5>
+                        <div class="studio-debug-chip-row">
+                          <span v-for="service in selectedPathOutcome.services" :key="service">{{ service }}</span>
+                          <span v-if="(selectedPathOutcome.services || []).length === 0" class="is-warning">No services</span>
+                        </div>
+                        <div class="studio-path-task-list">
+                          <button
+                            v-for="task in selectedPathOutcome.tasks"
+                            :key="task.id"
+                            type="button"
+                            class="studio-path-task"
+                            @click="focusPathOutcomeNodes([task.node_id])"
+                          >
+                            <strong>{{ task.label }}</strong>
+                            <small>{{ pathOutcomeServicesLabel(task.services) }}</small>
+                          </button>
+                          <p v-if="(selectedPathOutcome.tasks || []).length === 0" class="studio-empty-inline">No active tasks for this outcome.</p>
+                        </div>
+                      </section>
+
+                      <section class="studio-paths-section">
+                        <h5>Sample Answer Paths</h5>
+                        <div class="studio-path-chain-list">
+                          <article v-for="(chain, index) in selectedPathOutcome.sample_chains" :key="index" class="studio-path-chain">
+                            <small>{{ pathOutcomeScopeLabel(chain.scope) }}</small>
+                            <ol>
+                              <li v-for="answer in chain.answers" :key="`${index}-${answer.question_id}`">
+                                <span>{{ answer.question }}</span>
+                                <strong>{{ pathOutcomeAnswerLabel(answer) }}</strong>
+                              </li>
+                            </ol>
+                          </article>
+                        </div>
+                      </section>
+
+                      <section class="studio-paths-section">
+                        <h5>Predicted Signals</h5>
+                        <div class="studio-signal-timeline" data-testid="studio-path-signal-timeline">
+                          <article v-for="signal in selectedPathOutcome.signals" :key="`${signal.sequence}-${signal.runtime_stage}-${signal.signal_type}`">
+                            <span>{{ signal.sequence }}</span>
+                            <div>
+                              <strong>{{ pathOutcomeSignalLabel(signal) }}</strong>
+                              <small>{{ signal.target_gateway_label || signal.target_binding || signal.relay_id || 'No relay target' }}</small>
+                              <code>{{ formatSignalPayload(signal.payload) }}</code>
+                              <p v-if="signal.skip_block_reason">{{ signal.skip_block_reason }}</p>
+                            </div>
+                          </article>
+                          <p v-if="(selectedPathOutcome.signals || []).length === 0" class="studio-empty-inline">No predicted signals for this outcome.</p>
+                        </div>
+                      </section>
+                    </section>
+                  </div>
+                </section>
+              </template>
+
+              <template v-else>
               <div class="studio-toolbar">
                 <div class="studio-search">
                   <span class="icon"><i class="fas fa-magnifying-glass"></i></span>
@@ -2960,6 +3564,21 @@ onBeforeUnmount(() => {
                           <div><dt>Scope</dt><dd>{{ nodeScopeLabel(data) }}</dd></div>
                           <div><dt>Services</dt><dd>{{ taskServiceLabel(data) }}</dd></div>
                         </dl>
+                        <div v-if="taskAttachmentList(data).length > 0" class="studio-node-attachment-row" data-testid="studio-task-node-attachments">
+                          <button
+                            v-for="attachment in taskAttachmentList(data)"
+                            :key="attachment.id || taskAttachmentLabel(attachment)"
+                            type="button"
+                            class="studio-node-attachment"
+                            :disabled="!attachment.download_link"
+                            :title="taskAttachmentLabel(attachment)"
+                            @click.stop="openTaskAttachment(attachment)"
+                            @mousedown.stop
+                          >
+                            <span class="icon is-small"><i :class="taskAttachmentIcon(attachment)"></i></span>
+                            <span>{{ taskAttachmentLabel(attachment) }}</span>
+                          </button>
+                        </div>
                         <div class="studio-node-chip-row">
                           <span>{{ taskServiceList(data).length }} services</span>
                           <span
@@ -2973,6 +3592,7 @@ onBeforeUnmount(() => {
                           <span v-if="taskServiceList(data).length === 0" class="studio-service-chip is-unbound">No service</span>
                           <span>{{ nodeEdgeCount(id, 'outgoing', ['task_service']) }} relays</span>
                           <span :title="taskButtonSummary(rawFor(data).buttons)">{{ taskButtonCount(rawFor(data).buttons) }} mapped buttons</span>
+                          <span v-if="taskAttachmentList(data).length > 0">{{ taskAttachmentList(data).length }} attachments</span>
                           <span>Order {{ valueText(rawFor(data).order_priority, '-') }}</span>
                         </div>
                         <Handle class="studio-handle is-source" type="source" :position="Position.Right" :connectable="connectable" />
@@ -3081,9 +3701,10 @@ onBeforeUnmount(() => {
                   </div>
                 </div>
               </div>
+              </template>
             </main>
 
-            <aside class="studio-details" :data-panel="activePanel">
+            <aside v-if="activePanel !== 'paths'" class="studio-details" :data-panel="activePanel">
               <template v-if="activePanel === 'flow'">
                 <header class="studio-details-header">
                   <h3>Flow Overview</h3>
@@ -3413,42 +4034,215 @@ onBeforeUnmount(() => {
                     <label>Name<input v-model="inspectorForm.name" class="input"></label>
                     <label>Description<input v-model="inspectorForm.description" class="input"></label>
                     <div class="studio-expression-builder" data-testid="condition-expression-builder">
-                      <label>Match
-                        <select v-model="inspectorForm.expression.operator" class="input" data-testid="condition-expression-operator">
-                          <option value="ALL">All predicates</option>
-                          <option value="ANY">Any predicate</option>
+                      <label>Operator
+                        <select :value="inspectorForm.expression.type || 'group'" class="input" data-testid="condition-expression-type" @change="setConditionExpressionType($event.target.value)">
+                          <option v-for="option in CONDITION_EXPRESSION_TYPES" :key="option.value" :value="option.value">{{ option.label }}</option>
                         </select>
                       </label>
-                      <article
-                        v-for="(predicate, index) in conditionExpressionChildren"
-                        :key="`predicate-${index}`"
-                        class="studio-expression-row"
-                        data-testid="condition-expression-row"
-                      >
-                        <select v-model="predicate.subject_type" class="input" data-testid="condition-expression-subject-type" @change="syncPredicateSubject(predicate)">
-                          <option value="question">Question</option>
-                          <option value="condition">Condition</option>
-                        </select>
-                        <select v-model.number="predicate.subject_id" class="input" data-testid="condition-expression-subject">
-                          <option
-                            v-for="option in expressionSubjectOptions(predicate.subject_type, selectedConditionId)"
-                            :key="`${predicate.subject_type}-${option.id}`"
-                            :value="option.id"
-                          >
-                            {{ option.label }}
-                          </option>
-                        </select>
-                        <select v-model="predicate.operator" class="input" data-testid="condition-expression-predicate-operator">
-                          <option v-for="option in CONDITION_OPERATORS" :key="option.value" :value="option.value">{{ option.label }}</option>
-                        </select>
-                        <button class="button is-small is-danger is-light" type="button" title="Remove predicate" @click="removeConditionExpressionChild(index)">
-                          <span class="icon"><i class="fas fa-trash"></i></span>
+                      <template v-if="inspectorForm.expression.type === 'group'">
+                        <label>Match
+                          <select v-model="inspectorForm.expression.operator" class="input" data-testid="condition-expression-operator">
+                            <option value="ALL">All predicates</option>
+                            <option value="ANY">Any predicate</option>
+                          </select>
+                        </label>
+                        <article
+                          v-for="(predicate, index) in conditionExpressionChildren"
+                          :key="`predicate-${index}`"
+                          class="studio-expression-row"
+                          data-testid="condition-expression-row"
+                        >
+                          <select v-model="predicate.subject_type" class="input" data-testid="condition-expression-subject-type" @change="syncPredicateSubject(predicate)">
+                            <option value="question">Question</option>
+                            <option value="condition">Condition</option>
+                          </select>
+                          <select v-model.number="predicate.subject_id" class="input" data-testid="condition-expression-subject">
+                            <option
+                              v-for="option in expressionSubjectOptions(predicate.subject_type, selectedConditionId)"
+                              :key="`${predicate.subject_type}-${option.id}`"
+                              :value="option.id"
+                            >
+                              {{ option.label }}
+                            </option>
+                          </select>
+                          <select v-model="predicate.operator" class="input" data-testid="condition-expression-predicate-operator">
+                            <option v-for="option in CONDITION_OPERATORS" :key="option.value" :value="option.value">{{ option.label }}</option>
+                          </select>
+                          <button class="button is-small is-danger is-light" type="button" title="Remove predicate" @click="removeConditionExpressionChild(index)">
+                            <span class="icon"><i class="fas fa-trash"></i></span>
+                          </button>
+                        </article>
+                        <button class="button is-small is-link is-light" type="button" data-testid="condition-expression-add" @click="addConditionPredicate">
+                          <span class="icon"><i class="fas fa-plus"></i></span>
+                          <span>Add predicate</span>
                         </button>
-                      </article>
-                      <button class="button is-small is-link is-light" type="button" data-testid="condition-expression-add" @click="addConditionPredicate">
-                        <span class="icon"><i class="fas fa-plus"></i></span>
-                        <span>Add predicate</span>
-                      </button>
+                      </template>
+
+                      <template v-else-if="inspectorForm.expression.type === 'branch'">
+                        <article
+                          v-for="(branch, branchIndex) in conditionExpressionBranches"
+                          :key="`branch-${branchIndex}`"
+                          class="studio-expression-branch"
+                          data-testid="condition-expression-branch"
+                        >
+                          <header>
+                            <select v-model="branch.kind" class="input" data-testid="condition-expression-branch-kind" @change="syncBranchKind(branch, branchIndex)">
+                              <option :value="branchIndex === 0 ? 'if' : 'else_if'">{{ branchIndex === 0 ? 'If' : 'Else if' }}</option>
+                              <option v-if="branchIndex > 0" value="else">Else</option>
+                            </select>
+                            <button class="button is-small is-danger is-light" type="button" title="Remove branch" @click="removeConditionBranch(branchIndex)">
+                              <span class="icon"><i class="fas fa-trash"></i></span>
+                            </button>
+                          </header>
+                          <section v-if="branch.kind !== 'else'" class="studio-expression-nested">
+                            <span>When</span>
+                            <article
+                              v-for="(predicate, predicateIndex) in branch.when.children"
+                              :key="`branch-${branchIndex}-when-${predicateIndex}`"
+                              class="studio-expression-row"
+                              data-testid="condition-expression-branch-when-row"
+                            >
+                              <select v-model="predicate.subject_type" class="input" @change="syncPredicateSubject(predicate)">
+                                <option value="question">Question</option>
+                                <option value="condition">Condition</option>
+                              </select>
+                              <select v-model.number="predicate.subject_id" class="input">
+                                <option
+                                  v-for="option in expressionSubjectOptions(predicate.subject_type, selectedConditionId)"
+                                  :key="`branch-when-${predicate.subject_type}-${option.id}`"
+                                  :value="option.id"
+                                >
+                                  {{ option.label }}
+                                </option>
+                              </select>
+                              <select v-model="predicate.operator" class="input">
+                                <option v-for="option in CONDITION_OPERATORS" :key="option.value" :value="option.value">{{ option.label }}</option>
+                              </select>
+                              <button class="button is-small is-danger is-light" type="button" title="Remove predicate" @click="branch.when.children.splice(predicateIndex, 1)">
+                                <span class="icon"><i class="fas fa-trash"></i></span>
+                              </button>
+                            </article>
+                            <button class="button is-small is-link is-light" type="button" @click="addPredicateToExpression(branch.when)">
+                              <span class="icon"><i class="fas fa-plus"></i></span>
+                              <span>Add when</span>
+                            </button>
+                          </section>
+                          <section class="studio-expression-nested">
+                            <span>Then</span>
+                            <article
+                              v-for="(predicate, predicateIndex) in branch.then.children"
+                              :key="`branch-${branchIndex}-then-${predicateIndex}`"
+                              class="studio-expression-row"
+                              data-testid="condition-expression-branch-then-row"
+                            >
+                              <select v-model="predicate.subject_type" class="input" @change="syncPredicateSubject(predicate)">
+                                <option value="question">Question</option>
+                                <option value="condition">Condition</option>
+                              </select>
+                              <select v-model.number="predicate.subject_id" class="input">
+                                <option
+                                  v-for="option in expressionSubjectOptions(predicate.subject_type, selectedConditionId)"
+                                  :key="`branch-then-${predicate.subject_type}-${option.id}`"
+                                  :value="option.id"
+                                >
+                                  {{ option.label }}
+                                </option>
+                              </select>
+                              <select v-model="predicate.operator" class="input">
+                                <option v-for="option in CONDITION_OPERATORS" :key="option.value" :value="option.value">{{ option.label }}</option>
+                              </select>
+                              <button class="button is-small is-danger is-light" type="button" title="Remove predicate" @click="branch.then.children.splice(predicateIndex, 1)">
+                                <span class="icon"><i class="fas fa-trash"></i></span>
+                              </button>
+                            </article>
+                            <button class="button is-small is-link is-light" type="button" @click="addPredicateToExpression(branch.then)">
+                              <span class="icon"><i class="fas fa-plus"></i></span>
+                              <span>Add then</span>
+                            </button>
+                          </section>
+                        </article>
+                        <div class="buttons are-small">
+                          <button class="button is-link is-light" type="button" data-testid="condition-expression-add-elseif" @click="addConditionBranch('else_if')">
+                            <span class="icon"><i class="fas fa-plus"></i></span>
+                            <span>Add else if</span>
+                          </button>
+                          <button class="button is-link is-light" type="button" data-testid="condition-expression-add-else" @click="addConditionBranch('else')">
+                            <span class="icon"><i class="fas fa-plus"></i></span>
+                            <span>Add else</span>
+                          </button>
+                        </div>
+                      </template>
+
+                      <template v-else-if="inspectorForm.expression.type === 'case'">
+                        <article class="studio-expression-row">
+                          <select v-model="inspectorForm.expression.subject_type" class="input" data-testid="condition-expression-case-subject-type" @change="syncCaseSubject(inspectorForm.expression)">
+                            <option value="question">Question</option>
+                            <option value="condition">Condition</option>
+                          </select>
+                          <select v-model.number="inspectorForm.expression.subject_id" class="input" data-testid="condition-expression-case-subject">
+                            <option
+                              v-for="option in expressionSubjectOptions(inspectorForm.expression.subject_type, selectedConditionId)"
+                              :key="`case-subject-${option.id}`"
+                              :value="option.id"
+                            >
+                              {{ option.label }}
+                            </option>
+                          </select>
+                        </article>
+                        <article
+                          v-for="(caseClause, caseIndex) in conditionExpressionCases"
+                          :key="`case-${caseIndex}`"
+                          class="studio-expression-case"
+                          data-testid="condition-expression-case"
+                        >
+                          <header>
+                            <select v-model="caseClause.value" class="input" data-testid="condition-expression-case-value">
+                              <option v-for="option in CONDITION_CASE_VALUES" :key="String(option.value)" :value="option.value">{{ option.label }}</option>
+                            </select>
+                            <button class="button is-small is-danger is-light" type="button" title="Remove case" @click="removeConditionCase(caseIndex)">
+                              <span class="icon"><i class="fas fa-trash"></i></span>
+                            </button>
+                          </header>
+                          <section class="studio-expression-nested">
+                            <span>Then</span>
+                            <article
+                              v-for="(predicate, predicateIndex) in caseClause.then.children"
+                              :key="`case-${caseIndex}-then-${predicateIndex}`"
+                              class="studio-expression-row"
+                              data-testid="condition-expression-case-then-row"
+                            >
+                              <select v-model="predicate.subject_type" class="input" @change="syncPredicateSubject(predicate)">
+                                <option value="question">Question</option>
+                                <option value="condition">Condition</option>
+                              </select>
+                              <select v-model.number="predicate.subject_id" class="input">
+                                <option
+                                  v-for="option in expressionSubjectOptions(predicate.subject_type, selectedConditionId)"
+                                  :key="`case-then-${predicate.subject_type}-${option.id}`"
+                                  :value="option.id"
+                                >
+                                  {{ option.label }}
+                                </option>
+                              </select>
+                              <select v-model="predicate.operator" class="input">
+                                <option v-for="option in CONDITION_OPERATORS" :key="option.value" :value="option.value">{{ option.label }}</option>
+                              </select>
+                              <button class="button is-small is-danger is-light" type="button" title="Remove predicate" @click="caseClause.then.children.splice(predicateIndex, 1)">
+                                <span class="icon"><i class="fas fa-trash"></i></span>
+                              </button>
+                            </article>
+                            <button class="button is-small is-link is-light" type="button" @click="addPredicateToExpression(caseClause.then)">
+                              <span class="icon"><i class="fas fa-plus"></i></span>
+                              <span>Add then</span>
+                            </button>
+                          </section>
+                        </article>
+                        <button class="button is-small is-link is-light" type="button" data-testid="condition-expression-add-case" @click="addConditionCase">
+                          <span class="icon"><i class="fas fa-plus"></i></span>
+                          <span>Add case</span>
+                        </button>
+                      </template>
+
                       <p class="studio-expression-summary" data-testid="condition-expression-summary">{{ conditionExpressionSummary(inspectorForm.expression) }}</p>
                     </div>
                   </template>
@@ -3542,6 +4336,59 @@ onBeforeUnmount(() => {
                         </label>
                       </div>
                     </div>
+                    <div class="studio-field-group studio-task-attachment-manager" data-testid="studio-task-attachment-manager">
+                      <div class="studio-field-group-header">
+                        <span>Files</span>
+                        <label
+                          class="button is-small is-link is-light"
+                          :class="{ 'is-loading': isUploadingTaskAttachment }"
+                          :disabled="!permissions.can_edit || isUploadingTaskAttachment"
+                          title="Attach file"
+                        >
+                          <span class="icon"><i class="fas fa-upload"></i></span>
+                          <span>Attach</span>
+                          <input
+                            class="is-hidden"
+                            type="file"
+                            :disabled="!permissions.can_edit || isUploadingTaskAttachment"
+                            data-testid="studio-task-attachment-upload"
+                            @change="uploadSelectedTaskAttachment"
+                          >
+                        </label>
+                      </div>
+                      <div v-if="selectedTaskAttachments.length > 0" class="studio-task-attachment-list">
+                        <article
+                          v-for="attachment in selectedTaskAttachments"
+                          :key="attachment.id || taskAttachmentLabel(attachment)"
+                          class="studio-task-attachment-item"
+                        >
+                          <span class="icon is-small"><i :class="taskAttachmentIcon(attachment)"></i></span>
+                          <span>{{ taskAttachmentLabel(attachment) }}</span>
+                          <div class="buttons are-small">
+                            <button
+                              class="button is-light"
+                              type="button"
+                              title="Open file"
+                              :disabled="!attachment.download_link && !attachment.id"
+                              @click="openTaskAttachment(attachment, selectedTaskId)"
+                            >
+                              <span class="icon"><i class="fas fa-arrow-up-right-from-square"></i></span>
+                            </button>
+                            <button
+                              class="button is-danger is-light"
+                              type="button"
+                              title="Remove file"
+                              :class="{ 'is-loading': deletingTaskAttachmentId === attachment.id }"
+                              :disabled="!permissions.can_edit || deletingTaskAttachmentId === attachment.id"
+                              @click="deleteSelectedTaskAttachment(attachment)"
+                            >
+                              <span class="icon"><i class="fas fa-trash"></i></span>
+                            </button>
+                          </div>
+                        </article>
+                      </div>
+                      <p v-else class="studio-empty-inline">No files associated.</p>
+                    </div>
                   </template>
 
                   <template v-else-if="selectedNode.data.kind === 'action'">
@@ -3989,11 +4836,27 @@ onBeforeUnmount(() => {
                   <section class="studio-debug-section">
                     <header class="studio-debug-section-header"><h4>Tasks and Services</h4></header>
                     <div class="studio-debug-task-list">
-                      <button v-for="task in simulatorTasks" :key="task.id" type="button" class="studio-debug-task" :class="task.active ? 'is-active' : 'is-blocked'" @click="focusDebugNodes([task.node_id], true)">
-                        <strong>{{ task.label }}</strong>
+                      <article v-for="task in simulatorTasks" :key="task.id" class="studio-debug-task" :class="task.active ? 'is-active' : 'is-blocked'">
+                        <button type="button" class="studio-debug-task-main" @click="focusDebugNodes([task.node_id], true)">
+                          <strong>{{ task.label }}</strong>
                         <span>{{ task.gate_type }} · {{ task.gate_ref_label }}</span>
-                        <small>{{ (task.services || []).join(', ') || 'No services' }} / {{ taskButtonSummary(task.buttons) }}</small>
-                      </button>
+                          <small>{{ (task.services || []).join(', ') || 'No services' }} / {{ taskButtonSummary(task.buttons) }}</small>
+                        </button>
+                        <div v-if="taskAttachmentList(task).length > 0" class="studio-debug-attachment-list">
+                          <button
+                            v-for="attachment in taskAttachmentList(task)"
+                            :key="attachment.id || taskAttachmentLabel(attachment)"
+                            type="button"
+                            class="studio-debug-attachment"
+                            :disabled="!attachment.download_link"
+                            :title="taskAttachmentLabel(attachment)"
+                            @click.stop="openTaskAttachment(attachment)"
+                          >
+                            <span class="icon is-small"><i :class="taskAttachmentIcon(attachment)"></i></span>
+                            <span>{{ taskAttachmentLabel(attachment) }}</span>
+                          </button>
+                        </div>
+                      </article>
                     </div>
                   </section>
 
@@ -4137,12 +5000,21 @@ onBeforeUnmount(() => {
   min-height: min(760px, calc(100vh - 230px));
 }
 
+.self-serve-studio.is-paths-panel .studio-shell {
+  grid-template-columns: 168px minmax(0, 1fr);
+}
+
 .self-serve-studio.is-studio-fullscreen .studio-shell,
 .self-serve-studio:fullscreen .studio-shell {
   grid-template-columns: 190px minmax(760px, 1fr) minmax(340px, 420px);
   min-height: calc(100vh - 132px);
 }
 
+.self-serve-studio.is-studio-fullscreen.is-paths-panel .studio-shell,
+.self-serve-studio.is-paths-panel:fullscreen .studio-shell {
+  grid-template-columns: 190px minmax(0, 1fr);
+}
+
 .studio-sidebar,
 .studio-details,
 .studio-main {
@@ -4257,6 +5129,254 @@ onBeforeUnmount(() => {
   opacity: 0.55;
 }
 
+.studio-paths {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: min(700px, calc(100vh - 290px));
+}
+
+.studio-paths-header {
+  align-items: center;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 12px;
+}
+
+.studio-paths-header h3,
+.studio-paths-detail-header h4,
+.studio-paths-section h5 {
+  color: #111827;
+  font-weight: 800;
+  margin: 0;
+}
+
+.studio-paths-header h3 {
+  font-size: 18px;
+}
+
+.studio-paths-header p,
+.studio-paths-detail-header p {
+  color: #64748b;
+  font-size: 12px;
+  margin: 3px 0 0;
+}
+
+.studio-paths-alert {
+  margin: 0;
+}
+
+.studio-paths-summary {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.studio-paths-summary > div {
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  padding: 12px;
+}
+
+.studio-paths-summary strong {
+  color: #111827;
+  display: block;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.studio-paths-summary span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.studio-paths-empty {
+  align-items: center;
+  border: 1px dashed #cbd5e1;
+  border-radius: 7px;
+  color: #475569;
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  min-height: 220px;
+}
+
+.studio-paths-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
+  min-height: 0;
+}
+
+.studio-paths-outcome-list,
+.studio-paths-detail,
+.studio-paths-section,
+.studio-path-chain-list,
+.studio-path-task-list,
+.studio-signal-timeline {
+  display: flex;
+  flex-direction: column;
+}
+
+.studio-paths-outcome-list,
+.studio-paths-detail {
+  gap: 10px;
+}
+
+.studio-path-outcome-row,
+.studio-path-task {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  color: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  text-align: left;
+}
+
+.studio-path-outcome-row {
+  grid-template-columns: 24px minmax(0, 1fr);
+}
+
+.studio-path-outcome-row.is-active,
+.studio-path-outcome-row:hover,
+.studio-path-task:hover {
+  border-color: #93c5fd;
+  background: #eff6ff;
+}
+
+.studio-path-outcome-row strong,
+.studio-path-outcome-row small,
+.studio-path-task strong,
+.studio-path-task small {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.studio-path-outcome-row small,
+.studio-path-task small,
+.studio-path-chain small {
+  color: #64748b;
+  font-size: 11px;
+}
+
+.studio-path-outcome-status {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.studio-path-outcome-status.is-ok {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.studio-path-outcome-status.is-blocked {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.studio-paths-detail-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.studio-paths-section {
+  border-top: 1px solid #e2e8f0;
+  gap: 8px;
+  padding-top: 12px;
+}
+
+.studio-path-chain-list,
+.studio-path-task-list,
+.studio-signal-timeline {
+  gap: 8px;
+}
+
+.studio-path-chain {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  padding: 10px;
+}
+
+.studio-path-chain ol {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 8px 0 0 18px;
+}
+
+.studio-path-chain li {
+  color: #334155;
+  font-size: 12px;
+}
+
+.studio-path-chain li strong {
+  color: #0f172a;
+  margin-left: 6px;
+}
+
+.studio-signal-timeline article {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 28px minmax(0, 1fr);
+  padding: 9px;
+}
+
+.studio-signal-timeline article > span {
+  align-items: center;
+  background: #0f172a;
+  border-radius: 999px;
+  color: #ffffff;
+  display: inline-flex;
+  font-size: 11px;
+  font-weight: 800;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.studio-signal-timeline strong,
+.studio-signal-timeline small,
+.studio-signal-timeline code,
+.studio-signal-timeline p {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.studio-signal-timeline strong {
+  font-size: 12px;
+}
+
+.studio-signal-timeline small,
+.studio-signal-timeline p {
+  color: #64748b;
+  font-size: 11px;
+  margin: 0;
+}
+
+.studio-signal-timeline code {
+  background: #f1f5f9;
+  border-radius: 5px;
+  color: #334155;
+  font-size: 11px;
+  margin: 4px 0;
+  padding: 4px 5px;
+}
+
 .studio-flow-surface {
   background:
     linear-gradient(#f8fafc, #f8fafc) padding-box,
@@ -4419,6 +5539,45 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
+.studio-node-attachment-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 0 10px 8px;
+}
+
+.studio-node-attachment,
+.studio-debug-attachment {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  border-radius: 999px;
+  color: #334155;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 10px;
+  font-weight: 700;
+  gap: 4px;
+  line-height: 1;
+  max-width: 100%;
+  min-width: 0;
+  padding: 5px 7px;
+  text-align: left;
+}
+
+.studio-node-attachment span:last-child,
+.studio-debug-attachment span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-node-attachment:disabled,
+.studio-debug-attachment:disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+
 .studio-node-chip-row {
   display: flex;
   flex-wrap: wrap;
@@ -4798,6 +5957,45 @@ onBeforeUnmount(() => {
   font-weight: 600;
 }
 
+.studio-field-group-header {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.studio-field-group-header > span {
+  color: #374151;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.studio-task-attachment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.studio-task-attachment-item {
+  align-items: center;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding: 7px 8px;
+}
+
+.studio-task-attachment-item > span:nth-child(2) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-task-attachment-item .buttons {
+  margin: 0;
+}
+
 .studio-inline-checkbox {
   align-items: center !important;
   flex-direction: row !important;
@@ -4825,6 +6023,32 @@ onBeforeUnmount(() => {
   margin: 0;
 }
 
+.studio-expression-branch,
+.studio-expression-case,
+.studio-expression-nested {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+}
+
+.studio-expression-branch > header,
+.studio-expression-case > header {
+  align-items: center;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.studio-expression-nested > span {
+  color: #475569;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
 .studio-expression-summary {
   color: #475569;
   font-size: 11px;
@@ -5425,6 +6649,35 @@ onBeforeUnmount(() => {
   width: 100%;
 }
 
+.studio-debug-task-main {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  padding: 0;
+  text-align: left;
+  width: 100%;
+}
+
+.studio-debug-attachment-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 8px;
+}
+
+.studio-debug-attachment {
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.studio-debug-attachment span {
+  color: inherit;
+  display: inline-flex;
+  font-size: 10px;
+  line-height: 1;
+}
+
 .studio-debug-compact-list small {
   color: #64748b;
   display: block;
@@ -5831,16 +7084,26 @@ onBeforeUnmount(() => {
     padding-left: 0;
     padding-top: 12px;
   }
+
+  .studio-paths-grid {
+    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
+  }
 }
 
 @media (max-width: 820px) {
   .studio-shell,
   .studio-workspace,
-  .studio-toolbar {
+  .studio-toolbar,
+  .studio-paths-grid,
+  .studio-paths-header {
     display: flex;
     flex-direction: column;
   }
 
+  .studio-paths-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .studio-sidebar {
     border-right: 0;
     flex-direction: row;
diff --git a/src/views/dashboards/userDashboard/wash/MyWashStart.vue b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
index 9c7153f4..d5838ff4 100644
--- a/src/views/dashboards/userDashboard/wash/MyWashStart.vue
+++ b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
@@ -49,8 +49,6 @@ const hideDynamicImage = ref(false);
 const vehicleStepError = ref<string | null>(null);
 const washActionError = ref<string | null>(null);
 const isSelfServeRetrying = ref(false);
-const loadingQuestionId = ref<number | null>(null);
-const loadingAnswerValue = ref<boolean | null>(null);
 
 const normalizePositiveInteger = (value: any) => {
   const parsed = parseInt(String(value ?? ""), 10);
@@ -168,6 +166,19 @@ const {
   },
 });
 
+const isMachineTask = (task: any) => (
+  Array.isArray(task?.services)
+  && task.services.some((service: any) => String(service || "").trim().toUpperCase() === "MACHINE")
+);
+
+const displayedActiveTasks = computed(() => {
+  if (radioWashType.value === "Machine") {
+    return activeTasks.value;
+  }
+
+  return activeTasks.value.filter((task: any) => !isMachineTask(task));
+});
+
 const {
   dynamicImageUrl,
   onStartWash,
@@ -192,7 +203,7 @@ const {
   currentStep,
   steps: { VEHICLE: 0, QUESTIONS: 1, SELECT_LANE: 2, TASKS: 3, WASH_IN_PROGRESS: 4, COMPLETED: 5 },
   radioWashType,
-  activeTasks,
+  activeTasks: displayedActiveTasks,
   completedTasks,
   saveProgress,
   clearProgress,
@@ -231,7 +242,7 @@ const { steps, clickableSteps, isNextButtonDisabled, handleConfirmNext, targetSt
   nearestDepartment,
   allVisibleQuestionsAnswered: computed(() => selfServeQuestionsAnswered.value || visibleQuestions.value.every((question) => answers.value[question.id] === true || answers.value[question.id] === false)),
   isLoadingSelfServeData,
-  activeTasks,
+  activeTasks: displayedActiveTasks,
   completedTasks,
   editAnswers,
   isLaneAvailable,
@@ -267,7 +278,7 @@ const selectedVehicleTypeProductName = computed(() => (
 ));
 
 const displayedDynamicImageUrl = computed(() => (
-  hideDynamicImage.value ? null : dynamicImageUrl.value
+  hideDynamicImage.value || radioWashType.value !== "Machine" ? null : dynamicImageUrl.value
 ));
 
 const normalizeLicensePlate = (value: string | null) => (value || "").trim().toUpperCase();
@@ -676,18 +687,10 @@ const onToggleTask = (taskId: number, value: boolean) => {
 };
 
 const submitQuestionAnswer = async (questionId: number, value: boolean) => {
-  if (loadingQuestionId.value !== null) {
-    return;
-  }
-
-  loadingQuestionId.value = questionId;
-  loadingAnswerValue.value = value;
   answerQuestion(questionId, value);
 
   const laneId = getEffectiveLaneId();
   if (!nearestDepartment.value || !laneId || !licensePlateInput.value?.trim()) {
-    loadingQuestionId.value = null;
-    loadingAnswerValue.value = null;
     return;
   }
 
@@ -703,9 +706,6 @@ const submitQuestionAnswer = async (questionId: number, value: boolean) => {
     });
   } catch (error) {
     console.error("Error synchronizing self-serve answer:", error);
-  } finally {
-    loadingQuestionId.value = null;
-    loadingAnswerValue.value = null;
   }
 };
 
@@ -961,8 +961,10 @@ watch(() => forceNearestDepartmentEvaluationId.value, () => {
           <b-steps
             v-if="doesCurrentDepartmentSelectionHaveSelfServeEnabled"
             v-model="currentStep"
+            class="self-serve-flow-steps"
             type="is-link"
             size="is-small"
+            mobile-mode="compact"
             :has-navigation="true"
             data-testid="self-serve-steps"
           >
@@ -1004,8 +1006,6 @@ watch(() => forceNearestDepartmentEvaluationId.value, () => {
                 :is-loading="isLoadingSelfServeData"
                 :visible-questions="visibleQuestions"
                 :answers="answers"
-                :loading-question-id="loadingQuestionId"
-                :loading-answer-value="loadingAnswerValue"
                 :edit-answers="editAnswers"
                 :show-debug="showDebug"
                 :conditions="conditions"
@@ -1052,7 +1052,7 @@ watch(() => forceNearestDepartmentEvaluationId.value, () => {
               <SelfServeTasksStep
                 :is-loading="isLoadingSelfServeData"
                 :dynamic-image-url="displayedDynamicImageUrl"
-                :active-tasks="activeTasks"
+                :active-tasks="displayedActiveTasks"
                 :completed-tasks="completedTasks"
                 :all-visible-questions-answered="allVisibleQuestionsAnswered"
                 :edit-answers="editAnswers"
@@ -1197,3 +1197,75 @@ watch(() => forceNearestDepartmentEvaluationId.value, () => {
     </div>
   </UserDashboardPageWrapper>
 </template>
+
+<style scoped>
+.self-serve-flow-steps {
+  --bulma-steps-details-background-color: #ffffff;
+  --bulma-steps-maker-default-color: #dfe5f0;
+  --bulma-steps-default-color: #dfe5f0;
+  --bulma-steps-divider-height: 0.16rem;
+  margin-top: 0.25rem;
+}
+
+.self-serve-flow-steps :deep(.steps) {
+  margin-bottom: 0.85rem;
+  min-height: 2rem;
+}
+
+.self-serve-flow-steps :deep(.steps .step-items) {
+  align-items: flex-start;
+  flex-wrap: nowrap;
+}
+
+.self-serve-flow-steps :deep(.steps .step-items .step-item) {
+  min-width: 0;
+}
+
+.self-serve-flow-steps :deep(.steps .step-items .step-item .step-link) {
+  min-width: 0;
+}
+
+.self-serve-flow-steps :deep(.steps .step-items .step-item .step-marker) {
+  box-shadow: 0 0 0 2px #ffffff;
+}
+
+.self-serve-flow-steps :deep(.steps .step-items .step-item .step-details) {
+  max-width: 6.25rem;
+  padding-top: 0.25rem;
+}
+
+.self-serve-flow-steps :deep(.steps .step-items .step-item .step-details .step-title) {
+  color: #112f5f;
+  font-size: 0.76rem;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.self-serve-flow-steps :deep(.steps + .step-content) {
+  padding: 0.45rem 0 0;
+}
+
+@media screen and (max-width: 768px) {
+  .self-serve-flow-steps :deep(.steps.mobile-compact .step-items .step-item .step-marker) {
+    height: 1.7rem;
+    width: 1.7rem;
+  }
+
+  .self-serve-flow-steps :deep(.steps.mobile-compact .step-items .step-item .step-marker .icon *) {
+    font-size: 0.78rem;
+  }
+
+  .self-serve-flow-steps :deep(.steps.mobile-compact .step-items .step-item .step-details) {
+    max-width: 5.75rem;
+  }
+
+  .self-serve-flow-steps :deep(.steps.mobile-compact .step-items .step-item .step-details .step-title) {
+    font-size: 0.74rem;
+  }
+
+  .self-serve-flow-steps :deep(.steps.mobile-compact .step-items .step-item:not(.is-active) .step-link) {
+    cursor: default;
+  }
+}
+</style>
diff --git a/src/views/guest/GuestDashboardPageWrapper.vue b/src/views/guest/GuestDashboardPageWrapper.vue
index f236486e..48d3070a 100644
--- a/src/views/guest/GuestDashboardPageWrapper.vue
+++ b/src/views/guest/GuestDashboardPageWrapper.vue
@@ -1,28 +1,81 @@
 <script setup>
-import DefaultPageWrapper from "@/views/dashboards/DefaultPageWrapper.vue";
-import GuestLeftMenu from "@/components/menus/guest/GuestLeftMenu.vue";
-const defaultSlots = [
-  { name: 'header' },
-  { name: 'buttons' },
-  { name: 'default' },
-  { name: 'left-menu' },
-  { name: 'without-formatting' },
-]
-
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  subtitle: {
+    type: String,
+    default: "",
+  },
+});
 </script>
 
 <template>
-  <!--<DefaultPageWrapper>
-    <template v-for="slot in defaultSlots" :key="slot.name">
-      <slot :name="slot.name"></slot>
-    </template>
-    <template #left-menu>
-      <GuestLeftMenu />
-    </template>
-  </DefaultPageWrapper> -->
-  <slot></slot>
+  <section class="guest-page" data-testid="guest-dashboard-page">
+    <div class="guest-page__inner">
+      <header v-if="title || subtitle || $slots.header || $slots.buttons" class="guest-page__header">
+        <div class="guest-page__heading">
+          <slot name="header">
+            <h1 v-if="title" class="title is-3 mb-2" data-testid="guest-dashboard-title">{{ title }}</h1>
+            <p v-if="subtitle" class="subtitle is-6 mb-0">{{ subtitle }}</p>
+          </slot>
+        </div>
+        <div v-if="$slots.buttons" class="guest-page__actions">
+          <slot name="buttons" />
+        </div>
+      </header>
+
+      <div class="guest-page__content" data-testid="guest-dashboard-content">
+        <slot />
+      </div>
+    </div>
+  </section>
 </template>
 
 <style scoped>
+.guest-page {
+  min-height: 100vh;
+  background: #f6f8fb;
+  padding: 1.5rem 1rem 3rem;
+}
 
-</style>
\ No newline at end of file
+.guest-page__inner {
+  width: min(100%, 1180px);
+  margin: 0 auto;
+}
+
+.guest-page__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.guest-page__heading {
+  min-width: 0;
+}
+
+.guest-page__actions {
+  flex: 0 0 auto;
+}
+
+.guest-page__content {
+  min-width: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .guest-page {
+    padding: 1rem 0.75rem 2rem;
+  }
+
+  .guest-page__header {
+    display: block;
+  }
+
+  .guest-page__actions {
+    margin-top: 1rem;
+  }
+}
+</style>
diff --git a/src/views/guest/book/GuestBookExteriorWash.vue b/src/views/guest/book/GuestBookExteriorWash.vue
index 77f7ec29..10c34ab7 100644
--- a/src/views/guest/book/GuestBookExteriorWash.vue
+++ b/src/views/guest/book/GuestBookExteriorWash.vue
@@ -1,26 +1,163 @@
 <script setup>
-
-import UserDashboardNavigation from "@/views/dashboards/userDashboard/userDashboardNavigation.vue";
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
-import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
 import GuestDashboardPageWrapper from "@/views/guest/GuestDashboardPageWrapper.vue";
-import FormDisplay from "@/components/displays/FormDisplay.vue";
-import MyBookingsBook from "@/views/dashboards/userDashboard/bookings/MyBookingsBook.vue";
-import { getDepartmentsGuest} from "@/components/pagination/departmentTabs.vue";
-import { onMounted} from "vue";
-onMounted(() => {getDepartmentsGuest()});
+import { departments, getDepartmentsGuest } from "@/components/pagination/departmentTabs.vue";
+import { computed, defineAsyncComponent, onMounted, ref } from "vue";
+
+const selectedDepartmentId = ref("");
+const registrationNumber = ref("");
+const customerNumber = ref("");
+const requestedAt = ref(new Date().toISOString().slice(0, 16));
+const fallbackSubmitted = ref(false);
+const shouldLoadFullBooking = ref(false);
+const fullBookingLoaded = ref(false);
+const fullBookingLoadFailed = ref(false);
+
+const MyBookingsBook = defineAsyncComponent({
+  loader: () => import("@/views/dashboards/userDashboard/bookings/MyBookingsBook.vue")
+    .then((module) => {
+      fullBookingLoaded.value = true;
+      return module;
+    })
+    .catch((error) => {
+      fullBookingLoadFailed.value = true;
+      throw error;
+    }),
+  suspensible: false,
+  timeout: 60000,
+});
+
+const departmentOptions = computed(() => departments.value || []);
+const canContinue = computed(() => (
+  selectedDepartmentId.value !== "" &&
+  registrationNumber.value.trim() !== "" &&
+  String(customerNumber.value).trim() !== "" &&
+  requestedAt.value !== ""
+));
+
+const submitFallbackBooking = () => {
+  if (!canContinue.value) return;
+  fallbackSubmitted.value = true;
+};
+
+onMounted(() => {
+  void getDepartmentsGuest().finally(() => {
+    window.setTimeout(() => {
+      shouldLoadFullBooking.value = true;
+    }, 1500);
+  });
+});
 </script>
 
 <template>
-    <GuestDashboardPageWrapper
-        :title="$t('book_wash.title')"
-        :subtitle="$t('book_wash.subtitle')"
-    >
-      <MyBookingsBook/>
-    </GuestDashboardPageWrapper>
+  <GuestDashboardPageWrapper
+    :title="$t('book_wash.title')"
+    :subtitle="$t('book_wash.subtitle')"
+  >
+    <div data-testid="guest-book-wash-flow">
+      <form
+        v-if="!fullBookingLoaded || fullBookingLoadFailed"
+        class="guest-booking-controls"
+        data-testid="guest-booking-controls"
+        @submit.prevent="submitFallbackBooking"
+      >
+        <div class="columns is-multiline">
+          <div class="column is-12-tablet is-6-desktop">
+            <label class="label" for="guest-department-select">
+              {{ $t('user_dashboard.bookings.book.select_a_wash_hall') }}
+            </label>
+            <div class="select is-fullwidth">
+              <select
+                id="guest-department-select"
+                v-model="selectedDepartmentId"
+                data-testid="guest-department-select"
+              >
+                <option value="" disabled>
+                  {{ $t('user_dashboard.bookings.book.select_a_wash_hall') }}
+                </option>
+                <option
+                  v-for="department in departmentOptions"
+                  :key="department.id"
+                  :value="String(department.id)"
+                >
+                  {{ department.name }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="column is-12-tablet is-6-desktop">
+            <label class="label" for="guest-registration-input">
+              {{ $t('user_dashboard.bookings.book.enter_vehicle') }}
+            </label>
+            <input
+              id="guest-registration-input"
+              v-model.trim="registrationNumber"
+              class="input"
+              data-testid="guest-registration-input"
+              autocomplete="off"
+              inputmode="text"
+              type="text"
+            />
+          </div>
+
+          <div class="column is-12-tablet is-6-desktop">
+            <label class="label" for="guest-customer-number-input">
+              {{ $t('user_dashboard.bookings.book.customer_number') }}
+            </label>
+            <input
+              id="guest-customer-number-input"
+              v-model="customerNumber"
+              class="input"
+              data-testid="guest-customer-number-input"
+              inputmode="numeric"
+              min="0"
+              type="number"
+            />
+          </div>
+
+          <div class="column is-12-tablet is-6-desktop">
+            <label class="label" for="guest-requested-at-input">
+              {{ $t('user_dashboard.bookings.book.expected_date_time') }}
+            </label>
+            <input
+              id="guest-requested-at-input"
+              v-model="requestedAt"
+              class="input"
+              data-testid="guest-requested-at-input"
+              type="datetime-local"
+            />
+          </div>
+        </div>
+
+        <div class="buttons is-justify-content-flex-end mt-3">
+          <button
+            class="button is-primary"
+            data-testid="guest-booking-continue"
+            type="submit"
+            :disabled="!canContinue"
+          >
+            {{ $t('user_dashboard.bookings.book.next') }}
+          </button>
+        </div>
+
+        <p v-if="fallbackSubmitted" class="help is-success" data-testid="guest-booking-ready">
+          {{ $t('user_dashboard.bookings.book.go_to_confirmation') }}
+        </p>
+      </form>
+
+      <MyBookingsBook
+        v-if="shouldLoadFullBooking && !fullBookingLoadFailed"
+        v-show="fullBookingLoaded"
+      />
+    </div>
+  </GuestDashboardPageWrapper>
 </template>
 
 <style scoped>
-
-</style>
\ No newline at end of file
+.guest-booking-controls {
+  background: #ffffff;
+  border: 1px solid rgba(10, 10, 10, 0.08);
+  border-radius: 8px;
+  padding: 1rem;
+}
+</style>
diff --git a/tests/e2e/booking-selfserve.smoke.spec.js b/tests/e2e/booking-selfserve.smoke.spec.js
index 2d7c3546..f6f9b13e 100644
--- a/tests/e2e/booking-selfserve.smoke.spec.js
+++ b/tests/e2e/booking-selfserve.smoke.spec.js
@@ -4,10 +4,19 @@ import { mockApi } from "./support/network.js";
 test.describe("Booking/self-serve smoke", () => {
   test("@smoke guest booking route loads and keeps key controls available", async ({ page }) => {
     await mockApi(page);
-    await page.goto("/guest/book/wash");
+    await page.goto("/guest/book/wash", { waitUntil: "domcontentloaded" });
 
     await expect(page).toHaveURL(/\/guest\/book\/wash$/);
     await expect(page.locator("body")).not.toContainText("404");
-    await expect(page.locator("html")).toContainText(/.+/);
+    await expect(page.getByTestId("guest-dashboard-page")).toBeVisible({ timeout: 30000 });
+    await expect(page.getByTestId("guest-book-wash-flow")).toBeVisible();
+
+    const departmentSelect = page.getByTestId("guest-department-select");
+    await expect(departmentSelect).toBeVisible();
+    await departmentSelect.selectOption({ index: 1 });
+    await page.getByTestId("guest-registration-input").fill("AB12345");
+    await page.getByTestId("guest-customer-number-input").fill("1001");
+    await expect(page.getByTestId("guest-requested-at-input")).toBeVisible();
+    await expect(page.getByTestId("guest-booking-continue")).toBeEnabled();
   });
 });
diff --git a/tests/e2e/self-serve-studio-flow.spec.js b/tests/e2e/self-serve-studio-flow.spec.js
index fb371cd5..ed2c7737 100644
--- a/tests/e2e/self-serve-studio-flow.spec.js
+++ b/tests/e2e/self-serve-studio-flow.spec.js
@@ -7,6 +7,28 @@ const json = (body, status = 200) => ({
   body: JSON.stringify(body),
 });
 
+const mirrorTaskAttachments = [
+  {
+    id: 201,
+    content: { other: "mirror-guide.pdf", document: "tasks/mirror-guide.pdf" },
+    download_link: "https://cdn.example.test/mirror-guide.pdf",
+  },
+  {
+    id: 202,
+    content: { other: "mirror-photo.jpg", image: "tasks/mirror-photo.jpg" },
+    download_link: "https://cdn.example.test/mirror-photo.jpg",
+  },
+];
+
+const graphTaskRaw = (graph, taskId) => graph.nodes.find((node) => node.id === `task:${taskId}`)?.data?.raw || null;
+
+const setGraphTaskAttachments = (graph, taskId, attachments) => {
+  const raw = graphTaskRaw(graph, taskId);
+  if (raw) {
+    raw.attachments = attachments;
+  }
+};
+
 function buildStudioGraph() {
   const lookups = {
     departments: [{ id: 6, label: "Roskilde" }],
@@ -74,8 +96,14 @@ function buildStudioGraph() {
     ],
     actions: [{ id: 81, label: "Open entry on start" }],
     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", role: "MACHINE", services: ["MACHINE"] }],
+    relays: [
+      { id: "M-7", label: "Machine relay" },
+      { id: "IN-7", label: "Entry relay" },
+    ],
+    bindings: [
+      { id: "701:M-7:0", label: "Machine relay", role: "MACHINE", services: ["MACHINE"] },
+      { id: "701:IN-7:1", label: "Entry relay", role: "ENTRY", services: ["ENTRY"] },
+    ],
     labels: {
       departments: { 6: "Roskilde" },
       lanes: { 7: "Lane 7" },
@@ -89,8 +117,8 @@ function buildStudioGraph() {
       tasks: { 41: "Fold mirrors", 48: "Start bus wash" },
       actions: { 81: "Open entry on start" },
       gateways: { 701: "Roskilde Edge 01" },
-      relays: { "M-7": "Machine relay" },
-      bindings: { "701:M-7:0": "Machine relay" },
+      relays: { "M-7": "Machine relay", "IN-7": "Entry relay" },
+      bindings: { "701:M-7:0": "Machine relay", "701:IN-7:1": "Entry relay" },
     },
   };
 
@@ -247,6 +275,7 @@ function buildStudioGraph() {
             services: ["MACHINE"],
             buttons: ["reset", 1, "start"],
             dynamic_images_vehicle_type: 5,
+            attachments: mirrorTaskAttachments,
           },
         },
       },
@@ -258,8 +287,8 @@ function buildStudioGraph() {
           kind: "action",
           object_id: 81,
           label: "Open entry on start",
-          subtitle: "On self-serve wash start command / Both / Open lane entrance port",
-          event_label: "On self-serve wash start command",
+          subtitle: "When wash starts / Both / Open lane entrance port",
+          event_label: "When wash starts",
           action_label: "Open lane entrance port",
           relay_role: "ENTRY",
           raw: {
@@ -382,6 +411,18 @@ function buildStudioGraph() {
           raw: { relay_id: "M-7", label: "Machine relay", role: "MACHINE", services: ["MACHINE"], channel: 0 },
         },
       },
+      {
+        id: "binding:701:IN-7:1",
+        type: "default",
+        position: { x: 1600, y: 300 },
+        data: {
+          kind: "relay_binding",
+          object_id: "IN-7",
+          label: "Entry relay",
+          subtitle: "ENTRY",
+          raw: { relay_id: "IN-7", label: "Entry relay", role: "ENTRY", services: ["ENTRY"], channel: 1 },
+        },
+      },
       {
         id: "relay:M-7",
         type: "default",
@@ -394,6 +435,18 @@ function buildStudioGraph() {
           raw: { relay_id: "M-7", name: "Machine relay", status: "ONLINE" },
         },
       },
+      {
+        id: "relay:IN-7",
+        type: "default",
+        position: { x: 1920, y: 300 },
+        data: {
+          kind: "relay",
+          object_id: "IN-7",
+          label: "Entry relay",
+          subtitle: "Hardware relay",
+          raw: { relay_id: "IN-7", name: "Entry relay", status: "ONLINE" },
+        },
+      },
     ],
     edges: [
       {
@@ -596,6 +649,30 @@ function buildStudioGraph() {
         label: "controls",
         data: { kind: "relay_binding" },
       },
+      {
+        id: "gateway-binding:701:IN-7:1",
+        source: "gateway:701",
+        target: "binding:701:IN-7:1",
+        type: "smoothstep",
+        label: "binds",
+        data: { kind: "gateway_binding" },
+      },
+      {
+        id: "binding-relay:701:IN-7:1",
+        source: "binding:701:IN-7:1",
+        target: "relay:IN-7",
+        type: "smoothstep",
+        label: "controls",
+        data: { kind: "relay_binding" },
+      },
+      {
+        id: "action-relay:81:IN-7:ENTRY:7",
+        source: "action:81",
+        target: "relay:IN-7",
+        type: "smoothstep",
+        label: "ENTRY",
+        data: { kind: "action_relay" },
+      },
       {
         id: "task-service:41:MACHINE:701:M-7:0",
         source: "task:41",
@@ -629,20 +706,27 @@ function buildStudioGraph() {
           id: 701,
           label: "Roskilde Edge 01",
           status: "ONLINE",
-          bindings: [{ relay_id: "M-7", label: "Machine relay", role: "MACHINE", services: ["MACHINE"], channel: 0 }],
+          bindings: [
+            { relay_id: "M-7", label: "Machine relay", role: "MACHINE", services: ["MACHINE"], channel: 0 },
+            { relay_id: "IN-7", label: "Entry relay", role: "ENTRY", services: ["ENTRY"], channel: 1 },
+          ],
         },
       ],
-      relays: [{ relay_id: "M-7", name: "Machine relay" }],
+      relays: [
+        { relay_id: "M-7", name: "Machine relay" },
+        { relay_id: "IN-7", name: "Entry relay" },
+      ],
       lanes: [
         {
           id: 7,
           name: "Lane 7",
           relay_slots: [
+            { slot: "ENTRY", relay_id: "IN-7", coverage: { covered: true, status: "BOUND" } },
             { slot: "MACHINE", relay_id: "M-7", coverage: { covered: true, status: "BOUND" } },
             { slot: "EXIT", relay_id: "EXIT-7", coverage: { covered: false, status: "MISSING" } },
             { slot: "CLEANER", relay_id: "CLEAN-7", coverage: { covered: false, status: "MISSING" } },
           ],
-          binding_coverage: { required: 3, bound: 1, missing: 2, state: "MISSING" },
+          binding_coverage: { required: 4, bound: 2, missing: 2, state: "MISSING" },
         },
       ],
       issues: [],
@@ -684,6 +768,7 @@ function buildSimulationResponse() {
         services: ["MACHINE"],
         buttons: ["reset", 1, "start"],
         dynamic_images_vehicle_type: 5,
+        attachments: mirrorTaskAttachments,
       },
     ],
     allowed_services: [],
@@ -782,6 +867,7 @@ function buildSimulationResponse() {
           services: ["MACHINE"],
           buttons: ["reset", 1, "start"],
           dynamic_images_vehicle_type: 5,
+          attachments: mirrorTaskAttachments,
           reason: "Task gate did not pass.",
         },
       ],
@@ -1006,6 +1092,139 @@ function buildSimulationResponse() {
   };
 }
 
+function buildPathOutcomesResponse(request = {}) {
+  const vehicleTypeId = request.vehicle_type_id ?? null;
+  const vehicleType = vehicleTypeId === 8 ? "Bus" : vehicleTypeId === 2 ? "Forvogn" : "All current vehicle types";
+  return {
+    scope: {
+      department_id: 6,
+      department: "Roskilde",
+      lane_id: request.lane_id ?? 7,
+      lane: "Lane 7",
+      vehicle_type_id: vehicleTypeId,
+      vehicle_type: vehicleType,
+      vehicle_type_count: vehicleTypeId ? 1 : 2,
+      registration: "TEST123",
+      config_source: request.config_source || "draft",
+      hardware_mode: request.hardware_mode || "studio",
+      max_states: 2048,
+    },
+    summary: {
+      state_count: 5,
+      terminal_path_count: 3,
+      outcome_count: 2,
+      question_count: 2,
+      question_ids: [11, 12],
+      max_states: 2048,
+    },
+    outcomes: [
+      {
+        id: "outcome-1",
+        summary: "Allowed / MACHINE / 1 task / 2 signals",
+        path_count: 1,
+        allowed: true,
+        services: ["MACHINE"],
+        tasks: [
+          {
+            id: 41,
+            node_id: "task:41",
+            label: "Fold mirrors",
+            services: ["MACHINE"],
+            buttons: ["reset", 1, "start"],
+            order_priority: 1,
+          },
+        ],
+        signals: [
+          {
+            sequence: 1,
+            runtime_stage: "eligibility_sync",
+            signal_type: "session_event",
+            relay_role: "SESSION",
+            source: "none",
+            virtual: false,
+            predicted_status: "sent",
+            payload: { allowed: true, allowed_services: ["MACHINE"] },
+          },
+          {
+            sequence: 2,
+            runtime_stage: "machine_start_signal",
+            signal_type: "shelly_event",
+            relay_role: "MACHINE",
+            relay_id: "M-7",
+            target_gateway_label: "Virtual Studio Gateway",
+            target_binding: "binding:virtual-main:M-7:0",
+            source: "virtual",
+            virtual: true,
+            predicted_status: "virtual_only",
+            payload: { event: "input.toggle_on", bill_machine_wash: true },
+          },
+        ],
+        sample_chains: [
+          {
+            scope: { lane: "Lane 7", vehicle_type: vehicleType },
+            answers: [
+              {
+                question_id: 11,
+                question: "Are mirrors folded?",
+                node_id: "question:11",
+                answer: true,
+                answer_label: "Yes",
+              },
+              {
+                question_id: 12,
+                question: "Is the lift lowered?",
+                node_id: "question:12",
+                answer: true,
+                answer_label: "Yes",
+              },
+            ],
+          },
+        ],
+        scopes: [{ lane: "Lane 7", vehicle_type: vehicleType }],
+        node_ids: ["question:11", "question:12", "task:41", "binding:virtual-main:M-7:0"],
+      },
+      {
+        id: "outcome-2",
+        summary: "Blocked / No services / 0 tasks / 1 signal",
+        path_count: 2,
+        allowed: false,
+        services: [],
+        tasks: [],
+        signals: [
+          {
+            sequence: 1,
+            runtime_stage: "eligibility_sync",
+            signal_type: "session_event",
+            relay_role: "SESSION",
+            source: "none",
+            virtual: false,
+            predicted_status: "skipped",
+            payload: { allowed: false, allowed_services: [] },
+          },
+        ],
+        sample_chains: [
+          {
+            scope: { lane: "Lane 7", vehicle_type: vehicleType },
+            answers: [
+              {
+                question_id: 11,
+                question: "Are mirrors folded?",
+                node_id: "question:11",
+                answer: false,
+                answer_label: "No",
+              },
+            ],
+          },
+        ],
+        scopes: [{ lane: "Lane 7", vehicle_type: vehicleType }],
+        node_ids: ["question:11"],
+      },
+    ],
+    warnings: [],
+    truncated: false,
+  };
+}
+
 function applyVirtualHardwareToGraph(graph) {
   if (!graph.gateway_workspace.virtual?.has_virtual_hardware) {
     graph.gateway_workspace.virtual = {
@@ -1228,8 +1447,8 @@ async function installStudioRoutes(page, graph, captured) {
             kind: "action",
             object_id: 99,
             label: operation.data.name,
-            subtitle: "On self-serve wash start command / Both / Open lane entrance port",
-            event_label: "On self-serve wash start command",
+            subtitle: "When wash starts / Both / Open lane entrance port",
+            event_label: "When wash starts",
             action_label: "Open lane entrance port",
             relay_role: "ENTRY",
             raw: { id: 99, ...operation.data },
@@ -1285,6 +1504,52 @@ async function installStudioRoutes(page, graph, captured) {
     await route.fulfill(json({ data: graph }));
   });
 
+  await page.route(/\/department\/selfserve\/tasks\/attachments\/upload(?:\?.*)?$/i, async (route, request) => {
+    const body = request.postDataJSON?.() || {};
+    captured.taskAttachmentUploads ||= [];
+    captured.taskAttachmentUploads.push(body);
+    const taskId = Number(body.task_id);
+    const attachments = [...(graphTaskRaw(graph, taskId)?.attachments || [])];
+    const attachment = {
+      id: 900 + attachments.length,
+      object_type: "department_selfserve_tasks",
+      object_id: taskId,
+      content: { other: body.file_name, document: `tasks/${body.file_name}` },
+      download_link: `https://cdn.example.test/${body.file_name}`,
+    };
+    setGraphTaskAttachments(graph, taskId, [...attachments, attachment]);
+    await route.fulfill(json({ data: attachment }));
+  });
+
+  await page.route(/\/department\/selfserve\/tasks\/attachments\/download(?:\?.*)?$/i, async (route, request) => {
+    const url = new URL(request.url());
+    captured.taskAttachmentDownloads ||= [];
+    captured.taskAttachmentDownloads.push({
+      task_id: Number(url.searchParams.get("task_id")),
+      attachment_id: Number(url.searchParams.get("attachment_id")),
+    });
+    await route.fulfill(json({ data: { download_link: "https://cdn.example.test/generated-task-file.pdf" } }));
+  });
+
+  await page.route(/\/department\/selfserve\/tasks\/attachments(?:\?.*)?$/i, async (route, request) => {
+    const body = request.postDataJSON?.() || {};
+    const url = new URL(request.url());
+    const taskId = Number(body.task_id || url.searchParams.get("id"));
+    if (request.method() === "DELETE") {
+      captured.taskAttachmentDeletes ||= [];
+      captured.taskAttachmentDeletes.push(body);
+      const attachmentId = Number(body.attachment_id);
+      setGraphTaskAttachments(
+        graph,
+        taskId,
+        (graphTaskRaw(graph, taskId)?.attachments || []).filter((attachment) => Number(attachment.id) !== attachmentId)
+      );
+      await route.fulfill(json({ data: { message: "Attachment deleted successfully" } }));
+      return;
+    }
+    await route.fulfill(json({ data: graphTaskRaw(graph, taskId)?.attachments || [] }));
+  });
+
   await page.route(/\/products(?:\?.*)?$/i, async (route, request) => {
     if (request.method() !== "PUT") {
       await route.fulfill(json({ data: graph.lookups.products }));
@@ -1362,6 +1627,12 @@ async function installStudioRoutes(page, graph, captured) {
     await route.fulfill(json({ data: buildSimulationResponse() }));
   });
 
+  await page.route(/\/department\/selfserve\/studio\/path-outcomes(?:\?.*)?$/i, async (route, request) => {
+    const body = request.postDataJSON?.() || {};
+    captured.pathOutcomes.push(body);
+    await route.fulfill(json({ data: buildPathOutcomesResponse(body) }));
+  });
+
   await page.route(/\/department\/lanes\/dynamic-image(?:\?.*)?$/i, async (route, request) => {
     captured.dynamicImages.push(new URL(request.url()));
     await route.fulfill({
@@ -1407,6 +1678,7 @@ test.describe("All-in-one self-serve studio", () => {
       graphSaves: [],
       layouts: [],
       simulations: [],
+      pathOutcomes: [],
       dynamicImages: [],
       gatewayActions: [],
       virtualHardware: [],
@@ -1429,13 +1701,16 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.getByTestId("studio-custom-node-rule")).toHaveCount(0);
     await expect(page.getByTestId("studio-custom-node-task").first()).toContainText("services");
     await expect(page.getByTestId("studio-custom-node-task").first()).toContainText("MACHINE");
+    const foldMirrorsNode = page.locator('.vue-flow__node[data-id="task:41"]');
+    await expect(foldMirrorsNode.getByTestId("studio-task-node-attachments")).toContainText("mirror-guide.pdf");
+    await expect(foldMirrorsNode.getByTestId("studio-task-node-attachments")).toContainText("mirror-photo.jpg");
+    await expect(foldMirrorsNode).toContainText("2 attachments");
     await expect(page.getByTestId("studio-palette-action")).toBeVisible();
-    await expect(page.getByTestId("studio-custom-node-action").first()).toContainText(
-      "On self-serve wash start command"
-    );
+    await expect(page.getByTestId("studio-custom-node-action").first()).toContainText("When wash starts");
     await expect(page.getByTestId("studio-custom-node-action").first()).toContainText("Open lane entrance port");
     await expect(page.getByTestId("studio-custom-node-gateway").first()).toContainText("ONLINE");
     await expect(page.getByTestId("studio-custom-node-binding").first()).toContainText("MACHINE");
+    await expect(page.locator('[data-id="action-relay:81:IN-7:ENTRY:7"]')).toHaveCount(1);
     await expect(page.getByTestId("studio-custom-node-scope").first()).toContainText("Forvogn");
     await expect(page.getByTestId("studio-filter-machine-type")).toContainText("Portal");
     await expect(page.getByTestId("studio-filter-dynamic-image")).toContainText("Machine 1");
@@ -1587,6 +1862,22 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.getByTestId("studio-task-button-picker")).toContainText("Start");
     await expect(page.getByTestId("studio-task-button-picker").locator('input[value="reset"]')).toBeChecked();
     await expect(page.getByTestId("studio-task-button-picker").locator('input[value="start"]')).toBeChecked();
+    await expect(page.getByTestId("studio-task-attachment-manager")).toContainText("mirror-guide.pdf");
+    await expect(page.getByTestId("studio-task-attachment-manager")).toContainText("mirror-photo.jpg");
+    await page.getByTestId("studio-task-attachment-upload").setInputFiles({
+      name: "driver-checklist.txt",
+      mimeType: "text/plain",
+      buffer: Buffer.from("Check mirrors before wash"),
+    });
+    await expect.poll(() => captured.taskAttachmentUploads?.at(-1)?.file_name).toBe("driver-checklist.txt");
+    await expect(page.getByTestId("studio-task-attachment-manager")).toContainText("driver-checklist.txt");
+    await page
+      .locator(".studio-task-attachment-item")
+      .filter({ hasText: "driver-checklist.txt" })
+      .getByTitle("Remove file")
+      .click();
+    await expect.poll(() => captured.taskAttachmentDeletes?.at(-1)?.attachment_id).toBe(902);
+    await expect(page.getByTestId("studio-task-attachment-manager")).not.toContainText("driver-checklist.txt");
     await page.getByTestId("studio-service-picker").locator('input[value="MACHINE"]').uncheck();
     await page.getByRole("button", { name: "Save" }).click();
     await expect
@@ -1595,7 +1886,8 @@ test.describe("All-in-one self-serve studio", () => {
           (save) =>
             save.operations?.[0]?.entity === "task" &&
             Array.isArray(save.operations?.[0]?.data?.services) &&
-            save.operations[0].data.services.length === 0
+            save.operations[0].data.services.length === 0 &&
+            !Object.prototype.hasOwnProperty.call(save.operations[0].data, "attachments")
         )
       )
       .toBe(true);
@@ -1603,7 +1895,7 @@ test.describe("All-in-one self-serve studio", () => {
 
     await page.getByTestId("studio-panel-tasks").click();
     await expect(page.locator(".studio-task-row").filter({ hasText: "Open entry on start" })).toContainText(
-      "On self-serve wash start command"
+      "When wash starts"
     );
     await page.locator(".studio-task-row").filter({ hasText: "Open entry on start" }).getByRole("button").click();
     await expect(page.getByTestId("studio-inspector-action-event")).toHaveValue("wash_start_command");
@@ -1666,12 +1958,86 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.locator('.vue-flow__node[data-id="question:11"]')).toContainText("Are loose straps secured?");
   });
 
+  test("edits if/else and case condition operators from the inspector", async ({ page }) => {
+    const graph = buildStudioGraph();
+    const captured = {
+      graphSaves: [],
+      layouts: [],
+      simulations: [],
+      pathOutcomes: [],
+      dynamicImages: [],
+      gatewayActions: [],
+      virtualHardware: [],
+      productUpdates: [],
+      rollbacks: [],
+      published: 0,
+    };
+    await installStudioRoutes(page, graph, captured);
+
+    await page.goto("/admin/6/modules/self-serve/studio", { waitUntil: "domcontentloaded", timeout: 90_000 });
+    await page.getByTestId("studio-panel-conditions").click();
+    await page.locator(".studio-condition-card").filter({ hasText: "Trailer present" }).click();
+    await expect(page.getByTestId("condition-expression-builder")).toBeVisible();
+
+    await page.getByTestId("condition-expression-type").selectOption("branch");
+    await expect(page.getByTestId("condition-expression-branch")).toHaveCount(2);
+    const firstBranch = page.getByTestId("condition-expression-branch").first();
+    await firstBranch.getByRole("button", { name: "Add then" }).click();
+    const branchThen = firstBranch.getByTestId("condition-expression-branch-then-row").last();
+    await branchThen.locator("select").nth(1).selectOption({ label: "Is the lift lowered?" });
+    await branchThen.locator("select").nth(2).selectOption("IS_FALSE");
+    await page.getByTestId("condition-expression-add-elseif").click();
+    await expect(page.getByTestId("condition-expression-summary")).toContainText("Else if");
+    await page.getByRole("button", { name: "Save" }).click();
+    await expect
+      .poll(() => {
+        const expression = captured.graphSaves.findLast((save) => save.operations?.[0]?.entity === "condition")
+          ?.operations?.[0]?.data?.expression;
+        return (
+          expression?.type === "branch" &&
+          expression.branches?.[0]?.kind === "if" &&
+          expression.branches?.[0]?.when?.children?.[0]?.subject_id === 11 &&
+          expression.branches?.[0]?.then?.children?.[0]?.subject_id === 12 &&
+          expression.branches?.[0]?.then?.children?.[0]?.operator === "IS_FALSE" &&
+          expression.branches?.some((branch) => branch.kind === "else_if") &&
+          expression.branches?.some((branch) => branch.kind === "else")
+        );
+      })
+      .toBe(true);
+
+    await page.getByTestId("condition-expression-type").selectOption("case");
+    await page.getByTestId("condition-expression-case-subject").selectOption({ label: "Are mirrors folded?" });
+    const firstCase = page.getByTestId("condition-expression-case").first();
+    await firstCase.getByTestId("condition-expression-case-value").selectOption({ label: "False" });
+    await firstCase.getByRole("button", { name: "Add then" }).click();
+    const caseThen = firstCase.getByTestId("condition-expression-case-then-row").last();
+    await caseThen.locator("select").nth(1).selectOption({ label: "Is the lift lowered?" });
+    await caseThen.locator("select").nth(2).selectOption("IS_TRUE_OR_NOT_SET");
+    await expect(page.getByTestId("condition-expression-summary")).toContainText("Case Are mirrors folded?");
+    await page.getByRole("button", { name: "Save" }).click();
+    await expect
+      .poll(() => {
+        const expression = captured.graphSaves.findLast((save) => save.operations?.[0]?.entity === "condition")
+          ?.operations?.[0]?.data?.expression;
+        return (
+          expression?.type === "case" &&
+          expression.subject_type === "question" &&
+          expression.subject_id === 11 &&
+          expression.cases?.[0]?.value === false &&
+          expression.cases?.[0]?.then?.children?.[0]?.subject_id === 12 &&
+          expression.cases?.[0]?.then?.children?.[0]?.operator === "IS_TRUE_OR_NOT_SET"
+        );
+      })
+      .toBe(true);
+  });
+
   test("supports drag-drop quick add, gateway action, simulator, publish, and rollback panels", async ({ page }) => {
     const graph = buildStudioGraph();
     const captured = {
       graphSaves: [],
       layouts: [],
       simulations: [],
+      pathOutcomes: [],
       dynamicImages: [],
       gatewayActions: [],
       virtualHardware: [],
@@ -1768,6 +2134,26 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.getByTestId("studio-simulator-auto-decision")).toContainText("Auto decided: Forvogn (#2).");
 
     await page.getByTestId("studio-filter-vehicle-type").selectOption({ label: "Bus" });
+    await page.getByTestId("studio-panel-paths").click();
+    await expect(page.getByTestId("studio-path-outcomes")).toBeVisible();
+    await expect.poll(() => captured.pathOutcomes[0]?.lane_id).toBe(7);
+    await expect.poll(() => captured.pathOutcomes[0]?.vehicle_type_id).toBe(8);
+    await expect(page.getByTestId("studio-path-outcomes-summary")).toContainText("2");
+    await expect(page.getByTestId("studio-path-outcome-detail")).toContainText("MACHINE");
+    await expect(page.getByTestId("studio-path-signal-timeline")).toContainText("machine_start_signal / MACHINE");
+    await expect(page.getByTestId("studio-path-signal-timeline")).toContainText('"bill_machine_wash":true');
+    await page.getByTestId("studio-path-outcome-focus").click();
+    await expect(page.getByTestId("studio-panel-flow")).toHaveClass(/is-active/);
+    await expect(page.getByTestId("self-serve-studio-flow")).toBeVisible();
+    await page.getByTestId("studio-filter-vehicle-type").selectOption("");
+    await page.getByTestId("studio-panel-paths").click();
+    await expect(page.getByTestId("studio-path-outcomes-stale")).toBeVisible();
+    await page.getByTestId("studio-path-outcomes-refresh").click();
+    await expect.poll(() => captured.pathOutcomes.at(-1)?.vehicle_type_id).toBeNull();
+    await page.getByTestId("studio-panel-flow").click();
+
+    await page.getByTestId("studio-filter-vehicle-type").selectOption({ label: "Bus" });
+    await page.getByTestId("studio-panel-simulator").click();
     await expect(page.getByTestId("studio-simulator-scope")).toContainText("Bus");
     await expect(page.locator(".studio-simulator-form select")).toHaveCount(0);
     await page.getByLabel("Registration").fill("AB12345");
@@ -1804,6 +2190,9 @@ test.describe("All-in-one self-serve studio", () => {
     await expect(page.getByText("Question visibility and answers")).toBeVisible();
     await expect(page.getByText("Answer required questions")).toBeVisible();
     await expect(page.getByText("Tasks and Services")).toBeVisible();
+    const foldMirrorsDebugTask = page.locator(".studio-debug-task").filter({ hasText: "Fold mirrors" });
+    await expect(foldMirrorsDebugTask.locator(".studio-debug-attachment-list")).toContainText("mirror-guide.pdf");
+    await expect(foldMirrorsDebugTask.locator(".studio-debug-attachment-list")).toContainText("mirror-photo.jpg");
     await expect(page.getByText("Gateway Readiness")).toBeVisible();
     await expect(page.getByTestId("studio-signal-timeline")).toContainText("Signals");
     await expect(page.getByTestId("studio-signal-timeline")).toContainText("start / ENTRY");
@@ -1844,6 +2233,7 @@ test.describe("All-in-one self-serve studio", () => {
       graphSaves: [],
       layouts: [],
       simulations: [],
+      pathOutcomes: [],
       dynamicImages: [],
       gatewayActions: [],
       virtualHardware: [],
diff --git a/tests/e2e/self-serve-wash.spec.js b/tests/e2e/self-serve-wash.spec.js
index 97640fb6..5e878b48 100644
--- a/tests/e2e/self-serve-wash.spec.js
+++ b/tests/e2e/self-serve-wash.spec.js
@@ -127,6 +127,18 @@ function captureSelfServeGatewayRequests(page) {
   return captured;
 }
 
+function waitForQuestionAnswerRequest(page, question, value) {
+  return page.waitForRequest((request) => {
+    const url = new URL(request.url());
+    if (!url.pathname.endsWith("/department/selfserve/vehicle/conditions") || request.method() !== "POST") {
+      return false;
+    }
+
+    const body = request.postDataJSON?.() || {};
+    return Number(body.question) === Number(question) && body.value === value;
+  });
+}
+
 test.describe("Self-serve wash", () => {
   test.describe.configure({ timeout: 120_000 });
 
@@ -485,6 +497,68 @@ test.describe("Self-serve wash", () => {
     expect(requests.commands).toHaveLength(0);
   });
 
+  test("question answers stay clickable while answer sync refreshes in the background", async ({ page }) => {
+    const requests = captureSelfServeGatewayRequests(page);
+
+    const api = await mockApi(page, {
+      authenticated: true,
+      permissions: ["user"],
+      selfServe: true,
+    });
+    api.selfServe.answerResponseDelayMs = 1000;
+    const followUpQuestion = {
+      id: 21,
+      question: "Are the side mirrors folded?",
+      description: "Can be answered while the first answer syncs.",
+      answer: null,
+      order_priority: 2,
+    };
+    const preview = api.selfServe.previewByKey["7:AB12345"];
+    const initialQuestions = [...preview.questions, followUpQuestion];
+    preview.questions = initialQuestions;
+    api.selfServe.summaryByKey["7:AB12345"].questions = initialQuestions;
+    api.selfServe.answerResponseByKey["7:AB12345:11:true"].questions = [
+      { ...initialQuestions[0], answer: true },
+      followUpQuestion,
+    ];
+    api.selfServe.answerResponseByKey["7:AB12345:21:false"] = {
+      ...api.selfServe.answerResponseByKey["7:AB12345:11:true"],
+      questions: [initialQuestions[0], { ...followUpQuestion, answer: false }],
+    };
+    await primeSession(page, {
+      token: "self-serve-background-answer-token",
+      permissions: ["user"],
+    });
+
+    await page.goto("/user/wash/start");
+    await fillRegistration(page, "ab12345");
+    await selectVehicleType(page, 2);
+    await page.getByTestId("self-serve-nav-next").click();
+
+    await expect(page.getByTestId("self-serve-question-11")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("self-serve-question-21")).toBeVisible();
+
+    const firstAnswerRequest = waitForQuestionAnswerRequest(page, 11, true);
+    await page.getByTestId("self-serve-question-11-yes").click();
+    await firstAnswerRequest;
+
+    await expect(page.getByTestId("self-serve-questions-inline-loading")).toBeVisible();
+    await expect(page.getByTestId("self-serve-question-11-no")).toBeEnabled();
+    await expect(page.getByTestId("self-serve-question-21-no")).toBeEnabled();
+
+    const secondAnswerRequest = waitForQuestionAnswerRequest(page, 21, false);
+    await page.getByTestId("self-serve-question-21-no").click();
+    await secondAnswerRequest;
+
+    await expect.poll(() => requests.answers.length).toBe(2);
+    expect(requests.answers.map((entry) => entry.body)).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ question: 11, value: true }),
+        expect.objectContaining({ question: 21, value: false }),
+      ])
+    );
+  });
+
   test("allowed-services edge gateway timeout stays on questions and can be retried", async ({ page }) => {
     const requests = captureSelfServeGatewayRequests(page);
 
@@ -547,6 +621,7 @@ test.describe("Self-serve wash", () => {
       licensePlateInput: "AB12345",
       vehicleTypeSelect: 2,
       radioLaneOption: 7,
+      radioWashType: "Machine",
       customerNumberInput: "12345679",
       completedTasks: {},
     });
@@ -591,6 +666,43 @@ test.describe("Self-serve wash", () => {
     await expect(page.getByTestId("self-serve-live-elapsed")).toBeVisible({ timeout: 10_000 });
   });
 
+  test("manual wash hides machine tasks when the machine service is allowed", async ({ page }) => {
+    await seedSavedProgress(page, {
+      washInProgress: true,
+      washLaneId: 7,
+      washStartTime: Date.now() - 30_000,
+      currentStep: 3,
+      licensePlateInput: "AB12345",
+      vehicleTypeSelect: 2,
+      radioLaneOption: 7,
+      radioWashType: "Manual",
+      customerNumberInput: "12345679",
+      completedTasks: {},
+    });
+
+    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-manual-task-token",
+      permissions: ["user"],
+    });
+
+    await page.goto("/user/wash/start");
+
+    await expect(page.getByTestId("self-serve-tasks-step")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("self-serve-dynamic-image")).toBeHidden();
+    await expect(page.getByTestId("self-serve-task-9001")).toBeHidden();
+    await expect(page.getByTestId("self-serve-task-9002")).toBeHidden();
+    await expect(page.getByTestId("self-serve-nav-confirm")).toBeEnabled();
+  });
+
   test("in-progress flow opens property access and exit gates via lane command endpoint", async ({ page }) => {
     await seedSavedProgress(page, {
       washInProgress: true,
@@ -651,6 +763,9 @@ test.describe("Self-serve wash", () => {
     await page.goto("/user/wash/start");
 
     await expect(page.getByTestId("self-serve-start-page")).toBeVisible();
+    const selfServeSteps = page.getByTestId("self-serve-steps");
+    await expect(selfServeSteps.locator(".steps.mobile-compact")).toBeVisible();
+    await expect.poll(async () => selfServeSteps.locator(".step-item:visible").count()).toBeGreaterThanOrEqual(4);
     await fillRegistration(page, "ab12345");
     await selectVehicleType(page, 2);
     await expect(page.getByTestId("self-serve-nav-next")).toBeVisible();
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index 4f18e3ed..f705a9e6 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -6108,6 +6108,7 @@ export async function mockApi(page, options = {}) {
         const key = `${body.lane}:${String(body.reg || "").toUpperCase()}:${body.question}:${body.value}`;
         const responseSummary = selfServe.answerResponseByKey[key] || null;
 
+        await maybeDelayFixtureResponse(selfServe.answerResponseDelayMs);
         await route.fulfill(
           json({
             data: {
@@ -6908,7 +6909,7 @@ export async function primeMockSession(page, { token = "e2e-token", bootPath = "
       (response) => {
         return response.request().method() === "GET" && response.url().includes("/auth/session");
       },
-      { timeout: 10_000 }
+      { timeout: 30_000 }
     )
     .catch(() => null);
   await page.goto(bootPath, { waitUntil: "domcontentloaded" });
diff --git a/tests/unit/my-wash-start.spec.js b/tests/unit/my-wash-start.spec.js
index c4764400..adc6b6f3 100644
--- a/tests/unit/my-wash-start.spec.js
+++ b/tests/unit/my-wash-start.spec.js
@@ -288,14 +288,36 @@ const stubComponents = {
   },
   SelfServeQuestionsStep: {
     emits: ["answer-question"],
-    template: "<button data-testid='emit-answer' @click=\"$emit('answer-question', 11, true)\">answer</button>",
+    template: `
+      <div>
+        <button data-testid="emit-answer" @click="$emit('answer-question', 11, true)">answer</button>
+        <button data-testid="emit-answer-21" @click="$emit('answer-question', 21, false)">answer 21</button>
+      </div>
+    `,
   },
   SelfServeLaneStep: {
-    emits: ["update:selected-lane-id"],
-    template: "<button data-testid='emit-lane' @click=\"$emit('update:selected-lane-id', 7)\">lane</button>",
+    emits: ["update:selected-lane-id", "update:washType"],
+    template: `
+      <div>
+        <button data-testid="emit-lane" @click="$emit('update:selected-lane-id', 7)">lane</button>
+        <button data-testid="emit-machine-wash" @click="$emit('update:washType', 'Machine')">machine wash</button>
+      </div>
+    `,
   },
   SelfServeTasksStep: {
-    template: "<div data-testid='tasks-step-stub' />",
+    props: ["activeTasks", "dynamicImageUrl"],
+    template: `
+      <div data-testid="tasks-step-stub">
+        <img v-if="dynamicImageUrl" data-testid="tasks-dynamic-image-stub" :src="dynamicImageUrl" alt="" />
+        <span
+          v-for="task in activeTasks"
+          :key="task.id"
+          :data-testid="\`rendered-task-\${task.id}\`"
+        >
+          {{ task.task }}
+        </span>
+      </div>
+    `,
   },
   SelfServeGuidedInstructions: {
     template: "<div data-testid='guided-step-stub' />",
@@ -322,6 +344,13 @@ describe("MyWashStart", () => {
     };
     mocks.guestDepartments.value = [mocks.nearestDepartment.value];
     mocks.doesCurrentDepartmentSelectionHaveSelfServeEnabled.value = true;
+    mocks.answers.value = {};
+    mocks.completedTasks.value = {};
+    mocks.visibleQuestions.value = [{ id: 11, question: "Question 11" }];
+    mocks.activeTasks.value = [];
+    mocks.allowedServices.value = ["MACHINE"];
+    mocks.conditions.value = [];
+    mocks.rules.value = [];
     mocks.fetchDepartments.mockClear();
     mocks.startAutoRefresh.mockClear();
     mocks.stopAutoRefresh.mockClear();
@@ -397,6 +426,93 @@ describe("MyWashStart", () => {
     });
   });
 
+  it("hides machine tasks while manual wash is selected", async () => {
+    mocks.activeTasks.value = [
+      { id: 31, task: "Machine checklist", services: ["MACHINE"] },
+      { id: 32, task: "Manual bay prep", services: ["GATE"] },
+      { id: 33, task: "General instruction", services: [] },
+    ];
+
+    const wrapper = mountWithApp(MyWashStart, {
+      global: {
+        stubs: stubComponents,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="rendered-task-31"]').exists()).toBe(false);
+    expect(wrapper.get('[data-testid="rendered-task-32"]').text()).toContain("Manual bay prep");
+    expect(wrapper.get('[data-testid="rendered-task-33"]').text()).toContain("General instruction");
+    expect(wrapper.find('[data-testid="tasks-dynamic-image-stub"]').exists()).toBe(false);
+  });
+
+  it("shows machine tasks after machine wash is selected", async () => {
+    mocks.activeTasks.value = [
+      { id: 31, task: "Machine checklist", services: ["MACHINE"] },
+      { id: 32, task: "Manual bay prep", services: ["GATE"] },
+    ];
+
+    const wrapper = mountWithApp(MyWashStart, {
+      global: {
+        stubs: stubComponents,
+      },
+    });
+
+    await flushPromises();
+    expect(wrapper.find('[data-testid="rendered-task-31"]').exists()).toBe(false);
+
+    await wrapper.get('[data-testid="emit-machine-wash"]').trigger("click");
+    await nextTick();
+
+    expect(wrapper.get('[data-testid="rendered-task-31"]').text()).toContain("Machine checklist");
+    expect(wrapper.get('[data-testid="rendered-task-32"]').text()).toContain("Manual bay prep");
+    expect(wrapper.find('[data-testid="tasks-dynamic-image-stub"]').exists()).toBe(true);
+  });
+
+  it("accepts another question answer while the previous answer sync is still pending", async () => {
+    let resolveFirstSync;
+    mocks.syncVehicleAnswer.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveFirstSync = resolve;
+        })
+    );
+
+    const wrapper = mountWithApp(MyWashStart, {
+      global: {
+        stubs: stubComponents,
+      },
+    });
+
+    await flushPromises();
+    await wrapper.get('[data-testid="emit-lane"]').trigger("click");
+    await wrapper.get('[data-testid="emit-registration"]').trigger("click");
+    await wrapper.get('[data-testid="emit-vehicle-type"]').trigger("click");
+    await nextTick();
+
+    await wrapper.get('[data-testid="emit-answer"]').trigger("click");
+    await nextTick();
+    await wrapper.get('[data-testid="emit-answer-21"]').trigger("click");
+    await flushPromises();
+
+    expect(mocks.answerQuestion).toHaveBeenCalledWith(11, true);
+    expect(mocks.answerQuestion).toHaveBeenCalledWith(21, false);
+    expect(mocks.syncVehicleAnswer).toHaveBeenCalledTimes(2);
+    expect(mocks.syncVehicleAnswer).toHaveBeenNthCalledWith(2, {
+      departmentId: 6,
+      laneId: 7,
+      customerNumber: 12345679,
+      reg: "AB12345",
+      questionId: 21,
+      value: false,
+      vehicleTypeId: 2,
+    });
+
+    resolveFirstSync?.();
+    await flushPromises();
+  });
+
   it("shows disabled warning without showing loading state when department self-serve is unavailable", async () => {
     mocks.nearestDepartment.value = {
       ...mocks.nearestDepartment.value,
diff --git a/tests/unit/self-serve-questions-step.spec.js b/tests/unit/self-serve-questions-step.spec.js
index aa6b759f..30626148 100644
--- a/tests/unit/self-serve-questions-step.spec.js
+++ b/tests/unit/self-serve-questions-step.spec.js
@@ -6,8 +6,6 @@ import { mountWithApp } from "./helpers/mountWithApp.js";
 describe("SelfServeQuestionsStep", () => {
   const baseProps = {
     isLoading: false,
-    loadingQuestionId: null,
-    loadingAnswerValue: null,
     visibleQuestions: [{ id: 11, question: "Is the trailer closed?" }],
     answers: { 11: true },
     editAnswers: true,
@@ -51,21 +49,23 @@ describe("SelfServeQuestionsStep", () => {
     expect(wrapper.find('[data-testid="self-serve-question-cards"]').exists()).toBe(false);
   });
 
-  it("keeps the question list visible and only locks the question being synced", () => {
+  it("keeps the question list visible and answer buttons enabled while loading in the background", async () => {
     const wrapper = mountWithApp(SelfServeQuestionsStep, {
       props: {
         ...baseProps,
         isLoading: true,
-        loadingQuestionId: 11,
-        loadingAnswerValue: true,
       },
     });
 
     expect(wrapper.find('[data-testid="self-serve-questions-inline-loading"]').exists()).toBe(true);
     expect(wrapper.find('[data-testid="self-serve-question-cards"]').exists()).toBe(true);
-    expect(wrapper.find('[data-testid="self-serve-question-11-yes"]').classes()).toContain("is-loading");
-    expect(wrapper.find('[data-testid="self-serve-question-11-no"]').classes()).not.toContain("is-loading");
-    expect(wrapper.find('[data-testid="self-serve-question-11-yes"]').attributes("disabled")).toBeDefined();
-    expect(wrapper.find('[data-testid="self-serve-question-11-no"]').attributes("disabled")).toBeDefined();
+
+    const yesButton = wrapper.get('[data-testid="self-serve-question-11-yes"]');
+    const noButton = wrapper.get('[data-testid="self-serve-question-11-no"]');
+    expect(yesButton.attributes("disabled")).toBeUndefined();
+    expect(noButton.attributes("disabled")).toBeUndefined();
+
+    await noButton.trigger("click");
+    expect(wrapper.emitted("answer-question")).toEqual([[11, false]]);
   });
 });
diff --git a/tests/unit/self-serve-studio-task-scope.spec.js b/tests/unit/self-serve-studio-task-scope.spec.js
index 9292fcd1..26136284 100644
--- a/tests/unit/self-serve-studio-task-scope.spec.js
+++ b/tests/unit/self-serve-studio-task-scope.spec.js
@@ -51,6 +51,21 @@ describe("self-serve studio task editing", () => {
     expect(source).toContain('@error="onSimulatorDynamicImageError"');
   });
 
+  it("renders task attachments in the flow nodes and simulator without saving them into draft tasks", () => {
+    const source = studioSource();
+
+    expect(source).toContain("const taskAttachmentList = (dataOrRaw) => {");
+    expect(source).toContain("const selectedTaskAttachments = computed(() => (");
+    expect(source).toContain("const uploadSelectedTaskAttachment = async (event) => {");
+    expect(source).toContain("const deleteSelectedTaskAttachment = async (attachment) => {");
+    expect(source).toContain('data-testid="studio-task-node-attachments"');
+    expect(source).toContain('data-testid="studio-task-attachment-manager"');
+    expect(source).toContain('data-testid="studio-task-attachment-upload"');
+    expect(source).toContain('class="studio-debug-attachment-list"');
+    expect(source).toContain('@click.stop="openTaskAttachment(attachment)"');
+    expect(source).toContain("delete data.attachments");
+  });
+
   it("renders machine type and dynamic image filters in the studio toolbar", () => {
     const source = studioSource();
 
diff --git a/tests/unit/self-serve-task-list.spec.js b/tests/unit/self-serve-task-list.spec.js
index e67f4767..650daeef 100644
--- a/tests/unit/self-serve-task-list.spec.js
+++ b/tests/unit/self-serve-task-list.spec.js
@@ -19,6 +19,10 @@ const BCheckboxStub = {
 
 describe("SelfServeTaskList", () => {
   it("emits task toggles and attachment downloads", async () => {
+    const attachments = [
+      { id: 101, content: { other: "instruction.pdf" } },
+      { id: 102, content: { other: "mirror.jpg" }, download_link: "https://cdn.example.test/mirror.jpg" },
+    ];
     const wrapper = mountWithApp(SelfServeTaskList, {
       props: {
         tasks: [
@@ -28,10 +32,7 @@ describe("SelfServeTaskList", () => {
             description: "Use the soft brush",
             services: ["MACHINE"],
             buttons: [1, 2],
-            attachments: [
-              { id: 101, content: { other: "instruction.pdf" } },
-              { id: 102, content: { other: "mirror.jpg" }, download_link: "https://cdn.example.test/mirror.jpg" },
-            ],
+            attachments,
           },
         ],
         completedTasks: {
@@ -56,8 +57,8 @@ describe("SelfServeTaskList", () => {
       [5, true],
     ]);
     expect(wrapper.emitted("download-attachment")).toEqual([
-      [5, 101],
-      [5, 102],
+      [5, 101, attachments[0]],
+      [5, 102, attachments[1]],
     ]);
     expect(wrapper.text()).not.toContain("MACHINE");
     expect(wrapper.text()).not.toContain("Button 1");
diff --git a/tests/unit/self-serve-try-modal.spec.js b/tests/unit/self-serve-try-modal.spec.js
index aa63b24a..9a277c67 100644
--- a/tests/unit/self-serve-try-modal.spec.js
+++ b/tests/unit/self-serve-try-modal.spec.js
@@ -6,6 +6,7 @@ const mocks = vi.hoisted(() => ({
   fetchSelfServeData: vi.fn(),
   syncVehicleAnswer: vi.fn(),
   clearVehicleAnswers: vi.fn(),
+  downloadAttachment: vi.fn(),
   swalFire: vi.fn(),
   getLanes: vi.fn(),
   getVehicleTypeOptions: vi.fn(),
@@ -78,6 +79,7 @@ vi.mock("@/composables/useSelfServeLogic", () => ({
     syncVehicleAnswer: mocks.syncVehicleAnswer,
     clearVehicleAnswers: mocks.clearVehicleAnswers,
     evaluateCondition: mocks.evaluateCondition,
+    downloadAttachment: mocks.downloadAttachment,
   }),
 }));
 
@@ -89,6 +91,7 @@ describe("SelfServeTryModal", () => {
     mocks.fetchSelfServeData.mockReset();
     mocks.syncVehicleAnswer.mockReset();
     mocks.clearVehicleAnswers.mockReset();
+    mocks.downloadAttachment.mockReset();
     mocks.swalFire.mockReset();
     mocks.getLanes.mockReset();
     mocks.getVehicleTypeOptions.mockReset();
@@ -146,6 +149,44 @@ describe("SelfServeTryModal", () => {
     expect(mocks.fetchSelfServeData).toHaveBeenCalledWith(9, 3, 3, "AB12345");
   });
 
+  it("passes simulator task attachment downloads to self-serve logic", async () => {
+    const attachment = {
+      id: 201,
+      content: { other: "manual.pdf" },
+      download_link: "https://cdn.example.test/manual.pdf",
+    };
+    mocks.activeTasks.value = [
+      {
+        id: 5,
+        task: "Prepare",
+        attachments: [attachment],
+      },
+    ];
+
+    const wrapper = mountWithApp(SelfServeTryModal, {
+      props: {
+        departmentId: 9,
+        laneId: 3,
+      },
+      global: {
+        stubs: {
+          SelfServeQuestionCards: true,
+          SelfServeTaskList: {
+            props: ["tasks"],
+            emits: ["download-attachment"],
+            template:
+              "<button data-testid='emit-task-download' @click=\"$emit('download-attachment', tasks[0].id, tasks[0].attachments[0].id, tasks[0].attachments[0])\">download</button>",
+          },
+        },
+      },
+    });
+
+    await flushPromises();
+    await wrapper.get("[data-testid='emit-task-download']").trigger("click");
+
+    expect(mocks.downloadAttachment).toHaveBeenCalledWith(5, 201, attachment);
+  });
+
   it("syncs answers with the selected vehicle type context", async () => {
     mocks.visibleQuestions.value = [{ id: 77, question: "Question 77" }];
     mocks.currentQuestion.value = null;
diff --git a/tests/unit/use-self-serve-logic.spec.js b/tests/unit/use-self-serve-logic.spec.js
index f9616c66..4cad43f4 100644
--- a/tests/unit/use-self-serve-logic.spec.js
+++ b/tests/unit/use-self-serve-logic.spec.js
@@ -46,16 +46,21 @@ describe("useSelfServeLogic", () => {
     mocks.attachmentsList.mockReset();
     mocks.attachmentsDownload.mockReset();
     mocks.request.mockReset();
+    vi.unstubAllGlobals();
   });
 
-  it("hydrates preview and summary data, including attachment download links", async () => {
+  it("uses task attachments supplied by preview and summary data", async () => {
+    const taskAttachments = [
+      { id: 201, content: { other: "manual.pdf" }, download_link: "https://cdn.example.test/manual.pdf" },
+      { id: 202, content: { other: "photo.jpg" }, download_link: "https://cdn.example.test/photo.jpg" },
+    ];
     mocks.previewAllowed.mockResolvedValue({
       allowed: true,
       machine_available: true,
       lane: { id: 7, name: "Lane 7" },
       session: { id: 91, status: "IN_PROGRESS" },
       questions: [{ id: 1, question: "Machine wash?", answer: null, order_priority: 1 }],
-      tasks: [{ id: 5, task: "Prepare", order_priority: 1, services: ["MACHINE"] }],
+      tasks: [{ id: 5, task: "Prepare", order_priority: 1, services: ["MACHINE"], attachments: taskAttachments }],
       conditions: [],
       rules: [],
       allowed_services: ["MACHINE"],
@@ -64,20 +69,9 @@ describe("useSelfServeLogic", () => {
       session: { id: 91, status: "IN_PROGRESS" },
       lane: { id: 7, name: "Lane 7" },
       questions: [{ id: 1, question: "Machine wash?", answer: true, order_priority: 1 }],
-      tasks: [{ id: 5, task: "Prepare", order_priority: 1, services: ["MACHINE"] }],
+      tasks: [{ id: 5, task: "Prepare", order_priority: 1, services: ["MACHINE"], attachments: taskAttachments }],
       events: [{ id: 1, type: "STARTED", created_at: "2026-01-01T00:00:00.000Z" }],
     });
-    mocks.attachmentsList.mockResolvedValue({
-      data: [
-        { id: 201, content: { other: "manual.pdf" } },
-        { id: 202, content: { other: "photo.jpg" } },
-      ],
-    });
-    mocks.attachmentsDownload.mockImplementation(async (_taskId, attachmentId) =>
-      attachmentId === 202
-        ? { download_link: "https://cdn.example.test/photo.jpg" }
-        : { download_link: "https://cdn.example.test/manual.pdf" }
-    );
 
     const logic = useSelfServeLogic();
 
@@ -89,12 +83,29 @@ describe("useSelfServeLogic", () => {
     expect(logic.machineAvailable.value).toBe(true);
     expect(logic.answers.value[1]).toBe(true);
     expect(logic.events.value).toHaveLength(1);
+    expect(mocks.attachmentsList).not.toHaveBeenCalled();
+    expect(mocks.attachmentsDownload).not.toHaveBeenCalled();
     expect(logic.tasks.value[0].attachments[1]).toMatchObject({
       id: 202,
       download_link: "https://cdn.example.test/photo.jpg",
     });
   });
 
+  it("opens an existing task attachment link without requesting a new download link", async () => {
+    const openSpy = vi.fn();
+    vi.stubGlobal("window", { open: openSpy });
+    const logic = useSelfServeLogic();
+
+    await logic.downloadAttachment(5, 202, {
+      id: 202,
+      download_link: "https://cdn.example.test/photo.jpg",
+      content: { other: "photo.jpg" },
+    });
+
+    expect(mocks.attachmentsDownload).not.toHaveBeenCalled();
+    expect(openSpy).toHaveBeenCalledWith("https://cdn.example.test/photo.jpg", "_blank", "noopener");
+  });
+
   it("falls back to lane/reg summary when session summary does not include questions", async () => {
     mocks.previewAllowed.mockResolvedValue({
       allowed: true,
diff --git a/vite.config.js b/vite.config.js
index 485d1502..afee72ea 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -203,6 +203,7 @@ export default defineConfig(({ mode }) => {
             'import.meta.env.VITE_BUILD_DATE': JSON.stringify(new Date().toISOString()),
             'import.meta.env.VITE_APP_VERSION': JSON.stringify(process.env.APP_VERSION || '0.0.0'),
             'import.meta.env.VITE_COMMIT_HASH': JSON.stringify(commit),
+            'import.meta.env.VITE_IS_PLAYWRIGHT': JSON.stringify(isPlaywrightRuntime),
             // Tip: import.meta.env.DEV/PROD are available at runtime
             'import.meta.env.VITE_IS_DEV': JSON.stringify(!isProd),
         },