# AGENTS.md

## Project intent
Build a Vue-based PWA in the project root named **Sanasto**. The UI should mirror the look and feel of the Rails app in `../sanasto.wiki`.

## Design alignment (from `../sanasto.wiki`)
- Use a light, airy UI with slate neutrals and indigo/emerald accents.
- Typography: clean, sans-serif with bold headlines and uppercase micro-labels.
- Layout: full-height table view, sticky header row, sticky first column, and scrollable grid.
- UI motifs: rounded pills/tags, soft borders, subtle shadows, and inline badges.
- Primary colors:
  - Indigo for primary actions and highlights.
  - Emerald for positive states (e.g., "complete").
  - Amber for warnings (e.g., "unverified").
  - Red tint for rows with missing translations.

## Data/API
- Swagger: `https://sanasto.rin.no/api/swagger`
- Endpoint: `GET /api/entries?since=ISO8601`
- Entry fields: `id`, `category`, `fi`, `en`, `sv`, `no`, `ru`, `de`, `updated_at`.

## Offline + sync
- Use SQLite for storage (web-friendly: `sql.js` or a similar WASM-backed SQLite).
- Keep a `meta` table for sync state (`last_sync_at` in ISO8601).
- On app start and when online:
  1) Fetch `GET /api/entries?since=<last_sync_at>`.
  2) Upsert entries by `id`.
  3) Update `last_sync_at` to the max `updated_at` seen.
- The public API is read-only; any local edits should be treated as local-only unless a write API is added.

## PWA requirements
- Installable manifest with name `Sanasto`.
- Service worker for asset caching + offline shell.
- Clear offline/online indicator and last sync time.

## Implementation constraints
- App location: project root.
- Build output: `dist`.
- Prefer clear, maintainable components over excessive abstraction.
- Preserve the Rails app visual language; avoid introducing a new design system.