Add dashboard UI updates and settings modal

pikit-web/tests/busy-overlay.spec.js

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+const baseStatus = {
+  hostname: 'pikit',
+  ready: true,
+  uptime_seconds: 100,
+  load: [0, 0, 0],
+  memory_mb: { total: 1024, free: 512 },
+  disk_mb: { total: 10240, free: 9000 },
+  cpu_temp_c: 40,
+  lan_ip: '10.0.0.10',
+  os_version: 'DietPi',
+  auto_updates_enabled: true,
+  auto_updates: { enabled: true },
+  services: [],
+};
+const defaultUpdatesConfig = {
+  enabled: true,
+  scope: 'all',
+  update_time: '04:00',
+  upgrade_time: '04:30',
+  cleanup: true,
+  bandwidth_limit_kbps: null,
+  auto_reboot: false,
+  reboot_time: '04:30',
+  reboot_with_users: false,
+};
+
+test('busy overlay appears while adding a service', async ({ page }) => {
+  let services = [];
+  await page.route('**/api/updates/config', async (route) => {
+    await route.fulfill({ json: defaultUpdatesConfig });
+  });
+  await page.route('**/api/status', async (route) => {
+    await route.fulfill({ json: { ...baseStatus, services } });
+  });
+
+  await page.goto('/');
+
+  // Trigger busy overlay via test hook
+  await page.evaluate(() => {
+    window.__pikitTest?.showBusy('Adding service', 'Opening firewall rules…');
+    setTimeout(() => window.__pikitTest?.hideBusy(), 300);
+  });
+
+  const busy = page.locator('#busyOverlay');
+  await expect(busy).toBeVisible();
+  await expect(busy).toBeHidden({ timeout: 2000 });
+});