sdlc-agent-4-enterprise-server 1.0.0

package/tests/e2e/admin-ui.e2e.test.ts

@@ -0,0 +1,703 @@
+/**
+ * E2E UI Tests - Admin Portal (Playwright)
+ * Tests browser interactions against http://localhost:48721/admin
+ * Server MUST be running before executing these tests.
+ *
+ * Run: npm run test:e2e-ui (or: npx playwright test)
+ */
+
+import { test, expect, type Page } from '@playwright/test';
+
+const BASE_URL = 'http://localhost:48721';
+const ADMIN_URL = `${BASE_URL}/admin`;
+const ADMIN_USERNAME = 'admin';
+const ADMIN_PASSWORD = 'admin';
+
+// Helper: login and store token
+async function login(page: Page): Promise<void> {
+  await page.goto(ADMIN_URL);
+  await page.evaluate(() => localStorage.clear());
+  await page.goto(ADMIN_URL);
+  await page.waitForSelector('.login-box', { timeout: 10000 });
+  await page.fill('input[placeholder="Username"]', ADMIN_USERNAME);
+  await page.fill('input[placeholder="Password"]', ADMIN_PASSWORD);
+  await page.click('button:has-text("Login")');
+  await page.waitForSelector('.nav-item', { timeout: 10000 });await page.waitForTimeout(1000);
+}
+
+// ============================================================
+// 1. Login Page
+// ============================================================
+
+test.describe('Login', () => {
+  test('should show login form', async ({ page }) => {
+    await page.goto(ADMIN_URL);
+    await expect(page.locator('.login-box')).toBeVisible();
+    await expect(page.locator('.login-box h2')).toHaveText('Admin Portal');
+    await expect(page.locator('input[placeholder="Username"]')).toBeVisible();
+    await expect(page.locator('input[placeholder="Password"]')).toBeVisible();
+    await expect(page.locator('button:has-text("Login")')).toBeVisible();
+  });
+
+  test('should login with correct credentials and redirect to dashboard', async ({ page }) => {
+    await page.goto(ADMIN_URL);
+    await page.fill('input[placeholder="Username"]', ADMIN_USERNAME);
+    await page.fill('input[placeholder="Password"]', ADMIN_PASSWORD);
+    await page.click('button:has-text("Login")');
+    await expect(page.locator('.sidebar')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('text=Dashboard').first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('should show error message on wrong credentials', async ({ page }) => {
+    await page.goto(ADMIN_URL);
+    await page.fill('input[placeholder="Username"]', 'admin');
+    await page.fill('input[placeholder="Password"]', 'wrongpassword');
+    await page.click('button:has-text("Login")');
+    const errorDiv = page.locator('.login-box').locator('div', { hasText: 'Invalid credentials' });
+    await expect(errorDiv).toBeVisible({ timeout: 10000 });
+  });
+});
+
+// ============================================================
+// 2. Dashboard
+// ============================================================
+
+test.describe('Dashboard', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+  });
+
+  test('should display 5 stat cards', async ({ page }) => {
+    const cards = page.locator('.grid .card');
+    await expect(cards).toHaveCount(5);
+  });
+
+  test('should show stat card labels', async ({ page }) => {
+    await expect(page.locator('.card h3:has-text("KB Entries")')).toBeVisible();
+    await expect(page.locator('.card h3:has-text("Users")')).toBeVisible();
+    await expect(page.locator('.card h3:has-text("MCP Servers")')).toBeVisible();
+    await expect(page.locator('.card h3:has-text("Uptime")')).toBeVisible();
+    await expect(page.locator('.card h3:has-text("Memory")')).toBeVisible();
+  });
+
+  test('should load activity feed', async ({ page }) => {
+    const activityCard = page.locator('.card:has(h3:has-text("Recent Activity"))');
+    await expect(activityCard).toBeVisible();
+    const hasTable = await activityCard.locator('table').isVisible().catch(() => false);
+    const hasEmpty = await activityCard.locator('text=No recent activity').isVisible().catch(() => false);
+    expect(hasTable || hasEmpty).toBe(true);
+  });
+});
+
+// ============================================================
+// 3. Navigation - Sidebar (11 items)
+// ============================================================
+
+test.describe('Navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+  });
+
+  const navItems = [
+    'Dashboard',
+    'KB Management',
+    'MCP Servers',
+    'Search',
+    'RBAC',
+    'Users',
+    'Config',
+    'Audit',
+    'Analytics',
+    'Graph',
+    'KB Quality',
+    'KB Tags',
+    'Profile',
+  ];
+
+  for (const item of navItems) {
+    test(`clicking "${item}" should navigate and update header`, async ({ page }) => {
+      const navItem = page.locator(`.nav-item:has-text("${item}")`);
+      await navItem.click();
+      await page.waitForTimeout(300);
+      await expect(navItem).toBeVisible();
+      const header = page.locator('.header h2');
+      await expect(header).toBeVisible();
+    });
+  }
+});
+
+// ============================================================
+// 4. KB Management
+// ============================================================
+
+test.describe('KB Management', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("KB Management")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should display entries table', async ({ page }) => {
+    await expect(page.locator('table')).toBeVisible();
+    await expect(page.locator('th:has-text("Source")')).toBeVisible();
+  });
+
+  test('should have filter input that works', async ({ page }) => {
+    const filterInput = page.locator('.filter-input, input[placeholder="Filter entries..."]').first();
+    await expect(filterInput).toBeVisible();
+    await filterInput.fill('admin');
+    await page.waitForTimeout(300);
+    await expect(page.locator('table')).toBeVisible();
+  });
+
+  test('should have pagination controls', async ({ page }) => {
+    // Pagination shows only when totalPages > 1
+    await expect(page.locator('.main')).toBeVisible();
+  });
+});
+
+// ============================================================
+// 5. MCP Servers
+// ============================================================
+
+test.describe('MCP Servers', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("MCP Servers")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should display servers page', async ({ page }) => {
+    await expect(page.locator('.header h2')).toBeVisible();
+    await expect(page.locator('.main')).toBeVisible();
+  });
+
+  test('should expand server to show tool list', async ({ page }) => {
+    const expandBtn = page.locator('.expand-btn').first();
+    if (await expandBtn.isVisible().catch(() => false)) {
+      await expandBtn.click();
+      await page.waitForTimeout(300);
+    }
+    expect(true).toBe(true);
+  });
+
+  test('should filter tools when expanded', async ({ page }) => {
+    const expandBtn = page.locator('.expand-btn').first();
+    if (await expandBtn.isVisible().catch(() => false)) {
+      await expandBtn.click();
+      await page.waitForTimeout(300);
+      const filterInput = page.locator('.filter-input, input[placeholder*="filter" i]');
+      if (await filterInput.isVisible().catch(() => false)) {
+        await filterInput.fill('test');
+        await page.waitForTimeout(200);
+      }
+    }
+    expect(true).toBe(true);
+  });
+
+  test('should collapse expanded server', async ({ page }) => {
+    const expandBtn = page.locator('.expand-btn').first();
+    if (await expandBtn.isVisible().catch(() => false)) {
+      await expandBtn.click();
+      await page.waitForTimeout(200);
+      await expandBtn.click();
+      await page.waitForTimeout(200);
+    }
+    expect(true).toBe(true);
+  });
+});
+
+// ============================================================
+// 6. MCP Tool Toggle
+// ============================================================
+
+test.describe('MCP Tool Toggle', () => {
+  test('should toggle tool state', async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("MCP Servers")').click();
+    await page.waitForTimeout(500);
+
+    const expandBtn = page.locator('.expand-btn').first();
+    if (await expandBtn.isVisible().catch(() => false)) {
+      await expandBtn.click();
+      await page.waitForTimeout(300);
+
+      const toggle = page.locator('.toggle-switch input').first();
+      if (await toggle.isVisible().catch(() => false)) {
+        const wasChecked = await toggle.isChecked();
+        await toggle.click({ force: true });
+        await page.waitForTimeout(500);
+        const isChecked = await toggle.isChecked();
+        expect(isChecked).not.toBe(wasChecked);
+      }
+    }
+  });
+});
+
+// ============================================================
+// 7. RBAC
+// ============================================================
+
+test.describe('RBAC', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("RBAC")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should create a new group', async ({ page }) => {
+    const newGroupBtn = page.locator('button:has-text("New Group"), button:has-text("Add Group"), button:has-text("Create")');
+    if (await newGroupBtn.first().isVisible().catch(() => false)) {
+      await newGroupBtn.first().click();
+      await page.waitForTimeout(300);
+      const nameInput = page.locator('input[placeholder*="name" i], input[placeholder*="Group" i]').first();
+      if (await nameInput.isVisible().catch(() => false)) {
+        await nameInput.fill(`e2e-test-group-${Date.now()}`);
+      }
+      const permCheck = page.locator('.perm-check label, input[type="checkbox"]').first();
+      if (await permCheck.isVisible().catch(() => false)) {
+        await permCheck.click();
+      }
+      const saveBtn = page.locator('button:has-text("Save"), button:has-text("Create")').last();
+      if (await saveBtn.isVisible().catch(() => false)) {
+        await saveBtn.click();
+        await page.waitForTimeout(500);
+      }
+    }
+    expect(true).toBe(true);
+  });
+
+  test('should show groups list', async ({ page }) => {
+    await expect(page.locator('.main')).toBeVisible();
+    const content = page.locator('table, .card, .header');
+    await expect(content.first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('should expand group to show rules and change value', async ({ page }) => {
+    const expandBtn = page.locator('.expand-btn').first();
+    if (await expandBtn.isVisible().catch(() => false)) {
+      await expandBtn.click();
+      await page.waitForTimeout(300);
+      const ruleContent = page.locator('.rule-row, .sub-table, .expanded-row');
+      if (await ruleContent.first().isVisible().catch(() => false)) {
+        await expect(ruleContent.first()).toBeVisible();
+      }
+    }
+  });
+
+  test('should edit existing group and save', async ({ page }) => {
+    const editBtn = page.locator('button:has-text("Edit")').first();
+    if (await editBtn.isVisible().catch(() => false)) {
+      await editBtn.click();
+      await page.waitForTimeout(300);
+    }
+    await expect(page.locator('.main')).toBeVisible();
+  });
+});
+
+// ============================================================
+// 8. Users
+// ============================================================
+
+test.describe('Users', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("Users")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should display users list with admin', async ({ page }) => {
+    await expect(page.locator('table')).toBeVisible({ timeout: 5000 });
+    await expect(page.locator('.main').locator('text=admin').first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('should create user via UI', async ({ page }) => {
+    const createBtn = page.locator('button:has-text("New User"), button:has-text("Add User"), button:has-text("Create")').first();
+    if (await createBtn.isVisible().catch(() => false)) {
+      await createBtn.click();
+      await page.waitForTimeout(300);
+      const usernameInput = page.locator('input[placeholder*="username" i], input[placeholder*="Username"]').first();
+      if (await usernameInput.isVisible().catch(() => false)) {
+        await usernameInput.fill(`e2e-ui-${Date.now()}`);
+        const passInput = page.locator('input[type="password"], input[placeholder*="password" i]').first();
+        if (await passInput.isVisible().catch(() => false)) {
+          await passInput.fill('Test123!');
+        }
+        const saveBtn = page.locator('button:has-text("Save"), button:has-text("Create")').last();
+        if (await saveBtn.isVisible().catch(() => false)) {
+          await saveBtn.click();
+          await page.waitForTimeout(500);
+        }
+      }
+    }
+    expect(true).toBe(true);
+  });
+
+  test('should disable user and verify badge', async ({ page }) => {
+    const disableBtn = page.locator('button:has-text("Disable")').first();
+    if (await disableBtn.isVisible().catch(() => false)) {
+      await disableBtn.click();
+      await page.waitForTimeout(500);
+      const badge = page.locator('.badge:has-text("DISABLED"), .badge-red:has-text("DISABLED")');
+      if (await badge.isVisible().catch(() => false)) {
+        await expect(badge).toBeVisible();
+      }
+    }
+  });
+
+  test('should delete a user', async ({ page }) => {
+    const deleteBtn = page.locator('button:has-text("Delete")').first();
+    if (await deleteBtn.isVisible().catch(() => false)) {
+      await deleteBtn.click();
+      await page.waitForTimeout(500);
+      const confirmBtn = page.locator('button:has-text("Confirm"), button:has-text("Yes")');
+      if (await confirmBtn.isVisible().catch(() => false)) {
+        await confirmBtn.click();
+        await page.waitForTimeout(500);
+      }
+    }
+  });
+});
+
+// ============================================================
+// 9. Config
+// ============================================================
+
+test.describe('Config', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("Config")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should display config sections', async ({ page }) => {
+    await expect(page.locator('.main')).toBeVisible();
+    const hasConfig = await page.locator('.card, table').first().isVisible().catch(() => false);
+    expect(hasConfig).toBe(true);
+  });
+
+  test('should show restart required badge for port', async ({ page }) => {
+    const portCell = page.locator('td:has-text("48721"), text=48721');
+    if (await portCell.first().isVisible().catch(() => false)) {
+      await expect(portCell.first()).toBeVisible();
+    }
+    await expect(page.locator('.main')).toBeVisible();
+  });
+
+  test('should reset section to defaults', async ({ page }) => {
+    const resetBtn = page.locator('button:has-text("Reset"), button:has-text("reset")').first();
+    if (await resetBtn.isVisible().catch(() => false)) {
+      await resetBtn.click();
+      await page.waitForTimeout(500);
+    }
+    await expect(page.locator('.main')).toBeVisible();
+  });
+});
+
+// ============================================================
+// 10. Search
+// ============================================================
+
+test.describe('Search', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("Search")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should enter query and see results', async ({ page }) => {
+    const searchInput = page.locator('input[placeholder*="search" i], input[placeholder*="Search" i], input[type="search"]').first();
+    if (await searchInput.isVisible().catch(() => false)) {
+      await searchInput.fill('admin portal');
+      await searchInput.press('Enter');
+      await page.waitForTimeout(1000);
+      const results = page.locator('.card, tr, [class*="result"]');
+      await expect(results.first()).toBeVisible({ timeout: 5000 });
+    }
+  });
+
+  test('should show score breakdown visible', async ({ page }) => {
+    const searchInput = page.locator('input[placeholder*="search" i], input[placeholder*="Search" i], input[type="search"]').first();
+    if (await searchInput.isVisible().catch(() => false)) {
+      await searchInput.fill('code intelligence');
+      await searchInput.press('Enter');
+      await page.waitForTimeout(1000);
+      const scoreElement = page.locator('.score-bar, .score-fill, [class*="score"]');
+      if (await scoreElement.first().isVisible().catch(() => false)) {
+        await expect(scoreElement.first()).toBeVisible();
+      }
+    }
+  });
+});
+
+// ============================================================
+// 11. Audit
+// ============================================================
+
+test.describe('Audit', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("Audit")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should display audit entries table with data', async ({ page }) => {
+    await expect(page.locator('table')).toBeVisible();
+    const rows = page.locator('tbody tr');
+    await expect(rows.first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('should show action column in table', async ({ page }) => {
+    const actionCol = page.locator('th:has-text("Action")');
+    await expect(actionCol).toBeVisible();
+  });
+});
+
+// ============================================================
+// 12. KB Graph
+// ============================================================
+
+test.describe('KB Graph', () => {
+  test('should render 3D graph with minimap overlay', async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("Graph")').click();
+    await page.waitForTimeout(8000);
+    const canvases = page.locator('canvas');
+    const count = await canvases.count();
+    expect(count).toBeGreaterThanOrEqual(2);
+  });
+
+  test('should show legend with node types', async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("Graph")').click();
+    await page.waitForTimeout(2000);
+    await expect(page.locator('text=Node Types')).toBeVisible({ timeout: 8000 });
+    await expect(page.locator('text=Document')).toBeVisible();
+    await expect(page.locator('text=code').first()).toBeVisible();
+  });
+
+  test('should have interactive minimap canvas', async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("Graph")').click();
+    await page.waitForTimeout(3000);
+    const canvases = page.locator('canvas');
+    const count = await canvases.count();
+    expect(count).toBeGreaterThanOrEqual(2);
+  });
+});
+
+// ============================================================
+// 13. Profile
+// ============================================================
+
+test.describe('Profile', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("Profile")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should display current profile info', async ({ page }) => {
+    await expect(page.locator('.main').locator('text=admin').first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('should update email and verify', async ({ page }) => {
+    const emailInput = page.locator('input[type="email"], input[placeholder*="email" i], input[placeholder*="Email"]').first();
+    if (await emailInput.isVisible().catch(() => false)) {
+      const newEmail = `ui-test-${Date.now()}@test.local`;
+      await emailInput.fill(newEmail);
+      const saveBtn = page.locator('button:has-text("Save"), button:has-text("Update")').first();
+      if (await saveBtn.isVisible().catch(() => false)) {
+        await saveBtn.click();
+        await page.waitForTimeout(500);
+      }
+    }
+    await expect(page.locator('.main')).toBeVisible();
+  });
+});
+
+// ============================================================
+// 14. Logout
+// ============================================================
+
+
+// ============================================================
+// KB Quality Page
+// ============================================================
+
+test.describe('KB Quality', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("KB Quality")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should display quality page with summary cards', async ({ page }) => {
+    await expect(page.locator('.header h2')).toBeVisible();
+    const cards = page.locator('.card, .grid .card');
+    await expect(cards.first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('should show quality table with entries', async ({ page }) => {
+    await expect(page.locator('table')).toBeVisible({ timeout: 5000 });
+    await expect(page.locator('th:has-text("Source"), th:has-text("Quality")')).toBeVisible();
+  });
+
+  test('should have quality distribution chart', async ({ page }) => {
+    const svg = page.locator('svg');
+    if (await svg.first().isVisible().catch(() => false)) {
+      await expect(svg.first()).toBeVisible();
+    }
+  });
+});
+
+// ============================================================
+// KB Tags Page
+// ============================================================
+
+test.describe('KB Tags', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+    await page.locator('.nav-item:has-text("KB Tags")').click();
+    await page.waitForTimeout(500);
+  });
+
+  test('should display tags page', async ({ page }) => {
+    await expect(page.locator('.header h2')).toBeVisible();
+    await expect(page.locator('.main')).toBeVisible();
+  });
+
+  test('should have create tag functionality', async ({ page }) => {
+    const createBtn = page.locator('button:has-text("New Tag"), button:has-text("Create"), button:has-text("Add")').first();
+    if (await createBtn.isVisible().catch(() => false)) {
+      await createBtn.click();
+      await page.waitForTimeout(300);
+      const input = page.locator('input[placeholder*="tag" i], input[placeholder*="Tag" i], input[placeholder*="name" i]').first();
+      if (await input.isVisible().catch(() => false)) {
+        await input.fill('e2e-test-tag-' + Date.now());
+        const saveBtn = page.locator('button:has-text("Save"), button:has-text("Create"), button:has-text("Add")').last();
+        if (await saveBtn.isVisible().catch(() => false)) {
+          await saveBtn.click();
+          await page.waitForTimeout(500);
+        }
+      }
+    }
+    expect(true).toBe(true);
+  });
+
+  test('should show tags table', async ({ page }) => {
+    const table = page.locator('table');
+    if (await table.isVisible().catch(() => false)) {
+      await expect(table).toBeVisible();
+      await expect(page.locator('th, table').first()).toBeVisible({ timeout: 5000 });
+    }
+  });
+});
+
+
+// ============================================================
+// Multi-Tab Tenant Comparison
+// ============================================================
+
+test.describe('Multi-Tab Comparison', () => {
+  test.beforeEach(async ({ page }) => {
+    await login(page);
+  });
+
+  test('should show Compare Users button for admin', async ({ page }) => {
+    const btn = page.locator('button:has-text("+")').first();
+    await expect(btn).toBeVisible({ timeout: 5000 });
+  });
+
+  test('should open user dropdown when clicking Compare Users', async ({ page }) => {
+    const btn = page.locator('button:has-text("+")').first();
+    await btn.click();
+    await page.waitForTimeout(500);
+    // Dropdown should appear with user names
+    await page.waitForTimeout(1000);
+    const dropdownItems = page.locator('div[style*="cursor"]').filter({ hasText: /[a-z]/ });
+    const count = await dropdownItems.count();
+    expect(count).toBeGreaterThan(0);
+  });
+
+  test('should add tab and show tab bar', async ({ page }) => {
+    // First create a test user to compare with
+    await page.locator('.nav-item:has-text("Users")').click();
+    await page.waitForTimeout(500);
+    // Go back to dashboard and try compare
+    await page.locator('.nav-item:has-text("Dashboard")').click();
+    await page.waitForTimeout(300);
+    
+    const compareBtn = page.locator('button:has-text("+")').first();
+    if (await compareBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
+      await compareBtn.click();
+      await page.waitForTimeout(500);
+      // Click first available user in dropdown
+      const userOption = page.locator('div[style*="cursor: pointer"], div[style*="cursor:pointer"]').filter({ hasText: /admin|editor|viewer/ }).first();
+      if (await userOption.isVisible().catch(() => false)) {
+        await userOption.click();
+        await page.waitForTimeout(1000);
+        // Tab bar should now be visible with "Admin" tab
+        const adminTab = page.locator('text=Admin').first();
+        await expect(adminTab).toBeVisible({ timeout: 3000 });
+      }
+    }
+    expect(true).toBe(true);
+  });
+
+  test('should switch between tabs', async ({ page }) => {
+    const compareBtn = page.locator('button:has-text("+")').first();
+    if (await compareBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
+      await compareBtn.click();
+      await page.waitForTimeout(500);
+      const userOption = page.locator('div[style*="cursor"]').filter({ hasText: /[a-z]/ }).first();
+      if (await userOption.isVisible().catch(() => false)) {
+        await userOption.click();
+        await page.waitForTimeout(1000);
+        // Click Admin tab
+        const adminTab = page.locator('div:has-text("Admin")').first();
+        if (await adminTab.isVisible().catch(() => false)) {
+          await adminTab.click();
+          await page.waitForTimeout(300);
+          // Should show full admin sidebar
+          await expect(page.locator('.nav-item:has-text("Dashboard")')).toBeVisible();
+        }
+      }
+    }
+    expect(true).toBe(true);
+  });
+
+  test('should show Viewing as indicator when on non-admin tab', async ({ page }) => {
+    const compareBtn = page.locator('button:has-text("+")').first();
+    if (await compareBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
+      await compareBtn.click();
+      await page.waitForTimeout(500);
+      const userOption = page.locator('div[style*="cursor"]').filter({ hasText: /[a-z]/ }).first();
+      if (await userOption.isVisible().catch(() => false)) {
+        await userOption.click();
+        await page.waitForTimeout(1000);
+        // Should show "Viewing as" text
+        const viewingAs = page.locator('text=Viewing as');
+        if (await viewingAs.isVisible().catch(() => false)) {
+          await expect(viewingAs).toBeVisible();
+        }
+      }
+    }
+    expect(true).toBe(true);
+  });
+});
+test.describe('Logout', () => {
+  test('should logout redirect to login and remove token', async ({ page }) => {
+    await login(page);
+    const logoutBtn = page.locator(
+      'button:has-text("Logout"), .nav-item:has-text("Logout"), button:has-text("Sign Out")',
+    ).first();
+    if (await logoutBtn.isVisible().catch(() => false)) {
+      await logoutBtn.click();
+      await page.waitForTimeout(500);
+      await expect(page.locator('.login-box')).toBeVisible({ timeout: 5000 });
+      const token = await page.evaluate(() => localStorage.getItem('admin_token'));
+      expect(token).toBeNull();
+    }
+  });
+});