# US-1 Review Fixes — Agent Instructions

Date: 2026-03-05
Origin: Code review and exploratory browser testing of US-1 "Create Event"

## Context

US-1 has been implemented across all 7 phases (OpenAPI spec, DB migration, domain model, application service, persistence adapter, web adapter, frontend). All 42 tests pass. A code review with exploratory browser testing found 2 bugs and 2 minor issues that need to be fixed before the story can be committed.

### Resources

- **Test report:** `.agent-tests/2026-03-05-us1-review-test/report.md` — full browser test protocol with screenshots
- **Screenshots:** `.agent-tests/2026-03-05-us1-review-test/screenshots/` — visual evidence (01–08)
- **US-1 spec:** `spec/userstories.md` — acceptance criteria
- **Implementation plan:** `docs/agents/plan/2026-03-04-us1-create-event.md`
- **Design system:** `spec/design-system.md`
- **Primary file to modify:** `frontend/src/views/EventCreateView.vue`
- **Secondary file to modify:** `frontend/index.html`

## Fix Instructions

### Fix 1: Validation errors must clear reactively (Bug — Medium)

**Problem:** After submitting the empty form, validation errors appear correctly. But when the user then fills in the fields, the error messages persist until the next submit. See screenshot `05-form-filled.png` — all fields filled, errors still visible.

**Root cause:** `validate()` (line 125) calls `clearErrors()` only on submit. There is no reactive clearing on input.

**Fix:** Add a `watch` on the `form` reactive object that clears the corresponding field error when the value changes. Do NOT re-validate on every keystroke — just clear the error for the field that was touched.

```typescript
// Clear individual field errors when the user types
watch(() => form.title, () => { errors.title = '' })
watch(() => form.dateTime, () => { errors.dateTime = '' })
watch(() => form.expiryDate, () => { errors.expiryDate = '' })
```

Also clear `serverError` when any field changes, so stale server errors don't linger.

**Test:** Add a test to `frontend/src/views/__tests__/EventCreateView.spec.ts` that:
1. Submits the empty form (triggers validation errors)
2. Types into the title field
3. Asserts that the title error is cleared but other errors remain

### Fix 2: Network errors must show a user-visible message (Bug — High)

**Problem:** When the backend is unreachable, the form submits silently — no error message, no feedback. The `serverError` element (line 77) exists but is never populated because `openapi-fetch` throws an unhandled exception on network errors instead of returning an `{ error }` object.

**Root cause:** `handleSubmit()` (line 150) has no `try-catch` around the `api.POST()` call (line 164). When `fetch` fails (network error), `openapi-fetch` throws, the promise rejects, and the function exits without setting `serverError` or resetting `submitting`.

**Fix:** Wrap the API call and response handling in a `try-catch`:

```typescript
try {
  const { data, error } = await api.POST('/events', { body: { ... } })

  submitting.value = false

  if (error) {
    // ... existing error handling ...
    return
  }

  if (data) {
    // ... existing success handling ...
  }
} catch {
  submitting.value = false
  serverError.value = 'Could not reach the server. Please try again.'
}
```

**Test:** Add a test to `EventCreateView.spec.ts` that mocks the API to throw (simulating network failure) and asserts that `serverError` text appears in the DOM.

### Fix 3: Page title (Minor — Low)

**Problem:** `frontend/index.html` line 7 still has `<title>Vite App</title>`.

**Fix:** Change to `<title>fete</title>`. Also set `lang="en"` on the `<html>` tag (line 2 currently has `lang=""`).

**File:** `frontend/index.html`

### Fix 4: Favicon (Minor — Low)

**Problem:** The favicon is the Vite default. The project should either have its own favicon or remove the link entirely.

**Fix:** For now, remove the `<link rel="icon" href="/favicon.ico">` line and delete `frontend/public/favicon.ico` if it exists. A proper favicon can be added later as part of branding work.

**File:** `frontend/index.html`, `frontend/public/favicon.ico`

## Execution Order

1. Fix 3 + Fix 4 (trivial, `index.html` + favicon cleanup)
2. Fix 1 (reactive error clearing + test)
3. Fix 2 (try-catch + test)
4. Run all frontend tests: `cd frontend && npm run test:unit`
5. Verify visually with `browser-interactive-testing` skill:
   - Start dev server, open `/create`
   - Submit empty → errors appear
   - Fill title → title error clears, others remain
   - Fill all fields → all errors gone
   - Submit with no backend → "Could not reach the server" message appears

## Constraints

- Follow existing code style and patterns in `EventCreateView.vue`
- Do not refactor unrelated code
- Do not add dependencies
- Tests must follow existing test patterns in `EventCreateView.spec.ts`
- TDD: write/update tests first, then fix
