From 638c17294bb2deb54476cdbed13b824dd836e92c Mon Sep 17 00:00:00 2001
From: Proxicon <konradtech@gmail.com>
Date: Sat, 19 Sep 2026 17:57:38 +0200
Subject: [PATCH 1/2] fix(ai-chat): emphasize pending approvals (#66)

---
 .../Shared/AiAssistantTurnActivity.razor      | 45 +++++++++--
 .../Shared/AiAssistantTurnActivity.razor.css  | 11 ++-
 tests/ux/ai-assistant-chat.spec.ts            | 79 +++++++++++++++++--
 tests/ux/ai-assistant-fixture-api.mjs         |  7 ++
 4 files changed, 128 insertions(+), 14 deletions(-)

diff --git a/src/HelpDesk.NewWeb/Components/Shared/AiAssistantTurnActivity.razor b/src/HelpDesk.NewWeb/Components/Shared/AiAssistantTurnActivity.razor
index a6cda452..f1cb5d1d 100644
--- a/src/HelpDesk.NewWeb/Components/Shared/AiAssistantTurnActivity.razor
+++ b/src/HelpDesk.NewWeb/Components/Shared/AiAssistantTurnActivity.razor
@@ -6,6 +6,13 @@
     <button type="button" class="activity-heading" aria-expanded="@expanded.ToString().ToLowerInvariant()" @onclick="Toggle">
         <MudIcon Icon="@(expanded ? Icons.Material.Filled.ExpandLess : Icons.Material.Filled.ExpandMore)" />
         <span>AiAssistant activity · @Turn.Summary</span>
+        @if (HasPendingApproval)
+        {
+            <span class="approval-heading-status">
+                <MudIcon Icon="@Icons.Material.Filled.WarningAmber" Color="Color.Warning" Size="Size.Small" />
+                <span>Approval required</span>
+            </span>
+        }
         @if (!Turn.Completed && State == ChatState.Processing)
         {
             <MudProgressCircular Indeterminate="true" Size="Size.Small" />
@@ -26,14 +33,31 @@
         }
         @foreach (var item in Turn.Activity)
         {
-            <div class="activity-interaction">
+            var isPendingApproval = IsPendingApproval(item);
+            <div class="@(isPendingApproval ? "activity-interaction approval-callout" : "activity-interaction")"
+                 data-testid="@(isPendingApproval ? "ai-assistant-approval" : null)">
+                @if (isPendingApproval)
+                {
+                    <div class="approval-status" role="status" aria-live="polite">
+                        <MudIcon Icon="@Icons.Material.Filled.WarningAmber" Color="Color.Warning" />
+                        <MudText Typo="Typo.subtitle2">Approval required</MudText>
+                    </div>
+                }
                 <MudText Style="white-space: pre-wrap; overflow-wrap: anywhere">@item.Text</MudText>
-                @if (item.Type == "approval_request" && State == ChatState.AwaitingApproval && !Turn.Activity.Any(x => x.Type == "approval_response" && x.CallId == item.CallId))
+                @if (isPendingApproval)
                 {
-                    @foreach (var option in JsonSerializer.Deserialize<List<ChatOption>>(item.OptionsJson ?? "[]") ?? [])
-                    {
-                        <MudButton Disabled="Busy" OnClick="@(() => Approval.InvokeAsync((item.CallId!, option.Key)))">@option.Label</MudButton>
-                    }
+                    <div class="approval-actions">
+                        @foreach (var option in JsonSerializer.Deserialize<List<ChatOption>>(item.OptionsJson ?? "[]") ?? [])
+                        {
+                            <MudButton Class="approval-action"
+                                       Color="@ApprovalColor(option.Key)"
+                                       Variant="@ApprovalVariant(option.Key)"
+                                       StartIcon="@ApprovalIcon(option.Key)"
+                                       Disabled="Busy"
+                                       data-approval-key="@option.Key"
+                                       OnClick="@(() => Approval.InvokeAsync((item.CallId!, option.Key)))">@option.Label</MudButton>
+                        }
+                    </div>
                 }
             </div>
         }
@@ -53,6 +77,15 @@
         completed = Turn.Completed; initialized = true;
     }
     private void Toggle() => expanded = !expanded;
+    private bool HasPendingApproval => Turn.Activity.Any(IsPendingApproval);
+    private bool IsPendingApproval(AiAssistantChatEvent item) => item.Type == "approval_request"
+        && State == ChatState.AwaitingApproval
+        && !Turn.Activity.Any(x => x.Type == "approval_response" && x.CallId == item.CallId);
+    private static Color ApprovalColor(string key) => key == "deny" ? Color.Error : Color.Primary;
+    private static Variant ApprovalVariant(string key) => key == "deny" ? Variant.Outlined : Variant.Filled;
+    private static string ApprovalIcon(string key) => key == "deny"
+        ? Icons.Material.Filled.Block
+        : Icons.Material.Filled.CheckCircle;
     private static string Icon(ChatActivityMetadata? metadata) => metadata?.Outcome == "failed" ? Icons.Material.Filled.ErrorOutline
         : metadata?.ToolKind switch
         {
diff --git a/src/HelpDesk.NewWeb/Components/Shared/AiAssistantTurnActivity.razor.css b/src/HelpDesk.NewWeb/Components/Shared/AiAssistantTurnActivity.razor.css
index ff0f2efb..09e3299c 100644
--- a/src/HelpDesk.NewWeb/Components/Shared/AiAssistantTurnActivity.razor.css
+++ b/src/HelpDesk.NewWeb/Components/Shared/AiAssistantTurnActivity.razor.css
@@ -1,7 +1,16 @@
 .ai-assistant-activity { margin-inline-start: 1rem; border-inline-start: 2px solid var(--mud-palette-divider); padding: .5rem; min-width: 0; }
 .activity-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; text-align: start; width: 100%; background: transparent; color: inherit; border: 0; cursor: pointer; padding: .5rem; }
 .activity-heading:focus-visible { outline: 2px solid var(--mud-palette-primary); }
+.approval-heading-status { display: inline-flex; align-items: center; gap: .25rem; color: var(--mud-palette-warning); font-size: .875rem; font-weight: 600; }
 .activity-row { display: flex; align-items: center; gap: .5rem; padding: .5rem; flex-wrap: wrap; font-size: .875rem; }
 .activity-name { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
 .activity-interaction { padding: .5rem; }
-@media (max-width: 600px) { .ai-assistant-activity { margin-inline-start: .25rem; } }
+.approval-callout { display: grid; gap: .75rem; margin-block: .5rem; border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-divider)); border-inline-start-width: 4px; border-radius: var(--mud-default-borderradius); background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface)); }
+.approval-status { display: flex; align-items: center; gap: .5rem; color: var(--mud-palette-warning); }
+.approval-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
+.approval-actions ::deep .approval-action { min-height: 2.75rem; }
+@media (max-width: 600px) {
+    .ai-assistant-activity { margin-inline-start: .25rem; }
+    .approval-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
+    .approval-actions ::deep .approval-action { width: 100%; }
+}
diff --git a/tests/ux/ai-assistant-chat.spec.ts b/tests/ux/ai-assistant-chat.spec.ts
index 885689f6..1a1ac381 100644
--- a/tests/ux/ai-assistant-chat.spec.ts
+++ b/tests/ux/ai-assistant-chat.spec.ts
@@ -4,13 +4,25 @@ import { assertNoHorizontalOverflow, selectTheme } from './auth';
 // Requires the loopback fixture API and real feature NewWeb host. No live ticket mutations.
 test.beforeEach(async ({ page, request }) => {
   await request.get('http://127.0.0.1:18299/fixture/reset?mode=completed');
-  await page.goto('/auth/development', { waitUntil: 'networkidle' });
+  await page.goto('/auth/development', { waitUntil: 'domcontentloaded' });
 });
 
 async function openChat(page) {
-  await page.goto('/incidents/ux-chat', { waitUntil: 'networkidle' });
-  await page.getByRole('tab', { name: /AI Assistant/ }).click();
-  await expect(page.getByTestId('ai-assistant-composer')).toBeVisible();
+  await page.goto('/incidents/ux-chat', { waitUntil: 'domcontentloaded' });
+  const assistantTab = page.getByRole('tab', { name: /AI Assistant/ });
+  const composer = page.getByTestId('ai-assistant-composer');
+
+  for (let attempt = 0; attempt < 3; attempt++) {
+    await assistantTab.click();
+    try {
+      await expect(composer).toBeVisible({ timeout: 2_000 });
+      return;
+    } catch {
+      // Ticket tabs can be recreated while their saved active panel is restored.
+    }
+  }
+
+  await expect(composer).toBeVisible();
 }
 
 for (const theme of ['Light', 'Dark'] as const) {
@@ -58,7 +70,41 @@ for (const mode of ['empty', 'processing', 'approval', 'failed', 'archived']) {
       await expect(page.getByRole('button', { name: 'Stop waiting' })).toBeVisible();
       await expect(page.getByText('will not resend this request automatically', { exact: false })).toBeVisible();
     }
-    if (mode === 'approval') await expect(page.getByRole('button', { name: 'Allow once' })).toBeVisible();
+    if (mode === 'approval') {
+      await selectTheme(page, 'Light');
+      const activity = page.getByTestId('ai-assistant-activity');
+      const approval = page.getByTestId('ai-assistant-approval');
+      const allow = approval.getByRole('button', { name: 'Allow once' });
+      const deny = approval.getByRole('button', { name: 'Deny', exact: true });
+      await expect(activity.getByRole('button').first()).toContainText('Approval required');
+      await expect(approval.getByRole('status')).toHaveText('Approval required');
+      await expect(allow).toBeEnabled();
+      await expect(deny).toBeEnabled();
+      await expect(allow).toHaveClass(/mud-button-filled/);
+      await expect(deny).toHaveClass(/mud-button-outlined/);
+      await expect(allow).toHaveAttribute('data-approval-key', 'approve_once');
+      await expect(deny).toHaveAttribute('data-approval-key', 'deny');
+      const approvalStyles = await approval.evaluate(element => {
+        const callout = getComputedStyle(element);
+        const allow = element.querySelector('[data-approval-key="approve_once"]')!;
+        const deny = element.querySelector('[data-approval-key="deny"]')!;
+        const allowStyle = getComputedStyle(allow);
+        const denyStyle = getComputedStyle(deny);
+        return {
+          background: callout.backgroundColor,
+          borderLeftWidth: callout.borderLeftWidth,
+          allowBackground: allowStyle.backgroundColor,
+          denyBorderWidth: denyStyle.borderTopWidth,
+          denyColor: denyStyle.color
+        };
+      });
+      expect(approvalStyles.borderLeftWidth).toBe('4px');
+      expect(approvalStyles.background).not.toBe('rgba(0, 0, 0, 0)');
+      expect(approvalStyles.allowBackground).not.toBe('rgba(0, 0, 0, 0)');
+      expect(approvalStyles.denyBorderWidth).not.toBe('0px');
+      expect(approvalStyles.denyColor).not.toBe(approvalStyles.allowBackground);
+      await testInfo.attach('approval-presentation-styles', { body: JSON.stringify(approvalStyles), contentType: 'application/json' });
+    }
     if (mode === 'archived') {
       await expect(page.getByText('Archived transcript', { exact: false })).toBeVisible();
       await expect(page.getByRole('textbox', { name: 'Message AiAssistant' })).toBeDisabled();
@@ -68,6 +114,23 @@ for (const mode of ['empty', 'processing', 'approval', 'failed', 'archived']) {
   });
 }
 
+test('dark desktop approval callout remains visually distinct', async ({ page, request }, testInfo) => {
+  await request.get('http://127.0.0.1:18299/fixture/reset?mode=approval');
+  await openChat(page);
+  await selectTheme(page, 'Dark');
+  await page.setViewportSize({ width: 1440, height: 1000 });
+  const approval = page.getByTestId('ai-assistant-approval');
+  await expect(approval.getByRole('status')).toHaveText('Approval required');
+  const styles = await approval.evaluate(element => {
+    const style = getComputedStyle(element);
+    return { background: style.backgroundColor, borderLeftWidth: style.borderLeftWidth };
+  });
+  expect(styles.borderLeftWidth).toBe('4px');
+  expect(styles.background).not.toBe('rgba(0, 0, 0, 0)');
+  await assertNoHorizontalOverflow(page);
+  await page.screenshot({ path: testInfo.outputPath('dark-desktop-approval.png'), fullPage: true });
+});
+
 test('stop waiting shows authoritative uncertain-delivery recovery controls', async ({ page, request }) => {
   await request.get('http://127.0.0.1:18299/fixture/reset?mode=processing');
   await openChat(page);
@@ -126,8 +189,10 @@ test('mobile dark approval controls and bounded growing composer', async ({ page
   await openChat(page);
   await selectTheme(page, 'Dark');
   await page.setViewportSize({ width: 390, height: 844 });
-  await expect(page.getByRole('button', { name: 'Allow once' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Deny', exact: true })).toBeVisible();
+  const approval = page.getByTestId('ai-assistant-approval');
+  await expect(approval.getByRole('status')).toHaveText('Approval required');
+  await expect(approval.getByRole('button', { name: 'Allow once' })).toBeVisible();
+  await expect(approval.getByRole('button', { name: 'Deny', exact: true })).toBeVisible();
   await assertNoHorizontalOverflow(page);
   await page.screenshot({ path: testInfo.outputPath('mobile-dark-approval.png'), fullPage: true });
   await request.get('http://127.0.0.1:18299/fixture/reset?mode=empty');
diff --git a/tests/ux/ai-assistant-fixture-api.mjs b/tests/ux/ai-assistant-fixture-api.mjs
index 6c5bcb81..01e790e9 100644
--- a/tests/ux/ai-assistant-fixture-api.mjs
+++ b/tests/ux/ai-assistant-fixture-api.mjs
@@ -53,6 +53,12 @@ http.createServer(async (req, res) => {
     const encode = value => Buffer.from(JSON.stringify(value)).toString('base64url');
     return reply({ token: `${encode({ alg: 'none' })}.${encode({ sub: actor, auth_mode: 'development', preferred_username: 'UX Test Operator', roles: ['HelpdeskAdmin', 'Incident.User'], exp: Math.floor(Date.now()/1000)+3600 })}.fixture` });
   }
+  if (url.pathname === '/api/v1/auth/me') return reply({
+    isAuthenticated: true, name: 'UX Test Operator', email: 'ux@example.test', userId: actor,
+    primaryOrganizationId: 'ux-org', primaryOrganizationName: 'UX Organization', customerId: null,
+    isHelpdeskAdmin: true, roleBundles: ['HelpdeskAdmin'], permissions: [],
+    allowedOrganizationIds: ['ux-org'], managedOrganizationIds: ['ux-org'], scopedPermissionGrants: []
+  });
   if (url.pathname === '/api/v1/branding') return reply({ applicationName: 'RatelDesk', faviconUrl: '/favicon.ico' });
   if (url.pathname.endsWith('/chat/stream')) {
     res.writeHead(200, { 'Content-Type': 'text/event-stream' });
@@ -60,6 +66,7 @@ http.createServer(async (req, res) => {
     res.write(`event: state\ndata: ${state}\n\n`);
     streams.add(res); req.on('close', () => streams.delete(res)); return;
   }
+  if (url.pathname.endsWith('/chat-capabilities')) return reply({ enabled: true, reason: null });
   if (url.pathname.endsWith('/chat/history')) return reply([{ conversationId: conversation, state, lastActivityUtc: new Date().toISOString(), createdByUserId: actor }]);
   if (url.pathname.endsWith('/chat/stop-waiting')) {
     state = 3; event('delivery_unknown', 'Operator stopped waiting locally.');

From 329cda10a3bbad302dfe641b9aa36938e0b78b2c Mon Sep 17 00:00:00 2001
From: Proxicon <konradtech@gmail.com>
Date: Sat, 19 Sep 2026 18:32:23 +0200
Subject: [PATCH 2/2] test(ai-chat): gate approval presentation coverage

---
 .github/workflows/pull-request-validation.yml |  5 +++
 playwright.ai-assistant.config.ts             |  7 +++-
 tests/ux/ai-assistant-chat.spec.ts            | 34 +++++++------------
 tests/ux/ai-assistant-fixture-api.mjs         |  8 ++---
 tests/ux/auth.ts                              |  6 ++--
 5 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/.github/workflows/pull-request-validation.yml b/.github/workflows/pull-request-validation.yml
index 01be71ad..bc901da1 100644
--- a/.github/workflows/pull-request-validation.yml
+++ b/.github/workflows/pull-request-validation.yml
@@ -130,6 +130,11 @@ jobs:
           HELPDESK_E2E_AUTH_MODE: development
         run: tools/ci/run-ux-local.sh
 
+      - name: Run AI Assistant Playwright validation
+        env:
+          HELPDESK_AI_ASSISTANT_CONFIGURATION: Release
+        run: npm run test:ux:ai-assistant
+
       - name: Upload Playwright reports and failure artifacts
         if: always()
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
diff --git a/playwright.ai-assistant.config.ts b/playwright.ai-assistant.config.ts
index 5f5d7598..5cf535a0 100644
--- a/playwright.ai-assistant.config.ts
+++ b/playwright.ai-assistant.config.ts
@@ -1,6 +1,10 @@
 import { defineConfig } from '@playwright/test';
 import base from './playwright.config';
 
+const newWebCommand = process.env.HELPDESK_AI_ASSISTANT_CONFIGURATION === 'Release'
+  ? 'dotnet bin/Release/net10.0/HelpDesk.NewWeb.dll'
+  : 'dotnet run --no-build --no-launch-profile';
+
 export default defineConfig(base, {
   testMatch: '**/ai-assistant-chat.spec.ts',
   testIgnore: [],
@@ -9,7 +13,8 @@ export default defineConfig(base, {
   webServer: [
     { command: 'node tests/ux/ai-assistant-fixture-api.mjs', url: 'http://127.0.0.1:18299/fixture/health', reuseExistingServer: !process.env.CI },
     {
-      command: 'dotnet run --project src/HelpDesk.NewWeb --no-build --no-launch-profile',
+      command: newWebCommand,
+      cwd: 'src/HelpDesk.NewWeb',
       url: 'https://127.0.0.1:5158/health', ignoreHTTPSErrors: true, timeout: 120_000,
       reuseExistingServer: !process.env.CI,
       env: {
diff --git a/tests/ux/ai-assistant-chat.spec.ts b/tests/ux/ai-assistant-chat.spec.ts
index 1a1ac381..8e3212da 100644
--- a/tests/ux/ai-assistant-chat.spec.ts
+++ b/tests/ux/ai-assistant-chat.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { assertNoHorizontalOverflow, selectTheme } from './auth';
+import { assertNoHorizontalOverflow } from './auth';
 
 // Requires the loopback fixture API and real feature NewWeb host. No live ticket mutations.
 test.beforeEach(async ({ page, request }) => {
@@ -7,29 +7,22 @@ test.beforeEach(async ({ page, request }) => {
   await page.goto('/auth/development', { waitUntil: 'domcontentloaded' });
 });
 
-async function openChat(page) {
+async function openChat(page, theme: 'Light' | 'Dark' = 'Light') {
+  await page.addInitScript((selectedTheme) => {
+    localStorage.setItem('ticket-tabs-index:incidents:ux-chat', '4');
+    localStorage.setItem('helpdesk.theme.preference', selectedTheme.toLowerCase());
+  }, theme);
   await page.goto('/incidents/ux-chat', { waitUntil: 'domcontentloaded' });
-  const assistantTab = page.getByRole('tab', { name: /AI Assistant/ });
   const composer = page.getByTestId('ai-assistant-composer');
-
-  for (let attempt = 0; attempt < 3; attempt++) {
-    await assistantTab.click();
-    try {
-      await expect(composer).toBeVisible({ timeout: 2_000 });
-      return;
-    } catch {
-      // Ticket tabs can be recreated while their saved active panel is restored.
-    }
-  }
-
+  await expect(page.getByRole('tab', { name: /AI Assistant/ })).toHaveAttribute('aria-selected', 'true');
   await expect(composer).toBeVisible();
+  await expect.poll(() => page.evaluate(() => document.documentElement.dataset.helpdeskTheme)).toBe(theme.toLowerCase());
 }
 
 for (const theme of ['Light', 'Dark'] as const) {
   for (const mobile of [false, true]) {
     test(`${theme} ${mobile ? 'mobile' : 'desktop'} completed, expand and composer boundary`, async ({ page }, testInfo) => {
-      await openChat(page);
-      await selectTheme(page, theme);
+      await openChat(page, theme);
       await page.setViewportSize(mobile ? { width: 390, height: 844 } : { width: 1440, height: 1000 });
       const heading = page.getByTestId('ai-assistant-activity').getByRole('button');
       await expect(heading).toHaveAttribute('aria-expanded', 'false');
@@ -71,7 +64,6 @@ for (const mode of ['empty', 'processing', 'approval', 'failed', 'archived']) {
       await expect(page.getByText('will not resend this request automatically', { exact: false })).toBeVisible();
     }
     if (mode === 'approval') {
-      await selectTheme(page, 'Light');
       const activity = page.getByTestId('ai-assistant-activity');
       const approval = page.getByTestId('ai-assistant-approval');
       const allow = approval.getByRole('button', { name: 'Allow once' });
@@ -116,8 +108,7 @@ for (const mode of ['empty', 'processing', 'approval', 'failed', 'archived']) {
 
 test('dark desktop approval callout remains visually distinct', async ({ page, request }, testInfo) => {
   await request.get('http://127.0.0.1:18299/fixture/reset?mode=approval');
-  await openChat(page);
-  await selectTheme(page, 'Dark');
+  await openChat(page, 'Dark');
   await page.setViewportSize({ width: 1440, height: 1000 });
   const approval = page.getByTestId('ai-assistant-approval');
   await expect(approval.getByRole('status')).toHaveText('Approval required');
@@ -186,8 +177,7 @@ test('live draft replacement, automatic completion collapse and duplicate replay
 
 test('mobile dark approval controls and bounded growing composer', async ({ page, request }, testInfo) => {
   await request.get('http://127.0.0.1:18299/fixture/reset?mode=approval');
-  await openChat(page);
-  await selectTheme(page, 'Dark');
+  await openChat(page, 'Dark');
   await page.setViewportSize({ width: 390, height: 844 });
   const approval = page.getByTestId('ai-assistant-approval');
   await expect(approval.getByRole('status')).toHaveText('Approval required');
@@ -196,7 +186,7 @@ test('mobile dark approval controls and bounded growing composer', async ({ page
   await assertNoHorizontalOverflow(page);
   await page.screenshot({ path: testInfo.outputPath('mobile-dark-approval.png'), fullPage: true });
   await request.get('http://127.0.0.1:18299/fixture/reset?mode=empty');
-  await openChat(page);
+  await openChat(page, 'Dark');
   const input = page.getByRole('textbox', { name: 'Message AiAssistant' });
   await input.fill(Array.from({ length: 30 }, (_, i) => `Line ${i}`).join('\n'));
   await expect.poll(() => input.evaluate(e => e.scrollHeight > e.clientHeight)).toBe(true);
diff --git a/tests/ux/ai-assistant-fixture-api.mjs b/tests/ux/ai-assistant-fixture-api.mjs
index 01e790e9..06847b62 100644
--- a/tests/ux/ai-assistant-fixture-api.mjs
+++ b/tests/ux/ai-assistant-fixture-api.mjs
@@ -54,10 +54,10 @@ http.createServer(async (req, res) => {
     return reply({ token: `${encode({ alg: 'none' })}.${encode({ sub: actor, auth_mode: 'development', preferred_username: 'UX Test Operator', roles: ['HelpdeskAdmin', 'Incident.User'], exp: Math.floor(Date.now()/1000)+3600 })}.fixture` });
   }
   if (url.pathname === '/api/v1/auth/me') return reply({
-    isAuthenticated: true, name: 'UX Test Operator', email: 'ux@example.test', userId: actor,
-    primaryOrganizationId: 'ux-org', primaryOrganizationName: 'UX Organization', customerId: null,
-    isHelpdeskAdmin: true, roleBundles: ['HelpdeskAdmin'], permissions: [],
-    allowedOrganizationIds: ['ux-org'], managedOrganizationIds: ['ux-org'], scopedPermissionGrants: []
+    isAuthenticated: true, name: 'UX Test Operator', email: 'UX Test Operator', userId: actor,
+    primaryOrganizationId: null, primaryOrganizationName: null, customerId: null,
+    isHelpdeskAdmin: true, roleBundles: ['HelpdeskAdmin', 'Incident.User'], permissions: ['HelpdeskAdmin', 'Incident.User'],
+    allowedOrganizationIds: [], managedOrganizationIds: [], scopedPermissionGrants: []
   });
   if (url.pathname === '/api/v1/branding') return reply({ applicationName: 'RatelDesk', faviconUrl: '/favicon.ico' });
   if (url.pathname.endsWith('/chat/stream')) {
diff --git a/tests/ux/auth.ts b/tests/ux/auth.ts
index 48f563a2..4d0108e1 100644
--- a/tests/ux/auth.ts
+++ b/tests/ux/auth.ts
@@ -32,8 +32,10 @@ export async function clearThemeOverride(page: Page): Promise<void> {
 }
 
 export async function assertNoHorizontalOverflow(page: Page): Promise<void> {
-  const overflow = await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth);
-  expect(overflow, 'page should not require horizontal scrolling').toBeLessThanOrEqual(2);
+  await expect.poll(
+    () => page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth),
+    { message: 'page should not require horizontal scrolling' }
+  ).toBeLessThanOrEqual(2);
 }
 
 export async function selectTheme(page: Page, theme: 'System' | 'Light' | 'Dark'): Promise<void> {