diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
new file mode 100644
index 00000000..9c45edfc
--- /dev/null
+++ b/.github/workflows/e2e.yml
@@ -0,0 +1,56 @@
+name: E2E (Playwright)
+
+# Runs only on-demand for now. Spinning a full DreamFactory stack in GH
+# Actions requires a shared df-docker image + secrets wiring that doesn't
+# exist yet; wiring it up is tracked as a follow-up. Until then this job
+# is driven by manual dispatch (pass a target URL) or a nightly cron
+# against a long-running instance (URL in the E2E_NIGHTLY_URL secret).
+on:
+  schedule:
+    - cron: '0 7 * * *'
+  workflow_dispatch:
+    inputs:
+      target_url:
+        description: 'Base URL to run E2E against (e.g. http://crucible.example:8080)'
+        required: true
+
+jobs:
+  smoke:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: 'npm'
+
+      - run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+
+      - name: Resolve target URL
+        id: target
+        run: |
+          if [ -n "${{ github.event.inputs.target_url }}" ]; then
+            echo "url=${{ github.event.inputs.target_url }}" >> "$GITHUB_OUTPUT"
+          else
+            echo "url=${{ secrets.E2E_NIGHTLY_URL }}" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Run Playwright tests
+        env:
+          PLAYWRIGHT_BASE_URL: ${{ steps.target.outputs.url }}
+          DF_ADMIN_EMAIL: ${{ secrets.E2E_ADMIN_EMAIL || 'admin@dreamfactory.com' }}
+          DF_ADMIN_PASSWORD: ${{ secrets.E2E_ADMIN_PASSWORD || 'passwordpassword' }}
+        run: npm run e2e
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index ff1329d4..08e5b3a6 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -25,4 +25,8 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci
+      # `test:ci` runs only the specs that currently pass. The rest are
+      # quarantined by jest.config.ci.js until the @ngneat/transloco ESM
+      # migration is completed. New tests should be added to that config.
+      - run: npm run test:ci
       - run: npm run build --if-present
diff --git a/.gitignore b/.gitignore
index 86d31fec..da8ec06a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,9 @@ testem.log
 Thumbs.db
 
 .config/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/e2e/_findings.spec.ts b/e2e/_findings.spec.ts
new file mode 100644
index 00000000..48d4bdf4
--- /dev/null
+++ b/e2e/_findings.spec.ts
@@ -0,0 +1,285 @@
+/**
+ * Discovery run. Not a regression gate — this spec is designed to FAIL
+ * loudly on anything that isn't working so we get a concrete bug list.
+ * Do not add to jest.config.ci or the nightly Playwright workflow.
+ *
+ * Strategy: simulate a new admin working through the most common journeys
+ * on a vanilla dev-docker instance. Each step records what it saw; the
+ * final console report lists every deviation from expected.
+ */
+import { test, expect, Page } from '@playwright/test';
+import { loginAsAdmin, waitForAppReady } from './fixtures/admin-login';
+
+type Finding = {
+  journey: string;
+  step: string;
+  detail: string;
+};
+const findings: Finding[] = [];
+function report(journey: string, step: string, detail: string) {
+  findings.push({ journey, step, detail });
+  console.log(`  [${journey}] ${step}: ${detail}`);
+}
+
+async function clickNavByText(
+  page: Page,
+  label: string,
+  journey: string
+): Promise<boolean> {
+  // Sidebar entries are <div mat-list-item> wrappers with a <button
+  // .nav-item> and a <span .nav-item> inside. The router navigation is
+  // bound to the mat-list-item, not the inner button — clicking only the
+  // button appears to trigger but doesn't actually route. Click the
+  // mat-list-item containing the target text.
+  const el = page
+    .locator(`[mat-list-item]:has(button.nav-item:has-text("${label}"))`)
+    .first();
+  const count = await el.count();
+  if (count === 0) {
+    report(journey, 'nav-select', `no mat-list-item matched "${label}"`);
+    return false;
+  }
+  try {
+    await el.scrollIntoViewIfNeeded({ timeout: 2_000 });
+  } catch (e: any) {
+    report(journey, 'nav-scroll', e.message.split('\n')[0]);
+  }
+  try {
+    await el.click({ timeout: 5_000, force: true });
+    return true;
+  } catch (e: any) {
+    report(journey, 'nav-click', e.message.split('\n')[0]);
+    return false;
+  }
+}
+
+async function setupPage(page: Page) {
+  await page.setViewportSize({ width: 1600, height: 900 });
+  await loginAsAdmin(page);
+  await waitForAppReady(page);
+  // Wait for the sidebar nav to populate. Home button is always present;
+  // if it never appears, the login flow didn't resolve.
+  await page
+    .locator('button.nav-item:has-text("Home")')
+    .first()
+    .waitFor({ timeout: 10_000 })
+    .catch(() => {});
+}
+
+test.describe.configure({ timeout: 240_000 });
+
+test('journey: event-scripts create', async ({ page }) => {
+  const J = 'event-scripts';
+  const nav4xx: number[] = [];
+  page.on('response', r => {
+    if (r.url().includes('/api/') && r.status() >= 400) nav4xx.push(r.status());
+  });
+  page.on('pageerror', e => report(J, 'jsError', e.message));
+  await setupPage(page);
+
+  // 1. Navigate
+  const clicked = await clickNavByText(page, 'Event Scripts', J);
+  if (!clicked) {
+    report(J, 'nav', 'Event Scripts nav entry not clickable from fresh login');
+    return;
+  }
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  const url = page.url();
+  if (!/event-scripts/.test(url)) {
+    report(J, 'nav', `expected /event-scripts, landed at ${url}`);
+    return;
+  }
+
+  // 2. Click +
+  const addBtn = page.locator('button.save-btn').first();
+  if (!(await addBtn.isVisible().catch(() => false))) {
+    report(J, '+ button', '.save-btn not visible on /event-scripts list');
+    return;
+  }
+  await addBtn.click().catch(e => report(J, '+ click', e.message));
+
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+
+  // 3. Create form — Service dropdown
+  const svcSel = page.locator('mat-select').first();
+  if (!(await svcSel.isVisible().catch(() => false))) {
+    report(J, 'form', 'no mat-select visible on create form');
+    return;
+  }
+  await svcSel.click();
+  const svcOptions = await page.locator('mat-option').allTextContents();
+  if (svcOptions.length === 0) {
+    report(J, 'service dropdown', 'zero options');
+    return;
+  }
+  report(J, 'service dropdown', `${svcOptions.length} options: ${svcOptions.slice(0, 5).join(', ')}…`);
+  await page.locator('mat-option').filter({ hasText: /^db$/ }).first().click().catch(() => {});
+  await page.waitForTimeout(500);
+
+  // 4. Script Type
+  const typeSel = page.locator('mat-select').nth(1);
+  await typeSel.click().catch(() => {});
+  const typeOptions = await page.locator('mat-option').allTextContents();
+  if (typeOptions.length === 0) {
+    report(J, 'script type dropdown', 'zero options after picking service=db');
+    return;
+  }
+  report(J, 'script type dropdown', `${typeOptions.length} options, first: ${typeOptions[0]}`);
+  await page.locator('mat-option').first().click();
+  await page.waitForTimeout(300);
+
+  // 5. Script Method
+  const methodSel = page.locator('mat-select').nth(2);
+  await methodSel.click().catch(() => {});
+  const methodOptions = await page.locator('mat-option').allTextContents();
+  if (methodOptions.length === 0) {
+    report(J, 'script method dropdown', 'zero options after picking type');
+    return;
+  }
+  report(J, 'script method dropdown', `${methodOptions.length} options, first: ${methodOptions[0]}`);
+  await page.locator('mat-option').first().click();
+  await page.waitForTimeout(300);
+
+  // 6. Save
+  const saveBtn = page.locator('button[type="submit"]').first();
+  if (!(await saveBtn.isVisible().catch(() => false))) {
+    report(J, 'save button', 'not visible');
+    return;
+  }
+  const [saveResp] = await Promise.all([
+    page.waitForResponse(r => r.url().includes('/api/v2/system/event_script') && r.request().method() === 'POST', { timeout: 10_000 }).catch(() => null),
+    saveBtn.click().catch(() => {}),
+  ]);
+  if (!saveResp) {
+    report(J, 'save', 'no POST /system/event_script fired — form submit did nothing');
+  } else if (!saveResp.ok()) {
+    report(J, 'save', `HTTP ${saveResp.status()} ${saveResp.statusText()}: ${(await saveResp.text()).slice(0, 200)}`);
+  } else {
+    report(J, 'save', `OK ${saveResp.status()}`);
+  }
+
+  if (nav4xx.length) report(J, '4xx/5xx', `statuses: ${nav4xx.join(',')}`);
+});
+
+test('journey: api-connections > database', async ({ page }) => {
+  const J = 'api-db';
+  page.on('pageerror', e => report(J, 'jsError', e.message));
+  await setupPage(page);
+
+  if (!(await clickNavByText(page, 'Database', J))) {
+    return;
+  }
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  report(J, 'nav', `landed at ${page.url()}`);
+
+  // Look for + button
+  if (!(await page.locator('button.save-btn').first().isVisible().catch(() => false))) {
+    report(J, '+ button', 'no .save-btn on Database list view');
+    return;
+  }
+  await page.locator('button.save-btn').first().click();
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  report(J, 'create form', `URL after +: ${page.url()}`);
+
+  // Is there a service type picker?
+  const typeSel = page.locator('mat-select').first();
+  if (!(await typeSel.isVisible().catch(() => false))) {
+    report(J, 'type picker', 'no mat-select on create form');
+    return;
+  }
+  await typeSel.click();
+  const types = await page.locator('mat-option').count();
+  report(J, 'type picker', `${types} service-type options`);
+});
+
+test('journey: roles list', async ({ page }) => {
+  const J = 'roles';
+  page.on('pageerror', e => report(J, 'jsError', e.message));
+  await setupPage(page);
+
+  const ok = await clickNavByText(page, 'Role Based Access', J);
+  if (!ok) {
+    report(J, 'nav', 'Role Based Access nav entry not clickable');
+    return;
+  }
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  report(J, 'nav', `landed at ${page.url()}`);
+
+  // List view
+  const rows = await page.locator('mat-row, tr.mat-mdc-row').count();
+  report(J, 'list', `${rows} role rows rendered`);
+
+  if (!(await page.locator('button.save-btn').first().isVisible().catch(() => false))) {
+    report(J, '+ button', 'no .save-btn on roles list');
+    return;
+  }
+  await page.locator('button.save-btn').first().click();
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  report(J, 'create form', `URL: ${page.url()}`);
+
+  const inputs = await page.locator('input[type="text"], mat-select').count();
+  report(J, 'create form', `${inputs} inputs/selects on form`);
+});
+
+test('journey: admin users list', async ({ page }) => {
+  const J = 'admins';
+  page.on('pageerror', e => report(J, 'jsError', e.message));
+  await setupPage(page);
+
+  if (!(await clickNavByText(page, 'Admins', J))) {
+    return;
+  }
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  report(J, 'nav', `landed at ${page.url()}`);
+
+  const rows = await page.locator('mat-row, tr.mat-mdc-row').count();
+  report(J, 'list', `${rows} admin rows rendered`);
+
+  if (!(await page.locator('button.save-btn').first().isVisible().catch(() => false))) {
+    report(J, '+ button', 'no .save-btn on admins list');
+    return;
+  }
+  await page.locator('button.save-btn').first().click();
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  report(J, 'create form', `URL: ${page.url()}`);
+});
+
+test('journey: mcp create service', async ({ page }) => {
+  const J = 'mcp';
+  page.on('pageerror', e => report(J, 'jsError', e.message));
+  await setupPage(page);
+
+  if (!(await clickNavByText(page, 'Utility', J))) {
+    return;
+  }
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  report(J, 'nav', `landed at ${page.url()}`);
+
+  // Look for sub-nav MCP link
+  const mcpLink = page.locator('a:has-text("MCP"), button:has-text("MCP")').first();
+  if (!(await mcpLink.isVisible().catch(() => false))) {
+    report(J, 'mcp link', 'no MCP sub-nav under Utility');
+    return;
+  }
+  await mcpLink.click().catch(() => {});
+  await page.waitForLoadState('networkidle', { timeout: 8_000 }).catch(() => {});
+  report(J, 'mcp page', `URL: ${page.url()}`);
+});
+
+test.afterAll(() => {
+  console.log('\n=== DISCOVERY FINDINGS ===\n');
+  if (findings.length === 0) {
+    console.log('(no issues recorded)');
+  } else {
+    const byJ = new Map<string, Finding[]>();
+    for (const f of findings) {
+      if (!byJ.has(f.journey)) byJ.set(f.journey, []);
+      byJ.get(f.journey)!.push(f);
+    }
+    for (const [j, list] of byJ) {
+      console.log(`\n== ${j} ==`);
+      for (const f of list) console.log(`  • ${f.step.padEnd(22)} ${f.detail}`);
+    }
+  }
+  console.log('\n=== END FINDINGS ===\n');
+});
diff --git a/e2e/api-connections.spec.ts b/e2e/api-connections.spec.ts
new file mode 100644
index 00000000..91cdc353
--- /dev/null
+++ b/e2e/api-connections.spec.ts
@@ -0,0 +1,22 @@
+import { test } from '@playwright/test';
+import { loginAsAdmin, waitForAppReady } from './fixtures/admin-login';
+
+/**
+ * API connection (database) CRUD.
+ *
+ * TODO — flesh out once the sidenav navigation pattern is stable
+ * (see the TODO in event-scripts.spec.ts). Intent:
+ *  1. Navigate to API Connections → Database
+ *  2. Click +, pick "SQL Server" or "SQLite"
+ *  3. Fill out the minimum config fields, save
+ *  4. Assert the service appears in the list
+ *  5. Click the row, edit label, save
+ *  6. Delete, assert it's gone
+ */
+test.fixme('API Connections: create → edit → delete a database service', async ({
+  page,
+}) => {
+  await loginAsAdmin(page);
+  await waitForAppReady(page);
+  // TODO
+});
diff --git a/e2e/event-scripts.spec.ts b/e2e/event-scripts.spec.ts
new file mode 100644
index 00000000..63898327
--- /dev/null
+++ b/e2e/event-scripts.spec.ts
@@ -0,0 +1,96 @@
+import { test, expect } from '@playwright/test';
+import { loginAsAdmin, waitForAppReady } from './fixtures/admin-login';
+
+/**
+ * End-to-end regression for the Event Scripts create flow — the path that
+ * was broken for the Triskele customer on 2026-04-22.
+ *
+ * Covers the entire chain that broke during that fire-drill:
+ *  - form opens without a stuck spinner (loading-spinner race fix)
+ *  - Service dropdown populates with raw service names (/system/event
+ *    services_only fast path + case-interceptor exemption)
+ *  - Script Type dropdown populates (response lookup uses raw key)
+ *  - Script Method dropdown populates
+ *  - Save produces a 201/200, not a 400 "No record(s) detected"
+ */
+test.describe('Event Scripts — create flow', () => {
+  // TODO: this spec navigates via hash-routing, which doesn't reliably
+  // trigger the lazy-loaded route resolver on `page.goto('#/event-scripts')`.
+  // Need to either click through the sidenav (resolved reliably by role
+  // selectors once the welcome/license flow is accounted for) or switch
+  // the app to path-based routing. Keeping the spec scaffolded so the
+  // intent is visible and fixing the navigation is small follow-up work.
+  test.fixme('create an event script end-to-end', async ({ page }) => {
+    await loginAsAdmin(page);
+    await waitForAppReady(page);
+
+    // Navigate into Event Scripts. Use a hard reload of the full URL so
+    // the hash router definitely re-evaluates (in-app hash-only changes
+    // from page.goto don't always trigger lazy-loaded route resolvers).
+    await page.goto('/dreamfactory/dist/#/event-scripts', {
+      waitUntil: 'networkidle',
+      timeout: 15_000,
+    });
+
+    // Click the + button. DfManageTable renders a mat-mini-fab with class
+    // .save-btn for the "New Entry" action.
+    const addBtn = page.locator('button.save-btn').first();
+    await expect(addBtn).toBeVisible({ timeout: 15_000 });
+    await addBtn.click();
+
+    // Spinner must clear. If the loading-spinner race is back, this
+    // waits forever until the test timeout.
+    await expect(
+      page.locator('mat-progress-spinner, .loading-spinner')
+    ).toHaveCount(0, { timeout: 20_000 });
+
+    // Service dropdown
+    const serviceSelect = page.getByLabel(/^service$/i);
+    await serviceSelect.click();
+    // `db` is always present in a dev-docker setup; any underscore service
+    // also exercises the case-interceptor exemption.
+    const dbOption = page.getByRole('option', { name: /^db$/ });
+    await expect(dbOption).toBeVisible({ timeout: 10_000 });
+    await dbOption.click();
+
+    // Script Type dropdown must populate. Empty = the pre-fix bug.
+    const typeSelect = page.getByLabel(/script\s*type/i);
+    await typeSelect.click();
+    const firstType = page.getByRole('option').first();
+    await expect(firstType).toBeVisible({ timeout: 10_000 });
+    // Pick a type without {table_name} templating so selectedRoute()
+    // alone produces a valid completeScriptName.
+    const dbType = page.getByRole('option', { name: /^db$/ });
+    await dbType.click();
+
+    // Script Method
+    const methodSelect = page.getByLabel(/script\s*method/i);
+    await methodSelect.click();
+    const firstMethod = page
+      .getByRole('option', { name: /\.get\.pre_process$/ })
+      .first();
+    await expect(firstMethod).toBeVisible({ timeout: 10_000 });
+    await firstMethod.click();
+
+    // Grab the method text we picked so we can clean up after save.
+    // At this point completeScriptName === selectedRouteItem.
+
+    // Activate the script and add a one-line body.
+    const isActiveToggle = page.getByLabel(/active/i).first();
+    await isActiveToggle.click();
+
+    // Save
+    const saveBtn = page.getByRole('button', { name: /^save$/i });
+    const savePromise = page.waitForResponse(
+      r =>
+        r.url().includes('/api/v2/system/event_script') &&
+        r.request().method() === 'POST'
+    );
+    await saveBtn.click();
+    const resp = await savePromise;
+    expect(
+      [200, 201].includes(resp.status()),
+      `expected save to succeed, got ${resp.status()}: ${await resp.text()}`
+    ).toBe(true);
+  });
+});
diff --git a/e2e/fixtures/admin-login.ts b/e2e/fixtures/admin-login.ts
new file mode 100644
index 00000000..cde4dff2
--- /dev/null
+++ b/e2e/fixtures/admin-login.ts
@@ -0,0 +1,46 @@
+import { Page, expect } from '@playwright/test';
+
+export const ADMIN_EMAIL =
+  process.env.DF_ADMIN_EMAIL ?? 'admin@dreamfactory.com';
+export const ADMIN_PASSWORD =
+  process.env.DF_ADMIN_PASSWORD ?? 'passwordpassword';
+
+/**
+ * Log in via the actual UI. The admin UI keeps the session in a cookie
+ * and userData in-memory; a synthetic localStorage seed does not work
+ * because no code path hydrates userData from storage at bootstrap.
+ */
+export async function loginAsAdmin(page: Page) {
+  await page.goto('/dreamfactory/dist/#/auth/login');
+  // Labels come from the userManagement i18n bundle — "Enter Email" /
+  // "Enter Password" in English. Use type-based selectors to stay
+  // language-agnostic.
+  const email = page.locator('input[type="email"]').first();
+  await expect(email).toBeVisible({ timeout: 15_000 });
+  await email.fill(ADMIN_EMAIL);
+  await page.locator('input[type="password"]').first().fill(ADMIN_PASSWORD);
+
+  const loginReq = page.waitForResponse(
+    r =>
+      r.url().includes('/api/v2/system/admin/session') &&
+      r.request().method() === 'POST'
+  );
+  await page.getByRole('button', { name: /^login$/i }).click();
+  const resp = await loginReq;
+  expect(
+    resp.ok(),
+    `admin login HTTP ${resp.status()}: ${await resp.text()}`
+  ).toBe(true);
+
+  // After login the router navigates off /auth/login to the home route.
+  await page.waitForURL(url => !url.toString().includes('/auth/login'), {
+    timeout: 15_000,
+  });
+}
+
+/** Wait for the admin UI shell to be fully painted. */
+export async function waitForAppReady(page: Page) {
+  await page.waitForSelector('mat-toolbar, mat-sidenav, nav', {
+    timeout: 15_000,
+  });
+}
diff --git a/e2e/mcp-service.spec.ts b/e2e/mcp-service.spec.ts
new file mode 100644
index 00000000..0dcc6968
--- /dev/null
+++ b/e2e/mcp-service.spec.ts
@@ -0,0 +1,25 @@
+import { test } from '@playwright/test';
+import { loginAsAdmin, waitForAppReady } from './fixtures/admin-login';
+
+/**
+ * MCP service + custom function tool round-trip.
+ *
+ * TODO — pending stable sidenav navigation (see event-scripts.spec.ts).
+ * Intent:
+ *  1. Create an MCP service via the admin UI (type = MCP)
+ *  2. Add a custom function tool with a simple body: `return a + b;`
+ *  3. Save — assert the tool row lands in mcp_custom_tools (via API)
+ *  4. Invoke the tool via /mcp/{service} tools/call and assert result
+ *
+ * This journey previously had three silently-dropped save bugs (see
+ * df-mcp-server PR #35 "persist custom tools on service create and on
+ * re-save without ids"). End-to-end coverage would have caught them
+ * before a customer install.
+ */
+test.fixme('MCP: create service with custom function tool + invoke it', async ({
+  page,
+}) => {
+  await loginAsAdmin(page);
+  await waitForAppReady(page);
+  // TODO
+});
diff --git a/e2e/roles.spec.ts b/e2e/roles.spec.ts
new file mode 100644
index 00000000..e8944b90
--- /dev/null
+++ b/e2e/roles.spec.ts
@@ -0,0 +1,21 @@
+import { test } from '@playwright/test';
+import { loginAsAdmin, waitForAppReady } from './fixtures/admin-login';
+
+/**
+ * Roles CRUD.
+ *
+ * TODO — pending stable sidenav navigation (see event-scripts.spec.ts).
+ * Intent:
+ *  1. Navigate to Role Based Access → Roles
+ *  2. Create a role with restricted service access
+ *  3. Assign a service + verb matrix
+ *  4. Save, reload, assert persisted
+ *  5. Delete
+ */
+test.fixme('Roles: create a role with restricted service access', async ({
+  page,
+}) => {
+  await loginAsAdmin(page);
+  await waitForAppReady(page);
+  // TODO
+});
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
new file mode 100644
index 00000000..4828152d
--- /dev/null
+++ b/e2e/smoke.spec.ts
@@ -0,0 +1,65 @@
+import { test, expect } from '@playwright/test';
+import { loginAsAdmin, waitForAppReady } from './fixtures/admin-login';
+
+test.describe('Admin UI smoke', () => {
+  test('admin login + app shell loads without console errors', async ({
+    page,
+  }) => {
+    // Track uncaught JS exceptions only. Generic "Failed to load resource"
+    // notices (4xx/5xx fetches) are covered separately by the network
+    // assertions below and are too noisy for a smoke check.
+    const jsErrors: string[] = [];
+    page.on('pageerror', err => jsErrors.push(err.message));
+
+    await loginAsAdmin(page);
+    await waitForAppReady(page);
+
+    // Every nav label should be translated — raw Transloco keys like
+    // "nav.ai.nav" mean the i18n bundle didn't load. This was the
+    // clearest tell of the stale public/ issue on the Triskele install.
+    const body = await page.textContent('body');
+    expect(body, 'raw transloco key leaked through').not.toMatch(
+      /\bnav\.[a-z]+\.(nav|title)\b/
+    );
+
+    // Static assets under /dreamfactory/dist/assets must resolve. A 404
+    // here is the original ace-builds + fonts bug class.
+    const aceModeResponse = await page.request.get(
+      '/dreamfactory/dist/assets/ace-builds/mode-javascript.js'
+    );
+    expect(aceModeResponse.ok(), 'ace mode asset must 200').toBe(true);
+
+    expect(jsErrors, 'page threw uncaught JS exceptions').toEqual([]);
+  });
+
+  test('top-nav entries navigate without errors', async ({ page }) => {
+    await loginAsAdmin(page);
+    await waitForAppReady(page);
+
+    // Paths taken from routes.ts. Each should render without throwing.
+    const paths = [
+      '/api-connections/api-types',
+      '/api-connections/roles',
+      '/api-connections/api-keys',
+      '/event-scripts',
+      '/system-settings/config',
+    ];
+
+    for (const p of paths) {
+      const url = `/dreamfactory/dist/#${p}`;
+      const responses: number[] = [];
+      page.on('response', r => {
+        if (r.url().includes('/api/v2/')) responses.push(r.status());
+      });
+      await page.goto(url);
+      // Wait for any xhr to land or for the page to settle.
+      await page.waitForLoadState('networkidle', { timeout: 15_000 });
+
+      // No 5xx on any backend call triggered by the navigation.
+      expect(
+        responses.filter(s => s >= 500),
+        `${p} produced 5xx responses`
+      ).toEqual([]);
+    }
+  });
+});
diff --git a/jest.config.ci.js b/jest.config.ci.js
new file mode 100644
index 00000000..2ce45a4d
--- /dev/null
+++ b/jest.config.ci.js
@@ -0,0 +1,35 @@
+/**
+ * CI Jest config.
+ *
+ * Extends the base jest.config.js but scopes the run to the specs that
+ * currently pass. The rest of the suite (55 suites as of 2026-04-22)
+ * fails because @ngneat/transloco now ships ESM-only (.mjs) and
+ * jest-preset-angular 13 in the current setup can't resolve it without
+ * a broader ESM migration.
+ *
+ * Tracking: "Jest ESM migration for transloco" — once done, this file
+ * can be deleted and CI can call the default `npm test`.
+ *
+ * New tests should be added to the testMatch list below as they are
+ * written, so they fail CI if they regress.
+ */
+const base = require('./jest.config');
+
+module.exports = {
+  ...base,
+  testMatch: [
+    // Regression coverage for the 2026-04-22 customer fire-drill fixes.
+    '<rootDir>/src/app/shared/services/df-loading-spinner.service.spec.ts',
+    '<rootDir>/src/app/shared/interceptors/case.interceptor.spec.ts',
+    '<rootDir>/src/app/adf-event-scripts/df-script-details/df-script-details.submit.spec.ts',
+    // Existing specs that currently pass. The rest of the suite is
+    // quarantined until the ESM/transloco migration; route.spec.ts is
+    // a separate pre-existing assertion mismatch.
+    '<rootDir>/src/app/shared/utilities/url.spec.ts',
+    '<rootDir>/src/app/shared/utilities/language.spec.ts',
+    '<rootDir>/src/app/shared/utilities/case.spec.ts',
+    '<rootDir>/src/app/shared/utilities/file.spec.ts',
+    '<rootDir>/src/app/shared/services/df-breakpoint.service.spec.ts',
+    '<rootDir>/src/app/shared/services/df-theme.service.spec.ts',
+  ],
+};
diff --git a/jest.config.js b/jest.config.js
index 2b1885e2..0d8f97bb 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,6 +4,8 @@ module.exports = {
   moduleNameMapper: {
     '^src/(.*)$': '<rootDir>/src/$1',
   },
+  // Playwright specs live under e2e/ and must never be picked up by Jest.
+  testPathIgnorePatterns: ['/node_modules/', '<rootDir>/e2e/'],
   transformIgnorePatterns: [
     'node_modules/(?!@angular|swagger-ui|react-syntax-highlighter|swagger-client|@ngneat|@fortawesome)',
   ],
diff --git a/package-lock.json b/package-lock.json
index c7e79ac2..f9c3af41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
         "@angular/cli": "~16.1.6",
         "@angular/compiler-cli": "^16.1.0",
         "@ngneat/transloco-keys-manager": "^3.8.0",
+        "@playwright/test": "^1.59.1",
         "@types/jest": "^29.5.3",
         "@types/swagger-ui": "^3.52.0",
         "@typescript-eslint/eslint-plugin": "5.62.0",
@@ -5807,6 +5808,22 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
+      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@scarf/scarf": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.4.0.tgz",
@@ -17436,6 +17453,53 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
diff --git a/package.json b/package.json
index 8f8b439c..38f9d18a 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,12 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "jest --verbose",
+    "test:ci": "jest --ci --watchAll=false --passWithNoTests --config jest.config.ci.js",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "e2e:smoke": "playwright test e2e/smoke.spec.ts",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix",
     "prettier": "npx prettier --write .",
@@ -52,6 +56,7 @@
     "@angular/cli": "~16.1.6",
     "@angular/compiler-cli": "^16.1.0",
     "@ngneat/transloco-keys-manager": "^3.8.0",
+    "@playwright/test": "^1.59.1",
     "@types/jest": "^29.5.3",
     "@types/swagger-ui": "^3.52.0",
     "@typescript-eslint/eslint-plugin": "5.62.0",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 00000000..f7dd8ba2
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,36 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright E2E config.
+ *
+ * Runs against a live DreamFactory admin instance. Defaults to the local
+ * dev docker at http://localhost:8080 (served from df-docker-dev), but
+ * any URL can be passed via PLAYWRIGHT_BASE_URL — for example the
+ * crucible.home.nicdavidson.net box or a CI-spun ephemeral instance.
+ *
+ * Admin credentials default to the dev-docker defaults. In CI override
+ * via DF_ADMIN_EMAIL / DF_ADMIN_PASSWORD.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false, // DF sessions are stateful; run serial to avoid flakes
+  retries: process.env.CI ? 1 : 0,
+  reporter: process.env.CI ? [['html'], ['github']] : 'list',
+  timeout: 30_000,
+  expect: { timeout: 10_000 },
+
+  use: {
+    baseURL: process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:8080',
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: process.env.CI ? 'retain-on-failure' : 'off',
+    ignoreHTTPSErrors: true,
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});
diff --git a/src/app/adf-event-scripts/df-script-details/df-script-details.submit.spec.ts b/src/app/adf-event-scripts/df-script-details/df-script-details.submit.spec.ts
new file mode 100644
index 00000000..d566e03c
--- /dev/null
+++ b/src/app/adf-event-scripts/df-script-details/df-script-details.submit.spec.ts
@@ -0,0 +1,99 @@
+/**
+ * Focused regressions for the submit path in DfScriptDetailsComponent.
+ *
+ * These tests do not boot the full component — Angular Router + transloco +
+ * Material make a full TestBed harness expensive. We exercise the pure
+ * fallback and grep the committed HTML/TS to prove that the wiring which
+ * broke a customer install on 2026-04-22 cannot silently regress.
+ */
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const HTML_SRC = readFileSync(
+  join(__dirname, 'df-script-details.component.html'),
+  'utf8'
+);
+const TS_SRC = readFileSync(
+  join(__dirname, 'df-script-details.component.ts'),
+  'utf8'
+);
+
+describe('DfScriptDetailsComponent submit logic', () => {
+  it('falls back on empty completeScriptName to selectedRouteItem', () => {
+    // selectedServiceItemEvent() resets completeScriptName to '' (not null).
+    // The old code used `??` which does not treat '' as missing, so
+    // scriptItem.name became '' and the POST URL dropped the resource name
+    // producing a 400 "No record(s) detected" from the backend.
+    const completeScriptName = '';
+    const selectedRouteItem = 'test_underscore._schema.get.pre_process';
+
+    const name = completeScriptName || selectedRouteItem;
+
+    expect(name).toBe('test_underscore._schema.get.pre_process');
+  });
+
+  it('prefers completeScriptName when set by selectedTable/selectedRoute', () => {
+    const completeScriptName = 'db._schema.table_name.get.pre_process';
+    const selectedRouteItem = 'db._schema.{table_name}.get.pre_process';
+
+    const name = completeScriptName || selectedRouteItem;
+
+    expect(name).toBe('db._schema.table_name.get.pre_process');
+  });
+
+  it('submit source uses `||` (not `??`) for the name fallback', () => {
+    // Guard the exact call site — `??` would regress the empty-string bug.
+    expect(TS_SRC).toMatch(
+      /name:\s*this\.completeScriptName\s*\|\|\s*this\.selectedRouteItem/
+    );
+    expect(TS_SRC).not.toMatch(
+      /name:\s*this\.completeScriptName\s*\?\?\s*this\.selectedRouteItem/
+    );
+  });
+});
+
+describe('DfScriptDetailsComponent template wiring contract', () => {
+  // The three mat-selects must fire their change handlers. Removing any
+  // (selectionChange) binding was what broke saving on the customer call.
+  it('Script Method mat-select has (selectionChange)="selectedRoute()"', () => {
+    const methodBlock = HTML_SRC.match(
+      /scripts\.scriptMethod[\s\S]*?<\/mat-form-field>/
+    );
+    expect(methodBlock).not.toBeNull();
+    expect(methodBlock![0]).toContain('(selectionChange)="selectedRoute()"');
+  });
+
+  it('Service mat-select has (selectionChange)="selectedServiceItemEvent()"', () => {
+    const serviceBlock = HTML_SRC.match(
+      /'service' \| transloco[\s\S]*?<\/mat-form-field>/
+    );
+    expect(serviceBlock).not.toBeNull();
+    expect(serviceBlock![0]).toContain(
+      '(selectionChange)="selectedServiceItemEvent()"'
+    );
+  });
+
+  it('Script Type mat-select has (selectionChange)="selectedEventItemEvent()"', () => {
+    const typeBlock = HTML_SRC.match(
+      /scripts\.scriptType[\s\S]*?<\/mat-form-field>/
+    );
+    expect(typeBlock).not.toBeNull();
+    expect(typeBlock![0]).toContain(
+      '(selectionChange)="selectedEventItemEvent()"'
+    );
+  });
+});
+
+describe('DfScriptDetailsComponent service lookup key', () => {
+  // /system/event responses are exempt from the case interceptor
+  // (see case.interceptor.ts). The component must look up
+  // response[serviceName] with the raw service name; the hardcoded
+  // api_docs -> apiDocs rename must NOT return.
+  it('does not reintroduce the api_docs → apiDocs rename', () => {
+    expect(TS_SRC).not.toMatch(/serviceKey\s*=\s*['"]apiDocs['"]/);
+  });
+
+  it('looks up events using the raw serviceName', () => {
+    expect(TS_SRC).toMatch(/response\[serviceName\]/);
+  });
+});
diff --git a/src/app/shared/interceptors/case.interceptor.spec.ts b/src/app/shared/interceptors/case.interceptor.spec.ts
new file mode 100644
index 00000000..a5b859e8
--- /dev/null
+++ b/src/app/shared/interceptors/case.interceptor.spec.ts
@@ -0,0 +1,91 @@
+import { TestBed } from '@angular/core/testing';
+import {
+  HttpClient,
+  provideHttpClient,
+  withInterceptors,
+} from '@angular/common/http';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
+import { caseInterceptor } from './case.interceptor';
+
+describe('caseInterceptor', () => {
+  let http: HttpClient;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(withInterceptors([caseInterceptor])),
+        provideHttpClientTesting(),
+      ],
+    });
+    http = TestBed.inject(HttpClient);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  it('transforms snake_case response keys to camelCase for normal endpoints', done => {
+    http.get('/api/v2/system/service').subscribe((body: any) => {
+      expect(body.some_key).toBeUndefined();
+      expect(body.someKey).toBe('v');
+      done();
+    });
+    const req = httpMock.expectOne('/api/v2/system/service');
+    req.flush(
+      { some_key: 'v' },
+      { headers: { 'Content-Type': 'application/json' } }
+    );
+  });
+
+  it('passes /system/event responses through unchanged', done => {
+    // Regression: event names are response keys and the backend matches
+    // scripts by the raw string. Transforming to camelCase would break the
+    // Script Type dropdown and corrupt saved script names for any service
+    // whose name contains an underscore.
+    const raw = {
+      test_underscore: {
+        'test_underscore._schema': { endpoints: ['a.b.c'] },
+      },
+    };
+    http
+      .get('/api/v2/system/event?services_only=true')
+      .subscribe((body: any) => {
+        expect(body).toEqual(raw);
+        done();
+      });
+    const req = httpMock.expectOne('/api/v2/system/event?services_only=true');
+    req.flush(raw, { headers: { 'Content-Type': 'application/json' } });
+  });
+
+  it('passes /api_docs responses through unchanged (OpenAPI keys must survive)', done => {
+    const raw = { 'x-custom': 1, paths: { '/foo_bar': {} } };
+    http.get('/api/v2/api_docs/swagger').subscribe((body: any) => {
+      expect(body).toEqual(raw);
+      done();
+    });
+    const req = httpMock.expectOne('/api/v2/api_docs/swagger');
+    req.flush(raw, { headers: { 'Content-Type': 'application/json' } });
+  });
+
+  it('converts camelCase request bodies to snake_case', () => {
+    http
+      .post('/api/v2/system/service', { isActive: true, apiKey: 'x' })
+      .subscribe();
+    const req = httpMock.expectOne('/api/v2/system/service');
+    expect(req.request.body).toEqual({ is_active: true, api_key: 'x' });
+    req.flush({});
+  });
+
+  it('does not transform requests that fall outside /api', () => {
+    http.get('/dreamfactory/dist/assets/i18n/en.json').subscribe();
+    const req = httpMock.expectOne('/dreamfactory/dist/assets/i18n/en.json');
+    req.flush(
+      { some_key: 'v' },
+      { headers: { 'Content-Type': 'application/json' } }
+    );
+    // no assertion besides: no error, no transform applied
+  });
+});
diff --git a/src/app/shared/services/df-loading-spinner.service.spec.ts b/src/app/shared/services/df-loading-spinner.service.spec.ts
index c022c94c..5474c399 100644
--- a/src/app/shared/services/df-loading-spinner.service.spec.ts
+++ b/src/app/shared/services/df-loading-spinner.service.spec.ts
@@ -49,4 +49,27 @@ describe('DfLoadingSpinnerService', () => {
 
     service.active = false;
   });
+
+  it('settles to inactive when three requests start and finish inside one tick', async () => {
+    // Regression for the stuck spinner bug: the previous setTimeout-based
+    // implementation compared shouldBeActive to active$.value, which was
+    // stale during rapid toggles and lost the final deactivate. After
+    // queuedMicrotasks run, the subject must be false.
+    const observed: boolean[] = [];
+    service.active.subscribe(v => observed.push(v));
+
+    // Simulate three concurrent requests starting and finishing in one tick.
+    service.active = true;
+    service.active = true;
+    service.active = true;
+    service.active = false;
+    service.active = false;
+    service.active = false;
+
+    // Flush all pending microtasks.
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(observed[observed.length - 1]).toBe(false);
+  });
 });
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index c7cfc0e2..12dbe820 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -4,7 +4,7 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "module": "CommonJs",
-    "types": ["jest"]
+    "types": ["jest", "node"]
   },
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }