M54: harden operations and demo resilience

frontend/e2e/demo-guide.spec.ts

@@ -74,6 +74,7 @@ test("the collapsed chip has its own close control, independent of reopening it"
   await page.getByRole("button", { name: "Sluiten" }).click();
   await expect(chip).toBeHidden();
   await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeHidden();
+  await expect(page.locator(".demo-guide-trigger")).toBeFocused();
 });
 
 test("demo guide progress persists across navigation and the trigger shows it", async ({ page }) => {
@@ -106,6 +107,41 @@ test("restarting the demo from the guide resets data and returns to login", asyn
   await expect(page).toHaveURL(/\/login$/, { timeout: 10000 });
 });
 
+test("sidebar reset preserves guide progress on failure and clears it only after success", async ({ page }) => {
+  let resetShouldFail = true;
+  await page.route("**/api/v1/demo/reset", async (route) => {
+    if (resetShouldFail) {
+      await route.fulfill({
+        status: 503,
+        contentType: "application/json",
+        body: JSON.stringify({
+          error: { code: "TEST_UNAVAILABLE", message: "Injected reset failure", correlation_id: "reset-test" },
+        }),
+      });
+      return;
+    }
+    await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify({ status: "reset" }) });
+  });
+
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Start begeleide demo" }).click();
+  await page.getByRole("button", { name: "Volgende" }).click();
+  await page.locator(".demo-guide-trigger").click();
+  await expect(page.locator(".demo-guide-trigger")).toContainText("1/8");
+
+  await page.getByRole("button", { name: "Demogegevens herstellen" }).click();
+  await page.getByRole("button", { name: "Ja, herstellen" }).click();
+  await expect(page.getByText("Demogegevens konden niet hersteld worden.")).toBeVisible();
+  await expect(page.locator(".demo-guide-trigger")).toContainText("1/8");
+
+  resetShouldFail = false;
+  await page.getByRole("button", { name: "Demogegevens herstellen" }).click();
+  await page.getByRole("button", { name: "Ja, herstellen" }).click();
+  await expect(page).toHaveURL(/\/login$/);
+  await page.getByRole("button", { name: "Verken als Operationsmanager" }).click();
+  await expect(page.locator(".demo-guide-trigger")).toContainText("0/8");
+});
+
 test("wide desktop viewport docks the guide as a rail that never collapses to a chip", async ({ page }) => {
   await page.setViewportSize({ width: 1600, height: 1000 });
   await page.goto("/login");
@@ -147,6 +183,52 @@ test("Escape collapses the standard-tier panel, then closes it", async ({ page }
 
   await page.keyboard.press("Escape");
   await expect(page.getByRole("button", { name: /Demo-gids · stap/ })).toBeHidden();
+  await expect(page.locator(".demo-guide-trigger")).toBeFocused();
+});
+
+test("closing the guide cancels a delayed target lookup and restores trigger focus", async ({ page }) => {
+  await page.setViewportSize({ width: 1600, height: 1000 });
+  let releaseKnowledgeChunk = () => undefined;
+  const knowledgeChunkGate = new Promise<void>((resolve) => {
+    releaseKnowledgeChunk = resolve;
+  });
+  let markKnowledgeChunkRequested = () => undefined;
+  const knowledgeChunkRequested = new Promise<void>((resolve) => {
+    markKnowledgeChunkRequested = resolve;
+  });
+
+  await page.route(
+    /\/(?:assets\/Knowledge-[^/?]+\.js|src\/pages\/Knowledge\.tsx)(?:\?.*)?$/,
+    async (route) => {
+      markKnowledgeChunkRequested();
+      await knowledgeChunkGate;
+      await route.continue();
+    },
+  );
+
+  try {
+    await page.goto("/login");
+    await page.getByRole("button", { name: "Start begeleide demo" }).click();
+    await page.getByRole("button", { name: /6\. Stel een vraag/ }).click();
+    await page.getByRole("button", { name: "Ga naar deze stap" }).click();
+    await knowledgeChunkRequested;
+
+    await page
+      .locator(".demo-guide-panel.is-wide")
+      .getByRole("button", { name: "Sluiten" })
+      .click();
+    await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeHidden();
+    await expect(page.locator(".demo-guide-trigger")).toBeFocused();
+
+    releaseKnowledgeChunk();
+    const target = page.locator("#ask-heading");
+    await expect(target).toBeVisible();
+    await page.waitForTimeout(150);
+    await expect(target).not.toBeFocused();
+    await expect(target).not.toHaveClass(/demo-guide-highlight/);
+  } finally {
+    releaseKnowledgeChunk();
+  }
 });
 
 test("going to a step scrolls, focuses and highlights the on-page target", async ({ page }) => {
@@ -161,3 +243,18 @@ test("going to a step scrolls, focuses and highlights the on-page target", async
   await expect(target).toBeFocused();
   await expect(target).toHaveClass(/demo-guide-highlight/);
 });
+
+test("going to a guide target on the already-active route still focuses and highlights it", async ({ page }) => {
+  await page.setViewportSize({ width: 1600, height: 1000 });
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Start begeleide demo" }).click();
+  await page.getByRole("button", { name: /8\. Bekijk wat echt is/ }).click();
+  await page.goto("/about");
+  await page.getByRole("button", { name: /^Demo-gids/ }).first().click();
+
+  await page.getByRole("button", { name: "Ga naar deze stap" }).click();
+
+  const target = page.locator(".engineering-hero");
+  await expect(target).toBeFocused();
+  await expect(target).toHaveClass(/demo-guide-highlight/);
+});