feat: add Playwright E2E tests for WebSocket event flow

.github/workflows/playwright.yml

@@ -0,0 +1,90 @@
+name: Playwright E2E Tests
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+jobs:
+  e2e-tests:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    services:
+      postgres:
+        image: postgres:15
+        env:
+          POSTGRES_USER: openaudit
+          POSTGRES_PASSWORD: openaudit
+          POSTGRES_DB: openaudit
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+      redis:
+        image: redis:7-alpine
+        ports:
+          - 6379:6379
+        options: >-
+          --health-cmd "redis-cli ping"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Setup database
+        env:
+          DATABASE_URL: postgresql://openaudit:openaudit@localhost:5432/openaudit
+        run: |
+          npx prisma generate
+          npx prisma migrate deploy --schema=prisma/schema.prisma || true
+
+      - name: Build application
+        run: npm run build
+        env:
+          DATABASE_URL: postgresql://openaudit:openaudit@localhost:5432/openaudit
+          NEXT_PUBLIC_NETWORK: testnet
+
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          DATABASE_URL: postgresql://openaudit:openaudit@localhost:5432/openaudit
+          NEXT_PUBLIC_NETWORK: testnet
+          E2E_TEST_MODE: "true"
+          CI: true
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Upload test traces
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-traces
+          path: test-results/
+          retention-days: 7

components/dashboard/EventFeedTable.tsx

@@ -203,6 +203,7 @@ export function EventFeedTable({
                   return (
                     <TableRow
                       key={event.raw.id}
+                      data-testid="event-row"
                       tabIndex={0}
                       role="row"
                       className={`group transition-colors focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet-500 ${

e2e/helpers/inject-event.ts

@@ -0,0 +1,23 @@
+import type { RawEvent, TranslatedEvent } from "../../lib/translator/types";
+
+const BASE_URL = process.env.PLAYWRIGHT_BASE_URL ?? "http://localhost:3000";
+
+/**
+ * Posts a mock Soroban RPC raw event to the E2E test hook, which translates
+ * and broadcasts it over the WebSocket server.
+ */
+export async function injectMockSorobanEvent(
+  rawEvent: RawEvent
+): Promise<TranslatedEvent> {
+  const response = await fetch(`${BASE_URL}/e2e/inject-event`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(rawEvent),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to inject event: ${response.status} ${await response.text()}`);
+  }
+
+  return (await response.json()) as TranslatedEvent;
+}

e2e/websocket-event-flow.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect } from "@playwright/test";
+import type { RawEvent } from "../lib/translator/types";
+import { injectMockSorobanEvent } from "./helpers/inject-event";
+
+/**
+ * E2E: Soroban RPC event → translation → WebSocket → translated text in DOM
+ */
+
+const MOCK_SOROBAN_RPC_EVENT: RawEvent = {
+  id: `e2e-${Date.now()}-0`,
+  contractId: "CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM",
+  topics: [
+    "0x0000000000000000000000000000000000000000000000000000000074726e73",
+    "0x00000012000000000000000085a825af25ab38c944150cc569311cf76c80b8b521297c049c5c53204cd43e38",
+    "0x000000120000000000000000fa6798a578d9f9f012f70a00cae3d6b15a7ada4518f98ad68c0cab21d16a0f5d",
+  ],
+  data: "0x00000000000000000000000000000000000000000005F5E100",
+  ledger: 52_341_001,
+  timestamp: Math.floor(Date.now() / 1000),
+  txHash: "a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2",
+};
+
+test.describe("WebSocket Event Flow", () => {
+  test("displays translated event in DOM after WebSocket broadcast", async ({ page }) => {
+    await page.goto("/dashboard");
+    await page.waitForLoadState("networkidle");
+
+    const wsPromise = page.waitForEvent("websocket");
+    await page.getByRole("button", { name: /live feed/i }).click();
+    const ws = await wsPromise;
+    await ws.waitForEvent("framesreceived");
+
+    const translated = await injectMockSorobanEvent(MOCK_SOROBAN_RPC_EVENT);
+
+    expect(translated.status).toBe("translated");
+    expect(translated.description).toContain("USDC");
+
+    const eventRow = page.locator("[data-testid='event-row']").first();
+    await expect(eventRow).toBeVisible({ timeout: 10_000 });
+    await expect(eventRow.getByText(translated.description!)).toBeVisible();
+    await expect(eventRow.getByText("Transfer")).toBeVisible();
+  });
+
+  test("shows live indicator when WebSocket is connected", async ({ page }) => {
+    await page.goto("/dashboard");
+    await page.waitForLoadState("networkidle");
+
+    const liveButton = page.getByRole("button", { name: /live feed/i });
+    await expect(liveButton).toBeVisible();
+    await liveButton.click();
+
+    await expect(page.getByRole("button", { name: /stop live/i })).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect(page.locator(".animate-pulse")).toBeVisible();
+  });
+});

lib/hooks/useLiveFeed.ts

@@ -131,7 +131,7 @@ export function useLiveFeed(onEvent: (event: TranslatedEvent) => void): LiveFeed
       setNewEventIds((prev) => new Set(prev).add(event.raw.id));
 
       // Remove the highlight badge after the animation completes (600 ms).
-      setTimeout(() => {
+      const timeoutId = setTimeout(() => {
         setNewEventIds((prev) => {
           const next = new Set(prev);
           next.delete(event.raw.id);

lib/stellar/indexer.ts

@@ -499,6 +499,10 @@ export interface StreamingIndexerOptions {
    * Called on the consumer thread — safe to perform async work.
    */
   onDag?: (dag: ExecutionDag) => void | Promise<void>;
+  /** Optional durable state store for resuming from the last processed ledger. */
+  stateStore?: IngestionStateStore;
+  /** Number of ledgers to look back on cold start. */
+  coldStartLookbackLedgers?: number;
 }
 
 /**
@@ -556,7 +560,7 @@ export function startHorizonStreamingIndexer(options: StreamingIndexerOptions):
   stop: () => void;
   getMetrics: () => IngestionPoolMetrics;
 } {
-  const { networkConfig, contractIds, onEvent, onError, workerCount, maxQueueSize, onDag } = options;
+  const { networkConfig, contractIds, onEvent, onError, workerCount, maxQueueSize, onDag, stateStore, coldStartLookbackLedgers } = options;
   const server = new Horizon.Server(networkConfig.horizonUrl);
 
   let isRunning = true;

package.json

@@ -100,6 +100,7 @@
     "ws": "^8.21.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.51.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/bull": "^4.10.4",

playwright.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Playwright E2E test configuration for Open-Audit
+ *
+ * Tests the core data flow: Soroban RPC event → WebSocket → Translated text in DOM
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? [["html"], ["github"]] : "html",
+  use: {
+    baseURL: process.env.PLAYWRIGHT_BASE_URL ?? "http://localhost:3000",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: "npx ts-node --project tsconfig.server.json server.ts",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+    stdout: "pipe",
+    stderr: "pipe",
+    env: {
+      E2E_TEST_MODE: "true",
+      NEXT_PUBLIC_NETWORK: "testnet",
+      DATABASE_URL:
+        process.env.DATABASE_URL ??
+        "postgresql://openaudit:openaudit@localhost:5432/openaudit",
+    },
+  },
+});