eval_752
  • English

      • Frontend Development

      Frontend development guide for eval_752.

      Tech Stack

      • React 19
      • Vite
      • TypeScript
      • React Router
      • TanStack Query
      • Tailwind CSS
      • shadcn/ui

      Project Structure

      frontend/src/
├── app/           # Routes and layouts
├── components/    # Reusable UI components
├── features/      # Feature modules
├── hooks/         # Custom React hooks
└── api/           # API clients and query helpers

      Development Setup

      cd frontend
pnpm install
pnpm dev

      During local development, the Vite server proxies same-origin /api/* calls to the backend. The Docker preview image uses frontend/scripts/preview-server.cjs for the same contract, so the SPA can ship with VITE_API_BASE_URL=/api by default.

      Quality Standards

      pnpm lint
pnpm typecheck
pnpm test
pnpm test:e2e

      Key Patterns

      • shared surface primitives reused across Dashboard, Runs, and Comparison
      • event-driven reducers for active run surfaces
      • TanStack Query for list and snapshot hydration
      • accessibility-first interactions with reduced-motion fallbacks
      • shared locale catalogs and browser/manual locale resolution

      Active Runs Architecture

      The active runs board is built from three layers:

      1. /runs/active snapshot hydration
      2. /runs/events SSE updates
      3. a reducer that merges run_status, run_progress, and run_item

      This keeps the Runs page responsive under multi-run activity without relying on full-page refetches for every item transition.

      For localization conventions, see Internationalization.