Add frontend test infrastructure (Vitest + Playwright)

[oleksandr-korin]

Summary

The Trinity frontend currently has zero automated test coverage. There is no unit test runner, no E2E tooling, and (until PR #553) no CI workflow that even built the frontend on PRs. This is a project-wide gap that affects every UI change, not a #67-specific concern — surfacing it as a P2 ticket.

Current state

Layer	Today	Coverage
Tailwind config / tokens	npm run check:tokens (added #553)	Catches palette-alias drift + token typos
Build smoke	frontend-build.yml (added #553)	npm ci && npm run build
Unit tests	—	None
Component tests	—	None
E2E / visual regression	—	None
Type checking	—	None (no tsconfig, no vue-tsc)

src/frontend/package.json lists no vitest, jest, @vue/test-utils, playwright, cypress, or @testing-library/* dependency.

Proposed additions

Phase 1 — Vitest for unit + component tests

• Add vitest, @vue/test-utils, jsdom (or happy-dom)
• Configure vitest.config.js co-located with vite.config.js
• Cover the most leverage-y units first:
  • composables/useFormatters.js (formatters, color helpers)
  • utils/syncHealth.js (status classification)
  • Pinia stores (stores/agents.js, stores/auth.js)
  • Critical components (StatusIndicator.vue, CapacityMeter.vue, status badges)
• Add npm run test and npm run test:watch scripts
• Wire into CI (frontend-build.yml)

Phase 2 — Playwright for E2E + visual regression

• Add @playwright/test
• e2e/ directory with smoke flows: login, agent list, agent detail, schedule create
• Optional: visual snapshots for the migrated design-system components (issue Add centralized design system with semantic color tokens #67 follow-up)
• Run against dockerized stack in CI (separate job, allowed-to-fail initially)

Phase 3 — Type checking

• Add vue-tsc
• Strict mode opt-in per file/directory
• npm run typecheck script in CI

Acceptance

• Phase 1 minimum: Vitest installed, ≥10 representative unit/component tests, runs in CI on every frontend PR
• Phase 2 minimum: Playwright installed, ≥3 smoke E2E flows passing in CI
• Phase 3 minimum: vue-tsc passes on at least the new test files and tailwind.config.js
• All three runners wired into frontend-build.yml (or sibling workflows)
• Brief contributor docs in src/frontend/README.md explaining how to run each layer

Why P2 not P1

• No production incidents from missing frontend tests yet (mitigated by manual review + small contributor pool).
• Backend tests are comprehensive (~2,000+ pytest tests).
• Adding test infra is a commitment — flaky tests, snapshot maintenance, CI time. Worth doing well, not rushed.

Cross-references

• Spawned from PR feat(frontend): semantic status color tokens (#67) #553 / issue Add centralized design system with semantic color tokens #67 review discussion — the design-system PR landed without component tests because no runner existed.
• .claude/agents/test-runner.md describes the backend test runner. A frontend equivalent should be added once Phase 1 lands.

[oleksandr-korin]

/claim

[github-actions]

@oleksandr-korin This issue is already assigned to oleksandr-korin. Use /unclaim first if you want to take over.